@import url(https://fonts.googleapis.com/css?family=Lato:400,700,700italic,400italic);




html{
  height: 95%;
  min-width: 1200px !important;
}



body{
	color: #333;
	text-align: center;
	min-width: 1200px !important;
  height: 95%;
  padding: 0;
  margin: 0;
  font-family: 'Lato', sans-serif;
  font-size: 12pt;
}

.width200logon{
	width: 290px;
}

.pagetitle{
  font-weight: bold;
  font-size: 30px;
  color: #57A4D6;
}


.wrapper{
  position: absolute;
	top: 193px;
  bottom: 47px;
  left:0;
  right:0;
  display: flex;
  margin: 0 12px 0 12px;
  text-align: left;
	min-width: 1200px !important;
}

.menusection{
	border: solid 2px #333;
	padding-left: 5px;
	margin: 0 12px 2px 12px;
	text-align: left;
	overflow: auto;
}

.menu {
	height: 32px;
	display: inline;
	margin: 8px 2px 10px 2px;
	padding: 3px 0;
	padding-bottom: 2px;
	display: inline-block;
	border: 2px rgb(72,72,72) solid;
}
.menusection .btnsubmit,{
	margin: 3px;
}

.menusection label, .menusection select{
	position: relative;
	top: -3px;
}

.menusection a{
	position: relative;
	top: 2px;
	
}

.menusection .btnsubmit{
	border: none;	
}

.menusection .btnsubmit:hover{
	text-decoration: none;
}
.menusection .btnsubmit:active, .menusection .btnsubmit:active .buttontext{
	text-decoration: none;
	background-color:white;
	color: #57A4D6;
}

.menusection .spacerbold, .menusection .spacer{
	width: 6px;
	height: 22px;
	margin: 0 20px 0 20px;
	background-color: #57A4D6;
	display : inline-block;
	position: relative;
}

.menusection .spacer{
	width: 3px;
	margin: 0 6px 0 6px;
}

ul {
  padding-left: 15px;
}

.foldersection, .filesection, .companysection, .usersection{
  border: solid 2px #333;
  overflow: auto;
}

.foldersection, .companysection{
	min-width: 20%;
	max-width: 80%;
	resize: horizontal;
	background-color: #333;
}
.companysection label{
	margin: 5px 5px 0 5px;
	color: white;
}

.foldersection a, .companysection a{
	color: #CCC;
	padding: 5px;
	display:block;
	text-decoration: none;
	cursor: pointer;
}

.foldersection .active > a, .companysection .active > a{
	background-color: #57A4D6;
	color: #333;
	font-weight: bold;
}

.foldersection a:hover, .companysection a:hover{
	background-color: #444444;
	color: #CCC;
	display:block;
	text-decoration: none;
}

.filesection, .usersection{
	flex: 1 1 0;
	width: 80%;
	min-width: 840px;
}

.filesection .list, .usersection .list{
	overflow: auto;
}

.filesection .list li:hover, .usersection .list li:hover{
	background: #57A4D6;
	cursor: pointer;
}

.filesection .list li:hover label, .usersection .list li:hover label{
	cursor: pointer;
}

#addfolder-box input{
	width: 300px;
}

.title li label{
	font-weight:bold;
	cursor:pointer;
}

.list li label{
	font-weight: normal;
	margin-top: 5px;
}

.select{
	width: 30px;
	text-align:center;
	position: relative;
	top: -3px;
}
.filename{
	width: 300px;
}
.filesize{
	width: 140px;
	text-align: right;
}
.filesizekb{
	display:none;
}
.uploaded{
	width: 180px;
	text-align: right;
}
.uploadedby{
	width: 140px;
	text-align: right;
}

.divsort{
  width:10px;
  height: 10px;
  display: inline-block;
}
.asc .divsort{
  background-image: url(../assets/sortup.png);
  text-align: center;
}
.asc:hover .divsort{
  background-image: url(../assets/sortup_groen.png);
}
.desc .divsort{
  background-image: url(../assets/sortdown.png);
  text-align: center;
}
.desc:hover .divsort{
  background-image: url(../assets/sortdown_groen.png);
}

.filter label{
	margin: 5px 5px 0 5px;
}

.useremail{
	width: 315px;
}

.userrole{
	width: 80px;
}

.userfirstname{
	width: 90px;
}

.usermiddlename{
	width: 80px;
}

.userlastname{
	width: 130px;
}

.useractive{
	width: 55px;
}

li label{
  display:inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
	margin-left: 5px;
/*background-color: cyan;*/
}

input[disabled],input[readonly],textarea[readonly], select[disabled] {
 background: rgba(87,164,214,.5);
}

.uploadcontainer{
    text-align: center;
}
#progressbox{
    border: 2px solid #333; 
}
#uploadFile{
  height: 32px;
  visibility: collapse;
  width: 0;
}


.progress-bar-success{
  background-color: #57A4D6;
}

.btn-success, .btn-success:focus {
    color: #fff;
    background-color: #57A4D6;
    border-color: #57A4D6;
}
.btn-success:hover {
    background-color: #3F70AF;
    border-color: #3F70AF;
}

.btn-success.active:focus, .btn-success.active:hover, .btn-success:active.focus, .btn-success:active:focus, .btn-success:active:hover{
    background-color: #2B4393;
    border-color: #2B4393;
}

.translation_section, .gea_section, .tieleman_section, .ibkidupl_section{
	padding: 20px;
	text-align: center;
 
  overflow: auto;
}

.gea_table, .tieleman_table, .ibkidupl_table, .addcompany_table, .editcompany_table, .adduser_table, .edituser_table{
	text-align: left;
	margin-left: auto;
	margin-right: auto;
	border-collapse: separate;
	border-spacing: 10px;
}

#ibkidupl_ordersplaced{
	display: none;
}

.mailsended, .mailnotsended{
	position: relative;
	top: -3px;
	color: #57A4D6;
	display: none; 
}

.mailnotsended{
	color: red;
}

td.comment{
	font-size: 8pt;
}



.tieleman_table td label[for], .ibkidupl_table td label[for]{
	margin-right: 10px;
}

.tieleman_table td input[type="text"], .ibkidupl_table td input[type="text"], .adduser_table td input[type="text"], .edituser_table td input[type="text"]{
	width: 320px;
}

.addcompany_radiobuttons input, .addcompany_checkboxes input, .editcompany_radiobuttons input, .editcompany_checkboxes input, .adduser_radiobuttons input, .adduser_checkboxes input, .edituser_role, .edituser_radiobuttons input, .edituser_checkboxes input{
	position: relative;
	top: -2px;
}

.addcompany_checkboxes input, .editcompany_checkboxes input, .adduser_checkboxes input, .edituser_checkboxes input{
	margin-right: 3px;
}

.addcompany_radiobuttons label,.addcompany_checkboxes label, .editcompany_radiobuttons label,.editcompany_checkboxes label, .adduser_radiobuttons label, .adduser_checkboxes label, .edituser_radiobuttons label, .edituser_checkboxes label{
	margin-right: 6px;
}

.adduser_table input[type="text"]{
	width: 290px;
}

.translation_section  .infolabel{
	text-align: right;
	width: 130px;
	position: relative;
	top: 12px;
	font-weight: bold;
	padding-right: 10px;
}

.translation_section  .valuelabel{
	text-align: left;
	width: 700px;
}

.translation_section  .filterlabel{
	position: relative;
	top: 2px;
	padding-right: 10px;
}

.searchvalues{
	display:none;
}

.translation_section  hr{
	border: 1px solid #57A4D6;

}

.errorlabel{
		color: red;
}

.resultlabel, .searchvalues{
	display:none;
}


#progressContainer{
	height: 2em;
	width: 504px;
	margin-left: auto;
	margin-right: auto;
	border: 2px solid #57A4D6;
	border-radius: 10px;
}
.progressbar{
	position: absolute;
	height: 1.77em;
	border-radius: 8px;
}

#whitebg{
	background: white;
	width: 500px;
	z-index: 1;
}

#blackbg{
	background: black;
	width: 0;
	z-index: 2;
}

#acolor{
	background-color: #57A4D6;
	mix-blend-mode: screen;
	width: 500px;
	z-index: 4;
}

.progressbartext{
	position: relative;
	mix-blend-mode: difference;
	color: white;
	z-index: 3;
	top:3px;

}