/* Base Formatierung */
* {
  max-width: 100%;
  box-sizing: border-box;
}

html {
  font-size: var(--base_font);
  height: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: aller, sans-serif;
  font-weight: 400;
  font-style: normal;
  margin: 0;
  background-color: var(--schwarz-05);
  /*height: 100%;*/
}

h1,
h3 {
  text-align: center;
  color: var(--weiss);
  text-transform: uppercase;
  font-family: bebas-neue-by-fontfabric, sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* -- Typographie -- */
.ty_small {
  font-size: calc(var(--base_font) * 0.7);
}

.ty_larger {
  font-size: larger;
}

.ty_bold {
  font-weight: 800;
}

.ty_italic {
  font-style: italic;
}

.ty_underlined {
  text-decoration: underline;
}

.ty_none {
  display: none;
}

.zentriert,
.ty_zentriert {
  text-align: center !important;
}

.ty_right {
  text-align: right !important;
}

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

.ty_left {
  text-align: left !important;
  text-align-last: left !important;
}

.ty_link:hover {
  text-decoration: underline;
  color: var(--ty_blau);
}

.l_vertical_super {
  vertical-align: super !important;
}

.l_vertical_sub {
  vertical-align: sub;
}

.l_vertical_middle {
  vertical-align: middle;
}

.l_vertical_tbottom {
  vertical-align: text-bottom;
}

a {
  text-decoration: none;
  text-align: right;
  color: var(--schwarz);
}

table {
  width: 100%;
}

svg {
  height: 100%;
  vertical-align: baseline;
  cursor: pointer;
}

input[type="checkbox"] {
  vertical-align: middle;
  height: auto;
  width: auto;
}

input[type="search"] {
  background-color: var(--schwarz-5);
  border-radius: 5px;
  border: 1px solid var(--schwarz-50);
}

.l_inline {
  display: contents;
}

.l_right {
  float: right;
  margin-bottom: 5px;
}

.l_left {
  float: left;
  margin-bottom: 5px;
}

.l_float_r {
  float: right;
}

.l_clear {
  clear: both;
  margin-top: 5px;
}

.l_100 {
  width: 100%;
}

.l_eingeloggt {
  position: sticky;
  bottom: 0px;
  color: var(--schwarz-85);
  background: var(--schwarz-5);
  padding: 10px;
}

.margin_minus,
.l_margin_minus {
  margin-top: -0.4em;
}

.margin0,
.l_margin_0 {
  margin-top: 0 !important;
}

.l_0_margin {
  margin: 0 !important;
}

.l_margin_10 {
  margin: 10px;
}

.l_margin_b20 {
  margin-bottom: 20px !important;
}

.l_margin_r2em {
  margin-right: 2em;
}

.padding_10,
.l_padding_10 {
  padding: 10px !important;
}

.l_padding_left_10 {
  padding-left: 10px !important;
}

.l_padding_right_40 {
  padding-right: 40px;
}

.padding_8,
.l_padding_8 {
  padding: 8px !important;
}

.pad_b_20,
.l_padding_button_10 {
  padding-bottom: 20px;
}

.l_block {
  display: block;
  /*margin-top: 10px;*/
  border-radius: 0 0 5px 5px;
  padding: 5px 5px 5px 20px;
}

.l_block_table {
  display: block;
  border-radius: 5px;
  padding: 15px 10px 10px 10px;
  background-color: var(--hellgrau);
  margin-bottom: 5px;
}

.sp_gesperrt {
  cursor: not-allowed;
}

.l_flexbox {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  margin-bottom: 15px;
}

.l_flexbox_row {
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  margin-bottom: 15px;
  flex-wrap: wrap;
  align-items: center;
}

.kinologo_check_quad {
  width: 100%;
  height: fit-content;
  outline: 1px solid black;
  padding: 5px;
  max-width: fit-content;
}

.kinologo_check_recht {
  width: 100%;
  height: fit-content;
  outline: 1px solid black;
  padding: 5px;
  max-width: fit-content;
}

.l_inhalt_flex {
  flex-basis: 30%;
  margin: 2px 10%;
}

.l_flexbox button {
  margin-bottom: 5px;
  border: 1px solid var(--schwarz);
}

button.no_border {
  border: 1px solid transparent;
}

/* ------------------------------------- Layout -----------------------------------------*/
/* Seitenaufteilung [Header / Content / Footer] */
.l_ansicht,
.l_ansicht_ohne_footer {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-row-gap: 5px;
  height: 100%;
}

.l_ansicht {
  grid-template-rows: 4em 1fr 4em;
}

.l_ansicht_ohne_footer {
  grid-template-rows: 4em 1fr;
}

/* -------------------- Header -------------------- */
/* Header links - Icons */
.l_header {
  grid-column: 1 / 4;
  grid-row: 1 / 2;
  background-color: var(--unifilm-rot);
  padding: 5px;
  transition: margin-left 0.8s ease-in-out, padding-left 0.8s ease-in-out,
    padding-right 0.5s ease-in-out;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  position: sticky;
  top: 0px;
  z-index: 99;
  /*width: 99.35vw;*/
}

.l_header_links {
  /*flex-basis: 20%;
  vertical-align: sub;*/
  font-size: calc(var(--base_font) * 1.8);
  margin: auto 0;
}

.icon_option,
.sp_icon_option {
  height: 80%;
  margin: auto;
  padding: 5px;
  display: inline-block;
  color: var(--weiss);
}

.ty_pagename {
  margin: auto;
  /*flex-basis: 40%;*/
  overflow: hidden;
  font-size: calc(var(--base_font) * 2.2);
  /*margin-top: -0.05em;*/
}

.js_edit {
  margin: auto;
  padding: 5px;
  width: 50px;
  height: 40px;
  display: inline-block;
}

.timer,
.sp_timer {
  font-size: var(--font_80);
  vertical-align: middle;
  color: var(--weiss);
}

/* Druckansicht Spielplan */
.l_header_druckansicht {
  margin: auto 0;
}

.l_header_druckansicht label {
  color: var(--weiss);
  vertical-align: middle;
}

/* Warn-Icons */
.icon_aktiv {
  display: inline;
  vertical-align: baseline;
  font-size: 0.9em;
}

.icon_inaktiv {
  display: none;
}

/* Link-Icon */
.link_header {
  padding: 3px;
  color: var(--unifilm-rot);
}

.fa-layers {
  font-size: 1.8em;
  vertical-align: baseline;
  height: auto;
}

.fa-square {
  color: var(--weiss);
}

.fa-layers:hover .fa-square {
  color: var(--unifilm-rot);
}

.fa-layers:hover .fa-link {
  color: var(--weiss);
}

.fa-window-close {
  min-width: 1em;
}

/* Header rechts - Auswahl und Suche */
.l_leiste-auswahl,
.l_leiste_auswahl {
  /*flex-basis: 35% ;*/
  text-align: right;
  overflow: hidden;
  margin-top: auto;
  margin-bottom: auto;
  min-width: 250px;
}

.lable_o-leiste,
.l_lable_oleiste,
#id_kino,
.l_leiste-auswahl label,
.l_leiste_auswahl label {
  font-size: var(--base_font);
  padding: 5px;
  border: hidden;
  background-color: transparent;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  color: var(--weiss);
  vertical-align: sub;
}

#id_kino {
  max-width: 70px;
  max-height: 20px;
  font-family: aller, sans-serif;
  font-weight: 400;
  font-style: normal;
  color: var(--weiss);
  text-align: right;
}

.l_leiste-auswahl input,
.l_leiste-auswahl select,
.l_leiste_auswahl input,
.l_leiste_auswahl select {
  border: hidden;
  border-radius: 0.4em;
  width: 120px !important;
  /*vertical-align: sub;*/
  vertical-align: bottom;
  height: 1.7em;
  font-size: var(--base_font);
  padding: 3px 6px 4px 6px;
  background-color: var(--weiss);
}

.l_leiste-auswahl select,
.l_leiste_auswahl select {
  width: 150px;
}

.id_film {
  width: 80px !important;
}

.id_kino {
  width: 50px;
  text-align: right;
  padding-top: 5px;
}

option {
  font-size: var(--font_80);
  color: var(--schwarz);
}

.check_o-leiste,
.check_oleiste {
  margin-right: -5px;
}

.such-feld,
.sp_suchfeld {
  border: 1px solid;
  border-color: var(--schwarz-30);
  border-radius: 5px;
  font-family: aller, sans-serif;
  font-weight: 400;
  font-style: normal;
  padding: 5px;
  vertical-align: baseline;
}

.btn_header_pfeile {
  border-radius: 5px;
  background-color: var(--weiss);
  color: var(--schwarz-85);
  border: hidden;
  vertical-align: sub;
  font-size: var(--base_font);
  padding: 3px 6px 4px 6px;
  margin-right: 2px;
  font-family: aller, sans-serif;
  font-weight: 400;
  font-style: normal;
  height: 1.7em;
}

.btn_header_pfeile:hover {
  background-color: var(--schwarz-85);
  color: var(--weiss);
}

.btn_fake,
.button_fake {
  border: 1px solid;
  border-color: var(--schwarz-30);
  border-radius: 5px;
  font-family: aller, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: var(--font_80);
  padding: 5px;
  /*vertical-align: text-bottom;*/
  /*min-width: 55px;*/
  display: inline-block;
  text-align: center;
  vertical-align: bottom;
}

.btn_fake svg {
  font-size: var(--base_font);
}

.btn_a {
  vertical-align: super;
}

/* --- Header Abrechnunges Übersicht für Kinos ---*/
#kopfzeile {
  background: var(--hellgrau);
  display: flex;
  justify-content: space-between;
  margin-bottom: 3em;
  width: 100%;
  height: 5em;
  grid-column: 1/4;
}

.logos {
  max-height: 60%;
  margin: auto 2%;
  max-width: 25%;
}

.ty_h1_semsterformular {
  color: var(--unifilm-rot);
  margin: auto;
  font-family: bebas-neue-by-fontfabric, sans-serif;
  font-size: 2.5em;
  font-weight: bold;
}

/* ------------------** NAVIGATION **------------------ */
/* ----- >> Primär Naivation << ------- */
.nav_side {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  background-color: var(--schwarz-90);
  overflow-x: hidden;
  padding-top: 60px;
  transition: 0.8s;
  font-size: var(--base_font);
}

/* Navigation Inhalt */
.dropdown-container a,
.dropdown-btn,
.btn-logout,
.link_logout {
  font-size: calc(var(--base_font) * 1.2);
  text-align: left;
  text-decoration: none;
  padding: 8px 8px 8px 20px;
  display: block;
  width: 100%;
  border: none;
  color: var(--schwarz-50);
  background: none;
  cursor: pointer;
  outline: none;
  transition: 0.5s;
}

.nav_side a:hover,
.dropdown-btn:hover,
.btn-logout:hover {
  color: var(--schwarz-5);
}

/* Close button */
.nav_side .btn_close {
  font-size: calc(var(--base_font) * 2.2);
  position: absolute;
  top: 10px;
  left: 220px;
  color: var(--schwarz-50);
  cursor: pointer;
  transition: 0.5s;
}

/* Logout Link */
.link_logout .btn-logout {
  margin-bottom: 50px;
  padding: 0;
}

.fa-sign-out {
  float: right;
  padding-right: 8px;
  font-size: calc(var(--base_font) * 1.8);
}

/* Logo Link */
.sp_a_logo {
  padding: 0 !important;
}

.logo {
  width: 0px;
  height: auto;
  position: fixed;
  top: 0px;
  padding: 0;
  transition: 0.8s;
}

.logo_open {
  width: 200px;
  height: auto;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-right: 35px;
  background: var(--schwarz);
}

.logo_close {
  width: 0px;
  height: auto;
}

/* Ansichten Kategorien */
.dropdown-btn

/* --- Add an active class to open Ansichten Kategorien */
.active {
  background-color: var(--dunkelgrau);
  color: var(--schwarz-90);
}

/* --- Dropdown container (hidden by default) */
.dropdown-container {
  display: none;
  background-color: var(--schwarz-85);
  padding-left: 8px;
}

/* Caret down icon */
.dropdown-btn .fa-caret-down {
  font-size: calc(var(--base_font) * 1.8);
  float: right;
  padding-left: 8px;
  margin-top: 3px;
  height: 0.5em;
  transform: rotate(180deg);
  transition: 0.6s;
}

.active .fa-caret-down {
  padding-right: 8px;
  padding-left: 0;
  transform: rotate(0deg);
  transition: 0.6s;
}

/* Ansichten Links */
.dropdown-container a {
  font-size: var(--base_font) * 0.9;
}



/* ----- >> Sekundär Naivation (Kinoprofil) << ------- */
.nav_2 {
  margin: auto auto 5px auto;
  text-align: center;
  padding: 10px;
  background-color: var(--schwarz-85);
  position: sticky;
  top: 3.8em;
  z-index: 1;
  border-radius: 0 0 5px 5px;
}

.nav_2_link {
  padding: 1px;
  color: var(--weiss);
  word-break: break-all;
  display: block;
  text-align: center;
}

.nav_2_link:hover {
  color: var(--schwarz-80);
  background-color: var(--schwarz-10);
}

.nav_2 table {
  border-collapse: collapse;
  table-layout: fixed;
}

.nav_2_tr td {
  border-left-color: var(--schwarz-10);
  border-left-style: solid;
  border-left-width: 1px;
}

.nav_2_tr td:first-child {
  border-left-style: hidden;
}

/* -------------------- Inhalt -------------------- */
/* Statusleiste über den ausklapbaren Blöcken*/
.l_status {
  text-align: left;
  background-color: var(--hellgrau);
  border-radius: 5px;
  padding: 15px;
  width: 100vw;
}

.l_grid_3spal,
.l_grid_3gspal {
  margin-bottom: 5px;
  background-color: var(--hellgrau);
  border-radius: 5px;
  padding: 15px;
  width: 100vw;
}

.l_perm_info,
.l_perm_sp,
.l_sticky {
  position: sticky;
  /*top: 50px;*/
  top: 4em;
  z-index: 2;
  width: 100vw;
}

.l_perm_info {
  border-bottom: solid 3px var(--schwarz-85);
  background-color: var(--hellgrau);
  padding: 5px;
  border-radius: 5px;
}

.l_perm_sp {
  border-bottom: solid 3px var(--schwarz-85);
  background-color: var(--hellgrau);
  height: 4em;
  max-height: 4em;
  overflow: hidden;
  display: flex;
  align-items: center;
  z-index: 10;
}

.l_fitler_sp {
  top: 3.35em;
  background-color: var(--hellgrau);
  color: var(--schwarz-85);
  padding: 5px;
  display: flex;
  flex-flow: row wrap;
  /*justify-content: space-evenly;*/
  margin-bottom: 5px;
  width: 100vw;
}

.l_fitler_sp label {
  margin: 5px;
  flex-grow: 1;
}

.btn_filter {
  position: absolute !important;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  width: 1px;
  border: 0;
  overflow: hidden;
}

input .btn_filter {
  position: absolute;
  left: -9999px;
}

.btn_filter:checked + label,
.l_fitler_sp button {
  background-color: var(--blau);
  border: solid 1px var(--blau);
  border-radius: 5px;
  color: var(--schwarz-85);
  padding: 2px 20px;
  text-align: center;
  font-family: aller, sans-serif;
  font-size: var(--font_80);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
  transition: all 0.5s ease-in-out;
  vertical-align: 0.3em;
  display: inline-block;
}

.btn_filter:not(:checked) + label {
  background-color: var(--hellgrau);
  border-color: var(--schwarz-85);
  border-radius: 5px;
  color: var(--schwarz-85);
  padding: 2px 20px;
  text-align: center;
  font-family: aller, sans-serif;
  font-size: var(--font_80);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
  transition: all 0.5s ease-in-out;
  vertical-align: 0.3em;
  display: inline-block;
}

.l_filter_sp button:hover,
.btn_filter label:hover,
.btn_fake:hover,
.button_fake:hover {
  background-color: var(--schwarz-85);
  color: var(--schwarz-5);
}

.l_inline_grid {
  display: inline-grid;
  grid-auto-rows: 3em;
}

.l_inline_grid p {
  margin: 0;
  justify-self: center;
  align-self: center;
}

/* Content */
.l_main, .l_main_80 {
  transition: margin-left 0.8s;
  /* padding: 20px 150px 20px 150px; */
  padding: 1% 3%;
  grid-column: 1 / 4;
  grid-row: 2 / 3;
  width: 99.3vw;
  margin: 0 auto;
}

.kasten {
  background-color: var(--schwarz-10);
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 10px;
}

/* Öffnen und Schließen der Navigation */
.nav_open {
  width: 250px;
}

.nav_close {
  width: 0;
}

.l_margin-l250 {
  margin-left: 250px !important;
  padding-right: 80px;
  padding-left: 2px !important;
  width: 90vw;
}

.l_margin-l0 {
  margin-left: 0px;
}

.l_main_60 {
  transition: margin-left 0.8s;
  /* padding: 20px 150px 20px 150px; */
  padding: 1% 5%;
  grid-column: 1 / 4;
  grid-row: 2 / 3;
  margin: 0 auto;
  min-width: 60%;
}

@media (min-device-width: 1150px) {
  .l_main_60 {
    width: 60%;
  }
  .l_main_80 {
    width: 80%;
  }
}

.l_main_50 {
  transition: margin-left 0.8s;
  /* padding: 20px 150px 20px 150px; */
  padding: 1% 5%;
  grid-column: 1 / 4;
  grid-row: 2 / 3;
  margin: 0 auto;
  min-width: 50%;
}

.l_main_40 {
  transition: margin-left 0.8s;
  /* padding: 20px 150px 20px 150px; */
  padding: 1% 5%;
  grid-column: 1 / 4;
  grid-row: 2 / 3;
  margin: 0 auto;
  min-width: 40%;
}

.l_main h1,
.l_main_80 h1,
.l_main_60 h1,
.l_main_50 h1,
.l_main_40 h1 {
  color: var(--unifilm-rot);
  margin-top: 10px;
}

/* Content-Layout */
.l_grid-inhalt {
  display: grid;
  grid-template-rows: auto;
  grid-template-areas: "block side";
  grid-template-columns: 69.5% 30%;
  grid-column-gap: 0.5%;
  grid-row-gap: 5px;
  margin-top: 20px;
}

.l_grid_3spal {
  display: grid;
  grid-template-columns: 40% 19% 39%;
  grid-gap: 1%;
}

.l_grid_3gspal {
  display: grid;
  grid-template-columns: 20% 29% 49%;
  grid-gap: 1%;
  margin-top: 5px;
}

.l_grid_2spal {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-row-gap: 5px;
}

.l_content_header { 
  grid-area: 1 / 1 / 2 / 6;
  background-color: var(--schwarz-30);
  padding: 20px;
}

.l_spalte_1-2 { 
  grid-area: 2 / 1 / 3 / 2;
  padding: 20px;  
}

.l_spalte_2-2 { 
  grid-area: 2 / 2 / 3 / 3;
  padding: 20px;  
}

/* ------- Sidebar ------- */
.sidebar,
.l_sidebar {
  grid-area: side;
  display: flex;
  flex-flow: column;
  align-self: start;
}

.ty_side {
  font-size: var(--font_80);
}

.side-titel-text {
  margin: 5px;
}

#sidebar details {
  min-width: 315px;
}

.l_side_1spaltig {
  padding: 5px;
}

/* ------- Inhalt ------- */
/*Ausklappbare Blöcke*/
.l_block-titel,
.l_block_titel {
  background-color: var(--schwarz-85);
  color: var(--weiss);
  border-radius: 5px;
  padding: 5px;
  overflow: auto;
}

.l_main_bloecke {
  grid-area: block;
  align-self: start;
}

details {
  margin-bottom: 5px;
}

details:focus {
  outline: none;
}

summary:focus {
  outline: none;
}

details.ausgegraut {
  border-radius: 5px;
}

details section {
  background-color: var(--hellgrau);
  border-radius: 0 0 5px 5px;
  padding: 5px 5px 5px 20px;
}

.l_main_bloecke > details {
  min-width: 500px;
}

/* Grid in dem ausklappbaren Block */
.l_block_2spaltig {
  display: grid;
  grid-template-columns: 49.8% 49.8%;
  grid-column-gap: 0.4%;
  grid-row-gap: 5px;
}

.l_block_2_1spaltig {
  display: grid;
  grid-template-columns: 64.8% 34.8%;
  grid-column-gap: 0.4%;
  grid-row-gap: 5px;
}

.l_block_3spaltig {
  display: grid;
  grid-template-columns: 31% 31% 31%;
  grid-column-gap: 0.4%;
  grid-row-gap: 5px;
  margin-bottom: 5px;
}

.l_fzb_2spaltig {
  display: grid;
  grid-template-columns: 20% 60%;
  grid-column-gap: 0.4%;
  grid-row-gap: 5px;
  width: 100vw;
  border-radius: 5px;
}

.l_block_1spaltig {
  display: grid;
  grid-template-columns: 79.6% 20%;
  grid-template-rows: auto auto auto auto auto auto auto auto auto auto;
  grid-column-gap: 0.4%;
  grid-row-gap: 5px;
  padding: 1em;
  justify-self: start;
  align-self: start;
}

.ty_unter-titel,
.ty_unter_titel {
  margin: 0px;
  font-family: bebas-neue-by-fontfabric, sans-serif;
  font-size: calc(var(--base_font) * 1.5);
  color: var(--schwarz-60);
}

/* Unterblöcke */
.l_content-unter-block,
.l_content_unterblock {
  padding: 1em;
  justify-self: start;
  align-self: start;
  clear: both;
  min-height: 120px;
}

.l_kcheck-unter-block {
  padding: 1em;
  justify-self: center;
  align-self: center;
  clear: both;
  min-height: 120px;
  /*Designfloat*/
}

.l_content_grid2 {
  grid-column-start: 1;
  grid-column-end: 3;
  padding: 1em;
}

/* --------------- Layout der Felder -------------- */
table {
  border-spacing: 5px;
}

/* Verschiedene Feld-größen */
.g_feld,
.g_feld-halb,
.g_feld-drittel,
.g_feld-doppelt,
.g_feld-viertel,
.g_feld-18,
.g_feld-22,
.g_feld-45,
.g_feld-50,
.g_feld_max {
  border-radius: 5px;
  background-color: var(--weiss);
  height: 26px;
  font-size: var(--font_80);
  padding: 5px;
  word-break: break-word;
}

.g_feld-50 {
  width: 50em;
}

.g_feld-45 {
  width: 45em;
}

.g_feld-doppelt {
  width: 40em;
  max-width: 40em;
}

.g_feld {
  width: 30em;
  max-width: 30em;
}

.g_feld-22 {
  width: 22em;
  max-width: 22em;
}

.g_feld-18 {
  width: 18em;
  max-width: 18em;
}

.g_feld-halb {
  width: 15em;
}

.g_feld-12 {
  width: 12em;
}

.g_feld-drittel {
  width: 10em;
}

.g_feld-viertel {
  width: 5em;
}

.g_feld-btn {
  padding: 0;
  background-color: transparent;
  vertical-align: top;
  text-align: right;
}

/* Verschiedene Funktionen */
td > input,
input[type="date"],
input[type="number"],
.dropdown-feld,
select {
  border: hidden;
  width: 90%;
  background-color: inherit;
  font-size: var(--font_80);
  font-family: aller, sans-serif;
  font-weight: 400;
  font-style: normal;
  padding: 0;
  margin: 0;
  /*height: 100%;*/
}

td > input,
input[type="number"],
.dropdown-feld,
select {
  width: 98%;
}

input[type="date"] {
  width: 90%;
}

input:disabled {
  background-color: transparent;
}

.dropdown-feld,
select {
  width: 99%;
}

input:focus {
  border: hidden;
}

input[type="date"],
input[type="number"] {
  margin: 0;
}

input[type="date"] {
  max-width: 90px;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  margin: 0;
  padding-left: 0;
}

.g_feld > input[type="date"] {
  width: 95%;
  max-width: 29em;
  padding-right: 3px;
}

.g_feld-drittel > input[type="number"] {
  width: 95%;
}

.g_feld-halb > input[type="date"] {
  width: 92%;
  max-width: 14.5em;
}

.dropdown-feld {
  margin-left: -4px;
  margin-right: -4px;
}

.dropdown-feld:disabled,
input:disabled {
  opacity: 1;
  color: var(--schwarz);
}

.select_fb_kino {
  background-color: var(--schwarz-10);
  width: 100px;
  height: 26px;
  font-size: var(--font_80);
  padding: 5px;
  word-break: break-word;
  border-radius: 5px;
}

/*Feldname - verschiedene Größen*/
.feld-name,
.g_feld_name {
  width: 10em;
  min-width: 10em;
}

.feld-name_klein,
.g_feld_name_klein {
  width: 5em;
}

.feld-name_gross,
.g_feld_name_gross {
  width: 12em;
}

.feld-icon,
.g_feld_icon {
  width: 0.8em;
  max-width: 0.8em;
}

/* -------------------- Tabellen -------------------- */
table.display {
  font-size: var(--font_80);
}

/* -------------------- Footer -------------------- */
.l_footer {
  grid-column: 1 / 4;
  grid-row: 3 / 4;
  background-color: var(--unifilm-rot);
  margin: 0;
}

/* ------------------------------------- einzelne Elemente -----------------------------------------*/
.mint,
.sp_mint {
  padding-left: 2em;
  margin-bottom: -2px;
}

.mint > p,
.sp_mint > p,
.fachbereich > p,
.sp_mint_bereich > p {
  margin: 0;
}

.mint > p:last-child,
.sp_mint > p:last-child {
  margin-bottom: 0.5em;
}

/*  -------------------- ICONS  -------------------- */
.fa-trash-alt,
.fa-palette {
  color: var(--schwarz-30);
  margin-bottom: 0.1em;
}

.fa-trash-alt:hover {
  color: var(--rot);
}

.mail,
.sp_mail {
  float: right;
  font-size: calc(var(--base_font) * 1.5);
  padding-right: 5px;
}

.mail_icon {
  color: var(--schwarz-50);
}

.icon_mail_stack {
  margin-right: 5px;
}

.link_to_action {
  padding-right: 5px;
}

.feld-name > .mail,
.feld-name > .sp_mail,
.g_feld_name > .mail,
.g_feld_name > .sp_mail {
  padding-right: 7px;
  float: right;
  font-size: var(--base_font);
}

.feld-name > .mail_icon,
.g_feld_name > .mail_icon {
  color: var(--schwarz-50);
  padding-right: 7px;
  float: right;
  font-size: var(--base_font);
}

.mail_icon:hover,
.mail_icon:hover svg,
.copy_icon:hover,
.copy_icon_bilder:hover,
.link_icon:hover {
  color: var(--schwarz-85);
}

.copy_icon {
  color: var(--schwarz-50);
  padding-right: 7px;
  float: right;
}

.copy_icon:active {
  color: var(--leucht_gruen);
}

.copy_icon_bilder {
  color: var(--schwarz-50);
  padding-right: 5px;
}

.link_icon {
  color: var(--schwarz-50);
}

.feld-icon .fa-lock-open-alt,
.g_feld_icon .fa-lock-open-alt {
  color: var(--schwarz-30);
}

.fa-stack {
  font-size: calc(var(--base_font) * 0.8) !important;
  width: 1.8em;
}

.fa-slash {
  font-size: calc(var(--base_font) * 0.6) !important;
}

.non-edit {
  float: right;
  margin-right: 0.5em;
  margin-top: -0.1em;
}

.fa-external-link-alt {
  font-size: 90%;
}

.icon_tab_header {
  width: 2em !important;
  height: 1.5em;
}

.icon_num {
  width: 0.8em !important;
  color: var(--schwarz-50);
}

.icon_num_text {
  font-weight: 900;
  font-size: x-small;
}

/* --- Dropdown und Input in Einstelungs-Leiste --*/
.select_suche {
  border-radius: 4px;
  background-color: var(--schwarz-10) !important;
  color: var(--schwarz);
  border: hidden;
  width: 10em !important;
  display: inline;
  padding: 5px 2px !important;
  font-size: var(--font_80);
  font-family: aller, sans-serif;
  /*text-align: center;*/
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
  /*vertical-align: top;*/
  vertical-align: bottom;
}

/*  -------------------- BUTTON  -------------------- */
button {
  font-size: var(--font_80);
  font-family: aller, sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* --- Slide-Button (Radiobutton) --- */
button:focus {
  outline: none;
}

.btn_switch-field input {
  position: absolute !important;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  width: 1px;
  border: 0;
  overflow: hidden;
}

.btn_switch-field label {
  background-color: var(--schwarz-30);
  color: var(--schwarz-5);
  font-size: var(--font_80);
  font-family: aller, sans-serif;
  text-align: center;
  padding: 5px 2px;
  margin-right: -7px;
  /*    border: 1px solid rgba(0, 0, 0, 0.2);*/
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
  transition: all 0.5s ease-in-out;
  vertical-align: 0.3em;
  display: inline-block;
}

/*
td .btn_switch-field label {
  border: solid 0.2px var(--schwarz-30);
}*/
.btn_switch-field label:hover {
  cursor: pointer;
}

.btn_switch-field input:checked + label {
  background-color: var(--schwarz-85);
  /* box-shadow: none; */
}

.btn_switch-field label:first-of-type {
  border-radius: 4px 0 0 4px;
}

.btn_switch-field label:last-of-type {
  border-radius: 0 4px 4px 0;
  margin-right: 0;
}

.btn_switch-field label:only-of-type {
  border-radius: 4px 4px 4px 4px;
}

.btn_switch_alone label {
  border-radius: 4px !important;
}

.button_padd {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

.button_br_10-5 {
  width: 10.5em;
}

.btn_breite_10,
.button_br_10 {
  width: 10em;
}

.btn_breite_9,
.button_br_9 {
  width: 9em;
}

.btn_breite_8,
.button_br_8 {
  width: 8em;
}

.btn_breite_7-5 {
  width: 7.5em;
}

.btn_breite_6-2,
.button_br_6-2 {
  width: 6.2em;
}

.btn_breite_4-8 {
  width: 4.8em;
  padding: 4px 6px;
}

.btn_breite_3-5,
.button_breite_3-5 {
  width: 3.5em;
}

/* edit button */
.btn_breite_2-9 {
  width: 2.9em;
}

/* Zahlen */
.btn_breite_2-6 {
  width: 2.6em;
}

.btn_vor {
  border-radius: 5px;
  border: hidden;
  float: right;
  background-color: var(--schwarz-30);
  color: var(--schwarz);
  padding: 1px 10px;
  margin-right: 5px;
  font-family: aller, sans-serif;
  font-size: var(--base_font);
  width: 7em;
}

.btn_reset {
  border-radius: 5px;
  border: hidden;
  float: right;
  padding: 3.5px 8px;
  background-color: var(--schwarz-5);
  color: var(--schwarz-60);
  margin-right: 5px;
  margin-left: 5px;
  font-family: aller, sans-serif;
  font-size: var(--base_font);
}

.btn_vor:focus,
.btn_reset:focus {
  border: hidden;
}

.btn_vor:hover,
.btn_reset:hover {
  background-color: var(--schwarz-60);
  color: var(--schwarz-5);
}

.btn_fb_copy {
  color: var(--schwarz-50);
  padding-left: 1px;
}

.btn_fb_copy:hover {
  color: var(--schwarz-85);
}

.btn_fb_copy:active {
  color: var(--leucht_gruen);
}

.btn_copy:active {
  background-color: var(--leucht_gruen);
}

/*.btn:hover {
  background-color: var(--schwarz-50);
  color: var(--schwarz-5);
}*/
/*mit Farben auf id*/
#pd-fertig:checked + label,
#pd-fertig_2:checked + label,
#fsk_12:checked + label,
#amazon_george:checked + label,
#amazon_tony:checked + label,
#amazon_thomas:checked + label,
#amazon_hermine:checked + label,
#amazon_elton:checked + label,
#amazon_pipi:checked + label {
  background-color: var(--gruen);
  /* box-shadow: none; */
}

.gruen:checked + label {
  background-color: var(--gruen) !important;
  /* box-shadow: none; */
}

.hell_gruen:checked + label {
  background-color: var(--hell_gruen) !important;
  /* box-shadow: none; */
  color: var(--schwarz-60);
}

#fsk_16:checked + label {
  background-color: var(--blau);
  /* box-shadow: none; */
}

.blau:checked + label {
  background-color: var(--blau) !important;
  /* box-shadow: none; */
}

#linzenz-juv:checked + label,
#linzenz-a:checked + label,
#linzenz-n:checked + label,
#linzenz-j:checked + label {
  background-color: var(--blau);
}

#neu:checked + label,
#neu_2:checked + label,
#fsk_18:checked + label {
  background-color: var(--rot);
  /* box-shadow: none; */
}

.rot:checked + label {
  background-color: var(--rot) !important;
  /* box-shadow: none; */
}

#Nur_Stream_Ja_Nein:checked + label {
  background-color: var(--orange);
  /* box-shadow: none; */
}

.orange:checked + label {
  background-color: var(--orange) !important;
  /* box-shadow: none; */
}

#check:checked + label,
#check_2:checked + label,
#fsk_6:checked + label,
#btn_state_editierbar_kurz:checked + label {
  background-color: var(--hell_gelb);
  /* box-shadow: none; */
  color: var(--schwarz-60);
}

.gelb:checked + label {
  background-color: var(--hell_gelb) !important;
  /* box-shadow: none; */
  color: var(--schwarz);
}

.hell_gelb:checked + label {
  background-color: var(--hell_gelb) !important;
  /* box-shadow: none; */
  color: var(--schwarz-60);
}

#fsk_0:checked + label {
  background-color: var(--weiss);
  /* box-shadow: none; */
  color: var(--schwarz);
}

.weiss:checked + label {
  background-color: var(--weiss) !important;
  /* box-shadow: none; */
  color: var(--schwarz);
}

.lila:checked + label {
  background-color: var(--lila) !important;
  /* box-shadow: none; */
}

.braun:checked + label {
  background-color: var(--braun) !important;
  /* box-shadow: none; */
}

/* Button - Action */
.btn_filmprofil,
.button_filprofil,
.button_kinocheck,
.button_kinocheck_2,
.btn_hptool,
.btn_link,
.button_druck {
  text-align: center;
  background-color: var(--schwarz-30);
  border: hidden;
  border-radius: 5px;
  padding: 5px;
  width: 120px;
  vertical-align: middle;
  cursor: pointer;
}

.btn_hptool {
  margin-left: 90px;
  padding: 5px 10px;
  font-family: aller, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: var(--font_80);
}

.button_druck {
  padding: 5px 10px;
  font-family: aller, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: var(--font_80);
  color: var(--schwarz-60);
  width: auto;
  margin-left: 5px;
  margin-top: 3px;
}

.button_druck:hover {
  background-color: var(--schwarz-2);
  color: var(--schwarz-85);
}

.button_kinocheck {
  width: 120px;
  height: 35px;
  margin-right: 5px;
}

.button_kinocheck_2 {
  width: 70px;
  height: 35px;
}

/*.btn_hinzufuegen {
  width: 50px;
  margin-right: 15px;
}*/
/*td .btn_filmprofil,
td .button_filprofil {
  margin-left: 2px;
}*/
/*td .button_kinocheck {
  margin-left: 2px;
}*/
.btn_filmprofil:hover,
.button_filprofil:hover,
.button_kinocheck:hover,
.button_kinocheck_2:hover,
.btn_hptool:hover,
.btn_link:hover {
  background-color: var(--schwarz-85);
  color: var(--weiss);
}

.button_to_check {
  background-color: var(--rot);
  color: var(--weiss);
}

a:hover {
  color: inherit;
}

.btn_nur_stream:hover {
  background-color: var(--orange);
  color: var(--weiss);
}

.btn_bild_name {
  width: 150px;
}

.btn_filmliste {
  width: 50%;
  float: right;
}

/* << und >> Button*/
.auswahl_filmprofil {
  text-align: right;
  color: var(--weiss);
}

/*  -------------------- CHECKBOX  -------------------- */
/* ------------ Checkbox Leiste ------------ */
/* Base for label styling */
.check_o-leiste:not(:checked),
.check_o-leiste:checked,
.check_oleiste:not(:checked),
.check_oleiste:checked {
  position: absolute;
  left: -9999px;
}

.check_o-leiste:not(:checked) + label,
.check_o-leiste:checked + label,
.check_oleiste:not(:checked) + label,
.check_oleiste:checked + label {
  position: relative;
  padding-left: 1.95em;
  cursor: pointer;
}

/* checkbox aspect */
.check_o-leiste:not(:checked) + label:before,
.check_o-leiste:checked + label:before,
.check_oleiste:not(:checked) + label:before,
.check_oleiste:checked + label:before {
  content: "";
  position: absolute;
  left: 0.5em;
  top: 0.4em;
  width: 0.75em;
  height: 0.75em;
  border: 2px solid var(‐‐schwarz‐30);
  border-radius: 4px;
}

/* checked mark aspect */
.check_o-leiste:not(:checked) + label:after,
.check_o-leiste:checked + label:after,
.check_oleiste:not(:checked) + label:before,
.check_oleiste:checked + label:before {
  content: "\f00c";
  position: absolute;
  top: 0.4em;
  left: 0.7em;
  line-height: 0.8;
  transition: all 0.2s;
  font-family: "Font Awesome 5 Pro", "Arial Unicode MS", Arial, sans-serif;
}

/* checked mark aspect changes */
.check_o-leiste:not(:checked) + label:after,
.check_oleiste:not(:checked) + label:after {
  opacity: 0;
  transform: scale(0);
}

.check_o-leiste:checked + label:after,
.check_oleiste:checked + label:after {
  opacity: 1;
  transform: scale(1);
}

/* disabled checkbox */
.check_o-leiste:disabled:not(:checked) + label:before,
.check_oleiste:disabled:not(:checked) + label:before {
  /* box-shadow: none; */
  border-color: var(--schwarz-30);
  background-color: var(--schwarz-10);
}

.check_o-leiste:disabled:checked + label:before,
.check_oleiste:disabled:checked + label:before {
  /* box-shadow: none; */
  border-color: var(--schwarz-30);
  background-color: var(--schwarz-10);
}

.check_o-leiste:disabled:checked + label:after,
.check_oleiste:disabled:checked + label:after {
  color: var(--schwarz-50);
}

.check_o-leiste:disabled + label,
.check_oleiste:disabled + label {
  color: var(--schwarz-30);
}

/* ------------ Checkbox Content ------------ */
/* Base for label styling */
.check_main:not(:checked),
.check_main:checked {
  position: absolute;
  left: -9999px;
}

.check_main:not(:checked) + label,
.check_main:checked + label {
  position: relative;
  padding-left: 1.95em;
  cursor: pointer;
  vertical-align: text-top;
}

td .check_main:not(:checked) + label,
td .check_main:checked + label {
  /*vertical-align: middle;*/
  vertical-align: text-bottom;
}

/* checkbox aspect */
.check_main:not(:checked) + label:before,
.check_main:checked + label:before {
  content: "";
  position: absolute;
  left: 0.5em;
  top: 0.15em;
  width: 0.75em;
  height: 0.75em;
  border: 2px solid var(--schwarz-30);
  border-radius: 4px;
}

.check_main:not(:checked) + label.ty_unter-titel:before,
.check_main:checked + label.ty_unter-titel:before,
.check_main:not(:checked) + label.ty_unter_titel:before,
.check_main:checked + label.ty_unter_titel:before {
  left: 0.2em;
}

.check_main:not(:checked) + label.ty_unter-titel:after,
.check_main:checked + label.ty_unter-titel:after,
.check_main:not(:checked) + label.ty_unter_titel:after,
.check_main:checked + label.ty_unter_titel:after {
  left: 0.35em;
}

.check_main:not(:checked) + label.ty_unter-titel,
.check_main:checked + label.ty_unter-titel,
.check_main:not(:checked) + label.ty_unter_titel,
.check_main:checked + label.ty_unter_titel {
  padding-left: 1.55em;
}

.check_gelb:not(:checked) + label:before,
.check_gelb:checked + label:before {
  background-color: var(--gelb);
  border-color: var(--gelb);
}

/* checked mark aspect */
.check_main:not(:checked) + label:after,
.check_main:checked + label:after {
  content: "\f00c";
  position: absolute;
  top: 0.2em;
  left: 0.65em;
  line-height: 0.8;
  transition: all 0.2s;
  font-family: "Font Awesome 5 Pro", "Arial Unicode MS", Arial, sans-serif;
}

/* checked mark aspect changes */
.check_main:not(:checked) + label:after {
  opacity: 0;
  transform: scale(0);
}

.check_main:checked + label:after {
  opacity: 1;
  transform: scale(1);
}

/* Disable Checkbox Grau */
.check_dis:disabled:not(:checked) + label:before {
  box-shadow: none;
  border-color: var(--schwarz-30);
  background-color: var(--schwarz-10);
}

.check_dis:disabled:checked + label:before {
  box-shadow: none;
  border-color: var(--schwarz-30);
  background-color: var(--schwarz-10);
}

.check_dis:disabled:checked + label:after {
  color: var(--schwarz-60);
}

.check_dis:disabled + label {
  color: var(--schwarz-30);
}

/* Checkbox als Icon */
.check_icon:not(:checked),
.check_icon:checked {
  position: absolute;
  left: -9999px;
}

.check_icon:not(:checked) + label,
.check_icon:checked + label {
  position: relative;
  cursor: pointer;
}

.check_icon:checked + label:before {
  content: "\f058";
  position: absolute;
  font-family: "Font Awesome 5 Pro", "Arial Unicode MS", Arial, sans-serif;
}

.check_icon:not(:checked) + label:before {
  content: "";
  position: absolute;
  font-family: "Font Awesome 5 Pro", "Arial Unicode MS", Arial, sans-serif;
}

.full_label {
  display: block;
  text-align: center;
}

/* -- Checkbox Disable aber nicht ausgegraut -- */
.ck_kinder:disabled {
  display: none;
}

.ck_kinder:checked + label:before {
  content: "✓";
  color: var(--schwarz);
}

.ck_kinder + label:before {
  content: "✓";
  color: var(--weiss);
  background: var(--weiss);
  border-color: var(--schwarz-30);
  font-size: 20px;
  text-align: center;
  border-radius: 5px;
  padding: 0 5px;
}

/* --------------- Checkboxen Slide-Button --------------- */
/* Hide the input */
.check_schalt {
  /*position: absolute;
  opacity: 0;
  z-index: -1;*/
  display: none;
}

.check-trail {
  display: flex;
  align-items: center;
  width: 3em;
  height: 1.5em;
  background: var(--schwarz-30);
  border-radius: 2.5em;
  transition: var(--transition);
  cursor: pointer;
}

.check-handler {
  display: flex;
  margin-left: 0.2em;
  justify-content: center;
  align-items: center;
  width: 1.2em;
  height: 1.2em;
  background: var(--schwarz-30);
  border-radius: 50%;
  transition: var(--transition);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}

.check-handler:before {
  content: "\00D7";
  color: white;
  font-size: 1em;
  font-weight: bold;
}

.check_schalt:checked + .check-trail {
  background: var(--gruen);
}

.check_schalt:checked + .check-trail .check-handler {
  margin-left: 50%;
  background: var(--gruen);
}

.check_schalt:checked + .check-trail .check-handler:before {
  content: "\2714";
  font-size: 0.8em;
}

.gruppe_check_schalt {
  display: inline-flex;
  align-items: center;
}

/* -------------------- BILDER -------------------- */
.bilder {
  width: 16em;
  height: auto;
}

.kino_logo_vor {
  padding: 1em;
  width: 80%;
}

img.tab_icon {
  height: 9%;
  max-height: 15px;
  width: auto;
  vertical-align: bottom;
  padding-right: 2px;
}

.tab_flage {
  width: 1em;
}

/* Fehlende Bilder */
.btn_bild_fehlt input {
  position: absolute !important;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  width: 1px;
  border: 0;
  overflow: hidden;
}

.btn_bild_fehlt label {
  margin-left: 15px;
  background-color: var(--schwarz-30);
  color: var(--schwarz-5);
  font-size: var(--font_80);
  font-family: aller, sans-serif;
  text-align: center;
  padding: 5px 7px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
  vertical-align: .3em;
  display: inline-block;
  border-radius: 4px;
}

.btn_bild_fehlt:checked label {
  background-color: var(--gruen);
  box-shadow: none;
}

/* ----------------------- KINOCHECK ---------------------------*/
.kinocheck_baum > tbody > tr > td:first-child,
.kinocheck_baum > tbody > tr > td:last-child {
  width: 40%;
}

.kinocheck_baum > tbody > tr > td:first-child {
  text-align: right;
}

.td_edit {
  background-color: var(--weiss);
  border-radius: 5px;
  border: hidden;
  height: 26px;
  align-self: center;
  font-size: var(--font_80);
  padding: 5px;
  word-break: break-word;
}

.l_std_leiste .td_edit {
  word-break: keep-all;
}

.feld {
  border-radius: 5px;
  background-color: var(--weiss);
  height: 26px;
  font-size: var(--font_80);
  padding: 5px;
  word-break: break-word;
  width: 15em;
  vertical-align: middle;
  border: hidden;
}

input[type="text"] {
  margin: 1% 0;
  border-radius: 5px;
  border: hidden;
  height: 26px;
  align-self: center;
}

#risiko_tage {
  margin: 2px 10px 15px 5px;
  border-radius: 5px;
  border: hidden;
  height: 26px;
  align-self: center;
  background-color: var(--weiss);
  width: 50px;
  padding: 5px;
}

/* Tabllen in Tabellen */
.tab_2_l,
.tab_2_r,
.tab_3_l {
  border-collapse: collapse;
  margin: 0;
  padding: 0;
}

.tab_2_l td:last-child,
.tab_2_r td:first-child,
.tab_3_l td:last-child,
.tab_3_l td:nth-last-child(2) {
  width: 25px;
}

/* Checkbox als Feld */
.kinocheck_check_blau:not(:checked),
.kinocheck_check_blau:checked,
.kinocheck_check_gelb:not(:checked),
.kinocheck_check_gelb:checked,
.kinocheck_check_orange:not(:checked),
.kinocheck_check_orange:checked,
.kinocheck_ueber_check:not(:checked),
.kinocheck_ueber_check:checked {
  position: absolute;
  left: -9999px;
}

.kinocheck_check_blau:not(:checked) + label,
.kinocheck_ueber_check:not(:checked) + label {
  position: relative;
  cursor: pointer;
}

.kinocheck_check_blau:not(:checked) + label {
  background-color: var(--hell_blau);
  color: var(--schwarz);
}

.kinocheck_check_gelb:not(:checked) + label {
  background-color: var(--gelb);
  color: var(--schwarz);
}

.kinocheck_check_orange:not(:checked) + label {
  background-color: var(--orange);
  color: var(--schwarz);
}

.kinocheck_ueber_check:not(:checked) + label {
  background-color: var(--dunkel_blau);
  color: var(--weiss);
}

.kinocheck_check_blau:checked + label,
.kinocheck_ueber_check:checked + label {
  position: relative;
  cursor: pointer;
}

.feld_20 {
  width: 20em;
}

/* -------------- Login -------------- */
.log-logo {
  margin: 2% auto 0;
  display: block;
  width: 15%;
}

.log-in-bereich {
  background-color: var(--hellgrau);
  border-radius: 5px;
  width: 50%;
  max-width: 750px;
  margin: auto;
  margin-top: 1%;
}

.log-in-header {
  background-color: var(--schwarz-85);
  padding: 1px;
  color: var(--weiss);
  border-radius: 5px 5px 0 0;
  font-size: calc(var(--base_font) * 1.5);
}

.log-in-header h3 {
  margin: 1%;
}

.log-in-form {
  text-align: right;
}

.log-in-form input {
  background-color: var(--schwarz-5);
  border-radius: 5px;
  border: 1px solid var(--schwarz-50);
  width: 95%;
  font-size: var(--base_font);
  padding: 10px;
  margin: 2.5% 2.5% 0 2.5%;
  min-height: 40px;
}

input:focus {
  border: hidden;
  outline: transparent;
}

.log-in-form input[type="submit"] {
  cursor: pointer;
  color: var(--weiss);
  font-size: 16px;
  text-transform: uppercase;
  width: 120px;
  background-color: var(--unifilm-rot);
  border: none;
  margin: 0 2.5% 2% 2.5%;
}

/* ----------------------- Warnmeldung --------------------- */
.fehler_text,
.ty_fehlertext {
  width: 50%;
  max-width: 750px;
  margin: auto;
  margin-top: 1.5em;
  color: var(--dunkel_rot);
  font-weight: 800;
}

.l_warnbox {
  padding: 5px;
  text-align: center;
  background-color: var(--hell_gelb);
  color: var(--schwarz-60);
  font-size: larger;
  text-transform: uppercase;
  position: sticky;
  /*top: 50px;*/
  top: 3.35em;
  z-index: 10;
  border-radius: 5px;
  margin-bottom: 5px;
  display: block;
}

.l_achtung {
  background-color: var(--rot);
  color: var(--weiss);
  border-radius: 5px;
  padding: 5px;
  margin-left: 15px;
}

/* ---------- Dropdown Farbüberschreibung für disabled ------------------*/
.dropdown_versand_medium:disabled {
  color: var(--schwarz);
  opacity: 1;
}

/* -------------------- FARBEN Klassen -------------------- */
.gruen,
.gruen label {
  background-color: var(--gruen);
}

.hell_gruen,
.hell_gruen label {
  background-color: var(--hell_gruen);
}

.leucht_gruen {
  background-color: var(--leucht_gruen);
}

.dunkel_gruen {
  background-color: var(--dunkel_gruen);
  color: var(--weiss);
}

.orange,
.orange label,
.orange > label {
  background-color: var(--orange);
}

.hell_orange {
  background-color: var(--hell_orange);
}

.leucht_orange,
.leucht_orange label {
  background-color: var(--leucht_orange);
}

.dunkel_orange {
  background-color: var(--dunkel_orange);
  color: var(--weiss);
}

.gelb label,
.gelb {
  background-color: var(--gelb);
}

.leucht_gelb {
  background-color: var(--leucht_gelb);
}

.hell_gelb,
.hell_gelb label {
  background-color: var(--hell_gelb);
}

.dunkel_gelb {
  background-color: var(--dunkel_gelb);
  color: var(--weiss);
}

.blau {
  background-color: var(--blau);
}

.hell_blau {
  background-color: var(--hell_blau);
}

.leucht_blau {
  background-color: var(--leucht_blau);
}

.dunkel_blau {
  background-color: var(--dunkel_blau);
  color: var(--weiss);
}

.fake_blau {
  background-color: var(--gelb);
}

.rot,
.rot label {
  background-color: var(--rot);
}

.hell_rot {
  background-color: var(--hell_rot);
}

.leucht_rot {
  background-color: var(--leucht_rot);
  color: var(--weiss);
}

.dunkel_rot {
  background-color: var(--dunkel_rot);
  color: var(--weiss);
}

.ausgegraut {
  background-color: var(--schwarz-10);
  color: var(--schwarz-50);
}

.ausgegraut:hover {
  background-color: var(--schwarz-10);
  color: var(--schwarz-50);
}

.ausgegraut input[type="date"] {
  color: var(--schwarz-50);
}

.ausgegraut_sch {
  background-color: var(--schwarz-10);
  color: var(--schwarz);
}

.weiss {
  background-color: var(--weiss);
}

.hellgrau {
  background-color: var(--hellgrau);
}
.grau_10 {
  background-color: var(--schwarz-10);
}

.grau_20 {
  background-color: var(--schwarz-20);
}

.grau_30 {
  background-color: var(--schwarz-30);
}

.schwarz {
  background-color: var(--schwarz);
  color: var(--weiss);
}

.transparent {
  background-color: transparent;
}

.ty_transparent {
  color: transparent;
}

.selected > .hell_rot {
  background-color: var(--rot);
}

.selected > .hell_gelb {
  background-color: var(--gelb);
}

/* --- Farb-Palette für Streaming --*/
.farbe_1 {
  background-color: #ceecc0;
}
.farbe_2 {
  background-color: #c0ecd8;
}
.farbe_3 {
  background-color: #c0dbec;
}
.farbe_4 {
  background-color: #cbc0ec;
}
.farbe_5 {
  background-color: #ecc0e7;
}
.farbe_6 {
  background-color: #ecc0c1;
}
.farbe_7 {
  background-color: #ece4c0;
}

/* ---------------FARBEN Schrift Klassen ----------------------- */
.ty_schwarz {
  color: var(--schwarz);
}

.ty_rot {
  color: var(--rot);
}

.ty_unifilm-rot {
  color: var(--unifilm-rot);
}

.ty_hell_rot {
  color: var(--hell_rot);
}

.ty_leucht_rot {
  color: var(--leucht_rot);
}

.ty_gruen {
  color: var(--leucht_gruen);
}

.ty_dunkel_gruen {
  color: var(--dunkel_gruen);
}

.ty_gelb {
  color: var(--dunkel_gelb);
}

.ty_leucht_orange {
  color: var(--leucht_orange);
}

.ty_orange {
  color: var(--orange);
}

.ty_blau {
  color: var(--ty_blau);
}

.ty_weiss {
  color: var(--weiss) !important;
}

.ty_grau {
  color: var(--schwarz-50) !important;
}

.ty_grau_30 {
  color: var(--schwarz-30);
}

.ty_grau_60 {
  color: var(--schwarz-60) !important;
}

.ty_grau_85 {
  color: var(--schwarz-85);
}

summary.leucht_orange {
  border-radius: 5px;
  padding: 2px;
}

/* EXTRA
.fa-rocket-launch {
  font-size: 50em;
  margin: 5% 25% 10% 25%;
  color: var(--hellgrau);
} */
.fa-laptop-code {
  color: var(--hell_gelb);
  font-size: 120%;
}

.fa-earlybirds {
  color: var(--weiss);
  float: right;
  margin-right: 1em;
}

.fa-times-circle {
  color: var(--rot);
}

/* --------------- Meter ----------- */
.l_80 {
  width: 80%;
}

.l_8 {
  width: 8%;
}

.fa-arrow-up {
  cursor: default;
}

meter {
  width: 100%;
  height: 35px;
  border-radius: 5px;
  padding: 0;
  border: 1px solid #ccc;
}

meter::-webkit-meter-bar {
  background: none;
  background-color: whiteSmoke;
  box-shadow: 0 5px 5px -5px #333 inset;
}

.m_dunkel_gruen::-webkit-meter-optimum-value {
  box-shadow: 0 5px 5px -5px #999 inset;
  background-color: var(--dunkel_gruen);
  background-size: 100% 100%;
}

.m_rot::-webkit-meter-optimum-value {
  box-shadow: 0 5px 5px -5px #999 inset;
  background-color: var(--rot);
  background-size: 100% 100%;
}

.m_gruen::-webkit-meter-optimum-value {
  box-shadow: 0 5px 5px -5px #999 inset;
  background-color: var(--gruen);
  background-size: 100% 100%;
}

.m_orange::-webkit-meter-optimum-value {
  box-shadow: 0 5px 5px -5px #999 inset;
  background-color: var(--orange);
  background-size: 100% 100%;
}

.m_gelb::-webkit-meter-optimum-value {
  box-shadow: 0 5px 5px -5px #999 inset;
  background-color: var(--gelb);
  background-size: 100% 100%;
}

/*----------------- DEL & INS -----------------
del, ins {
  height: auto;
  border-radius: .3em;
  display: inline;
  -webkit-box-decoration-break: clone;
  -o-box-decoration-break: clone;
  box-decoration-break: clone;
  margin-left: .07em;
  margin-right: .07em;
  text-decoration-color: var(--schwarz-60);
}

del {
  background-color: var(--hell_rot);
}

ins {
  background-color: var(--hell_gruen);
}*/
ins,
del {
  text-decoration: none;
  display: inline-block;
  padding: 0 0.3em;
}

del {
  background: var(--hell_rot);
  color: var(--schwarz-85);
  height: auto;
  border-radius: 0.3em;
  display: inline;
  -webkit-box-decoration-break: clone;
  -o-box-decoration-break: clone;
  box-decoration-break: clone;
  margin-left: 0.07em;
  margin-right: 0.07em;
}

ins {
  background: var(--hell_gruen);
  position: relative;
  top: 0.2em;
  height: 1.31em;
  width: 0.8em;
  line-height: 1.35;
  overflow: hidden;
  color: transparent;
  margin: -0.4em 0.07em -0.05em 0.07em;
  padding: 0 0 0.1em 0;
  -webkit-box-decoration-break: clone;
  -o-box-decoration-break: clone;
  box-decoration-break: clone;
  border-radius: 0.3em;
  transition: padding-left ease 0.3s, padding-right ease 0.3s, color ease 0.15s,
    width ease 0.5s;
}

ins:hover {
  width: auto;
  display: inline;
  color: var(--schwarz-60);
  cursor: none;
  padding: 0 0.35em 0em 0.35em;
  line-height: unset;
  position: unset;
  top: unset;
  height: unset;
  transition: padding-left ease 0.3s, padding-right ease 0.3s, color ease 0.7s,
    width ease 0.5s;
}

/* ---------------- Poster Auswahl --------------------*/
.posterauswahl {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  padding: 10px 15px;
}

.poster {
  margin: 5px 5px;
}

.plakate-programm {
  max-width: 140px;
  max-height: 220px;
  margin: 0 5px;
}

.poster .plakate-programm {
  margin: 0;
  max-width: 160px;
  max-height: 240px;
}

.poster p {
  max-width: 160px;
  margin: 0;
  min-height: 50px;
}

.d_hide {
  display: none;
}

.btn_link {
  width: auto;
  font-size: var(--font_80);
  font-family: aller, sans-serif;
  font-weight: 400;
  margin-right: 5px;
  vertical-align: sub;
  padding: 5px 10px;
}

.btn_link a {
  text-decoration: none;
  /*text-align: right;*/
}

.btn_link:hover a {
  text-decoration: none;
  color: var(--weiss);
}

.g_feld ul,
.td_edit ul {
  padding-inline-start: 20px;
  margin-block-start: 0;
  margin-block-end: 0;
  font-family: "Font Awesome 5 Pro", aller, sans-serif;
  font-weight: 400;
  list-style-type: "\f0c8   ";
  text-align: left;
}

.td_edit ul {
  float: right;
}

.auswahl_poster,
.l_auswahl_poster {
  background-color: var(--schwarz-50);
  padding: 15px 5px;
}

.l_auswahl_poster p {
  padding: 0 20%;
  margin: 0 0 1em 0;
  text-align: center;
}

.l_auswahl_poster .ty_unter_titel {
  color: var(--unifilm-rot);
}

h3.ueber-spiel {
  color: var(--rot);
}

.btn_neu {
  border-radius: 5px;
  border: hidden;
  /*float: right;*/
  background-color: var(--schwarz-50);
  color: var(--schwarz-5);
  padding: 1px 10px;
  font-family: aller, sans-serif;
  font-size: var(--base_font);
  width: 7em;
  z-index: 2;
  /*margin: 10px 5px 0 10px;*/
  margin-top: 10px;
  cursor: pointer;
}

.button_reactiv {
  width: 8em;
  height: 2em;
  margin-top: 0;
}

/* ------------------- Tooltip -------------------- */
.tooltip,
.tooltip_bottom {
  position: relative;
  /*display: inline-block;*/
  cursor: help;
  /*z-index: 1;*/
}

.tooltip .tooltiptext,
.tooltip_bottom .tooltiptext,
.tooltip .tooltiptext_tabelle,
.tooltip_bottom .tooltiptext_tabelle {
  visibility: hidden;
  min-width: 150px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 5;
  left: 50%;
  margin-left: -60px;
  font-size: var(--font_80);
  hyphens: none;
  box-sizing: content-box;
  font-family: aller, sans-serif;
}

.tooltip .tooltiptext_tabelle,
.tooltip_bottom .tooltiptext_tabelle {
  min-width: 400px;
  text-align: left;
}

.tooltip .tooltiptext {
  bottom: 100%;
}

.tooltip_bottom .tooltiptext,
.tooltip_bottom .tooltiptext_tabelle {
  top: 100%;
}

.tooltip:hover .tooltiptext,
.tooltip_bottom:hover .tooltiptext,
.tooltip:hover .tooltiptext_tabelle,
.tooltip_bottom:hover .tooltiptext_tabelle {
  visibility: visible;
  transition: visibility 0s linear 1.5s;
}

.tooltiptext:hover,
.tooltiptext_tabelle:hover {
  visibility: hidden !important;
}

.fa-info {
  color: var(--schwarz-60);
  font-size: 60%;
  vertical-align: text-top;
}

.tooltip_titel {
  text-transform: uppercase;
  font-size: larger;
}

.tool_breit {
  min-width: 200px !important;
}

.tooltiptext_tabelle table {
  border-collapse: collapse;
  color: var(--schwarz);
}

.tooltiptext_tabelle th,
.tooltiptext_tabelle td {
  word-break: initial;
}

div#mgchecktabelle1_filter {
  margin-bottom: 10px;
}

input::-webkit-calendar-picker-indicator {
  margin: 0;
  padding: 0;
}

select:disabled {
  color: currentColor;
}

/*Facebook*/
.form-header {
  background: var(--dunkelgrau);
  padding-left: 0.5em;
  padding-top: 0.1em;
  padding-bottom: 0.1em;
  color: var(--weiss);
  border-radius: 5px 5px 0 0;
}

.ty_fb_titel {
  font-size: 110%;
  margin: 5px 0;
}

/* ----- Interne Navigation Kinoprofil ----- */
#nav_kinoprofil_onlinepraesenz,
#nav_kinoprofil_generelle-infos,
#nav_kinoprofil_produktion,
#nav_kinoprofil_feuerzangenbowle,
#nav_kinoprofil_vorprogramm,
#nav_kinoprofil_verkauf,
#nav_kinoprofil_kontaktdaten,
#nav_kinoprofil_werbebuchungen,
#nav_kinoprofil_spielplan,
#nav_kinoprofil_statisk,
#nav_kinoprofil_scoring,
#nav_kinoprofil_sperrbereich,
#nav_kinoprofil_links-logins,
#nav_kinoprofil_einstellungen,
#nav_kinoprofil_semesterformular {
  /*display: block;+*/
  position: relative;
  top: -110px;
  visibility: hidden;
}

/* --- Form Lizenzanfrage --- */
.form_lizenzanfrage {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}

/* --- Einstellungsleite Tabellen - Links-rechts ---- */
.l_links_rechts {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  align-content: flex-start;
}

@media print {
  .l_header_links {
    display: none;
  }

  .l_header {
    background-color: var(--weiss);
    color: var(--schwarz-85);
  }

  .l_margin-l250 {
    width: 99.3vw !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
    margin-left: 0px !important;
  }

  .nav_open {
    width: 0;
  }

  .logo_open {
    width: 0;
  }

  .l_block_table {
    background-color: var(--weiss);
  }

  .dt-buttons,
  .dataTables_info,
  .lizenzcheckneu_filter,
  .filmchecktabelle_filter {
    display: none;
  }
}

.ty_larger {
  font-size: larger;
}

/* --- Von HW angelegt ---- */
.l_vertical_align_top {
  vertical-align: top;
}