:root {
    --button-color: #298BA8; 
    --active-color: #007aff;
}
::-webkit-scrollbar-track {
	background-color: var(--sBCol);
}
*:hover::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb {
    background-color: var(--theme-primary);
}
.unselectable {
    user-select: none;
}

.jdragging {
    opacity:0.2;
    filter: alpha(opacity=20);
}

.jremove {
    opacity: 0.2;
    filter: alpha(opacity=20);
}


/** Animations **/
.fade-in {
    animation: fade-in 2s forwards;
}

.fade-out {
    animation: fade-out 1s forwards;
}

.slide-left-in {
    position: relative;
    animation: slide-left-in 0.4s forwards;
}

.slide-left-out {
    position: relative;
    animation: slide-left-out 0.4s forwards;
}

.slide-right-in {
    position: relative;
    animation: slide-right-in 0.4s forwards;
}

.slide-right-out {
    position: relative;
    animation: slide-right-out 0.4s forwards;
}

.slide-top-in {
    position: relative;
    animation: slide-top-in 0.4s forwards;
}

.slide-top-out {
    position: relative;
    animation: slide-top-out 0.2s forwards;
}

.slide-bottom-in {
    position: relative;
    animation: slide-bottom-in 0.4s forwards;
}

.slide-bottom-out {
    position: relative;
    animation: slide-bottom-out 0.1s forwards;
}

/** Fadein and Fadeout **/
@keyframes fade-in {
    0% { opacity: 0; }
    100% { opacity: 100; }
}

@-webkit-keyframes fade-in {
    0% { opacity: 0; }
    100% { opacity: 100; }
}

@keyframes fade-out {
    0% { opacity: 100; }
    100% { opacity: 0; }
}

@-webkit-keyframes fade-out {
    0% { opacity: 100; }
    100% { opacity: 0; }
}

/** Keyframes Left to Right **/
@keyframes slide-left-in {
    0% { left: -100%; }
    100% { left: 0%; }
}

@-webkit-keyframes slide-left-in {
    0% { left: -100%; }
    100% { left: 0%; }
}
    
@keyframes slide-left-out {
    0% { left: 0%; }
    100% { left: -100%; }
}

@-webkit-keyframes slide-left-out {
    0% { left: 0%; }
    100% { left: -100%; }
}

/** Keyframes Right to Left **/
@keyframes slide-right-in {
    0% { left: 100%; }
    100% { left: 0%; }
}

@-webkit-keyframes slide-right-in
{
    0% { left: 100%; }
    100% { left: 0%; }
}
    
@keyframes slide-right-out {
    0% { left: 0%; }
    100% { left: 100%; }
}

@-webkit-keyframes slide-right-out {
    0% { left: 0%; }
    100% { left: 100%; }
}

/** Keyframes Top to Bottom **/
@keyframes slide-top-in {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(0%); }
}

@-webkit-keyframes slide-top-in {
    0% { transform: translateY(-100%); }
    100% { -webkit-transform: translateY(0%); }
}
    
@keyframes slide-top-out {
    0% { transform: translateY(0%); }
    100% { transform: translateY(-100%); }
}

@-webkit-keyframes slide-top-out {
    0% { -webkit-transform: translateY(0%); }
    100% { -webkit-transform: translateY(-100%); }
}

/** Keyframes Bottom to Top **/
@keyframes slide-bottom-in {
    0% { transform: translateY(100%); }
    100% { transform: translateY(0%); }
}

@-webkit-keyframes slide-bottom-in {
    0% { transform: translateY(100%); }
    100% { -webkit-transform: translateY(0%); }
}
    
@keyframes slide-bottom-out {
    0% { transform: translateY(0%); }
    100% { transform: translateY(100%); }
}

@-webkit-keyframes slide-bottom-out {
    0% { -webkit-transform: translateY(0%); }
    100% { -webkit-transform: translateY(100%); }
}

@-webkit-keyframes spin {
    from {
        -webkit-transform:rotate(0deg);
    }
    to {
        -webkit-transform:rotate(360deg);
    }
}

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}


.jcontextmenu {
    position:fixed;
    z-index:10000;
    background:#fff;
    color: #555;
    font-size: 11px;
    user-select: none;
    box-shadow: 2px 2px 2px 0px rgba(143, 144, 145, 1);
    border: 1px solid #C6C6C6;
    padding: 0px;
    padding-top:4px;
    padding-bottom:4px;
    margin:0px;
    outline:none;
    display:none;
}

.jcontextmenu.jcontextmenu-focus {
    display:inline-block;
}

.jcontextmenu > div {
    box-sizing: border-box;
    display: flex;
    padding: 8px 8px 8px 32px;
    width: 250px;
    position: relative;
    cursor: default;
    font-size: 11px;
    font-family:sans-serif;
}


.jcontextmenu > div a {
    color: #555;
    text-decoration: none;
    flex: 1;
}

.jcontextmenu > div span {
    margin-right:10px;
}

.jcontextmenu .jcontextmenu-disabled a {
    color: #ccc;
}

.jcontextmenu > div:hover {
    background: #ebebeb;
}

.jcontextmenu hr {
    border: 1px solid #e9e9e9;
    border-bottom: 0;
    margin-top:5px;
    margin-bottom:5px;
}

.jcontextmenu > hr:hover {
    background: transparent;
}

.jcontextmenu .jcontextmenu {
  top: 4px;
  left: 99%;
  opacity: 0;
  position: absolute;
}

.jcontextmenu > div:hover > .jcontextmenu {
  display: block;
  opacity: 1;
  -webkit-transform: translate(0, 0) scale(1);
  transform: translate(0, 0) scale(1);
  pointer-events: auto;
}


.jloading {
    position:fixed;
    z-index:10001;
    width:100%;
    left:0;
    right:0;
    top:0;
    bottom:0;
    background-color: rgba(0,0,0,0.7);
}

.jloading::after {
    content:'';
    display:block;
    margin:0 auto;
    margin-top:50vh;
    width:40px;
    height:40px;
    border-style:solid;
    border-color:white;
    border-top-color:transparent;
    border-width:4px;
    border-radius:50%;
    -webkit-animation: spin .8s linear infinite;
    animation: spin .8s linear infinite;
}

.jloading.spin {
    background-color:transparent;
}

.jloading.spin::after {
    margin:0 auto;
    margin-top:80px;
    border-color:#aaa;
    border-top-color:transparent;
}

