/* -------------------- WJ Control -------------------- */

.wj-content {
	/* Primary wj control style - applies to all controls */
	display: inline-block;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 4px;
	background-color: #fff;
}

.wj-header {
	/* Define control header */
	background-color: #EAEAEA;
	color: #444;
	font-weight: bold;
}

.wj-state-selected {
	/* Selected state colors */
	background-color: #0085c7;
	color: #fff;
}

.wj-state-multi-selected {
	/* Selected state colors */
	background-color: #80ADBF;
	color: #fff;
}

.wj-state-disabled {
	/* Fade disabled state */
	opacity: 0.5;
}

.wj-control[disabled="disabled"] {
	/* HTML disabled controls */
	background-color: #eeeeee;
	opacity: .5;
	cursor: not-allowed;
}

	.wj-control[disabled="disabled"] * {
		cursor: not-allowed;
	}

/* -------------------- Button Styles -------------------- */

button, html input[type=button], input[type=reset], input[type=submit] {
	/* Basic style for all button types */
	-webkit-appearance: button;
	overflow: visible;
	border-radius: inherit;
	cursor: pointer;
}

.wj-btn {
	/* Global base button style */
	display: block;
	padding: 0 10px;
	height: 100%;
	vertical-align: middle;
	text-align: center;
	white-space: nowrap;
	cursor: pointer;
}

.wj-btn-default {
	/* Additional styling for a 'default' button */
	border: 1px solid rgba(0, 0, 0, 0.2);
	background-color: transparent;
	color: inherit;
	font-weight: bold;
}

	.wj-btn-default:hover {
		/* Hover on 'default' button */
		background-color: rgba(0, 0, 0, 0.1);
	}


/* -------------------- Button Group Styles -------------------- */

.wj-btn-group, .wj-btn-group-vertical {
	/* Define button group based on bootstrap */
	position: relative;
	display: inline-block;
	border-radius: 4px;
	vertical-align: top;
}

	.wj-btn-group > .wj-btn, .wj-btn-group-vertical > .wj-btn {
		/* Float buttons in group */
		position: relative;
		float: left;
	}

		.wj-btn-group > .wj-btn:not(:first-child):not(:last-child) {
			/* Remove inner button border radius */
			border-radius: 0;
		}

		.wj-btn-group > .wj-btn:first-child {
			margin-left: 0;
		}

			.wj-btn-group > .wj-btn:first-child:not(:last-child) {
				/* Remove first button right-side border radius and margin */
				border-right: none;
				border-top-right-radius: 0;
				border-bottom-right-radius: 0;
			}

		.wj-btn-group > .wj-btn:last-child:not(:first-child) {
			/* Remove last button left-side border radius and margin */
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;
		}

	.wj-btn-group .wj-btn + .wj-btn, .wj-btn-group .wj-btn + .wj-btn-group, .wj-btn-group .wj-btn-group + .wj-btn, .wj-btn-group .wj-btn-group + .wj-btn-group {
		/* Remove margin from inner buttons to prevent double border */
		margin-left: -1px;
	}

/* -------------------- ListBox Styles -------------------- */

.wj-listbox {
	overflow: auto;
}

.wj-listbox-item {
	padding: 3px 10px;
}

	.wj-listbox-item:not(.wj-state-selected):not(.wj-separator):hover {
		background-color: rgba(0,0,0,.05);
	}

.wj-dropdown .wj-listbox {
	padding: 0;
	white-space: nowrap;
}

/* -------------------- Dropdown Styles -------------------- */

.wj-dropdown {
	vertical-align: middle;
}

	.wj-dropdown .wj-template, .wj-dropdown .wj-dropdown-menu {
		border-radius: inherit;
	}

.wj-template {
	height: 32px;
}

.wj-dropdown-menu {
	-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
	box-shadow: 0 6px 12px rgba(0,0,0,.175);
}

/* -------------------- Input Group Styles -------------------- */

.wj-inputnumber {
	vertical-align: middle;
}

input::-ms-clear {
	/* Eliminate clear icon from IE textbox */
	display: none;
}

button, input, optgroup, select, textarea {
	/* Remove default browser focus outlines */
	outline: 0;
}

.wj-input-group-btn, .wj-input-group .wj-form-control {
	box-sizing: border-box;
	display: table-cell;
}

.wj-input {
	height: 100%;
	overflow: hidden;
}

.wj-input-group {
	/* Define input group based on bootstrap */
	position: relative;
	display: table;
	overflow: hidden;
	width: 100%;
	height: 100%;
	min-height: 32px;
	border-collapse: separate;
	border-radius: 4px;
	background: inherit;
}

	.wj-input-group .wj-form-control {
		/* Style for text input box in group */
		position: relative;
		float: left;
		padding: 0 8px;
		width: 100%;
		height: 100%;
		min-height: 32px;
		border: none;
		border-radius: 0;
		background-color: transparent;
		color: inherit;
	}

		.wj-input-group .wj-form-control.wj-numeric {
			/* Text alignment for numeric input types */
			text-align: right;
		}

	.wj-input-group div[wj-part='header'] {
		/* Adjust float and width for Menu control */
		float: none;
		width: auto;
		vertical-align: middle;
	}

.wj-input-group-btn > .wj-btn {
	/* Remove border from outside of buttons - outer border set at wj-content level */
	border-width: 0;
}

.wj-input-group-btn:first-child > .wj-btn {
	/* Remove first button right-side border radius */
	border-right-width: 1px;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.wj-input-group-btn:last-child > .wj-btn {
	/* Remove last button left-side border radius */
	border-left-width: 1px;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.wj-input-group-btn {
	/* Style for buttons in group */
	position: relative;
	width: 28px;
	height: 100%;
	vertical-align: top;
	white-space: nowrap;
}

/* -------------------- Calendar Date Input Styles -------------------- */

.wj-calendar-outer {
	/* Outer padding for calendar control */
	display: block;
	padding: 10px;
	width: 100%;
	height: auto;
}

.wj-calendar td {
	text-align: center;
}

.wj-dropdown-menu .wj-calendar-outer {
	/* Remove background, border when in dropdown */
	border: 0;
	background: none;
}

/* -- Date selection -- */

.wj-calendar-header {
	/* Added padding to bottom of date selection options */
	display: block;
	padding: 0 0 15px 0;
	width: 100%;
}

.wj-month-select {
	/* Float month selection to the left */
	display: inline-block;
	float: left;
	/* Cursor for month selection */
	cursor: pointer;
}

.wj-calendar-header .wj-btn-group {
	/* Float calendar button group to the right */
	display: inline-block;
	float: right;
}

	.wj-calendar-header .wj-btn-group .wj-btn {
		/* Size button group in calendar header */
		padding: 0 8px 1px 8px;
		min-height: 20px;
        min-width:50px;
	}

/* -- Days of the month -- */

.wj-calendar-month {
	box-sizing: border-box;
	width: 100%;
	border-collapse: collapse;
	font: inherit;
}

	.wj-calendar-month td {
		width: 14.29%;
		padding: 5px 0;
		border: none;
	}

	.wj-calendar-month .wj-header {
		/* Slightly reduce size of text in calendar header */
		font-size: 90%;
	}

/* -- Months of the year -- */

.wj-calendar-year {
	box-sizing: border-box;
	width: 100%;
	border-collapse: collapse;
	font: inherit;
}

	.wj-calendar-year td {
		width: 25%;
		padding: 8px;
		border: none;
	}

/* -- FlexGrid -- */

.wj-flexgrid {
	width: 100%;
}

.wj-cell {
	position: absolute;
	box-sizing: border-box;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	padding: 3px;
	border-right: 1px solid rgba(0, 0, 0, 0.2);
	border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

[dir="rtl"] .wj-cell {
	border-left: 1px solid rgba(0, 0, 0, 0.2);
	border-right: none;
}

.wj-cell.wj-wrap {
	white-space: normal;
	text-overflow: clip;
}

.wj-grid-editor {
	padding: 3px;
	border: none;
	width: 100%;
	margin: 0px;
}

.wj-alt:not(.wj-state-selected):not(.wj-state-multi-selected) {
	background-color: rgba(0, 0, 0, 0.02);
}

.wj-flexgrid .wj-group {
	background-color: rgba(0, 0, 0, 0.1);
}

/* remove spinner buttons from InputNumber control */
.wj-inputnumber input[type=number]::-webkit-inner-spin-button,
.wj-inputnumber input[type=number]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* -------------------- WJ Tooltip -------------------- */

.wj-tooltip {
	position: absolute;
	z-index: 1000;
	top: 0px;
	left: 0px;
	pointer-events: none;
	max-width: 400px;
	padding: 6px;
	background-color: #ffffe5;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 6px;
	box-shadow: 0 6px 12px rgba(0,0,0,.175);
}

/* -------------------- Chart -------------------- */

.wj-flexchart {
	height: 400px;
	padding: 15px 10px;
	margin-bottom: 12px;
	background-color: white;
	border: 1px solid #e4e4e4;
}

	.wj-flexchart .wj-title {
	}

	.wj-flexchart .wj-header {
	}

		.wj-flexchart .wj-header .wj-title {
			font-size: 16pt;
			fill: #666;
			font-weight: normal;
		}

	.wj-flexchart .wj-footer {
	}

		.wj-flexchart .wj-footer .wj-title {
			fill: #666;
			font-weight: normal;
		}

	.wj-flexchart .wj-plot-area {
	}

	.wj-flexchart .wj-legend .wj-label {
		fill: #666;
	}

	.wj-flexchart .wj-axis-x .wj-title,
	.wj-flexchart .wj-axis-y .wj-title {
		font-style: italic;
	}

	/* style for selected items on the chart */
	.wj-flexchart .wj-state-selected {
		stroke-width: 3px;
		stroke-dasharray: 6;
		stroke-linecap: square;
	}

	/* style for selected items on the chart - smaller screens */
		@media(max-width: 1025px) {
			.wj-flexchart .wj-state-selected {
			stroke-width: 2px;
			stroke-dasharray: 4;
			}
		}

		@media(max-width: 767px) {
			wj-flexchart .wj-state-selected {
			stroke-width: 1px;
			stroke-dasharray: 3;
			}
		}

/* ---------- X Axis ---------- */

.wj-flexchart .wj-axis-x {
}

	.wj-flexchart .wj-axis-x .wj-label {
		fill: #666;
	}

	/* bottom line */
	.wj-flexchart .wj-axis-x .wj-line {
		stroke: #aaa;
		stroke-width: 1;
	}

	/* bottom tick */
	.wj-flexchart .wj-axis-x .wj-tick {
		stroke: #aaa;
		stroke-width: 1;
	}

	/* none */
	.wj-flexchart .wj-axis-x .wj-gridline {
		stroke: black;
		stroke-width: 0.25;
	}

/* ---------- Y Axis ---------- */

.wj-flexchart .wj-axis-y {
}

	/* labels down y axis */
	.wj-flexchart .wj-axis-y .wj-label {
		fill: #666;
	}

	.wj-flexchart .wj-axis-y .wj-tick {
		stroke: #aaa;
		stroke-width: 1;
	}

	/* bg horiz lines */
	.wj-flexchart .wj-axis-y .wj-gridline {
		stroke: #777;
		stroke-width: 0.25;
	}

/* ---------- Gauges ---------- */

.wj-gauge {
	overflow: hidden;
}

	.wj-gauge:focus {
		outline: none;
	}

	.wj-gauge .wj-face path {
		fill: #f5f5f5;
		stroke: #cbcbcb;
		stroke-width: 1;
		stroke-linejoin: round;
	}

	.wj-gauge .wj-pointer {
		fill: #0085c7;
	}

	.wj-gauge .wj-min, .wj-max {
		font-size: 60%;
		opacity: .5;
	}

.wj-radialgauge .wj-value {
	font-size: 150%;
}

.wj-lineargauge {
	height: 1.2em;
}

/* ---------- Glyphs ---------- */

.wj-glyph-up {
	display: inline-block;
	border-right: .4em solid transparent;
	border-bottom: .5em solid;
	border-left: .4em solid transparent;
	opacity: 0.75;
	cursor: pointer;
}

.wj-glyph-down {
	display: inline-block;
	border-top: .5em solid;
	border-right: .4em solid transparent;
	border-left: .4em solid transparent;
	opacity: 0.75;
	cursor: pointer;
}

.wj-glyph-left {
	display: inline-block;
	border-top: .4em solid transparent;
	border-right: .5em solid;
	border-bottom: .4em solid transparent;
	opacity: 0.75;
	cursor: pointer;
}

.wj-glyph-right {
	display: inline-block;
	border-top: .4em solid transparent;
	border-bottom: .4em solid transparent;
	border-left: .5em solid;
	opacity: 0.75;
	cursor: pointer;
}

.wj-glyph-down-left {
	display: inline-block;
	border-top: .65em solid transparent;
	border-left: .65em solid;
	opacity: 0.75;
	cursor: pointer;
}

.wj-glyph-down-right {
	display: inline-block;
	border-bottom: .65em solid;
	border-left: .65em solid transparent;
	opacity: 0.75;
	cursor: pointer;
}

.wj-glyph-up-left {
	display: inline-block;
	border-bottom: .65em solid transparent;
	border-left: .65em solid;
	opacity: 0.75;
	cursor: pointer;
}

.wj-glyph-up-right {
	display: inline-block;
	border-top: .65em solid;
	border-left: .65em solid transparent;
	opacity: 0.75;
	cursor: pointer;
}

.wj-glyph-circle {
	display: inline-block;
	border: .25em solid;
	border-radius: 1em;
	-webkit-transform: translateY(-.1em);
	transform: translateY(-.1em);
	opacity: 0.75;
	cursor: pointer;
}

.wj-glyph-square {
	display: inline-block;
	border: .25em solid;
	opacity: 0.75;
	cursor: pointer;
}

.wj-glyph-diamond {
	display: inline-block;
	border: .25em solid;
	-webkit-transform: rotate(45deg);
	-webkit-transform-origin: 50% 50%;
	transform: rotate(45deg);
	transform-origin: 50% 50%;
	opacity: 0.75;
	cursor: pointer;
}