/*************** Allgemeine Einstellungen ***************/

.small
{
   font-size: 9pt;
}
td
{
   font-size: 8pt;
}

/*************** Links, Font ***************/

a
{
   text-decoration: none;
   font-family: Open Sans, Verdana, Arial;
}


/*************** Eingabe-Felder ***************/

input[type=text], input[type=password], input:not([type])
{
   padding: 0;
   padding-left: 3px !important;
   height: 24px;
   color: #000;
}
select:not([multiple]):not([size])
{
   padding: 0;
   height: 24px;
   color: #000;
}
input[type=submit], input[type=button]
{
   height: 24px;
   padding: 1px 5px 1px 5px;
}
textarea
{
   padding: 0;
   padding-left: 3px !important;
   border-radius: 0 !important;
}
input, textarea, select
{
   border: 1px solid #888;
}
input.form-control, select.form-control, input.datepicker
{
   padding: 0;
   height: 24px;
   color: #000;
   border: 1px solid #bbb;
}
textarea.form-control
{
   color: #000;
   border: 1px solid #bbb;
}
div.form-control
{
   padding: 0px; 
   margin:0;
   vertical-align: middle;
   height: 18px;
   border: 1px solid #ccc;
   border-radius: 0;
}
div.form-control input:not([type])
{
   padding: 0;
   height: 16px;
   color: #000;
   width:100%;
   border:0;
   padding:0;
   margin:0;
}
.buttonitem .form-control
{
//   height: 30px !important;
}


input.form-control:focus, textarea:focus, select:focus
{
   border: 1px solid #000 !important;
}
.input
{
   width: 100%;
}
.ui-datepicker-title select
{
   color: #000;
   font-weight: normal;
}

.readonlyfield
{
   padding: 0;
   height: 24px;
   background-color: #ddd;
   border: 1px solid #ccc;
}

.table td, .table100 td
{
   font-size: 8pt;
}

.table100
{
   width: 100%;
}

.maininputtable td
{
   padding: 6px;
   font-size: 8pt;
}

.required
{
   padding-left: 3px;
   color: red;
}

.fieldgroup
{
   width: 99%;
   padding: 1px;
}
.fieldgroupreguired
{
   background-color: #FF8080;
}
.fieldlabel
{
  margin: 0;
  text-align: right;
  float: left;
  padding: 3px;
  width: 180px;
  vertical-align: top;
  line-height: 1.2;
}
.fieldlabellong
{
  text-align: left;
  width: 99%;
  padding-bottom: 0px;
  margin-bottom: 0px;
}
.fieldcontrol
{
  float: left;
  padding: 3px;
  width: calc(95% - 190px);
}
.fieldcontrol45
{
  float: left;
  padding: 3px;
  width: calc(95% - 490px)
}
.fieldcontrol55
{
  float: left;
  padding: 3px;
  width: calc(95% - 390px);
}
.fieldcontrol65
{
  float: left;
  padding: 3px;
  width: calc(95% - 290px)
}
.fieldcontrol10
{
  float: left;
  padding: 3px;
  width: 100px;
}
.fieldcontrolfull
{
  float: left;
  padding: 3px;
  width: 100%;
}

@media (max-width: 600px)
{
   .fieldgroup
   {
      padding: 0px;
   }
  .fieldlabel
  {
    display: block;
    width: 90%;
    text-align: left;
    margin: 0px 0px 0px 0px;
    font-weight: bold;
    overflow: none;
  }
  .fieldcontrol
  {
    display: block;
    width: 90%;
    margin: 0px 0px 10px 0px;
  }
  .fieldcontrol45
  {
    float: left;
    padding: 3px;
    width: calc(95% - 300px)
  }
  .fieldcontrol55
  {
    float: left;
    padding: 3px;
    width: calc(95% - 200px);
  }
  .fieldcontrol65
  {
    float: left;
    padding: 3px;
    width: calc(95% - 100px)
  }
  .fieldcontrol10
  {
    float: left;
    padding: 3px;
    width: 100px;
  }
  .fieldcontrolfull
  {
    float: left;
    padding: 3px;
    width: 100%;
  }
}

.begleitertable .fieldlabel
{
  text-align: left;
  width: 150px;
}


/*************** Tabellen-Listen ***************/

.listtable, .listtablebasis
{
   width: 100%;
   font-size: 8pt;
   overflow: hidden;
   border-width: 0;
   border-collapse: collapse;
   padding: 3üx;
}

.listheader, .listheader TD
{
   font-family: Open Sans, Verdana, Arial;
   font-size: 8pt;
   overflow: hidden;
   background-color: #D0D0D0;
   border-width: 0;
   padding: 3px;
}

.listheader A
{
   color: black;
}

.listitem
{
   font-family: Open Sans, Verdana, Arial;
   font-size: 8pt;
   background-color: #FCFCFC;
   border-width: 0px;
   border-color: #000080;
   border-style: solid;
}

.listitem, .listtable td, .listtablebasis td
{
   overflow: hidden;
   padding: 3px;
   vertical-align: top;
}

.listtable tbody tr:nth-of-type(even) td
{
   background-color: #e0e0e0; 
}

.listitemgray
{
   background-color: #e0e0e0; 
}

.listsection
{
   background-color: #808080 !important;
   color: white;
   font-weight: bold;
   padding: 3px;
   margin-top: 10px;
}

.bezahlt
{
   background-color: #C0FFC0;
}

.listtable tbody tr:nth-of-type(even) td.bezahlt
{
   background-color: #A0F0A0;
}

.nachlesetable td.left
{
   padding-right: 50px;
}
.nachlesetable td
{
   padding-bottom: 50px;
}
.nachleseimage
{
   float: left;
   padding-right: 20px;
   padding-bottom: 10px;
}

.forumlistitem TD
{
   background-color: white !important;
   border-bottom: 1px solid #c0c0c0;
}

.smarttable td
{
   padding-right: 8px;
}

@media only screen and (max-width: 480px)
{
   .responsivetable table, .responsivetable thead, .responsivetable tbody
   { 
      display: block; 
   }
   .responsivetable thead > tr
   { 
      position: absolute;
      top: -9999px;
      left: -9999px;
   }
   .responsivetable tr
   {
      display: block; 
      border: 1px solid #ccc;
      margin-bottom: 10px;
   }
   .responsivetable td
   { 
      display: block; 
      position: relative;
      padding-left: 120px !important;
      min-height: 30px !important;
      text-align: left;
   }
   .responsivetable td:before
   { 
      position: absolute;
      left: 6px;
      content: attr(data-title);
      width: 110px;
      height: auto;
      line-height: 0.85;
   }

   .nachlesetable table, .nachlesetable thead, .nachlesetable tbody, .nachlesetable tr, .nachlesetable td
   {
      display: block; 
   }

   .smarttable table, .smarttable thead, .smarttable tbody, .smarttable tr, .smarttable td
   {
      display: block; 
   }

   .listitem
   {
      white-space: normal !important;
   }
}

/*************** Kalender ***************/

.calendartable
{
   width: 100%;
   font-size: 8pt;
   table-layout: fixed;
   border: 1px solid #404040;
   border-collapse: collapse;
}

.calendarheader
{
   overflow: hidden;
   font-size: 8pt;
   text-align: center;
   font-weight: bold;
   color: #202020;
   background-color: #D0D0D0;
   border-width: 1px;
   border-color: #404040;
   border-style: solid;
   padding: 3px;
}

.calendarday
{
   overflow: hidden;
   font-size: 8pt;
   border-width: 1px;
   border-color: #404040;
   border-style: solid;
   padding: 3px;
}

.calendartoday
{
   background-color: #80FF80;
}

.calendarweekday
{
   background-color: #F8F8F8;
}

.calendarweekendday
{
   background-color: #E0E0E0;
}

.calendarinvalidday
{
   background-color: #E0E0E0;
}

.calendaritem
{
   font-size: 8pt;
   color: #404040;
   overflow: hidden;
   padding: 4px;
}

.calendaritem A
{
   color: #0000C0;
   font-weight: bold;
}

.calendarinfo
{
   font-style: italic;
}

.calendardayheader
{
   padding-bottom: 10px;
}

@media only screen and (max-width: 640px)
{
   .calendartable table, .calendartable tr, .calendartable td
   { 
      display: block; 
   }
   .calendartable td.calendarheader, td.calendarempty, tr.calendarempty, div.calendarempty
   { 
      display: none; 
   }
   table.calendartable, .calendartable tr
   { 
      border: 0;
   }
   td.calendarday
   { 
      border: 1px solid #404040;
      margin-bottom: 5px;
   }
}



/*************** Register ***************/

.registertable
{
   width: 100%;
   border:0;
}

.tab
{
   color: black;
   background-color: white;
   border-top: #000 1px solid;
   border-left: #000 1px solid;
   border-right: #000 1px solid;
   padding: 5px;
}

.tab A
{
   color: black;
   font-weight: bold;
   font-size: 8pt;
}

.tabunselected
{
   color: black;
   background-color: #E0E0E0;
   border-top: #000 1px solid;
   border-left: #000 1px solid;
   border-right: #000 1px solid;
   padding: 5px;
}

.tabunselected A
{
   color: #404040;
   font-weight: normal;
}

.tabspace
{
   border-bottom: #000 1px solid;
}

.tabdialog
{
   background-color: white;
   border-left: #000 1px solid;
   border-bottom: #000 1px solid;
   border-right: #000 1px solid;
   padding: 10px;
}

@media only screen and (max-width: 480px)
{
   table.registertable table, .registertable tr
   {
      display: block;
      border-bottom: 1px solid #000;
   }
   table.registertable td
   {
      display: block;
      position: relative;
      min-height: 16px;
      text-align: left;
   }
   table.registertable .tabspace
   {
      display: none;
   }
}


/*************** Module ***************/

.module
{
   margin: 5px 5px 0px 5px;
   padding: 5px 5px 5px 5px;
   border-top: #000 1px solid;
   border-left: #000 1px solid;
   border-right: #000 1px solid;
   border-bottom: #000 1px solid;
   white-space: nowrap;
}

.moduleselected
{
   background-color: #000;
   color: #fff;
   font-weight: bold;
}

.moduleunselected
{
   background-color: white;
   color: #808080;
   margin: 5px 5px 5px 5px;
}

.moduleregister
{
   float: left;
   padding: 6px 0px 6px 0px;
   font-size: 8pt;
}


/*************** Button ***************/

.buttonline
{
   white-space:nowrap;
   min-height: 35px;
   display: inline;
}

.buttonitem
{
   padding: 2px 5px 6px 0px;
   min-height: 22px !important;
   outline-offset: 0px;
   float: left;
   display: inline;
   line-height: 22px;
   vertical-align: middle;
}

.button
{
   border: #808080 1px solid;
   background-color: #E0E0E0;
   min-height: 17px !important;
   max-height: 17px !important;
   height: 17px !important;
   line-height: 17px;
   vertical-align: middle;
   padding: 0;
   display: table-cell;
}

.buttondropdown
{
   padding: 3px 6px 3px 6px;
   display: inline-block;
}

.buttondropdown i
{
   line-height: 16px;
}

.buttonicon
{
   padding: 3px 5px 2px 4px;
}

.buttonstandard
{
   padding: 3px 6px 3px 6px;
}


/*************** Dropdown-Felder ***************/

.dropdownmenu
{
   position:absolute;
   border:1px solid black;
   font:normal 8pt Open Sans, Verdana, Arial;
   line-height:18px;
   z-index:100;
   text-align:left;
   width:165px;
   background-color:#D0D0D0;
   //height: auto;
   //white-space: nowrap;
   padding-right: 5px;
}

.dropdownmenu a
{
   display: block;
   text-indent: 3px;
   padding: 2px !important;
}

.dropdownmenu a:hover
{
   background-color: yellow;
}


/*************** spezielle Elemente ***************/

.webpartheader
{
   margin-bottom: 12px;
}

.message
{
   border: 1px solid #000;
   margin-bottom: 15px;
}
.messageheader
{
   background-color: lightgray;
   padding: 3px;
}
.messagebody
{
   padding: 5px 5px; 5px; 5px;
   line-height: 140%;
}
.messagefooter
{
   padding: 3px;
   color: gray;
   font-style: italic;
   text-align: right;
}
.messagefooter A
{
   color: gray;
   font-style: normal;
}

.platzbuchungtable
{
   border-spacing: 3px;
   border-collapse: separate;
}
.platzbuchungtable TD
{
   padding: 3px;
}
.platzbuchungheader
{
   background-color: #C0C0C0;
}
.platzbuchungitem
{
   height: 100%;
   vertical-align: middle;
   text-align: center;
}
.platzbuchungstatusfrei
{
   background-color: lightgreen;
}
.platzbuchungstatusbelegt
{
   background-color: #FFC0C0;
}
.platzbuchungstatusmein
{
   background-color: yellow;
}

.adminpdf
{
   background-color: white;
   padding: 4px 2px 4px 2px;
   margin: 3px;
}
.adminpdfauswahl
{
   background-color: #c0c0c0;
   padding: 4px 2px 4px 2px;
   margin: 3px;
}
.adminpdfheader
{
   background-color:#a0a0a0;
   color: white;
   text-align: center;
   font-weight: bold;
   margin: 0px 0 8px 0;
   padding:3px;
}
.adminpdfbox
{
   border: 1px solid #c0c0c0;
   margin: 10px 0 15px 0;
}

.adminbox
{
   float:left;
   width:500px;
   background-color:#f0f0f0;
   border:1px solid #000;
   margin:10px 20px 20px 0px;
}
.adminboxheader
{
   background-color:#a0a0a0;
   color:white;
   padding:5px 10px 5px 10px;
   font-weight: bold;
}
.adminboxcontent
{
   padding:10px;
}

.workflowfield select, .workflowfield input, .workflowfield textarea
{
   background-color: #D0D0D0;
   padding: 0px;
}
.workflowfieldrequired select, .workflowfieldrequired input, .workflowfieldrequired textarea
{
   border: 1px solid red;
   padding: 1px;
}

.antragrequired
{
   border: 1px solid red;
   padding: 1px;
   color: red;
}

.tablestartactions td
{
   padding: 6px;
}

/*************** GUI-Elemente ***************/

.draghover
{
   background-color: yellow;
}

.datepicker
{
   width: 80px;
}

.content.events.item.dialog .datepicker
{
   width: 200px;
}

.ui-datepicker-trigger
{
   padding-left: 2px; vertical-align: middle;
}


/*************** Lightbox ***************/

.lightboxbackground
{
   display:none;
   position:absolute;
   top:0%;
   left:0%;
   width:100%;
   height:100%;
   background-color:black;
   z-index:1001;
   -moz-opacity:0.8;
   opacity:.50;
   filter:alpha(opacity=50); 
}

.lightboxbackgroundvisible
{
   background-color:#f0f0f0;
}

.lightbox
{
   display:none;
   font-size:10pt;
   position:absolute;
   top:50%;
   left:50%;
   margin: -40px 0 0 -150px;
   width:300px;
   height:80px;
   padding:1px;
   border:1px solid black;
   background-color:white;
   z-index:1002;
   overflow:auto;
   text-align:center;
   vertical-align:middle; 
}

.blog
{
   background-color:#e8e8e8;
   color:#000000;
   text-align:left;
   padding:5px;
}

.bloglink
{
   color:#404040;
}

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

.datakachel
{
   text-align:center;
   cursor:pointer;
   width:150px;
   height:150px;
}

canvas
{
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

table.responsivespalten
{
   //width: 100% !important;
}

@media only screen and (max-width: 640px)
{
   table.responsivespalten, table.responsivespalten > tbody, table.responsivespalten > tbody > tr, table.responsivespalten > tbody > tr > td
   { 
      display: block; 
      width: 100% !important;
   }
   table.responsivespalten
   {
      border: 2px solid #888;
      padding: 5px;
   }
}

.rechnunganrede, .rechnungtitel { width:80px; padding-right:5px; }
.rechnungvorname, { width:calc(50% - 80px); }
.rechnungnachname { width:calc(50% - 80px); padding-left:5px; }
.rechnungplz { width:80px; padding-right:5px; }
.rechnungland  { width:100px; padding-left:5px; }
.rechnungort { width:calc(100% - 180px); }

.itemid
{
   color: #888;
   font-size: 8pt;
}

@media only screen and (min-width: 480px)
{
  .colwidth50     { padding: 1px !important; width: 50px; }
  .colwidth60     { padding: 1px !important; width: 60px; }
  .colwidth70     { padding: 1px !important; width: 70px; }
  .colwidth100    { padding: 1px !important; width: 100px; }
  .colwidth330    { padding: 1px !important; width: 330px; }
  .colwidthREL260 { padding: 1px !important; width: calc(100% - 260px); white-space: nowrap; }
  .colwidthREL650 { padding: 1px !important; width: calc(100% - 650px); white-space: nowrap; }
  .colwidthREL770 { padding: 1px !important; width: calc(100% - 770px); white-space: nowrap; }
  .colwidthREL590 { padding: 1px !important; width: calc(100% - 590px); white-space: nowrap; }
  .colwidthREL710 { padding: 1px !important; width: calc(100% - 710px); white-space: nowrap; }
  .colwidthREL390 { padding: 1px !important; width: calc(100% - 390px); white-space: nowrap; }
  .colwidthREL510 { padding: 1px !important; width: calc(100% - 510px); white-space: nowrap; }

  .spankontopicker330 { padding:0; margin:0; border:0; white-space:nowrap; width:330px; }
  .spankontopicker430 { padding:0; margin:0; border:0; white-space:nowrap; width:430px; }
}
@media only screen and (max-width: 480px)
{
  .spankontopicker330, .spankontopicker430 { }
}

.inputpicker
{
   height: 22px !important;
   border-color: #bbb !important;
}

.inputpicker div
{
  float:left;
  padding:3px 3px 3px 3px;
}

.mitgliedsantrag td
{
   padding-right: 10px;
   padding-bottom: 10px;
}

INPUT[type=checkbox], INPUT[type=radio]
{
   margin-right: 6px;
}

.optiondetails
{
   color: #808080;
   font-size: 10pt;
   margin-bottom: 12px;
}

.starttabelle td
{
   padding-right: 15px;
}

.boxdragdrop div
{
   margin-bottom: 20px;
}

.datatabellebilder td
{
   padding-right: 10px;
   background-color: #e0e0e0;
   text-align: center;
}

.datatabelle
{
}

.calendarday
{
   line-height: 140%;
}

.standard
{
   line-height: 1;
}

.optionsubnavi
{
   padding: 5px;
   margin: 5px 5px 5px 0px;
   border: 1px solid black;
   float: left;
   background: #e0e0e0;
   lineheight: 200px;
   cursor: pointer;
}
.optionsubnavi:hover
{
   background: #f8f8f8;
}
.optionsubnaviselected
{
   background: white;
}