/* @import url("sync-bootstrap-overrides.css"); */
@import url("sync-theme.css");
@import url("sync-helpers.css");
@import url("sync-icons.css");

:root {

  --snc-branding-app: "Invocate Sync App";
  --snc-branding-title: var(--snc-branding-app);
  --snc-branding-logo: url(../img/default_logo.svg);
  --snc-branding-subtitle-admin: "Beheerdersomgeving";
  --snc-branding-subtitle-default: "";
  
  --color-light-bg: #f5f9fc;;
  --color-light-color: black;
  --color-dark-bg: #262626;
  --color-dark-color: white;
  
  --bs-body-color: var(--color-light-color);
  --bs-body-bg: var(--color-light-bg);
  
  
  
  --panel-radius: .5rem;
  --panel-radius: 0rem;
  --panel-spacing: .75rem;
  --panel-bg: var(--color-light-bg); 
  --panel-color: var(--color-light-color); 
  
  
  --clear-panel-spacing: -.5rem;
  --icon-size: 1rem;
  --max-column-width: 450px;
  --block-size: 4.5rem;
  
  --snc-shadow-sm: rgba(0, 0, 0, 0.18) 0px 2px 4px;
  --snc-shadow-hard: 0.5rem .5rem 0 rgba(0,0,0,.15);
  --bs-box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
  --snc-shadow: var(--bs-box-shadow); 
}
  
:xroot {
  
  --snc-branding-app: "Invocate Sync App";
  --snc-branding-title: var(--snc-branding-app);
  --snc-branding-logo: url(../img/default_logo.svg);
  --snc-branding-subtitle-admin: "Beheerdersomgeving";
  --snc-branding-subtitle-default: "";
  
  --color-primary: #7428ee;
  --color-primary-hover: #5F74E4;
  --color-primary-text: white; 
  
  --color-secondary: #28d885;
  --color-secondary-text: white;
  
  --gradient: linear-gradient(323deg, var(--color-secondary), var(--color-primary));
  
  --color-shaded: #EBEBEB; /*rgba(0,0,0,0.05);*/
  --color-shaded: rgba(0,0,0,0.05);
  --color-shaded-medium: rgba(0,0,0,0.075);
  --color-shaded-dark: rgba(0,0,0,0.1);
  
  --color-dark: #000000d9;
  --color-lightgray: #f0f0f0;
  
  
  --bs-body-color: red;
  
  --color-lines: rgba(0, 0, 0, 0.125);
  --color-lines: red;
  
  --bg-hover: --color-shaded;
  
  
  --color-dimmed: rgba(0,0,0,0.5);
  --color-canvas: #2195c9;
  --shadow: 0 .5rem 1rem rgba(255,0,0,.15);
  --shadow: 0.5rem .5rem 0 rgba(0,0,0,.15);
  --bs-box-shadow: var(--shadow);
  --shadow-soft: 5px 6px 7px 0px rgba(0,0,0,0.1);
  
  --dimmed: 0.5;
  
  
 
  --bs-list-group-bg: #ffffff5c;

  
  --rounded: .125rem;  
  --small: 0.75rem;
 
	
  --panel-background: green;
  --panel-text: --bs-body-color;
  --panel-radius: .5rem;
  --panel-spacing: .5rem;
  --clear-panel-spacing: -.5rem;
  
  --bs-border-radius: var(--panel-radius);
  --bs-border-color: var(--color-lines);
  --bs-border-color: var(--color-lines);
 
  
font-size: 11pt;	
	
}

body {
font-family: Ubuntu, Roboto, Arial, Helvetica;
color: var(--color-primary-text);
background-color: var(--color-primary); 
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='100%25' gradientTransform='rotate(293,960,484)'%3E%3Cstop offset='0' stop-color='%2300000000'/%3E%3Cstop offset='1' stop-color='%23FFFFFF40'/%3E%3C/linearGradient%3E%3Cpattern patternUnits='userSpaceOnUse' id='b' width='844' height='703.3' x='0' y='0' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='0.12'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect x='0' y='0' fill='url(%23a)' width='100%25' height='100%25'/%3E%3Crect x='0' y='0' fill='url(%23b)' width='100%25' height='100%25'/%3E%3C/svg%3E");
}

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

.snc-admin-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-columns: auto 1fr auto;
grid-template-areas: "leftPanel mainPanel rightPanel";    
align-items: start;
cursor: default;
overflow: hidden;
height: 100vh;
}

#leftPanel {
grid-area: leftPanel;
height: 100%;
overflow: hidden;
}


#mainPanel {
grid-area: mainPanel;
overflow: auto;
height: 100%;
background-color: var(--panel-background);
}
#rightPanel {
grid-area: rightPanel;
}


h1 {
font-size: 2rem;
}
h2 {
font-size: 1.125rem;
font-weight: 600;
margin: 0;
}

h3 {
font-size: 1rem;
font-weight: 600;
line-height: 2;
margin: 0;
}

h4 {
font-size: 1rem;
}

p {
max-width: 50rem;
}

label {
xcolor: var(--color-primary);
font-size: var(--small);
opacity: unset!important;
}


textarea {
height: 10em;
}

.w-menu {
min-width: 250px;
}
.w-standard {
min-width: var(--max-column-width);
}
.g-panel {
gap: var(--panel-spacing);
}

.p-panel {
padding: var(--panel-spacing);
}

.m-panel {
margin: var(--panel-spacing);
}

/* ==============
 * Sync baseitem
 * ==============
 */
 
.snc-baseitem {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 1fr auto;
grid-template-columns: auto 1fr auto;
grid-template-areas:
    "ic ti sc tb"
    "ic st sc tb";
align-items: center;
column-gap: .5rem;
padding-left: var(--panel-spacing);
padding-top: var(--panel-spacing);
padding-bottom: var(--panel-spacing);
padding-right: var(--panel-spacing);
cursor: default;

}


.snc-baseitem-title {
grid-area: ti;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
font-weight: bold;
}


.snc-setting-subtitle, .snc-baseitem-subtitle {
grid-area: st;
font-size: var(--small);
opacity: var(--dimmed);
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}

.snc-setting-subtitle {
white-space: wrap;
}

.snc-baseitem-secondary {
grid-area: sc;

}
.snc-baseitem-icon {
grid-area: ic;
padding: .5rem;
border-radius: 3em;
line-height: 1;
/*font-size: 1em;*/
max-width: 3em;
max-height: 3em;
color: var(--color-secondary);
/*opacity: var(--dimmed);*/
}


.snc-baseitem-toolbar {
grid-area: tb;
display: flex;
}

.snc-baseitem-compact {
padding: var(--panel-spacing);
}



/* ==============
 * Sync setting
 * ==============
 */
 
.snc-setting {
display: flex;
flex-direction: row;
align-items: start; 
cursor: default;
padding: var(--panel-spacing);
}

.snc-setting > *:first-child {
display: flex;
flex-direction:column;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
width: 50%;
max-width: var(--first-column-width);
max-width: var(--max-column-width);
}

.snc-setting > *:nth-child(2) {
width: 50%;
flex-grow: 1;
align-self: center;
display: flex;
flex-direction: column;
row-gap: 1rem;
}

/* ========
 * List
 * ========*/
 
 
.snc-list {
margin: 0;
display: grid;
grid-template-rows: auto 1fr;
grid-template-areas: 
    "toolbar"
    "list"
    "view";
gap: var(--panel-spacing);
min-height: 0;
/*flex-grow: 100; */
position: relative;
}

.snc-list-splitview {
display: grid;
flex-grow: 100;
grid-template-columns:  var(--max-column-width) auto ;
grid-template-areas: 
    "toolbar view"
    "list view";
}


.snc-list [data-snc-role=list] {
grid-area: list;
grid-row: 2 / span 2;
overflow: auto;
display: flex;
flex-direction: column;
}

.snc-list-splitview [data-snc-role=list]{
border-right: 1px solid var(--bs-border-color);
padding-right: var(--panel-spacing);

}

.snc-list [data-snc-role=toolbar] {
grid-area: toolbar;
}
.snc-list [data-snc-role=view] {
grid-area: view;
xposition: absolute;
width: 100%;

grid-row-start: 1;
grid-row-end: 4;
overflow: auto;
}

[data-snc-role=view] .tab-pane {
overflow: auto;
}

[data-snc-role=view] > [data-snc-name=content] {
padding: 0;
}

.snc-list-new-sub [data-snc-role=subheader] > [data-snc-role=icon]::before {
content: "keyboard_arrow_down";
}

.snc-list-new-sub [data-snc-role=subheader].collapsed > [data-snc-role=icon]::before {
content: "keyboard_arrow_right";
}
/* List Container */

.list-group:empty::after,[data-snc-role=list]:empty::after{
content: "Lege lijst";
text-align: center;
font-size: var(--small);
padding: .5rem;
opacity: 0.5;
}

.snc-list-item:not(.selected):hover {
background-color: var(--color-shaded);
}
.snc-list-item {
transition: max-height 500ms ease, opacity 500ms ease; 
position: relative;
transform-origin: center;
opacity: 1;
border-bottom: 1px solid var(--bs-border-color);
}

/*
.selected {
--color-primary-text: white; 
}
*/

.selected .btn {
--bs-body-color: var(--color-primary-text);
}

.snc-list-item.selected {
background-color: var(--color-primary);
color: var(--color-primary-text);
}

.snc-contextmenu {
border-radius: var(--panel-radius);
box-shadow: var(--bs-box-shadow);
background-color: var(--bs-body-bg);
color: var(--bs-body-color);
cursor: default;
}

.dropdown-menu {
border-radius: var(--panel-radius);
box-shadow: var(--bs-box-shadow);
cursor: default;
padding: 0; 
overflow: hidden;
}

.dropdown-item {
padding: var(--panel-spacing);
}


.dropdown-item:hover {
background-color: var(--color-primary);
color: var(--color-primary-text);
}

.toolbar {
display: flex;
flex-direction: row;
column-gap: var(--panel-spacing);
align-items: center;
font-size: var(--icon-size);
}

.snc-taglist {
gap: .5rem;
flex-wrap: wrap;
}

.snc-taglist:empty {
padding: var(--panel-spacing);
}

.snc-taglist:empty ::before {
content: "Geen tags";
}
.snc-taglist > span {
border-radius: 50em;
border-width: 1px;
border-style: solid;
padding: 0 0.5rem;
text-wrap: nowrap;
}


.snc-media-preview {
border-radius: var(--panel-radius);
box-shadow: var(--shadow-soft);
padding: var(--panel-spacing);
border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
font-size: var(--small);
justify-content: center;
align-items: center;
max-width: 300px;
margin-left: auto;
}

.snc-media-preview img {
width: 100%;
height: auto;
overflow: hidden;
}

.snc-media-preview:empty::before {
content: "Geen preview beschikbaar";
}
.material-icons {
font-size: var(--icon-size);
vertical-align: middle;
}


/* Side bar */

.snc-sidebar.toolbar li {
width: var(--block-size); 
height: var(--block-size); 
display: flex;
align-items: center;
justify-content: center;
border-radius: 0;
}

.snc-sidebar.toolbar li.active {
color: var(--color-primary);
}


.snc-sidebar {
width: var(--block-size); 
}

.snc-sidepanel {
min-width: var(--max-column-width);
width: var(--max-column-width);
}

.h-block-size {
height: var(--block-size); 
}


/* Application branding/custommization */

.snc-branding-app::after {
content: var(--snc-branding-app);
}
.snc-branding-logo {
    background-image: var(--snc-branding-logo);
    height: var(--block-size);
    width: var(--block-size);
    background-size: 70%;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--color-primary);
    border-radius: 5px;
}

.snc-branding-title::after {
content: var(--snc-branding-title);
}

.snc-branding-subtitle::after {
content: var(--snc-branding-subtitle);
}

[snc-context=admin] .snc-branding-subtitle::after {
content: var(--snc-branding-subtitle-admin);
}
[snc-context=default] .snc-branding-subtitle::after {
content: var(--snc-branding-subtitle-default);
}





.snc-readonly .snc-baseitem-icon::after {
content: "lock"!important;
opacity: 0.5;
}


/* Min max slider */
.snc-gui-slider-minmax {
width: 100%;
position: relative;
}
.snc-gui-slider-minmax-track { 
position: absolute;
width: 100%;
height: 5px;
background-color: var(--color-shaded);
border-radius: 3em;
pointer-events: none;
}

.snc-gui-slider-minmax-range { 
position: absolute;
height: 5px;
background-color: var(--color-secondary);
border-radius: 3em;
pointer-events: none;
}

.snc-gui-slider-minmax-handle { 
width: 1em;
height: 1em;
background-color: var(--color-primary);
border-radius: 3em;
cursor: pointer;
transform: translate(-50%);
}


/* CANVAS */

.snc-canvas {
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
overflow: hidden;
user-select: none;

}

.snc-canvas-label {
background-color: rgb(0 0 0 / 20%);
padding: 0.125rem 0.5rem;
font-size: .85rem;
opacity: 1;
border: none;
border-radius: 0.5rem;
text-shadow: none;
}


.bg-canvas {
overflow: hidden;
}

.bg-canvas > div {
box-shadow: var(--shadow);
}

.snc-canvas svg{
width: 100%;
height: 100%;
position: absolute;
display: block;
}

.snc-canvasToolbar {
bottom: 0;
left: 0;
}

.selectionArea {
position: absolute;
background-color: rgba(0,0,0,0.25);
border: 1px solid var(--color-primary);
pointer-events: none;
}


/* DRAWERS */


.snc-drawer-bottom:not(:has( .show, input:focus) ) {
transform: translateY(100%);
}
.snc-drawer-bottom:has( .show, input:focus)  {
transition-delay: 0s;
}


.snc-drawer-right:not(:has( .show, input:focus) ) {
transform: translateX(100%);
}
.snc-drawer-right:has( .show, input:focus)  {
transition-delay: 0s;
}


.snc-drawer-left:not(:has( .show, input:focus) ) {
transform: translateX(-90%);
}
.snc-drawer-left:has( .show, input:focus)  {
transition-delay: 0s;
}

.snc-drawer {
transition: all 300ms 1s ease-in-out;
position: absolute;
z-index: 999;
}

.snc-drawer:hover {
transition: all 300ms ease-in-out;
transform: unset!important;

}

.snc-drawer [data-role=pin]::after {
content: "lock_open";
}
.snc-drawer.show [data-role=pin]::after {
content: "lock";
}
.snc-drawer.show {
transform: unset!important;
}


.snc-drawer-handle {
position: absolute;
background-color: inherit;
}

.snc-drawer-handle-left {
margin: 0!important;
top: 50%;
transform: translate(-100%,-50%);
border-radius: 5em 0 0 5em;
}

.snc-drawer-handle-top {
margin: 0 !important;
top: 0;
transform: translate(-50%, -100%);
border-radius: 5em 5em 0em 0em;
left: 50%;
}



snc-node {
position: absolute;
pointer-events: auto;
z-index: 0;
will-change: left, top;
}

snc-node > .snc-popup {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
margin-bottom: 1em;
}

snc-node > .snc-label {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,50%);
text-shadow: none;
background-color: var(--color-primary);
color: var( --color-primary-text);
}

.snc-label-text{
    position: absolute;
    transform: translate(-50%, 50%);
    xbackground-color: white;
    font-size: .75em;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
    text-wrap: nowrap;
    padding: .15em .5em;
    margin: 1em 0;
}
snc-node:not(.snc-node-inrange) .snc-label-text{
display: none;
}

snc-node > .snc-label:first-child {
transform: translate(-50%,-50%);
}


@keyframes pulse-animation {
  0% {
    box-shadow: 0 0 0 0px rgba(255, 255, 255, 0.75);
  }
  100% {
    box-shadow: 0 0 0 30px rgba(255, 255, 255, 0);
  }
}
.pulse {
  animation: pulse-animation 1s infinite;
}

snc-node > .snc-label.selected {
 animation: pulse-animation 1s infinite;
}


snc-node > .snc-label:hover {
background-color: var(--color-primary);
transition: background-color 500ms ease-in-out;
}


snc-node > .snc-connector  {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
border: 2px solid black;
background-color: var(--color-primary);
border-radius: 2em;
padding: .25rem;
width: 1.5em;
height: 1.5em;
}



.snc-node-line {
border: 2px solid white;
width: 0px;
height: 0px;
position: absolute;
pointer-events: none;
border-width: 2px 2px 0 0;
z-index: -1;
/* By default, assume static popup on top left, nodes to the right/bottom */
bottom: 0;
right: 50%;
margin-top: 1em;
margin-left: 1em;

}

.snc-node-line.right{
left: 50%;
right: unset;
}

.snc-label {
xborder-radius: 2em;
padding: .25em .5rem ;
white-space: nowrap;
color: white;
/*text-shadow: -1px 1px 0px #000, 1px 1px 0px #000, 1px -1px 0 #000, -1px -1px 0 #000; */
text-shadow: 3px 2px 0px #0000007a;
}


.snc-popup {
background-color: white;
box-shadow: var(--shadow); 
height: unset!important;
width: 450px;
z-index: 1;
}


.snc-popup-contained {
position: absolute;
top: 0;

}

.snc-loadingStatus {
position: fixed;
bottom: 0;
left: 50%;
}

.snc-loadingStatus .spinner-border{
color: var(--color-primary);
background-color: transparent;
}


/* TABS */ 

[data-snc-name=content] {
display: flex;
flex-direction: column;
xheight: 100%;
padding: var(--panel-spacing);
gap: var(--panel-spacing);
}

[data-snc-name=content] .nav-tabs {
margin-bottom: var(--clear-panel-spacing); 
}


.tab-content {
display: flex;
min-height: 0;

}

.tab-pane.active {
display: flex!important;
flex-direction: column;
}

.tab-pane {
background-color: var(--bs-body-bg); 
color: var(--bs-body-color);
min-height: 0; /* Change to 100% to make tab panes fill tab-content */
width: 100%;
padding: var(--panel-spacing);
gap: var(--panel-spacing);
overflow: auto;
flex-grow: 100;
}


.snc-sidepanel .snc-list {
margin: calc( -1 * var(--panel-spacing));
}

.text-bg-dark:not(.dropdown-menu) {
--bs-body-bg: var(--color-dark-bg);
--bs-body-color: var(--color-dark-color);
--bs-tertiary-bg: none;
--bs-border-color: #555555;
}

.text-bg-dark .form-control::placeholder, .text-bg-dark .form-select::placeholder {
color: inherit!important;
}

/*
.dropdown-menu {

--bs-body-bg: var(--color-light-bg);
--bs-body-color: var(--color-light-color);


}
*/
/* WINDOWS */ 

.snc-window {
display: flex;
flex-direction: column;
background-color: var(--bs-body-bg);
color: var(--bs-body-color);

border-radius: var(--panel-radius);
box-shadow: var(--bs-box-shadow);
padding: var(--panel-spacing);

}

.snc-contextmenu {
position: absolute;

}

/*
.snc-gui-panel {
gap: var(--panel-spacing);
padding: var(--panel-spacing);
}
*/
.snc-dialog {
display: flex;
flex-direction: column;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
z-index: 999;
max-width: 70vw;
max-height: 80vh;
min-width: 300px;
overflow: auto;
gap: var(--panel-spacing);
}



.btn {
font-weight: bold;
border: none;
color: inherit;
padding: .5rem .75rem;
font-size: 1rem;
}

.btn:hover,.nav-link:hover {
color: var(--color-secondary)!important;
}

.btn-primary {
background-color: var(--color-primary);
color: var( --color-primary-text);
}

.btn-primary:hover {
background-color: var(--color-primary-hover);
color: var( --color-primary-text)!important;
}

.btn-secondary {
background: none;
}

.btn-secondary:hover {
background: none;
color: var(--color-primary);
}


.nav-link {
color: inherit!important;
border: none!important;
}


.nav-item {
border: none!important;

}

.nav-link.active {
background-color: var(--bs-body-bg)!important;
border: none;
border-bottom: 2px solid var(--color-primary)!important;
color: var(--bs-body-color) !important;
/*font-weight: bold;*/
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
background-color: var(--color-shaded);
border-bottom: 2px solid var(--color-primary);
}


.form-control, .form-select {
box-shadow: none!important;
}
.form-control:focus, .form-select:focus { 
border-color: var(--color-primary);
}

option {
text-transform: capitalize;
}
select {
text-transform: capitalize;
}

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

.list-group {
border: none;
box-shadow: var(--snc-shadow-sm);

}

.list-group .list-group {
box-shadow: none;
}

.list-group-item {
border: none;
background-color: white;
color: var(--color-light-color);
}

.list-group .list-group-item:first-child label {
margin-bottom: -1em;
}

.list-group .list-group-item:not(:first-child) label {
display: none;
}


.badge {
background-color: var(--color-secondary);
color: white;
}