/* 

Dashboard Template 
http://www.templatemo.com/preview/templatemo_415_dashboard

    1. CSS Imports
    2. General Styles
    3. Sidebar
    4. Charts
    5. Preferences form
    6. Sign in form
    7. tables.html
    8. Bootstrap overrides
    9. Maps
    10. Media Queries
	11. Custom Mike
	
--------------------------------------- */

/* 1. CSS Imports
--------------------------------------- */
@import url('https://fonts.googleapis.com/css?family=Open%20Sans:300,400,700');
@import url('https://cdn.jsdelivr.net/fontawesome/4.2.0/css/font-awesome.min.css');
/*@import url(bootstrap.min.css);*/

/* 2. General Styles
--------------------------------------- */
* { 
	font-family: 'Open Sans', sans-serif; 
 
}

html {
  /*position: relative;
  min-height: 100%; 
  width: 100%;*/
}

body { 
	background-color: white;
}
/*rgb(235,235,235)*/

h1 { font-size: 24px; }
.btn a {
    color: white;
    text-decoration: none;
}
.logo { display: inline-block;  }
.logo h1 {
    font-size: 24px;
    margin: 10px 15px;
}

.templatemo-content-wrapper {
	min-height: 100%;
	/*float: left;  This was because of originally side menu*/
   	width: 100%;
}

.templatemo-content {
	overflow:auto;
	/* die 75px zijn er om ruimte te creeeren tussen content en footer */
	padding: 25px 30px 75px;
    background-color: white;
}

.templatemo-footer {
	
 	bottom: 0;
	position: fixed;
	width: 100%;
	display: block;
   
    font-size: 13px;
    padding: 8px 0 5px 0;
    text-align: center;
    color: #ccc;
    background-color: #333;
	z-index: 2;
}

.margin-bottom-5  { margin-bottom: 5px; }
.margin-bottom-15 { margin-bottom: 15px; }
.margin-bottom-30 { margin-bottom: 30px; }

/* 3. Sidebar
------------------------------------------------------*/

#templatemo_search_box {
    width: 150px;
    display: inline-block;
}
.navbar {
    margin-bottom: 0;
    border-radius: 0;
}
.navbar-header { color: rgb(127,127,127); }
/*
.templatemo-sidebar {
    padding: 0;
    margin-top: 0;
}
.templatemo-sidebar .templatemo-sidebar-menu {
    list-style: none;
    margin: 30px 0;
    padding: 0;
}
.templatemo-sidebar .templatemo-sidebar-menu > li {
    display: block;
    margin: 0;
    padding: 0;
    border: 0px;
}
.templatemo-sidebar .templatemo-sidebar-menu > li > a {
    display: block;
    position: relative;
    margin: 0;
    border: 0px;
    padding: 20px 15px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 300;    
}
.templatemo-sidebar-menu a { color: black; }
.templatemo-sidebar-menu a:hover { text-decoration: none; }
.templatemo-sidebar-menu li.sub .templatemo-submenu { display: none; }
.templatemo-sidebar-menu li.sub.open .templatemo-submenu { display: block; }
.templatemo-submenu { padding-left: 0; }
.templatemo-submenu li {
    list-style: none;
    background-color: #DFDFDF;
}
.templatemo-submenu li a {
    display: block;
    padding: 20px 15px;
    margin: 0;
}
.templatemo-sidebar-menu > li.sub.open > a {
    background-color: rgba(145,145,145,0.3);
}
.templatemo-sidebar .templatemo-sidebar-menu >li.active, .templatemo-sidebar .templatemo-sidebar-menu>li>a:hover {
    background-color: rgb(191, 232, 167);
}
.templatemo-submenu li > a:hover {
    background-color: rgb(228,228,228);
}
.templatemo-sidebar .templatemo-sidebar-menu > li > a > i {
    font-size: 16px;
    top: 2px;
    margin-top: 1px;
    margin-left: 1px;
    margin-right: 4px;
    display: inline-block;
    width: 1.25em;
    text-align: center;
}
*/

/* 4. Charts 
--------------------------------------------*/
.templatemo-chart-box {
    display: inline-block;
    text-align: center;
    padding: 20px 30px 30px 0;
}

/* 5. Preferences Form
------------------------------------------*/
#templatemo-preferences-form {
    max-width: 960px;
    margin-bottom: 30px;
}

/* 6. Sign in Form 
--------------------------------------------*/
.login-container {
	/*padding top and bottom to outline the login spinner in the middle*/
    padding: 40px 0 40px;
    max-width: 600px;
    margin: auto;
}

.templatemo-signin-form {
    padding-top: 50px;
    max-width: 600px;
    margin: 0 auto;
}
.form-horizontal .form-group {
    margin-right: 0;
    margin-left: 0;
}

/* 7. tables.html
------------------------------------------*/
#templatemo_sort_btn { margin-bottom: 20px; }

/* 8. Bootstrap overrides
----------------------------------------------*/
.nav-pills>li>a, .nav-tabs>li>a, .alert, .progress, .panel, .btn, .panel-group .panel, .form-control, .modal-content, .breadcrumb {
   /*border-radius: 0;*/
}
.list-group-item:first-child, .panel-heading {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.list-group-item:last-child {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
.form-control-feedback { right: 15px; }


/* 9. Maps
------------------------------------------------------*/
.jqvmap-zoomin, .jqvmap-zoomout {
    width: 15px;
    height: 15px;
}
.vmap { height: 400px; }

/* 10. Media Queries
------------------------------------------------------*/

@media screen and (min-width: 992px) {
    .templatemo-sidebar {
        width: 235px;
		min-height: 500px;
        /*float: left;*/
       /* position: relative;*/
       /* margin-right: -100%;*/
		background-color: rgb(235,235,235);
		/*background: #9cb925;*/
		border-right: 3px solid #ee4e1d;
		position: fixed;
		z-index: 100000;
    }
	
	box-shadow: 4px 0 10px rgba(0,0,0,0.25);
	-moz-box-shadow: 4px 0 10px rgba(0,0,0,0.25);
	-webkit-box-shadow: 4px 0 10px rgba(0,0,0,0.25);
	}
	 
	/*
	.templatemo-sidebar {
		left: 0; /* Change to right: 0; if you want the panel to display on the right side. */
	/*}*/
	
	
	/*.templatemo-sidebar:hover, .templatemo-sidebar:focus {
		left: 0 !important; /* Change to right: 0 !important; if you want the panel to display on the right side. */
	/*}*/
	
	
	
	/*
	.templatemo-sidebar .arrow {
		right: 2px;   /* Change to left: 2px; if you want the panel to display on the right side. */
	/*}
	 
	.templatemo-sidebar .arrow {
		font: normal 400 25px/25px 'Acme', Helvetica, Arial, sans-serif; /* Acme font is required for .arrow */
		/*color: rgba(0,0,0,0.75); /* Arrow color */
		/*width: 16px;
		height: 25px;
		display: block;
		position: absolute;
		top: 3px;
		cursor: default;
	}
	 
	.templatemo-sidebar:hover .arrow {
		transform: rotate(-180deg) translate(6px,-3px);
		-moz-transform: rotate(-180deg) translate(6px,-3px);
		-webkit-transform: rotate(-180deg) translate(6px,-3px);
	}*/
	
}


@media screen and (max-width: 991px) {
    .navbar-form {
        padding: 0;
        margin-left: 0;
    }
    .navbar-header { float: none; }
    .navbar-toggle { display: block; }
    .templatemo-sidebar {
        border-top: 0 !important;
        margin: 20px;
    }
    .templatemo-sidebar.navbar-collapse.collapse {
        display: none !important;
    }
    .templatemo-sidebar.navbar-collapse.in {
        border-top: 0 !important;
        margin: 20px;
        position: relative;
        overflow: hidden !important;
        overflow-y: auto !important;
        display: block !important;
    }
    .templatemo-content-wrapper { float: none; }
    .templatemo-content { 
		margin: 0; 
	}
}


@media screen and (max-width: 767px) {
    .templatemo-chart-box {
        padding-right: 0;
    }
}


/* 11. Custom Mike
--------------------------------------- */
.exsmall {
	width: 45px;
}

.small {
	width: 70px;
}

.smallmedium {
	width: 110px;
}
.medium {
	width: 150px;
}
.mediumlarge {
	width: 250px;
}
.large {
	width: 350px;
}

.loadinggif-input
{
   background:
     white
     url('../images/loading6_1.gif')
     no-repeat
     107% 50%;
}

/*addjustment Mike for colors in sales table      */
.table>thead>tr>td.pending,.table>tbody>tr>td.pending,.table>tfoot>tr>td.pending,.table>thead>tr>th.pending,.table>tbody>tr>th.pending,.table>tfoot>tr>th.pending,.table>thead>tr.pending>td,.table>tbody>tr.pending>td,.table>tfoot>tr.pending>td,.table>thead>tr.pending>th,.table>tbody>tr.pending>th,.table>tfoot>tr.pending>th{background-color:#eaddee}.table-hover>tbody>tr>td.pending:hover,.table-hover>tbody>tr>th.pending:hover,.table-hover>tbody>tr.pending:hover>td,.table-hover>tbody>tr:hover>.pending,.table-hover>tbody>tr.pending:hover>th{background-color:#dfcbe6}


/* ----------TABLE EXTENSIONS----------------------*/

/*Make padding smaller than bootstrap original*/
.table-condensed>tbody>tr>td, .table-condensed>thead>tr>td{
	padding:2px 5px;
}

/*Hover line more contrasting than orignal*/
.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
  background-color: #A5CED1;
}

/*White space nowrap: content in td will not be broken now*/
td, th {
	white-space:nowrap;
}


/* BEGIN CSS for DATATABLES */

/*Details control is for child rows in a table*/ 
td.details-control {
    background: url('../../public/images/details_open.png') no-repeat center center;
    cursor: pointer;
}
tr.shown td.details-control {
    background: url('../../public/images/details_close.png') no-repeat center center;
}

/*For tables that could fold out, like child rows in OrderSales. Now main rows hover, but child rows don't get a blue background on hover*/

table.display tbody tr.child th {
    background: white;
}
table.display tbody tr.child td {
    background: white;
}
table.childtable {
  	width: 20%; /* whichever width you want */
    margin-left: 7%;
}
table.childtable tbody tr:hover td {
    background-color: #CFC;
}


 /*
table tr td th.whiteleft {
	width: 50px;
}
*/
/*
.scroll-x {
	overflow: scroll; 
}
*/


/*
table.display tfoot {
    display: table-header-group;
}
*/
/* END CSS for DATATABLES */












/* ---------- END TABLE EXTENSIONS --------------- */

.border {
	border-style:solid;
	border-width:1px;
	border-color: #099;
	padding: 10px 10px;
	margin: 0px;
}

tfoot input {
	width: 100%;
	padding: 3px;
	box-sizing: border-box;
	font-size:11px;
	color:#096;
}

tfoot input::-moz-placeholder {
	font-size:11px;
	color:#096;
}

.form-group input::-moz-placeholder {
	font-size:14px;
	font-weight:bold;
	color: #CCC
}




/*Is response where says Aantal Resultaten in Article*/
#response{
	height:20px;
}



.ui-autocomplete {
	max-height: 100px;
	overflow-y: auto;
	
	overflow-x: hidden;
}

/*IE 6 doesn't support max-height
 * we use height instead, but this forces the menu to always be this tall
 */
 /*
* html .ui-autocomplete {
	height: 200px;
}



.navbar-inverse {
   background-color: #333;
   font-color: blue;
}


.ok {
	color: #090;
	font-style:oblique;
}

.nok {
	color: #C00;
	font-style:oblique;
}

.loading1 {
	color: #03C;
}

/*----------------------- FORM CONTROL FEEDBACK GLYPS -------------- */
.has-feedback .form-control-feedback {
    top: 0;
    right: 15px;
}

.form-horizontal .has-feedback .form-control-feedback {
    top: 0;
    right: 15px;
}

/*------------------------ END FORM CONTROL FEEDBACK GLYPS -----------*/

/*---------------------------- LOADING OVERLAY ---------------------- */

@font-face {
  font-family: "demo";
  src: url('../../public/fonts/icons.woff') format("woff"), url('../../public/fonts/icons.ttf') format("truetype");
}

@keyframes loadingStart {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes loading {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loading {
  position: relative;
  pointer-events: none;
}

.loading .loading-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  overflow: hidden;
  -webkit-animation: loadingStart 3s 300ms linear 1 both;
  -moz-animation: loadingStart 3s 300ms linear 1 both;
  -o-animation: loadingStart 3s 300ms linear 1 both;
  animation: loadingStart 1s 300ms linear 1 both;
  background: rgba(230, 238, 255, 0.7);
  text-align: center;
}
.loading .loading-text {
  font-size: 0.875rem;
  line-height: 1.3125rem;
  text-shadow: white 0 0 1em, white 0 0 0.5em, white 0 0 0.25em;
  position: relative;
  display: block;
  text-transform: uppercase;
  font-weight: bold;
}
.loading .loading-text:after {
  content: "...";
}

.loading .loading-spinner {
  position: absolute;
  top: 50%;
  bottom: 0;
  left: 0;
  right: 0;
  margin: -3.9375rem auto 0;
  /*color: #1a1d1d;*/
  color: #C60;
  text-align: center;
}

.loading .loading-icon {
  font-size: 4.8125rem;
  line-height: 5.25rem;
  text-shadow: rgba(255, 255, 255, 0.75) 0 0 0.5em;
  -webkit-animation: loading 1s steps(4) infinite;
  -moz-animation: loading 1s steps(4) infinite;
  -o-animation: loading 1s steps(4) infinite;
  animation: loading 1s steps(4) infinite;
  display: block;
  vertical-align: middle;
}

.loading .loading-icon:before {
  vertical-align: middle;
  content: "\e000";
  font-family: "demo";
}

/*---------------------------- END LOADING OVERLAY ---------------------- */