@font-face{
    font-family:'advise2all';
    src:    url('advise2all/fonts/advise2all.eot') format('embedded-opentype'),
            url('advise2all/fonts/advise2all.woff') format('woff'),
            url('advise2all/fonts/advise2all.ttf') format('truetype'),
            url('advise2all/fonts/advise2all.svg') format('svg');
}

@font-face{
    font-family:'FontAwesome';
    src:    url('font-awesome-4.7.0/fonts/FontAwesome.otf'),
            url('font-awesome-4.7.0/fonts/fontawesome-webfont.eot') format('embedded-opentype'),
            url('font-awesome-4.7.0/fonts/fontawesome-webfont.woff2') format('woff2'),
            url('font-awesome-4.7.0/fonts/fontawesome-webfont.woff') format('woff'),
            url('font-awesome-4.7.0/fonts/fontawesome-webfont.ttf') format('truetype'),
            url('font-awesome-4.7.0/fonts/fontawesome-webfont.svg') format('svg');
}

body{
    font-family:'Open Sans', Helvetica, Arial, sans-serif;
    font-size:16px;
}
html
{
	/*
	background:#89bce4;
	
	background-image:   -moz-radial-gradient(center, ellipse cover, #d7e7f3 0%, #89bce4 100%);
	background-image:   -webkit-radial-gradient(center, ellipse cover, #d7e7f3 0%, #89bce4 100%);
	background-image:   -o-radial-gradient(center, ellipse cover, #d7e7f3 0%, #89bce4 100%);
	background-image:   -ms-radial-gradient(center, ellipse cover, #d7e7f3 0%, #89bce4 100%);
	background-image:   radial-gradient(center, ellipse cover, #d7e7f3 0%, #89bce4 100%);
	filter:             progid:DXImageTransform.Microsoft.gradient(startColorstr = '#d7e7f3', endColorstr = '#89bce4', GradientType = 0);
	*/

	background:#e5e5e5;
	
	/* redesign kleuren */

	background-image:   -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #dedede 100%);
	background-image:   -webkit-radial-gradient(center, ellipse cover, #ffffff 0%, #dedede 100%);
	background-image:   -o-radial-gradient(center, ellipse cover, #ffffff 0%, #dedede 100%);
	background-image:   -ms-radial-gradient(center, ellipse cover, #ffffff 0%, #dedede 100%);
	background-image:   radial-gradient(center, ellipse cover, #ffffff 0%, #dedede 100%);
	filter:             progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#dedede', GradientType = 0);

	height:100%;
}

div#top, div#welkom
{
	width:100%;
        display:flex;
        flex-flow:row wrap;
}



div#top_mid, div#welkom_mid, div#container
{
	//width:960px;
	//position:absolute;
	//left:50%;
	//margin-left:-480px;
        width:100%;
        display:flex;
        flex-flow:row wrap;
        margin:0 auto;
        max-width:1200px;
        

	/*background:#000;*/
}

div#top
{
	height:100px;
	//background:#0779a9;
	//background: #58595b; /* redesign kleuren */
        background:#fff;
}

div#top_mid
{
	//height:40px;
	/*background:url('/gfx/LOGO_ARBOKOMPAS.png') top left no-repeat;*/
}

div#top_mid div.knoppen
{
	//float:right;
        display:flex;
        flex-flow:row wrap;
        margin-left:auto;
}

div#welkom
{
	//background:#a8a9ae;	
	//top:40px;
        background:#d4e065;
}

div#welkom_mid
{
	height:50px;
	line-height:50px;
	color:#005271 !important;
}

div#welkom_mid
{
	font-size:22px;
	font-weight:bold;
	color:#005271;
}

div#welkom_mid_right
{
	//float:right;
	height:50px;
	line-height: 50px;
	font-size:11px;
	font-weight: normal;
	color:#777;
        margin-left:auto;
        margin-right:15px;
}

div#container
{
	margin-top:90px;
	//-moz-border-radius: 5px;
	//border-radius: 5px;
	background:#fff;	
	/*overflow:hidden;*/
	//box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.3);
	
}


div#leftcolumn
{
	//float:left;
	//background:transparent url('/gfx/bg_leftmenu.png') top right repeat-y;
/*	background:red;*/

}

/*
div#leftcolumn li
{
	width:100%;
	height:49px;
	line-height:49px;
	display:block;
	float:left;
	border-bottom:solid 1px #d1d1d1;

	cursor:pointer;
	background:transparent;
	background-position: top left;
	background-repeat: no-repeat;
}
*/
div#leftcolumn ul li:first-child{
    border-top:1px dashed #22688e;
}
div#leftcolumn li a{
    font-size:14px;
    color:#22688e;
}
div#leftcolumn li a:before{
    margin-right:15px;
    color:#22688e;
    font-size:22px;
    width:22px;
    height:22px;
    display:inline-block;
    position:relative;
    bottom:-5px;
    content:"";
    background-size:cover;
    background-position:left top;
    background-repeat: no-repeat;
}




div#leftcolumn .icon_ShowMyFilters {
	background-image: url("/gfx/icon_ShowMyFilters.png");
	background-repeat: no-repeat;
}

div#leftcolumn .icon_ShowMyFilters.active {
	background-image: url("/gfx/icon_ShowMyFilters_active.png");
	background-repeat: no-repeat;
}


div#leftcolumn .icon_ConfigureArbokompas {
	//background-image: url("/gfx/icon_ConfigureArbokompas.png");
	//background-repeat: no-repeat;
}
div#leftcolumn li.icon_ConfigureArbokompas a:before,
ul#ul_leftmenu li.icon_ConfigureArbokompas a:before{
    background-image:url(/images/configure.png);
}



div#leftcolumn li.active
{
	background-color:#fff;
}

/* WIJZIGING Jeroen
* Specifieke styles voor uit en ingeklapt. Vanwege display:table bug in google chrome */
.leftcolumn_ingeklapt li {
	width: 100%;
	height: 49px;
	line-height: 49px;
	float: left;
	border-bottom: solid 1px #d1d1d1;
	background: green;
	cursor: pointer;
	background: transparent;
	background-position: top left;
	background-repeat: no-repeat;
}

.leftcolumn_uitgeklapt li {
	width: 100%;
	height: 49px;
	line-height: 49px;
	display: table;
	float: left;
	border-bottom: dashed 1px #22688e;
	background: green;
	cursor: pointer;
	background: transparent;
	background-position: top left;
	background-repeat: no-repeat;
}

div#leftcolumn li a {
	margin: auto;
	line-height: 20px;
	line-height: normal;
	vertical-align: middle;
	text-decoration: none;
	display: table-cell;
	padding-left: 15px;
}


div#content
{	
	float:left;
	min-height:400px;
	//padding:10px;	
        
        padding:30px;
}

div#leftcolumn li#uitklapper.uitklapper_uitgeklapt
{
	background-image:url('/gfx/icon_Inklappen.png');
}

div#leftcolumn li#uitklapper.uitklapper_ingeklapt
{
	background-image:url('/gfx/icon_Uitklappen.png');
}

div.leftcolumn_uitgeklapt
{
	width:calc(25% - 30px);
        padding:30px 0 30px 30px;
}

div.leftcolumn_uitgeklapt a
{
	visibility:visible;
}

div.leftcolumn_ingeklapt
{
	width:50px;
}

div.leftcolumn_ingeklapt a
{
	/* Wijziging Jeroen, om de border-bottom goed door te laten gaan */
	/*visibility:hidden; */
	display: none !important;
}


div.content_uitgeklapt
{
	//width:730px;/*750px;*/
        width:calc(75% - 60px);
}


div.content_ingeklapt
{
	width:100%;
}


/* LINKERMENU VERBERGEN */

div#content.content_ingeklapt.noleftmenu
{
	width:100% !important; /* 50 meer*/
        //display:flex;
        //flex-flow:row wrap;
}


div#content.content_ingeklapt.noleftmenu .scaling_full_width
{
	width:100%;/*890px;*/
}

div#content.content_ingeklapt.noleftmenu .scaling_full_width_minus_10px_padding
{
	width:100%;/*870px;*/
}

div#content.content_ingeklapt.noleftmenu .scaling_full_width_minus_10px_padding p
{
	width:100%;/*850px;*/
}

div#content.content_ingeklapt.noleftmenu .fullwidth_input
{
	width:100%;/*858px;*/
}

div#content.content_ingeklapt.noleftmenu .fullwidth_input_editor
{
	width:100%;/*820px;*/
}

/* EINDE LINKERMENU VERBERGEN */

div#debug
{
/*	display:none;*/
	float:left;
	
	margin-top:50px;
	border-top:solid 4px #444;
	
	background:#000;color:#fff;
}

ul.clean, ul.clean li
{
	margin: 0; padding: 0; list-style: none;
}


html.happypeople
{
	//background-image: url('/gfx/bg_inlogscherm.png');
	//background-position: center -300px;
	//background-repeat: no-repeat;
}

a.languagebutton
{
	width:50px;
	height:28px;
	
	margin:0 10px 0 0;
	display:inline-block;
	background-position: center center;	
	background-repeat: no-repeat;
	/*border: solid 5px #f6f6f6;*/
	border: solid 4px #fff;
	cursor:pointer;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
	-moz-border-radius: 5px;
	border-radius: 5px;
}

a.languagebutton:hover
{
	/*border: solid 5px #888;*/
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8);
}

a.languagebutton_selected
{
	/*border: solid 5px #444;*/
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8);
	border-color:#444;
}

.Bedrijfslogo
{
	max-width: 250px;
	display: block;
	float:right;
	border-left: solid 4px #58595b;
	border-bottom: solid 4px #58595b;

	border-radius:0 0 0 10px ;
}

@media (max-width: 1600px) {
	.Bedrijfslogo
	{
		max-width: 200px;
	}
}

@media (max-width: 1400px) {
	.Bedrijfslogo
	{
		display: none;
	}
}

.volledigebreedte_ja_nee
{
	float:right;
	text-align: left;
	width: 43%;
	height:25px;
	line-height: 25px;
}
/*
style="line-height:30px;margin-left:10px;"*/

/* cw styles */
.head-logo{
    margin:auto 0 auto 0;
    width:25%;
    padding-left:30px;
    display:flex;
    flex-flow:row wrap;
}
.head-logo img{
    max-height:80px;
}
.head-logo a{
    //margin:auto;
}
.head-subtitle{
    font-size:14px;
    font-style:italic;
    margin:auto 20px auto 20px;
    color:#22688e;
    font-weight:600;
    width:10%;
}
.head-pagetitle{
    display:flex;
    flex-flow:row wrap;
    margin:auto 0 auto 0;
}
.head-pagetitle h2{
    margin:0;
}
.head-pagetitle{
    width:auto;
}
.head-pagetitle h2{
    color:#22688e;
}
.knoppen{
    width:auto;
}
.welkom-mid-username{
    font-size:18px;
    padding-left:30px;
}
#left-menu{
    display:flex;
    flex-flow:row wrap;
}
li#uitklapper{
    display:none;
}
.questions-container-full{
    display:flex;
    flex-flow:row wrap;
}

/* cw */
#mobileMenu .head-logo .topmitbutton{
    position:absolute;
    right:15px;
    top:20px;
    padding:2px 14px;
    font-size:10px;
}
#mobileMenu{
    box-shadow:0px -4px 11px #000;
}
#mobileMenu li a:before{
    content:"";
    display:inline-block;
    width:28px;
    height:28px;
    margin-right:10px;
    position:relative;
    bottom:-5px;
    line-height:33px;
}
#leftcolumn li a:hover,
#leftcolumn li.active a{
    color:#000;
}
#leftcolumn li:hover a:before,
#leftcolumn li.active a:before,
#mobileMenu li:hover a:before,
#mobileMenu li.active a:before{
    filter:grayscale(100%) !important;
}
div#leftcolumn .icon_Login a:before,
#mobileMenu .icon_Login a:before{
    background-image:url('/images/login.png');
}


div#leftcolumn .icon_Welcome a:before,
div#leftcolumn .icon_Welcome.active a:before,
#mobileMenu .icon_Welcome a:before,
#mobileMenu .icon_Welcome.active a:before{
    background-image:url('/images/home.png');
}
#leftcolumn li.icon_ManageQuestionnaires a:before,
#mobileMenu li.icon_ManageQuestionnaires a:before{
    background-image:url(/images/edit.png);
}
#leftcolumn li.icon_CoupleEmployees a:before,
#mobileMenu li.icon_CoupleEmployees a:before{
    background-image:url(/images/manage-users.png);
}
#leftcolumn li.icon_ManageInfoPages a:before,
#mobileMenu li.icon_ManageInfoPages a:before{
    background-image:url(/images/manage-pages.png);
}
#leftcolumn li.icon_ManageMaingroups a:before,
#mobileMenu li.icon_ManageMaingroups a:before{
    background-image:url(/images/products.png);
}
#leftcolumn li.icon_ManageUsers a:before,
#mobileMenu li.icon_ManageUsers a:before{
    background-image:url(/images/user.png);
}
#leftcolumn li.icon_ManageCompEstDep a:before,
#mobileMenu li.icon_ManageCompEstDep a:before{
    background-image:url(/images/businesses.png);
}
#leftcolumn li.icon_Dashboard a:before,
#mobileMenu li.icon_Dashboard a:before{
    background-image:url(/images/chart.png);
}
#leftcolumn li.icon_ShowQuestionnaires4Employee a:before,
#mobileMenu li.icon_ShowQuestionnaires4Employee a:before{
    background-image:url(/images/check.png);
}
#leftcolumn li.icon_ManagePersonalData a:before,
#mobileMenu li.icon_ManagePersonalData a:before{
    background-image:url(/images/user.png);
}
#mobileMenu li.logoutbtn a:before{
    background-image:url(/images/login.png);
}

.chzn-container-multi .chzn-choices .search-choice .search-choice-close{
    background:transparent !important;
    font-style:normal !important;
    text-decoration:none !important;
}
.chzn-container-multi .chzn-choices .search-choice .search-choice-close:before{
    content:"\f00d";
    font-family:'FontAwesome';
    font-size:14px;
    font-weight:normal;
    color:#111;
    position:relative;
    top:-9px;
    font-style:normal !important;
    text-decoration:none !important;
}

.questionblock .chzn-container a{
    height: 30px !important;
    line-height: 30px !important;
}
.chzn-container-single .chzn-single div b{
    background-position: -3px 3px !important;
}

@media screen and (max-width:940px){
    
    div#leftcolumn{
        display:none;
    }
    div.content_uitgeklapt{
        width:calc(100% - 30px);
    }
    img{
        //max-width:100%;
        max-width:150px;
    }
    #mobileMenu span.menu:before{
        z-index:99999;
    }
    #mobileMenu{
        position:fixed;
        top:0;
        width:100%;
        background:#fff;
        height:64px;
        z-index:999;
    }
    #mobileMenu .head-subtitle,
    #mobileMenu .head-logo{
        width:auto;
    }
    #mobileMenu .container{
        position:absolute;
        display:flex;
        flex-flow:row wrap;
        padding:15px 15px 9px 15px;
        width:calc(100% - 30px);
        z-index:99999;
        background:#fff;
    }
    #mobileMenu .inner.open{
        display:flex;
        flex-flow:column wrap;
        overflow:scroll;
        position:fixed;
        height:100%;
    }
    #mobileMenu span:before{
        content:"";
        display:inline-block;
        background-image:url(/images/mobile-menu.png);
        background-repeat:no-repeat;
        width:28px;
        height:28px;
        right:15px;
        position:absolute;
        top:18px;
        cursor:pointer;
    }
    #mobileMenu .inner{
        position:absolute;
        left:0;
        background:#dde3e6;
        width:100%;
        display:none;
        z-index:1000;
    }
    #mobileMenu .inner li a{
        text-decoration:none;
        color:#22688e;
        line-height:30px;
    }
    #mobileMenu .inner li{
        border-top: 1px dashed #22688e;
        padding:11px;
    }
    #mobileMenu .inner li:last-child{
        border-bottom: 1px dashed #22688e;
    }
    #mobileMenu img{
        //height:40px;
        max-height:40px;
    }
    #mobileMenu .head-logo,
    #mobileMenu .head-subtitle,
    #mobileMenu .knoppen{
        display:block !important;
    }
    #top #top_mid .head-logo,
    #top #top_mid .head-subtitle,
    #top #top_mid .knoppen,
    #top #top_mid .head-pagetitle{
        display:none;
    }
    #mobileMenu a.topmitbutton{
        padding:0;
        font-size:inherit;
    }
    #mobileMenu a.topmitbutton:hover{
        background:inherit;
    }
    #mobileMenu .inner.open{
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
    }
    div#container{
        margin-top:0;
    }
    div#content{
        padding:15px;
    }
    div#content div.questionblock{
        padding:15px 0;
        width:100%;
    }
    #mobileMenu .head-logo{
        padding:0;
    }
    div#top{
        height:64px;
    }
    #welkom_mid *{
        font-size:8px !important;
    }
    .welkom-mid-username{
        padding-left:15px;
    }
    
    textarea{
        height:400px;
    }
    
    /* mjs-nestedSortable-leaf - beheersfuncties */
    ol.ui-sortable .sortablebar{
        display:flex;
        flex-flow:row wrap;
    }
    ol.ui-sortable .sortablebar .naam{
        width:75%;
        margin:0;
    }
    ol.ui-sortable .sortablebar .mutatebuttons{
        margin:auto 0 auto auto;
        width:25%;
        display:flex;
        flex-flow:row wrap;
    }
    ol.ui-sortable .sortablebar .mutatebuttons a{
        margin: 0;
    }
    ol.ui-sortable .sortablebar .mutatebuttons a:first-child{
        margin-left:auto;
    }
    #editform .chzn-container{
        width:100% !important;
    }
    #editform .chzn-drop{
        width:calc(100% - 2px) !important;
    }
    #editform .chzn-search,
    #editform .chzn-results{
        width:calc(100% - 12px) !important;
    }
    #editform .chzn-container input{
        width:calc(100% - 25px) !important;
    }
    
    div.editbar .editbar_content{
        padding-left:0 !important;
    }
    div.editbar{
        z-index:100;
    }
    table, table th, table td{
        font-size:10px;
        vertical-align:top;
        line-height:11px;
    }
    .questionblock .chzn-container{
        font-size:16px;
        width:100% !important;
    }
    .questionblock .chzn-container a{
        height: 30px !important;
        line-height: 30px !important;
    }
    .chzn-container-single .chzn-single div b{
        background-position: -3px 3px !important;
    }
    .questionblock .chzn-drop{
        width:calc(100% - 2px) !important;
    }
    .questionblock .chzn-container input{
        width:calc(100% - 25px) !important;
    }
    .questionblock .chzn-search{
        width:calc(100% - 8px) !important;
    }
    
    /* gekke popup */
    #AND_Popup, div.AND_Popup{
        left: 0 !important;
        margin-left: 0 !important;
        width:calc(100% - 20px) !important;
    }
    #AND_Popup .chzn-container, div.AND_Popup .chzn-container{
        width: 100% !important;
    }
}