/*#1F8A46   alternativfarbe.. basis der Hoodie?????*/

* {
    margin: 0;
    padding: 0;
     
}

body {
    text-align: center;
    font-family: 'sans-serif', 'Tahoma';
    font-weight: 400;
    color:#555;
    font-size: 1em;

  height: auto;
}

/* abgedeckt mit light dark ?=*/
a:link {color:#000000 }/*797979*/ 
a:visited { color:#000000}
/*a:hover {color: #555555;}/*background-color: #45a049;*/ 



table {
    display: table;
    border:  1px dashed;
    border-radius: 16px;
    overflow: hidden;
    text-align:left;
    border-collapse: inherit;
    border-spacing: 0px 0px;
    width:98%;
}

th{
    display:table-cell;
    padding:5px;
    padding-left:5px;
    padding-right:5px;
    font-weight: bold;

}
td{
    display:table-cell;
    margin:5px;
    padding-left:5px;
    padding-right:5px;
}

table i {
    cursor: pointer;
}

form table {border:unset;}

form {
    
    display: inline-block;
    color:#000;
    /*background-color: #f2f2f2;*/
    border-radius: 10px;
    margin: 5px auto;
    padding:20px;
    background-color: #d9ecdc; /*evtl das Hoody grün als Basis?*/
    box-shadow: 2px 2px 8px 1px rgba(0,0,0,0.75) inset;

}
form :disabled {
    background-color: grey;
    color:lightgrey;
}

form label{
    position:relative;
    /*display: inline-block;*/
    /*padding-left:10px;*/
   /* width:100%;
    text-align:left;*/
   float:left;
   margin-top:10px;
}

#loginForm label{

    display: inline-block;
    width:100%;
    text-align:left;
    float:unset;
   
}

button {
    background-color: #1Fa838; 
    border: none;
    padding: 10px 10px;
    text-decoration: none;
    margin: 5px 5px;
    cursor: pointer;  
    border-radius: 10px;
    /*color:white;*/

}


input[type=text],textarea,input[type=password],input[type=email],input[type=date],input[type=time],input[type=number],input[type=datetime-local],input[type=reset], select {
  width: 100%;
  /*max-width:150px;*/
  padding: 12px 20px;
  margin: 2px 0px 8px 0px;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=submit],input[type=reset],input[type=file] {
  width: 100%;
  background-color: #1Fa838;
  box-shadow: 2px 2px 2px green;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px
}

input[type=submit]:hover {
  background-color: #45a049;
}

input[type=submit]:disabled {
  background-color: grey;
  cursor: not-allowed;
}

input:required {
  border-color: #800000;
  border-width: 3px;
}


fieldset {
    /*background-color:#2a3583;*/
    max-width:90vw;
   
    padding:15px;
    border-radius:16px;
    border: 1px solid;
    
    box-shadow: 1px 2px 2px 1px lightgray;
}

legend {
    font-weight: bold;
    /*margin-left:15px;*/
    padding-left: 3px;
    padding-right: 3px;

}

/*a div {color:inherit;}*/


/******************************************************************************/
/******************************************************************************/
/******************************************************************************/
/* Klassen */
/******************************************************************************/
/******************************************************************************/
/******************************************************************************/

.wrapper_div {
    display:flex;
    flex-wrap:wrap;
    justify-content: center;
    
}

.content_box {
    flex-basis: auto;
    margin :10px;
    min-width:320px;
    box-sizing: border-box;

    max-width:max-content;
}



a:link.index_news  {color:aqua;}
a:visited.index_news  { color:cornflowerblue;}


.private button,.private .table_header,tr.private_list,.private_list button{background-color: palegreen;}

tr.private_list{color: black;}

 
.menue_icon  {  width:100%;}

.menue_item {
    /*border: solid 1px;*/
    padding: 10px;
    float:left;
    font-weight: 700;
    font-size:1.5em;
    margin:0.5vw;
    box-sizing: border-box;
    min-width:50px;
    border-radius: 20% 20%;
    background-color:#1Fa838;
    box-shadow: 2px 2px 5px black;
}
.menue_item:hover{color:white;}
i:hover{color:white;}

.form_button {
    border: solid 1px;
    padding: 10px;

    font-weight: 700;
    font-size:1.7em;
    margin:1vw;
    box-sizing: border-box;
    min-width:55px;
    border-radius: 20% 20%;
    background-color:#1Fa838;
}


button#topBtn {
    border:#000 1px solid;
    display:none;
    padding: 5px;
    font-weight: 700;
    font-size:1.5em;
    margin:5px;
    box-sizing: border-box;
    min-width:25px;
    border-radius: 20% 20%;
    background-color:#1Fa838;
    
    position:fixed;
    bottom:55px;
    right:1px;
    z-index:99;
    outline:none;
    cursor:pointer;
}

button#TerminSpeichern, button#TerminLöschen, button#TerminAbbrechen {
    font-size:1.5em;
    min-width:55px;
}

.tooltip {
    position: absolute;
    display: none;
    background-color: #FFFFFF;
}

.popupcontent {
    position: absolute;
    visibility: hidden;
    overflow: auto;
    border: 1px solid #CCC;
    background-color:#F9F9F9;
    border:1px solid #333;
    padding:5px;
}

/* Table Klassen */

.table {
    display: table;
    border:  1px ridge white;
    border-radius: 16px;
    overflow: hidden;
    text-align:left;
    border-collapse: inherit;
    border-spacing: 0px 0px;
    width:98%;
}

.table_header {
    display: table-row;
    margin:0px;
    padding:0px;
    background-color: #1Fa838 /*#1Fa838*/;
    color:#000;
}

.new { background-color:red;}

.th{
    display:table-cell;
    padding:5px;
    padding-left:5px;
    padding-right:5px;
    font-weight: bold;
    
    /*min-width: 130px;*/
}

.th.green{background-color: #1Fa838;} 

.table_row {
    display:table-row;
}

.table_row_hide {
    display:none;
}

.table_cell {
    display:table-cell;
    margin:5px;
    padding-left:5px;
    padding-right:5px;
}

table.responsive{
    table-layout:fixed;
    width:100%;
    word-wrap: break-word;
    border-collapse: collapse;
    border:unset;
    font-size:12px;
    border-radius: unset;
}

tr.responsive{
    border-bottom: 1pt solid;
}

.error_msg_div {
    background-color: #ff292b;
    font-size: 22px;
    z-index: 101;
    bottom: 0;
    left: 0;
    display: block;
    position: fixed;
    width: 100%;
    height:15%;
    min-width:250px;
    /*    
         /* Sit on top of the page content */
    /* Hidden by default */

    /*
    
        height: 100%; 
    
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0,0,0,0.5); /* Black background with opacity */



}
.success_msg_div {
    background-color: green;
    font-size: 22px;
        z-index: 101;
            bottom: 0;
            left: 0;
            display: block;
            position: fixed;
            width: 100%; 
            height:5%;
            min-width:250px;
/*    
     /* Sit on top of the page content */
     /* Hidden by default */
 
/*

    height: 100%; 

    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5); /* Black background with opacity */


    
}

.error_msg_inner {
    
}

/*wird u.a. im Termin für Teilnehmer benutzt*/
div .loginForm{
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
  min-width:185px;
  margin: 0 auto;
}
/* LOGIN & REGISTER FORM */
div .registerForm, .lostPassword{
    min-width:185px;
    padding:unset;
    background-color: unset;
    text-align:left;
    display: flex;
    justify-content: center;
    border-radius:10px;
  
}


#lostPasswordForm, #registerForm, #loginForm, #changePassword, #changePasswordConfirm, #changeEmail, #changeEmailConfirm, #adminLogin,#ProfileForm{
    padding:20px;
    /*background-color:unset;
    color:unset;*/
    background-color: #d9ecdc; /*evtl das Hoody grün als Basis?*/
 /*   border: 1px dashed;*/
    box-shadow: 2px 2px 8px 1px rgba(0,0,0,0.75) inset;
 /*box-shadow: 2px 2px 8px 1px lightgray;*/

}



.loginFormWrapper {
    border-radius:10px;
    /*border: 1px solid;*/
    display:flex;
    flex-direction: column;
    justify-content: left;
    max-width:400px;
    float:left;
    padding:10px;
    /*margin:20px;  in mobileview zu gepresst*/
}
/* LOGIN & REGISTER FORM */

div .ProfileForm{
    border-radius: 5px;
    background-color: #f2f2f2;
    display: inline-block;
    margin-top: 15px;
    padding-top:5px;
    max-width:350px;
    /*width:100%*/
}

div .CheckboxForm{
    /*border-radius: 5px;*/
    background-color: #f2f2f2;
    display: inline-block;
    margin: 5px auto;
    /*width:100%;*/
}

div form{
    border-radius: 10px;
    /*background-color: #f2f2f2;*/
    display: inline-block;
    margin: 5px auto;
   /* width:100%; */
}





#AppointmentViewFilterDiv label {
     padding:10px;
}


div .Background {
display:flex;flex-wrap:wrap;justify-content: center;
}

div .UserProfile {
    border-radius: 25px;
    /*background-color:#2a3583;*/
    border: 2px solid;
    margin:10px;
    padding:15px;    
    /*color:white;*/
    min-width:350px;
    box-sizing: border-box;
    box-shadow: 1px 1px 1px 1px lightgrey;
}

div .VorstandUserProfile {
    border-radius: 25px;
    background-color:#2a3583;
    margin:10px; margin-left:0px; margin-right:0px;
    padding:15px; padding-left:5px; padding-right:5px;    
    color:white;
    min-width:350px;
    box-sizing: border-box;
   /* font-weight:normal;*/
}

div #UserNumbers.UserProfile {
    display:flex;
    flex-direction:column; 
}

/* Vorstand Members */
.member {
    display:flex;
    flex-flow: row nowrap;
    flex: 1 100%;
    border: 1px solid lightgrey;
    background-color: #2a3583;
    
    color:white;
}
.member .column_wrapper:hover{background-color:#5461c4;}
.member .column_wrapper{
    display:flex;
    flex-direction: column;
    align-items: stretch;
    align-content: stretch;
    width:100%;
    cursor: pointer;
} 

.member .user_picture {

    position: relative;
    height: 100px;
    width: 100px;
    border-right: 1px solid black;
}
.member .status {
    width: 100%;
    position: absolute;
    bottom: 0px;
    z-index: 2;
}
.member .active {
    background-color: #1Fa838;
    color: black;
    cursor: pointer;
}
.member .inactive {
    background-color: grey;
    color: black;
    cursor: pointer;
}

.member #user_info {
    display:flex;
    flex: 3 auto;
    align-content: stretch;
    margin-top: 5px;
    margin-left: 15px;
}
.member #last_login {
    display:flex;
    flex: 1;
    align-content: stretch;
    margin-left: 15px;
    margin-bottom: 5px;

}
.member #user_hidden_details {
    display:flex;
    display:none;
}
/* ENDE Vorstand Members */

.a_button_div {
    background-color:#1Fa838;
    box-shadow: 2px 2px 2px green;
    border:none;
    padding: 10px 10px; 
    margin: 10px 5px; 
    cursor:pointer;
    border-radius:10px;
    color:white;
    text-decoration:none;
    font-family:inherit;
}
.a_button  {text-decoration:none; font-family:inherit; }

.burger_menue:link { color:#ffffff;}
.burger_menue:visited { color:#ffffff;}
.burger_menue:hover { color:#555555;}
.burger_menue:active { color:green;}


/* IDs */

#overlay {
    position: fixed; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    max-height:100%;
    overflow:auto;
    border: red solid 2px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.9); /* Black background with opacity */
    color:white;
    z-index: 100;
}

/*portal*/

#portal_root {
    position: absolute;
    height:100%;
    width:100%;
    min-height:350px;
    text-align: left;
    color: #000000;
    background-color: #FFFFFF;
}

#portal_top {
    border: 1px solid #000000;
    min-height:100px;
    height: 185px;
    background-color:#2a3583;
    color:#fffdfd;
    z-index:100;
}
#portal_header{
   position:relative;
   height:100%;
   width:100%;
}
#portal_header_img_div{
   position:absolute;
   height:100%;
   width:100%;
  
}
#portal_header_img{
    object-fit:cover;
    height:100%;
    width:100%;
        
}

#portal_header_text_div{
     position:absolute;
     margin:15px;
}

#portal_base {
  
    width:99%;
    height:100%;
 
}

#portal_base:after {
    content: "";
    display:table;
    clear: both;
}

#portal_left {
    float: right;
    
    padding:30px;
}

#portal_right {
    /*width:100%;*/
    float: left;
    padding:30px;

}

#portal_middle {
    /*min-height:480px;*/  /*-2x padding oben unten?!*/
    height:100%;
    padding: 3px;
    float: left;
    min-width:70%;
    word-break: normal;
    /*overflow-wrap: anywhere;*/
    word-wrap: break-word;
    /*min-width:600px;*/
   /* max-width:70%;*/
    text-align:center;
    align-items:center; 
    position:relative;
}

#portal_bottom {
    display:block;
    float:left;
    width: 100%;
    background-color: #2d2d2d;
    margin:0px;
    padding:0px;
    z-index:100;
}

#portal_ende {background-color: #2d2d2d;}

/*main*/
#main_top {
    position:relative;
    background-color:#2a3583;
    color:#fffdfd;
    z-index:100;
}

#main_top::after {
    content: "";
    display:table;
    clear: both;
}

#main_base {
    z-index:0;
 
}

#main_base::after {
    content: "";
    display:table;
    clear: both;
}

#main_left {
    float: left;
    border: 1px solid #FF0000;
    padding:15px;
    width: 10%;
    box-sizing: border-box;
}

#main_right{

  /*visibility: hidden;*/
    position: relative;
    overflow: auto;
    /*border: 1px solid #CCC;*/
    /*background-color: rgba(40,70,100,0.75);*/
    border-radius:15px;
    /*border:3px solid #ffffff;*/
    /*padding:5px; muss raus weil sonst die navileiste zu hoch scrollt*/
    display:none;
    /*height:100%;*/
    min-width:30%;
    z-index:101;
    width:100%;
    left:0px;
    top:5px;
}



#main_middle{
    padding: 5px;
    padding-top:0px;
    overflow: auto;


}

#main_bottom{
    color:white;
    background-color: #2d2d2d;
    position: sticky; bottom:0px;
    margin-top:10px;
    width:100%;
     z-index:99;
}

#main_ende{
    background-color: #2d2d2d;
}

/* Logo */
#logo{
    max-width: 150px;
    width:150px;
    height:auto;
    float:right;
}

#logo_portal{
    max-width: 150px;
    width:30%;
    height:auto;
    float:left;
}

/* LOGO in Abhängigkeit von Bildschirm */
@media screen and (max-width: 992px ){
    #logo{max-width:150px;}
}
@media screen and (max-width: 600px ){
    #logo{max-width:100px;}
}
@media screen and (max-width: 360px ){
    #logo{max-width:50px;}
}

#logo_sticky {
    max-height: 50px;
}

#menu_logo_sticky {
    align-items: center;
    display:block;
    visibility: hidden;
    flex-wrap: nowrap;
    font-weight: 700;
    font-size:2.1em;
    box-sizing: border-box;
    /*float:right;*/
    position:absolute;
   right:3px;
    top:3px;
    height:50px;
    width:50px;
    z-index:-1;
    opacity: 0.6;
}

/*Login Form*/
#username {font-size:12pt;}
#password {font-size:12pt;}

.a_button_div.login_button {
 
    background-color:unset;
    color:unset;
    border: 1px solid #eee;
    
}

 a.a_button:visited,a.a_button:link{color:unset;}


/* Navi */
#test_navi {
    /*position: -webkit-sticky; /* Safari */
    /*
    position: sticky;
    top:0px;
    background-color: #2a3583;
    
    */
    display: inline-flex;
    flex-wrap: wrap-reverse;
    justify-content: flex-start;

    /*die sind für vorstand view test navi*/
    visibility:visible;
    width:100%;
    overflow-x: auto;   
    flex-basis: fit-content;

}

#test_navi::after{
    content: "";
    display:table;
    clear: both;
}
#navi_wrapper {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top:0px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    background-color: #2a3583;
    visibility:visible;
    z-index:100;
   
}

#navi_wrapper::after{
    content: "";
    display:table;
    clear: both;
}
 /*#appointmentsign button{color: #cc0000;}  #Abmelden*/
/*#appointmentsign button{color:#006633 }    #Zustimmen*/

.teilnehmer {
    overflow:auto;
    text-align:center;
    border-spacing: 5px 10px; 
    border-bottom: 2px solid #8ea0c8;
    border-collapse: collapse; 
    border:0px;
    border-radius:16px;
}

.teilnehmer th {background-color: #1Fa838;width:150px;max-width:150px;}
.teilnehmer tr {border-bottom: 2px solid #797979;}
.teilnehmer td {border-bottom: 2px solid #797979;padding:3px;}

.teilnehmer input[type=text],.teilnehmer textarea,.teilnehmer input[type=password],.teilnehmer input[type=email],.teilnehmer input[type=date],.teilnehmer input[type=time],.teilnehmer input[type=number],.teilnehmer input[type=datetime-local],.teilnehmer select {
    padding: 5px 5px;
    margin: 5px auto;
}

#teilnehmer_liste {
    overflow:auto;
    text-align:center;
    border-spacing: 5px 10px; 
    border: 2px solid black;
    border-collapse: collapse; 
    border-radius:0px;
    width:100%;
}

#teilnehmer_liste tr {border: 2px solid black;}
#teilnehmer_liste th {border: 2px solid black;}
#teilnehmer_liste td {border: 2px solid black;padding:3px;}

#termine button{padding:10px 0px;}

#ResultList input{padding:10px;margin:0px;/*width:unset;*/}
.items {padding:1px; margin-top: 8px; }

#ResultList .items div{padding:10px;margin-top: 10px;border:1px outset  black;background-color:#2a3583;color:white; }
/*#ResultList td {vertical-align: top;}*/


#teilnehmerliste table{ }

.teilnehmer_result_table {border:solid 3px; }
.teilnehmer_result_table i {
    text-align: center;
    padding: 15px 0;
    margin:3px;
}

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

.appointment_list_management_footer_div{display:flex;justify-content:center;}

.appointment_list_management_footer_div button{padding:10px 0px;margin:5px 5px;box-sizing: border-box;min-width: 55px;}
.appointment_list_management_footer_div i {padding:10px;}

/*#mitglied td{padding-left:8px;padding-right:3px;}
#mitglied th{}*/


.fangkarte{
    font-size: 13px;
}
 /*.fangkarte label {padding:unset;}*/
 .fangkarte input {  padding: 10px;
  margin: 5px 0;}


/* Toggle Switch */
.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
  padding:0px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider, .slider-big {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider-big:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider, input:checked + .slider-big {
  background-color: #1Fa838;
}

input:focus + .slider , input:focus + .slider-big{
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(16px);
  -ms-transform: translateX(16px);
  transform: translateX(16px);
}
input:checked + .slider-big:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round, .slider-big.round {
  border-radius: 34px;
}

.slider.round:before,.slider-big.round:before {
  border-radius: 50%;
}

/* Toggle Switch Ende*/

/* TABS */
 /* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;

}
.tab.hidden{display:none;}


/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 10px 10px;
  transition: 0.3s;
  margin:0px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ccc;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #aaa;
}

/* Style the tab content */
.tabcontent {
    
  padding: 6px 12px;
  /*border: 1px solid #ccc;
  border-top: none;*/
} 

.tabcontent.hidden{
   display:none; 
}
/*TABS ENDE*/

/* media */
@media screen and (prefers-color-scheme: dark) {
  /* dunkles Farbschema für die Nacht */
  body { color: white; background-color: black;background: black; }

  a {color: #FFFFFF;}
    a:link {color:darkslateblue;text-decoration:none; }/*797979*/
    a:visited { color:darkslateblue;text-decoration:none;}
    a:hover {color: #555555;}/*background-color: #45a049;*/ 
    a:active{color:red}
    
    .menue:visited { color:#000000}
        
    button:visited{color:#000000}

    #navi_break_line{background-image: linear-gradient(#2a3583,black);}
    
    .a_button_div.login_button {color:white;border: 1px solid #EEE;}
}

@media screen and (prefers-color-scheme: light) {
  /* helles Farbschema */
  body { color: black; background-color: white;background: white; }
    a {color: #000000;}
    a:link {color: #000000; text-decoration:none;}/*797979*/
    a:visited { color:#000000}
    a:hover {color: #555555;}/*background-color: #45a049;*/ 
    a:active{}
    
    .menue:visited { color:#000000}
  
    button:visited{color:#000000}

    #navi_break_line{background-image: linear-gradient(#2a3583,white);}
    
    .a_button_div.login_button {color:black;border: 1px solid #000;}
}

@media print {
       /* h2 { 
        break-before: page; 
    }*/
  h1, h2, h3, h4, h5 {
    break-after: avoid;
    color: black;
    background-color: white;
  }
    #test_navi1,#main_top,#main_bottom,#printButton,#topBtn,form,button,label,#addTeilnehmer,#deleteTeilnehmer,i,hr {
        display: none !important;
  }
  @page {
  size: A4;  
 
}


}

#cookie-popup { 
  text-align: center; 
  background: #fff;
  color: #000;
  position: fixed;
  top: 0px; 
  left: 0;
  right: 0;
  z-index: 9999;
  font-size:14px; 
  line-height:20px;
  padding: 20px;
  border: 2px solid red;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
  -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
  }
 
#cookie-popup.hidden {
  display: none;
}
#cookie-popup .hinweis {
    margin: 15px;
    font-size: 20px;
}
#cookie-popup .more {
    margin: 15px;
}