.modal i {
	height: 2em;
	width: 2em;
	border-radius: 100%;
	background: #e35f13aa;
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	animation: spin 1s ease infinite;
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}
 .modal i:before, .modal i:after {
	content: '';
	display: block;
	position: absolute;
	height: inherit;
	width: inherit;
	background: inherit;
	border-radius: inherit;
	animation: spin 1s ease infinite;
}
 .modal i:before {
	left: -2.3em;
}
 .modal i:after {
	left: 2.3em;
}
 @keyframes spin {
	0% {
		top: 50%;
		transform: rotate(0deg);
	}
	 50% {
		top: calc(50% - 4em);
		transform: rotate(-180deg);
	}
	 100% {
		 top: 50%;
		 transform: rotate(-360deg);
	}
}
 

/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
                /* url('https://i.stack.imgur.com/FhHRx.gif') */
                50% 50% 
                no-repeat;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading .modal {
    overflow: hidden;   
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modal {
    display: block;
}

*
	{
	box-sizing: border-box;
	}
	
.menu
	{
	float:left;
	width:20%;
	text-align:center;		
	}
	
.main
	{
	float:left;
	width:80%;
	padding:0 20px;
	}

@media only screen and (max-width:620px)
	{
	/* For mobile phones: */
	.menu, .main
		{
		width:100%;
		}
	body,table
		{
		font-size: 3vw;
		}
	}

img
	{
	max-width: 100%;
	}

body,table
	{
	font-family: calibri,tahoma; 
	border: 1px solid #666;
	}
	
table.noborder
	{
	border: none;
	}
	
table.noborder td:first-child
	{
	border-left : none;
	}
table.noborder td:last-child
	{
	border-right : none;
	}
	
body
	{
	background: url(/images/login_background.png) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	
	font-family: calibri,tahoma; 
	}
	
html,body
	{
	margin: 0px;
	height: 100%;	
	}
	
.container
	{
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
		
	background-color: white;
	border: 1px solid #666666;
		
	padding: 20px;
	}
		
.input-container {
    display: -ms-flexbox; /* IE10 */
    display: flex;
    width: 100%;
    margin-bottom: 15px;
}
	
.input-field
	{
	width: 100%;
	outline: none;
	padding: 10px;
	}
	
.input-field:focus
	{
    border: 2px solid dodgerblue;
	}
	
.icon
	{
    padding: 8px;
    background: #aaaaaa;
    color: white;
    min-width: 50px;
    text-align: center;
	}
	
#title
	{
	font-size: 40px;
	}
	
#title img
	{
	vertical-align:middle;
	margin-right: 20px;
	}
	
.btn {
    background-color: #aaaaaa;
    color: white;
    padding: 15px 20px;
    border: none;
    cursor: pointer;
    width: 100%;
    opacity: 0.9;
}

.btn:hover
	{
    opacity: 1;
	}
	
hr
	{
    border: 0;
    height: 1px;
    background: #333;
    background-image: linear-gradient(to right, #ccc, #333, #ccc);
	}
	
.error
	{
	color: red;
	}
	
.success
	{
	color: green;
	}
	
.info
	{
	color: blue;
	}
	
i
	{
	vertical-align: middle;
	}
	
.footerlink
	{
	text-align: right;
	font-size: small;
	}
	
.footerlink a
	{
	color: black;
	}
	
.footerlink a:hover
	{
	font-weight: bold;
	}
	
#topbar
	{
	height: 80px;
	background-color: rgba(227,95,19,0.2);
	border-bottom: 5px solid #e35f13;
	overflow: hidden;
	line-height: 80px;
	padding-left: 20px;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	}
	
#topbar img
	{
	vertical-align: text-top;
	}
	
#user
	{
	float: right;
	margin-right: 20px;
	}
	
#logout
	{
	float: right;
	}
#logout a
	{
	display: block;
	color: white;
	text-decoration: none;
	background-color: #666666;
	padding: 0px 8px;
	}
	
#logout a:hover
	{
	color: black;
	background-color: #CCCCCC;
	}
	
#wrapper
	{
	min-width: 980px;
	max-width: 90%;
	margin: auto;
	height: 100%;
	position: relative;
	padding: 80px 0px 00px 0px;
	}
	
#back
	{
	left: 0px;
	right: 0px;
	height: 100%;
	background-color: white;
	position: absolute;	
	top: 0px;
    filter: alpha(opacity=80);
    opacity: 0.8;
	z-index: -100;
	border: 1px solid #666666;
	}
	
#content
	{
	overflow: auto;
	width: 100%;
	height: 100%;
	padding: 20px 20px 100px 20px;
	}
	
table
	{
    border-spacing: 0px;
    border-collapse: collapse;	
	font-size: 13px;
	}
th
	{
	text-align: left;
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
    z-index: 5;
	background: rgba(60,60,60,1);
	padding: 4px;	
	font-weight: normal;
	color: white;
	}

.clickrow:hover
	{
	background-color: rgba(227,95,19,0.5);
	color: white;
	}
	
.clickcell
	{
	cursor: pointer;
	}
	
.even
	{
	background-color: rgba(200,200,200,0.5);
	}

.textboxright
	{
    position: absolute; 
	right: 4px; 
	top: 7px;
	color: #dddddd;
    }
	
#search
	{
	width: 200px;
	padding: 4px;
	}

.unbilled td
	{
	text-decoration: line-through;
	color: #666666;
	}
	
.blocked
	{
	color: #666666;	
	font-style: italic;
	}
	
.powerpoints
	{
	font-weight: bold;
	background-color: #e35f13; 
	border: 1px solid #e35f13; 
	}

.powerpoints:hover
	{
	color: white; 
	}
	
.fa-comment
	{
	color: #aaa;
	}
	
.tooltip.Klant .fa-comment.comment
	{
	color: #e35f13;
	}
	
.fa-comment.comment
	{
	color: #e35f13;
	}

	
.clickrow:hover .fa-comment.comment
	{
	color: white;
	}
	
.tooltip {
  position: relative;

}

.tooltip .tooltiptext {
  width: 300px;
  visibility: hidden;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 100;
  bottom: 125%;
  right: 15px;
  margin-left: -60px;
  padding: 9px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: calc(100% - 10px);
  left: calc(100% - 30px);
  border-width: 10px;
  border-style: solid;
  border-color: transparent #555 transparent  transparent ;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.msg
	{	
    position: fixed;
    top: 80px;
    left: 50%;
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
	background-color: white;
	border: 2px solid #666;
	padding: 16px;
    animation: fadeOut 2s forwards;
    animation-delay: 3s;
	border-radius: 25px;
	font-weight: bold;
	}
	
@keyframes fadeOut {
    from {opacity: 1;}
    to {opacity: 0;}
}

#powerpointdetails
	{
	width: 100%;
	}
	
#powerpointdetails tr td:nth-child(1)
	{
	width: 1%;
	white-space: nowrap;
	padding-right: 50px;
	background-color: rgba(0,0,0,0.1);
	}
	
#powerpointdetails tr:nth-child(even)
	{
	background-color: rgba(200,200,200,0.5);
	}
	
#powerpointcommentaar
	{
	width: 100%;
	}
	
#powerpointcommentaar tr:nth-child(even)
	{
	background-color: rgba(200,200,200,0.5);
	}
		
#commentform textarea
	{
	width: calc(100% - 88px);
	height: 80px;
	float: left;
	}
	
#commentform input[type=submit]
	{
	width: 80px;
	height: 80px;
	float: left;
	margin-left: 8px;
	}

#powerpointsedit input[type=text], #powerpointsedit select
	{
	min-width: 100%;
	border: none;
	padding: 4px;
	}
	
 #powerpointsedit select[multiple] 
	{
	height: 150px;
	}
	
#powerpointsedit input[type=submit], #powerpointsedit input[type=reset], #powerpointsedit button
	{
	float: right;
	width: 200px;
	height: 40px;
	margin-left: 8px;
	}
 
th:not(:first-child) {
	border-left: 1px solid rgba(255,255,255,0.1);
	}

td {
	padding: 8px;	
	vertical-align: top;
}	

td:not(:first-child) {
	border-left: 1px solid rgba(0,0,0,0.1);
	}
	
#topmenu button	
	{
	}

#clients i.fa-lock, #users i.fa-lock
	{
	color: rgba(255,0,0,0.3);
	}
	
#clients i.fa-unlock-alt, #users i.fa-unlock-alt
	{
	color: rgba(0,0,0,0.8);
	}
	
#clients i.fa-undo-alt, #users i.fa-undo-alt
	{
	padding-left: 8px;
	color: rgba(0,0,0,0.8);
	}
	
a, a:visited, a:hover, a:active {
  color: inherit;
}

#pagination
	{
	margin-top: 8px;
	margin-bottom: 8px;
	}
	
#pagination a
	{
	text-decoration: none;
	background-color: #ccc;
	padding: 2px;
	border-radius: 10%;
	}
		
#pagination a.disabled
	{
	color: #00000030;
	cursor: default;
	}
	
#pagination a.active
	{
	background-color: #e35f13;
	}
	
table caption
	{
	text-align: left;
	background-color: #ddd;
	border-radius: 4px 4px 0px 0px;
	padding: 4px 12px;
	font-weight: bold;
	width: fit-content;
	}
	
	
.positief
	{
	border-left: 5px solid #009900 !important;
	color: #009900;
	font-weight: bold;
	}
	
.negatief
	{
	border-left: 5px solid #aa0000 !important;
	color: #aa0000;
	font-weight: bold;
	}

optgroup
	{
	background-color: #bbb;
	}

optgroup option {
	background-color: #ddd;
}

optgroup[label="Actieve gebruikers"] option
	{
	background-color: #fff;
	}