:root {
    --spacer-x: 4px !important;
    --spacer-y: 4px !important;
    --c-particle: 6px;

    --gutter-x: 5px !important;
    --gutter-y: 0 !important;
    --unit: 4px !important;
    --bar-height: calc(var(--c-particle)*8);
    --bar-width: calc(var(--c-particle)*10);
    --minibar-height: 30px;
    --minibar-width: 30px;
    --icon-box: 28px;
    --favicon-box: 24px;
    --cube: calc(var(--c-particle)*10);
}

.gx-0 { --gutter-x: 0 !important;}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/Poppins-Regular.ttf') format('truetype');
    font-display:swap;
}

@font-face {
    font-family: 'Poppins';
    font-style: oblique;
    font-weight: 700;
    src: url('../fonts/Poppins-Bold.ttf') format('truetype');
    font-display:swap;
}

body, html  {
    font-size:13px;
    font-family: 'Poppins', sans-serif;
}

body {
    color: var(--text-active);
    background-color: var(--workspace);
    position: relative;
    height: 100vh !important;
    width: 100vw !important;
    margin:0;
    padding:0;
    z-index: 0;
    overflow-y: hidden;
    overflow-x:hidden;
}

.d-none { display:none !important; }
.d-block { display:block !important;}
.d-inline-block { display:inline-block;}

.fw-bold { font-weight: bold; }
.fw-normal { font-weight: normal; }

.w-fit-content { width: fit-content !important; }
.h-fit-content { height: fit-content !important; max-height: fit-content !important;}
.fit-content { width: fit-content !important; height: fit-content !important; }

.mini { font-size: 0.7em;}
.small { font-size: 0.9em;}
.big { font-size: 1.2em; margin:0;}

h1, .h1 {font-size:1.675rem; font-weight:bold; line-height:1.2; }
h2, .h2 {font-size:1.425em; font-weight:bold; line-height:1.2; }
h3, .h3 {font-size:1.175rem; font-weight:bold; line-height:1.2; }
h4, .h4 {font-size:1.125rem; font-weight:bold; line-height:1.2;}
h5, .h5 {font-size:1.025rem; font-weight:bold; line-height:1.125;}
h6, .h6 {font-size:1rem; line-height:1.275;}

h1, h2, h3 { margin-block-start:0.4rem; margin-block-end:0.25rem;  margin-inline-start:0; margin-inline-end:0;}
h4 { margin-block-start:0.35rem; margin-block-end:0.25rem;  margin-inline-start:0; margin-inline-end:0;}
h5 { margin-block-start:0.3rem; margin-block-end:0.25rem;  margin-inline-start:0; margin-inline-end:0;}
h6 { margin-block-start:0.25rem; margin-block-end:0.25rem;  margin-inline-start:0; margin-inline-end:0;}

.full-size {
    width: 100% !important;
    height: 100% !important;
}

.w-100 { width: 100% !important; max-width: 100% !important; }
.h-100 { height: 100% !important; max-height: 100% !important; }
.w-100v { width: 100vw !important; max-width: 100vw !important; }
.h-100v { height: 100vh !important; max-height: 100vh !important; }
.h-50 { height: 50% !important; }
.w-50 { width: 50% !important; }
.h-50v { height: 50vh !important; }
.w-50v { width: 50vw !important; }

.overflow-hidden {
    overflow: hidden !important;
}
.overflow-x-auto { overflow-x: auto !important; }
.overflow-y-auto { overflow-y: auto !important; }

.scrollerY::-webkit-scrollbar {
    width: 7px;
    background: black;
}
.scrollerY::-webkit-scrollbar-thumb {
    background: #808080;
}

.scrollerX::-webkit-scrollbar {
    height: 7px;
    background: black;
}
.scrollerX::-webkit-scrollbar-thumb {
    background: #808080;
}
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 1px #e0e0e0;
    border-radius: 10px;
}
.no-select {
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.rounded { border-radius: var(--unit); }
.rounded-big { border-radius: calc(var(--unit) *2); }
.border { border: 1px var(--border-outer) solid; }
.border-1000 { border-width: 1px 0 0 0; border-color: var(--border-outer); border-style: solid; }
.border-0100 { border-width: 1px; border-color: transparent var(--border-outer) transparent transparent; border-style: solid; }
.border-0010 { border-width: 1px; border-color: transparent transparent var(--border-outer) transparent; border-style: solid; }
.border-0001 { border-width: 0 0 0 1px; border-color: var(--border-outer); border-style: solid; }

.border-rich {
    border-top: 1px var(--border-outer) solid;
    border-right: 1px var(--border-outer) solid;
    border-bottom: 1px var(--border-inner) solid;
    border-left: 1px var(--border-inner) solid;
}

.float-left {float: left;}
.float-right {float: right;}

.text-start { text-align: start; }
.text-end { text-align: end; }
.text-center { text-align: center; }

.text-none { color: transparent !important;}
.text-light { color: #e0e0e0 !important;}
.text-white { color: #ffffff !important;}
.text-red { color: red !important;}
.text-green { color: green !important;}
.text-yellow { color: lightgoldenrodyellow !important;}
.text-silver { color: silver !important;}
.text-gray { color: #626262 !important;}
.text-darkgray { color: #303030 !important;}
.text-purple {color:purple !important;}
.text-black {color:black !important;}
.text-muted {color: var(--text-muted) !important;}

.bg-none { background-color: transparent !important;}
.bg-light { background-color: #e0e0e0 !important;}
.bg-white { background-color: #ffffff !important;}
.bg-red { background-color: red !important;}
.bg-green { background-color: green !important;}
.bg-yellow { background-color: lightgoldenrodyellow !important;}
.bg-silver { background-color: silver !important;}
.bg-gray { background-color: #626262 !important;}
.bg-darkgray { background-color: #303030 !important;}
.bg-purple {background-color:purple !important;}
.bg-black {background-color:black !important;}

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

.position-relative { position:relative; }
.position-absolute { position:absolute; }

.cursor-pointer { cursor: pointer; }

.dragger-right {
    position:absolute;
    right:-3px;
    top:0;
    width:7px;
    height:100%;
  /*cursor: ew-resize;*/
    cursor: col-resize;
    z-index:1;
}

.dragger-left {
    position:absolute;
    left:-3px;
    top:0;
    width:7px;
    height:100%;
    /*cursor: ew-resize;*/
    cursor: col-resize;
    z-index:1;
}

.dragger-top {
    position:absolute;
    left:0;
    top:-3px;
    height:7px;
    width:100%;
    /*cursor: ns-resize;*/
    cursor: row-resize;
    z-index:1;
}

.dragger-bottom {
    position:absolute;
    left:0;
    bottom:-3px;
    height:7px;
    width:100%;
    /*cursor: ns-resize;*/
    cursor: row-resize;
    z-index:1;
}
.dragger-bottom:hover, .dragger-top:hover, .dragger-left:hover, .dragger-right:hover {
    background-color: var(--dragger-color);
    opacity: var(--dragger-opacity);
    z-index:1;
}

.direction-rtl {
    direction: rtl;
}

.direction-ltr {
    direction: ltr;
}