@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600');

@font-face {
  font-family: 'TheSansOsF';
  src: url('TheSansOsF-Plain.otf') format('opentype');
}

@font-face {
  font-family: 'TheSansOsF Black';
  src: url('TheSansOsF-Black.otf') format('opentype');
}

@font-face {
  font-family: 'TheSansOsF Bold';
  src: url('TheSansOsF-Bold.otf') format('opentype');
}

@font-face {
  font-family: 'TheSerif';
  src: url('TheSerif-HP5Plain.otf') format('opentype');
}

@font-face {
  font-family: 'TheSerif Bold';
  src: url('TheSerif-HP7Bld.otf') format('opentype');
}

/* ################## */
/* global settings    */
/* ################## */
html {
    color: #333333;
  font-family: 'TheSansOsF';
  font-size: 22px;
}

body, form, li, p, h1, h2, h3, h4, h5 {
    margin: 0;
    padding: 0;
}

.textrot {
    color: red;
}

.body_oben, .body_mitte, .body_unten {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 8px; 
}

img {
    border: none;
}

.navigation {
	display: none;
}

p {
    font-size: 22px;
    margin: 0 0 1em 0;
}

input, select, textarea, th, td {
    font-size: 22px;
}

.header {
}

/* the class for trainer picture is the same in all views */
.treeview_vedetails_ve_leiter_bild {
    width: 60px;
    display: block;   
    margin-top: 5px; 
}

div.ausgabe_element_rahmen:not(:has(+ div.ausgabe_ve_Untertitel)) {
	/* Abstand nach Ausgabefeldern (z.B. in VeDetails, ThDetails, Anmeldeformular) */
	margin-bottom: 1rem;
}


/* ################################## */
/* sollte an die entsprechenden Stelen verteilt werden */
/* ################################## */
.system_buttonrahmen, .anmeldung_details_oben, .anmeldung_details_unten,
.anmeldung_mitte, .ve_details_rahmen, .details_buttons, .rasterzeile {
    clear: both;
}

.anmeldung_details_unten {
	padding-left: 15px;
}

/* ######################### */
/* input fields and filters  */
/* ######################### */

/* frame around a pair of a label and an input/search/filter field */
.eingabe_element_rahmen {
    clear: both;
}

/* frame around a label of a search/filter input field */
.filter_beschriftung_rahmen, .suche_beschriftung_rahmen {
    font-weight: bold;
    float: left;
    clear: both;
    width: 120px;
    padding-top: 8px;
    margin-left: 30px;
}

/* frame around a label of an usual input field */
.beschriftung_rahmen {
    float: left;
    clear: both;
    margin: 0px 5px 5px 0px;
    width: 200px;
    display: inline-block;
}

/* frame around a label of a checkbox input field */
/* checkboxes are placed on the left of the label. So "eingabe_rahmen" ist for the label and "beschriftung_rahmen" is for the checkbox itself */
.chk_beschriftung_rahmen {
    float: left;
    clear: both; 
    margin-bottom: 5px;
/*      width: 120px; 
  display: table-cell; */
    display: inline-block;
}


/* frame around a search/filter input field */
.filter_eingabe_rahmen, .suche_eingabe_rahmen {
    padding-left: 15px;
}

/* frame around a usual input field */
.eingabe_rahmen {
    float: left;
    margin-bottom: 5px;
    display: inline-block;
}

/* frame around a checkbox input field */
.chk_eingabe_rahmen {
    float: left;
    margin-bottom: 5px;
/*    display: table-cell; */
    display: inline-block;
}



/* label of an input/search/filter field */
.beschriftung_eingabe {
}

/* input fields */
/* text */ 
.wert_eingabe {
    background-color: #fff;
    border: 1px solid #E1E1E1;
    width: 240px;
  font-family: 'TheSansOsF Bold';
  font-size: 22px;
    font-weight: bold;
    color: #878787;
    margin: 0px 0px 3px 0px;
    padding: 10px 10px 10px 10px;
    box-sizing: border-box;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}

/* short text */ 
.wert_eingabe_kurz {
    width:140px;
}

/* checkbox */
.wert_eingabe_checkbox {
    margin: 12px 6px 12px 0px;
}

/* multiline text */
textarea {
    height: 200px;
    width: 400px;
}


/* special input field construction, used at the bottom of the registration form below the grid cells */
/* frame around a label and an input filed */
.eingabe_element_zusatz_rahmen {
    width: 100%;
    display: table;
    padding-top: 15px;
    padding-bottom: 15px;
}
/* frame around a checkbox input field, only in this special construction */
.eez_chk_rahmen {
    width: 50px;
    display: table-cell;
}
/* frame around a label of a checkbox input field, only in this special construction*/
.eez_chk_text_rahmen {
    display: table-cell;
}


/* ########################## */
/* output field constructions */
/* ########################## */
.beschriftung_ausgabe {
    font-weight: bold;
	color: #F28E06;
}


/* ################## */
/* access denied page */
/* ################## */
.zv_ueberschrift {
    font-size: 44px;
}

.zv_meldung {
}


/* ##################### */
/* header and footer     */
/* ##################### */

.img_header_logo_links {
    width: 100%;
    height: auto;
}

.header_logo_rechts {
	margin-right:15px;
float:right!important;
}

.img_header_logo_rechts {
    width: 200px;
    height: auto;	
	margin-bottom: -200px;
}

.lbl_header_text {
    font-size: 200%;
}

.footer_logo_links {
    width: 100%;
    height: auto;
text-align: center;
margin:40px;
}
.img_footer_logo_links {
    width: 500px;
    height: auto;
}

.img_footer_logo_rechts {
    width: 100%;
    height: auto;
}

.lbl_footer_text {
    font-size: 50%;
}


/* ############## */
/* traffic lights */
/* ############## */
.ve_ampel_rot {
    border-radius: 10px;
    background-color: #ff0000;
    width: 20px;
    height: 20px;
    }

.ve_ampel_gelb {
    border-radius: 10px;
    background-color: #ffd800;
    width: 20px;
    height: 20px;
    }

.ve_ampel_gruen {
    border-radius: 10px;
    background-color: green;
    width: 20px;
    height: 20px;
    }


/* ############################# */
/* buttons                       */
/* ############################# */

.details_link, .anmelden_link, .button {
  font-family: 'TheSansOsF';
  font-size: 22px;
    text-decoration: none;
    background: linear-gradient(#F28D05, #F2CC1D);
    color: white;
    padding: 8px 14px 8px 14px;
	cursor: pointer;
    border-radius: 10px; /* CSS3 */
	border-color: #F28D05;
    }

.details_link:hover, .anmelden_link:hover, .button:hover {
    text-decoration: none;
	cursor: pointer;
	transform: scale(1.01, 1.01);
    }

/* smaller button, currently used only as "Downloads" button in the educational history */
.button_small {
    padding: 2px;
    cursor: pointer;
    }


/* ############################ */
/* treeview                     */
/* ############################ */
ol.tree {
    padding: 0 0 0 0;
    margin-left: auto;
    margin-right: auto;
    width: 97%;
}

.tree_li {
    position: relative;
    list-style: none;
}

li input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    width: 16px;
}

    li input + label + ol > li {
        display: none;
    }

    li input + label::before {
        content: "\25B7";
        color: grey;
        margin-left: -15px;
        margin-right: 15px;
    }

    li input:checked + label::before {
        content: "\25B7";
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        margin-left: -15px;
        margin-right: 15px;
        display: inline-block;
    }

    li input:checked + label + ol > li {
        display: block;
    }

        li input:checked + label + ol > li:last-child {
            margin-bottom: 15px;
        }

li label {
    cursor: pointer;
    display: block;
}

.treeview_themenbereich {
    background-color: #014495;
    color: #FFFFFF;
    text-align: left;
    cursor: pointer;
    vertical-align: middle;
    padding-left: 30px;
    font-size: 24px;
    padding-top: 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid #CCCCCC;
    transition: transform 0.2s;
}
.treeview_themenbereich:hover {
   transform: scale(1.005, 1.005);
}

.treeview_thema {
    background-color: #F8F8F8;
    color: #333333;
    text-align: left;
    cursor: pointer;
    padding-left: 30px;
    padding-top: 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid #CCCCCC;
    transition: transform 0.2s;
}
.treeview_thema:hover {
   transform: scale(1.005, 1.005);
}

.treeview_themendetails {
    padding-left: 7px;
    padding-top: 10px;
}

.treeview_themendetails_kopfbild {
    width: 100%;
}

.treeview_themendetails_bild, .anmeldung_details_bild {
    float: right;
    margin: 10px;
}

.treeview_themendetails_beschriftung {
    font-weight: bold;
    line-height: 40px;
}

.treeview_themendetails_wert {
}

.treeview_themendetails_bedarf_melden {
    width: 100%;
    clear: both;
}

.treeview_vedetails_rahmen, .treeview_vedetails_header_rahmen {
    display: table;
}

.treeview_vedetails_rahmen {
    border-left: 1px solid #CCCCCC;
    border-right: 1px solid #CCCCCC;
    border-bottom: 1px solid #CCCCCC;
    height: auto;
    width: 98%;
}

.treeview_vedetails_header_rahmen {
    border: 1px solid #CCCCCC;
    width: 98%;
    float: left;
    clear: both;
    color: #333333;
  font-family: 'TheSansOsF Bold';
  font-size: 24px;
  font-weight: bold;
    background-color: #EFEFEF;
    height: 30px;
    margin-top: 20px;
}

.treeview_vedetails_header_spalte {
    float: left;
    width: 150px;
    margin: 7px;
    font-weight: bold;
}

.treeview_vedetails_header_letzte_spalte {
    clear: right;
}

.treeview_vedetails {
    float: left;
    width: 150px;
    margin: 7px;
}

.treeview_vedetails_erste_spalte {
    clear: left;
}

.treeview_vedetails_letzte_spalte {
    clear: right;
}

.treeview_vedetails_ve_ampel_spalte {
    width: 50px;
}

.treeview_vedetails_ve_details_link_spalte {
    width: 80px;
}

.treeview_vedetails_ve_anmelden_link_spalte {
    width: 100px;
}

.treeview_vedetails_ve_details_link_spalte, .treeview_vedetails_ve_anmelden_link_spalte {
    padding-top: 8px;
    padding-bottom: 8px;
}

.treeview_vedetails_ve_details_link_header_spalte, .treeview_vedetails_ve_anmelden_link_header_spalte,
.treeview_vedetails_ve_ampel_header_spalte {
    display: none;
}


/* ############################# */
/* registration form             */
/* ############################# */

#cph_body_mitte_lbl_abmelden_person_beschriftung {
	/* Correction of an error with wrong <br> */
	position: relative;
    top: 18px;  
}

.anmeldung_details_mitte {
    padding-left: 15px;
}

#cph_body_mitte_lblFreiesFeld2, #cph_body_mitte_lbl_ausgabe_Ve_Bezeichnung, #cph_body_mitte_lbl_beschriftung_ve_reihenteile, #cph_body_mitte_lblanmeldung_text_oben, #cph_body_mitte_lbl_beschriftung_Ve_Beschreibung, #cph_body_mitte_lbl_beschriftung_ve_Zielgruppe, #cph_body_mitte_lbl_beschriftung_ve_ort_adressblock, #cph_body_mitte_lblFreiesFeld11 {
color: #F28E06;
}

#cph_body_mitte_lblFreiesFeld2, #cph_body_mitte_lblFreiesFeld11 {
	font-weight: bold;
}

#cph_body_mitte_lbl_ausgabe_Ve_Bezeichnung {
	font-size: 32px;
}

.details_buttons {
    padding-top: 20px;
    margin-left: 15px;
}

.rasterzelle {
    float: left;
	min-width: 495px;
}

.rasterzelle0 {
    margin-bottom: 20px;
}

.rasterzelle1, .rasterzelle3, .rasterzelle5, .rasterzelle7 {
    margin-right: 20px;
}

.ueberschrift_rasterzelle1_rahmen, .ueberschrift_rasterzelle2_rahmen, .ueberschrift_rasterzelle3_rahmen,
.ueberschrift_rasterzelle4_rahmen, .ueberschrift_rasterzelle5_rahmen, .ueberschrift_rasterzelle6_rahmen,
.ueberschrift_rasterzelle7_rahmen, .ueberschrift_rasterzelle8_rahmen, .ueberschrift_rasterzelle9_rahmen {
    padding-bottom: 10px;
	color: #F28D05;
}

.ueberschrift_rasterzelle1, .ueberschrift_rasterzelle2, .ueberschrift_rasterzelle3, 
.ueberschrift_rasterzelle4, .ueberschrift_rasterzelle5, .ueberschrift_rasterzelle6,
.ueberschrift_rasterzelle7, .ueberschrift_rasterzelle8, .ueberschrift_rasterzelle9 {
    font-weight: bold;
}

.ueberschrift_rasterzelle1_rahmen {
	margin-bottom:15px;
}

.rasterzelle_wtn {
	padding-bottom: 10px;
	padding-right: 10px;
}

.ve_details_mitte {
    padding-left: 15px;
    padding-right: 15px;
}

.anmeldung_oben, .login_oben, .stammdaten_oben {
    clear: both;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-left: 15px;
    margin-right: 15px;
}

.anmeldung_mitte, .anmeldung_buttons, .anmeldung_error, .anmeldung_erfolg, .login_mitte, .login_header,
.stammdaten_mitte, .stammdaten_buttons, .stammdaten_error, .stammdaten_erfolg {
    margin-left: 15px;
    margin-right: 15px;
}

.anmeldung_unten, .login_unten, .stammdaten_unten {
    clear: both;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-left: 15px;
    margin-right: 15px;
}

.anmeldung_error, .stammdaten_error {
    padding-bottom: 20px;
}

.anmeldung_erfolg, .stammdaten_erfolg {
    padding-bottom: 20px;
}

.lbl_anmeldung_error {
    color: red;
}

.lbl_anmeldung_erfolg {
    color: green;
}


/* ################## */
/* chronological view */
/* ################## */

/* frame of the table */
.chrono_ansicht_rahmen {
    margin-top: 10px;
    margin-left: 20px;

    padding: 0px;
    width: 99%;
}

/* header row settings */
.chrono_ansicht_header_zeile {
    border: 1px solid #CCCCCC;
    width: 100%;
    float: left;
    clear: both;
    color: #333333;
  font-family: 'TheSansOsF Bold';
  font-size: 24px;
  font-weight: bold;
    background-color: #EFEFEF;
    height: 30px;
}

/* default row settings */ 
.chrono_ansicht_zeile {
    border-left: 1px solid #CCCCCC;
    border-right: 1px solid #CCCCCC;
    border-bottom: 1px solid #CCCCCC;
    width: 100%;
    float: left;
    clear: both;
    height: auto;
}

/* row for seminar title */
.chrono_ansicht_zeile_ueberschrift {
    margin: 5px;
}

/* alternating rows background */
.chrono_ansicht_zeile_alternierend {
    background-color: #EFEFEF;
}

/* month header settings */
.chrono_ansicht_monatsueberschrift {
    font-size: 30px;
    font-weight: bold;
    color: #333333;
    padding-top: 45px;
    padding-left: 5px;
    padding-bottom: 5px;
}

/* default column settings */
/* should be seperated, if different for header */
.chrono_ansicht_header_spalte, .chrono_ansicht_spalte {
    float: left;
    width: 150px;
    margin: 5px;
    vertical-align: top;
}

/* special column settings */
.chrono_ansicht_ve_details_link_spalte, .chrono_ansicht_ve_anmelden_link_spalte {
    padding-top: 8px;
    padding-bottom: 8px;
}

.chrono_ansicht_ve_ampel_spalte, .chrono_ansicht_ve_ampel_header_spalte {
    width: 50px;
}

.chrono_ansicht_ve_details_link_spalte {
    width: 80px;
}

.chrono_ansicht_ve_anmelden_link_spalte {
    width: 100px;
}

.chrono_ansicht_ve_details_link_header_spalte, .chrono_ansicht_ve_anmelden_link_header_spalte {
    display: none;
}


/* ################## */
/* tile view          */
/* ################## */
.kartenansicht_kopf_ueberschrift {
    font-size: 30px;
    color: #333333;
    text-align: center;
}

.kartenansicht_kopf_freitext {
    text-align: center;
}

.kartenansicht_inhalt {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.kartenansicht_inhalt_uberschrift {
    padding-top: 75px;
    width: 100%;
    text-align: center;
    color: #333333;
    font-size: 22px;
    clear: both;
    font-family: 'LeagueSpartan';
}

.kartenansicht_karte { /*float:left;*/
    border-radius: 15px 15px 0px 0px;
	width: 250px;
    height: 250px;
    margin: 15px;
    /* box-shadow: 5px 5px 5px grey; */
    transition: transform 0.1s;
}
.kartenansicht_karte:hover {
   transform: scale(1.01, 1.01);
}

.kartenansicht_karte_img {
	border-radius: 15px 15px 0px 0px;
    width: 100%;
    float: left;
    clear: both;
    border: 1px solid #CCCCCC;
}

.kartenansicht_karte_url {
    border: none;
}

.kartenansicht_karte_titel {
    border-radius:  0px 0px 15px 15px;
	background-color: white;
	font-size: 14px;
    color: #636A6F;
    width: 240px;
    padding: 10px 5px 4px 5px;    
    float: left;
    clear: both;
    text-align: center;
    min-height: 55px;
    border-left: 1px solid #CCCCCC;
    border-bottom: 1px solid #CCCCCC;
    border-right: 1px solid #CCCCCC;
}

.kartenansicht_themendetails_rahmen {
	border-radius: 15px 15px 15px 15px;
    width: 99%;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #CCCCCC;
    max-width: 1200px;
}

.kartenansicht_themendetails_inhalt {
    margin: 15px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.kartenansicht_themendetails_titel {
    color: #333333;
    font-size: 24px;
    margin-bottom: 20px;
}

.kartenansicht_themendetails_untertitel {
    color: #333333;
}

.kartenansicht_themendetails_feldbeschriftung {
    font-weight: bold;
    margin-top: 5px;
}

.kartenansicht_themendetails_feldinhalt {
    margin-bottom: 15px;
}

.kartenansicht_themendetails_bild {
	border-radius: 15px 15px 15px 15px;
	width: 220px;
	float: right;
	margin-left: 15px;
	margin-bottom: 15px;
}

.kartenansicht_vedetails_rahmen {
    width: 99%;
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px;
}

.kartenansicht_vedetails_termine {
    margin-top: 10px;
    padding: 0px;
    display: inline-block;
    width: 100%;
}

.kartenansicht_vedetails_zeile {
    border-bottom: 1px solid #000000;
    padding-top: 10px;
    padding-bottom: 10px;
    width: 100%;
    float: left;
    clear: both;
    height: auto;
}

.kartenansicht_vedetails_header_zeile {
    width: 100%;
    float: left;
    clear: both;
    color: #333333;
  font-family: 'TheSansOsF Bold';
  font-size: 24px;
  font-weight: bold;
background-color: rgba(108, 200, 225, 0.25);
    height: 40px;
}

.kartenansicht_Ve_TerminListeZeit_spalte, .kartenansicht_Ve_TerminListeZeit_header_spalte {
	width: 240px !important;
}

.kartenansicht_Ve_Selekt1_spalte, .kartenansicht_Ve_Selekt1_header_spalte, .kartenansicht_Ve_OrtOrt_spalte, .kartenansicht_Ve_OrtOrt_header_spalte {
	width: 120px !important;
}

.kartenansicht_Ve_Teilnahmegebuehr_spalte, .kartenansicht_Ve_Teilnahmegebuehr_header_spalte {
	width: 190px !important;
}

.kartenansicht_vedetails_spalte {
    float: left;
    width: 150px;
    margin: 5px;
    vertical-align: top;
}

.kartenansicht_vedetails_header_spalte {
    float: left;
    width: 150px;
    margin: 5px;
    vertical-align: top;
}

.kartenansicht_ve_details_link_spalte, .kartenansicht_ve_anmelden_link_spalte {
    padding-top: 8px;
    padding-bottom: 8px;
}

.kartenansicht_ve_ampel_spalte, .kartenansicht_ve_ampel_header_spalte {
    width: 50px;
}

.kartenansicht_ve_details_link_spalte {
    width: 100px;
}

.kartenansicht_ve_anmelden_link_spalte {
    width: 100px;
}

.kartenansicht_ve_details_link_header_spalte, kartenansicht_ve_anmelden_link_header_spalte {
    display: none;
}

.kartenansicht_kopf_bild {
    width: 100%;
}


/* #############################*/
/* unklar */
/* #############################*/

#cph_body_mitte_lbl_beschriftung_Ve_Bezeichnung, #cph_body_oben_lbl_beschriftung_Ve_Bezeichnung {
    display: none;
}

#cph_body_mitte_lbl_ausgabe_Ve_Bezeichnung, #cph_body_oben_lbl_ausgabe_Ve_Bezeichnung, #cph_body_oben_lbl_login_ueberschrift, #cph_body_oben_lbl_passwort_aendern_ueberschrift, #cph_body_oben_lbl_passwort_vergessen_ueberschrift, #cph_body_mitte_lblanmeldung_text_oben {
    font-weight: bold;
}


#cph_body_mitte_lblanmeldung_details_text_unten {
	display: none;
}


/* #############################*/
/* login - menu bar             */
/* #############################*/

.topmenu {
	background-color: #ffffff;
}

.navigationsbutton_li { 
    margin: 15px;
    background-color: #FFFFFF;
}

.navigationsbutton {
    font-size: 24px;
    font-weight: bold;
    text-decoration: none;
    color: #000000;
    border: none;
    background: #ffffff;
    padding-top: 4px;
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 4px;
}

.navigationsbutton:hover {
    text-decoration: underline;
}

.navigation_rahmen {
    background-color: #004C99;
    min-height: 25px;
    width: 100%;
    margin-bottom: 20px;
}

nav.topmenu {
    height: auto;
    max-height: 0;
    overflow: hidden;
    transition: all 0.5s;
}

label.menu_icon {
    display: block;
    width: 30px;
    height: 20px;
    border-radius: 4px;
}

input#menu_icon {
    display: none
}

.menu_linie {
    position: absolute;
    left: 5px;
    height: 2px;
    width: 25px;
    background: #fff;
    border-radius: 2px;
    display: block;
    transition: 0.5s;
    transform-origin: center;
}

    .menu_linie:nth-child(1) {
        top: 6px;
    }

    .menu_linie:nth-child(2) {
        top: 12px;
    }

    .menu_linie:nth-child(3) {
        top: 18px;
    }

#menu_icon:checked + .menu_icon .menu_linie:nth-child(1) {
    transform: translateY(6px) rotate(-45deg);
}

#menu_icon:checked + .menu_icon .menu_linie:nth-child(2) {
    opacity: 0;
}

#menu_icon:checked + .menu_icon .menu_linie:nth-child(3) {
    transform: translateY(-6px) rotate(45deg);
}

#menu_icon:checked + .menu_icon + nav.topmenu {
    max-height: 600px;
}


/* ################## */
/* login - dashboard  */
/* ################## */
.dashboard_ueberschrift_rahmen {
    padding-bottom: 20px;
}

.dashboard_ueberschrift, .dashboard_ve_details_ueberschrift {
    font-size: 24px;
    color: #333333;
}

.dashboard_ve_details_rahmen {
}

.dashboard_ve_details_header_zeile {
    border: 1px solid #CCCCCC;
    width: 100%;
    float: left;
    clear: both;
    color: #333333;
  font-family: 'TheSansOsF Bold';
  font-size: 24px;
  font-weight: bold;
    background-color: #EFEFEF;
    height: 30px;
}

.dashboard_ve_details_zeile {
    border-left: 1px solid #CCCCCC;
    border-right: 1px solid #CCCCCC;
    border-bottom: 1px solid #CCCCCC;
    width: 100%;
    float: left;
    clear: both;
    height: auto;
}

.dashboard_ve_details_spalte {
    float: left;
    width: 150px;
    margin: 5px;
    vertical-align: top;
}

.dashboard_ve_details_header_spalte {
    float: left;
    width: 150px;
    margin: 5px;
    vertical-align: top;
}

.dashboard_ve_details_zeile_alternierend {
    background-color: #EFEFEF;
}

.dashboard_downloads_rahmen {
    padding-top: 10px;
    padding-bottom: 10px;
}

.dashboard_downloads_ueberschrift {
    font-weight: bold;
    font-size: 125%;
}


/* #############################*/
/* login - educational history  */
/* #############################*/

/* +/- buttons to open and close the boxes for Bildungshistorie and Bildungsbedarf */
.button_collapse_uncollapse {
    vertical-align: middle;
    border: 1px solid #E1E1E1;
    background-color: white;
    color: grey;
    font-size: 150%;
    width: 30px;
    margin-left: 5px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

/* title in the boxes:  Bildungshistorie and Warteliste */
#cph_body_mitte_lblBildungshistorie, #cph_body_mitte_lblBildungsbedarf {
    vertical-align: middle;
    font-weight: bold;
    font-size: 150%;
}


.bh_filter_allgemein_rahmen {
    /*display: inline-block;*/
	display: none;
    padding-left: 10px;
}

.bildungshistorie_pefi_details_rahmen {
    padding-left: 10px;
}

.bildungshistorie_rahmen {
    max-width: 1020px;
    min-height: 300px;
    padding: 10px;
    background-color: #F7F7F7;
    margin-bottom: 20px;
}

.bildungsbedarf_rahmen {
    max-width: 1020px;
    min-height: 300px;
    padding: 10px;
    background-color: #F7F7F7;
    margin-bottom: 20px;
}

.bildungshistorie_sortierung_rahmen, .bildungsbedarf_sortierung_rahmen {
    margin-top: 15px;
    margin-bottom: 15px;
    width: 1000px;
    display: table;
    text-align: right;
}

.bh_filter_zelle1, .bh_filter_zelle2 {
    display: table-cell;
    text-align: left;
}

.bh_filter_zelle3 {
    display: table-cell;
    text-align: right;
}

.bildungshistorie_sortierung_zelle1, .bildungsbedarf_sortierung_zelle1 {
    display: table-cell;
    text-align: left;
}

.bildungshistorie_sortierung_zelle2, .bildungsbedarf_sortierung_zelle2 {
    display: table-cell;
    text-align: right;
}

#cph_body_mitte_lbl_bildungshistorie_sortierung, #cph_body_mitte_lbl_bildungsbedarf_sortierung,
#cph_body_mitte_lbl_bh_filter_personen, #cph_body_mitte_lbl_bh_filter_themenbereich, #cph_body_mitte_lbl_bh_filter_thema {
    padding-right: 15px;
}

#cph_body_mitte_lbl_bh_filter_themenbereich {
    padding-left: 10px;
}

.gvBildungshistorie_tabelle {
    min-width: 1000px;
}

.gvBildungshistorie_zeile_alternierend, .gvBildungsbedarf_zeile_alternierend {
    background-color: #E5E5E5;
}

#cph_body_mitte_gvBildungshistorie th, #cph_body_mitte_gvBildungsbedarf th {
    padding: 5px;
    background-color: #333333;
    color: #FFFFFF;
    text-align: left;
}

#cph_body_mitte_gvBildungshistorie td, #cph_body_mitte_gvBildungsbedarf td {
    padding: 5px;
}

.gvBildungsbedarf_tabelle {
    margin-top: 15px;
    min-width: 1000px;
}

#cph_body_mitte_Oi_PeAnrede1, #cph_body_mitte_Oi_PeAnrede2, #cph_body_mitte_Oi_PeAnrede3, #cph_body_mitte_Oi_PeAnrede4, #cph_body_mitte_Oi_PeAnrede5, #cph_body_mitte_Oi_PeAnrede6, #cph_body_mitte_Oi_PeAnrede7, #cph_body_mitte_Oi_PeAnrede8, #cph_body_mitte_lblOi_PeAnrede1, #cph_body_mitte_lblOi_PeAnrede2, #cph_body_mitte_lblOi_PeAnrede3, #cph_body_mitte_lblOi_PeAnrede4, #cph_body_mitte_lblOi_PeAnrede5, #cph_body_mitte_lblOi_PeAnrede6, #cph_body_mitte_lblOi_PeAnrede7, #cph_body_mitte_lblOi_PeAnrede8 {
	display: none;
}



/* #############################*/
/* login - data maintenance     */
/* #############################*/


#cph_body_oben_btnNeuePersonAnlegen {
    display: none;
}

#cph_body_oben_chkFilterInaktivePersonenAnzeigen, #cph_body_oben_lblFilterInaktivePersonenAnzeigen {
    display: none;
}

.stammdaten_error {
    clear:both;
}

.stammdaten_erfolg {
    clear:both;
}


/* ################### */
/* media screens       */
/* ################### */

/* enable full menu and disable hamburger menu in landscape view */
/* value should be higher than 690 if more than aproximately 3 menu items are in use */
@media screen and (min-width:690px) {
    label.menu_icon {
        display: none;
    }

    nav.topmenu {
        max-height: 600px;
    }

    .navigationsbutton_li {
        display: inline;
    }
}


/* ################################################################### */
/* smaller landscape view with table headings, but buttons in new line */
/* ################################################################### */
@media screen and (max-width:1100px) {
    .kartenansicht_ve_anmelden_link_spalte, .kartenansicht_ve_details_link_spalte,
    .chrono_ansicht_ve_anmelden_link_spalte, .chrono_ansicht_ve_details_link_spalte,
    .treeview_vedetails_ve_anmelden_link_spalte, .treeview_vedetails_ve_details_link_spalte {
        display: block;
        clear: both;
        width: 98%;
	text-align: right;
    }

    /* ist das notwendig?? */
    .kartenansicht_Ve_Teilnahmegebuehr_spalte, 
    .chrono_ansicht_Ve_Teilnahmegebuehr_spalte,
    .treeview_vedetails_Ve_Teilnahmegebuehr_spalte {
        clear: right;
    }
	
		.header_logo_rechts {
	margin-right:15px;
float:right!important;
}

.img_header_logo_rechts {
    width: 200px;
    height: auto;	
	margin-bottom: 0px!important;
}
	
}


/* ################################ */
/* upright view on smartphones      */
/* ################################ */
@media screen and (max-width:690px) {

    /* disable header labels, because every field is in a new line */
    .kartenansicht_vedetails_header_spalte, .chrono_ansicht_header_spalte,
    .treeview_vedetails_header_spalte {
        display: none;
    }

    /* individual labels in front of specific fields */
    /* cannot be localized with language-parameter ! */
    .chrono_ansicht_Ve_OrtOrt_spalte::before, .kartenansicht_Ve_OrtOrt_spalte::before, .treeview_vedetails_Ve_OrtOrt_spalte::before {
        content: "in ";
    }
    .chrono_ansicht_ve_leiter_spalte::before, .kartenansicht_ve_leiter_spalte::before, .treeview_vedetails_ve_leiter_spalte::before {
        content: "mit ";
    }

    /* center trainer picture */ 
    .treeview_vedetails_ve_leiter_bild {
    	margin: auto;
	margin-top: 5px;
    }

    .kartenansicht_vedetails_zeile {
        border-bottom: 1px solid #000000;
    }

    .chrono_ansicht_rahmen {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }
	
	.header_logo_rechts {
	margin-right:15px;
float:right!important;
}

.img_header_logo_rechts {
    width: 200px;
    height: auto;	
	margin-bottom: 0px!important;
}

    /* all fields in new lines */
    .kartenansicht_ve_datum_von_bis_spalte, .kartenansicht_ve_leiter_spalte,
    .kartenansicht_Ve_OrtOrt_spalte, .kartenansicht_Ve_Teilnahmegebuehr_spalte,
    .kartenansicht_ve_ampel_spalte, .kartenansicht_ve_details_link_spalte,
    .kartenansicht_ve_anmelden_link_spalte, .kartenansicht_ve_datum_von_bis_header_spalte,
	.kartenansicht_Ve_TerminListeZeit_spalte, .kartenansicht_Ve_Selekt1_spalte, .kartenansicht_Ve_OrtOrt_spalte,
	.kartenansicht_Ve_Teilnahmegebuehr_spalte, .kartenansicht_Ve_Selekt2_spalte, .kartenansicht_ve_ampel_spalte,
    .chrono_ansicht_ve_datum_von_bis_spalte, .chrono_ansicht_ve_leiter_spalte,
    .chrono_ansicht_Ve_OrtOrt_spalte, .chrono_ansicht_Ve_Teilnahmegebuehr_spalte,
    .chrono_ansicht_ve_ampel_spalte, .chrono_ansicht_ve_details_link_spalte,
    .chrono_ansicht_ve_anmelden_link_spalte, .chrono_ansicht_ve_datum_von_bis_header_spalte,
    .chrono_ansicht_zeile_ueberschrift,
    .treeview_vedetails_ve_datum_von_bis_spalte, .treeview_vedetails_ve_leiter_spalte,
    .treeview_vedetails_Ve_OrtOrt_spalte, .treeview_vedetails_Ve_Teilnahmegebuehr_spalte,
    .treeview_vedetails_ve_ampel_spalte, .treeview_vedetails_ve_details_link_spalte,
    .treeview_vedetails_ve_anmelden_link_spalte, .treeview_vedetails_ve_datum_von_bis_header_spalte,
    .treeview_vedetails_zeile_ueberschrift {
        display: block;
        clear: both;
        width: 100%;
        text-align: center;
    }

    .ve_ampel_gruen, .ve_ampel_gelb, .ve_ampel_rot {
        margin-left: auto;
        margin-right: auto;
    }
	
    .beschriftung_rahmen {
        width: 100%;
    }
	
	.img_footer_logo_links {
    width: 300px;
    height: auto;
	}
	
}


/* ####################### */
/* administration pages    */
/* ####################### */
.level1 {
  font-family: 'TheSansOsF';
  font-size: 22px;
    background-color: #333333;
    color: #FFFFFF;
    padding: 8px 14px 8px 14px;
    margin-left: 14px;
    margin-right: 14px;
    border: none;
    border-radius: 3px;
}

.level1:hover, .selected {
    color: #CCCCCC;
}

.verwaltung_reiter_rahmen {
    display: table;
    padding: 15px;
}

.verwaltung_reiter_menu {
    display: table-cell;
    vertical-align: top;
    width: 800px;
}

-verwaltung_reiter_vorschau {
    display: table-cell;
    width: 800px;
}

.cph_verwaltung_reiter_vorschau {
    display: table-cell;
    padding-top: 20px;
    width: 800px !important;
}

.lst_felderpool {
    width: auto;
    height: 200px;
    margin: 15px;
}

.anmeldung_vorschau_buttonrahmen {
    clear: both;
    width: 100%;
    text-align: center;
}

.beschriftung_rahmen_verwaltung {
    width: 250px;
}


/* ################################## */
/* new entries via automatic updates  */
/* ################################## */