@media screen and (max-width: 1000px)
{
	/* general */
	.desktop_v { 
		display: none!important;
	}
	
	.mob_v
	{
		display: block!important;
	}
	
	body {
		padding: 0;
	}

    header .mobile-header {
        display: inline-block;
    }

    header {
        width: 100%;
        position: fixed;
        height: auto;
        bottom: unset;
        overflow-y: hidden;
        max-height: 0;
        transition: max-height 0.3s ease-in-out;
    }
    
    header.active {
        max-height: 3000px;
        transition: max-height 0.3s ease-in-out;
    }

    header .navigation .header-logo {
        display: none;
    }

    header .navigation {
        height: 100vh!important;
        max-height: 0;
        width: 100%!important;
        padding: 130px 0 40px 0;
        position: absolute;
        z-index: 2000;
        top: -1000!important;
        opacity: 0;
        left: 0;
        bottom: 0;
        right: 0;
        pointer-events: none;
        transition: all 0.3s ease-in-out;
    }
    
    header .navigation.lvl-1 {
    	position: relative;
    }

    header .navigation.lvl-1,
    header .navigation.lvl-2, 
    header .navigation.lvl-3{
        left: 0;
        opacity: 0;
        pointer-events: none;
        transition: all 0.3s ease-in-out;
    }
    
    header .navigation.lvl-1 {
    	transition: all 0.3s ease-in-out;
    }

    header .navigation.lvl-1.active {
        top: 0;
        opacity: 1;
        max-height: 3000px;
        pointer-events: auto;
        transition: all 0.3s ease-in-out;
    }

    header .navigation.lvl-1.to-left {
        top: 0;
        opacity: 0;
        left: -100%;
        pointer-events: none;
        transition: all 0.3s ease-in-out;
    }

    header .navigation.lvl-2.active {
        max-height: 3000px;
        left: 0;
        opacity: 1;
        pointer-events: auto;
        transition: all 0.3s ease-in-out;
    }

    header .navigation.lvl-2.to-left  {
        max-height: 3000px;
        left: -100%;
        opacity: 0;
        pointer-events: none;
        transition: all 0.3s ease-in-out;
    }

    header .navigation.lvl-3.active {
        max-height: 3000px;
        left: 0;
        opacity: 1;
        pointer-events: auto;
        transition: all 0.3s ease-in-out;
    }

    header .navigation.lvl-3.to-left  {
        max-height: 3000px;
        left: -100%;
        opacity: 0;
        pointer-events: none;
        transition: all 0.3s ease-in-out;
    }

    header .sub-navigation .navigate-back  {
        display: inline-block;
    }

    header .mobile-header .mobile-navigation .navigation-icon.active .nav-line-1 {
        transform: rotate(45deg) translate(6px, 8px);
    }
    
    header .mobile-header .mobile-navigation .navigation-icon.active .nav-line-2 {
        opacity: 0;
    }
    
    header .mobile-header .mobile-navigation .navigation-icon.active .nav-line-3 {
        transform: rotate(-45deg) translate(4px, -5px);
    }
    
    header .mobile-header section.nav-slide-left {
    	padding-top: 130px;
    }
    
    section.headline .row-2 .header-image {
		background: transparent url('../../inf2/images/om/header-background.jpeg');
		background-position-x: 0%;
		background-position-y: 0%;
		background-repeat: repeat;
		background-size: auto;
		background-repeat: no-repeat;
		background-position: center 100%;
		background-size: 100% auto;
	}
	
	section.headline .row-2 .header-image h1 {
		/*position: absolute;
		bottom: 0;
		left: 20px;
		padding: 20px;
		background: rgba(0,0,0, 0.75);
		color: #fff;
		*/
		padding: 20px;
	}
	
	section.headline .row-2 {
		height: auto;
	}
	
	.div_report_name, .div_report_name_shadow,
	.div_template_name, .div_template_name_shadow,
	.div_reject_name, .div_reject_name_shadow {
		height: auto !important;
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		z-index: 3000;
		width: 100% !important;
		box-sizing: border-box;
		padding: 20px!important;
		border: none!important;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);
	}
	
	.div_popup, .div_popup_shadow {
		position: fixed !important;
		top: 0px !important;
		left: 0px !important;
		z-index: 3000;
		width: 100% !important;
		height: auto !important;
		box-sizing: border-box;
		border: none;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);
	}
}

@media screen and (max-width: 641px)
{
	/* general */
	.desktop_v { 
		display: none!important;
	}
	
	.mob_v
	{
		display: block!important;
	}
	
	main {
		padding: 20px;
	}
	
	footer {
        display: inline-block;
        position: relative;
        width: 100%;
        padding: 30px 20px 20px 20px;
        box-sizing: border-box;
    }
    
    footer section {
		font-size: 9px;
	}
	
	.developer img {
		height: 30px;
	}
    
    /* Top actions *************************************************************/
	.top-actions {
		width: 100%;
		margin: 0 0 30px 0;
		display: flex;
		flex-flow: column;
	}
	
	.top-actions .top-search {
		margin: 20px 0 0 0;
		float: none;
		display: inline-block;
		width: 100%;
	}
	
	.top-actions .top-search .search-field,
	.top-actions .top-search .black-btn {
		width: 100%;
	}
	
	.top-actions .top-search .search-field input {
		border: #deded9 1px solid;
	}
	
	.top-actions .black-btn {
		margin: 0 0 10px 0;
	}
	
    .top-actions .export-buttons a {
        float: right;
    }

    .top-actions .export-buttons .export-text {
        width: 100%;
        float: right;
        margin: 0 0 10px 0;
    }

    .top-actions .export-buttons .btn-action {
        margin: 0 4px 4px 0;
    }

    .breadcrumbs .report-info {
        width: 100%;
        text-align: left;
    }
    
    .navigation_buttons {
    	width: 100%!important;
    }
    
    textarea {
		width: 100%!important;
	}
	
	input[type="text"], input[type="number"], input[type="password"], select, textarea {
		width: 100%!important;
	}
	
	table.form tr > td[colspan="2"].list-container, .list-container {
		border: none;
		width: 100% !important;
	}
	

	/* other */
	#menu_login_space {margin-bottom: 0;}
	.page_container, td, th { padding-left: 0; }
	table.site_breadcrumb td { padding-bottom: 30px; }
	.switch_mode_btn { display: block; margin-bottom: 20px; }
	.switch_mode_btn a { width: auto; padding: 0px; margin: 20px; }
	.toptitel { margin-left: -223px; display: block; }
	.navigtitel { margin: 0px; }
	select, page_container>div:last-of-type select {width: 100% !important;}
	select, select option {  text-overflow: ellipsis; }
	#main_table>tbody>tr:first-of-type>td:first-of-type { width: 0px; padding: 0px; }
	input[type="text"], input[type="password"], select, textarea { width: 100% !important; }
	.site_links {display:block;} /*, .site_links_grants */
	.site_links div b a /*, .site_links_grants div b a*/
	{
		text-decoration: none;
		padding-left: 5px;
		padding-top: 10px;
		padding-bottom: 10px;
	}
	.site_links .menu_lbl/*, .site_links_grants .menu_lbl*/ {margin-top: 0; width:225px; vertical-align: top; line-height: 35px;}
	.site_links>div:last-of-type/*, .site_links_grants>div:last-of-type*/ {margin-bottom: 35px;}
	.site_links>div:first-of-type/*, .site_links_grants>div:first-of-type*/ {margin-top: 25px;}

	/*  re-style tables - requres changes in main js */
	table { width: 100%; }
	.page_container table td, .page_container table th { display: block; width: 100% !important; box-sizing: border-box;}
	.page_container table tr { display: block; margin-top: 10px; }
	.list-container { border: none;  }
	.page_container table td::before {
      content: attr(data-label);
      text-transform: uppercase;
      font-weight: bold;
	  font-size: 10px;
	  line-height: 20px;
	  text-align: left;
	  width: 100%;
	  float: left;
	  color: #969696;
    }
	#f_form>table { border: none; }

	/* lists in reports */
	.page_container table td[colspan="2"] { padding-left: 10px; display: inline-block;}
	.page_container table tr:contains-selector(td[colspan="2"]) { border: none; }

	/* ja and nein buttons */
	.add_header_col2 { border-bottom:2px solid #000; border-right: none; padding-right: 5px; text-align: left; }
	.add_header_col3 { padding-left: 0; }
	
	/* translation interface */
	.width_100 {
		min-width: 100%;
	}
	
	.width_235 {
		min-width: 100%;
	}
	
	.width_245 {
		min-width: 100%;
	}
	
	.width_605 {
		min-width: 100%;
	}
	
	table colgroup {
		display: none;
	}
	
	#create_snapshot select {
		width: 100%!important;
	}
}