/* Die annordnung enrspricht der Priorität bzw Reihenfolge in welcher die Elemente vom Browser ausgewählt werden
und dient dazu falls einige Elemnte doppelt ausgewählt werden zu verstehen warum einige attribute überschrieben werden*/

/* A Attribute sind inline style elemente wie z.b. <div style="width:50%;"> </div>*/

/* B) ID selektiert */

#inputArea {
    width: 100%;
}

#zugang, #abgang, #stichtag {

    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

#zugang > *, #abgang > *, #stichtag > *, #stichtagVVVO > * {

    margin-top: 1.0em; 
}

#hinweisEingabeStichtag {
    
    display:none;
    background-color: #e7c157;
  /*   font-size: 1.2em; */
  /*  font-weight: bold;   */
  /*  line-height: 1.4em;  */
}

#btnHinweisEingabeStichtag {
    
     background-color: #e7c157;
     border: 2px solid black;
     text-align: center;
    
}

.arrow-down {
    width: 0; 
    height: 0; 
    border-left: 0.5em solid transparent;
    border-right: 0.5em solid transparent; 
    border-top: 0.5em solid #000;
    display: inline;
    float:right;
    position: relative;
    right: 5px;
    top: 4px;
}

#serverResponse {
    text-align: center;
    font-weight: bold;
    font-size: 1.2em;
    padding: 5px;
}

#cb_saveLogin {
    margin-bottom: 10px;
}

/*#loggedInArea {
    display:none;
}*/   

#tableTamTierbestandsaenderungBox {
    overflow: scroll;
}

#descriptionBestandsaenderung > #bestandsaenderung {
    margin: 10px 0 0 0;
}


#btnSync{
    background-image: url(../img/Sync_133x133.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-origin: padding-box; 
}

#btnSync > span{

    font-size: 1.6em;
    line-height: 1.4em !important;
    width: 1.4em;
    height: 1.4em;
    padding: 0;    
    color: yellow;
    background-color: inherit; /*#0055A4;*/
    background-repeat: no-repeat;
    border-radius:50%;
    
}

/*#btnLoginWrapper{
    
    display: flex;
    text-align:center;
        
} */

#btnMeldenSync, #btnWrapperPinChange {
    
    text-align: center;
    
}

#btnInfoBestand {
    background-image: url(../img/button_info.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-origin: padding-box; 
}

/*#btnLogin{  */
    /*margin: 0.5em auto 0.5em auto;*/
   /* margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;    */
    /*display: inline;*/
    /*font-size: 1.4em;
    height: 100px; 
    width: 100%;
    float:left;
    text-align: center;
    line-height: 100px;
    padding: 0;
    border-radius:16px;
}   */

.clear {
    clear:both;
}

#btnMelden > span, #btnSync > span, #btnLogin > span, #btnInfo > span{
    
  display: inline-block;
  vertical-align: middle;
  line-height: normal;  
      
}

#menuBox {
   /* margin-top: 1.0em;  */
}

.inputBlock > div + div {
    margin-top: 10px;
}


#canvasForServerresponseBox {
    display: block;
}

#selectNutzungsArtStichtag {
    
    display: none;
    
}

/*#btnPinChange, #btnMelden  {
    display: none;
} */
        

/* C) anderen Attribute z.B. Klassen und Pseudoklassen selektiert */

.myButton
{
  /*  margin-top: 0.5em;
    margin-bottom: 0.5em;   */
    margin-left: auto;
    margin-right: auto;
    /*display: inline;*/
    font-size: 1.4em;
    font-weight: bold;
    height: 100px; 
    width: 100%;
    text-align: center;
    line-height: 100px;
    padding: 0;    
    display: block;
    border-radius:16px;
}

/*.inputMeldeDaten, .nutzungsArt > option, .betriebsNummer > option {
    text-align: center;
}*/

center .button {
    width: 40%;
    text-align: center;
    font-size: 1.0em;
    /*background-color: #00CD66;*/
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

/*center .button:active {
     background-color: #555555;
} */

.bestandsAenderungUeberschrift {
    font-weight: bold;
}

.table {
    display: table;
}

.tableRow {            
    display: table-row;
}

.tableData {
    display: table-cell;
    /*vertical-align: top !important;*/ 
    padding: 0 !important;
}

/*.button.wide {
    margin-top: 1.5em;
}  */

.table + * {
    margin-top: 1.0em !important; 
}

/*diese CSS klassen sind aus dem browser quellcode der chaynsapp,
um ihr aufklapp menü etwas individueller zu gestalten, bei updates kann es sein, dass die 
Klassennamen sich ändern und man hier anpassen muss*/

.accordion__head {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    font-size: 1.4em;
}  


/*.FoldOutTableRowHeadline {
    padding-top: 1.0em;
    padding-bottom: 1.0em;
    font-size: 1.4em;
    font-weight: bold;
}   */

/*.FoldOutTableRowHeadline.Animate:after {
     font-size: 1.4em; 
}

.FoldOutTableRow.FoldOutTableMainHeadline {
    font-size: 1.4em;
    line-height: 1.2em; 
}*/

/* D) Elementnamen z.B. th td a div usw. und Pseudoelemente (wie :before und :after) selektiert */
/* html, */
body{
   /* height: auto !important;  
    font-size: 100%;   */
}

/*#bodyBox{
    height: 100% !important;
    font-size: 100%;
    border: 5px solid green;
}*/

input[type="text"], input[type="number"] {
    /*margin-top: 10px;*/
    font-size: 1.2em;
    line-height: 1.2em;    
    width: 100%;
    padding: 4px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

input[type="password"] {

    margin-top: 10px;
    width: 100%;
    font-size: 1.2em;
    padding: 4px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

/*input[class="inputMeldeDaten"]:before {
    
  content: '';
  display: inline-block;
  height: 50%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing 
  
}*/

input[class="inputMeldeDaten"], input[class="hasDatepicker"], .selectPinChange, .inputPinChange {
    /* margin-top: 1.0em; */
/*    min-width: 70%;*/

/*    display: inline-block;
    vertical-align: middle; */
    font-size: 1.2em;
    line-height: 1.2em;
    border: 2px solid #1C4582;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.selectPinChange, .inputPinChange {
    
     border-radius: 6px;
     -webkit-radius: 6px;
     -moz-radius: 6px;
    
}

/*        div {
    margin-top: 0px;
    padding: 0px;
}*/

#bestandsaenderung > div, #bestandsaenderung > div > div  {
    margin-top: 10px;
}

#hasDatepicker {
   
    font-size: 1.2em;
    line-height: 1.2em;
    border: 2px solid #1C4582;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    
}

table, th, td {
    /*border: 1px solid black;*/
    border-collapse: separate;
}

th, td {
    padding: 5px 0 5px 0;
}

td > input {
    vertical-align: middle;
}

select {
   padding: 2px;
  /* font-size: 16px;
   line-height: 1; */
   border: 2px solid #1C4582;
   border-radius: 0;
   display: block;
  /* height: 34px; 
   -webkit-appearance: none;*/
    font-size: 1.2em;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

/* HAT keine auswirkung  select > option{
    
    color:white !important;
    background-color: blue !important;
    
}     */

img {
    vertical-align:middle;
}

a, a:visited {
    
    color: inherit !important; 
    text-decoration: none !important;
    transition: background 150ms ease-in-out !important;
    
}

/*Login Styles Login Dialogue / Pin Change Dialogue / MyCustom Dialog it is my own universal dialog*/
div#overlay, div#dbaDialogCustomOverlay {
    z-index: -1;
    background: #000;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    text-align: center;
     opacity:0;
     -o-transition: opacity 1s ease, z-index 1s;
    -webkit-transition: opacity 1s ease, z-index 1s;
    -moz-transition: opacity 1s ease, z-index 1s;
    transition: opacity 1s ease, z-index 1s;
   
}

div#overlay.activeOverlay, div#dbaDialogCustomOverlay.activeOverlay
{
    z-index: 2999;
    opacity:0.6;
}

div#loginBox, div#dbaDialogCustomBox {
    display: none;
    position: absolute;
    z-index: 3000;
    margin: 0px auto 0px auto;
    width: 95%; 
    /*max-height: calc(80% - 120px);*/
    top: 100px;
    right: 2.5%;
    left: 2.5%;
    background: #FFF;
    color: #000;
}

.dbaDialogCustomContent {
    max-height: 70%;
    overflow-y: scroll;
}

/*dba Login Button and Wrapper*/
#dbaLoginWrapper
{
    margin-top: 10px;
    text-align:center;
}

/*
.btnDbaWehrMenueBtn.active
{
    background-color: #0099ff;
}

.btnDbaWehrMenueBtn.active:hover
{
    background-color: #0066ff;
} 
*/
/*dba Login Button and Wrapper END*/


/*Login Dialogue / Pin Change Dialogue / MyCustom Dialog it is my own universal dialog*/
#loginBox, #dbaDialogCustomBox
{
    border-radius:12px;
}

.dbaDialog
{
    
}

.dbaLoginTitle, .dbaDialogCustomTitle
{
    text-align:center;
    line-height: 1.8em;
    color: Gray;
    border-bottom: 2px solid Gray;
}

.dbaLoginContent, .dbaDialogCustomContent
{
    margin-top:10px;
    padding: 15px;
}

.dbaLoginContent > div + div, .dbaDialogCustomContent > div + div
{
    margin-top:10px;
}

.dbaLoginContent > div, .dbaDialogCustomContent > div
{
    width:95%;
    margin-left:auto;
    margin-right:auto;
}

#serverpart, #userpart, #password
{
    width:100%;
    padding: 5px;
    font-size:1.2em;
    border-radius:12px;
}

.dbaLoginDialogueButtons, .dbaDialogCustomButtons
{
    padding: 15px;
    width:95%;
    margin-left:auto;
    margin-right:auto;
}

.btnDbaLoginDialogue + .btnDbaLoginDialogue, .btnDBAcustomDialog + .btnDBAcustomDialog
{
    margin-left: 10px;
}

.btnDbaLoginDialogue, .btnDBAcustomDialog
{
    width: calc(50% - 10px);
    padding: 15px;
    font-size: 1.0em;
    border-radius: 12px;
    color: White;
    
}

.btnDBAcustomDialog.three
{
    width: calc(33% - 10px);
}

/*.btnCancel
{
    background-color: #ff0000;
    color: White;
}

.btnOk
{
    background-color: #00b300;
    color: White;
}

.btnCancel:hover, .btnCancel:focus
{
    background-color: #e60000;
    color: White;
}

.btnOk:hover, .btnOk:focus
{
    background-color: #009900;
    color: White;
}*/



/*Login Dialogue END*/

/*Login Styles END*/

/* Buttons Cachel layout*/

.dbaKachelMenuItem
{
    display: inline-block;
    width: 33%;
    height: 100px;
    padding: 5px;
    float: left;
}

.dbaKachelMenuItem.twoThirds
{
    width: 66%; 
}

.dbaKachelMenu, .dbaKachelMenuRow
{
    display:inline-block;
    width: 100% 
}
    
/* Buttons Cachel layout END*/

/* InfoBestand */
#infoBestandBody
{
    display: none;
}

#infoBestandBody.displayed
{
    display: block;
}

#infoBestandFilter
{
    width: 100%;
}

.selectInfoBestandField
{
    width: 100%;
    margin-bottom: 10px;
}

#tableInfoBestandUebersicht
{
    width: 100%;
}

#tableInfoBestandUebersicht > tbody > tr > td
{
    text-align: center;
}

#infoBestanHbStartbestand
{
    width: 100%;
}
/* InfoBestand END*/