/* =====================================================
   NODE CONTAINER
===================================================== */

.org-node {

    position: absolute;

    inset: 0;
}


/* =====================================================
   KREISE
===================================================== */

.org-node-html {

    position: absolute;

    overflow: visible;

    text-align: center;

    text-decoration: none;

    color: #000;

    font-weight: bold;

    border-style: solid;

    border-width: 3px;

    border-color: #2196f3;

    transition: filter 0.2s;

    pointer-events: auto;
}

/*
--------------------------------------------------
Farbebene
--------------------------------------------------
*/

.org-node-background {

	position: absolute;

	inset: 0;

	background-size: contain;

	background-position: top left;

	background-repeat: no-repeat;

	z-index: 1;
}

/* =====================================================
   NODE SHAPES
===================================================== */

.org-node-circle {

	border-radius: 50%;
}

.org-node-circle .org-node-background {

	border-radius: 50%;
}

.org-node-rectangle {

	border-radius: 0;
}

.org-node-rectangle .org-node-background {

	border-radius: 0;
}

.org-node-rounded {

	border-radius: 24px;
}

.org-node-rounded .org-node-background {

	border-radius: 24px;
}


/* =====================================================
   HOVER EFFEKT
===================================================== */

.org-node-html:hover {

    filter: brightness(1.05);
}

.org-node-panel:hover {

	filter: none;
}

/* =====================================================
   TEXT IM KREIS
===================================================== */

.org-node-label {

    position: absolute;

    width: 99%;

    left: 0;
    top: 0;

    text-align: center;

    line-height: 1.2;

    pointer-events: auto;

    cursor: move;

    z-index: 10;

    word-break: break-word;

    text-shadow:
        0 1px 3px rgba(255,255,255,0.8);
}

.org-node-has-content .org-node-label {

	padding: 10px;
}

.org-node-panel .org-node-label {

	text-align: left;
}

.org-node-legend .org-node-label {

	font-size: 12px;

	line-height: 1.3;
}

/* =====================================================
   RESIZE HANDLE
===================================================== */

.org-node-resize {
	
	pointer-events: auto;

    position: absolute;

    right: 6px;
    bottom: 6px;

    width: 14px;
    height: 14px;

    border-radius: 50%;

    background: #ffffff;

    border: 2px solid #333;

    cursor: se-resize;

    z-index: 50;
}

/*
--------------------------------------------------
Hintergrundflächen
--------------------------------------------------
*/

.org-node-is-background {

	z-index: 1 !important;

	pointer-events: none;

	filter: brightness(0.96);
}

.org-node-is-background .org-node-background {

	box-shadow: none;

	filter: saturate(0.9);
}

/*
--------------------------------------------------
Node Content
--------------------------------------------------
*/

.org-node-content {

    margin-top: 6px;

    padding: 10px;

    font-size: 12px;

    line-height: 1.4;

    border-radius: 8px;

    background: rgba(255,255,255,0.72);

	/* backdrop-filter: blur(4px); */

    overflow-wrap: break-word;

    text-align: left;

    display: flex;

    flex-direction: column;
 
    gap: 6px;

    box-shadow:
        0 2px 8px rgba(0,0,0,0.08);
   	border:
        1px solid rgba(0,0,0,0.05);
    
    min-width: 160px;
}

.org-node-content strong {

    display: block;

    margin-bottom: 8px;

    padding-bottom: 6px;

    border-bottom:
        1px solid rgba(0,0,0,0.06);

    font-size: 16px;

    font-weight: 700;
}


/*
--------------------------------------------------
HTML Content
--------------------------------------------------
*/

.org-node-content h1,
.org-node-content h2,
.org-node-content h3,
.org-node-content h4 {

    margin-top: 12px;

    margin-bottom: 6px;

    line-height: 1.2;

    font-weight: 700;
}

.org-node-content h1 {

    font-size: 24px;
}

.org-node-content h2 {

    font-size: 20px;
}

.org-node-content h3 {

    font-size: 17px;
}

.org-node-content h4 {

    font-size: 15px;
}

.org-node-content p {

    margin-bottom: 10px;

    line-height: 1.5;
}

.org-node-content ul,
.org-node-content ol {

    padding-left: 20px;

    margin-bottom: 10px;
}

.org-node-content li {

    margin-bottom: 4px;
}


/*
--------------------------------------------------
Panel Shape
--------------------------------------------------
*/

.org-node-panel {

    border-radius: 28px !important;

    border-width: 2px !important;

    background:
        rgba(255,255,255,0.12);

    backdrop-filter:
        blur(6px);

    box-shadow:
        0 6px 20px rgba(0,0,0,0.12);

	padding: 12px;
}

.org-node-panel .org-node-content {

	background: rgba(255,255,255,0.82);
}

/*
--------------------------------------------------
Legend Shape
--------------------------------------------------
*/

.org-node-legend {

    border-radius: 16px !important;

    border-style: dashed;

    background: rgba(255,255,255,0.65);

    box-shadow: none;
}

.org-node-legend .org-node-content {

	padding: 6px;

	font-size: 11px;

	background: transparent;

	box-shadow: none;

	border: none;
}

/*
--------------------------------------------------
Icon Picker
--------------------------------------------------
*/

.orgmap-icon-picker {

	display: flex;

	flex-wrap: wrap;

	align-items: center;

	gap: 10px;

	margin-bottom: 15px;
}

.orgmap-icon-option {

	appearance: none;

	-webkit-appearance: none;

	width: 48px;

	height: 48px;

	display: flex;

	align-items: center;

	justify-content: center;

	padding: 0;

	border: 1px solid #ddd;

	border-radius: 10px;

	background: #fff;

	cursor: pointer;

	transition:
		transform .15s,
		background .15s,
		border-color .15s,
		box-shadow .15s;
}

.orgmap-icon-option i {

	font-size: 22px;

	color: #555;

	transition:
		font-size .15s,
		color .15s;
}

.orgmap-icon-option:hover {

	border-color: #5cb85c;

	background: #f7fff7;

	transform: scale(1.05);
}

.orgmap-icon-option.active {

	border: 2px solid #337ab7;

	background: #e8f4ff;

	box-shadow:
		0 0 0 3px rgba(51,122,183,.18);

	transform: scale(1.08);
}

.orgmap-icon-option.active i {

	font-size: 28px;

	color: #337ab7;
}

/*
--------------------------------------------------
Weitere Icons
--------------------------------------------------
*/

.orgmap-icon-panel {

	display: flex;

	flex-wrap: wrap;

	gap: 8px;

	margin: 12px 0 18px;

	padding: 12px;

	border: 1px solid #ddd;

	border-radius: 10px;

	background: #fafafa;
}

.orgmap-icon-panel[hidden] {

	display: none !important;
}

/*
--------------------------------------------------
Ausgewähltes Icon
--------------------------------------------------
*/

.orgmap-selected-icon {

	margin-top: 18px;

	width: 90px;

	height: 90px;

	display: flex;

	align-items: center;

	justify-content: center;

	border: 2px solid #337ab7;

	border-radius: 14px;

	background: linear-gradient(
		180deg,
		#ffffff,
		#eef6ff
	);

	box-shadow:
		0 6px 18px rgba(0,0,0,.08);
}

.orgmap-selected-icon i {

	font-size: 44px;

	color: #337ab7;
}

/*
--------------------------------------------------
Darkmode
--------------------------------------------------
*/

html[data-bs-theme="dark"] .orgmap-icon-option {

	background: #2b2b2b;

	border-color: #555;
}

html[data-bs-theme="dark"] .orgmap-icon-option i {

	color: #ddd;
}

html[data-bs-theme="dark"] .orgmap-icon-option.active {

	background: #1f3f63;

	border-color: #4da3ff;
}

html[data-bs-theme="dark"] .orgmap-icon-option.active i {

	color: #4da3ff;
}

html[data-bs-theme="dark"] .orgmap-icon-panel {

	background: #252525;

	border-color: #444;
}

html[data-bs-theme="dark"] .orgmap-selected-icon {

	background: linear-gradient(
		180deg,
		#2d2d2d,
		#1f1f1f
	);

	border-color: #4da3ff;
}

html[data-bs-theme="dark"] .orgmap-selected-icon i {

	color: #4da3ff;
}