/* Common */
:root {
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

    --accent-background-color: #212121;
    --accent-background-color-light: #4d4d4d;

    --accent-font-color-light: #d3d3d3;
    --accent-font-color-dark: #4d4d4d;

    --color-text-white: #fbfbfb;
    --color-text-white-dark: #ddd;
    --color-text-white-very-dark: #999;

    --color-text-grey: #777;
    --muted-text-color: #eee;

    --color-text-black: #222;
    --color-text-black-light: #333;
    --color-text-black-very-light: #555;
    
    --color-green: #1aaa55;
    --color-green-hover: #2ead62;
    
    --color-blue: #1e78d0;
    --color-blue-hover: #3886d2;
    
    --color-red: #db3b21;
    --color-red-hover: #e05a44;
    
    --color-yellow: #fc9403;
    --color-yellow-hover: #ffa528;
    
    --color-grey: #8a8888;
    --color-grey-hover: #a2a2a2;

    --color-border: #e4e4e4b3;
    --color-text-muted: #777;

    --color-hover-background: #ececec91;
    --color-hover-background-dark: #dadada96;

    --default-icon-radius: 20%;
    --dialog-radius: 10px;

    --content-width: 1170px;
}
body {
    font-family: var(--font);
    padding-right: 0px !important;
    position: relative;
    overflow: hidden;
    height: 100%;
    min-width: 320px;
} 

#body-wrapper {
    position: relative;
    overflow: hidden;
    height: 100%;
    width: 100%;
}
html {
    height: 100%;
    overflow-x: hidden;
}
label {
    font-weight: 600;
}
pre {
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
}
hr {
    border-top: 1px solid var(--color-border);
}
b, 
strong {
    font-weight: 500;
}
a {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

@keyframes sliderAAnimation {
    from { left: 0%; width: 0%; }
    20% { left: 0%; width: 40%; }
    50% { left: 40%; width: 60% }
    75% { left: 100%; width: 100% }
    to { left: 100%; width: 100% }
}

@keyframes sliderBAnimation {
    from { left: 0%; width: 0%; }
    60% { left: 0%; width: 0%; }
    70% { left: 0%; width: 30%; }
    80% { left: 30%; width: 50%; }
    to { left: 100%; width: 70% }
}

#connection-status {
    background: var(--color-grey);
    border: 2px solid white;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    position: absolute;
    right: -2px;
    bottom: 0px;
    transition: background 0.1s;
    opacity: 0.8;
}
#navigation-loading-bar {
    width: 100%; 
    height: 0px;
    width: 100%;
    position: relative;
    overflow: hidden;
    background: var(--accent-font-color-light);
}

#navigation-loading-bar .first {
    animation: sliderAAnimation 4s infinite linear;
}

#navigation-loading-bar .second {
    animation: sliderBAnimation 4s infinite linear;
}

#navigation-loading-bar .first,
#navigation-loading-bar .second {
    background: var(--accent-background-color-light);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    transform-origin: left;
}
.list-group-item {
    border-color: var(--color-border);
}
.user-icon {
    background: url(/img/icons/user-name.svg) no-repeat;
    background-size: 13px 13px;
    padding-right: 30px;
    background-position: right 10px center;
}
.password-icon {
    background: url(/img/icons/password.svg) no-repeat;
    background-size: 13px 13px;
    padding-right: 30px;
    background-position: right 10px center;
}
.name-icon {
    background: url(/img/icons/unique-name.svg) no-repeat;
    background-size: 13px 13px;
    padding-right: 30px;
    background-position: right 10px center;
}
.password-visibility-switch {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    text-align: center;
    cursor: pointer;
    transition: background 0.1s;
}
.password-visibility-switch img {
    width: 13px;
    height: 13px;
    vertical-align: middle;
}

.arn-create-btn {
    height: 24px;
    border-radius: 6px;
    text-align: center;
    cursor: pointer;
    transition: background 0.1s;
    z-index: 1;
    font-size: 85%;
    padding: 4px 9px;
}

.highlight-search {
    background-color: var(--color-yellow) !important;
    color: #333 !important;
    border-radius: 0px !important;
    margin: 0px !important;
    padding: 0px !important;
}
button .highlight-search {
    background-color: transparent !important;
}
.dark-link:hover,
.dark-link:active,
.dark-link {
    color: #2e2e2e;
}
url {
    cursor: pointer;
}
url:hover {
    text-decoration: underline;
}
.active > url,
.active > * > url {
    color: var(--muted-text-color) !important;
}
.active > url.black-link, 
.active > * > url.black-link {
    color: var(--color-text-black-light) !important;
}
.text-muted > url,
.text-muted > * > url {
    color: #777 !important;
}
.text-muted > url.black-link, 
.text-muted > * > url.black-link {
    color: var(--color-text-black-light) !important;
}
.text-muted-invert {
    color: var(--muted-text-color);
}
.linkified {
    max-width: 500px;
    display: inline-block !important;
    vertical-align: top;
    font-weight: 600;
    margin-left: 5px;
    margin-right: 5px;
}
#shortcuts-navbar a {
    padding: 5px;
    padding-left: 0px;
    display: block;
}
#shortcuts-navbar a.active {
    color: var(--accent-background-color);
    font-weight: 600;
}
.sticky-low {
    position: fixed;
    top: 50px;
}
.sticky-medium {
    position: fixed;
    top: 110px;
}
.sticky-big {
    position: fixed;
    top: 170px;
}
#settings-submit {
    position: absolute;
    bottom: -55px;
    background-color: #fff;
    padding: 10px;
    width: calc(100% - 8px);
    height: 55px;
    border-top: 1px solid var(--color-border);
    transition: bottom 0.1s;
    z-index: 999;
}
#settings-submit.open {
    bottom: 0px;
}
.settings-form-group:hover .glyphicon {
    display: inline;
}
.settings-form-group:hover .setting-more-btn {
    display: inline-block !important;
}    
.no-javascript {
    text-align: center;
    padding: 20px;
}
.color-sample {
    box-shadow: 0 2px 8px 0px rgba(0, 0, 0, .1);
    width: 28px;
    height: 28px;
    border-radius: var(--default-icon-radius);
    display: inline-block;
}
.group-circle {
    cursor: pointer;
}

/* Hover */
.hover-light-grey:hover {
    background-color: var(--color-text-white) !important;
    transition: all 0.1s;
}

/* Active state */  
.shine-anim:after {
    animation: shine 5s ease-in-out  infinite;
    animation-fill-mode: forwards;
    content: "";
    position: absolute;
    top: -110%;
    left: -210%;
    width: 200%;
    height: 200%;
    opacity: 0;
    transform: rotate(30deg);
    background: rgba(255, 255, 255, 0.13);
    background: linear-gradient(
    to right,
        rgba(255, 255, 255, 0.13) 0%,
        rgba(255, 255, 255, 0.13) 77%,
        rgba(255, 255, 255, 0.5) 92%,
        rgba(255, 255, 255, 0.0) 100%
    );
}

@keyframes shine {
    10% {
        opacity: 1;
        top: -30%;
        left: -30%;
        transition-property: left, top, opacity;
        transition-duration: 0.7s, 0.7s, 0.15s;
        transition-timing-function: ease;
    }
    100% {
        opacity: 0;
        top: -30%;
        left: -30%;
        transition-property: left, top, opacity;
    }
}

/* JSON preview */
.json-preview .string {
    color: var(--color-green);
}
.json-preview .number {
    color: var(--color-yellow);
}
.json-preview .boolean {
    color: var(--color-blue);
}
.json-preview .null {
    color: var(--color-red);
}
.json-preview .key {
    color: var(--color-text-white);
}

/* Interstitial container */
.interstitial-container {
    position: relative;
    margin: auto;
    width: 100%;
}

.interstitial-container:after {
    content: "";
    display: block;
    padding-bottom: 100%;
}

.interstitial-container > .interstitial-container-content {
    position: absolute;
    width: 100%;
    height: 100%;
}

/* Tooltip */
.tooltip {
    position: relative;
    display: inline-block;
}
.tooltip .tooltiptext {
    visibility: hidden;
    background-color: var(--accent-background-color);
    color: var(--color-text-white);
    text-align: center;
    border-radius: 4px;
    padding: 10px;
    position: absolute;
    z-index: 1;
    top: 135%;
    left: 50%;
    opacity: 0;
    margin-left: calc(-50% - 3px);
    transition: opacity .1s;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 12px;
    line-height: 12px;
    display: inline-table;
    z-index: 5;
    font-weight: 400;
    white-space: nowrap;
}
.tooltip .tooltiptext.top {
    top: auto;
    bottom: 135%;
}
.tooltip .tooltiptext.black {
    background-color: #000;
}
.tooltip .tooltiptext.right {
    margin-left: auto;
    margin-right: calc(-50% + 3px);
    left: auto !important;
    right: 50% !important;
}
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 10px;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent var(--accent-background-color) transparent;
}
.tooltip .tooltiptext.top::after {
    bottom: -10px;
    transform: rotate(180deg);
}
.tooltip .tooltiptext.black::after {
    border-color: transparent transparent #000 transparent;
}
.tooltip .tooltiptext.right::after {
    left: auto !important;
    right: 10px !important;
}
.tooltip .tooltiptext.center {
    margin-left: 0px;
    right: auto !important;
    transform: translateX(-50%);
}
.tooltip .tooltiptext.center::after,
.tooltip .tooltiptext.center-arrow::after {
    left: calc(50%);
}
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}
.tooltip .tooltiptext .text-muted {
    color: var(--color-text-white-dark);
}
.dropdown-menu.tooltip {
    border: 0px
}
.dropdown-menu.tooltip .tooltiptext {
    visibility: visible;
    opacity: 1;
    position: relative;
    margin: 0px;
    padding: 0px;
    overflow: inherit;
}
.dropdown-help {
    width: 400px !important;
    padding: 0px !important;
    overflow: inherit !important;
    box-shadow: none !important;
    max-height: initial !important;
    z-index: 1000 !important;
    border: 0px solid !important;
}
.dropdown-help > div {
    padding: 10px;
}
.dropdown-help > div:empty {
    padding-bottom: 0px;
}
.dropdown-help .header {
    padding: 16px 15px;
    font-size: 18px;
    border-top-left-radius: var(--dialog-radius);
    border-top-right-radius: var(--dialog-radius);
    color: var(--color-text-black);
    pointer-events: all;
}
.dropdown-help .content {
    max-height: 50vh;
    height: 50vh;
    overflow-y: auto;
    overflow-x: hidden;
    pointer-events: all;
}
#help-tabs,
.dropdown-help .footer {
    pointer-events: all;
}
.dropdown-help .content > div:not(.alert-container) {
    padding: 10px;
    background: white;
    color: black;
    border-radius: 3px;
}
.dropdown-help .content > div.alert-container {
    margin-top: 0px;
}
.dropdown-help .content > div:last-child {
    margin-bottom: -10px;
}
.dropdown-help .content > div:not(:last-child) {
    margin-bottom: 10px;
}
.dropdown-help .close-button {
    padding: 3px 13px;
    padding-bottom: 7px;
    margin: 7px;
    cursor: pointer;
    border-radius: var(--dialog-radius);
    position: absolute;
    right: 0px;
    top: 0px;
    transition: all 0.1s;
    font-size: 20px;
}
#navbar-container {
    max-width: var(--content-width);
    margin: auto;
    position: relative;
}

/* Drag and drop */
.drag-and-drop {
    border: 1px dashed #555;
    opacity: 1.0;
    position: relative;
    z-index: 1;
}
.drag-and-drop .name {
    position: absolute;
    margin: auto;
    top: 50%;
    left: 50%;
}
.drag-and-drop :not(:last-child) {
    opacity: 0.4;
}

/* Scroll bar */
.typeahead.dropdown-menu::-webkit-scrollbar-track,
.vertical-scroll::-webkit-scrollbar-track {
    background-color: #F5F5F5;
}
.typeahead.dropdown-menu::-webkit-scrollbar-thumb,
.typeahead.dropdown-menu::-webkit-scrollbar,
.vertical-scroll::-webkit-scrollbar-thumb,
.vertical-scroll::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: #F5F5F5;
}
.typeahead.dropdown-menu::-webkit-scrollbar-thumb,
.vertical-scroll::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: #ccc;
}

.editor-tree-scroll::-webkit-scrollbar-track {
    background-color: transparent;
}
.editor-tree-scroll::-webkit-scrollbar-thumb,
.editor-tree-scroll::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: transparent;
}
.editor-tree-scroll::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgb(0, 0, 0, 0);
}
.editor-tree-scroll:hover::-webkit-scrollbar-thumb {
    background-color: rgb(0, 0, 0, 0.4);
}
.dropup.open > .dropdown-menu .simple-list,
.dropdown.open > .dropdown-menu .simple-list {
    visibility: visible !important;
}
.dropdown-caret {
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: 0px !important;
}

/* Spinner */
.spinner {
    border: 2px solid #f3f3f3;
    border-top: 2px solid var(--accent-background-color);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 300ms linear infinite;
    margin: auto;
    margin-top: 15px;
    margin-bottom: 15px;
}
.spinner.small {
    width: 15px;
    height: 15px;
}
.spinner.in-btn {
    display: inline-grid;
    width: 15px;
    height: 15px;
    margin-top: 3px;
    margin-bottom: -2px;
    margin-right: 2px;
    margin-left: -2px;
    border-top: 2px solid var(--color-grey-hover);
}

/* Server log box */
.server-log-box {
    margin: 0px;
    vertical-align: middle;
    display: inline-table;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.1s;
}
.server-log-box div,
.server-log-box b {
    margin-left: 6px;
    margin-right: 6px;
}
.server-log-box:hover {
    background: var(--color-hover-background);
}
.server-log-box.dark:hover {
    background: var(--color-hover-background-dark);
}
.server-log-box-heading {
    border: 0px;
    border-bottom: 1px solid var(--color-border);
}
/* Player debug */
.pl-alert-root:not(:empty) {
    margin-bottom: 10px !important;
}
.pl-debug-root {
    font-size: 85%;
    position: relative;
    background: var(--color-hover-background);
    border-radius: 7px;
    margin-bottom: 10px;
    padding: 5px;
    border: 1px solid transparent;
    transition: all 0.1s;
}
.pl-debug-root:hover {
    background: #fff;
    border: 1px solid var(--muted-text-color);
    box-shadow: -1px 1rem 2rem 0px rgba(0, 0, 0, .1);
}
.pl-debug-request-root {
    padding-top: 25px;
}
.pl-debug-val {
    padding: 3px;
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 6px;
    margin: 5px;
    margin-top: 0px;
    margin-right: 0px;
    background: #00000005;
    display: inline-block;
    transition: color, background 0.1s;
}
.pl-debug-val.clickable:hover {
    cursor: pointer;
    color: #fff;
    background: var(--accent-background-color);
    box-shadow: -1px 1rem 2rem 0px rgba(0, 0, 0, .1);
}
.pl-debug-val.yellow {
    color: var(--color-yellow);
}
.pl-debug-val.green {
    color: var(--color-green);
}
.pl-debug-val.red {
    color: var(--color-red);
}
.pl-debug-cmd-name {
    padding: 5px;
    padding-bottom: 2px;
    padding-left: 10px;
    padding-right: 10px;
    position: relative;
}
.pl-debug-details > div {
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 20px;
    padding-top: 10px;
    word-break: break-all;
    text-align: center;
}
.pl-debug-details:hover {
    background-color: transparent !important;
}

/* Helpers */
.hid {
    display: none;
}
.truncate {
    display: block;
    white-space: nowrap; 
    text-overflow: ellipsis;
    overflow: hidden;
}
li a.dropdown-item.truncate{
    padding: 0
}
.truncate-dropdown-name {
    max-width: 150px;
    display: inline-block;
    white-space: nowrap; 
    text-overflow: ellipsis;
    overflow: hidden;
    vertical-align: top;
    font-weight: 600;
}

/* Side bar */
@media (min-width: 1199px) {
    .sidebar-left {
        padding-left: 225px !important;
        max-width: 1395px !important;
    }
}
.sidebar {
    transition: width 0.3s, left 0.3s;
    position: fixed;
    z-index: 600;
    width: 220px;
    bottom: 0;
    top: 0;
    background-color: #fafafa;
    transform: translate3d(0, 0, 0);
}

.sidebar.left {
    left: 0px;
    box-shadow: inset -1px 0 0 #e5e5e5;
}

/* Navigation bar */
.main-navbar {
    background-color: var(--accent-background-color);
    min-height: 0px;
    margin: 0px;
    padding-left: 2px;
    padding-right: 2px;
    border: 0px;
    font-size: 12px;
    border-radius: 0px;
}
.main-navbar .navbar-nav.navbar-right {
    margin-right: 0px !important;
}
.main-navbar .navbar-nav>li>.dropdown-menu {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    z-index: 4000;
    overflow: inherit;
}
.main-navbar .navbar-nav>li.disabled>a,
.main-navbar .navbar-nav>li>a {
    border-radius: 6px;
    padding: 6px 8px;
    margin: 4px 2px;
    border: 0px;
    color: var(--accent-font-color-light);
    transition: color, background-color 0.1s;
    transform: translateZ(0);
}
.main-navbar .navbar-nav>li.disabled>a:hover,
.main-navbar .navbar-nav>li.disabled>a:focus,
.main-navbar .navbar-nav>li>a:hover,
.main-navbar .navbar-nav>li>a:focus {
    background-color: var(--accent-background-color-light);
    color: var(--color-text-white);
    outline: 0;
}
.main-navbar .navbar-nav>.active>a,
.main-navbar .navbar-nav>.open>a,
.main-navbar .navbar-nav>.active>a:hover,
.main-navbar .navbar-nav>.open>a:hover,
.main-navbar .navbar-nav>.active>a:focus,
.main-navbar .navbar-nav>.open>a:focus {
    background-color: #fff;
    color: var(--accent-font-color-dark) !important;
}
#tnb-dashboard-main>a {
    color: var(--color-text-white);
}
#dashboard-btn-root {
    top: 3px; 
    left: 4px; 
    position: absolute; 
    width: 26px; 
    height: 26px; 
    border-radius: 4px;
    overflow: hidden;
}
#dashboard-btn-name {
    text-align: right;
    padding-bottom: 7px;
    line-height: 9px;
    padding-left: 28px;
    width: 100%;
    font-size: 18px;
    font-weight: 600;
    font-variant: all-small-caps;
    letter-spacing: -0.5px;
    transition: all 0.1s;
}
#dashboard-btn-type {
    padding-left: 27px;
    bottom: 3px;
    line-height: 3px;
    margin-bottom: 2px;
    right: 8px;
    font-variant: small-caps;
    font-size: 8px;
    font-weight: 600;
    text-align: right;
    transition: all 0.1s;
}
.nav-header-mobile-btn {
    position: relative;
}
.nav-header-mobile-btn .badge {
    position: absolute; 
    left: 27px;
    top: 0px;
    border: 0px;
    display: none;
}
.navbar-header img {
    width: 40px;
    padding: 5px;
    padding-top: 3px;
    padding-bottom: 3px;
    margin: 5px;
    border-radius: 4px;
    cursor: pointer;
    float: left;
    border: 0px;
}
.navbar-header .notification-icon,
.navbar-header .profile-icon {
    margin: 5px;
    margin-left: 2px;
    border-radius: 4px;
    padding: 5px;
    padding-top: 7px;
    padding-bottom: 3px;
    padding-left: 4px;
    float: right;
    border: 0px;
    cursor: pointer;
    font-size: 18px;
    color: #fff;
    width: 40px;
    text-align: center;
}
.navbar-header .notification-icon:hover,
.navbar-header .profile-icon:hover,
.navbar-header img:hover {
    background-color: var(--accent-background-color-light) !important;
}
#navigation-mobile .tnb-active-item.active,
#navigation-mobile .tnb-active-item.active:hover,
#navigation-mobile .tnb-active-item.active:focus {
    background-color: #fff !important;
    color: var(--accent-font-color-dark) !important;
}
#mobile-navbar .navbar-nav>li.disabled>a,
#mobile-navbar .navbar-nav>li>a {
    border-radius: 4px;
    margin: 4px 2px;
    border: 0px;
    color: #333;
    margin-left: 7px;
    margin-right: 7px;
    padding-left: 10px;
}
#mobile-navbar .navbar-nav>li.disabled>a:hover,
#mobile-navbar .navbar-nav>li.disabled>a:focus,
#mobile-navbar .navbar-nav>li>a:hover,
#mobile-navbar .navbar-nav>li>a:focus {
    color: #333;
}
#mobile-navbar .navbar-nav>.active>a,
#mobile-navbar .navbar-nav>.open>a,
#mobile-navbar .navbar-nav>.active>a:hover,
#mobile-navbar .navbar-nav>.open>a:hover,
#mobile-navbar .navbar-nav>.active>a:focus,
#mobile-navbar .navbar-nav>.open>a:focus {
    background-color: var(--accent-background-color);
    color: #fff;
}
#mobile-navbar {
    position: fixed;
    z-index: 5000;
    width: 100%;
    background-color: rgba(0,0,0,0);
    visibility: hidden;
    transition-property: visibility, background;
    transition-duration: 250ms, 250ms;
    transition-timing-function: linear, cubic-bezier(.02, .01, .47, 1);
    transition-delay: 0ms 0ms;
}
#mobile-navbar.open {
    background-color: rgba(0,0,0,0.5);
    transition-delay: 250ms 0ms;
    visibility: visible;
}
#mobile-navbar .options {
    margin: 0px;
    width: 270px;
    height: 100%;
    background-color: #fff;
    box-shadow: 10px 0px 20px 0px rgba(0, 0, 0, 0.12);
    transition-property: transform;
    transition-duration: 250ms;
    transition-timing-function: cubic-bezier(.02, .01, .47, 1);
    transform: translateX(-270px);
    overflow-y: scroll;
    overflow-x: hidden;
}
#mobile-navbar .options::-webkit-scrollbar { 
    display: none; 
}
#mobile-navbar.open .options {
    transform: translateX(0px);
}
#navbar-search-input::placeholder {
    color: var(--accent-font-color-dark);
}
#navbar-search-input {
    border: 0px;
    padding: 0px;
    color: var(--color-text-black);
    background: transparent;
    display: inline-block;
    visibility: hidden;
    opacity: 0;
    width: 0px;
    transition: all 0.1s;
}
#navbar-search-tag {
    display: none;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: -5px;
    border-right: 1px solid var(--accent-background-color);
    min-width: 70px;
    text-align: center;
}
.dropdown.open #navbar-search-tag.open ~ #navbar-search-input {
    padding-left: 70px;
}
.dropdown.open #navbar-search-input {
    visibility: visible;
    opacity: 1;
    width: 400px;
    margin-left: 5px;
    margin-right: 10px;
}
.dropdown.open #navbar-search-tag.open {
    display: inline-block;
    margin-right: -65px;
}
#navbar-search-input:active,
#navbar-search-input:hover,
#navbar-search-input:focus {
    outline: 0 !important;
}

/* Celebration */

body.celebrate #login-top-header,
body.celebrate .main-navbar {
    background-color: var(--accent-background-color);
    background-image: linear-gradient(45deg, var(--accent-background-color-light) 25%, transparent 25.5%, transparent 50%, 
        var(--accent-background-color-light) 50.5%, var(--accent-background-color-light) 75%, transparent 75.5%, transparent);
    background-size: 80px 80px;
    -webkit-animation: slide 20s linear infinite;
}
body.celebrate .main-navbar .navbar-nav>li.disabled>a:hover,
body.celebrate .main-navbar .navbar-nav>li.disabled>a:focus,
body.celebrate .main-navbar .navbar-nav>li>a:hover,
body.celebrate .main-navbar .navbar-nav>li>a:focus {
    background-color: #fff;
    color: var(--accent-font-color-dark) !important;
}

@-webkit-keyframes slide {
    from { background-position: 0 0; }
    to { background-position: -400px 0; }
}

/* Footer */
#page-footer {
    border-top: 1px solid var(--color-border);
    width: 100%;
    padding: 5px;
    padding-top: 2px;
    position: sticky;
    bottom: 0px;
    background: white;
    z-index: 999;
}
#page-footer {
    height: 40px;
}
#page-footer-desktop,
#page-footer-icon {
    display: none;
}
#page-footer-info {
    font-size: 11px;
    margin-top: 1px;
}
#page-footer-time {
    font-size: 10px;
    margin-top: 0px;
}
#server-time-button {
    background: white;
    border: none;
}
#server-time-button:hover {
    text-decoration: underline;
}

/* Pagination */
.pagination-root .active,
.pagination-root .accent {
    background-color: var(--accent-background-color);
    color: var(--color-text-white);
    border-radius: 4px;
}
.pagination-root .separator,
.pagination-root .page {
    height: 30px;
    min-width: 30px;
    border-radius: 6px;
    display: inline-block;
    text-align: center;
    line-height: 30px;
    margin: 3px;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 0px;
    font-size: 12px;
}
.pagination-root.buttons .page:not(.active):not(.accent) {
    line-height: 27px;
    color: var(--accent-background-color);
    border: 1px solid var(--accent-background-color-light);
}
.pagination-root.small.buttons .page:not(.active):not(.accent) {
    line-height: 23px;
}
.pagination-root .page:not(.active) {
    cursor: pointer;
    transition: background 0.1s;
}
.pagination-root .page:not(.active):not(.accent):hover {
    background-color: var(--color-hover-background);
}
.pagination-root .page.disabled {
    opacity: 0.7;
}

#pagination-left {
    font-size: 13px; 
    padding: 5px;
    padding-left: 0px;
    padding-right: 0px;
}
#pagination-right {
    font-size: 13px; 
    padding: 0px;
}
#pagination-dropup {
    position: relative; 
    display: inline-block;
}
#pagination-dropup .page {
    display: inline-block; 
    padding-left: 8px; 
    padding-right: 8px;
    margin-left: 30px; 
    margin-right: 0px;
}
#pagination-dropup .dropdown-menu {
    min-width: 80px;
}

/* Alert buttons */
.alert-container .alert-root {
    padding-left: 38px;
}
.alert-root .alert-btn {
    min-width: 30px;
    border-radius: 4px;
    display: inline-block;
    text-align: center;
    margin: 3px;
    height: 25px;
    line-height: 23px;
    padding-left: 4px;
    padding-right: 4px;
    cursor: pointer;
    transition: all 0.1s;
    color: var(--color-hover-background);
    border: 1px solid var(--color-hover-background);
}
.alert-root .alert-btn:hover {
    background-color: #0003;
    border-color: transparent;
}
.alert-container.warning .alert-btn,
.alert-container.info .alert-btn {
    color: var(--color-white);
}

/* Global alert */
.global-alert {
    width: 100%;
    transition: all 0.1s;
    font-weight: 600;
}

.global-alert.small {
    font-size: 12px;
    display: flex;
    justify-content: center;
}

.global-alert.small .global-alert-container {
    padding-left: 0px;
}

.global-alert.small .global-alert-container-icon {
    width: 12px;
    height: 12px;
    margin: 5px;
    flex-shrink: 0;
}

.global-alert.small .global-alert-container-name {
    margin-top: 2px;
    flex-shrink: 0;
    max-width: 100%;
}

.global-alert.critical {
    background: #dc3545;
    color: var(--color-text-white);
}

.global-alert.normal {
    background: #ffa11f;
    color: var(--color-text-white);
}

.global-alert.info {
    background: #17a2b8;
    color: var(--color-text-white);
}

.global-alert-container {
    margin-right: auto;
    margin-left: auto;
    position: relative;
    max-width: var(--content-width);
    text-align: left;
    padding-left: 8px;
}

.global-alert-container-name {
    display: inline-block;
    vertical-align: top;
    margin-top: 10px;
    max-width: calc(100% - 40px);
}

.global-alert-container-icon {
    display: inline-block;
    vertical-align: bottom;
    width: 20px;
    height: 18px;
    margin-right: 8px;
}

.global-alert.normal .global-alert-container .global-alert-container-name .link-black {
    border-bottom: 1.5px solid var(--color-text-black-light);
}

.global-alert.critical .global-alert-container .global-alert-container-name .link-white {
    border-bottom: 1.5px solid var(--color-text-white);
}

/* Page containers */
#scroll-container {
    overflow-y: scroll;
    overflow-x: hidden;
    min-height: 100%;
    height: 100%;
    width: 100%;
}
#scroll-container {
    margin-top: 40px;
    min-height: calc(100% - 40px);
    height: calc(100% - 40px);
}
#main-root {
    overflow: visible;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    padding-right: 5px;
    padding-left: 5px;
    max-width: var(--content-width);
}
#main-root {
    min-height: calc(100% - 40px);
}
#main-container {
    min-height: 100%;
}
#main-global-container {
    display: flow-root;
    width: 100%;
}
.inner-content-table-row.active {
    background: var(--color-hover-background);
}
.inner-content-table-row {
    position: relative;
    width: 100%;
    display: table;
    padding: 8px;
    border-top: 1px solid var(--color-border);
    margin-bottom: -1px;
    transition: all 0.1s;
}
.table-collapsed tr {
    border: 0px !important;
}
.table-collapsed tr td {
    border: 0px !important;
}
.inner-content-table-row > td.shrink:empty {
    width: 0px !important;
}
.inner-content-table-row:last-child {
    border-bottom: 1px solid var(--color-border);
}
table.disable-bottom-line .inner-content-table-row:last-child {
    border-bottom: 0px !important;
}
.inner-content-table-row.clickable:hover {
    background: var(--color-hover-background);
    cursor: pointer;
}
.inner-content-table-row.clickable:after {
    margin-top: 5px;
}
.inner-content-table-row td {
    vertical-align: top;
}
.inner-content-table-row:hover .del-hid-btn {
    display: block;
}
.preview-table {
    border-collapse: inherit;
    width: 100%;
}
.preview-table tr {
    position: relative;
    width: 100%;
    display: table;
    padding: 5px;
    margin-bottom: -1px;
    transition: all 0.1s;
}
.preview-table td {
    vertical-align: top;
}
.preview-table.sliced tr:not(:last-child) {
    border-bottom: 1px solid var(--color-border);
}
.page-inner-heading-tabs-root {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    top: 2px;
}
.disable-scroll::-webkit-scrollbar { 
    display: none;
}
#page-inner-notes:not(:empty) {
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 10px;
    padding-bottom: 10px;
}
#page-inner-notes .alert-container:last-child {
    margin-bottom: 10px;
}
#page-inner-notes.empty .alert-container:first-child {
    margin-top: 0px;
}
.alert-root .alert-container:first-child {
    margin-top: 0px;
}
.inner-heading-item {
    margin-left: 10px;
    display: inline-block;
    position: relative;
    vertical-align: text-bottom;
}
.page-inner-heading-items.left .inner-heading-item {
    margin-left: 0px;
    margin-right: 10px;
}
.inner-heading-separator {
    display: inline-block; 
    margin-left: 14px;
    margin-right: 5px;
}
.inner-heading-separator span {
    border-right: 1px solid var(--color-border);
    height: 25px;
    position: absolute;
    top: 4px;
}
.inner-heading-item .bootstrap-tagsinput {
    border-top-right-radius: 0px !important; 
    border-bottom-right-radius: 0px !important;
}
.page-inner-heading-items {
    position: relative;
    height: 34px;
    float: right !important;
}
.page-inner-heading-items.left {
    float: left !important;
}
.page-inner-heading-tab {
    padding: 11px 20px;
    cursor: pointer;
    display: inline-block;
    margin-right: 5px;
    position: relative;
}
.page-inner-heading-tab.active {
    color: var(--accent-background-color);
}
.page-inner-heading-tab .pad {
    height: 4px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    margin-bottom: 0px;
    position: absolute;
    left: 5px;
    right: 5px;
    bottom: 0px;
}
.page-inner-heading-tab.active .pad {
    background: var(--accent-background-color);
    opacity: 1;
}
.page-inner-heading-tab:not(.active) .pad {
    margin-bottom: -6px;
    transition: all 0.3s;
    opacity: 0;
}
.page-inner-heading-tab:not(.active):hover {
    color: var(--accent-background-color-light);
}
.page-inner-heading-tab:not(.active):hover .pad {
    background: var(--accent-background-color-light);
    /* background: var(--color-hover-background-dark); */
    margin-bottom: 0px;
    opacity: 1;
}
/*
.page-inner-heading-tab:not(.active):hover {
    border-bottom: 2px solid var(--color-hover-background);
}*/
#navigation-root {
    position: fixed;
    width: 100%;
    z-index: 1000;
}
.inner-footer-separator {
    border-bottom: 1px solid var(--color-border);
    padding-top: 10px;
}
.inner-footer-separator.bottom {
    /*margin-bottom: 37px;*/
}
#page-inner-content {
    display: block;
}
#page-inner-content.full-content {
    position: fixed;
    width: 100%;
    top: 40px;
    padding: 5px;
    left: 0px;
}    
#page-inner-footer {
    margin-top: 10px;
    margin-bottom: 30px;
    padding-bottom: 0px;
    display: inline-block;
    width: 100%;
}
#page-inner-spinner {
    margin-bottom: -10px;
}
#page-inner-subheading,
#page-inner-heading {
    min-height: 45px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border);
    position: relative;
}
#page-inner-subheading {
    margin-top: 10px;
}
#page-content {
    padding-bottom: 10px;
    padding-top: 10px;
    display: inline-block;
    width: 100%;
}
#page-inner-stick-container {
    margin-bottom: 10px;
}
#page-inner-stick-container.sticky {
    position: sticky;
    top: 10px;
    background: white;
    z-index: 100;
    box-shadow: 0 0 15px 5px #fff;
}
#page-inner-stick-container.sticky::before {
    content: ' ';
    position: absolute;
    top: -10px;
    height: 10px;
    width: 100%;
    background: white;
}
#page-inner-content-after {
    position: relative;
}
.cache-notification {
    font-size: 85%;
    text-align: right;
    position: absolute;
    right: 0px;
    top: 17px;
}

/* Dim screen */
#dim-screen {
    background-color: rgba(255, 255, 255, 0.91);
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 6000;
}
#dim-screen-smile {
    padding-top: 150px;
}
#dim-screen-title {
    font-size: 20px; 
    font-weight: 600; 
    max-width: 400px; 
    margin: auto;
}
#dim-screen-apologize {
    margin-top: 10px;
    font-size: 16px; 
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes blinker {
    from { opacity: 1; }
    to { opacity: 0; }
}
@keyframes spinAnimation {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes blinking-dots-animation {
    0% {
        opacity: .2;
    }
    20% {
        opacity: 1;
    }
    100% {
        opacity: .2;
    }
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Fixes */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}
.form-group.condensed {
    margin-bottom: 10px;
}
.form-group.condensed label {
    margin-bottom: 0px;
    display: block;
}
.dialog-content .form-group:last-child {
    margin-bottom: 0px;
}
.progress-bar-success {
    background-color: var(--color-green);
}
.progress-bar-green {
    background-color: var(--color-green);
}
.progress-bar-yellow {
    background-color: var(--color-yellow);
}
.progress-bar-red {
    background-color: var(--color-red);
}
.progress.in-row {
    width: 100%;
    margin-bottom: 0px;
    height: 2px;
    border-radius: 6px;
    background-color: var(--color-border);
    box-shadow: none;
    opacity: 1;
    position: relative;
    margin-bottom: 3px;
    margin-top: 5px;
}
.progress.in-row .progress-bar {
    height: 2px;
}
.table > thead > tr > td,
.table > tbody > tr > td {
    vertical-align: top;
    border-top-color: var(--color-border);
}
.table-hover>tbody>tr:hover {
    background-color: var(--color-hover-background);
    cursor: pointer;
}
.table.empty {
    margin-bottom: 0px;
}
.table.empty > tbody > tr > td {
    border: 0px;
    padding: 0px;
}
.table.empty.block,
.table.empty.block > tbody {
    display: block;
    max-width: 100%;
}
.bootstrap-dialog-title {
    text-align: left !important;
}
.small-gap + .typeahead.dropdown-menu {
    margin-top: 2px;
}
.form-group textarea.small-gap + .typeahead.dropdown-menu {
    margin-left: 0px;
    left: 15px !important;
    width: calc(100% - 30px);
}
.form-group.warn textarea.small-gap + .typeahead.dropdown-menu {
    margin-left: 0px;
    width: calc(100% - 10px);
    left: 10px !important;
}
.typeahead.dropdown-menu {
    margin-top: 9px;
    margin-left: -7px;
    overflow-y: scroll;
    max-height: 350px;
    width: 100%;
    left: 7px !important;
}
#list-item-name-root .typeahead.dropdown-menu {
    margin-top: 2px;
}
.panel-body {
    padding: 0px;
}
input.form-control.search-icon {
    background: url(/img/icons/search.svg) no-repeat;
    background-size: 13px 13px;
    padding-right: 30px;
    background-position: right 10px center;
}
input.form-control,
.bootstrap-tagsinput,
.btn,
textarea {
    border-radius: 6px;
    box-shadow: none !important;
    transition: all 0.1s;
}
.bootstrap-tagsinput {
    width: 100% !important;
}
.form-group.warn {
    border-left: 2px solid var(--color-yellow) !important;
    padding-left: 10px !important;
    margin-left: -12px !important;
    position: relative;
}
.form-group-warn {
    color: var(--color-yellow);
    font-size: 85%;
    flex-shrink: 0;
    margin-left: 15px;
}
.form-group.info::after,
.form-group.warn::after {
    content: attr(data-before);
    position: absolute;
    bottom: 0px;
    right: 0px;
    color: var(--color-yellow);
    font-size: 85%;
}
.dialog-content .form-group.warn {
    border-left: 2px solid var(--color-yellow) !important;
    padding-left: 8px !important;
    margin-left: -10px !important;
    min-height: 72px;
}
.form-group.info {
    border-left: 2px solid var(--color-blue) !important;
    padding-left: 10px !important;
    margin-left: -12px !important;
}
.dialog-content .form-group.info {
    border-left: 2px solid var(--color-blue) !important;
    padding-left: 8px !important;
    margin-left: -10px !important;
}
.bootstrap-tagsinput.disabled {
    opacity: .65;
    cursor: not-allowed;
}
.bootstrap-tagsinput input {
    padding-top: 1px !important;
}
.bootstrap-tagsinput input[disabled] {
    cursor: not-allowed;
}
input.form-control:focus,
input.form-control:active,
.bootstrap-tagsinput:focus,
.bootstrap-tagsinput:active,
.btn:focus,
.btn:active {
    outline: 0 !important;
}
input.form-control,
.bootstrap-tagsinput {
    min-width: 300px;
    min-height: 34px;
    width: auto;
}
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
    background-color: #f8f8f9 !important;
    opacity: .65 !important;
}
button[disabled] {
    opacity: .65 !important;
}
button[disabled].btn-default {
    background-color: #f8f8f9 !important;
}
button[disabled].btn-success {
    background-color: #1aaa55 !important;
}
.popover.right>.arrow {
    border-right-color: var(--color-border);
}
.popover.left>.arrow {
    border-left-color: var(--color-border);
}
.popover.top>.arrow {
    border-top-color: var(--color-border);
}
.popover.bottom>.arrow {
    border-bottom-color: var(--color-border);
}
.popover {
    font-family: inherit !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border-radius: 4px;
    border: 1px solid var(--color-border);
    z-index: 1029;
    padding: 0px;
}
.typeahead>.active>a,
.typeahead>.active>a:hover,
.typeahead>.active>a:focus {
    color: var(--color-text-black-light);
    text-decoration: none;
    background-color: var(--color-border);
}
.popover-content {
    padding: 0px;
}
.typeahead,
.popover-content,
.input-group-addon,
.pagination a,
.btn-default,
.form-control,
.bootstrap-tagsinput,
.panel {
    border-color: var(--color-border) !important;
}
.dropdown-menu {
    padding: 4px 0 !important;
}
.dropdown-menu li {
    margin-left: 4px;
    margin-right: 4px;
    padding-top: 1px;
}
.dropdown-menu li > div,
.dropdown-menu li > a,
.dropdown-menu li > button {
    cursor: pointer;
    padding: 7px 11px;
    padding-right: 22px;
    transition: background 0.3s;
    border-radius: 6px;
}
.dropdown-menu>li>a:focus, 
.dropdown-menu>li>a:hover,
.dropdown-menu>li>button:focus, 
.dropdown-menu>li>button:hover,
.dropdown-menu>li>div:hover,
.dropdown-menu>li>div:focus {
    background-color: var(--color-hover-background) !important;
}
.dropdown-menu:not(.typeahead)>.active>a, 
.dropdown-menu:not(.typeahead)>.active>a:focus, 
.dropdown-menu:not(.typeahead)>.active>a:hover {
    background-color: var(--accent-background-color) !important;
}
.tnb-active-item.active>a>.text-muted,
.dropdown-menu:not(.typeahead)>.active>a>.text-muted,
.dropdown-menu:not(.typeahead)>.active>a:focus>.text-muted, 
.dropdown-menu:not(.typeahead)>.active>a:hover>.text-muted {
    color: var(--accent-font-color-light) !important;
}
.tnb-active-item a {
    position: relative;
    transition: background 0.1s;
}
.tnb-active-item.active>a>div>.text-muted,
.tnb-active-item.active>a>div>div>.text-muted,
.dropdown-menu:not(.typeahead)>.active>a>div>div>.text-muted,
.dropdown-menu:not(.typeahead)>.active>a>div>.text-muted {        
    color: var(--accent-font-color-light) !important;
}
.typeahead.dropdown-menu>.active>a,
.typeahead.dropdown-menu>.active>a:focus, 
.typeahead.dropdown-menu>.active>a:hover {
    background-color: var(--color-hover-background) !important;
}
.dropdown-menu {
    transition-property: opacity, transform, visibility;
    transition-duration: 70ms, 250ms, 250ms;
    transition-timing-function: linear, cubic-bezier(0.23, 1, 0.32, 1);
    transition-delay: 25ms, 50ms, 0ms;
    position: absolute;
    width: auto;
    z-index: 999;
    margin-top: 2px;
    margin-bottom: 2px;
    font-size: 14px;
    font-weight: 400;
    padding: 8px 0;
    min-width: 180px;
    background-color: #fff;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    box-shadow: 0 2px 20px 8px rgba(0, 0, 0, 0.05);
    max-height: 600px;
    overflow-y: auto;
}
.dropdown-menu .divider {
    border-bottom: 1px solid var(--color-border);
    background-color: #fff;
    margin-top: 4px;
    margin-bottom: 4px;
    margin-left: 8px !important;
    margin-right: 8px !important;
}
.panel-shadow {
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, .05);
}
.bootstrap-tagsinput .dropdown-menu,
.dropup.open > .dropdown-menu,
.dropdown.open > .dropdown-menu {
    transform: scale(1) translateY(0) !important;
    visibility: visible;
    opacity: 1;
    transition-duration: 100ms, 150ms, 25ms;
    transition-delay: 35ms, 50ms, 25ms;
    display: block;
    min-height: 40px;
}
.dropdown-submenu.open > .dropdown-menu {
    visibility: visible;
    opacity: 1;
    display: block;
}
.dropup .dropdown-menu {
    transform: scale(1) translateY(10px);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}    
.dropdown .dropdown-menu {
    transform: scale(1) translateY(-10px);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.dropup .dropdown-menu,
.dropdown .dropdown-menu {
    visibility: hidden;
    opacity: 0;
    transition-property: opacity, transform, visibility;
    transition-duration: 70ms, 250ms, 250ms;
    transition-timing-function: linear,cubic-bezier(0.23, 1, 0.32, 1);
    transition-delay: 25ms, 50ms, 0ms;
    display: block;
    z-index: 992;
}
.dropdown-header {
    padding: 3px 15px 2px 15px;
}
.bootstrap-tagsinput {
    padding: 3px 6px;
}
.bootstrap-tagsinput .tag {
    border-radius: 9px !important;
    background-color: var(--accent-background-color-light) !important;
    color: var(--color-text-white) !important;
    font-weight: 400;
    padding-left: 9px;
    margin-right: 0px;
}
.label.label-default {
    background-color: var(--color-grey) !important;
    color: #fff !important;
}
.label.label-red {
    background-color: var(--color-red) !important;
    color: #fff !important;
}
.label.label-blue {
    background-color: var(--color-blue) !important;
    color: #fff !important;
}
.label.label-yellow {
    background-color: var(--color-yellow) !important;
    color: #fff !important;
}
.bootstrap-tagsinput .tag [data-role=remove] {
    display: inline-block;
    padding: 3px;
    border-radius: 10px;
    margin-left: 5px !important;
    margin-right: -3px;
}
.bootstrap-tagsinput .tag [data-role=remove]:after {
    width: 20px;
    padding: 5px !important;
    padding-left: 3px !important;
    padding-right: 3px !important;
}
.bootstrap-tagsinput .tag [data-role=remove]:hover,
.bootstrap-tagsinput .tag [data-role=remove]:active {
    box-shadow: 0px !important;
    background-color: #0003;
}
.bootstrap-tagsinput .tag [data-role=remove].disabled {
    cursor: default;
    pointer-events: none;
}
.bootstrap-tagsinput .tag .data-role-remove {
    display: inline-block;
    padding: 3px;
    border-radius: 10px;
    margin-left: 5px !important;
    margin-right: -3px;
    width: 20px;
    padding-left: 3px !important;
    padding-right: 3px !important;
}
.bootstrap-tagsinput .tag .data-role-remove:hover,
.bootstrap-tagsinput .tag .data-role-remove:active {
    box-shadow: 0px !important;
    background-color: #0003;
    cursor: pointer;
}
.bootstrap-tagsinput .tag .data-role-remove.disabled {
    cursor: default;
    pointer-events: none;
}
#search-dropdown .dropdown-menu {
    transition-duration: 25ms, 25ms, 100ms;
    transition-delay: 0ms, 0ms, 100ms;
}
#search-dropdown.open .dropdown-menu {
    transition-duration: 100ms, 150ms, 25ms;
    transition-delay: 35ms, 50ms, 25ms;
}
.split-width-container > div {
    width: 50%;
    display: inline-table;
}
.split-width-container > div:first-child {
    width: calc(50% - 5px);
    margin-right: 5px;
}
#chartjs-tooltip .tooltiptext {
    visibility: visible;
    opacity: 1;
    margin-left: 0px;
    margin-right: 0px;
}
#chartjs-tooltip .tooltiptext.left {
    margin-left: calc(-50%) !important;
    left: calc(50% - 3px) !important;
}
#chartjs-tooltip .tooltiptext.right {
    margin-right: calc(-50%) !important;
    right: calc(50% - 10px) !important;
}
#chartjs-tooltip .tooltiptext.center {
    margin-left: calc(-50%) !important;
    left: calc(50% + 7px) !important;
}
#chartjs-tooltip {
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    position: absolute;
    pointer-events: none;
}
.chartjs-tooltip-key {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 5px;
    border-radius: 50%;
    border: 0px solid rgba(255, 255, 255, 0.5);
}
.search-history-heading {
    font-size: 14px;
    font-weight: 500;
}
a:focus {
    outline-offset: 2px;
}
/* Dropdown submenu */
.dropdown-submenu {
    position: relative;
    margin-right: 0px !important;
    padding-right: 4px;
}
.dropdown-submenu > a {
    cursor: default;
}
.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: 5px;
    margin-left: 0px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px 6px;
    border-radius: 0 6px 6px 6px;
    display: none;
}
.dropdown-submenu > a:after {
    display: block;
    float: right;
    width: 0;
    height: 0;
    margin-top: 5px;
    margin-right: -7px;
    border-color: transparent;
    border-left-color: #cccccc;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    content: " ";
}
/* Diff style fixes */
.json-toggle {
    user-select: text;
}
.diff-root .d2h-file-wrapper {
    border-radius: 4px;
    border: 1px solid var(--color-border);
}
.diff-root .d2h-file-header {
    border-bottom: 0px solid var(--color-border);
    background-color: #fff;
    position: relative;
    border-radius: 4px;
}
.diff-root .d2h-file-header:hover:not(.disabled) {
    cursor: pointer;
    background-color: var(--color-hover-background);
}
.diff-root .d2h-file-name-wrapper {
    padding-top: 1px;
}
.diff-root .d2h-file-diff {
    overflow-x: auto;
}
.diff-root .d2h-file-diff.d2h-hide { 
    display: none;
}
.diff-root .d2h-file-header:not(.d2h-hide) {
    border-bottom: 1px solid var(--color-border);
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}
.diff-root .d2h-file-name-wrapper {
    font-family: var(--font);
}
.diff-root.empty .d2h-file-header {
    display: none;
}
.diff-root.empty .d2h-file-wrapper {
    border: none !important;
    margin-bottom: 0px !important;
}

/* Accent button */
.btn-accent {
    border-color: var(--accent-font-color-light) !important;
}
.btn-accent:hover {
    border-color: var(--accent-font-color-light) !important;
}

/* Other */
.birthday-crown {
    position: absolute;
    width: 60px;
    height: 60px;
    left: 2px;
    top: -34px;
    transform: rotate(-20deg);
}
.birthday-crown.small {
    width: 14px;
    height: 14px;
    left: 2px;
    top: -8px;
}
.selectable-image {
    width: 30px;
    height: 30px;
    padding: 1px;
    transition: all 0.1s;
    cursor: pointer;
    filter: grayscale(50%);
}
.selectable-image:hover {
    transform: scale(1.1);
    filter: grayscale(0%);
}

/* Buttons */
.round-icon-button {
    color: #fff;
    background: var(--color-green);
    border-radius: 50%;
    font-size: 7px;
    text-align: center;
    vertical-align: text-top;
    cursor: pointer;
    padding: 4px;
}
.round-icon-button.spin {
    animation: spin 1.5s linear infinite;
    background: var(--color-yellow);
}
.round-icon-button:not(.spin):hover {
    background: var(--color-green-hover);
}
.btn.btn-success {
    background-color: #1aaa55;
    border-color: #168f48;
    color: var(--color-text-white);
}
.btn.btn-success:hover,
.btn.btn-success:focus {
    background-color: #168f48;
    border-color: #12753a;
    color: var(--color-text-white);
}
.btn.btn-success:active,
.btn.btn-success.active {
    box-shadow: rgba(0, 0, 0, 0.16);
    background-color: #12753a;
    border-color: #0e5a2d;
    color: var(--color-text-white);
}
.btn-more {
    padding: 3px;
    margin-top: -3px;
    border-radius: 50%;
    transition: all 0.1s;
}
.btn-more:hover {
    cursor: pointer;
    background: var(--color-hover-background-dark);
}
.attachment-file {
    display: inline-block;
    padding: 1px;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 6px;
    transition: all 0.1s;
    text-align: center;
    max-width: 50px;
}
.attachment-file:hover {
    cursor: pointer;
    background: var(--color-hover-background-dark);
}
.attachment-file img {
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

/* Breadcrumbs */
.breadcrumbs-container {
    padding-top: 1px;
    /*height: 50px;*/
    padding-bottom: 5px;
    border-bottom: 1px solid var(--color-border);
}
.breadcrumbs-sub-title .name {
    max-width: 300px;
    display: inline-block;
}
.breadcrumbs-sub-title .breadcrumb-item:not(:last-child) {
    opacity: 0.9;
}
.breadcrumbs-sub-title .breadcrumb-item:last-child {
    font-weight: 600;
}
.breadcrumbs-sub-title .breadcrumb-item {
    line-height: 18px;
    vertical-align: text-bottom;
}
.breadcrumbs-sub-title {
    font-size: 13px;
    font-weight: 400;
    margin-left: 0px;
    margin-top: 15px;
}    
.breadcrumbs-sub-title .breadcrumb-item.arrow {
    margin-bottom: 1px;
    margin-left: 1px;
    margin-right: 1px;
    width: 12px;
    height: 12px;
}
.breadcrumbs-sub-title a {
    text-decoration: none;
}
.breadcrumbs-sub-title a,
.breadcrumbs-sub-title a:hover,
.breadcrumbs-sub-title a:active,
.breadcrumbs-sub-title a:visited {
    color: var(--color-text-black-light);
    font-weight: 400;
}
.breadcrumbs-sub-title a:hover {
    text-decoration: underline;
}
.breadcrumb-separator {
    color: var(--color-text-white-very-dark);
    font-size: 8px; 
    margin-left: 4px; 
    margin-right: 4px;
    line-height: 16px;
    top: -1px;
}
.breadcrumbs-img-root {
    position: absolute;
    right: 5px;
    top: 17px;
}
.breadcrumbs-img-root.plain {
    position: relative;
    display: inline-block;
    vertical-align: bottom;
    right: auto;
    top: auto;
    margin-right: -6px;
}
.breadcrumbs-img-root.plain:empty {
    margin-left: -5px;
}
.breadcrumbs-img-root > .breadcrumbs-img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-left: -6px;
    border: 2px solid white;
    float: right;
    transition: all 0.1s;
    position: relative;
    z-index: 49;
    pointer-events: none;
}
.breadcrumbs-img-root.plain > .breadcrumbs-img {
    border: 0px;
    width: 17px;
    height: 17px;
    background: white;
}
.breadcrumbs-img-root:not(.plain) > .breadcrumbs-img:hover {
    cursor: pointer;
    width: 29px;
    height: 29px;
    margin-top: -5px;
    z-index: 50;
}

/* Alerts */
.alert-container .alert-close {
    padding-left: 6px;
    padding-right: 6px;
    padding-bottom: 1px;
    border-radius: 4px;
    margin-right: -9px;
    margin-left: 5px;
    position: absolute;
    cursor: pointer;
    right: 15px;
    top: 6px;
    transition: background 0.1s;
}
.alert-container .alert-close:hover {
    background-color: #0003;
}
.alert-container {
    color: #fff;
    padding: 10px;
    padding-left: 5px;
    padding-right: 15px;
    padding-bottom: 9px;
    margin-bottom: 10px;
    margin-top: 10px;
    border-radius: 4px;
    position: relative;
}
.alert-container .icon {
    width: 23px;
    height: 23px;
    left: 11px;
    top: 7px;
    position: absolute;
}
.alert-container.condensed .icon {
    width: 18px;
    height: 18px;
    left: 8px;
}
.alert-container .title {
    margin-left: 40px;
    margin-right: 20px;
    margin-top: -2px;
    font-weight: 500;
}
.alert-container.condensed .title,
.alert-container.condensed .content {
    display: none;
}
.alert-container .details {
    color: #fafafa;
    margin-left: 40px;
    margin-right: 20px;
    font-size: 85%;
    word-break: break-word;
    line-height: 125%;
}
.alert-container.condensed .details {
    margin-left: 29px;
    margin-top: -1px;
}
.alert-container .content {
    margin-left: 40px;
    font-size: 85%;
    margin-top: -2px;
}
.alert-container.warning {
    background: #ffa11f;
}
.alert-container.error {
    background: #dc3545;
}
.alert-container.info {
    background: #17a2b8;
}

/* Checkbox */
.check-container {
    display: inline-block !important;
    position: relative;
    padding-left: 35px;
    padding-right: 5px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-weight: 400;
}
.check-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
.check-container .radio-btn {
    position: absolute;
    top: 3px;
    left: 12px;
    height: 14px;
    width: 14px;
    background-color: var(--muted-text-color);
    border-radius: 50%;
    transition: background 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.check-container .radio-btn:after {
    content: '';
    display: none;
    width: 43%;
    height: 43%;
    position: absolute;
    border-radius: 50%;
    background: white;
}
.check-container input[type=checkbox] ~ .radio-btn {
    border-radius: 5px;
}
.check-container input[type=checkbox]:checked ~ .radio-btn:after {
    border-radius: 2px;
}
.check-container input:checked ~ .radio-btn {
    background-color: var(--accent-background-color) !important;
}
.check-container input:checked ~ .radio-btn:after {
    display: block !important;
}
.check-container input[type=checkbox]:focus ~ .radio-btn,
.check-container:hover input:not([disabled]) ~ .radio-btn {
    background-color: #ccc;
}
.check-container:hover input[disabled] ~ .text,
.check-container:hover input[disabled] ~ .radio-btn {
    cursor: not-allowed;
}
.check-container input[disabled] ~ .text,
.check-container input[disabled] ~ .radio-btn {
    opacity: 0.6;
}

.check-container-extension {
    top: -3px;
    border-radius: 50%;
    padding: 0px;
    width: 30px;
    height: 30px;
}
.check-container-extension .radio-btn {
    left: 8px;
    top: 8px
}
.check-container-extension:hover {
    background: var(--color-hover-background-dark)
}

/* Switch */
.switch {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 17px;
}  
.switch input { 
    opacity: 0;
    width: 0;
    height: 0;
}
.switch.disabled .slider {
    opacity: 0.3;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .2s;
    transition: .2s;
}  
.slider:before {
    position: absolute;
    content: "";
    height: 13px;
    width: 13px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    -webkit-transition: .2s;
    transition: .2s;
    line-height: 13px;
    color: #444444;
    text-align: center;
    padding-left: 1px;
}  
input:checked + .slider {
    background-color: var(--accent-background-color);
}  
input:focus + .slider {
    box-shadow: none;
}  
input:checked + .slider:before {
    -webkit-transform: translateX(12px);
    -ms-transform: translateX(12px);
    transform: translateX(12px);
}
input[readonly] + .slider {
    background-color: #444444;
}
input[readonly] + .slider:before {
    content: "!";
}
.slider.round {
    border-radius: 12px;
}  
.slider.round:before {
    border-radius: 50%;
}

/* Notification */
.ntf-root {
    background: #fff; 
    position: fixed; 
    z-index: 1100;
    max-width: 420px;
    width: calc(100% - 30px);
    top: 40px; 
    right: -500px; 
    left: auto; 
    border-radius: 4px; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); 
    margin: 15px; 
    padding: 0px;
    padding-bottom: 10px;
    border: 1px solid var(--color-text-white);
}
.ntf-root.clickable {
    cursor: pointer;
}
.ntf-image {
    background: var(--color-hover-background);
    position: absolute;
    vertical-align: top;
    width: 35px;
    height: 35px;
    border-radius: 4px;
    margin: 10px;
    margin-right: 0px;
    text-align: center;
    vertical-align: middle;
}
.ntf-image.big {
    width: 75px;
    height: 75px;
}
.ntf-content-root {
    display: inline-block;
    vertical-align: top; 
    margin: 10px;
    margin-bottom: 0px;
    padding-left: 45px;
    width: calc(100% - 20px);
    min-height: 35px;
}
.ntf-content-root.big {
    padding-left: 85px;
}
.ntf-content-type {
    position: absolute;
    width: 100%;
    height: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    left: 0px;
    bottom: 0px;
    margin-bottom: -1px;
    margin-left: -1px;
    margin-right: -1px;
}
.ntf-content-type.error {
    background: var(--color-red);
}
.ntf-content-type.info {
    background: var(--color-blue);
}
.ntf-content-type.warning {
    background: var(--color-yellow);
}
.ntf-message,
.ntf-content,
.ntf-details {
    width: 100%;
    padding-right: 20px;
    line-height: 15px;
    padding-bottom: 5px;
}
.ntf-message {
    font-weight: 500;
    font-size: 120%;
    line-height: 17px;
}
.ntf-content {
    font-size: 90%;
    padding-bottom: 0px;
    white-space: pre-wrap;
    word-break: break-word;
}
.ntf-details.truncate {
    padding-top: 5px;
    padding-bottom: 0px;
}
.ntf-details {
    color: #777;
    font-size: 80%;
    word-break: break-all;
}
.ntf-btns {
    margin-top: 0px;
}
.ntf-btn {
    height: 30px;
    min-width: 30px;
    border-radius: 4px;
    text-align: center;
    line-height: 27px;
    margin: 3px;
    padding-left: 9px;
    padding-right: 9px;
    cursor: pointer;
    float: right;
    font-size: 12px;
    padding-top: 1px;
    transition: background 0.1s;
    color: var(--accent-background-color);
    border: 1px solid var(--accent-background-color-light);
}
.ntf-btns.left .ntf-btn {
    float: initial;
    padding: 5px 10px;
    margin-left: 0px;
}
.ntf-btn.active {
    background-color: var(--accent-background-color-light);
    color: var(--accent-font-color-light);
}
.ntf-btn:hover {
    background-color: var(--accent-background-color-light);
    color: var(--accent-font-color-light);
}
.ntf-btn.active:hover {
    background-color: var(--accent-background-color);
    color: var(--color-text-white);
}
.ntf-btn.red {
    background-color: var(--color-red);
}
.ntf-close {
    position: absolute; 
    right: 5px;
    top: 5px;
    padding-left: 6px;
    padding-right: 6px;
    padding-bottom: 1px;
    cursor: pointer;
}
.ntf-close:hover {
    background: var(--color-hover-background-dark);
    border-radius: 4px;
}
.ntf-progress {
    width: 100%;
    height: 5px;
    background: var(--color-border);
    margin-bottom: -10px;
    margin-top: 10px;
}
.ntf-progress-inner {
    transition: all 0.1s;
    width: 0%;
    background: var(--accent-font-color-light);
    height: 100%;
}

/* Lists */
dot {
    vertical-align: super;
    width: 5px;
    height: 5px;
    margin-left: 1px;
    margin-right: 6px;
    margin-bottom: -3px;
    display: inline-block;
    border-radius: 50%;
    background: var(--accent-background-color-light);
}

/* Features list */
#navigation-right {
    position: absolute;
    right: 2px;
}
#navigation-right .dropdown-menu .drop-content {
    margin-top: -7px;
    margin-bottom: -7px;
    min-height: 20px;
    max-height: 400px;
    overflow-y: scroll;
}
#navigation-right .dropdown-menu .drop-content > li {
    border-bottom: 1px solid var(--color-border);
    padding: 10px 0px 5px 0px;
}
#navigation-right .dropdown-menu .drop-content > li:last-child {
    border-bottom: 0px;
}

/* Filters */
#current-filters-container {
    display: inline-table; 
    width: 100%; 
    padding: 10px; 
    padding-bottom: 15px;
    background: var(--color-hover-background);
}
#current-filters {
    width: 100%;
    padding-left: 10px; 
    padding-right: 10px;
}
#current-filters-badge {
    color: var(--color-text-white);
    background-color: var(--color-grey);
    display: none;
    margin-left: 5px;
}
.filter {
    border-radius: 10px;
    color: #fff;
    padding: 3px 8px;
    padding-top: 2px;
    background-color: var(--color-grey);
    margin: 2px;
    display: inline-block;
    font-size: 85%;
    vertical-align: top;

    display: inline-flex !important;
    align-items: center;
    white-space: pre-wrap;
    font-weight: 400;
}
.filter.disabled {
    cursor: not-allowed;
    opacity: .65;
}
.filter.small {
    font-size: 10px;
    padding: 2px;
    padding-right: 8px;
    padding-left: 8px;
}
.filter.extra-small {
    font-size: 10px;
    padding: 5px;
    padding-bottom: 1px;
    padding-top: 0px;
    margin: 1px;
    border-radius: 7px;
    font-variant: small-caps;
    text-transform: lowercase;
}
.filter.active {
    background-color: var(--accent-background-color-light);
    color: var(--color-text-white);
}
.filter-label {
    font-size: 110%;
    margin: 5px;
}
.filter-type-label {
    font-size: 95%;
    margin: 5px;
    margin-bottom: 2px;
    margin-top: 8px;
}
.filter-group {
    margin-bottom: 8px;
}
.filter > span {
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 10px;
    margin-right: -5px;
    margin-left: 5px;
    cursor: pointer;
    display: inline-block;
}
.filter.active span:hover {
    background-color: #0003;
}
.filter.clickable {
    cursor: pointer;
    transition: background 0.1s;
}
.filter.hid:not(.active) {
    display: none !important;
}
.filter .icon {
    vertical-align: top;
    background-color: #fff;
    border-radius: 10px;
    width: 17px;
    height: 17px;
    padding: 3px;
    margin-bottom: -2px;
    margin-left: -5px;
    margin-right: 5px;
    display: inline-block;
}
.filter.filter.extra-small .icon {
    width: 13px;
    height: 13px;
    margin-left: -3px;
    margin-top: 1px;
    padding: 2px;
}
.filter .icon img {
    width: 100%;
    height: 100%;
    vertical-align: top;
}
.filter.clickable:hover {
    background-color: var(--color-grey-hover);
}
.filter.green {
    background-color: var(--color-green);
}
.filter.clickable.green:hover {
    background-color: var(--color-green-hover);
}
.filter.blue {
    background-color: var(--color-blue);
}
.filter.clickable.blue:hover {
    background-color: var(--color-blue-hover);
}
.filter.red {
    background-color: var(--color-red);
}
.filter.clickable.red:hover {
    background-color: var(--color-red-hover);
}
.filter.yellow {
    background-color: var(--color-yellow);
}
.filter.clickable.yellow:hover {
    background-color: var(--color-yellow-hover);
}
.filter.clickable.active {
    background-color: var(--accent-background-color-light);
}
.filter.clickable.active:hover {
    background-color: var(--accent-background-color);
}

/* Simple list */
.simple-list {
    position: relative;
    padding-left: 0px;
    padding-right: 0px;
    margin-top: 0px;
    padding-top: 0px;
    background-color: #fff;
    transform: translateY(0);
    visibility: hidden;
    opacity: 1;
    transition-property: opacity, transform, visibility;
    transition-duration: 100ms, 150ms, 25ms;
    transition-delay: 35ms, 50ms, 25ms;    
    transition-timing-function: linear,cubic-bezier(0.23, 1, 0.32, 1);
    display: block;
}
.simple-list li {
    text-align: left;
    list-style: none;
}
.simple-list>li>div,
.simple-list>li>a {
    display: block;
    padding: 6px 10px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: var(--color-text-black-light);
    white-space: nowrap;
}
.simple-list>.disabled>div, 
.simple-list>.disabled>div:focus, 
.simple-list>.disabled>div:hover,
.simple-list>.disabled>a, 
.simple-list>.disabled>a:focus, 
.simple-list>.disabled>a:hover {
    color: var(--color-text-grey);
}
.simple-list>.disabled>div:focus, 
.simple-list>.disabled>div:hover,
.simple-list>.disabled>a:focus, 
.simple-list>.disabled>a:hover {
    text-decoration: none;
    cursor: not-allowed;
    background-color: transparent;
    background-image: none;
}
.simple-list>.active>div:focus, 
.simple-list>.active>div:hover,
.simple-list>.active>a:focus, 
.simple-list>.active>a:hover {
    color: #fff !important;
    text-decoration: none;
    background-color: var(--accent-background-color) !important;
    outline: 0;
}
.simple-list>.active>div,
.simple-list>.active>a {
    color: #fff;
    text-decoration: none;
    background-color: var(--accent-background-color);
    outline: 0;
}
.simple-list>.active>div .text-muted,
.simple-list>.active>a .text-muted {
    color: var(--color-text-white-dark)
}
.simple-list>li>div:focus,
.simple-list>li>div:hover,
.simple-list>li>a:focus, 
.simple-list>li>a:hover {
    color: var(--color-text-black-light);
    text-decoration: none;
    background-color: var(--color-hover-background);
}
.simple-list>li>div:focus,
.simple-list>li>a:focus{
    outline-offset: -1px;
}
.simple-list:not(.typeahead)>.active>div>div>div>.text-muted,
.simple-list:not(.typeahead)>.active>div>div>.text-muted,
.simple-list:not(.typeahead)>.active>div>.text-muted,
.simple-list:not(.typeahead)>.active>a>div>div>.text-muted,
.simple-list:not(.typeahead)>.active>a>div>.text-muted,
.simple-list:not(.typeahead)>.active>a>.text-muted {
    color: var(--accent-font-color-light) !important;
}

/* Shortcuts */
li.active .text-shortcut {
    color: var(--color-text-white) !important;
}
.text-shortcut-parent {
    width: auto;
    display: block;
    margin-right: 55px;
    position: relative;
}
.text-shortcut {
    color: var(--color-text-grey);
    font-size: 10px;
    position: absolute;
    right: -65px;
    top: 3px;
    font-family: monospace;
}

/* Others */
.label-small-tag {
    display: inline-block; 
    margin: 2px; 
    font-variant: small-caps;
}
.breadcrumb {
    background-color: var(--color-hover-background) !important;
    overflow-x: auto;
    white-space: nowrap;
}
.custom-divider {
    margin-top: 4px;
    margin-bottom: 4px;
    margin-left: 8px !important;
    margin-right: 8px !important;
    border-bottom: 1px solid var(--color-border);
}
.circle-indicator {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    display: inline-block;
    margin: 2px;
    margin-right: 5px;
}
.close {
    color: var(--color-text-white);
    opacity: 1;   
    font-weight: 500;
    position: absolute;
    top: 0px;
    right: 10px;
    margin-top: 0px !important;
    padding: 11px 15px 10px 15px !important;
    text-shadow: none;
}
.badge {
    padding: 3px;
    padding-left: 5px;
    padding-right: 5px;
    font-size: 8px;
    line-height: 8px;
    background-color: var(--color-red) !important;
    transition: transform 100ms;
    border-radius: 9px;
    display: inline-block;
    color: var(--color-text-white);
}
.badge.accent {
    background-color: var(--accent-background-color) !important;
}
.badge.black {
    background-color: var(--color-text-black) !important;
}
.badge.yellow {
    background-color: var(--color-yellow) !important;
}
.badge.grey {
    background-color: var(--color-grey) !important;
}
.badge.green {
    background-color: var(--color-green) !important;
}
.link-white,
.link-white:hover,
.link-white:active,
.link-white:visited {
    color: #fff !important;
    font-weight: 500;
}
.link-black,
.link-black:hover,
.link-black:active,
.link-black:visited {
    color: #333 !important;
    font-weight: 500;
}
.black-link,
.black-link:active,
.black-link:hover {
    color: var(--color-text-black-light);
}

/* Account profile picture */
#profile-root-container {
    border-radius: 30px;
    padding-top: 25px;
    padding-bottom: 25px;
    background: var(--color-hover-background);
    text-align: center;
}
.inline-profile-pic {
    background-color: var(--color-border);
    border-radius: 50%;
    display: inline-block;
    vertical-align: bottom;
    background-size: cover;
    margin-right: 5px;
    width: 17px;
    height: 17px;
}
small .inline-profile-pic,
.small .inline-profile-pic {
    width: 16px;
    height: 16px;
}
.profile-pic-root {
    display: inline-block;
    vertical-align: top;
    position: relative;
    width: 36px;
    height: 36px;
}
.profile-pic-root.hover {
    border-radius: 50%;
}
.profile-pic-root.hover:hover {
    background: #dcdcdc;
}
.profile-pic-root div {
    border-radius: 50%;
    position: absolute;
}
.profile-pic-root .default {
    width: 100%;
    height: 100%;
    text-align: center;
    color: var(--color-text-white-dark);
    line-height: 30px;
}
.profile-pic-root.hover .default {
    width: 30px;
    height: 30px;
    margin: 2px;
}
.profile-pic-root .cover {
    width: 100%;
    height: 100%;
    background-size: cover;
}
.profile-pic-root.hover .cover {
    width: 32px;
    height: 32px;
    margin: 1px;
}
#profile-short-name {
    display: inline-block;
    margin-left: 5px;
    font-weight: 600;
}
#profile-short-name:empty {
    margin-left: 0px;
}
.profile-statistics {
    height: 50px;
    padding-bottom: 0px;
    border-bottom: 1px solid;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    display: flex;
    max-width: 600px;
}
.profile-statistics .bar {
    max-width: 10px;
    width: 2px;
    margin: 0px 5px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    background: var(--color-hover-background);
    display: inline-flex;
    flex-grow: 1;
    height: 100%;
    position: relative;
}
.profile-statistics .bar .inner {
    background: var(--accent-background-color-light);
    width: 100%;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    position: absolute;
    bottom: 0;
}
.error-statistics {
    height: 22px;
    padding-bottom: 0px;
    display: flex;
    max-width: 200px;
}
.error-statistics .bar {
    max-width: 10px;
    width: 2px;
    margin: 0px 1px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    background: var(--color-hover-background);
    display: inline-flex;
    flex-grow: 1;
    height: 100%;
    position: relative;
}
.error-statistics .bar .inner {
    background: var(--accent-background-color-light);
    width: 100%;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    position: absolute;
    bottom: 0;
}
/* Login */
#login-container {
    padding: 0px !important;
    width: 350px;
    margin-top: 40px;
    box-shadow: 0 3px 43px rgba(0, 0, 0, .2);
    border-radius: 6px;
    transition-property: opacity, transform, visibility;
    transition-duration: 70ms, 250ms, 250ms;
    transition-timing-function: linear, cubic-bezier(0.23, 1, 0.32, 1);
    transition-delay: 25ms, 50ms, 0ms;
    transform: translateY(-10px);
    opacity: 0;
}
#login-container.open {        
    transform: translateY(0) !important;
    visibility: visible;
    opacity: 1;
    transition-duration: 100ms, 150ms, 25ms;
    transition-delay: 35ms, 50ms, 25ms;
}
#login-top-header {
    border-top-left-radius: 6px; 
    border-top-right-radius: 6px;
    padding-bottom: 50px;
    background-color: var(--accent-background-color);
    height: 80px;
    position: relative;
    overflow: hidden;
}
#login-username {
    width: 100%;
}
#login-password {
    margin-top: 5px;
    width: 100%;
}
#login-login-button {
    margin-top: 5px;
    width: 100%;
}
#login-separator {
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: center;
}
#login-separator .line {
    border-bottom: 1px solid var(--color-border);
    width: 44%;
    display: inline-table;
    margin-bottom: 3px;
    margin-right: 5px;
    margin-left: 5px;
}
.sign-in-btn {
    margin-top: 5px;
    width: 100%;
}
.sign-in-btn img {
    margin-right: 7px;
    margin-top: -3px;
    width: 17px;
}
#login-form {
    margin: 10px;
    text-align: right;
}
#login-form .alert-container {
    margin-top: 5px;
    margin-bottom: 0px;
}
#login-project-name {
    font-weight: 800;
    color: var(--accent-font-color-light);
    margin: 0px;
    margin-left: 80px;
    font-size: 30px;
    font-variant: small-caps;
    max-width: calc(100% - 100px);
}
#login-server-type {
    font-size: 14px;
    margin-top: -8px;
    margin-left: 80px;
    color: var(--accent-font-color-light);
    font-variant: small-caps;
    font-weight: 500;
}
#login-server-version {
    font-size: 12px;
    color: var(--accent-font-color-light);
    position: absolute;
    right: 10px;
    bottom: 5px;
}
#login-server-img {
    width: 60px;
    height: 60px;
    position: absolute;
    margin: 10px;
    border-radius: 12%;
}
#login-msg {
    text-align: left;
}
.login-docker-img {
    position: absolute;
    right: 0px;
    width: 14px;
    padding: 3px;
    background: #ffffffa6;
}
.login-docker-img.top {
    top: 0px;
    border-bottom-left-radius: 4px;
}
.login-docker-img.bottom {
    bottom: 0px;
    border-top-left-radius: 4px;
}
.login-docker-img.large {
    width: 17px;
    padding: 4px;
}
/* Dialog */
.dialog-root {
    transition-property: background,opacity,transform,visibility;
    transition-duration: 70ms,.25s,.25s;
    transition-timing-function: linear,cubic-bezier(.23,1,.32,1);
    transition-delay: 25ms,50ms,0ms;
    visibility: hidden;
    background: rgba(0,0,0,0);
    opacity: 0;
    transform: translateY(-10px);
    z-index: 1050;
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin-bottom: -10px;
    overflow-y: scroll;
}
.dialog-root.open {
    background: rgba(0,0,0,0.5);
    transform: translateY(0);
    visibility: visible;
    opacity: 1;
}
.dialog-container {
    border-radius: 4px;
    width: 500px;
    margin: 30px auto;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, .05);
}
.dialog-header {
    word-break: break-all;
    font-size: 110%;
    background-color: #fff;
    font-weight: 600;
    border-top-left-radius: var(--dialog-radius);
    border-top-right-radius: var(--dialog-radius);
    padding: 5px 5px 5px 15px;
    border-bottom: none !important;
    display: flex;
    column-gap: 5px;
    align-items: center;
    width: 100%;
    background-color: var(--accent-background-color-light);
    color: white;
}
.dialog-header .text-muted {
    word-break: break-all;
    color: var(--accent-font-color-light);
}
.dialog-error:empty {
    display: none !important;
}
.dialog-error .alert-container:only-child {
    margin-top: 10px !important;
    margin-bottom: 0px !important;
}
.dialog-content {
    padding: 15px;
    background: #fff;
}
.dialog-content.vertical-scroll {
    overflow-y: scroll;
    overflow-x: hidden;
    position: relative;
}
.dialog-footer {
    border-top: 1px solid var(--color-border);
    background: #fff;
    padding: 5px;
    border-bottom-left-radius: var(--dialog-radius);
    border-bottom-right-radius: var(--dialog-radius);
    text-align: right;
}
.dialog-footer > .btn:not(:last-child) {
    margin-right: 5px;
}
.dialog-header-button {
    padding: 0px;
    margin: 2px;
    cursor: pointer;
    border-radius: var(--dialog-radius);
    color: var(--accent-font-color-light);
    transition: all 0.1s;
    text-align: center;
    height: 40px;
    width: 40px;
}
.dialog-header-button.small {
    height: 40px;
    width: 40px;
}
.dialog-header-button:hover {
    background-color: var(--color-hover-background);
    color: var(--color-text-white)
}
.dialog-header-button > span { 
    line-height: 40px; 
    vertical-align: middle; 
}
.dialog-header-button.small > span { 
    line-height: 30px; 
    vertical-align: middle; 
}
.not-connected-device {
    opacity: 0.7;
}
.data-icon {
    position: absolute;
    top: 0px;
    right: 30px;
    max-width: 20%;
}
.data-icon > img {
    width: 100%;
    max-height: 200px;
    border-radius: 4px;
}
/* Color picker */
.color-picker {
    position: absolute;
    width: 390px;
    height: 210px;
    padding: 5px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 999;
    display: table;
}
.color-picker-row {
    height: 20px;
}
.color-picker .color {
    width: 20px;
    height: 20px;
    display: inline-table;
    text-align: center;
    border: 1px solid;
}
.color-picker .color:hover {
    cursor: pointer;
    border-color: white !important;
}
#events-dropdown {
    max-height: 1000px;
    padding: 0px !important;
    margin: 0px;
    overflow: hidden;
}
#events-dropdown .flatpickr-calendar {
    box-shadow: none !important;
}

/* Mobile styles */
@media (max-width: 767px) {
    .profile-statistics .bar {
        margin: 0px 2px;
    }
    #profile-root-container {
        border-radius: 10px;
    }
    .btn {
        min-width: 80px;
    }
    .data-icon {
        position: initial;
        max-width: 100%;
    }
    .data-icon > img {
        max-height: fit-content;
    }
    .split-width-container > div {
        width: 100% !important;
        display: table;
    }
    .split-width-container > div:not(:last-child) {
        margin-bottom: 5px;
    }
    #settings-submit {
        width: 100%;
    }
    .m-block {
        display: block !important;
        width: 100% !important;
    }
    #navigation-mobile {
        min-height: 46px;
    }
    .typeahead.dropdown-menu::-webkit-scrollbar-thumb,
    .typeahead.dropdown-menu::-webkit-scrollbar,
    .vertical-scroll::-webkit-scrollbar-thumb,
    .vertical-scroll::-webkit-scrollbar {
        width: 2px;
        height: 2px;
    }
    #scroll-container {
        margin-top: 46px !important;
    }
    #scroll-container.top {
        margin-top: 0px !important;
        min-height: 100%;
        height: 100%;
    }
    #main-root {
        min-height: calc(100% - 70px);
    }
    #page-footer {
        padding-top: 15px;
        padding-bottom: 15px;
        height: 70px;
        left: 0px;
    }
    #page-footer-desktop {
        display: block;
        float: right;
        margin-right: 50px;
        line-height: 30px;
        cursor: pointer;
    }
    #page-footer-icon {
        display: block;
        float: left;
        margin-left: 8px;
        margin-top: 6px;
        width: 20px;
        height: 20px;
    }
    #page-footer-info {
        display: none;
        font-size: 14px;
    }
    #page-footer-time {
        display: none;
        margin-top: 3px;
        font-size: 12px;
    }
    #page-inner-footer {
        padding-bottom: 30px;
    }
    .page-inner-heading-tabs-root {
        width: 100%;
    }
    .page-inner-heading-tabs-root:not(.fixed-margin) {
        padding-top: 10px;
        margin-bottom: -10px;
    }
    .ntf-root {
        top: auto;
        bottom: -500px;
        margin: 0px;
        width: 100%;
        min-width: 100%;
        border-radius: 0px;
        box-shadow: 0 0px 4px 0px rgba(0,0,0,0.1);
        border-bottom: 0px;
        border-left: 0px;
        border-right: 0px;
        right: 0px;
    }
    .ntf-image {
        width: 35px;
        height: 35px;
    }
    .ntf-image.big {
        width: 35px;
        height: 35px;
    }
    .ntf-image.auto {
        width: min-content;
        height: min-content;
    }
    .ntf-content-type {
        border-bottom-right-radius: 0px;
        border-bottom-left-radius: 0px;
    }
    .ntf-content-root.big {
        padding-left: 45px;
    }
    .ntf-content,
    .ntf-message,
    .ntf-details {
        margin-right: 55px;
    }
    .ntf-content-root {
        padding-left: 45px;
        min-height: 30px;
    }
    .ntf-close {
        font-size: 25px;
        padding-right: 10px;
        padding-left: 10px;
        line-height: 34px;
    }
    .dialog-container {
        width: 100% !important;
        padding: 5px !important;
        margin-top: 100px;
    }
    .inner-content-table-row {
        padding-left: 0px;
        padding-right: 0px;
    }
    .page-inner-heading-items {
        float: none !important;
        height: auto;
    }
    .page-inner-heading-items.left {
        width: 100%;
        margin-bottom: 10px;
    }
    .inner-heading-item {
        width: 100%;
        display: block;
        margin: 0px;
    }
    .inner-heading-item .bootstrap-tagsinput,
    .inner-heading-item input,
    .inner-heading-item .btn {
        width: 100%;
        border-bottom-right-radius: 4px !important;
        border-top-right-radius: 4px !important;
        border-radius: 4px !important;
    }
    .inner-heading-item:not(:last-child) {
        margin-bottom: 10px;
    }
    .inner-heading-separator {
        display: none;
    }
    .dropup .dropdown-menu,
    .dropdown .dropdown-menu {
        min-width: 100% !important;
        width: 100% !important;
        margin-left: 0px;
        margin-right: 0px;
    }
    .dropup .dropdown-menu.m-bottom,
    .dropdown .dropdown-menu.m-bottom {
        position: fixed;
        bottom: 5px;
        left: 0px;
        top: auto;
        right: auto;
        border-radius: 0px;
        border-left: 0px;
        border-right: 0px;
        border-bottom: 0px;
        box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.5);
        max-height: 500px;
        overflow-y: auto;
        transform: translateY(100%);
        margin-bottom: -5px;
        padding-bottom: 15px;
    }
    .dropup .dropdown-menu.m-bottom li a,
    .dropdown .dropdown-menu.m-bottom li a {
        padding: 12px 16px;
        font-size: 110%;
        width: 100% !important;
    }
    .page-inner-heading-items button,
    .dropup button[data-toggle="dropdown"],
    .dropdown button[data-toggle="dropdown"] {
        text-align: left;
    }
    .dropup button[data-toggle="dropdown"] .caret,
    .dropdown button[data-toggle="dropdown"] .caret {
        float: right;
        margin-top: 9px;
        margin-bottom: 7px;
    }
    .page-inner-heading-content {
        border-top: 1px solid var(--color-border);
        margin-top: 10px;
        padding-top: 10px;
        min-height: 44px;
    }
    .alert-container .alert-close {
        font-size: 20px;
        padding-left: 8px;
        padding-right: 8px;
        margin: -2px;
        margin-right: -10px;
    }
    .alert-container.small .alert-close,
    .alert-container.info .alert-close {
        margin: -4px;
        margin-right: -12px;
    }
    #pagination-dropup .page {
        margin-left: 0px;
    }
    #login-form {
        margin: 20px !important;
    }
    #login-form .alert-container {
        margin-top: 10px !important;
    }
    #login-username,
    #login-password,
    #login-login-button {
        margin-top: 10px !important;
    }
    #login-server-img {
        position: relative !important;
    }
    #login-top-header {
        height: auto !important;
        text-align: center !important;
        border-radius: 0px !important;
        height: 50% !important;
        padding-top: 12% !important;
    }
    #login-project-name {
        font-size: calc(12px + 8vw) !important;
        margin: auto !important;
    }
    #login-server-type {
        font-size: calc(12px + 3vw) !important;
        margin-left: 0px !important;
    }
    #login-container {
        position: absolute !important;
        top: 0px !important;
        left: -5px !important;
        right: -5px !important;
        box-shadow: none !important;
        width: auto !important;
        margin-top: 0px !important;
    }
    #login-server-img {
        margin: auto !important;
        width: 50% !important;
        height: auto !important;
        border-radius: 10vw !important;
    }
    #login-server-version { 
        right: 15px !important;
        font-size: 4vw !important;
    }
    #login-top-header.focus {
        padding-bottom: 50px !important;
        height: 85px !important;
        position: relative !important;
        padding-top: 0 !important;
    }
    #login-top-header.focus #login-project-name {
        margin: 0px !important;
        margin-left: 85px !important;
        font-size: 30px !important;
        text-align: left !important;
    }
    #login-top-header.focus #login-server-type {
        font-size: 14px !important;
        margin-top:-8px !important;
        margin-left: 85px !important;
        text-align: left !important;
    }
    #login-top-header.focus #login-server-version {
        font-size: 12px !important;
        position: absolute !important;
        right: 10px !important;
        bottom: 5px !important;
    }
    #login-top-header.focus #login-server-img {
        width: 60px !important;
        height: 60px !important;
        position: absolute !important;
        margin: 10px !important;
        border-radius: 18% !important;
        left: 5px !important;
        top: 0px !important;
    }
    .login-docker-img {
        right: 5px;
    }
    .login-docker-img.large {
        right: 5px;
        width: 40px;
        padding: 8px;
    }
    .login-docker-img.large.top {
        border-bottom-left-radius: 13px;
    }
    .login-docker-img.large.bottom {
        border-top-left-radius: 13px;
    }
    #project-products-container > div {
        width: 100% !important;
        display: block !important;
    }
}
/* Desktop styles */
@media (min-width: 767px) {
    #mobile-navbar {
        display: none !important;
    }
    .page-inner-heading-tabs-root {
        position: absolute;
    }
}

@media (max-width: 1000px) {
    .page-inner-heading-tab {
        padding: 11px 14px;
    }
}

/* New spinner animation */
.spinner-new {
    position: relative;
    width: 80px;
    height: 80px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-top: -8px;
}
.spinner-new div {
    display: inline-block;
    position: absolute;
    left: 8px;
    width: 16px;
    background: var(--color-text-white-dark);
    animation: spinner-new 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
    border-radius: 3px;
}
.spinner-new div:nth-child(1) {
    left: 8px;
    animation-delay: -0.24s;
}
.spinner-new div:nth-child(2) {
    left: 32px;
    animation-delay: -0.12s;
}
.spinner-new div:nth-child(3) {
    left: 56px;
    animation-delay: 0;
}
@keyframes spinner-new {
    0% {
        top: 8px;
        height: 64px;
    }
    50%, 100% {
        top: 24px;
        height: 32px;
    }
}

/* Form progress bar */
.fpb .fpb-step {
    padding-top: 25px;
    padding-bottom: 15px;
    padding-left: 30px;
    position: relative;
}

.fpb .fpb-step:last-child {
    padding-bottom: 5px;
}

.fpb .fpb-step .fpb-badge {
    position: absolute;
    color: var(--color-text-black-light);
    background-color: var(--color-hover-background-dark) !important;
    border-radius: 50%;
    font-size: 7px;
    padding: 2px 2.5px;
    width: 10px;
    height: 10px;
    left: 2px;
    top: 3px;
    transition: all 0.1s;
}

.fpb .fpb-step.active .fpb-badge {
    color: var(--accent-font-color-light);
    background-color: var(--accent-background-color) !important;
    width: 16px;
    height: 16px;
    left: 0px;
    top: 0px;
}

.fpb .fpb-step.active .fpb-badge:after {
    content: '';
    display: block;
    top: 6px;
    left: 6px;
    width: 4px;
    height: 4px;
    position: absolute;
    border-radius: 50%;
    background: white;
    animation: blinker 0.7s cubic-bezier(.5, 0, 1, 1) infinite alternate;
}

.fpb .fpb-step.completed .fpb-badge {
    color: var(--color-text-white);
    background-color: var(--color-blue) !important;
    width: 13px;
    height: 13px;
    left: 1px;
    top: 1px;
}
.fpb .fpb-step.completed .fpb-badge > .glyphicon {
    top: 0px;
}

.fpb .fpb-step .fpb-line {
    position: absolute;
    left: 6px;
    top: 18px;
    width: 2px;
    height: calc(100% - 21px);
    background: var(--color-border);
    border-radius: 2px;
    transition: all 0.2s;
}

.fpb .fpb-step .fpb-line .fpb-line-bg {
    width: 100%;
    border-radius: 2px;
    height: 0%;
}

.fpb .fpb-step:not(.active) .fpb-name {
    height: 100%;
}

.fpb .fpb-step.active .fpb-line .fpb-line-bg {
    background: var(--accent-background-color) !important;
    height: 20px;
    transition: all 0.2s;
}

.fpb .fpb-step.completed .fpb-line .fpb-line-bg {
    background: var(--color-blue) !important;
    height: 100%;
}

.fpb .fpb-step:not(.completed) .fpb-badge .glyphicon {
    display: none;
}

.fpb .fpb-step .fpb-name {
    position: absolute;
    left: 30px;
    top: -3px;
}

.fpb .fpb-step .fpb-name a {
    text-decoration: none;
}

.fpb .fpb-step.active .fpb-name {
    font-size: 18px;
    font-weight: 500;
    top: -6px;
}

.fpb .fpb-step.active .fpb-description {
    margin-top: -11px;
    padding-bottom: 10px;
}

.fpb .fpb-step:not(.active) .fpb-description {
    margin-top: -11px;
}

.fpb .fpb-step .fpb-content {
    display: none;
}

.fpb .fpb-step.active .fpb-content {
    display: block !important;
}

.fpb .fpb-step.active .fpb-content .alert-root {
    margin-bottom: 20px;
}

.fpb .fpb-step.active .fpb-content .alert-container:first-child {
    margin: 0px;
}

/* Highlight box */
.highlight-box {
    background: var(--color-grey);
    color: var(--color-text-white);
    border-radius: 6px;
    line-height: 12px;
    font-size: 75%;
    display: inline-block;
}

.highlight-box.clickable {
    cursor: pointer;
}

.highlight-box.clickable:hover {
    background: var(--color-grey-hover);
}

.highlight-box > .left {
    display: inline-block;
    padding: 3px 5px;
    letter-spacing: 0.5px;
    vertical-align: bottom;
}

.highlight-box > .right {
    display: inline-block;
    padding: 3px 5px;
    padding-right: 6px;
    vertical-align: bottom;
    max-width: 250px;

    user-select: text;
    -moz-user-select: text;
    -webkit-user-select: text;
    -ms-user-select: text;

    text-transform: uppercase;
}

.highlight-box > .right:last-child {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

pre > code {
    white-space: pre;
}

/* Slider */
.slider.vertical {
    -webkit-appearance: none;
    width: 100%;
    height: 8px;
    background: var(--muted-text-color);
    border-radius: 4px;
    outline: none;
    -webkit-transition: .2s;
    transition: opacity .2s;
    position: relative;
    margin: 5px 0px;
    margin-top: 3px;
}

.slider.vertical::before {
    display: none;
}

.slider.vertical::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 17px;
    height: 17px;
    background: var(--accent-background-color);
    border-radius: 50%;
    cursor: pointer;
    padding: 5px 0px;
}

.slider.vertical::-moz-range-thumb {
    width: 17px;
    height: 17px;
    background: var(--accent-background-color);
    cursor: pointer;
    padding: 5px 0px;
}

.range-selection {
    position: relative;
    height: 17px;
}

.range-selection .range-min,
.range-selection .range-max {
    position: absolute;
    width: 17px;
    height: 17px;
    background: var(--accent-background-color);
    border-radius: 50%;
    cursor: pointer;
    padding: 5px 0px;
    top: 0px;
}

.range-selection > .range-bg,
.range-selection > .range-fg {
    top: 4px;
    left: 0px;
    position: absolute;
    height: 8px;
    border-radius: 4px;
    outline: none;
    position: relative;
    width: -webkit-fill-available;
}

.range-selection > .range-fg {
    background: var(--muted-text-color);
    opacity: 0.7;
}

.range-selection > .range-bg {
    background: var(--accent-background-color-light);
    position: absolute;
    opacity: 0.7;
}

.no-wrap {
    overflow: hidden;
    text-wrap: nowrap;
    text-overflow: ellipsis;
}

.thumb,
.thumb::-webkit-slider-thumb {
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}
  
.thumb {
  pointer-events: none;
  height: 0;
  width: 100%;
  outline: none;
}
  
/* For Chrome browsers */
.thumb::-webkit-slider-thumb {
  background-color: var(--accent-background-color);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  height: 17px;
  width: 17px;
  margin-top: 4px;
  pointer-events: all;
  position: relative;
}

/* For Firefox browsers */
.thumb::-moz-range-thumb {
  background-color: var(--accent-background-color);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  height: 17px;
  width: 17px;
  margin-top: 4px;
  pointer-events: all;
  position: relative;
}