/* 
    Created on : 11.07.2016, 08:38:32
    Author     : benneking

    Bildschirme ab 480px / Tablets #
*/
@media only screen and (min-width: 35rem){

    body{
        /*  background-color: #e6e6e7; */
        font-size: 0.75rem;
    } 
    #pagewrapper{
        background-color: white;
    }

    hr{
        border-top: 0;
        border-left: 0;
        border-right: 0;
        border-bottom: 0.075rem solid #e6e6e7;
    }

    #logoC{
        display: block;
        margin-left: 3%;
        z-index: auto;
    }

    /* in Main Content sind immer weitere Größenangaben, kein eigener Rand! */
    #mainContent{
        margin-left: 3%;
        padding-top: 0.5rem;
        padding-left: 0;
        position: relative;
        overflow-y: visible;
        box-sizing: border-box;
        padding-bottom: 1.5rem;
    }





    .iconWrapper{
        min-height: 100%;
        position: relative;
        box-sizing: border-box;
        padding-bottom: 4rem;

    }


    #adminContent{
        overflow-y: visible;
        position: relative;
    }

    .right{
        justify-content: flex-end !important;
    }


    .mobile{
        display: none !important; 
    }

    #mainContent .scroll{
        overflow-y: scroll;
    }


    .contentGroup{
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
    }

    /* 
    * Login
    */
    #loginMain #mainContent{
        padding-left: 0 !important;
        float: right;
    }

    #loginMain{
        background-size:cover, cover;
    }

    #loginMain .contentLogin{
        padding-top: 3rem;
        background-color: rgba(255,255,255,0.5);
    }

    #loginMain .formularLine{
        padding-bottom: 0;
    }



    /* 
       Grid
       6-Spalten
        Column Eigenschaften 
    */
    [class*="middle"]{
        float:left;
        -webkit-box-sizing:border-box;
        -moz-box-sizing:border-box;
        box-sizing:border-box;
        -moz-background-clip:padding-box !important;
        -webkit-background-clip:padding-box !important;
        background-clip:padding-box !important;
        padding-left: 0.48rem;
        margin-left: 0;
        height: 100%;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    [class*="middle-"]:first-child{      
        margin-left: 3%;
    }
    [class*="middle-"]:last-child{      
        /*margin-right: 3%;*/
    }

    .middle0{
        display: none !important;
    }
    .middle-1{
        /*width: 13.42857142857143%;*/
        width: 13.85714285714286%;
    }
    .middle-2{
        /*width: 26.85714285714286%;*/
        width: 27.71428571428571%;
    }
    .middle-3{
        /*width: 40.28571428571429%;*/
        width: 41.57142857142857%;
    }
    .middle-4{
        /*width: 53.71428571428571%;*/
        width: 55.42857142857143%;
    }
    .middle-5{
        /*width: 67.14285714285714%;*/
        width: 69.28571428571429%;
    }
    .middle-6{
        /*width: 80.57142857142857%;*/
        width: 83.14285714285715%;
    }
    .middle-7{
        /*width: 94%;*/
        width: 97%;
    }

    /* Mit 3% Rand */
    .middle-2P{
        /*width: 29.85714285714286%;*/
        width: 30.71428571428571%;
    }  

    /*zusätzliche Spalte im Funktionsmenü */
    .middle3-1{
        width: 16.666666666666666666666666666667%;
    }

    .middle3-2{
        width: 83.333333333333333333333333333333%;
    }

    .middle2-1{
        width: 33.333333333333333333333333333333333333333333333333333%;
    }

    .middle2-2{
        width: 66.6666666666666666666666666666666666666666666666666666667%;
    }


    .middle-7 .middle-0-5{
        /*width: 7.1428571428571428571428571428571%;*/
        width: 6.92857142857143%;
    }

    .middle-7 .middle-1{
        /*width: 14.285714285714285714285714285714%;*/
        width: 13.85714285714286%;
    }

    .middle-7 .middle-1-5{
        /*width: 21.428571428571428571428571428571%;*/
        width: 20.78571428571429%;
    }
    .middle-7 .middle-2{
        /*width: 28.571428571428571428571428571429%;*/
        width: 27.71428571428571%;
    }
    .middle-7 .middle-3{
        /*width: 42.857142857142857142857142857143%;*/
        width: 41.57142857142857%;
    }
    .middle-7 .middle-4{
        /*width: 57.142857142857142857142857142857%;*/
        width: 55.42857142857143%;
    }
    .middle-7 .middle-5{
        /*width: 71.428571428571428571428571428571%;*/
        width: 69.28571428571429%;
    }
    .middle-7 .middle-6{
        /*width: 85.714285714285714285714285714286%;*/
        width: 83.14285714285715%;
    }
    .middle-7 .middle-7{
        /*width: 100%;*/
        width: 97%;
    }    
    #main #mainContent    [class*="middle-"]:first-child{      
        margin-left: 0;
    }

    #main #mainContent    [class*="middle-"]:last-child{      
        margin-right: 0;
    }

    #loginMain .middle-4 .middle-1{
        width: 23.5%;
    }
    #loginMain .middle-4 .middle-2{
        width: 47%;
    }
    #loginMain .middle-4 .middle-3{
        width: 70.5%;
    }

    #loginMain .middle-4 .middle-4{
        width: 94%;
    }

    .middle-7 .middle-4 .middle-1{
        width: 25%;
    }

    .middle-7 .middle-4 .middle-2{
        width: 50%;
    }

    .middle-7 .middle-4 .middle-3{
        width: 75%;
    }

    .middle-7 .middle-4 .middle-4{
        width: 100%;
    }


    .middle-7 .middle-5 .middle-1{
        width: 20%;
    }

    .middle-7 .middle-5 .middle-2{
        width: 40%;
    }

    .middle-7 .middle-5 .middle-3{
        width: 60%;
    }

    .middle-7 .middle-5 .middle-4{
        width: 80%;
    }

    .middle-7 .middle-5 .middle-5{
        width: 100%;
    }
    .middle-7 .middle-2 .middle-0-5{
        width: 25%;
    }

    .middle-7 .middle-2 .middle-1, .middle-2 .middle-1{
        width: 50%;
    }

    .middle-7 .middle-2 .middle-2, .middle-2 .middle-2{
        width: 100%;
    }

    .middle-7 .middle-3 .middle-1, .middle-3 .middle-1{
        width: 33.333333333333333333333333333333333333333333333%;
    }

    .middle-7 .middle-3 .middle-2, .middle-3 .middle-2{
        width: 66.6666666666666666666666666666666666666666666666666%;

    }

    middle-7 .middle-3 .middle-3, .middle-3 .middle-3{
        width: 100%;
    }




    .ui-dialog .middle-1{
        width: 33.333333333333333333333333333333333%;
    }
    .ui-dialog .middle-2 {
        width: 66.666666666666666666666666666666666%;

    }
    .ui-dialog .middle-3{
        width: 100%;
    }

    .ui-dialog .middle-2 .middle-0-5{
        width:   16.666666666666666666666666666667%;
    }

    .ui-dialog  [class*="middle"]{
        margin-left: 0 !important;
        margin-right: 0 !important;
    }



    .noPadding{
        padding-left: 0 !important;
    }

    /*
    Funktionsmenü
    */

    #subNav{  
        position: absolute;
        background-color: white;
        padding: 0;
        padding-left: 3%;
        margin: 0;
        height: auto;
        display: flex;
        /*left: -26.85714285714286%;*/
        left: -27.31428571428571%;
        z-index: 3;
        border-right: 0.075rem solid #e6e6e7;
        overflow: hidden;
    }   



    .active{
        -webkit-transform: translate(88.829787234042553191489361702128%, 0);
        -moz-transform: translate(88.829787234042553191489361702128%, 0);
        -ms-transform: translate(88.829787234042553191489361702128%, 0);
        transform: translate(88.829787234042553191489361702128%, 0);
        -webkit-transition: 0.25s ease;
        -moz-transition: 0.25s ease;
        -o-transition: 0.25s ease;
        transition: 0.25s ease;
    }

    #subNav .arrow{
        width: 100%;
    }
    #subNav .navRow{
        height: 2.2rem;
        padding-bottom: 0.48rem;
        border: none;
        margin: 0;
        line-height: 0.96rem;
    }

    #subNav ul{
        width: 88.829787234042553191489361702128%;
        padding-top: 1.8125rem;
    }

    #subNav .navRow .menu-icon:before{
        font-size:1rem;
    }

    #subNav .navRow span{
        line-height: 35px;
        display: inline-block;
        vertical-align: middle;
        /*white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;*/
    }

    #subNavT{
        display: block;
        /* Breite: 3% der Gesamtbreite (3/middle-2P) */
        width: 11.170212765957446808510638297872%;
    }

    .active #subNavT{
        -webkit-transform: scaleX(-1);
        -moz-transform: scaleX(-1);
        -ms-transform:scaleX(-1);
        transform: scaleX(-1);
    }

    #subNavT .arrow{
        width: 100%;
        height:100%;
        padding: 0;
        margin: 0;
        font-size: 2.4rem;
    }
    /*
       Hauptmenü
    */ 
    #mainNavList{
        position: absolute;
        top: 0;
        left: 0;
        display: inline-block;
        height: 6rem;
        width: 1000%;
        /* transition: left 0.5s;*/
    }

    #mainNav{
        display: block !important;
        border-bottom: 0.075rem solid #e6e6e7;
        height: 6rem;
        position: relative;
        background-color: transparent;
        width: 100%;
        overflow: hidden;
    }

    #mainNav li{
        display: inline-block;
    }

    #mainNav .navRow{
        background-color: white;
        padding: 0;
        padding-top: 0.6rem;
        padding-bottom: 0.1rem;
        height: auto;
        flex-direction: column;
        -webkit-flex-direction: column;
        align-items: center;
        justify-content: space-between;
        text-align: center;
        border-bottom: 0;
    }

    #mainNav .navRow span{
        line-height: 1.26;
        align-items: flex-start;
        height: 1.26rem;
        padding-top: 0.25rem;
        display: inline-block;
        width: 100%;
        /*white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;*/
    }

    #mainNav .menu-icon:before{
        font-size: 2.5rem;
    }
    #mainNav .secNav{
        display: none !important;
    }
    #secNavRow {
        width: 100%;
        display: block;
    }
    #secNavRow .secNav{
        height: 2.5rem;
        border-bottom: 0.075rem solid #e6e6e7;
    }
    #secNavRow .navRow{
        border: none;
        height: 2.4rem;
        padding: 0;
        justify-content: center;
        text-align: center;
    }

    #mainNaviLeft{
        left: 0;
    }

    #mainNaviRight{
        right: 0;
    }

    [id*="mainNavi"]{
        display: flex;
        height: 6rem;
        background-color: white;
        width: 3%;
        align-content: center;
        justify-content: center;
        opacity: 1;
        z-index: 2;
        position: absolute;
    }

    #mainNaviLeft .arrow, #infoArrowLeft .arrow{
        -webkit-transform: scaleX(-1);
        -moz-transform: scaleX(-1);
        -ms-transform:scaleX(-1);
        transform: scaleX(-1);
    }

    [id*="mainNavi"] .arrow{
        font-size: 2.5rem;
    }

    #mainNav [class*="middle-"]{
        margin-right: 0;
        margin-left: 0;
        padding-left: 0.48rem;
    }    
    .leftEnd, .rightEnd{
        z-index: 1;
        position: relative;
        padding-left: 0 !important;
    }

    .leftEnd{
        margin-left: 0.3% !important;
    }

    .rightEnd{
        margin-right: 0.3% !important;
    }

    #mainNav .middle-1{
        width: 1.342857142857143%;
    }

    /*
    *  Userinfo und Utilities (globale Funktionen oben rechts)
    */

    .navRow, #main .formularLine{
        height: 3.96rem;
        border-bottom: 0.1rem solid #d5d5d5;
    }

    #pageTop, #loginTop{
        height: 3rem; 
        padding-top: 0.6rem;
        border-bottom: 0.075rem solid #e6e6e7;
    }

    #utilities{
        display: flex;
    }

    #utilities.utilitiesAdmin{
        justify-content: flex-end;
    }

    .utilitie{
        float: left;
    }
    .pageTopInformations{
        height: 1.5rem;
    }
    #persnr, #uname{
        float: left;
    }
    #uname{
        border-right: 0.075rem solid black;
        padding-right: 0.24rem;
        margin-right: 0.24rem;
        font-weight: bold;
    }
    header{
        display: none;
    }

    #user{
        align-self: flex-end;
        text-align: right;
    }

    #userInformation{
        flex-direction: row-reverse;
        justify-content: flex-start; 

    }

    /*
    * Infobar
    */
    #infoBar{
        display: block;
        border-bottom: 0.075rem solid #e6e6e7;
        min-height: 5rem;
        height: auto;
    }
    #infoBarTitle{
        border-right: 0.075rem solid #e6e6e7;
        align-items: flex-end;
        padding-right: 3%;
        text-align: right;
    }

    .infoboxT{
        line-height: 2.069375rem;
    }


    .infoRow{
        min-height: 1.5rem;
        display: flex;
        justify-content: flex-start;
    }

    .infoColumn{
        padding-left: 0 !important;
    }

    /*
    * Infobox Cockpit
    */
    #infoArrowLeft, #infoArrowRight{
        width: 3%;
        padding-left: 0%;
        justify-content: center;
    }

    #infoArrowLeft .arrow, #infoArrowRight .arrow{
        font-size: 2rem;
    }


    #infoboxLeft {
        width: 97%;
        padding-left: 0; 
    }

    #infoboxLeft .middle2-2{
        width: 68.728522336769759450171821305842%;
    }

    #infoboxLeft .middle2-1{
        width: 31.271477663230240549828178694158%;
        padding-left: 0;
    }


    #infoboxRight {
        width: 97%;
    }

    #infoboxRight .middle2-2{
        width: 65.635738831615120274914089347079%;
    }

    #infoboxRight .middle2-1{
        width: 34.364261168384879725085910652921%;
        padding-left: 0;
    }


    #main #message-row #messageBox{
        margin-left: 28.571428571428571428571428571429%;
    }


    /*
   * jquery Dialog
    */
    .jqDialog .middle-1{
        width: 31.333333333333333333333333333333333333333333%;
    }

    .jqDialog .middle-2{
        width: 62.66666666666666666666666666666666666666666666%;
    }

    .jqDialog .middle-3{
        width: 94%;
    }


    /*/Formular */

    .buttonLine, .buttonLineStatic, .buttonLineStaticBottom{
        margin-top: 2rem;
        position: absolute;
        bottom: 0.5rem;
        width: 100%;
    }
    .buttonLineStaticBottom{
        position:static;
        line-height: 5rem;
    }

    .buttonLineStatic{
        position:static;
        margin-bottom: 1.5rem;
        margin-top: 1.5rem;
    }



    input, select, textArea{
        color: #2b2b2a;
        padding-top: 0.2rem;
        padding-bottom: 0.2rem;
    }

    textArea{
        min-height: inherit;
    }

    #main input, #main select{
    }

    #main .formularLine, .sectionLine{
        height: auto;
        border: none;
    }

    .sectionLine{
        padding-bottom: 0.4rem;
        padding-top: 0.4rem;
    }

    /*
    * Footer
    */

    footer  {        
        height:3rem !important;
        padding-bottom: 0.6rem;
        min-height: 0;
        border-top: 0.075rem solid #e6e6e7;
    }
    footer #logoH{
        height: 0.8rem;
        margin-right: 3%;
    }


    /*
    * Kalender
    */
    .calendar .formularLine{
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }

    .calendar input, .calendar select, .calendar textArea{
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }

    .calendar table {
        font-size: 0.75rem;
    }

    .calendar .row{
        display: flex;
        align-items: flex-start;
    }

    .sumoS{
        /* 4296 | n */
        overflow: visible !important;
    }

    .calendar   [class*="middle"], .calendar button{
        height: auto;        
    }

    /* RK Große Tabellen */
    .bigTable.footable.table > tbody > tr > td
    , .bigTable.footable.table > tfoot > tr > td
    {
        padding-left: 3px;
        padding-right: 2px;
        padding-bottom: 5px;
        padding-top: 5px;
        line-height: 0.90rem;
        vertical-align: middle;
    }
    .bigTable.table.footable > thead > tr > td.footable-sortable
    , .bigTable.table.footable > thead > tr > th.footable-sortable
    , .bigTable.table.footable > tbody > tr > td.footable-sortable
    , .bigTable.table.footable > tbody > tr > th.footable-sortable
    , .bigTable.table.footable > tfoot > tr > td.footable-sortable
    , .bigTable.table.footable > tfoot > tr > th.footable-sortable {
        padding-right: 13px;
    }

    .footable.table.bigTable > thead > tr > th
    , .bigTable.footable.table > tbody > tr > th
    , .bigTable.footable.table > tfoot > tr > th
    , .bigTable.footable.table > thead > tr > td
    , .bigTable.footable.table > tbody > tr > td
    , .bigTable.footable.table > tfoot > tr > td{
        padding-left: 3px;
        padding-right: 2px;
    }


    /*
    * Kreditkartenimport
    */
    /* Test!! */
    #creditcard_autocomplete input{
        /* min-width: 110px; */ 
    }

    #creditcard_autocomplete th{
        white-space: nowrap
    }

    /* cockpit batch // 4296 | a */
    #batchProcessingTable .dateCell{
        min-width: 12rem;
    }

    .divDoubleRow{
        height: 100%; 
        padding-top: 0.2rem;
        padding-bottom: 0rem;
        border-bottom: 0rem;
    }

    .labelDoubleRow{
        padding-top: 0rem; 
        padding-bottom: 0rem;
    }
}