table.list td{padding:15px 10px 5px;color:#343434;word-wrap:break-word;}
.fieldset{border-radius: 20px; border: 0; margin: 0 0 20px; margin-bottom: 20px; padding: 20px; padding-top: 20px;
          box-shadow: 5px 5px 5px -5px #333; background: #eee;}
.table {display: table; border-spacing: 0.5em;}
.tablerow{display: table-row;} 
.tablecell{display: table-cell;}
#new_data_processing_agreement > div.submit {display: flex; flex-wrap: wrap; column-gap: 20px;}
#new_data_processing_agreement > div.submit .second-button {text-decoration: underline; text-underline-position:under; border: none; display: flex;
                                                            align-items: center;
                                                            justify-content: center;
}

@media screen and (max-width:600px){

    div#login-content,div.content-wrapper,
    div.contentExport,div.contentSize50,div.content66,div.left-news, div.contentSize66{width:100%;padding:0}

    .sidebar_toc {display:none;}
}


@media (min-width:600px){
    .pie-container {min-width: 500px; } 
    .piewrapper{display: flex; flex-direction: row;}

}
@media(min-width:1840px){
    .thumbnail {
        width: 322px;
        float: left;
        padding: 20px 10px;
        display: block;
        min-height:300px;
    } 
    div.feedrss .thumbnail {min-height:0;}           
    .pie-container{min-width: 600px; padding-right: 10px;}
}


@media screen and (max-width:840px) {
    *{box-sizing: border-box;}
    body{margin: 0 auto;}
    h1{margin-top: 40px; word-wrap: break-word;}
    img{max-width:100%}

    .simlulator-frame   {margin-top:60px; max-width:unset;}
    #iframe-smartphone {top:62px; }
    #iframe-smartphone {top:62px;margin-left:-80px; }
    .simlulator-container {padding-left:0;}
    .simulator-qrcode { padding-left: 45px;}

    .basic-stats td{vertical-align: top; padding-bottom: 8px;}
    div.block_rss h2{margin-bottom: 10px;}

    div#login-content,div.content-wrapper,
    div.contentExport,div.contentSize50,div.content66,div.left-news, div.contentSize66{width:100%;}

    .sidebar_toc {display:none;}
    .content .sub-menu .download-all,.content .sub-menu .csv-bar {display: none;}

    .content{width: 100vw; margin:0;}
    /*.content{padding:17px 20px 45px;}*/
    .content{padding:10px;}
    .lp-edit-column {width: 100%;}
    .content-wrapper{margin:0;}
    .content-header{margin:0;}
    .content{padding:17px 20px 45px;}
    .content > h1:first-child{margin-top: 40px;}
    #rangeform.list tbody tr{display: flex; flex-direction: column; width: 90vw;}
    #footer{margin:0; width: 100vw; padding: 17px 30px 45px;}
    .pie-container {clear: both; display: flex; flex-direction: column; align-items: center;} 
    /*.left-news {width: 90%;float: left; padding: 0 0 30px 0;}*/
    .hamburg-row {z-index: 1333333334; top: 0; left: 0; background-color: #28323c; display: flex; justify-content: space-between;} 
    body.multi div.brand-name-single{background:#fff;padding: 4px 10px 4px 10px;margin: 5px 5px 6px; border-radius: 5px}
    .right-brand-logo{margin-right:5px}
    div.brand-name-single img{margin: 0;max-height: 42px}
    #menu {padding-top: 50px; position: fixed; width: 100vw !important;  height: 100vh; background-color: #EEE; z-index:1333333333; display:none; overflow-y: scroll;
           -webkit-overflow-scrolling:touch; }
    #menu ul.sub-menu{border-top: 1px solid #555;}
    #menu ul.sub-menu li span {height:40px;}
    #menu ul.sub-menu li span.header-info{height:auto}
    #menu.user-menu ul.sub-menu li, #menu ul.sub-menu-admin li {border-top: 1px solid white;font-size: 1.4em;padding: 16px 0 16px 10px;height: 68px;}
    #menu.user-menu ul.sub-menu li.logout-menu,#menu ul.sub-menu-admin li.logout-menu {border-top: 1px solid white;font-size: 1.4em;  padding: 20px 0 16px 26px; height:68px;}
    .branding-logo, .menu-signin span.superadmin-label{display: none;}

    .header-info small{padding: 2px 10px;}
    #menu>ul.sub-menu>li>a.gray>span {color: #777 !important; display: inline-block; }
    #menu>ul.sub-menu>li>a.gray>span:hover, .menu-signin > a:hover{background-color:#cbcbcb}
    #menu>ul.sub-menu>li:hover{ background-color:#cbcbcb}
    #menu>ul.sub-menu>li>a {padding: 13px 18px; line-height: 25px;}

    .menu-signin {padding:0; top: 60px; position: fixed; width: 100vw !important; background-color: #EEE; z-index:13; display:none;}
    .menu-signin a span{vertical-align: middle;}
    .menu-signin > a {
        color: #777 !important;
        border-top: 1px solid white;
        display: block;
        font-size: 1.4em;
        padding: 13px 10px 11px 30px;
        height: 68px;
        background-color: #EEE;}
    .menu-signin span::before{font-size:24px;vertical-align: middle;margin-right:10px}
    .menu-signin a.account span::before{vertical-align:-6%}

    #page-pie>ul.submenu {display: flex; flex-direction: column; flex-wrap: wrap;}
    .content a.external-link{height: 52px;}
    /*.content ul.sub-menu li:first-child{border-radius: 18px; padding:20px 20px 20px 10px; width: 100%; background: gray; font-size: 1.2rem;}*/
    .tutorial-container, .tutorial-details, .tutorial, .tutorial-post-container{box-sizing: content-box!important;}

    #footer .privacy a{display:block;margin:20px}
    .plot-legend .hide {display: block; margin-bottom: 5px;}
    #page-statistics h1{padding-top: 40px;}
    .tablecell{display: block;} 
    .tablerow{display: block;}
    .message-box{width:100%;display: block;} h1.message-box{width: 60vw; height: auto; font-size: 1.7em;
                top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: -1px 0px 7px -1px #aaa; 
                /* background-image: url(/img/kb/icons/check-circle.svg); background-repeat: no-repeat;background-position: center bottom; */
    }

    .trial-hint h1{margin-top: 0px; font-size: 30px;}
    .trial-hint{padding: 15px;}

} 

@media screen and (max-width:640px){
    .tutorial-container, .tutorial-details, .tutorial, .tutorial-post-container{box-sizing: content-box!important;}.tutorial-container {width: 90vw;}
    .stat-url{word-break:break-all}
}

@media screen and (max-width: 480px){
    html{}
    body{margin: 0 auto;} 

    .second-button{margin: auto; width: 100%; display: inline-block; text-align: center; height: auto;} 
    .small-button, .button, .negative-button, .small-negative-button {display: inline-block;width: 100%; text-align: center; margin-bottom: 20px;}
    a.negative-button, a.small-negative-button {margin-left: 0px!important;}
    .demo-hint p {display: none;}
    div.hint-adduser, div.hint-branding{display: none;}
    .simulator-qrcode { padding-left: 0;}
    .lp-preview-column{padding-left: 0; width: auto;}
}


@media screen and (max-width:950px){
    .content{width: 100%;}
    #rangeform .list tbody tr{display: flex; flex-direction: column; width: 100%;}
    #rangeform .list tbody tr td{width: 100%;}
    #footer{width: 100%; }
}

@media screen and (max-width:1050px){
    .left-news {width: 100%;float: left; padding: 0 0 30px 0;}
}

@media screen and (max-width:1100px) {
    #rangeform .list>tbody>tr{display: flex; flex-direction: row; width: 100%;flex-wrap: wrap;}
    #rangeform .list>tbody>tr>td{width: 100%;} 
}

@media screen and (max-width:1320px){
    .left-news {width: 80%;float: left; padding: 0 0 30px 0;}
    #rangeform.list{display: flex; }
    #rangeform .list>tbody{width: 100%; display: flex; }
}