@charset "UTF-8";
.indigo .primary, .indigo.primary {
  background-color: #3f51b5;
  color: #ffffff;
}
.indigo .light, .indigo.light {
  background-color: #c5cae9;
  color: #000000;
}
.indigo .dark, .indigo.dark {
  background-color: #303f9f;
  color: #ffffff;
}
.indigo .complementary, .indigo.complementary {
  background-color: #b53f51;
  color: #ffffff;
}
.indigo .font-primary, .indigo.font-primary {
  color: #ffffff;
}
.indigo .font-secondary, .indigo.font-secondary {
  color: #000000;
}

.magenta .primary, .magenta.primary {
  background-color: #e91e63;
  color: #ffffff;
}
.magenta .light, .magenta.light {
  background-color: #f8bbd0;
  color: #000000;
}
.magenta .dark, .magenta.dark {
  background-color: #c2185b;
  color: #ffffff;
}
.magenta .complementary, .magenta.complementary {
  background-color: #1ee9c7;
  color: #000000;
}
.magenta .font-primary, .magenta.font-primary {
  color: #ffffff;
}
.magenta .font-secondary, .magenta.font-secondary {
  color: #000000;
}

.cyan .primary, .cyan.primary {
  background-color: #00bcd4;
  color: #ffffff;
}
.cyan .light, .cyan.light {
  background-color: #b2ebf2;
  color: #000000;
}
.cyan .dark, .cyan.dark {
  background-color: #0097a7;
  color: #ffffff;
}
.cyan .complementary, .cyan.complementary {
  background-color: #d4001d;
  color: #ffffff;
}
.cyan .font-primary, .cyan.font-primary {
  color: #ffffff;
}
.cyan .font-secondary, .cyan.font-secondary {
  color: #000000;
}

.lime .primary, .lime.primary {
  background-color: #cddc39;
  color: #000000;
}
.lime .light, .lime.light {
  background-color: #f0f4c3;
  color: #000000;
}
.lime .dark, .lime.dark {
  background-color: #afb42b;
  color: #000000;
}
.lime .complementary, .lime.complementary {
  background-color: #8c39dc;
  color: #ffffff;
}
.lime .font-primary, .lime.font-primary {
  color: #000000;
}
.lime .font-secondary, .lime.font-secondary {
  color: #000000;
}

.red .primary, .red.primary {
  background-color: #f44336;
  color: #ffffff;
}
.red .light, .red.light {
  background-color: #ffcdd2;
  color: #000000;
}
.red .dark, .red.dark {
  background-color: #d32f2f;
  color: #ffffff;
}
.red .complementary, .red.complementary {
  background-color: #36f443;
  color: #000000;
}
.red .font-primary, .red.font-primary {
  color: #ffffff;
}
.red .font-secondary, .red.font-secondary {
  color: #000000;
}

.green .primary, .green.primary {
  background-color: #4caf50;
  color: #000000;
}
.green .light, .green.light {
  background-color: #c8e6c9;
  color: #000000;
}
.green .dark, .green.dark {
  background-color: #388e3c;
  color: #ffffff;
}
.green .complementary, .green.complementary {
  background-color: #af4cab;
  color: #ffffff;
}
.green .font-primary, .green.font-primary {
  color: #000000;
}
.green .font-secondary, .green.font-secondary {
  color: #000000;
}

.blue .primary, .blue.primary {
  background-color: #2196f3;
  color: #ffffff;
}
.blue .light, .blue.light {
  background-color: #bbdefb;
  color: #000000;
}
.blue .dark, .blue.dark {
  background-color: #1976d2;
  color: #ffffff;
}
.blue .complementary, .blue.complementary {
  background-color: #f32121;
  color: #ffffff;
}
.blue .font-primary, .blue.font-primary {
  color: #ffffff;
}
.blue .font-secondary, .blue.font-secondary {
  color: #000000;
}

.orange .primary, .orange.primary {
  background-color: #ff9800;
  color: #000000;
}
.orange .light, .orange.light {
  background-color: #ffe0b2;
  color: #000000;
}
.orange .dark, .orange.dark {
  background-color: #f57c00;
  color: #000000;
}
.orange .complementary, .orange.complementary {
  background-color: #0098ff;
  color: #ffffff;
}
.orange .font-primary, .orange.font-primary {
  color: #000000;
}
.orange .font-secondary, .orange.font-secondary {
  color: #000000;
}

.violet .primary, .violet.primary {
  background-color: #9c27b0;
  color: #ffffff;
}
.violet .light, .violet.light {
  background-color: #e1bee7;
  color: #000000;
}
.violet .dark, .violet.dark {
  background-color: #7b1fa2;
  color: #ffffff;
}
.violet .complementary, .violet.complementary {
  background-color: #27b09c;
  color: #000000;
}
.violet .font-primary, .violet.font-primary {
  color: #ffffff;
}
.violet .font-secondary, .violet.font-secondary {
  color: #000000;
}

.teal .primary, .teal.primary {
  background-color: #009688;
  color: #ffffff;
}
.teal .light, .teal.light {
  background-color: #b2dfdb;
  color: #000000;
}
.teal .dark, .teal.dark {
  background-color: #00796b;
  color: #ffffff;
}
.teal .complementary, .teal.complementary {
  background-color: #880010;
  color: #ffffff;
}
.teal .font-primary, .teal.font-primary {
  color: #ffffff;
}
.teal .font-secondary, .teal.font-secondary {
  color: #000000;
}

.yellow .primary, .yellow.primary {
  background-color: #ffeb3b;
  color: #000000;
}
.yellow .light, .yellow.light {
  background-color: #fff9c4;
  color: #000000;
}
.yellow .dark, .yellow.dark {
  background-color: #fbc02d;
  color: #000000;
}
.yellow .complementary, .yellow.complementary {
  background-color: #3b3bff;
  color: #ffffff;
}
.yellow .font-primary, .yellow.font-primary {
  color: #000000;
}
.yellow .font-secondary, .yellow.font-secondary {
  color: #000000;
}

.turquoise .primary, .turquoise.primary {
  background-color: #40e0d0;
  color: #000000;
}
.turquoise .light, .turquoise.light {
  background-color: #a7f0e9;
  color: #000000;
}
.turquoise .dark, .turquoise.dark {
  background-color: #20b2aa;
  color: #000000;
}
.turquoise .complementary, .turquoise.complementary {
  background-color: #e04050;
  color: #ffffff;
}
.turquoise .font-primary, .turquoise.font-primary {
  color: #000000;
}
.turquoise .font-secondary, .turquoise.font-secondary {
  color: #000000;
}

.rose .primary, .rose.primary {
  background-color: #ff80ab;
  color: #000000;
}
.rose .light, .rose.light {
  background-color: #ffc1e3;
  color: #000000;
}
.rose .dark, .rose.dark {
  background-color: #c94f7c;
  color: #ffffff;
}
.rose .complementary, .rose.complementary {
  background-color: #80ffab;
  color: #000000;
}
.rose .font-primary, .rose.font-primary {
  color: #000000;
}
.rose .font-secondary, .rose.font-secondary {
  color: #000000;
}

.brown .primary, .brown.primary {
  background-color: #795548;
  color: #ffffff;
}
.brown .light, .brown.light {
  background-color: #d7ccc8;
  color: #000000;
}
.brown .dark, .brown.dark {
  background-color: #5d4037;
  color: #ffffff;
}
.brown .complementary, .brown.complementary {
  background-color: #487975;
  color: #ffffff;
}
.brown .font-primary, .brown.font-primary {
  color: #ffffff;
}
.brown .font-secondary, .brown.font-secondary {
  color: #000000;
}

.gold .primary, .gold.primary {
  background-color: #ffd700;
  color: #000000;
}
.gold .light, .gold.light {
  background-color: #fff6cc;
  color: #000000;
}
.gold .dark, .gold.dark {
  background-color: #ccac00;
  color: #000000;
}
.gold .complementary, .gold.complementary {
  background-color: #0027ff;
  color: #ffffff;
}
.gold .font-primary, .gold.font-primary {
  color: #000000;
}
.gold .font-secondary, .gold.font-secondary {
  color: #000000;
}

.slate .primary, .slate.primary {
  background-color: #708090;
  color: #ffffff;
}
.slate .light, .slate.light {
  background-color: #c0c5ce;
  color: #000000;
}
.slate .dark, .slate.dark {
  background-color: #4a5764;
  color: #ffffff;
}
.slate .complementary, .slate.complementary {
  background-color: #908070;
  color: #ffffff;
}
.slate .font-primary, .slate.font-primary {
  color: #ffffff;
}
.slate .font-secondary, .slate.font-secondary {
  color: #000000;
}

.coral .primary, .coral.primary {
  background-color: #ff7f50;
  color: #000000;
}
.coral .light, .coral.light {
  background-color: #ffbca7;
  color: #000000;
}
.coral .dark, .coral.dark {
  background-color: #cc6540;
  color: #ffffff;
}
.coral .complementary, .coral.complementary {
  background-color: #50b0ff;
  color: #000000;
}
.coral .font-primary, .coral.font-primary {
  color: #000000;
}
.coral .font-secondary, .coral.font-secondary {
  color: #000000;
}

.emerald .primary, .emerald.primary {
  background-color: #50c878;
  color: #000000;
}
.emerald .light, .emerald.light {
  background-color: #a7e3bc;
  color: #000000;
}
.emerald .dark, .emerald.dark {
  background-color: #3da05f;
  color: #ffffff;
}
.emerald .complementary, .emerald.complementary {
  background-color: #c85050;
  color: #ffffff;
}
.emerald .font-primary, .emerald.font-primary {
  color: #000000;
}
.emerald .font-secondary, .emerald.font-secondary {
  color: #000000;
}

.lavender .primary, .lavender.primary {
  background-color: #e6e6fa;
  color: #000000;
}
.lavender .light, .lavender.light {
  background-color: #f5f5fd;
  color: #000000;
}
.lavender .dark, .lavender.dark {
  background-color: #b8b8dc;
  color: #000000;
}
.lavender .complementary, .lavender.complementary {
  background-color: #fae6e6;
  color: #000000;
}
.lavender .font-primary, .lavender.font-primary {
  color: #000000;
}
.lavender .font-secondary, .lavender.font-secondary {
  color: #000000;
}

.steel .primary, .steel.primary {
  background-color: #4682b4;
  color: #ffffff;
}
.steel .light, .steel.light {
  background-color: #a3c1df;
  color: #000000;
}
.steel .dark, .steel.dark {
  background-color: #376890;
  color: #ffffff;
}
.steel .complementary, .steel.complementary {
  background-color: #b44646;
  color: #ffffff;
}
.steel .font-primary, .steel.font-primary {
  color: #ffffff;
}
.steel .font-secondary, .steel.font-secondary {
  color: #000000;
}

.peach .primary, .peach.primary {
  background-color: #ffcba4;
  color: #000000;
}
.peach .light, .peach.light {
  background-color: #ffe5d1;
  color: #000000;
}
.peach .dark, .peach.dark {
  background-color: #cca283;
  color: #000000;
}
.peach .complementary, .peach.complementary {
  background-color: #a4c2ff;
  color: #000000;
}
.peach .font-primary, .peach.font-primary {
  color: #000000;
}
.peach .font-secondary, .peach.font-secondary {
  color: #000000;
}

.mint .primary, .mint.primary {
  background-color: #98fb98;
  color: #000000;
}
.mint .light, .mint.light {
  background-color: #cbfdcb;
  color: #000000;
}
.mint .dark, .mint.dark {
  background-color: #79c879;
  color: #000000;
}
.mint .complementary, .mint.complementary {
  background-color: #fb98fb;
  color: #000000;
}
.mint .font-primary, .mint.font-primary {
  color: #000000;
}
.mint .font-secondary, .mint.font-secondary {
  color: #000000;
}

.ruby .primary, .ruby.primary {
  background-color: #e0115f;
  color: #ffffff;
}
.ruby .light, .ruby.light {
  background-color: #f08aaf;
  color: #000000;
}
.ruby .dark, .ruby.dark {
  background-color: #b30e4c;
  color: #ffffff;
}
.ruby .complementary, .ruby.complementary {
  background-color: #11e091;
  color: #000000;
}
.ruby .font-primary, .ruby.font-primary {
  color: #ffffff;
}
.ruby .font-secondary, .ruby.font-secondary {
  color: #000000;
}

.sky .primary, .sky.primary {
  background-color: #87ceeb;
  color: #000000;
}
.sky .light, .sky.light {
  background-color: #c3e6f5;
  color: #000000;
}
.sky .dark, .sky.dark {
  background-color: #6ca5bc;
  color: #000000;
}
.sky .complementary, .sky.complementary {
  background-color: #eba587;
  color: #000000;
}
.sky .font-primary, .sky.font-primary {
  color: #000000;
}
.sky .font-secondary, .sky.font-secondary {
  color: #000000;
}

.plum .primary, .plum.primary {
  background-color: #8e4585;
  color: #ffffff;
}
.plum .light, .plum.light {
  background-color: #c89fc3;
  color: #000000;
}
.plum .dark, .plum.dark {
  background-color: #71376a;
  color: #ffffff;
}
.plum .complementary, .plum.complementary {
  background-color: #45858e;
  color: #ffffff;
}
.plum .font-primary, .plum.font-primary {
  color: #ffffff;
}
.plum .font-secondary, .plum.font-secondary {
  color: #000000;
}

.fire .primary, .fire.primary {
  background-color: #ff4500;
  color: #ffffff;
}
.fire .light, .fire.light {
  background-color: #ffa280;
  color: #000000;
}
.fire .dark, .fire.dark {
  background-color: #cc3700;
  color: #ffffff;
}
.fire .complementary, .fire.complementary {
  background-color: #00a2ff;
  color: #000000;
}
.fire .font-primary, .fire.font-primary {
  color: #ffffff;
}
.fire .font-secondary, .fire.font-secondary {
  color: #000000;
}

.iceberg .primary, .iceberg.primary {
  background-color: #71a6d2;
  color: #000000;
}
.iceberg .light, .iceberg.light {
  background-color: #b8d2e9;
  color: #000000;
}
.iceberg .dark, .iceberg.dark {
  background-color: #5a85a8;
  color: #ffffff;
}
.iceberg .complementary, .iceberg.complementary {
  background-color: #d29d71;
  color: #000000;
}
.iceberg .font-primary, .iceberg.font-primary {
  color: #000000;
}
.iceberg .font-secondary, .iceberg.font-secondary {
  color: #000000;
}

.moss .primary, .moss.primary {
  background-color: #8a9a5b;
  color: #000000;
}
.moss .light, .moss.light {
  background-color: #c5cea6;
  color: #000000;
}
.moss .dark, .moss.dark {
  background-color: #6e7b49;
  color: #ffffff;
}
.moss .complementary, .moss.complementary {
  background-color: #6b5b9a;
  color: #ffffff;
}
.moss .font-primary, .moss.font-primary {
  color: #000000;
}
.moss .font-secondary, .moss.font-secondary {
  color: #000000;
}

.denim .primary, .denim.primary {
  background-color: #1560bd;
  color: #ffffff;
}
.denim .light, .denim.light {
  background-color: #8aade2;
  color: #000000;
}
.denim .dark, .denim.dark {
  background-color: #114d97;
  color: #ffffff;
}
.denim .complementary, .denim.complementary {
  background-color: #bd7815;
  color: #000000;
}
.denim .font-primary, .denim.font-primary {
  color: #ffffff;
}
.denim .font-secondary, .denim.font-secondary {
  color: #000000;
}

.apricot .primary, .apricot.primary {
  background-color: #fbceb1;
  color: #000000;
}
.apricot .light, .apricot.light {
  background-color: #fde7d8;
  color: #000000;
}
.apricot .dark, .apricot.dark {
  background-color: #c9a58e;
  color: #000000;
}
.apricot .complementary, .apricot.complementary {
  background-color: #b1cefb;
  color: #000000;
}
.apricot .font-primary, .apricot.font-primary {
  color: #000000;
}
.apricot .font-secondary, .apricot.font-secondary {
  color: #000000;
}

.flamingo .primary, .flamingo.primary {
  background-color: #fc8eac;
  color: #000000;
}
.flamingo .light, .flamingo.light {
  background-color: #fec6d6;
  color: #000000;
}
.flamingo .dark, .flamingo.dark {
  background-color: #ca7289;
  color: #000000;
}
.flamingo .complementary, .flamingo.complementary {
  background-color: #8efcde;
  color: #000000;
}
.flamingo .font-primary, .flamingo.font-primary {
  color: #000000;
}
.flamingo .font-secondary, .flamingo.font-secondary {
  color: #000000;
}

.cobalt .primary, .cobalt.primary {
  background-color: #0047ab;
  color: #ffffff;
}
.cobalt .light, .cobalt.light {
  background-color: #80a3d5;
  color: #000000;
}
.cobalt .dark, .cobalt.dark {
  background-color: #003989;
  color: #ffffff;
}
.cobalt .complementary, .cobalt.complementary {
  background-color: #ab6000;
  color: #ffffff;
}
.cobalt .font-primary, .cobalt.font-primary {
  color: #ffffff;
}
.cobalt .font-secondary, .cobalt.font-secondary {
  color: #000000;
}

.sand .primary, .sand.primary {
  background-color: #f4a460;
  color: #000000;
}
.sand .light, .sand.light {
  background-color: #f9d1af;
  color: #000000;
}
.sand .dark, .sand.dark {
  background-color: #c3834d;
  color: #000000;
}
.sand .complementary, .sand.complementary {
  background-color: #60a0f4;
  color: #000000;
}
.sand .font-primary, .sand.font-primary {
  color: #000000;
}
.sand .font-secondary, .sand.font-secondary {
  color: #000000;
}

.charcoal .primary, .charcoal.primary {
  background-color: #36454f;
  color: #ffffff;
}
.charcoal .light, .charcoal.light {
  background-color: #8d9ca6;
  color: #000000;
}
.charcoal .dark, .charcoal.dark {
  background-color: #2b373f;
  color: #ffffff;
}
.charcoal .complementary, .charcoal.complementary {
  background-color: #4f4036;
  color: #ffffff;
}
.charcoal .font-primary, .charcoal.font-primary {
  color: #ffffff;
}
.charcoal .font-secondary, .charcoal.font-secondary {
  color: #000000;
}

.lemon .primary, .lemon.primary {
  background-color: #fff44f;
  color: #000000;
}
.lemon .light, .lemon.light {
  background-color: #fffaa6;
  color: #000000;
}
.lemon .dark, .lemon.dark {
  background-color: #ccc33f;
  color: #000000;
}
.lemon .complementary, .lemon.complementary {
  background-color: #4f4fff;
  color: #ffffff;
}
.lemon .font-primary, .lemon.font-primary {
  color: #000000;
}
.lemon .font-secondary, .lemon.font-secondary {
  color: #000000;
}

.orchid .primary, .orchid.primary {
  background-color: #da70d6;
  color: #000000;
}
.orchid .light, .orchid.light {
  background-color: #ecb7ea;
  color: #000000;
}
.orchid .dark, .orchid.dark {
  background-color: #ae5aab;
  color: #ffffff;
}
.orchid .complementary, .orchid.complementary {
  background-color: #70d4da;
  color: #000000;
}
.orchid .font-primary, .orchid.font-primary {
  color: #000000;
}
.orchid .font-secondary, .orchid.font-secondary {
  color: #000000;
}

.caramel .primary, .caramel.primary {
  background-color: #af6e4d;
  color: #ffffff;
}
.caramel .light, .caramel.light {
  background-color: #d7b6a3;
  color: #000000;
}
.caramel .dark, .caramel.dark {
  background-color: #8c583d;
  color: #ffffff;
}
.caramel .complementary, .caramel.complementary {
  background-color: #4d8eaf;
  color: #ffffff;
}
.caramel .font-primary, .caramel.font-primary {
  color: #ffffff;
}
.caramel .font-secondary, .caramel.font-secondary {
  color: #000000;
}

.pine .primary, .pine.primary {
  background-color: #01796f;
  color: #ffffff;
}
.pine .light, .pine.light {
  background-color: #80bcb7;
  color: #000000;
}
.pine .dark, .pine.dark {
  background-color: #016159;
  color: #ffffff;
}
.pine .complementary, .pine.complementary {
  background-color: #79011b;
  color: #ffffff;
}
.pine .font-primary, .pine.font-primary {
  color: #ffffff;
}
.pine .font-secondary, .pine.font-secondary {
  color: #000000;
}

.ocean .primary, .ocean.primary {
  background-color: #4f42b5;
  color: #ffffff;
}
.ocean .light, .ocean.light {
  background-color: #a7a1da;
  color: #000000;
}
.ocean .dark, .ocean.dark {
  background-color: #3f3591;
  color: #ffffff;
}
.ocean .complementary, .ocean.complementary {
  background-color: #a8b542;
  color: #000000;
}
.ocean .font-primary, .ocean.font-primary {
  color: #ffffff;
}
.ocean .font-secondary, .ocean.font-secondary {
  color: #000000;
}

.blush .primary, .blush.primary {
  background-color: #de5d83;
  color: #ffffff;
}
.blush .light, .blush.light {
  background-color: #efaec1;
  color: #000000;
}
.blush .dark, .blush.dark {
  background-color: #b24a69;
  color: #ffffff;
}
.blush .complementary, .blush.complementary {
  background-color: #5dde9a;
  color: #000000;
}
.blush .font-primary, .blush.font-primary {
  color: #ffffff;
}
.blush .font-secondary, .blush.font-secondary {
  color: #000000;
}

.jade .primary, .jade.primary {
  background-color: #00a86b;
  color: #ffffff;
}
.jade .light, .jade.light {
  background-color: #80d4b5;
  color: #000000;
}
.jade .dark, .jade.dark {
  background-color: #008656;
  color: #ffffff;
}
.jade .complementary, .jade.complementary {
  background-color: #a80047;
  color: #ffffff;
}
.jade .font-primary, .jade.font-primary {
  color: #ffffff;
}
.jade .font-secondary, .jade.font-secondary {
  color: #000000;
}

.periwinkle .primary, .periwinkle.primary {
  background-color: #ccccff;
  color: #000000;
}
.periwinkle .light, .periwinkle.light {
  background-color: #e5e5ff;
  color: #000000;
}
.periwinkle .dark, .periwinkle.dark {
  background-color: #a3a3cc;
  color: #000000;
}
.periwinkle .complementary, .periwinkle.complementary {
  background-color: #ffffcc;
  color: #000000;
}
.periwinkle .font-primary, .periwinkle.font-primary {
  color: #000000;
}
.periwinkle .font-secondary, .periwinkle.font-secondary {
  color: #000000;
}

.brick .primary, .brick.primary {
  background-color: #cb4154;
  color: #ffffff;
}
.brick .light, .brick.light {
  background-color: #e5a0a9;
  color: #000000;
}
.brick .dark, .brick.dark {
  background-color: #a23443;
  color: #ffffff;
}
.brick .complementary, .brick.complementary {
  background-color: #41cbb8;
  color: #000000;
}
.brick .font-primary, .brick.font-primary {
  color: #ffffff;
}
.brick .font-secondary, .brick.font-secondary {
  color: #000000;
}

.wine .primary, .wine.primary {
  background-color: #722f37;
  color: #ffffff;
}
.wine .light, .wine.light {
  background-color: #b9979b;
  color: #000000;
}
.wine .dark, .wine.dark {
  background-color: #5b252c;
  color: #ffffff;
}
.wine .complementary, .wine.complementary {
  background-color: #2f7268;
  color: #ffffff;
}
.wine .font-primary, .wine.font-primary {
  color: #ffffff;
}
.wine .font-secondary, .wine.font-secondary {
  color: #000000;
}

.frost .primary, .frost.primary {
  background-color: #eef0f3;
  color: #000000;
}
.frost .light, .frost.light {
  background-color: #f7f8f9;
  color: #000000;
}
.frost .dark, .frost.dark {
  background-color: #bec0c2;
  color: #000000;
}
.frost .complementary, .frost.complementary {
  background-color: #f3f1ee;
  color: #000000;
}
.frost .font-primary, .frost.font-primary {
  color: #000000;
}
.frost .font-secondary, .frost.font-secondary {
  color: #000000;
}

.berry .primary, .berry.primary {
  background-color: #8a2be2;
  color: #ffffff;
}
.berry .light, .berry.light {
  background-color: #c595f0;
  color: #000000;
}
.berry .dark, .berry.dark {
  background-color: #6e22b5;
  color: #ffffff;
}
.berry .complementary, .berry.complementary {
  background-color: #83e22b;
  color: #000000;
}
.berry .font-primary, .berry.font-primary {
  color: #ffffff;
}
.berry .font-secondary, .berry.font-secondary {
  color: #000000;
}

.graphite .primary, .graphite.primary {
  background-color: #383838;
  color: #ffffff;
}
.graphite .light, .graphite.light {
  background-color: #9c9c9c;
  color: #000000;
}
.graphite .dark, .graphite.dark {
  background-color: #2d2d2d;
  color: #ffffff;
}
.graphite .complementary, .graphite.complementary {
  background-color: #383838;
  color: #ffffff;
}
.graphite .font-primary, .graphite.font-primary {
  color: #ffffff;
}
.graphite .font-secondary, .graphite.font-secondary {
  color: #000000;
}

.ice .primary, .ice.primary {
  background-color: #f0f8ff;
  color: #000000;
}
.ice .light, .ice.light {
  background-color: #f7fbff;
  color: #000000;
}
.ice .dark, .ice.dark {
  background-color: #c0c6cc;
  color: #000000;
}
.ice .complementary, .ice.complementary {
  background-color: #fff0f8;
  color: #000000;
}
.ice .font-primary, .ice.font-primary {
  color: #000000;
}
.ice .font-secondary, .ice.font-secondary {
  color: #000000;
}

.clay .primary, .clay.primary {
  background-color: #a7745b;
  color: #ffffff;
}
.clay .light, .clay.light {
  background-color: #d3baad;
  color: #000000;
}
.clay .dark, .clay.dark {
  background-color: #865d49;
  color: #ffffff;
}
.clay .complementary, .clay.complementary {
  background-color: #5b8fa7;
  color: #ffffff;
}
.clay .font-primary, .clay.font-primary {
  color: #ffffff;
}
.clay .font-secondary, .clay.font-secondary {
  color: #000000;
}

.copper .primary, .copper.primary {
  background-color: #b87333;
  color: #ffffff;
}
.copper .light, .copper.light {
  background-color: #dcb999;
  color: #000000;
}
.copper .dark, .copper.dark {
  background-color: #935c29;
  color: #ffffff;
}
.copper .complementary, .copper.complementary {
  background-color: #3378b8;
  color: #ffffff;
}
.copper .font-primary, .copper.font-primary {
  color: #ffffff;
}
.copper .font-secondary, .copper.font-secondary {
  color: #000000;
}

:root {
  --primary: #007bff;
  --primary-light: #07B6E3;
  --primary-dark: #0056b3;
  --success: #08c93c;
  --success-light: #7cecd9;
  --success-dark: #4CAF50;
  --warning: #fcbd01;
  --warning-light: #ffd04d;
  --warning-dark: #d9a000;
  --danger: #ff5263;
  --danger-light: #ff8c98;
  --danger-dark: #e03e4e;
  --info: #5d9df6;
  --info-light: #8fc1ff;
  --info-dark: #4a7ccc;
  --blue: #007bff;
  --red: #ff5263;
  --yellow: #fffa00;
  --orange: #fcbd01;
  --green: #08c93c;
  --violett: #b500fd;
  --transition-theme: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

:root {
  --bg-main: #f9f8f8;
  --bg-card: #ffffff;
  --bg-header: #ffffff;
  --bg-sidebar: #ffffff;
  --bg-input: #ffffff;
  --bg-hover: #f5f5f5;
  --bg-highlight: #d6d6d6;
  --text-primary: #151b26;
  --text-secondary: #6d7c96;
  --text-tertiary: #9ca6b7;
  --text-hint: #b7b9bd;
  --text-disabled: #d6d6d6;
  --border-color: #8a8d91;
  --border-light: #f0f2f5;
  --border-focus: #796eff;
  --shadow-color: rgba(0, 0, 0, 0.08);
  --shadow-color-focused: rgba(121, 110, 255, 0.25);
  --success-bg: rgba(37, 232, 200, 0.12);
  --warning-bg: rgba(252, 189, 1, 0.12);
  --danger-bg: rgba(255, 82, 99, 0.12);
  --info-bg: rgba(93, 157, 246, 0.12);
  --scrollbar-track: #f0f0f0;
  --scrollbar-thumb: #c1c1c1;
}

[data-theme=dark] {
  --bg-main: #1e1f21;
  --bg-card: #2c2c2e;
  --bg-header: #2e2e30;
  --bg-sidebar: #2e2e30;
  --bg-highlight: #2e2e30;
  --bg-input: #f5f6f7;
  --bg-hover: #3a3b3c;
  --bg-th: #3e4144;
  --text-primary: #f5f6f7;
  --text-secondary: #ced2d9;
  --text-tertiary: #9ca6b7;
  --text-hint: #8a8d91;
  --text-disabled: #4e4f50;
  --border-color: #3e4144;
  --border-light: #3e4144;
  --border-focus: #796eff;
  --shadow-color: rgba(0, 0, 0, 0.25);
  --shadow-color-focused: rgba(121, 110, 255, 0.25);
  --success-bg: rgba(37, 232, 200, 0.08);
  --warning-bg: rgba(252, 189, 1, 0.08);
  --danger-bg: rgba(255, 82, 99, 0.08);
  --info-bg: rgba(93, 157, 246, 0.08);
  --scrollbar-track: #3a3b3c;
  --scrollbar-thumb: #606060;
}

html {
  box-sizing: border-box;
  font-size: 100%;
}

*, *::before, *::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Roboto", sans-serif;
  font-size: 13px;
  color: var(--text-primary);
  background-color: var(--bg-main);
  transition: var(--transition-theme);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media (max-width: 767px) {
  body {
    padding-bottom: 60px;
  }
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

a {
  color: var(--primary);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background-color: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background-color: rgb(167.5, 167.5, 167.5);
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-primary);
  margin-bottom: 16px;
}

h1 {
  font-size: 1.75rem;
}
@media (min-width: 768px) {
  h1 {
    font-size: 2rem;
  }
}

h2 {
  font-size: 1.5rem;
}
@media (min-width: 768px) {
  h2 {
    font-size: 1.75rem;
  }
}

h3 {
  font-size: 1.25rem;
}
@media (min-width: 768px) {
  h3 {
    font-size: 1.5rem;
  }
}

h4 {
  font-size: 1.125rem;
}

h5 {
  font-size: 1rem;
}

h6 {
  font-size: 0.875rem;
}

p {
  margin-bottom: 16px;
  font-size: 0.875rem;
}
@media (min-width: 768px) {
  p {
    font-size: 1rem;
  }
}

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

.text-secondary {
  color: var(--text-secondary);
}

.text-tertiary {
  color: var(--text-tertiary);
}

.text-hint {
  color: var(--text-hint);
  font-size: 0.8125rem;
}

.text-success {
  color: var(--success);
}

.text-warning {
  color: var(--warning);
}

.text-danger {
  color: var(--danger);
}

.text-info {
  color: var(--info);
}

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

.text-right {
  text-align: right;
}

.text-bold {
  font-weight: 600;
}

code {
  font-family: monospace;
  background-color: var(--bg-hover);
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 0.9em;
}

.fs16 {
  font-size: 16px;
}

.fs18 {
  font-size: 18px;
}

.fs20 {
  font-size: 20px;
}

.fs22 {
  font-size: 22px;
}

.fs24 {
  font-size: 24px;
}

.fas.fs5px {
  font-size: 5px;
}

.fas.fs6px {
  font-size: 6px;
}

.fas.fs7px {
  font-size: 7px;
}

.fas.fs8px {
  font-size: 8px;
}

.fas.fs9px {
  font-size: 9px;
}

.fas.fs10px {
  font-size: 10px;
}

.fas.fs11px {
  font-size: 11px;
}

.fas.fs12px {
  font-size: 12px;
}

.fas.green {
  background-color: transparent;
  color: var(--success-dark);
}

.fas.red {
  background-color: transparent;
  color: var(--danger-dark);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes slideInUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.animate-fade-in {
  animation: fadeIn 0.3s ease forwards;
}

.animate-slide-up {
  animation: slideInUp 0.4s ease forwards;
}

.animate-pulse {
  animation: pulse 1.5s infinite ease-in-out;
}

.animate-spin {
  animation: spin 1s linear infinite;
}

.container {
  width: 100%;
  padding-left: 16px;
  padding-right: 16px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

.container-fluid {
  width: 100%;
  padding-left: 16px;
  padding-right: 16px;
  margin-left: auto;
  margin-right: auto;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -8px;
  margin-right: -8px;
}

.col-1 {
  flex: 0 0 8.3333333333%;
  max-width: 8.3333333333%;
  padding-left: 8px;
  padding-right: 8px;
}

.col-2 {
  flex: 0 0 16.6666666667%;
  max-width: 16.6666666667%;
  padding-left: 8px;
  padding-right: 8px;
}

.col-3 {
  flex: 0 0 25%;
  max-width: 25%;
  padding-left: 8px;
  padding-right: 8px;
}

.col-4 {
  flex: 0 0 33.3333333333%;
  max-width: 33.3333333333%;
  padding-left: 8px;
  padding-right: 8px;
}

.col-5 {
  flex: 0 0 41.6666666667%;
  max-width: 41.6666666667%;
  padding-left: 8px;
  padding-right: 8px;
}

.col-6 {
  flex: 0 0 50%;
  max-width: 50%;
  padding-left: 8px;
  padding-right: 8px;
}

.col-7 {
  flex: 0 0 58.3333333333%;
  max-width: 58.3333333333%;
  padding-left: 8px;
  padding-right: 8px;
}

.col-8 {
  flex: 0 0 66.6666666667%;
  max-width: 66.6666666667%;
  padding-left: 8px;
  padding-right: 8px;
}

.col-9 {
  flex: 0 0 75%;
  max-width: 75%;
  padding-left: 8px;
  padding-right: 8px;
}

.col-10 {
  flex: 0 0 83.3333333333%;
  max-width: 83.3333333333%;
  padding-left: 8px;
  padding-right: 8px;
}

.col-11 {
  flex: 0 0 91.6666666667%;
  max-width: 91.6666666667%;
  padding-left: 8px;
  padding-right: 8px;
}

.col-12 {
  flex: 0 0 100%;
  max-width: 100%;
  padding-left: 8px;
  padding-right: 8px;
}

@media (min-width: 576px) {
  .col-sm-1 {
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .col-sm-2 {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .col-sm-3 {
    flex: 0 0 25%;
    max-width: 25%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .col-sm-4 {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .col-sm-5 {
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .col-sm-6 {
    flex: 0 0 50%;
    max-width: 50%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .col-sm-7 {
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .col-sm-8 {
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .col-sm-9 {
    flex: 0 0 75%;
    max-width: 75%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .col-sm-10 {
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .col-sm-11 {
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .col-sm-12 {
    flex: 0 0 100%;
    max-width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }
}
@media (min-width: 768px) {
  .col-md-1 {
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .col-md-2 {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .col-md-3 {
    flex: 0 0 25%;
    max-width: 25%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .col-md-4 {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .col-md-5 {
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .col-md-7 {
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .col-md-8 {
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .col-md-9 {
    flex: 0 0 75%;
    max-width: 75%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .col-md-10 {
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .col-md-11 {
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .col-md-12 {
    flex: 0 0 100%;
    max-width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }
}
@media (min-width: 992px) {
  .col-lg-1 {
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .col-lg-2 {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .col-lg-3 {
    flex: 0 0 25%;
    max-width: 25%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .col-lg-4 {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .col-lg-5 {
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .col-lg-6 {
    flex: 0 0 50%;
    max-width: 50%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .col-lg-7 {
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .col-lg-8 {
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .col-lg-9 {
    flex: 0 0 75%;
    max-width: 75%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .col-lg-10 {
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .col-lg-11 {
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .col-lg-12 {
    flex: 0 0 100%;
    max-width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }
}
@media (min-width: 1200px) {
  .col-xl-1 {
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .col-xl-2 {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .col-xl-3 {
    flex: 0 0 25%;
    max-width: 25%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .col-xl-4 {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .col-xl-5 {
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .col-xl-6 {
    flex: 0 0 50%;
    max-width: 50%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .col-xl-7 {
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .col-xl-8 {
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .col-xl-9 {
    flex: 0 0 75%;
    max-width: 75%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .col-xl-10 {
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .col-xl-11 {
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .col-xl-12 {
    flex: 0 0 100%;
    max-width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }
}
.d-flex {
  display: flex !important;
}

.flex-row {
  flex-direction: row !important;
}

.flex-column {
  flex-direction: column !important;
}

.flex-grow-1 {
  flex-grow: 1 !important;
}

.justify-content-start {
  justify-content: flex-start !important;
}

.justify-content-end {
  justify-content: flex-end !important;
}

.justify-content-center {
  justify-content: center !important;
}

.justify-content-between {
  justify-content: space-between !important;
}

.align-items-start {
  align-items: flex-start !important;
}

.align-items-end {
  align-items: flex-end !important;
}

.align-items-center {
  align-items: center !important;
}

.flex-wrap {
  flex-wrap: wrap !important;
}

.main-header {
  height: 54px;
  width: 100%;
  background-color: var(--bg-header);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  padding: 0 16px;
  position: fixed;
  top: 0;
  z-index: 100;
  transition: var(--transition-theme);
}

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.app-header .mobile-sidebar-toggle {
  display: none;
}
.app-header .app-logo {
  font-size: 20px;
  font-weight: 700;
  color: var(--primary);
  padding-right: 24px;
  display: flex;
  align-items: center;
}
.app-header .header-search {
  flex: 1;
  max-width: 400px;
}
.app-header .header-search .search-input {
  width: 100%;
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background-color: var(--bg-input);
  color: var(--text-primary);
}
.app-header .header-search .search-input::placeholder {
  color: var(--text-tertiary);
}
.app-header .header-search .search-input:focus {
  border-color: var(--border-focus);
  outline: none;
  box-shadow: 0 0 0 2px var(--shadow-color-focused);
}
.app-header .header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}
.app-header .header-actions .theme-switcher {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 18px;
  padding: 8px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}
.app-header .header-actions .theme-switcher:hover {
  background-color: var(--bg-hover);
}
.app-header .header-actions .theme-switcher .dark-icon, .app-header .header-actions .theme-switcher .light-icon {
  transition: opacity 0.3s ease;
}
.app-header .header-actions .dark-icon {
  display: none;
}
.app-header .header-actions .light-icon {
  display: inline-block;
}
[data-theme=dark] .app-header .header-actions .dark-icon {
  display: inline-block;
}
[data-theme=dark] .app-header .header-actions .light-icon {
  display: none;
}
.app-header .header-actions .notification-icon {
  position: relative;
  font-size: 18px;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.app-header .header-actions .notification-icon:hover {
  background-color: var(--bg-hover);
}
.app-header .header-actions .notification-icon .notification-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  background-color: var(--danger);
  color: white;
  font-size: 11px;
  font-weight: 600;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}
.app-header .header-actions .user-menu {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.app-header .header-actions .user-menu:hover {
  background-color: var(--bg-hover);
}
.app-header .header-actions .user-menu .user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--primary);
  color: white;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
}
.app-header .header-actions .user-menu .user-name {
  font-weight: 500;
  color: var(--text-primary);
}

@media (max-width: 767px) {
  .app-header .header-search {
    display: none;
  }
  .app-header .mobile-sidebar-toggle {
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 18px;
    cursor: pointer;
    padding: 8px;
    margin-right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.left-sidebar {
  width: 240px;
  background-color: var(--bg-sidebar);
  border-right: 1px solid var(--border-color);
  height: calc(100vh - 54px);
  position: fixed;
  top: 54px;
  left: 0;
  z-index: 90;
  overflow-y: auto;
  transition: var(--transition-theme), transform 0.3s ease;
}
.left-sidebar .sidebar-logo {
  padding: 16px;
  text-align: center;
  margin-bottom: 8px;
}
.left-sidebar .sidebar-logo img {
  max-height: 40px;
  margin: 0 auto;
}
.left-sidebar .nav-menu {
  list-style: none;
  padding: 8px 8px 16px 8px;
  width: 100%;
  margin: 16px 0 16px 0;
  border-bottom: 1px solid var(--border-color);
}
.left-sidebar .nav-menu .nav-item {
  position: relative;
  margin: 0 4px 0 4px;
  padding: 16px 16px 16px 16px;
  width: 100%;
  font-size: 14px;
  text-align: left;
  background-color: var(--bg-sidebar);
  color: var(--text-primary);
  border-radius: 6px;
  border: none;
  cursor: pointer;
}
.left-sidebar .nav-menu .nav-item .nav-icon {
  margin-right: 8px;
  display: inline-table;
}
.left-sidebar .nav-menu .nav-item .nav-txt {
  display: inline-table;
}
.left-sidebar .nav-menu .nav-item:hover {
  color: var(--text-primary);
  background-color: var(--bg-hover);
  text-decoration: none;
}
.left-sidebar .nav-menu .nav-item.collapsible .nav-collapse-indicator {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.3s ease;
  width: 24px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 2;
}
.left-sidebar .nav-menu .nav-item.collapsible .nav-collapse-indicator i {
  font-size: 12px;
  opacity: 0.8;
}
.left-sidebar .nav-menu .nav-item.collapsible .nav-collapse-indicator:hover {
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}
.left-sidebar .nav-menu .nav-item.collapsible.active .nav-collapse-indicator {
  transform: translateY(-50%) rotate(180deg);
}
.left-sidebar .nav-menu .nav-children {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  margin-left: 24px;
}
.left-sidebar .nav-menu .nav-children.active {
  margin-bottom: 8px;
}
.left-sidebar .nav-menu .nav-children .nav-subitem {
  padding: 8px 16px;
  margin: 4px 0;
  font-size: 13px;
  border-radius: 6px;
  cursor: pointer;
}
.left-sidebar .nav-menu .nav-children .nav-subitem .nav-icon {
  margin-right: 8px;
  display: inline-table;
}
.left-sidebar .nav-menu .nav-children .nav-subitem .nav-txt {
  display: inline-table;
}
.left-sidebar .nav-menu .nav-children .nav-subitem:hover {
  background-color: var(--bg-hover);
}
.left-sidebar .nav-menu .nav-divider {
  height: 1px;
  background-color: var(--border-color);
  margin: 16px 16px;
}
.left-sidebar .nav-menu .nav-group-title {
  padding: 4px 16px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-tertiary);
  font-weight: 600;
  margin-top: 8px;
}
.left-sidebar .sidebar-footer {
  border-top: 1px solid var(--border-color);
  padding: 8px 0;
  margin-top: auto;
  position: sticky;
  bottom: 0;
  background-color: var(--bg-sidebar);
}
.left-sidebar .sidebar-footer .sidebar-footer-link {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  color: var(--text-secondary);
}
.left-sidebar .sidebar-footer .sidebar-footer-link:hover {
  color: var(--text-primary);
  background-color: var(--bg-hover);
  text-decoration: none;
}
.left-sidebar .sidebar-footer .sidebar-footer-link .sidebar-footer-icon {
  margin-right: 8px;
}

.content-wrapper {
  margin-left: 240px;
  transition: margin-left 0.3s ease;
}

@media (max-width: 767px) {
  .left-sidebar {
    transform: translateX(-100%);
    box-shadow: 3px 0 10px var(--shadow-color);
  }
  .left-sidebar .sidebar-close {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    cursor: pointer;
    position: absolute;
    top: 8px;
    right: 8px;
    background-color: var(--bg-sidebar);
    border: none;
    width: 32px;
    height: 32px;
    z-index: 10;
    color: var(--text-secondary);
  }
  .left-sidebar .sidebar-close:hover {
    color: var(--text-primary);
  }
  .content-wrapper {
    margin-left: 0;
  }
  body.sidebar-open .left-sidebar {
    transform: translateX(0);
  }
  body.sidebar-open::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 85;
  }
}
@media (min-width: 768px) {
  .left-sidebar .sidebar-close {
    display: none;
  }
}
.context-sidebar {
  position: fixed;
  top: 54px;
  right: -800px;
  width: 800px;
  height: calc(100vh - 54px);
  background: var(--bg-main);
  border-left: 1px solid var(--border-color);
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
  transition: right 0.3s ease-in-out;
  overflow-y: auto;
  z-index: 90;
}

body.sidebar-active .context-sidebar {
  right: 0;
}

body.sidebar-active::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 85;
  pointer-events: none;
}

.sidebar-header {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  width: 100%;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
  background-color: var(--bg-main);
  z-index: 95;
}
.sidebar-header h2 {
  margin: 0;
  font-size: 1.2rem;
}
.sidebar-header .sidebar-close {
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
}
.sidebar-header .sidebar-close:hover {
  background: var(--bg-hover);
}

.sidebar-loader {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  font-size: 1.5rem;
  color: var(--primary-color);
}

@media (max-width: 767px) {
  .context-sidebar {
    width: 100%;
    right: -100%;
  }
}
/* Club Switcher Styles */
.club-switcher {
  position: relative;
  margin: 0 15px;
  cursor: pointer;
}

.current-club {
  display: flex;
  align-items: center;
  padding: 5px 10px;
  background-color: var(--bg-card);
  border-radius: 4px;
  border: 1px solid var(--border-light);
  transition: background-color 0.2s;
}

.current-club:hover {
  background-color: var(--bg-hover);
}

.current-club span {
  margin-right: 8px;
  font-weight: 500;
  color: var(--text-primary);
}

.club-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: var(--bg-card);
  border-radius: 4px;
  border: 1px solid var(--border-light);
  box-shadow: 0 2px 10px var(--shadow-color);
  z-index: 1000;
  margin-top: 5px;
  overflow: hidden;
}

.club-dropdown.show {
  display: block;
}

.club-dropdown a {
  display: block;
  padding: 8px 12px;
  color: var(--text-primary);
  text-decoration: none;
  transition: background-color 0.2s;
}

.club-dropdown a:hover {
  background-color: var(--bg-hover);
}

.club-dropdown a.active {
  background-color: var(--primary-light);
  color: white;
  font-weight: 500;
}

/* Styling für Sidebar Header und Tabs */
.sidebar-close {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 10px;
  cursor: pointer;
}

.sidebar-tabs {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
  padding: 0 8px;
}

.sidebar-tab {
  padding: 10px 16px;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  color: var(--text-color, #555);
  transition: all 0.2s ease;
  border-bottom: 3px solid transparent;
}

.sidebar-tab:hover {
  color: var(--primary-color, #3498db);
}

.sidebar-tab.active {
  color: var(--primary-color, #3498db);
  border-bottom: 3px solid var(--primary-color, #3498db);
}

/* Scrollbar für Tabs */
.sidebar-tabs::-webkit-scrollbar {
  height: 4px;
}

.sidebar-tabs::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-tabs::-webkit-scrollbar-thumb {
  background-color: var(--border-color, #e0e0e0);
  border-radius: 4px;
}

.breadcrumbs-area {
  position: fixed;
  top: 54px;
  left: 0;
  right: 0;
  width: calc(100% - 240px);
  margin-left: 240px;
  padding-left: 16px;
  background-color: var(--bg-main);
  border-bottom: 1px solid var(--border-color);
  height: 50px;
  display: flex;
  align-items: center;
  z-index: 89;
}

@media (max-width: 767px) {
  .breadcrumbs-area {
    width: 100%;
    margin-left: 0;
    padding-left: 8px;
  }
}
@media (max-width: 576px) {
  .breadcrumbs-area {
    padding: 4px 8px;
  }
  .breadcrumb li {
    font-size: 0.8rem;
  }
}
.subnav-area {
  position: fixed;
  top: 104px;
  left: 0;
  right: 0;
  width: calc(100% - 240px);
  margin-left: 240px;
  padding-left: 16px;
  background-color: var(--bg-main);
  border-bottom: 1px solid var(--border-color);
  height: 50px;
  display: flex;
  align-items: center;
  z-index: 89;
  display: flex;
  justify-content: center;
  align-items: center;
}
.subnav-area .subnav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

@media (max-width: 767px) {
  .subnav-area {
    width: 100%;
    margin-left: 0;
    padding-left: 8px;
  }
}
@media (max-width: 576px) {
  .subnav-area {
    padding: 4px 8px;
  }
}
.content {
  margin-top: 154px;
  padding: 16px;
  background-color: var(--bg-main);
  transition: var(--transition-theme);
  min-height: calc(100vh - 54px - 50px - 40px);
}
.content .page-header {
  margin-bottom: 24px;
}
.content .page-header .page-title {
  font-size: 24px;
  margin-bottom: 4px;
}
.content .page-header .page-description {
  color: var(--text-secondary);
  margin-bottom: 16px;
}
.content .page-header .page-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}
@media (min-width: 768px) {
  .content .page-header .page-actions {
    float: right;
    margin-top: -50px;
  }
}
.content .card-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 768px) {
  .content .card-container {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 992px) {
  .content .card-container {
    grid-template-columns: repeat(3, 1fr);
  }
}
.content .card {
  background-color: var(--bg-card);
  border-radius: 6px;
  border: 1px solid var(--border-color);
  overflow: hidden;
  transition: var(--transition-theme), transform 0.2s ease, box-shadow 0.2s ease;
}
.content .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--shadow-color);
}
.content .card .card-header {
  padding: 16px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.content .card .card-header .card-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}
.content .card .card-header .card-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.content .card .card-content {
  padding: 16px;
}
.content .card .card-footer {
  padding: 16px;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

@media (max-width: 767px) {
  .content {
    padding: 8px;
  }
}
.no-data-yet-msg {
  width: 30%;
  padding: 32px;
  border-radius: 10px;
  background-color: var(--background-secondary);
  border: 1px solid var(--border-focus);
}
@media (max-width: 767px) {
  .no-data-yet-msg {
    width: 95%;
  }
}

.data-required-msg {
  width: 90%;
  padding: 32px;
  border-radius: 10px;
  background-color: var(--background-secondary);
  border: 1px solid var(--warning);
}

.main-footer {
  background-color: var(--bg-card);
  border-top: 1px solid var(--border-color);
  padding: 16px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 14px;
  transition: var(--transition-theme);
}
.main-footer .footer-links {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 8px;
}
.main-footer .footer-links a {
  color: var(--text-secondary);
}
.main-footer .footer-links a:hover {
  color: var(--primary);
  text-decoration: none;
}
.main-footer .footer-copyright {
  color: var(--text-tertiary);
}

button.std,
button.button-std,
div.button-std {
  display: inline-block;
  padding: 8px 15px;
  background-color: var(--bg-main);
  color: var(--text-secondary);
  text-align: center;
  border: none;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
button.std:hover,
button.button-std:hover,
div.button-std:hover {
  background-color: var(--bg-hover);
}
button.std .sn,
button.button-std .sn,
div.button-std .sn {
  display: inline-block;
  margin-right: 4px;
  font-size: 14px;
  color: var(--text-tertiary);
}

.w-10-rem {
  width: 10rem;
}

.w-12-rem {
  width: 12rem;
}

button.red,
button.button-red,
div.button-red {
  background-color: var(--danger);
}

button.green,
button.button-green,
div.button-green {
  background-color: var(--success);
  color: #FFFFFF;
}

button.yellow,
button.button-yellow,
div.button-yellow {
  background-color: var(--warning);
  color: #000000;
}

button.orange,
button.button-orange,
div.button-orange {
  background-color: var(--danger-light);
  color: #000000;
}

button.blue,
button.button-blue,
div.button-blue {
  background-color: var(--primary);
  color: #FFFFFF;
}

.showhelp {
  background-color: var(--info);
  color: #FFFFFF;
  margin: 4px;
}

/* Container für die Formularfelder */
.field {
  margin-bottom: 20px;
  width: 100%;
}

/* Label-Styling */
.field label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
  color: var(--text-primary);
}

/* Gemeinsames Styling für Input und Select */
.flatinput {
  height: 38px;
  width: 100%;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 4px;
  background-color: var(--bg-input);
  color: #000000;
  border: none;
  transition: border-color 0.3s ease;
}

.flatinput.w-50 {
  height: 38px;
  width: 100%;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 4px;
  background-color: var(--bg-input);
  color: #000000;
  border: none;
  transition: border-color 0.3s ease;
  /* Add these properties to prevent line breaks */
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px; /* Optional: adds space between elements */
}

label {
  color: var(--text-primary);
  font-weight: 500;
  margin-bottom: 5px;
  margin-left: 3px;
}

/*
.fieldset{
  width:100%;
  //border: 1px solid;
  display: flex;
  gap: 10px;
  .w-80{
    width: 80%;
  }
  .w-50{
    width: 50%;
  }
  .w-20{
    width: 20%;
  }
}
  */
/* Hover-Effekt */
.flatinput:hover {
  border-color: #b0b0b0;
}

/* Fokus-Effekt */
.flatinput:focus {
  outline: none;
  border-color: #666;
}

.input-readonly {
  background-color: var(--primary-light);
  border-left: 3px solid #ccc;
  box-shadow: none;
}

/* Spezifisches Styling für Select-Dropdowns */
select.flatinput {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 40px;
}

select[multiple].flatinput {
  height: auto;
  min-height: 100px;
  padding: 8px;
  background-image: none;
}
select[multiple].flatinput::-webkit-scrollbar {
  width: 8px;
}
select[multiple].flatinput::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}
select[multiple].flatinput::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}
select[multiple].flatinput::-webkit-scrollbar-thumb:hover {
  background: #555;
}
select[multiple].flatinput option {
  padding: 8px;
  margin: 2px 0;
  border-radius: 4px;
}
select[multiple].flatinput option:checked {
  background-color: var(--primary);
  color: white;
}
select[multiple].flatinput option:hover {
  background-color: #f0f0f0;
}

/* Submit Button Styling */
input[type=submit] {
  width: 100%;
  height: 45px;
  background-color: var(--primary);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

input[type=submit]:hover {
  background-color: var(--primary-light);
}

/* Required Field Label Styling */
.field label.required::after {
  content: " *";
  color: #dc3545;
  font-weight: bold;
  margin-left: 3px;
}

/* Optional: Zusätzliche visuelle Hinweise für required Felder */
.flatinput:required {
  border-left: 3px solid #dc3545;
}

/* Validierungs-Styling */
.flatinput:required:valid {
  border-left: 3px solid #28a745;
}

.flatinput:required:invalid {
  border-left: 3px solid #dc3545;
}

/* Checkbox Container */
.checkbox-container {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  cursor: pointer;
}

/* Custom Checkbox Styling */
.checkbox-wrapper {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 10px;
}
.checkbox-wrapper input[type=checkbox] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 20px; /* Changed from 0 to match wrapper height */
  width: 20px; /* Changed from 0 to match wrapper width */
  z-index: 1; /* Ensure it's above other elements for clickability */
}
.checkbox-wrapper .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: white;
  border: 2px solid #e0e0e0;
  border-radius: 4px;
  transition: all 0.3s ease;
}
.checkbox-wrapper .checkmark:after {
  content: "";
  position: absolute;
  display: none;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.checkbox-wrapper input[type=checkbox]:checked ~ .checkmark {
  background-color: var(--primary);
  border-color: var(--primary);
}
.checkbox-wrapper input[type=checkbox]:checked ~ .checkmark:after {
  display: block;
}
.checkbox-wrapper input[type=checkbox]:hover ~ .checkmark {
  border-color: #b0b0b0;
}
.checkbox-wrapper input[type=checkbox]:focus ~ .checkmark {
  border-color: #666;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

/* Checkbox Label */
.checkbox-label {
  color: #333333; /* Changed from white to dark gray for better visibility */
  font-weight: 500;
  user-select: none;
}

/* Checkbox Group */
.checkbox-group .checkbox-title {
  color: #FFFFFF;
  font-weight: 500;
}

.search-input-container {
  position: relative;
  display: inline-block;
  width: 100%;
}

.search-input-container input {
  padding-right: 30px; /* Platz für das Icon */
  width: 100%;
  box-sizing: border-box;
}

.search-input-container .search-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  pointer-events: none;
}

/* Optional: Icon-Farbe ändern beim Hover über das Input-Feld */
.search-input-container:hover .search-icon {
  color: #666;
}

/* Optional: Icon-Farbe ändern wenn das Input-Feld fokussiert ist */
.search-input-container input:focus + .search-icon {
  color: #333;
}

input.flatfilter {
  border-radius: 3px;
  border: none;
  height: 26px;
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-disabled);
  cursor: pointer;
  width: 100%; /* Anpassen der Breite auf 100% der Zelle */
  box-sizing: border-box; /* Sicherstellen, dass Padding und Border in die Breite einbezogen werden */
}

.flatfilter:focus {
  outline: none;
  border-color: #666;
}

textarea.std {
  border: none;
  height: 100px;
  width: 100%;
  padding: 10px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-disabled);
  box-sizing: border-box;
  resize: vertical; /* Vertikale Ausrichtung */
  background-color: white; /* Hintergrundfarbe */
  border-radius: 8px;
}

/* Specific styling for textarea with flatinput class */
textarea.flatinput {
  height: auto; /* Override the fixed height */
  min-height: 100px; /* Ensure minimum height for multiple rows */
  resize: vertical; /* Allow vertical resizing */
}

/* But

ton-Style Checkbox Styling */
.radio-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.radio-title {
  font-weight: 600;
  margin-bottom: 5px;
}

.radio-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.radio-button {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* Verstecke das eigentliche Checkbox-Element */
.radio-button input[type=radio] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Styling für den Button */
.radio-button span {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid #cccccc;
  border-radius: 20px;
  transition: all 0.2s ease;
  background-color: var(--bg-main);
  font-size: 14px;
}

/* Hover-Effekt */
.radio-button:hover span {
  border-color: #999999;
  background-color: #f7f7f7;
}

/* Fokus-Status für Tastatur-Navigation */
.radio-button input[type=radio]:focus + span {
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

/* Checked-Status for regular radio buttons */
.radio-button input[type=radio]:checked + span {
  background-color: #4CAF50; /* Grün wenn ausgewählt */
  color: white;
  border-color: #4CAF50;
}

/* Remove green background from color radio buttons when checked */
.radio-group.color-radio .radio-button input[type=radio]:checked + span {
  background-color: transparent; /* Remove the green background */
  color: inherit; /* Use the color from the color class */
  border-color: inherit; /* Use the border color from the color class */
}

/* Override for color radio buttons - change from light to primary variant when checked */
.radio-group.color-radio .radio-button input[type=radio]:checked + span.indigo.light {
  background-color: #3f51b5; /* Primary color for indigo */
  color: #ffffff;
}

.radio-group.color-radio .radio-button input[type=radio]:checked + span.magenta.light {
  background-color: #e91e63; /* Primary color for magenta */
  color: #ffffff;
}

.radio-group.color-radio .radio-button input[type=radio]:checked + span.cyan.light {
  background-color: #00bcd4; /* Primary color for cyan */
  color: #ffffff;
}

.radio-group.color-radio .radio-button input[type=radio]:checked + span.lime.light {
  background-color: #cddc39; /* Primary color for lime */
  color: #000000;
}

.radio-group.color-radio .radio-button input[type=radio]:checked + span.red.light {
  background-color: #f44336; /* Primary color for red */
  color: #ffffff;
}

.radio-group.color-radio .radio-button input[type=radio]:checked + span.green.light {
  background-color: #4caf50; /* Primary color for green */
  color: #000000;
}

.radio-group.color-radio .radio-button input[type=radio]:checked + span.blue.light {
  background-color: #2196f3; /* Primary color for blue */
  color: #ffffff;
}

.radio-group.color-radio .radio-button input[type=radio]:checked + span.orange.light {
  background-color: #ff9800; /* Primary color for orange */
  color: #000000;
}

.radio-group.color-radio .radio-button input[type=radio]:checked + span.violet.light {
  background-color: #9c27b0; /* Primary color for violet */
  color: #ffffff;
}

.radio-group.color-radio .radio-button input[type=radio]:checked + span.teal.light {
  background-color: #009688; /* Primary color for teal */
  color: #ffffff;
}

.radio-group.color-radio .radio-button input[type=radio]:checked + span.yellow.light {
  background-color: #ffeb3b; /* Primary color for yellow */
  color: #000000;
}

.radio-group.color-radio .radio-button input[type=radio]:checked + span.turquoise.light {
  background-color: #40e0d0; /* Primary color for turquoise */
  color: #000000;
}

.radio-group.color-radio .radio-button input[type=radio]:checked + span.rose.light {
  background-color: #ff80ab; /* Primary color for rose */
  color: #000000;
}

.radio-group.color-radio .radio-button input[type=radio]:checked + span.brown.light {
  background-color: #795548; /* Primary color for brown */
  color: #ffffff;
}

.radio-group.color-radio .radio-button input[type=radio]:checked + span.gold.light {
  background-color: #ffd700; /* Primary color for gold */
  color: #000000;
}

.radio-group.color-radio .radio-button input[type=radio]:checked + span.slate.light {
  background-color: #708090; /* Primary color for slate */
  color: #ffffff;
}

.radio-group.color-radio .radio-button input[type=radio]:checked + span.coral.light {
  background-color: #ff7f50; /* Primary color for coral */
  color: #000000;
}

.radio-group.color-radio .radio-button input[type=radio]:checked + span.emerald.light {
  background-color: #50c878; /* Primary color for emerald */
  color: #000000;
}

.radio-group.color-radio .radio-button input[type=radio]:checked + span.lavender.light {
  background-color: #e6e6fa; /* Primary color for lavender */
  color: #000000;
}

.radio-group.color-radio .radio-button input[type=radio]:checked + span.steel.light {
  background-color: #4682b4; /* Primary color for steel */
  color: #ffffff;
}

.radio-group.color-radio .radio-button input[type=radio]:checked + span.peach.light {
  background-color: #ffcba4; /* Primary color for peach */
  color: #000000;
}

.radio-group.color-radio .radio-button input[type=radio]:checked + span.mint.light {
  background-color: #98fb98; /* Primary color for mint */
  color: #000000;
}

.radio-group.color-radio .radio-button input[type=radio]:checked + span.ruby.light {
  background-color: #e0115f; /* Primary color for ruby */
  color: #ffffff;
}

.radio-group.color-radio .radio-button input[type=radio]:checked + span.sky.light {
  background-color: #87ceeb; /* Primary color for sky */
  color: #000000;
}

.radio-group.color-radio .radio-button input[type=radio]:checked + span.plum.light {
  background-color: #8e4585; /* Primary color for plum */
  color: #ffffff;
}

.radio-group.color-radio .radio-button input[type=radio]:checked + span.fire.light {
  background-color: #ff4500; /* Primary color for fire */
  color: #ffffff;
}

.radio-group.color-radio .radio-button input[type=radio]:checked + span.iceberg.light {
  background-color: #71a6d2; /* Primary color for iceberg */
  color: #000000;
}

.radio-group.color-radio .radio-button input[type=radio]:checked + span.moss.light {
  background-color: #8a9a5b; /* Primary color for moss */
  color: #000000;
}

.radio-group.color-radio .radio-button input[type=radio]:checked + span.denim.light {
  background-color: #1560bd; /* Primary color for denim */
  color: #ffffff;
}

.radio-group.color-radio .radio-button input[type=radio]:checked + span.apricot.light {
  background-color: #fbceb1; /* Primary color for apricot */
  color: #000000;
}

.radio-group.color-radio .radio-button input[type=radio]:checked + span.flamingo.light {
  background-color: #fc8eac; /* Primary color for flamingo */
  color: #000000;
}

.radio-group.color-radio .radio-button input[type=radio]:checked + span.cobalt.light {
  background-color: #0047ab; /* Primary color for cobalt */
  color: #ffffff;
}

.radio-group.color-radio .radio-button input[type=radio]:checked + span.sand.light {
  background-color: #f4a460; /* Primary color for sand */
  color: #000000;
}

.radio-group.color-radio .radio-button input[type=radio]:checked + span.charcoal.light {
  background-color: #36454f; /* Primary color for charcoal */
  color: #ffffff;
}

.radio-group.color-radio .radio-button input[type=radio]:checked + span.lemon.light {
  background-color: #fff44f; /* Primary color for lemon */
  color: #000000;
}

.radio-group.color-radio .radio-button input[type=radio]:checked + span.orchid.light {
  background-color: #da70d6; /* Primary color for orchid */
  color: #000000;
}

.radio-group.color-radio .radio-button input[type=radio]:checked + span.caramel.light {
  background-color: #af6e4d; /* Primary color for caramel */
  color: #ffffff;
}

.radio-group.color-radio .radio-button input[type=radio]:checked + span.pine.light {
  background-color: #01796f; /* Primary color for pine */
  color: #ffffff;
}

.radio-group.color-radio .radio-button input[type=radio]:checked + span.ocean.light {
  background-color: #4f42b5; /* Primary color for ocean */
  color: #ffffff;
}

.radio-group.color-radio .radio-button input[type=radio]:checked + span.blush.light {
  background-color: #de5d83; /* Primary color for blush */
  color: #ffffff;
}

.radio-group.color-radio .radio-button input[type=radio]:checked + span.jade.light {
  background-color: #00a86b; /* Primary color for jade */
  color: #ffffff;
}

.radio-group.color-radio .radio-button input[type=radio]:checked + span.periwinkle.light {
  background-color: #ccccff; /* Primary color for periwinkle */
  color: #000000;
}

.radio-group.color-radio .radio-button input[type=radio]:checked + span.brick.light {
  background-color: #cb4154; /* Primary color for brick */
  color: #ffffff;
}

.radio-group.color-radio .radio-button input[type=radio]:checked + span.wine.light {
  background-color: #722f37; /* Primary color for wine */
  color: #ffffff;
}

.radio-group.color-radio .radio-button input[type=radio]:checked + span.frost.light {
  background-color: #eef0f3; /* Primary color for frost */
  color: #000000;
}

.radio-group.color-radio .radio-button input[type=radio]:checked + span.berry.light {
  background-color: #8a2be2; /* Primary color for berry */
  color: #ffffff;
}

.radio-group.color-radio .radio-button input[type=radio]:checked + span.graphite.light {
  background-color: #383838; /* Primary color for graphite */
  color: #ffffff;
}

.radio-group.color-radio .radio-button input[type=radio]:checked + span.ice.light {
  background-color: #f0f8ff; /* Primary color for ice */
  color: #000000;
}

.radio-group.color-radio .radio-button input[type=radio]:checked + span.clay.light {
  background-color: #a7745b; /* Primary color for clay */
  color: #ffffff;
}

.radio-group.color-radio .radio-button input[type=radio]:checked + span.copper.light {
  background-color: #b87333; /* Primary color for copper */
  color: #ffffff;
}

/* Color Radio Buttons */
.radio-group.color-radio .radio-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.radio-group.color-radio .radio-button span {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  position: relative;
  transition: all 0.3s ease; /* Smooth transition for hover and active states */
}

/* Hover effect for color radio buttons */
.radio-group.color-radio .radio-button:hover span {
  transform: translateY(-2px); /* Slight lift effect on hover */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Add shadow on hover */
}

/* Checked state for color radio buttons */
.radio-group.color-radio .radio-button input[type=radio]:checked + span {
  font-weight: bold;
  transform: translateY(-3px); /* More pronounced lift effect for active state */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Stronger shadow for active state */
}

.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.checkbox-title {
  font-weight: 600;
  margin-bottom: 5px;
}

.checkbox-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.checkbox-button {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* Verstecke das eigentliche Checkbox-Element */
.checkbox-button input[type=checkbox] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Styling für den Button */
.checkbox-button span {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid #cccccc;
  border-radius: 20px;
  transition: all 0.2s ease;
  background-color: var(--bg-main);
  font-size: 14px;
}

/* Hover-Effekt */
.checkbox-button:hover span {
  border-color: #999999;
  background-color: var(--bg-sidebar);
}

/* Fokus-Status für Tastatur-Navigation */
.checkbox-button input[type=checkbox]:focus + span {
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

/* Checked-Status */
.checkbox-button input[type=checkbox]:checked + span {
  background-color: var(--success-dark); /* Grün wenn ausgewählt */
  color: white;
  border-color: var(--success-dark);
}

/*checkall-buttons*/
.checkall-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.checkall-button {
  display: inline-block;
  margin-right: 10px;
  padding: 8px 15px;
  background-color: var(--primary);
  color: white;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.checkall-button:hover {
  background-color: var(--primary-light);
}

.card {
  margin-bottom: 16px;
}
.card.card-flat {
  border: none;
  box-shadow: none;
}
.card.card-flat .card-header {
  background-color: transparent;
  border-bottom: none;
  padding-left: 0;
  padding-right: 0;
}
.card.card-flat .card-content {
  padding-left: 0;
  padding-right: 0;
}
.card.card-flat .card-footer {
  border-top: none;
  padding-left: 0;
  padding-right: 0;
}
.card.card-accent {
  border-top: 3px solid var(--primary);
}
.card.card-success {
  border-color: var(--success);
}
.card.card-success .card-header {
  background-color: rgba(var(--success-rgb), 0.1);
  color: var(--success);
}
.card.card-warning {
  border-color: var(--warning);
}
.card.card-warning .card-header {
  background-color: rgba(var(--warning-rgb), 0.1);
  color: var(--warning);
}
.card.card-danger {
  border-color: var(--danger);
}
.card.card-danger .card-header {
  background-color: rgba(var(--danger-rgb), 0.1);
  color: var(--danger);
}
.card.card-info {
  border-color: var(--info);
}
.card.card-info .card-header {
  background-color: rgba(var(--info-rgb), 0.1);
  color: var(--info);
}

.info-card {
  display: flex;
  align-items: center;
  padding: 16px;
  background-color: var(--bg-card);
  border-radius: 6px;
  border: 1px solid var(--border-color);
  transition: var(--transition-theme);
}
.info-card .info-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: rgba(var(--primary-rgb), 0.1);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-right: 16px;
  flex-shrink: 0;
}
.info-card .info-card-content {
  flex-grow: 1;
}
.info-card .info-card-content .info-card-title {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.info-card .info-card-content .info-card-value {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0;
}
.info-card .info-card-content .info-card-change {
  font-size: 12px;
  margin-top: 4px;
}
.info-card .info-card-content .info-card-change.positive {
  color: var(--success);
}
.info-card .info-card-content .info-card-change.negative {
  color: var(--danger);
}
.info-card.info-primary .info-card-icon {
  background-color: rgba(var(--primary-rgb), 0.1);
  color: var(--primary);
}
.info-card.info-success .info-card-icon {
  background-color: rgba(var(--success-rgb), 0.1);
  color: var(--success);
}
.info-card.info-warning .info-card-icon {
  background-color: rgba(var(--warning-rgb), 0.1);
  color: var(--warning);
}
.info-card.info-danger .info-card-icon {
  background-color: rgba(var(--danger-rgb), 0.1);
  color: var(--danger);
}
.info-card.info-info .info-card-icon {
  background-color: rgba(var(--info-rgb), 0.1);
  color: var(--info);
}

.data-card .data-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.data-card .data-list li {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-color);
}
.data-card .data-list li:last-child {
  border-bottom: none;
}
.data-card .data-list li .data-label {
  color: var(--text-secondary);
  font-weight: 500;
}
.data-card .data-list li .data-value {
  color: var(--text-primary);
  font-weight: 400;
  text-align: right;
}

.project-card {
  position: relative;
  overflow: hidden;
}
.project-card .project-card-status {
  position: absolute;
  top: 0;
  right: 0;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
}
.project-card .project-card-status.status-active {
  background-color: var(--success);
  color: white;
}
.project-card .project-card-status.status-pending {
  background-color: var(--warning);
  color: white;
}
.project-card .project-card-status.status-complete {
  background-color: var(--info);
  color: white;
}
.project-card .project-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.project-card .project-card-header .project-card-title {
  font-weight: 600;
  margin-bottom: 4px;
}
.project-card .project-card-header .project-card-date {
  font-size: 12px;
  color: var(--text-tertiary);
}
.project-card .project-card-progress {
  margin: 8px 0;
}
.project-card .project-card-progress .progress-bar-bg {
  height: 6px;
  background-color: var(--bg-hover);
  border-radius: 3px;
  overflow: hidden;
}
.project-card .project-card-progress .progress-bar-bg .progress-bar-fill {
  height: 100%;
  background-color: var(--primary);
  border-radius: 3px;
  transition: width 0.3s ease;
}
.project-card .project-card-progress .progress-text {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  margin: 16px 0;
}

.card.data-card {
  height: 100%;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  background-color: var(--bg-card);
}
.card.data-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.card.data-card .person-abteilungen {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-color);
}

.content-section {
  margin-bottom: 15px;
}
.content-section h4 {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 16px;
  color: var(--primary-color);
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 4px;
}

#vertraege-cards .card.data-card .ovalbadge {
  margin-left: auto;
}
#vertraege-cards .card.data-card .data-value:contains("€") {
  font-weight: bold;
}

.card.data-card .option-abteilungen {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}
.card.data-card .option-abteilungen .badge-small {
  background-color: var(--light-bg);
  border-radius: 12px;
  padding: 3px 8px;
  font-size: 12px;
  white-space: nowrap;
}
.card.data-card .data-value.price {
  font-weight: bold;
  font-size: 1.1em;
}
.card.data-card .data-section {
  display: block;
  margin-top: 12px;
}
.card.data-card .data-section .data-label {
  display: block;
  margin-bottom: 5px;
}

#zahlungsbedingungen-cards .card.data-card .content-section h4 {
  color: var(--primary-color);
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 4px;
  margin-bottom: 10px;
}
#zahlungsbedingungen-cards .card.data-card .content-section + .content-section {
  margin-top: 15px;
}
#zahlungsbedingungen-cards .card.data-card .snippets-section .badge-count {
  display: inline-block;
  background-color: var(--secondary-color);
  color: white;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.9em;
}
#zahlungsbedingungen-cards .card.data-card .ovalbadge.blue, #zahlungsbedingungen-cards .card.data-card .ovalbadge.orange {
  margin-left: 5px;
}

#roles-cards .card.data-card .card-header-with-color {
  position: relative;
}
#roles-cards .card.data-card .card-header-with-color:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background-color: currentColor;
}
#roles-cards .card.data-card .card-header-with-color h3 {
  margin-top: 8px;
}
#roles-cards .card.data-card .card-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
#roles-cards .card.data-card .card-content .role-scope, #roles-cards .card.data-card .card-content .role-color-sample, #roles-cards .card.data-card .card-content .role-sort {
  display: flex;
  align-items: center;
}
#roles-cards .card.data-card .card-content .role-scope .scope-label, #roles-cards .card.data-card .card-content .role-scope .color-label, #roles-cards .card.data-card .card-content .role-scope .sort-label, #roles-cards .card.data-card .card-content .role-color-sample .scope-label, #roles-cards .card.data-card .card-content .role-color-sample .color-label, #roles-cards .card.data-card .card-content .role-color-sample .sort-label, #roles-cards .card.data-card .card-content .role-sort .scope-label, #roles-cards .card.data-card .card-content .role-sort .color-label, #roles-cards .card.data-card .card-content .role-sort .sort-label {
  font-weight: 500;
  flex: 0 0 120px;
  color: var(--text-color-secondary);
}
#roles-cards .card.data-card .card-content .role-scope .scope-value, #roles-cards .card.data-card .card-content .role-color-sample .scope-value, #roles-cards .card.data-card .card-content .role-sort .scope-value {
  display: flex;
  align-items: center;
  gap: 5px;
}
#roles-cards .card.data-card .card-content .role-scope .scope-value i, #roles-cards .card.data-card .card-content .role-color-sample .scope-value i, #roles-cards .card.data-card .card-content .role-sort .scope-value i {
  color: var(--primary-color);
}
#roles-cards .card.data-card .card-content .role-scope .color-box, #roles-cards .card.data-card .card-content .role-color-sample .color-box, #roles-cards .card.data-card .card-content .role-sort .color-box {
  width: 36px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid var(--border-color);
}
#roles-cards.cards-grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
@media (min-width: 1200px) {
  #roles-cards.cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }
}

#options-cards.cards-grid {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
@media (min-width: 1400px) {
  #options-cards.cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}

@media (max-width: 768px) {
  .cards-grid {
    grid-template-columns: 1fr;
  }
}
.color-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
}
td .color-dot {
  margin: 0 auto;
}

.modern-form {
  font-family: "Roboto", "Segoe UI", sans-serif;
  max-width: 98%;
  margin: 0 auto;
  color: var(--text-primary);
}

.formular-info-container {
  min-height: 1px;
  font-size: 16px;
  font-weight: 600;
  padding: 0 20px;
}

.form-sections-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}

/* Breiteneinstellungen für Sektionen */
.form-section.width-full {
  width: 100%;
}

.form-section.width-half {
  width: calc(50% - 30px);
}

.form-section.width-quarter {
  width: calc(25% - 36px);
}

.form-section.width-third {
  width: calc(33.33% - 34px);
}

/* Umbruch-Element */
.form-break {
  flex-basis: 100%;
  height: 0;
  margin: 0;
  border: 0;
}

.form-section {
  background: var(--bg-main);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  margin: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.form-section.danger {
  border: 1px solid var(--danger);
}
.form-section.success {
  border: 1px solid var(--success);
}
.form-section.warning {
  border: 1px solid var(--warning);
}

.section-header {
  padding: 16px;
  background: var(--bg-main);
  border-bottom: 1px solid var(--border-color);
  height: 64px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.section-title {
  margin: 0;
  font-size: 16px;
  color: var(--text-primary);
  font-weight: 600;
}

.section-description {
  margin: 4px 0 0;
  color: var(--text-secondary);
  font-size: 12px;
}

.section-content {
  padding: 20px;
  width: 100%;
}
.section-content table.form-context {
  margin: 0;
  width: 100%;
  border-collapse: collapse;
}
.section-content table.form-context td.icon {
  border: 1px solid var(--border-color);
  width: 7%;
  vertical-align: top;
  padding: 8px;
}
.section-content table.form-context td.description {
  border: 1px solid var(--border-color);
  width: 33%;
  vertical-align: top;
  padding: 8px;
}
.section-content table.form-context td.content {
  border: 1px solid var(--border-color);
  width: 60%;
  vertical-align: top;
  padding: 4px;
}

.form-element {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.width-full {
  width: 100%;
}

.width-half {
  width: calc(50% - 1px);
  display: inline-block;
  vertical-align: middle;
}

.form-actions {
  padding: 20px;
  text-align: left;
  background: var(--bg-main);
  margin-top: 20px;
  border-radius: 0 0 8px 8px;
}

.btn {
  padding: 10px 20px;
  border-radius: 4px;
  border: none;
  width: 150px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.2s, transform 0.1s;
  margin-left: 10px;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(1px);
}

.btn.primary {
  background: #0d6efd;
  color: white;
}

.btn.primary:hover {
  background: #0b5ed7;
}

.btn.secondary {
  background: #6c757d;
  color: white;
}

.btn.secondary:hover {
  background: #5c636a;
}

/* Layout-Stile */
.layout-grid {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: start;
}

.layout-split {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
}

.split-left, .split-right {
  flex: 1;
  min-width: 300px;
  align-self: flex-start;
}

.standard-layout {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.layout-card {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

/* Verbesserte Input-Stile */
/*
.modern-input, .modern-select {
  display: block;
  width: 100%;
  padding: 10px 12px;
  font-size: 16px;
  border: 1px solid #ced4da;
  border-radius: $border-radius-sm;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.modern-input:focus, .modern-select:focus {
  border-color: #86b7fe;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  outline: none;
}
  */
/* Input-Labels */
/*
.field label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #495057;
}
  */
/* Vertragsoptionen im modernen Design */
@media (max-width: 992px) {
  .form-section.width-third,
  .form-section.width-quarter {
    width: calc(50% - 10px);
  }
}
@media (max-width: 768px) {
  .form-section.width-half,
  .form-section.width-third,
  .form-section.width-quarter {
    width: 100%;
  }
}
.table-container {
  height: 100%;
  overflow: auto;
}

table.default {
  border: 1px solid var(--border-color);
  border-radius: 6px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}
table.default th {
  padding: 10px 15px 10px 10px;
  border: 1px solid var(--border-color);
  border-top: none;
  border-left: none;
  border-right: none;
  background-color: var(--bg-th);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}
table.default th:last-child {
  border-right: none;
}
table.default tr:first-child th:first-child {
  border-top-left-radius: 6px;
}
table.default tr:first-child th:last-child {
  border-top-right-radius: 6px;
}
table.default th.secondary {
  padding: 5px 15px 5px 10px;
}
table.default td {
  padding: 5px 15px 5px 10px;
  border: 1px solid var(--border-color);
  border-left: none;
  border-right: none;
  border-bottom: none;
  vertical-align: text-top;
}
table.default td:last-child {
  border-right: none;
}
table.default tr:last-child td {
  border-bottom: none;
}
table.default tr:last-child td:first-child {
  border-bottom-left-radius: 6px;
}
table.default tr:last-child td:last-child {
  border-bottom-right-radius: 6px;
}
table.default tr.target-sbr {
  cursor: pointer;
}
table.default tr.target-sbr:hover td {
  background-color: var(--bg-hover);
}
table.default tr.condensed-header {
  font-size: 12pt;
  font-weight: bold;
}
table.default tr.condensed-header td {
  padding: 10px 15px 15px 10px;
  border-bottom: none;
  border-top: none;
  color: var(--bg-th);
}
table.default tr.condensed-header-lvl2 {
  font-size: 11pt;
  font-weight: bold;
}
table.default tr.condensed-header-lvl2 td {
  padding: 5px 15px 5px 20px;
  border-bottom: none;
  border-top: none;
  color: var(--text-secondary);
}
table.default tr.condensed-content td {
  padding: 5px 15px 35px 20px;
  border-top: none;
  border-bottom: 1px solid var(--border-color);
}
table.default td.text-right {
  text-align: right;
}
table.default td.text-center {
  text-align: center;
}
table.default td.bold {
  font-weight: bold;
}

table.centered {
  margin-left: auto;
  margin-right: auto;
}

table.w-80 {
  width: 80%;
}

td.right,
th.right {
  text-align: right;
}

td.left,
th.left {
  text-align: left;
}

/* Stil für sortierbare Spaltenköpfe */
th.sortable-header::after {
  content: " ⇅";
  opacity: 0.3;
  margin-left: 5px;
}

th.sort-asc::after {
  content: " ↑";
  opacity: 1;
}

th.sort-desc::after {
  content: " ↓";
  opacity: 1;
}

/* Hervorhebung der aktuell sortierten Spalte */
th.sort-asc, th.sort-desc {
  background-color: var(--bg-hover);
}

/* Spezielle Hintergrundfarben für Tabellen */
tr.table-warning {
  background-color: var(--warning-bg);
}

tr.table-danger {
  background-color: var(--danger-bg);
}

/* Erklärungstexte mit Hintergrundfarben */
.table-explanation {
  margin: 10px 0;
}
.table-explanation .explanation-item {
  display: inline-block;
  padding: 2px 5px;
  margin-right: 10px;
  border-radius: 4px;
}
.table-explanation .explanation-danger {
  background-color: var(--danger-bg);
  color: var(--text-primary);
}
.table-explanation .explanation-warning {
  background-color: var(--warning-bg);
  color: var(--text-primary);
}

.badge {
  display: inline-block;
  padding: 0.25em 0.6em;
  font-size: 75%;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25rem;
  transition: all 0.2s ease-in-out;
}
.badge.badge-pill {
  padding-right: 0.6em;
  padding-left: 0.6em;
  border-radius: 10rem;
}
.badge.badge-sm {
  font-size: 70%;
  padding: 0.2em 0.4em;
}
.badge.badge-lg {
  font-size: 85%;
  padding: 0.3em 0.7em;
}

.badge-primary {
  background-color: var(--primary);
  color: #fff;
}

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

.badge-success {
  background-color: var(--success);
  color: #fff;
}

.badge-danger {
  background-color: var(--danger);
  color: #fff;
}

.badge-warning {
  background-color: var(--warning);
  color: #212529;
}

.badge-info {
  background-color: var(--info);
  color: #fff;
}

.badge-light {
  background-color: var(--light);
  color: #212529;
}

.badge-dark {
  background-color: var(--dark);
  color: #fff;
}

.badge-outline-primary {
  background-color: transparent;
  color: var(--primary);
  border: 1px solid var(--primary);
}

.badge-outline-secondary {
  background-color: transparent;
  color: var(--secondary);
  border: 1px solid var(--secondary);
}

.badge-outline-success {
  background-color: transparent;
  color: var(--success);
  border: 1px solid var(--success);
}

.badge-outline-danger {
  background-color: transparent;
  color: var(--danger);
  border: 1px solid var(--danger);
}

.badge-outline-warning {
  background-color: transparent;
  color: var(--warning);
  border: 1px solid var(--warning);
}

.badge-outline-info {
  background-color: transparent;
  color: var(--info);
  border: 1px solid var(--info);
}

.badge-pastel-primary {
  background-color: rgba(var(--primary-rgb), 0.15);
  color: var(--primary);
}

.badge-pastel-secondary {
  background-color: rgba(var(--secondary-rgb), 0.15);
  color: var(--secondary);
}

.badge-pastel-success {
  background-color: rgba(var(--success-rgb), 0.15);
  color: var(--success);
}

.badge-pastel-danger {
  background-color: rgba(var(--danger-rgb), 0.15);
  color: var(--danger);
}

.badge-pastel-warning {
  background-color: rgba(var(--warning-rgb), 0.15);
  color: var(--warning);
}

.badge-pastel-info {
  background-color: rgba(var(--info-rgb), 0.15);
  color: var(--info);
}

.ovalbadge {
  display: inline-block;
  padding: 0.5em 0.9em;
  margin: 4px;
  font-size: 80%;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 50rem;
  transition: all 0.2s ease-in-out;
}
.ovalbadge.ovalbadge-sm {
  font-size: 70%;
  padding: 0.2em 0.4em;
}
.ovalbadge.ovalbadge-lg {
  font-size: 85%;
  padding: 0.3em 0.7em;
}
.ovalbadge.green {
  background-color: var(--success);
  color: #000;
}
.ovalbadge.yellow {
  background-color: var(--warning);
  color: #000;
}
.ovalbadge.blue {
  background-color: var(--primary);
  color: #fff;
}
.ovalbadge.red {
  background-color: var(--danger-dark);
  color: #fff;
}
.ovalbadge.orange {
  background-color: var(--danger-light);
  color: #000;
}
.ovalbadge.violett {
  background-color: #9900ff;
  color: #ffffff;
}
.ovalbadge.black {
  background-color: #000000;
  color: #ffffff;
}

.status-badge {
  padding: 0.35em 0.65em;
  border-radius: 1rem;
  display: inline-flex;
  align-items: center;
}
.status-badge::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  margin-right: 0.5rem;
}
.status-badge.status-active {
  background-color: rgba(var(--success-rgb), 0.15);
  color: var(--success);
}
.status-badge.status-active::before {
  background-color: var(--success);
}
.status-badge.status-pending {
  background-color: rgba(var(--warning-rgb), 0.15);
  color: var(--warning);
}
.status-badge.status-pending::before {
  background-color: var(--warning);
}
.status-badge.status-inactive {
  background-color: rgba(var(--secondary-rgb), 0.15);
  color: var(--secondary);
}
.status-badge.status-inactive::before {
  background-color: var(--secondary);
}
.status-badge.status-error {
  background-color: rgba(var(--danger-rgb), 0.15);
  color: var(--danger);
}
.status-badge.status-error::before {
  background-color: var(--danger);
}

.notification-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  padding: 0.25em 0.6em;
  font-size: 75%;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 50%;
  background-color: var(--danger);
  color: white;
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.notification-badge.notification-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  min-width: unset;
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.3em 0.65em;
  margin: 0.2rem;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1;
  color: var(--text-primary);
  background-color: var(--bg-hover);
  border-radius: 0.25rem;
  transition: all 0.2s ease-in-out;
}
.tag:hover {
  background-color: var(--bg-active);
}
.tag .tag-remove {
  margin-left: 0.5rem;
  opacity: 0.6;
  cursor: pointer;
}
.tag .tag-remove:hover {
  opacity: 1;
}

.badge-stack {
  position: relative;
  display: inline-block;
}
.badge-stack .badge {
  position: absolute;
  font-size: 0.75em;
}
.badge-stack .badge.badge-top-right {
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
}
.badge-stack .badge.badge-top-left {
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
}
.badge-stack .badge.badge-bottom-right {
  bottom: 0;
  right: 0;
  transform: translate(50%, 50%);
}
.badge-stack .badge.badge-bottom-left {
  bottom: 0;
  left: 0;
  transform: translate(-50%, 50%);
}

.badge-new {
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--danger-rgb), 0.7);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(var(--danger-rgb), 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(var(--danger-rgb), 0);
  }
}

.tabs-container {
  margin-bottom: 16px;
}

.nav-tabs {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
  border-bottom: 1px solid var(--border-color);
}
.nav-tabs .nav-item {
  margin-bottom: -1px;
}
.nav-tabs .nav-item:not(:last-child) {
  margin-right: 4px;
}
.nav-tabs .nav-link {
  display: block;
  padding: 0.75rem 1.25rem;
  font-weight: 500;
  color: var(--text-secondary);
  background-color: transparent;
  border: 1px solid transparent;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
  color: var(--text-primary);
  background-color: var(--bg-hover);
  border-color: var(--border-color) var(--border-color) transparent;
  text-decoration: none;
}
.nav-tabs .nav-link.active {
  color: var(--primary);
  background-color: var(--bg-card);
  border-color: var(--border-color) var(--border-color) var(--bg-card);
}
.nav-tabs .nav-link.active:after {
  content: "";
  display: block;
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--primary);
}
.nav-tabs .nav-link.disabled {
  color: var(--text-tertiary);
  background-color: transparent;
  border-color: transparent;
  cursor: default;
  pointer-events: none;
}
.nav-tabs .nav-link .badge {
  margin-left: 5px;
}
.nav-tabs.tabs-icon .nav-link {
  display: flex;
  align-items: center;
}
.nav-tabs.tabs-icon .nav-link i, .nav-tabs.tabs-icon .nav-link .icon {
  margin-right: 0.5rem;
  font-size: 1.1em;
}
.nav-tabs.tabs-icon .nav-link.icon-top {
  flex-direction: column;
}
.nav-tabs.tabs-icon .nav-link.icon-top i, .nav-tabs.tabs-icon .nav-link.icon-top .icon {
  margin-right: 0;
  margin-bottom: 0.25rem;
  font-size: 1.2em;
}
.nav-tabs.tabs-sm .nav-link {
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
}
.nav-tabs.tabs-lg .nav-link {
  padding: 1rem 1.5rem;
  font-size: 1.1rem;
}
.nav-tabs.tabs-underline {
  border-bottom: none;
}
.nav-tabs.tabs-underline .nav-link {
  border: none;
  border-radius: 0;
  padding: 0.75rem 1rem;
  position: relative;
}
.nav-tabs.tabs-underline .nav-link:after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: transparent;
  transition: all 0.2s ease-in-out;
}
.nav-tabs.tabs-underline .nav-link:hover:after {
  background-color: var(--border-color);
}
.nav-tabs.tabs-underline .nav-link.active {
  background-color: transparent;
  font-weight: 600;
}
.nav-tabs.tabs-underline .nav-link.active:after {
  background-color: var(--primary);
  height: 3px;
}
.nav-tabs.tabs-pills {
  border-bottom: none;
}
.nav-tabs.tabs-pills .nav-link {
  border-radius: 6px;
  margin-right: 4px;
  border: none;
}
.nav-tabs.tabs-pills .nav-link:hover, .nav-tabs.tabs-pills .nav-link:focus {
  background-color: var(--bg-hover);
}
.nav-tabs.tabs-pills .nav-link.active {
  color: #fff;
  background-color: var(--primary);
}
.nav-tabs.tabs-vertical {
  flex-direction: column;
  border-bottom: none;
  border-right: 1px solid var(--border-color);
}
.nav-tabs.tabs-vertical .nav-item {
  margin-bottom: 0;
  margin-right: -1px;
}
.nav-tabs.tabs-vertical .nav-item:not(:last-child) {
  margin-right: 0;
  margin-bottom: 4px;
}
.nav-tabs.tabs-vertical .nav-link {
  border-radius: 4px 0 0 4px;
}
.nav-tabs.tabs-vertical .nav-link:hover, .nav-tabs.tabs-vertical .nav-link:focus {
  border-color: var(--border-color) transparent var(--border-color) var(--border-color);
}
.nav-tabs.tabs-vertical .nav-link.active {
  border-color: var(--border-color) transparent var(--border-color) var(--border-color);
}
.nav-tabs.tabs-justified .nav-item {
  flex-basis: 0;
  flex-grow: 1;
  text-align: center;
}

.tab-content {
  padding: 16px;
  background-color: var(--bg-card);
  border-radius: 0 0 6px 6px;
  border: 1px solid var(--border-color);
  border-top: none;
}
.tab-content.border-top {
  border-top: 1px solid var(--border-color);
  border-radius: 6px;
}
.tab-content.tab-content-vertical {
  border-top: 1px solid var(--border-color);
  border-left: none;
  border-radius: 0 6px 6px 0;
}
.tab-content .tab-pane {
  display: none;
}
.tab-content .tab-pane.active {
  display: block;
}
.tab-content .tab-pane.fade {
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}
.tab-content .tab-pane.fade.show {
  opacity: 1;
}

.vertical-tabs-container {
  display: flex;
}
.vertical-tabs-container .nav-tabs.tabs-vertical {
  min-width: 200px;
  width: 25%;
}
.vertical-tabs-container .tab-content {
  flex: 1;
}

@media (max-width: 767.98px) {
  .nav-tabs .nav-link {
    padding: 0.75rem 1rem;
  }
  .nav-tabs.tabs-collapse-sm {
    position: relative;
    display: block;
  }
  .nav-tabs.tabs-collapse-sm .nav-item {
    margin-bottom: 0.5rem;
  }
  .nav-tabs.tabs-collapse-sm .nav-item:not(:last-child) {
    margin-right: 0;
  }
  .nav-tabs.tabs-collapse-sm .nav-link {
    border-radius: 4px;
    border: 1px solid var(--border-color);
  }
  .nav-tabs.tabs-collapse-sm .nav-link.active {
    border-color: var(--primary);
  }
  .vertical-tabs-container {
    flex-direction: column;
  }
  .vertical-tabs-container .nav-tabs.tabs-vertical {
    min-width: unset;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 1rem;
  }
  .vertical-tabs-container .nav-tabs.tabs-vertical .nav-item:not(:last-child) {
    margin-bottom: 0;
    margin-right: 4px;
  }
  .vertical-tabs-container .nav-tabs.tabs-vertical .nav-link {
    border-radius: 4px 4px 0 0;
  }
  .vertical-tabs-container .nav-tabs.tabs-vertical .nav-link:hover, .vertical-tabs-container .nav-tabs.tabs-vertical .nav-link:focus, .vertical-tabs-container .nav-tabs.tabs-vertical .nav-link.active {
    border-color: var(--border-color) var(--border-color) transparent;
  }
  .vertical-tabs-container .tab-content.tab-content-vertical {
    border-radius: 6px;
    border-top: 1px solid var(--border-color);
    border-left: 1px solid var(--border-color);
  }
}
.tabs-accordion {
  margin-bottom: 16px;
}
.tabs-accordion .accordion-item {
  margin-bottom: 0.5rem;
  border: 1px solid var(--border-color);
  border-radius: 4px;
}
.tabs-accordion .accordion-item .accordion-header {
  margin: 0;
}
.tabs-accordion .accordion-item .accordion-header .accordion-button {
  width: 100%;
  text-align: left;
  position: relative;
  display: flex;
  align-items: center;
  padding: 1rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-primary);
  background-color: var(--bg-card);
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.tabs-accordion .accordion-item .accordion-header .accordion-button:after {
  content: "+";
  margin-left: auto;
  transition: transform 0.2s ease-in-out;
}
.tabs-accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) {
  color: var(--primary);
}
.tabs-accordion .accordion-item .accordion-header .accordion-button:not(.collapsed):after {
  content: "-";
}
.tabs-accordion .accordion-item .accordion-collapse {
  border-top: 1px solid var(--border-color);
}
.tabs-accordion .accordion-item .accordion-collapse .accordion-body {
  padding: 1rem;
}

/* Tab content styling */
.tab {
  display: none; /* Hide all tabs by default */
}

/* Only show active tab */
.tab.active {
  display: block;
}

/* Automatisch generierte RAL-Farbklassen */
.ral_1026 {
  background-color: #ffff00;
  color: #000;
}

.ral_1016 {
  background-color: #f1dd38;
  color: #000;
}

.ral_1018 {
  background-color: #faca30;
  color: #000;
}

.ral_1012 {
  background-color: #ddaf27;
  color: #000;
}

.ral_1021 {
  background-color: #f6b600;
  color: #000;
}

.ral_1023 {
  background-color: #f7b500;
  color: #000;
}

.ral_1003 {
  background-color: #f9a800;
  color: #000;
}

.ral_1033 {
  background-color: #f99a1c;
  color: #000;
}

.ral_1028 {
  background-color: #ff9b00;
  color: #000;
}

.ral_1037 {
  background-color: #f09200;
  color: #000;
}

.ral_1006 {
  background-color: #e29000;
  color: #000;
}

.ral_1007 {
  background-color: #e88c00;
  color: #000;
}

.ral_1032 {
  background-color: #e2a300;
  color: #000;
}

.ral_1004 {
  background-color: #e49e22;
  color: #000;
}

.ral_1005 {
  background-color: #cb8e1e;
  color: #000;
}

.ral_1027 {
  background-color: #a77f0e;
  color: #fff;
}

.ral_1017 {
  background-color: #f6a950;
  color: #000;
}

.ral_1015 {
  background-color: #e6d2b5;
  color: #000;
}

.ral_1014 {
  background-color: #ddc49a;
  color: #000;
}

.ral_1000 {
  background-color: #cdba88;
  color: #000;
}

.ral_1002 {
  background-color: #d2aa6d;
  color: #000;
}

.ral_1001 {
  background-color: #d0b084;
  color: #000;
}

.ral_1019 {
  background-color: #a48f7a;
  color: #000;
}

.ral_1035 {
  background-color: #908370;
  color: #000;
}

.ral_1020 {
  background-color: #a08f65;
  color: #000;
}

.ral_1024 {
  background-color: #ba8f4c;
  color: #000;
}

.ral_1034 {
  background-color: #eb9c52;
  color: #000;
}

.ral_1011 {
  background-color: #af804f;
  color: #000;
}

.ral_1036 {
  background-color: #80643f;
  color: #fff;
}

.ral_2007 {
  background-color: #ffb200;
  color: #000;
}

.ral_2005 {
  background-color: #ff4d06;
  color: #fff;
}

.ral_2000 {
  background-color: #da6e00;
  color: #000;
}

.ral_2011 {
  background-color: #e26e0e;
  color: #000;
}

.ral_2008 {
  background-color: #ed6b21;
  color: #000;
}

.ral_2003 {
  background-color: #f67728;
  color: #000;
}

.ral_2004 {
  background-color: #e25303;
  color: #fff;
}

.ral_2009 {
  background-color: #de5307;
  color: #fff;
}

.ral_2010 {
  background-color: #d05d28;
  color: #fff;
}

.ral_2012 {
  background-color: #d5654d;
  color: #000;
}

.ral_2002 {
  background-color: #bf3922;
  color: #fff;
}

.ral_2001 {
  background-color: #ba481b;
  color: #fff;
}

.ral_2013 {
  background-color: #923e25;
  color: #fff;
}

.ral_3026 {
  background-color: #ff2a1b;
  color: #fff;
}

.ral_3024 {
  background-color: #ff2d21;
  color: #fff;
}

.ral_3028 {
  background-color: #cc2c24;
  color: #fff;
}

.ral_3020 {
  background-color: #bb1e10;
  color: #fff;
}

.ral_3000 {
  background-color: #a72920;
  color: #fff;
}

.ral_3027 {
  background-color: #ab273c;
  color: #fff;
}

.ral_3018 {
  background-color: #c73f4a;
  color: #fff;
}

.ral_3017 {
  background-color: #cb555d;
  color: #fff;
}

.ral_3014 {
  background-color: #cb7375;
  color: #000;
}

.ral_3015 {
  background-color: #d8a0a6;
  color: #000;
}

.ral_3012 {
  background-color: #c6846d;
  color: #000;
}

.ral_3022 {
  background-color: #cf6955;
  color: #000;
}

.ral_3016 {
  background-color: #a63d2f;
  color: #fff;
}

.ral_3033 {
  background-color: #a53a2d;
  color: #fff;
}

.ral_3031 {
  background-color: #a63437;
  color: #fff;
}

.ral_3013 {
  background-color: #972e25;
  color: #fff;
}

.ral_3001 {
  background-color: #9b2423;
  color: #fff;
}

.ral_3003 {
  background-color: #861a22;
  color: #fff;
}

.ral_3002 {
  background-color: #872321;
  color: #fff;
}

.ral_3011 {
  background-color: #792423;
  color: #fff;
}

.ral_3032 {
  background-color: #701d23;
  color: #fff;
}

.ral_3004 {
  background-color: #6b1c23;
  color: #fff;
}

.ral_3005 {
  background-color: #59191f;
  color: #fff;
}

.ral_3009 {
  background-color: #6d342d;
  color: #fff;
}

.ral_3007 {
  background-color: #3e2022;
  color: #fff;
}

.ral_4009 {
  background-color: #9d8692;
  color: #000;
}

.ral_4005 {
  background-color: #76689a;
  color: #fff;
}

.ral_4001 {
  background-color: #816183;
  color: #fff;
}

.ral_4012 {
  background-color: #6b6b7f;
  color: #fff;
}

.ral_4011 {
  background-color: #6e6387;
  color: #fff;
}

.ral_4003 {
  background-color: #c4618c;
  color: #000;
}

.ral_4010 {
  background-color: #bc4077;
  color: #fff;
}

.ral_4008 {
  background-color: #844c82;
  color: #fff;
}

.ral_4006 {
  background-color: #903373;
  color: #fff;
}

.ral_4002 {
  background-color: #8d3c4b;
  color: #fff;
}

.ral_4004 {
  background-color: #651e38;
  color: #fff;
}

.ral_4007 {
  background-color: #47243c;
  color: #fff;
}

.ral_5012 {
  background-color: #0089b6;
  color: #fff;
}

.ral_5015 {
  background-color: #007cb0;
  color: #fff;
}

.ral_5024 {
  background-color: #6093ac;
  color: #000;
}

.ral_5014 {
  background-color: #637d96;
  color: #fff;
}

.ral_5007 {
  background-color: #376b8c;
  color: #fff;
}

.ral_5023 {
  background-color: #42698c;
  color: #fff;
}

.ral_5000 {
  background-color: #314f6f;
  color: #fff;
}

.ral_5009 {
  background-color: #225f78;
  color: #fff;
}

.ral_5017 {
  background-color: #005b8c;
  color: #fff;
}

.ral_5019 {
  background-color: #005e83;
  color: #fff;
}

.ral_5005 {
  background-color: #005387;
  color: #fff;
}

.ral_5010 {
  background-color: #004f7c;
  color: #fff;
}

.ral_5001 {
  background-color: #0f4c64;
  color: #fff;
}

.ral_5025 {
  background-color: #21697c;
  color: #fff;
}

.ral_5021 {
  background-color: #007577;
  color: #fff;
}

.ral_5018 {
  background-color: #058b8c;
  color: #fff;
}

.ral_5020 {
  background-color: #00414b;
  color: #fff;
}

.ral_5002 {
  background-color: #00387b;
  color: #fff;
}

.ral_5022 {
  background-color: #222d5a;
  color: #fff;
}

.ral_5003 {
  background-color: #1f3855;
  color: #fff;
}

.ral_5026 {
  background-color: #0f3052;
  color: #fff;
}

.ral_5013 {
  background-color: #193153;
  color: #fff;
}

.ral_5008 {
  background-color: #2b3a44;
  color: #fff;
}

.ral_5011 {
  background-color: #1a2b3c;
  color: #fff;
}

.ral_5004 {
  background-color: #191e28;
  color: #fff;
}

.ral_6038 {
  background-color: #00b51a;
  color: #fff;
}

.ral_6037 {
  background-color: #008b29;
  color: #fff;
}

.ral_6024 {
  background-color: #008351;
  color: #fff;
}

.ral_6032 {
  background-color: #237f52;
  color: #fff;
}

.ral_6000 {
  background-color: #3c7460;
  color: #fff;
}

.ral_6029 {
  background-color: #006f3d;
  color: #fff;
}

.ral_6016 {
  background-color: #00694c;
  color: #fff;
}

.ral_6026 {
  background-color: #005f4e;
  color: #fff;
}

.ral_6036 {
  background-color: #04574b;
  color: #fff;
}

.ral_6028 {
  background-color: #315442;
  color: #fff;
}

.ral_6018 {
  background-color: #61993b;
  color: #fff;
}

.ral_6017 {
  background-color: #587f40;
  color: #fff;
}

.ral_6025 {
  background-color: #5e6e3b;
  color: #fff;
}

.ral_6010 {
  background-color: #4d6f39;
  color: #fff;
}

.ral_6001 {
  background-color: #366735;
  color: #fff;
}

.ral_6002 {
  background-color: #325928;
  color: #fff;
}

.ral_6035 {
  background-color: #194d25;
  color: #fff;
}

.ral_6005 {
  background-color: #114232;
  color: #fff;
}

.ral_6004 {
  background-color: #024442;
  color: #fff;
}

.ral_6019 {
  background-color: #b9ceac;
  color: #000;
}

.ral_6027 {
  background-color: #7ebab5;
  color: #000;
}

.ral_6034 {
  background-color: #7aacac;
  color: #000;
}

.ral_6033 {
  background-color: #46877f;
  color: #fff;
}

.ral_6021 {
  background-color: #8a9977;
  color: #000;
}

.ral_6011 {
  background-color: #6c7c59;
  color: #fff;
}

.ral_6003 {
  background-color: #50533c;
  color: #fff;
}

.ral_6020 {
  background-color: #37422f;
  color: #fff;
}

.ral_6012 {
  background-color: #303d3a;
  color: #fff;
}

.ral_6009 {
  background-color: #27352a;
  color: #fff;
}

.ral_6007 {
  background-color: #2c3222;
  color: #fff;
}

.ral_6022 {
  background-color: #3a3327;
  color: #fff;
}

.ral_7008 {
  background-color: #745e3d;
  color: #fff;
}

.ral_7013 {
  background-color: #575044;
  color: #fff;
}

.ral_8000 {
  background-color: #89693e;
  color: #fff;
}

.ral_8001 {
  background-color: #9d622b;
  color: #fff;
}

.ral_8004 {
  background-color: #8d4931;
  color: #fff;
}

.ral_8007 {
  background-color: #70452a;
  color: #fff;
}

.ral_8011 {
  background-color: #5a3826;
  color: #fff;
}

.ral_8012 {
  background-color: #66332b;
  color: #fff;
}

.ral_8015 {
  background-color: #5e2f26;
  color: #fff;
}

.ral_8016 {
  background-color: #4c2b20;
  color: #fff;
}

.ral_8017 {
  background-color: #442f29;
  color: #fff;
}

.ral_8019 {
  background-color: #3d3635;
  color: #fff;
}

.ral_8023 {
  background-color: #a45729;
  color: #fff;
}

.ral_8024 {
  background-color: #795038;
  color: #fff;
}

.ral_8025 {
  background-color: #755847;
  color: #fff;
}

.ral_8028 {
  background-color: #513a2a;
  color: #fff;
}

.ral_8029 {
  background-color: #7f4031;
  color: #fff;
}

.ral_6013 {
  background-color: #7d765a;
  color: #fff;
}

.ral_9003 {
  background-color: #ecece7;
  color: #000;
}

.ral_9010 {
  background-color: #f1ece1;
  color: #000;
}

.ral_9001 {
  background-color: #e9e0d2;
  color: #000;
}

.ral_1013 {
  background-color: #e3d9c6;
  color: #000;
}

.ral_9002 {
  background-color: #d7d5cb;
  color: #000;
}

.ral_9018 {
  background-color: #c8cbc4;
  color: #000;
}

.ral_7047 {
  background-color: #c8c8c7;
  color: #000;
}

.ral_7035 {
  background-color: #c5c7c4;
  color: #000;
}

.ral_7044 {
  background-color: #b7b3a8;
  color: #000;
}

.ral_7038 {
  background-color: #b0b0a9;
  color: #000;
}

.ral_7040 {
  background-color: #989ea1;
  color: #000;
}

.ral_9006 {
  background-color: #a1a1a0;
  color: #000;
}

.ral_7004 {
  background-color: #9b9b9b;
  color: #000;
}

.ral_7001 {
  background-color: #8c969d;
  color: #000;
}

.ral_7036 {
  background-color: #979392;
  color: #000;
}

.ral_9007 {
  background-color: #878581;
  color: #000;
}

.ral_9022 {
  background-color: #858583;
  color: #000;
}

.ral_9023 {
  background-color: #797b7a;
  color: #fff;
}

.ral_7037 {
  background-color: #7a7b7a;
  color: #fff;
}

.ral_7000 {
  background-color: #7a888e;
  color: #000;
}

.ral_7033 {
  background-color: #7f8274;
  color: #fff;
}

.ral_7002 {
  background-color: #817863;
  color: #fff;
}

.ral_7003 {
  background-color: #7a7669;
  color: #fff;
}

.ral_7005 {
  background-color: #6c6e6b;
  color: #fff;
}

.ral_7022 {
  background-color: #4c4a44;
  color: #fff;
}

.ral_7009 {
  background-color: #5d6058;
  color: #fff;
}

.ral_7010 {
  background-color: #585c56;
  color: #fff;
}

.ral_7012 {
  background-color: #575d5e;
  color: #fff;
}

.ral_7031 {
  background-color: #5b686d;
  color: #fff;
}

.ral_7011 {
  background-color: #52595d;
  color: #fff;
}

.ral_7024 {
  background-color: #45494e;
  color: #fff;
}

.ral_7015 {
  background-color: #4f5358;
  color: #fff;
}

.ral_7016 {
  background-color: #383e42;
  color: #fff;
}

.ral_7021 {
  background-color: #2f3234;
  color: #fff;
}

.ral_9004 {
  background-color: #2b2b2c;
  color: #fff;
}

.ral_9017 {
  background-color: #2a292a;
  color: #fff;
}

.ral_9011 {
  background-color: #27292b;
  color: #fff;
}

.ral_8022 {
  background-color: #1a1718;
  color: #fff;
}

.ral_9005 {
  background-color: #0e0e10;
  color: #fff;
}

/* CSS für den verbesserten Colorpicker */
/* Color classes for the color preview */
.color-preview.blue {
  background-color: var(--blue);
}
.color-preview.red {
  background-color: var(--red);
}
.color-preview.yellow {
  background-color: var(--yellow);
}
.color-preview.orange {
  background-color: var(--orange);
}
.color-preview.green {
  background-color: var(--green);
}
.color-preview.violett {
  background-color: var(--violett);
}

/* Farbauswahl-Dropdown Styling */
.custom-select-container {
  position: relative;
  width: 100%;
  font-family: inherit;
}
.custom-select-container .selected-value {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  color: #000;
  cursor: pointer;
}
.custom-select-container .selected-value .color-preview {
  width: 20px;
  height: 20px;
  border-radius: 3px;
  margin-right: 10px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.custom-select-container .selected-value .dropdown-arrow {
  margin-left: auto;
  transition: transform 0.3s;
}
.custom-select-container.open .selected-value .dropdown-arrow {
  transform: rotate(180deg);
}
.custom-select-container.open .custom-options {
  display: block; /* Removed !important to allow JavaScript to control display */
}
.custom-select-container .custom-options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 300px;
  overflow-y: auto;
  background-color: #fff;
  color: #000;
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 0 0 4px 4px;
  z-index: 1000; /* Increased z-index to ensure visibility */
  display: none;
  opacity: 1; /* Ensure full opacity */
  visibility: visible; /* Ensure visibility */
}
.custom-select-container .custom-options .custom-option {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  cursor: pointer;
}
.custom-select-container .custom-options .custom-option:hover {
  background-color: #f5f5f5;
}
.custom-select-container .custom-options .custom-option.selected {
  background-color: #e9f2fd;
}
.custom-select-container .custom-options .custom-option .color-preview {
  width: 20px;
  height: 20px;
  border-radius: 3px;
  margin-right: 10px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.alert {
  position: relative;
  padding: 8px 16px;
  margin-bottom: 16px;
  border: 1px solid transparent;
  border-radius: 6px;
}
.alert a {
  font-weight: 600;
  text-decoration: underline;
}
.alert .close {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 0.25rem 0.5rem;
  color: inherit;
  background-color: transparent;
  border: 0;
  cursor: pointer;
  opacity: 0.6;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
}
.alert .close:hover {
  opacity: 1;
}
.alert.alert-with-icon {
  padding-left: 3.5rem;
}
.alert.alert-with-icon .alert-icon {
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  font-size: 1.25rem;
}
.alert .alert-heading {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: inherit;
}
.alert .alert-text {
  margin-bottom: 0;
}

.alert-primary {
  color: var(--primary-dark);
  background-color: rgba(var(--primary-rgb), 0.15);
  border-color: rgba(var(--primary-rgb), 0.2);
}
.alert-primary a {
  color: var(--primary-dark);
}
.alert-primary a:hover {
  color: var(--primary-darker, var(--primary-dark));
  opacity: 0.9;
}

.alert-secondary {
  color: var(--secondary-dark);
  background-color: rgba(var(--secondary-rgb), 0.15);
  border-color: rgba(var(--secondary-rgb), 0.2);
}
.alert-secondary a {
  color: var(--secondary-dark);
}
.alert-secondary a:hover {
  color: var(--secondary-darker, var(--secondary-dark));
  opacity: 0.9;
}

.alert-success {
  color: var(--success-dark);
  background-color: rgba(var(--success-rgb), 0.15);
  border-color: rgba(var(--success-rgb), 0.2);
}
.alert-success a {
  color: var(--success-dark);
}
.alert-success a:hover {
  color: var(--success-darker, var(--success-dark));
  opacity: 0.9;
}

.alert-danger {
  color: var(--danger-dark);
  background-color: rgba(var(--danger-rgb), 0.15);
  border-color: rgba(var(--danger-rgb), 0.2);
}
.alert-danger a {
  color: var(--danger-dark);
}
.alert-danger a:hover {
  color: var(--danger-darker, var(--danger-dark));
  opacity: 0.9;
}

.alert-warning {
  color: var(--warning-dark);
  background-color: rgba(var(--warning-rgb), 0.15);
  border-color: rgba(var(--warning-rgb), 0.2);
}
.alert-warning a {
  color: var(--warning-dark);
}
.alert-warning a:hover {
  color: var(--warning-darker, var(--warning-dark));
  opacity: 0.9;
}

.alert-info {
  color: var(--info-dark);
  background-color: rgba(var(--info-rgb), 0.15);
  border-color: rgba(var(--info-rgb), 0.2);
}
.alert-info a {
  color: var(--info-dark);
}
.alert-info a:hover {
  color: var(--info-darker, var(--info-dark));
  opacity: 0.9;
}

.alert-light {
  color: var(--text-primary);
  background-color: var(--light);
  border-color: var(--border-color);
}

.alert-dark {
  color: #fff;
  background-color: var(--dark);
  border-color: var(--dark);
}
.alert-dark a {
  color: rgba(255, 255, 255, 0.85);
}
.alert-dark a:hover {
  color: #fff;
}

.alert-outline-primary {
  color: var(--primary);
  background-color: transparent;
  border-color: var(--primary);
}

.alert-outline-success {
  color: var(--success);
  background-color: transparent;
  border-color: var(--success);
}

.alert-outline-danger {
  color: var(--danger);
  background-color: transparent;
  border-color: var(--danger);
}

.alert-outline-warning {
  color: var(--warning);
  background-color: transparent;
  border-color: var(--warning);
}

.alert-outline-info {
  color: var(--info);
  background-color: transparent;
  border-color: var(--info);
}

.alert-sm {
  padding: 4px 8px;
  font-size: 0.875rem;
}

.alert-lg {
  padding: 16px 24px;
}

.alert-border-left {
  border-left-width: 4px;
}

.alert-dismissible {
  padding-right: 3rem;
}
.alert-dismissible.fade {
  opacity: 0;
  transition: opacity 0.15s linear;
}
.alert-dismissible.fade.show {
  opacity: 1;
}

.toast-container {
  position: fixed;
  z-index: 1050;
  pointer-events: none;
}
.toast-container.top-right {
  top: 1rem;
  right: 800px;
}
.toast-container.top-left {
  top: 1rem;
  left: 1rem;
}
.toast-container.bottom-right {
  bottom: 1rem;
  right: 1rem;
}
.toast-container.bottom-left {
  bottom: 1rem;
  left: 1rem;
}
.toast-container.top-center {
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
}
.toast-container.bottom-center {
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
}

.toast {
  max-width: 350px;
  overflow: hidden;
  background-color: var(--bg-card);
  background-clip: padding-box;
  border: 1px solid var(--border-color);
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  opacity: 0;
  border-radius: 6px;
  margin-bottom: 0.75rem;
  pointer-events: auto;
}
.toast.showing {
  opacity: 0;
}
.toast.show {
  opacity: 1;
  transition: opacity 0.15s linear;
}
.toast.hide {
  display: none;
}
.toast .toast-header {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  color: var(--text-secondary);
  background-color: rgba(255, 255, 255, 0.85);
  background-clip: padding-box;
  border-bottom: 1px solid var(--border-color);
}
.toast .toast-header .toast-title {
  margin-right: auto;
  font-weight: 600;
}
.toast .toast-header .toast-time {
  margin-right: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-tertiary);
}
.toast .toast-header .close {
  margin-left: 0.5rem;
}
.toast .toast-body {
  padding: 0.75rem;
}
.toast .toast-body .toast-body-icon {
  display: inline-block;
  margin-right: 0.5rem;
  vertical-align: middle;
}
.toast.toast-primary .toast-header {
  background-color: rgba(var(--primary-rgb), 0.2);
  color: var(--primary);
}
.toast.toast-success {
  background-color: var(--success);
  color: #000000;
}
.toast.toast-danger {
  background-color: rgba(var(--danger-rgb), 0.2);
  color: var(--danger);
}
.toast.toast-warning {
  background-color: rgba(var(--warning-rgb), 0.2);
  color: var(--warning);
}
.toast.toast-info {
  background-color: rgba(var(--info-rgb), 0.2);
  color: var(--info);
}

.banner-alert {
  width: 100%;
  padding: 8px 16px;
  text-align: center;
  position: fixed;
  left: 0;
  z-index: 1030;
}
.banner-alert.banner-top {
  top: 0;
}
.banner-alert.banner-bottom {
  bottom: 0;
}
.banner-alert.banner-with-close {
  padding-right: 3rem;
}

.system-notification {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  margin-bottom: 16px;
  background-color: var(--bg-card);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.system-notification .system-notification-icon {
  margin-right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.system-notification .system-notification-icon.icon-success {
  background-color: var(--success);
  color: white;
}
.system-notification .system-notification-icon.icon-danger {
  background-color: var(--danger);
  color: white;
}
.system-notification .system-notification-icon.icon-warning {
  background-color: var(--warning);
  color: white;
}
.system-notification .system-notification-icon.icon-info {
  background-color: var(--info);
  color: white;
}
.system-notification .system-notification-content {
  flex: 1;
}
.system-notification .system-notification-content .system-notification-title {
  margin: 0;
  font-weight: 600;
  font-size: 1rem;
}
.system-notification .system-notification-content .system-notification-message {
  margin: 0.25rem 0 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
}
.system-notification .system-notification-close {
  margin-left: 8px;
}

@media (max-width: 576px) {
  .toast-container {
    width: 100%;
  }
  .toast-container.top-right, .toast-container.top-left, .toast-container.top-center {
    right: 0;
    left: 0;
    top: 0;
    transform: none;
  }
  .toast-container.bottom-right, .toast-container.bottom-left, .toast-container.bottom-center {
    right: 0;
    left: 0;
    bottom: 0;
    transform: none;
  }
  .toast {
    max-width: none;
    width: calc(100% - 2rem);
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .system-notification {
    border-radius: 0;
    margin-bottom: 0.5rem;
  }
}
.alert-group .alert {
  margin-bottom: 0.5rem;
}
.alert-group .alert:last-child {
  margin-bottom: 16px;
}

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  z-index: 999;
}
.modal-backdrop.fade {
  opacity: 0;
  transition: opacity 0.15s linear;
}
.modal-backdrop.fade.show {
  opacity: 1;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1050;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
  display: none;
}
.modal.show {
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal.fade .modal-dialog {
  transform: translateY(-20px);
  transition: transform 0.3s ease-out;
}
.modal.fade .modal-dialog.show {
  transform: translateY(0);
}
.modal.modal-dialog-centered {
  display: flex;
  align-items: center;
  min-height: calc(100% - 3rem);
}

.modal-dialog {
  position: relative;
  width: auto;
  margin: 1.75rem auto;
  pointer-events: none;
}
.modal-dialog.modal-fullscreen {
  width: 100%;
  max-width: 100%;
  height: 100%;
  margin: 0;
}
.modal-dialog.modal-fullscreen .modal-content {
  height: 100%;
  border: 0;
  border-radius: 0;
}
.modal-dialog.modal-sm {
  max-width: 300px;
}
.modal-dialog.modal-lg {
  width: 800px;
}
.modal-dialog.modal-xl {
  max-width: 1140px;
}

.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background-color: var(--bg-card);
  background-clip: padding-box;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  outline: 0;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.modal-header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid var(--border-color);
  border-top-left-radius: calc(6px - 1px);
  border-top-right-radius: calc(6px - 1px);
}
.modal-header .modal-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.5;
}
.modal-header .close {
  background-color: transparent;
  border: 0;
  padding: 0.5rem 0.75rem;
  margin: -0.5rem -0.5rem -0.5rem auto;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--danger-dark);
  cursor: pointer;
  transition: all 0.2s ease;
}
.modal-header .close:hover {
  color: var(--danger);
}
.modal-header .modal-header-icon {
  margin-right: 0.75rem;
  font-size: 1.25rem;
}
.modal-header .modal-header-icon.icon-success {
  color: var(--success);
}
.modal-header .modal-header-icon.icon-danger {
  color: var(--danger);
}
.modal-header .modal-header-icon.icon-warning {
  color: var(--warning);
}
.modal-header .modal-header-icon.icon-info {
  color: var(--info);
}

.modal-body {
  position: relative;
  flex: 1 1 auto;
  padding: 16px;
  overflow-y: auto;
}
.modal-body.modal-body-scrollable {
  max-height: 50vh;
  overflow-y: auto;
}
.modal-body.modal-form {
  padding-bottom: 0;
}
.modal-body .modal-section {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
}
.modal-body .modal-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.modal-body .modal-section .modal-section-title {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 1.1rem;
  font-weight: 600;
}

.modal-footer {
  display: flex;
  flex-wrap: wrap;
  flex-shrink: 0;
  align-items: center;
  justify-content: flex-end;
  padding: 8px 16px;
  border-top: 1px solid var(--border-color);
  border-bottom-left-radius: calc(6px - 1px);
  border-bottom-right-radius: calc(6px - 1px);
}
.modal-footer > * {
  margin: 0.25rem;
}
.modal-footer .btn {
  min-width: 80px;
  background-color: var(--primary);
  color: var(--text-primary);
}
.modal-footer .btn:hover {
  background-color: var(--primary-light);
}
.modal-footer.modal-footer-left {
  justify-content: flex-start;
}
.modal-footer.modal-footer-center {
  justify-content: center;
}
.modal-footer.modal-footer-between {
  justify-content: space-between;
}

.modal-dialog-type .modal-body {
  display: flex;
  align-items: flex-start;
}
.modal-dialog-type .modal-body .modal-icon {
  flex-shrink: 0;
  margin-right: 16px;
  font-size: 1.75rem;
  line-height: 1;
}
.modal-dialog-type .modal-body .modal-icon.icon-confirm {
  color: var(--warning);
}
.modal-dialog-type .modal-body .modal-icon.icon-success {
  color: var(--success);
}
.modal-dialog-type .modal-body .modal-icon.icon-danger {
  color: var(--danger);
}
.modal-dialog-type .modal-body .modal-icon.icon-info {
  color: var(--info);
}
.modal-dialog-type .modal-body .modal-message {
  flex: 1;
}

.modal-side-sheet .modal-dialog {
  position: fixed;
  margin: 0;
  height: 100%;
  max-width: 400px;
  transform: translateX(100%);
  transition: transform 0.3s ease-out;
  top: 0;
  right: 0;
}
.modal-side-sheet .modal-dialog.show {
  transform: translateX(0);
}
.modal-side-sheet .modal-dialog.left {
  left: 0;
  right: auto;
  transform: translateX(-100%);
}
.modal-side-sheet .modal-dialog.left.show {
  transform: translateX(0);
}
.modal-side-sheet .modal-content {
  height: 100%;
  border-radius: 0;
}
.modal-side-sheet .modal-content .modal-body {
  overflow-y: auto;
}

.modal-bottom-sheet .modal-dialog {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  transform: translateY(100%);
  transition: transform 0.3s ease-out;
  max-width: 100%;
}
.modal-bottom-sheet .modal-dialog.show {
  transform: translateY(0);
}
.modal-bottom-sheet .modal-dialog .modal-content {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.modal-bottom-sheet .modal-dialog .modal-content:before {
  content: "";
  display: block;
  width: 40px;
  height: 5px;
  background-color: var(--border-color);
  border-radius: 3px;
  margin: 10px auto;
}

.modal-wizard .modal-body {
  padding-top: 0;
}
.modal-wizard .wizard-header {
  padding: 16px;
  padding-bottom: 8px;
}
.modal-wizard .wizard-header .wizard-step-indicator {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}
.modal-wizard .wizard-header .wizard-step-indicator .step {
  flex: 1;
  position: relative;
  padding-top: 20px;
  text-align: center;
}
.modal-wizard .wizard-header .wizard-step-indicator .step:not(:last-child):after {
  content: "";
  position: absolute;
  top: 10px;
  left: 50%;
  width: 100%;
  height: 2px;
  background-color: var(--border-color);
  z-index: 1;
}
.modal-wizard .wizard-header .wizard-step-indicator .step .step-number {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--bg-card);
  border: 2px solid var(--border-color);
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 5px;
  transition: all 0.2s ease;
}
.modal-wizard .wizard-header .wizard-step-indicator .step .step-label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary);
  display: none;
}
@media (min-width: 576px) {
  .modal-wizard .wizard-header .wizard-step-indicator .step .step-label {
    display: block;
  }
}
.modal-wizard .wizard-header .wizard-step-indicator .step.active .step-number {
  background-color: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.modal-wizard .wizard-header .wizard-step-indicator .step.active .step-label {
  color: var(--text-primary);
  font-weight: 600;
}
.modal-wizard .wizard-header .wizard-step-indicator .step.completed .step-number {
  background-color: var(--success);
  border-color: var(--success);
  color: #fff;
}
.modal-wizard .wizard-header .wizard-step-indicator .step.completed:not(:last-child):after {
  background-color: var(--success);
}
.modal-wizard .wizard-content {
  position: relative;
}
.modal-wizard .wizard-content .wizard-pane {
  display: none;
}
.modal-wizard .wizard-content .wizard-pane.active {
  display: block;
}
.modal-wizard .wizard-footer {
  display: flex;
  justify-content: space-between;
  padding: 16px;
  border-top: 1px solid var(--border-color);
}

.modal-image .modal-dialog {
  max-width: 800px;
}
.modal-image .modal-content {
  background-color: rgba(0, 0, 0, 0.8);
  border: none;
}
.modal-image .modal-content .modal-header {
  border-bottom: none;
  padding: 0.5rem 1rem;
}
.modal-image .modal-content .modal-header .modal-title {
  color: #fff;
}
.modal-image .modal-content .modal-header .close {
  color: #fff;
}
.modal-image .modal-content .modal-body {
  padding: 0;
  text-align: center;
}
.modal-image .modal-content .modal-body img {
  max-width: 100%;
  max-height: 80vh;
}

.modal.modal-zoom .modal-dialog {
  transform: scale(0.8);
  transition: transform 0.3s ease-in-out;
}
.modal.modal-zoom .modal-dialog.show {
  transform: scale(1);
}

.modal.modal-rotate .modal-dialog {
  transform: rotate(-5deg) scale(0.9);
  transition: transform 0.3s ease-in-out;
}
.modal.modal-rotate .modal-dialog.show {
  transform: rotate(0) scale(1);
}

@media (max-width: 576px) {
  .modal-dialog {
    margin: 0.5rem;
    max-width: calc(100% - 1rem);
  }
  .modal-side-sheet .modal-dialog {
    max-width: 85%;
  }
  .modal-body.modal-body-scrollable {
    max-height: 60vh;
  }
  .modal-footer {
    flex-direction: column;
    align-items: stretch;
  }
  .modal-footer > * {
    margin: 0.25rem 0;
    width: 100%;
  }
  .modal-footer .btn {
    min-width: unset;
  }
}
#calendar {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}
#calendar table.fc-scrollgrid th a {
  color: var(--text-primary);
  text-decoration: none;
}
#calendar table.fc-scrollgrid th a:hover {
  text-decoration: underline;
}
#calendar table.fc-scrollgrid td {
  border-color: var(--border-color);
}
#calendar table.fc-scrollgrid td.fc-timegrid-slot-minor {
  border-top: none;
}
#calendar .recurring-event {
  border-left: 3px dashed #ff9800 !important;
}
#calendar .recurring-event::before {
  content: "↻";
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 12px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* RRule Input Component Styles */
.rrule-input-container {
  margin-bottom: 20px;
  font-family: "Roboto", sans-serif;
}

.rrule-section {
  margin-bottom: 15px;
  padding: 10px;
  background-color: var(--form-bg);
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.rrule-section label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: var(--text-color);
}

.rrule-freq {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background-color: var(--input-bg);
  color: var(--text-color);
  font-size: 14px;
}

.rrule-interval-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rrule-interval {
  width: 60px;
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background-color: var(--input-bg);
  color: var(--text-color);
  font-size: 14px;
  text-align: center;
}

.rrule-interval-text {
  color: var(--text-color);
}

.rrule-weekday-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rrule-weekday-label {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 4px;
  background-color: var(--input-bg);
  border: 1px solid var(--border-color);
  transition: background-color 0.2s;
}

.rrule-weekday-label:hover {
  background-color: var(--hover-bg);
}

.rrule-weekday-label input[type=checkbox] {
  margin: 0;
}

.rrule-monthly-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rrule-monthly-container label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
  cursor: pointer;
}

.rrule-end-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rrule-end-container label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
  cursor: pointer;
}

.rrule-count, .rrule-until {
  padding: 5px 8px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background-color: var(--input-bg);
  color: var(--text-color);
  font-size: 14px;
}

.rrule-count {
  width: 60px;
  text-align: center;
}

.rrule-until {
  width: 130px;
}

.rrule-summary {
  margin-top: 15px;
  padding: 10px;
  background-color: var(--accent-bg);
  border-radius: 4px;
  color: var(--text-color);
  font-style: italic;
  font-size: 14px;
  line-height: 1.4;
}

/* Dark mode adjustments */
[data-theme=dark] .rrule-section {
  background-color: var(--form-bg-dark, #2a2a2a);
}
[data-theme=dark] .rrule-freq,
[data-theme=dark] .rrule-interval,
[data-theme=dark] .rrule-count,
[data-theme=dark] .rrule-until {
  background-color: var(--input-bg-dark, #333);
  border-color: var(--border-color-dark, #444);
  color: var(--text-color-dark, #eee);
}
[data-theme=dark] .rrule-weekday-label {
  background-color: var(--input-bg-dark, #333);
  border-color: var(--border-color-dark, #444);
}
[data-theme=dark] .rrule-weekday-label:hover {
  background-color: var(--hover-bg-dark, #444);
}
[data-theme=dark] .rrule-summary {
  background-color: var(--accent-bg-dark, #3a3a3a);
}

.task {
  display: flex;
  width: 90%;
  gap: 5px; /* Abstand zwischen den Containern */
  margin: 20px auto 20px auto;
  font-size: 2vh;
  font-weight: 600;
}

.abteilung-form {
  display: flex;
  width: 80%;
  gap: 5px; /* Abstand zwischen den Containern */
  margin-left: auto;
  margin-right: auto;
  border: 1px solid #555;
  border-radius: 10px;
}

.container-left,
.container-right {
  flex: 1; /* Beide Container nehmen gleich viel Platz ein */
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.abteilung-container {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  justify-content: center;
}

.abteilung-box {
  flex: 0 0 350px;
  border: 2px solid var(--border-color);
  border-radius: 8px;
  margin-bottom: 20px;
  overflow: hidden;
}

.abteilung-header {
  background-color: var(--border-color);
  padding: 12px 15px;
  border-bottom: 1px solid var(--border-color);
  font-weight: bold;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.abteilung-header .abteilung-actions {
  flex-grow: 1;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
.abteilung-header .abteilung-actions form.edit-form {
  margin-left: 5px;
}

.abteilung-content {
  padding: 10px 0;
}

.abteilung-item {
  padding: 8px 8px;
  border-bottom: 1px solid var(--border-color);
}

.abteilung-item:last-child {
  border-bottom: none;
}

.toggle-icon {
  cursor: pointer;
  margin-right: 5px;
  display: inline-block;
  width: 16px;
  text-align: center;
  color: var(--primary);
}

/* Verbesserter Stil für Unterabteilungen */
.abteilung-subs-container {
  margin-top: 10px;
  padding-left: 5px;
}

.abteilung-subitem {
  padding: 8px 8px 8px 15px;
  border-bottom: 1px solid var(--border-color);
  position: relative;
  margin-left: 5px;
  margin-right: 5px;
  display: flex;
  align-items: center;
  /* Option 2: Prevent all wrapping (keeps everything on one line) */
  white-space: nowrap;
  /* Option 3: More specific control */
  word-wrap: normal;
  word-break: normal;
}
.abteilung-subitem .abteilung-subitem-actions {
  flex-grow: 1;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
.abteilung-subitem .abteilung-subitem-actions form.edit-form {
  display: flex;
  margin-left: 5px;
}

.abteilung-subitem:last-child {
  border-bottom: none;
}

.has-children {
  font-weight: 600;
  padding-top: 30px;
}

/* Tiefere Hierarchiebenen */
.abteilung-subitem[data-level="1"] {
  font-weight: 600;
  padding-top: 30px;
}

.abteilung-subitem[data-level="2"] {
  padding-left: 20px;
}

.abteilung-subitem[data-level="3"] {
  padding-left: 40px;
}

.abteilung-subitem[data-level="4"] {
  padding-left: 60px;
}

.abteilung-subitem[data-level="5"] {
  padding-left: 80px;
}

.abteilung-actions,
.abteilung-subitem-actions {
  display: flex;
  gap: 5px;
}

.edit-button {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--primary);
  font-size: 20px;
}

.edit-button:hover {
  color: var(--primary-light);
}

.pers-button {
  background: transparent;
  border: none;
  cursor: pointer;
  color: #ffc107;
  font-size: 20px;
}

.add-button {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--success-dark);
  font-size: 20px;
}

.add-button:hover {
  color: var(--primary-light);
}

.hidden {
  display: none;
}

.active-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 11px;
  margin-left: 5px;
  background-color: #4CAF50;
  color: #FFFFFF;
}

.inactive-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 11px;
  margin-left: 5px;
  background-color: #f44336;
  color: white;
}

span.member-count {
  color: #555;
  margin-left: 5px;
}

.dragging {
  opacity: 0.5;
  cursor: grabbing;
}

.drag-over {
  border: 2px dashed #007bff;
  background-color: rgba(0, 123, 255, 0.1);
}

.abteilung-box, .abteilung-subitem {
  cursor: grab;
}

.abteilung-subitem.hidden {
  display: none;
}

/* Styling für die Personen-Verwaltung */
.persons-management-container {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
  width: 100%;
  padding: 5px;
  height: 600px;
}

.person-search-container {
  margin-bottom: 15px;
  position: relative;
  width: 100%;
}

.search-results {
  position: absolute;
  width: 100%;
  max-height: 200px;
  overflow: hidden;
  background-color: var(--bg-main);
  border: 1px solid #ddd;
  border-top: none;
  z-index: 1000;
  display: none;
}

.search-result-item {
  padding: 8px 12px;
  cursor: pointer;
}

.search-result-item:hover {
  background-color: var(--bg-hover);
}

.assigned-persons-container {
  margin-top: 20px;
}

.assigned-persons-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.person-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}

.person-name {
  font-weight: 500;
}

.person-role {
  color: #666;
  margin-left: 10px;
}

.no-persons {
  color: #999;
  font-style: italic;
}

.remove-person-btn {
  background-color: #ff4d4d;
  color: white;
  border: none;
  border-radius: 3px;
  padding: 4px 8px;
  cursor: pointer;
}

.remove-person-btn:hover {
  background-color: #ff3333;
}

.search-results-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 5px;
}

.search-results-table th {
  background-color: var(--border-color);
  padding: 8px;
  text-align: left;
  font-weight: bold;
  border-bottom: 1px solid #ddd;
}

.search-results-table td {
  padding: 8px;
  border-bottom: 1px solid #eee;
}

.search-results-table tr.search-result-item:hover {
  background-color: #f5f5f5;
  cursor: pointer;
}

.search-results {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.no-results {
  padding: 10px;
  text-align: center;
  color: #666;
}

.sorting-buttons {
  display: flex;
  align-items: center;
  margin-right: 10px;
}

.sorting-buttons button {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: var(--bg-main);
  padding: 5px;
  transition: color 0.2s, transform 0.2s;
}

.sorting-buttons button:hover {
  color: #4CAF50;
  transform: scale(1.2);
}

.sorting-buttons .sort-left {
  margin-right: 5px;
}

.abteilung-header {
  display: flex;
  align-items: center;
}

.sort-placeholder {
  display: inline-block;
  width: 23px; /* Anpassen an die Größe der Pfeil-Buttons */
  height: 23px;
}

.sorting-buttons {
  display: flex;
  align-items: center;
  margin-right: 10px;
  min-width: 50px; /* Sicherstellen, dass der Container eine Mindestbreite hat */
  justify-content: center;
}

/* Rollenanzeige in der Tabelle */
.role-cell {
  min-width: 200px;
}

.role-display {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}

.role-badge {
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 0.85em;
  white-space: nowrap;
  display: inline-block;
  margin: 2px;
}

.manage-roles-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1.1em;
  color: #555;
  margin-left: 5px;
}

.manage-roles-btn:hover {
  color: #000;
}

/* Modal-Dialog */
/*
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
}

.modal-content {
    background-color: var(--bg-main);
    margin: 10% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 600px;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close:hover {
    color: var(--danger-dark);
}
*/
.role-selection {
  max-height: 300px;
  overflow-y: auto;
  margin: 15px 0;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.role-checkbox-container {
  padding: 8px 12px;
  margin: 5px 0;
  background-color: #f9f9f9;
  color: #000000;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.role-checkbox-container label {
  color: #000000;
}

.role-checkbox-container:hover {
  background-color: #f0f0f0;
}

.role-checkbox-container label {
  display: flex;
  align-items: center;
  cursor: pointer;
  width: 100%;
}

.role-checkbox-container input[type=checkbox] {
  margin-right: 10px;
}

.save-roles-btn {
  padding: 8px 16px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 10px;
}

.save-roles-btn:hover {
  background-color: #45a049;
}

.options-selection-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}
.options-selection-container h3 {
  font-size: 14px;
}

.available-options-container,
.selected-options-container {
  flex: 1;
  width: 40%;
}

.available-options-list,
.selected-options-list {
  max-height: 500px;
  overflow-y: auto;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 10px;
}

.option-item {
  padding: 12px;
  margin-bottom: 8px;
  background-color: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}
.option-item:hover {
  background-color: var(--bg-hover);
}

.selected-option-item {
  background-color: var(--bg-card);
  color: var(--text-primary);
  padding: 12px;
  margin-bottom: 8px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
}
.selected-option-item .option-controls {
  text-align: right;
}
.selected-option-item .option-controls button.option-move-up,
.selected-option-item .option-controls button.option-move-down,
.selected-option-item .option-controls button.option-remove {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 4px;
  margin-left: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}
.selected-option-item .option-controls button.option-move-up:hover,
.selected-option-item .option-controls button.option-move-down:hover,
.selected-option-item .option-controls button.option-remove:hover {
  background-color: var(--bg-hover);
}
.selected-option-item .option-controls button.option-move-up,
.selected-option-item .option-controls button.option-move-down {
  color: var(--text-primary);
}
.selected-option-item .option-controls button.option-remove {
  color: var(--danger-dark);
}

.options-summary {
  margin-top: 16px;
  color: var(--text-secondary);
}
.options-summary .options-total {
  text-align: right;
  font-weight: bold;
}
.options-summary #options-total-einmalig,
.options-summary #options-total-recurring,
.options-summary #options-total-all {
  border: 1px solid var(--border-color);
  margin-left: 8px;
  min-width: 200px;
}

.snippets-selection-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 10px;
}
.snippets-selection-container h3 {
  font-size: 14px;
}

.available-snippets-container,
.selected-snippets-container {
  flex: 1;
  width: 40%;
}

.available-snippets-list,
.selected-snippets-list {
  max-height: 500px;
  overflow-y: auto;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 10px;
}

.snippet-item {
  padding: 12px;
  margin-bottom: 8px;
  background-color: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}
.snippet-item:hover {
  background-color: var(--bg-hover);
}

.selected-snippet-item {
  background-color: var(--bg-card);
  color: var(--text-primary);
  padding: 12px;
  margin-bottom: 8px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
}
.selected-snippet-item .snippet-controls {
  text-align: right;
}
.selected-snippet-item .snippet-controls button.snippet-move-up,
.selected-snippet-item .snippet-controls button.snippet-move-down,
.selected-snippet-item .snippet-controls button.snippet-remove {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 4px;
  margin-left: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}
.selected-snippet-item .snippet-controls button.snippet-move-up:hover,
.selected-snippet-item .snippet-controls button.snippet-move-down:hover,
.selected-snippet-item .snippet-controls button.snippet-remove:hover {
  background-color: var(--bg-hover);
}
.selected-snippet-item .snippet-controls button.snippet-move-up,
.selected-snippet-item .snippet-controls button.snippet-move-down {
  color: var(--text-primary);
}
.selected-snippet-item .snippet-controls button.snippet-remove {
  color: var(--danger-dark);
}

button.show-full-content,
button.show-selected-full-content {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 4px;
  margin: 4px 0 0 0;
  cursor: pointer;
  transition: background-color 0.2s;
}
button.show-full-content:hover,
button.show-selected-full-content:hover {
  background-color: var(--bg-hover);
}

.vstat-action {
  margin-right: 8px;
}

#relation-searchresult {
  background-color: var(--bg-main);
  border-radius: 4px;
  position: relative;
  z-index: 1000;
  max-height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

table.search-results,
table.relation-search-results {
  width: 100%;
  position: relative;
}
table.search-results thead,
table.relation-search-results thead {
  position: sticky;
  top: 0;
  background-color: var(--bg-main);
  z-index: 10;
}
table.search-results th,
table.relation-search-results th {
  text-align: left;
  padding: 5px 10px 5px 5px;
}
table.search-results td,
table.relation-search-results td {
  padding: 5px 10px 5px 5px;
  vertical-align: text-top;
  border-bottom: 1px solid var(--border-color);
  background-color: var(--bg-main);
}

#hint {
  font-size: 2vh;
  color: var(--text-hint);
}

/* Zahlungsübersicht Styles */
.warning-row {
  background-color: rgba(255, 99, 71, 0.1);
}

.notice-row {
  background-color: rgba(255, 193, 7, 0.1);
}

.card-warning {
  border-left: 4px solid;
}

.card-danger {
  border-left: 4px solid;
}

.info-box {
  background-color: rgba(0, 123, 255, 0.1);
  border-left: 4px solid #007bff;
  margin-bottom: 20px;
  padding: 12px 15px;
  border-radius: 4px;
  font-size: 0.9rem;
}
.info-box i {
  margin-right: 5px;
  color: #007bff;
}

#zahlungen-cards .card-content .content-section {
  margin-bottom: 15px;
}
#zahlungen-cards .card-content .content-section h4 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-secondary);
}
#zahlungen-cards .card-content .person-info {
  font-weight: 500;
  font-size: 1.1rem;
}
#zahlungen-cards .card-content .data-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
#zahlungen-cards .card-content .data-list li {
  margin-bottom: 6px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#zahlungen-cards .card-content .data-list li .data-label {
  font-weight: 500;
  color: var(--text-secondary);
  min-width: 120px;
}
#zahlungen-cards .card-content .data-list li .data-value {
  flex-grow: 1;
  text-align: right;
}
#zahlungen-cards .card-content .card-actions {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.table-actions {
  white-space: nowrap;
}
.table-actions .btn-sm.btn-action {
  background: none;
  border: none;
  padding: 3px 6px;
  margin: 0 2px;
  cursor: pointer;
  color: #666;
  transition: color 0.3s;
}
.table-actions .btn-sm.btn-action:hover {
  color: #007bff;
}

.detail-view {
  padding: 10px;
}
.detail-view h3 {
  margin-top: 0;
  margin-bottom: 15px;
}
.detail-view .detail-status {
  margin-bottom: 20px;
}
.detail-view .detail-table {
  width: 100%;
  margin-bottom: 20px;
}
.detail-view .detail-table tr {
  border-bottom: 1px solid #eee;
}
.detail-view .detail-table tr:last-child {
  border-bottom: none;
}
.detail-view .detail-table td {
  padding: 8px 5px;
}
.detail-view .detail-table td.label {
  font-weight: 500;
  color: #555;
  width: 35%;
}
.detail-view .action-buttons {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.login-container {
  width: 40%;
  margin-left: auto;
  margin-right: auto;
  padding: 32px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
}
@media (max-width: 768px) {
  .login-container {
    width: 90%;
    padding: 24px;
  }
}
.login-container .register-intro {
  margin-bottom: 20px;
  color: var(--text-secondary);
}
.login-container small {
  display: block;
  margin-top: 5px;
  color: var(--text-secondary);
  font-size: 12px;
}
.login-container .checkbox-label {
  color: var(--text-primary) !important;
}
.login-container .checkbox-label a {
  color: var(--primary);
  text-decoration: none;
}
.login-container .checkbox-label a:hover {
  text-decoration: underline;
}
.login-container .success-message {
  background-color: #d4edda;
  color: #155724;
  padding: 15px;
  border-radius: 5px;
  margin-bottom: 20px;
}
.login-container .error-message {
  background-color: #f8d7da;
  color: #721c24;
  padding: 15px;
  border-radius: 5px;
  margin-bottom: 20px;
}

.terms-container {
  width: 80%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
}
@media (max-width: 768px) {
  .terms-container {
    width: 95%;
    padding: 15px;
  }
}
.terms-container h1 {
  color: var(--primary);
  margin-bottom: 30px;
}
@media (max-width: 768px) {
  .terms-container h1 {
    font-size: 1.8rem;
    margin-bottom: 20px;
  }
}
.terms-container h2 {
  color: var(--primary);
  margin-top: 30px;
  margin-bottom: 15px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 10px;
}
@media (max-width: 768px) {
  .terms-container h2 {
    font-size: 1.4rem;
    margin-top: 25px;
  }
}
.terms-container p {
  margin-bottom: 15px;
  line-height: 1.6;
}
@media (max-width: 768px) {
  .terms-container p {
    font-size: 0.95rem;
  }
}
.terms-container ul {
  margin-bottom: 15px;
  padding-left: 20px;
}
@media (max-width: 768px) {
  .terms-container ul {
    padding-left: 15px;
  }
}
.terms-container li {
  margin-bottom: 8px;
  line-height: 1.6;
}
@media (max-width: 768px) {
  .terms-container li {
    font-size: 0.95rem;
    margin-bottom: 6px;
  }
}
.terms-container hr {
  margin: 30px 0;
  border: 0;
  border-top: 1px solid var(--border-color);
}
@media (max-width: 768px) {
  .terms-container hr {
    margin: 20px 0;
  }
}
.terms-container .terms-footer {
  margin-top: 40px;
  font-style: italic;
  color: var(--text-secondary);
}
@media (max-width: 768px) {
  .terms-container .terms-footer {
    margin-top: 30px;
    font-size: 0.9rem;
  }
}
.terms-container .back-link {
  display: inline-block;
  margin-top: 30px;
  color: var(--primary);
  text-decoration: none;
}
@media (max-width: 768px) {
  .terms-container .back-link {
    margin-top: 20px;
  }
}
.terms-container .back-link:hover {
  text-decoration: underline;
}

.impressum-notice {
  padding: 15px;
  border-radius: 5px;
  margin-bottom: 20px;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
}
@media (max-width: 768px) {
  .impressum-notice {
    padding: 12px;
    margin-bottom: 15px;
  }
}
.impressum-notice h3 {
  margin-top: 0;
  color: var(--primary);
}
@media (max-width: 768px) {
  .impressum-notice h3 {
    font-size: 1.1rem;
  }
}
.impressum-notice p {
  margin-bottom: 0;
}
@media (max-width: 768px) {
  .impressum-notice p {
    font-size: 0.9rem;
  }
}

.login-container.impressum-container h1, .login-container.impressum-container h2 {
  color: var(--primary);
}
@media (max-width: 768px) {
  .login-container.impressum-container h1, .login-container.impressum-container h2 {
    font-size: 1.6rem;
  }
}
.login-container.impressum-container h2 {
  margin-top: 25px;
  font-size: 1.3rem;
}
@media (max-width: 768px) {
  .login-container.impressum-container h2 {
    font-size: 1.2rem;
    margin-top: 20px;
  }
}
.login-container.impressum-container p {
  line-height: 1.5;
  margin-bottom: 15px;
}
@media (max-width: 768px) {
  .login-container.impressum-container p {
    font-size: 0.9rem;
    line-height: 1.4;
  }
}
.login-container.impressum-container .back-link {
  display: inline-block;
  margin-top: 30px;
  color: var(--primary);
  text-decoration: none;
}
@media (max-width: 768px) {
  .login-container.impressum-container .back-link {
    margin-top: 20px;
  }
}
.login-container.impressum-container .back-link:hover {
  text-decoration: underline;
}
@media (max-width: 768px) {
  .login-container {
    width: 95%;
    max-width: 500px;
    padding: 15px;
  }
}

.dashboard-header {
  margin-bottom: 2rem;
}
.dashboard-header h1 {
  font-size: 2rem;
  color: var(--color-primary);
  margin-bottom: 0.5rem;
}

.dashboard-info {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 2rem;
}
.dashboard-info .info-card {
  background-color: var(--color-card-bg);
  border-radius: 0.5rem;
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  flex: 1;
  min-width: 300px;
}
.dashboard-info .info-card h2 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
  color: var(--color-text-dark);
}
.dashboard-info .info-card p {
  margin-bottom: 0.5rem;
}
.dashboard-info .info-card p:last-child {
  margin-bottom: 0;
}
.dashboard-info .info-card p strong {
  font-weight: 600;
}

.dashboard-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.dashboard-stats .stats-card {
  background-color: var(--color-card-bg);
  border-radius: 0.5rem;
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  flex: 1;
  min-width: 300px;
}
.dashboard-stats .stats-card h2 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
  color: var(--color-text-dark);
}
.dashboard-stats .stats-card .stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 1rem;
}
.dashboard-stats .stats-card .stats-grid .stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1rem;
  background-color: var(--color-bg-light);
  border-radius: 0.5rem;
}
.dashboard-stats .stats-card .stats-grid .stat-item .stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 0.5rem;
}
.dashboard-stats .stats-card .stats-grid .stat-item .stat-label {
  font-size: 0.875rem;
  color: var(--color-text);
}
.dashboard-stats .member-stats .stat-item {
  border-left: 3px solid var(--color-primary);
}
.dashboard-stats .contract-stats .stat-item {
  border-left: 3px solid var(--color-secondary);
}
.dashboard-stats .contract-stats .stat-item .stat-value {
  color: var(--color-secondary);
}

@media (max-width: 768px) {
  .dashboard-stats .stats-card {
    min-width: 100%;
  }
  .dashboard-stats .stats-card .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .dashboard-stats .stats-card .stats-grid {
    grid-template-columns: 1fr;
  }
}

/*# sourceMappingURL=main.css.map */