/*** CSS Document  for Arseus Dental E-Help ***/
/** Not on Paper **/
/* Version: 1 - 25-11-2015 */

/**framework fixes***/
.row.no-gutter { margin-left: 0; margin-right: 0;}
.row.no-gutter [class*="col-"] { padding-right: 0; padding-left: 0;}
.no-padding{padding-left:0 !important; padding-right:0 !important;}

/** fonts**/
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,300);

html, body{	height: 100%;}
body{
	  font-family: 'Source Sans Pro', sans-serif;
	  font-weight: 400;
	  font-size: 14px;
	  color: #666c70;
	  height:100%;
      max-height: 100%;
}

/**DEFAULTS***/
.clear{clear:both;}

.purple{color: #9c5fb5;}
.pushfooter{padding-top: 80px;}

h1{font-size:16px; font-weight:700;}
h2{font-size:15px; font-weight: 700;}
h3{font-size:15px;font-weight:700;}

.title h2{margin-left: 30px;}

a, a:hover, a:active{
	 color: #666c70 ;
	 text-decoration:none;	
}

hr{
	border-color: #85898d;	
}

hr.purple{
	border-color: #9c5fb5;
	margin-top: 35px;
}

p a{
	color:#9c5fb5;
	font-weight: 700;
	text-decoration:underline; 
}

p a:hover{
	 color: #666c70;
}

.shadow-row{
	height:20px;
	width: 100%;
	background-color: #eeeeee;
	-webkit-box-shadow: inset 0px -7px 7px -5px rgba(216,216,216,1);
	-moz-box-shadow: inset 0px -7px 7px -5px rgba(216,216,216,1);
	box-shadow: inset 0px -7px 7px -5px rgba(216,216,216,1);
	display:none;
}


.mobilespace{
	height: 200px;	
}


.nav{
	height: 75px;
	line-height: 40px;
}

.nav .logo{
	width: 140px;
	margin-top:10px;
	padding-left:10px;
}

.nav .fa{
	padding: 0 10px;
	color: #898988;
	margin-top: 10px;
}

.nav .fa:hover{
	color: #9c5fb5;
}

.nav a.active .fa{
	color: #9c5fb5;
}


.settings-control{
	float:right;
	margin: 0 0 0 50px;	
}

.footer{
	text-align:right;
	font-size: 11px;
	margin-top: 20px;	
}
	
/**LOGIN**/
.loginbackground{
	background-image:url(../images/inlog-bg-mob.jpg);
	background-position:bottom center;
	background-repeat:no-repeat;
	background-size:cover;
	width: 100%;
	height:285px;
}

.loginscreen {
	text-align:center;
}

.loginscreen .logo{
	width: 200px;
	margin-top: 20px;
}

.login-container{
	margin-top:15px;
}

.login-container .wrapper{
	margin:0 auto;
}

.row-login-error{
	position:relative;
	bottom:0;	
	height: 50px;
	line-height: 50px;
	background-color: #f3f4f8;
	width: 100%;
	text-align:center;
	font-size:15px;
	display:none;
}

.row-login-error .fa{
	float:right;
	margin-top: 18px;
}
	
#login-error-x {
	cursor:pointer;
}

.error{
    border-color: #ff0000 !important;
    box-shadow:none !important;
    outline: 0 none;
}

.export-ticket:hover{
    color:#9c5fb5;
}

/**FORMS**/
.form-control{
	height: 35px;
	border:1px solid #858584;
	margin: 10px 0 10px 0;
}

.form-control:focus{
	border-color: #9c5fb5;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(156, 95, 181, 0.6);
    outline: 0 none;
}

.btn-export{
	height: 35px !important; 
	line-height:20px !important;
	margin-top: 20px; 
	width:250px;
	text-align:center; 
	margin:10px 0 5px 0 !important; 
	float:none !important;
}

.btn-arseus{	
	background-color: #9c5fb5;
	border:1px solid #9c5fb5;
	color: #fff;
	height: 35px;
	line-height: 12px;
	margin-top: 20px;
}


.btn-arseus:hover{
	background-color: #835098;
	border:1px solid #9c5fb5;
	color: #fff;
}

.btn-arseus-white{	
	margin-top: 20px;
}

.btn-default{
	width:250px;
	margin-bottom:15px;
}


button#create-user .fa,
button#edit-user .fa {
	padding-left: 20px;

}

.form-inline .btn-normal{
	margin-top: 20px;	
}


#usergroup{
	height: 30px;
	width: 100%;
	margin-bottom: 10px;	
}

/** CONTROLS**/
.controls{
	bottom:0;	
	width: 100%;
	height:40px;
	text-align:center;
	float:right;
	z-index:999;
	position:fixed;
	background-color: #eeeeee;
	-webkit-box-shadow: inset 0px -7px 7px -5px rgba(216,216,216,1);
	-moz-box-shadow: inset 0px -7px 7px -5px rgba(216,216,216,1);
	box-shadow: inset 0px -7px 7px -5px rgba(216,216,216,1);
}

.controls .fa{
	font-size: 160%;
	margin: 10px 8px;
}

/** FILTER **/
#filter-panel{
	display:none;
}

.mobilefilter{
	width:95%;
	background-color: #ffffff !important;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	border:1px solid #ccc; 
	height: 35px;
	border-radius:0;
	font-weight: 700;
	font-size: 15px;
	padding-left: 15px;
	margin-bottom: 20px;
	margin-top:20px;
	float:left;
}

.btn-search{
	width: 65px;
	background-color: #9c5fb5;
	color: #fff;
	border-radius:0;
	border:0;
}

.btn-search:hover{
	background-color: #e1cfe9;
	color: #9c5fb5;
	border-radius:0;
	border:0;
}

button#create-user{
	opacity: 0.8;	
}


.filter-mobiel, .filtermobielcontainer{
	width: 100%;	
}

#mobile-status-filter{
	margin-left: 10px;	
	width: 90%;
}

/** SEARCH**/
#search-panel{
	display:none;
}

.stylish-input-group{
	 height: 35px;
}

.stylish-input-group .input-group-addon{
	border-radius:0;
	border:0;
 	background-color: #9c5fb5;
    color: #fff;
	 height: 35px;
	
}

#ticket-search{
	width: 100%;
	height: 35px;
	background-color: #fff;
	border:1px solid #ccc;
	border-radius:0;
		
}

#btn-search{
	background-color: transparent;
	border:0;
	padding-top: 10px;
	padding-left:10px;
}

#purplesearchbtn{
	position:absolute;
	right:0;
	top:10px;
	height: 35px; 
	width: 35px;
	background-color: #9c5fb5;
    color: #fff;
}

.stylish-input-group .form-control{
	border-right:0; 
	box-shadow:0 0 0; 
	border-color:#ccc;
	border-radius:0;
	border: 1px solid #ccc;
	background-color: #fff;
	-webkit-box-shadow: none;
	-moz-box-shadow:none;
	box-shadow: none;
}
.stylish-input-group button{
    border:0;
    background:transparent;
}

/** TICKET **/
.maketicket{
	height:70px;
	background-color: #f0e7f4;
	background-image: url(../images/maketicket-bg.png);
	background-position:right bottom;
	background-repeat:no-repeat;
	transition: background-color 0.5s ease;


}	

.maketicket h1{
	padding-left: 10px;	
}

.maketicket span.purple{
	width: 100%;
	float:left;	
}

.ticket-short{
	height: 15px;

}

.ticket-intro{
	padding: 0 23px;	
}

.ticket-intro p{
	height: 20px;
	overflow:hidden;
}


.ticket-row {
	margin-top:20px;

}	

.ticket-row .fa-eye,
.ticket-row .fa-archive,
.ticket-row .fa-download{

	border-left:1px solid #858584;
	padding:  15px 20px;
}

span.date{
	font-size: 12px;
}

.status{
	background-color: #e1cfe9;
	height: 27px;
	border-bottom: 1px solid #858584;
	text-align:center;
	font-weight: 700;
	line-height: 27px;
	transition: background-color 0.5s ease;
}

.row-ticketinfo{
	margin-top: 10px;	
}

.row-saveticket{
	text-align:center;	
}

.row-saveticket{
	text-align:left;
}

.row-saveticket .btn-arseus{
	margin-top:0; 
}

.containter-ticketinfo{
	margin-top: 20px;	
}

.containter-ticketinfo .container{
	border-bottom:1px solid #9c5fb5;
	padding-bottom:10px;
}

.containter-ticketinfo .container.updated,
.containter-ticketinfo .container.noborder{
	border-bottom:0;	
}


.updated{
	background-color: #f3ecf6;	
	padding: 30px 0;
}

.triangle{
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 20px 20px 0 20px;
	border-color: #f3ecf6 transparent transparent transparent;	
	position:absolute;
	left: 50%;
}


/** EXPORT **/
#exportrow{
	position:fixed;
	bottom: 40px;
	text-align:center;	
	background-color: #fff;
	-webkit-box-shadow: inset 0px 7px 12px -2px  rgba(216,216,216,1);
	-moz-box-shadow: inset 0px 7px 12px -2px rgba(216,216,216,1);
	box-shadow: inset 0px 7px 12px -2px rgba(216,216,216,1);
	z-index: 900;
	padding: 10px 0;
	width: 100%;
}

.export-active{
    color:#9c5fb5;
}


/** BEWERK **/
#accordion{
	margin-top: 20px;
}

.panel-heading{
	border-radius:0;	
}

.panel-default > .panel-heading{
	background-color: 	#e2d4e5;
	border:1px solid #9c5fb5;	
}

#down{
	position:absolute;
	right: 10px;
	color: #9c5fb5;
}

.bewerk{
	float:right;
	margin-right: 10px;	
}

/** MELDINGEN**/
.ticketmade {
	background-color: #9c5fb5;
	height: 35px;
	line-height: 35px;
	font-weight: 700 !important;
	padding-left: 20px;
	margin-top: 20px;
	font-size: 12px;
	color: #fff;
}

/** SETTINGS **/
.row-settings{
	margin-top:	20px;
}
	
/** FORMS**/
label{
	margin-bottom:0;
	font-weight: 300;
}

form{
	margin-bottom: 60px;	
}
	
.form-inline{
	margin-left: 18px;	
	margin-top: 30px;
}
	
.form-inline .form-control{
	border-radius:0;
	border-color:#ccc;
	box-shadow: none;
	width: 100%;
}
	
input#userpassword{
	width: 100%;
}
	
	
.bfh-countries {
	height: 30px; 
	margin-top: 10px;
}

select.multiple{
	width: 80%;
	border:1px solid #ccc;
	height: 120px;
}

.select-controls{
	float:right;
	width: 20%;
	text-align:center;
	margin-top: 10px;
}

.select-controls .fa{
	display:block;
	width: 1
}


p.padding{
	margin: 10px 0;	
}


#btn-user-inactive{
    display:none;
}

/** PAGINERING **/
.pagination{
	width: 320px;
	padding-top: 20px;
}

.pagination ul{
	width: 320px;
	margin:0 auto;
	left: 50%;
	magin-left: -160px;	

}

.pagination ul li{
	float:left;	
	list-style-type: none;
	width: auto;
	padding: 0 5px;
	border-right: 1px solid #666c70;
}

.pagination ul li:first-child,
.pagination ul li:last-child
{
	border-right:0;	
}

.pagination ul li.active a{
		font-weight: 700;
		color: #9c5fb5 !important;
}
.pagination ul li a:hover{
	color: #9c5fb5 !important;
}

	
@media only screen and (min-width : 768px) {
	.loginscreen .logo{width: 280px;}
	.loginbackground{height:600px; background-image:url(../images/inlog-bg-tablet.jpg);}
	.ticket-intro{padding: 23px;	}
	.row-login-error{position:absolute;}
	.maketicket span.purple{float:none; width:auto;}
	#search-panel{padding-bottom: 12px;}
	#search-panel form{padding-top:30px;}



}



@media(min-width:768px) and (max-width:991px){
	#down{right: 30px;}
	.nav .logo{width: 180px;}
	.controls{height: 70px;}
	.controls .fa{font-size: 250%; margin-top: 13px;}
	#exportrow{bottom: 70px;}
	.ticket-intro h3{font-size: 15px;}
	.ticket-short{font-size:14px;}
	.pagination{width: 100%; text-align:center;}
	.filter-mobiel, .filtermobielcontainer{margin-top: 7px;}
	
	
}

@media only screen and (min-width : 992px) {
	/**DEFAULT**/
	.mobilespace{height:0;}
	.right{float:right !important;}
	.left{float:left !important;}
	h1{font-size:23px;}
	h2{font-size:20px;}
	.title h2{margin-left: 30px;}
	.nav{border-bottom:1px solid #e7e7e7; -webkit-box-shadow: 0px 10px 7px -5px rgba(244,243,243,1); -moz-box-shadow: 0px 10px 7px -5px rgba(244,243,243,1); box-shadow: 0px 10px 7px -5px rgba(244,243,243,1); height: 100px; line-height: 100px;}
	.nav .logo{width: 250px;}
	
	.wrapper{ min-height: 100%;  height: auto !important;  height: 100%;  margin: 0 auto; background-image: url(../images/footer-desktop.png); background-size: 100%; background-repeat:no-repeat; background-position:bottom; padding-bottom: 125px; }
	.container{position:relative; z-index: 999;}

	/**LOGIN**/
	body#inlog{  background-image: url(../images/inlog-bg.jpg);  background-size:cover; background-position:top right;  background-repeat:no-repeat;}
	
	.loginscreen{padding-top:10%;}
	.loginscreen .logo{width: 250px;}
	.login-container{background-color: #fff;height: 345px;border-radius: 15px; margin-top: 40px;}
	.login-container .wrapper{width: 85%; padding-top: 50px; background-image:none;}
	.row-login-error{text-align:right; 	font-size:20px;}
	.row-login-error .fa{margin:15px  20px 0 20px;	}
	
	/** NAV**/
	#navcontainer{position:relative; width:992px; margin:0 auto; left: 50%; margin-left: -496px; }
	.controls{position: absolute;left: 0;right: 0; top:0;margin-left: auto;margin-right: auto;max-width: 840px; margin-top: 0px; text-align:right; background-color: transparent;-webkit-box-shadow: none;-moz-box-shadow: none;box-shadow: none;}
	.controls .fa{font-size: 200%;margin: 10px;}
	
	/** FILTER**/
	.row-filter{padding-top: 40px; }
	ul.filterpulldown{background-color: #fff; position:absolute; z-index:999;}
	#btn-filter{margin-left:30px;}
	
	
	/*** CONTENT ***/
	#contentcontainer{position:relative; z-index: 100;}

	/** FORMS**/
	.form-control{height: 55px; }
	.btn-arseus, .btn-arseus-white{/*height: 55px; line-height: 30px;*/ margin-top:50px;}
	.btn-export{width:275px;text-align:center; 	margin:10px 30px 5px 30px !important; }
	.btn-export.right{float:right !important;}
	button#create-user .fa, button#edit-user .fa {font-size: 20px;}
	.form-inline .form-control{width: 80%;}
	.form-inline textarea.form-control {width: 100%;}
	.form-inline .btn-danger, .form-inline .btn-normal{margin-top: 30px; float:right;}
	.form-inline .btn-normal{margin-top: 20px;}
	.btn-group, .btn-group-vertical{float:right;}
	.btn-container .btn-danger, .form-inline .btn-normal{float:left; margin-top:0;}
	.btn-container .btn-group, .btn-group-vertical {float:left;}
	.bfh-countries {width: 80%;}
	#btn-system-down{float:right; margin-top: 30px;}
	.btn.disabled:hover, .btn[disabled]:hover, fieldset[disabled] .btn:hover{background-color: grey;	}
	#usergroup{margin-top:10px;width: 80%;	}
	input#userpassword{width: auto;}

	
	/** SEARCH**/
	.stylish-input-group .form-control{height: 35px;}
	.filterpulldown{max-height: 300px; overflow-y:auto;}
	
	/**DROPDOWNS**/
	.btn-select { position: relative; padding: 0; min-width: 236px;  width: 100%; border-radius: 0; margin-bottom: 20px;}
	.btn-select .btn-select-value {padding: 6px 12px;display: block;position: absolute;left: 0;	right: 34px;	text-align: left;text-overflow: ellipsis;overflow: hidden;border-top: none !important;border-bottom: none !important;border-left: none !important;}
	.btn-select .btn-select-arrow {float: right;line-height: 20px;padding: 6px 10px;top: 0;color: #9c5fb5;}
	.btn-select ul {display: none;background-color: white;color: black;clear: both;list-style: none;padding: 0;margin: 0;border-top: none !important;position: absolute;left: -1px;right: -1px;top: 33px;z-index: 999;border-left:1px solid #ccc;border-right:1px solid #ccc;border-bottom:1px solid #ccc;}
	.btn-select ul li {	padding: 3px 6px;text-align: left;}
	.btn-select ul li:hover {background-color: #f4f4f4;}
	.btn-select ul li.selected {color: white;}
	.btn-select.btn-default:hover, .btn-select.btn-default:active, .btn-select.btn-default.active {border-color: #ccc;}
	.btn-select.btn-default ul li.selected {background-color: #ccc;}
	.btn-select.btn-default ul, .btn-select.btn-default .btn-select-value {background-color: white;}
	.btn-select.btn-default:hover, .btn-select.btn-default.active {background-color: #e6e6e6;}
	
	#filter-status, #filter-chair{width: 46%;}
	#filter-chair{}
	
	.form-group #filter-chair{float:none; right: 0;}
	
	/** TICKET **/

	.maketicket:hover,
	.status:hover{background-color: #e9dced;}
	.maketicket h1{padding-left: 50px;	}
	.ticket-short{border:1px solid #b2b5b7; width: 95%; height: 150px; margin-top: 30px; font-size: 14px;  	overflow:hidden; border-bottom:0;}
	.ticket-intro h3{font-size: 15px;}

	.ticket-row .col-md-6:nth-child(even) .ticket-short,.ticket-row .col-md-6:nth-child(even) .status{float:right;}
	.ticket-intro{padding: 0px 50px 23px 50px;	}
	.ticket-intro p{height: 40px;}
	.ticket-row .fa-eye, .ticket-row .fa-archive, .ticket-row .fa-download{padding-left: 50%;	}
	.status{width: 95%; border-left:1px solid #b2b5b7; border-right:1px solid #b2b5b7; }
	.row-ticketinfo{font-size:17px; line-height:23px;}

	/**EXPORT**/
	#exportrow{position:relative; bottom: 0px;
	text-align:left;	background-color: #fff;-webkit-box-shadow: none;	-moz-box-shadow: none;box-shadow:none;}
	
	/**MELDINGEN**/
	.ticketmade {font-size: 15px;}
	
	/** PAGINERING**/
	.pagination{width: 100%; text-align:center;}
	
	/** FOOTER**/
	#footer{margin-top: -43px;}
}


@media only screen and (min-width : 1200px) {
	#navcontainer{position:relative; width:1170px; margin:0 auto; left: 50%; margin-left: -585px; }
	.loginscreen .logo{width: 357px;}
	.login-container .wrapper{width: 85%;	padding-top: 50px;}
}