/* variables */
@warning-color: #f92672;
@dark-color: #000;
@middle-color: #333;
@light-color: #fff;
@middle-gray: #ddd;
@light-gray: #eee;
@dark-yellow: #fdb91a;
@middle-yellow: #fdd11a;
@light-yellow: #fcf8e3;
@light-blue: #d5edf8;
@tip-color: rgba(0, 0, 0, 0.6);
@default-space: 10px;

/* styles */
.app-input-asterisk {
	font-size: 18px;
}
.app-input-asterisk {
	color: @warning-color;
}
.app-input-label {
	margin-bottom: 7px;
	font-weight: bold;
}
.app-input-btn-add {
	margin: 20px 0;
}
.app-checkbox-options {
	color: @light-color;
}
.app-action-icon {
	margin: 0 5px;
	cursor: pointer;
}

.app-radio-group {
	margin: 5px 0;
}

.app-dropzone {
	margin-bottom: 20px;
	height: 70px;
	width: 100%;
	color: @middle-color;
	border: 2px dashed @middle-yellow;
	border-radius: 5px;
	padding: @default-space;
	cursor: pointer;
}
.app-dropzone-enter {
	background-color: @light-yellow;
}
.app-dropzone-accept {
	background-color: @light-yellow;
}
.app-dropzone-reject {
	background-color: @warning-color;
}

.app-message-popup {
	position: fixed;
	bottom: 0;
	right: 0;
	z-index: 10;
	padding: 5px;
	margin-right: 25px;
}
.app-message-bar {
	background-color: @light-blue;
	color: black;
	font-size: 90%;
	border: 1px dashed @middle-color;
	padding: 5px @default-space;
	border-radius: 15px;
	white-space: nowrap;
	width: auto;
	height: auto;
}
.app-search-icon {
	border: 1px solid @middle-color;
	border-bottom: 0;
	border-bottom-left-radius: 0;
	color: @middle-color;
}
.app-search-bar {
	border: 1px solid @middle-color;
	border-bottom: 0;
}

.app-diff-container {
	border: 1px solid @middle-color;
	border-radius: 3px;
	padding: 5px;
	margin-bottom: 20px;
}
.app-diff-title {
	display: flex;
	padding: 5px 0;
}
.app-diff-collapse {
	margin: 2px 15px 0 5px;
	cursor: pointer;
	color: #337ab7;
}
.app-diff-table {
	td {
		padding: 3px 7px 0;
	}
	.app-diff-row-ori, .app-diff-row-del, .app-diff-row-add {
		td {
			&:first-child {
				display: table-cell;
				white-space: nowrap;
			}
			&:last-child {
				width: 100%;
			}
		}
	}
	.app-diff-row-ori {
		td:first-child {
			background: @light-gray;
		}
	}
	.app-diff-row-del {
		background: #ffdce0;
		td:first-child {
			background: #fdaeb7;
		}
	}
	.app-diff-row-add {
		background: #ddffe8;
		td:first-child {
			background: #bef5cb;
		}
	}
}

.app-ellipsis {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.app-tooltip {
	position: absolute;
	text-align: left;
	min-width: 280px;
	max-width: 400px;
	width: auto;
	background: @tip-color;
	color: @light-color;
	border: 0px;
	border-radius: 7px 7px 0 0;
	font: 14px sans-serif;
	box-shadow: 6px 6px 7px #bbb;
}
.app-tooltip-title {
	color: @middle-yellow;
	padding: 10px 10px 4px 10px;
	font: bold 20px sans-serif;
	.app-ellipsis;
}
.app-tooltip-desc {
	color: @light-color;
	padding: 0 10px 4px 10px;
}
.app-tooltip-content {
	padding: @default-space;
	border-top: 1px solid @light-color;
	border-bottom: 1px solid @light-color;
}
.app-tooltip-footer {
	padding: @default-space;
	text-align: center;
}
.app-tooltip:after {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border-width: 10px;
	border-style: solid;
	border-color: transparent @tip-color transparent transparent;
	top: 36px;
	left: -20px;
}

.app-grid-header {
	background: @middle-color;
	color: @light-color;
	font-weight: 700;
}


/* override */
input[type="search"] {
    -webkit-appearance: searchfield;
}
input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: searchfield-cancel-button;
}
.ReactTable {
    border: 1px solid @middle-color;
}
.ReactTable.-highlight .rt-tbody .rt-tr:not(.-padRow):hover {
	background: @light-yellow;
}
.ReactTable.-striped .rt-tr.-odd {
	background: @light-gray;
}
.btn-default {
	border: 1px solid @middle-gray;
}
.well {
	background: @light-gray;
	border: 1px solid @middle-gray;
}


body {
    background-color: @middle-color;
}
.app-default {
	color: orange;
	text-align: center;
}
.navbar-default, .modal-header {
	background-color: @middle-yellow;
	border: 0;
}
.navbar-default .navbar-brand, .navbar-right a {
	color: @dark-color;
}
.sidebar {
	background-color: @middle-color;
	color: @middle-yellow;
}
.sidebar ul li {
    border-bottom: 0;
}
.panel-container {
	margin: 10px 0 0;
	border-color: @dark-yellow;
	color: @middle-color;
	a {
		color: #000;
	}
}
.panel-container .panel-heading {
	background-color: @middle-yellow;
	color: @dark-color;
	padding: 12px 15px 0 15px;
}
.panel-title {
	display: inline-block;
	width: 100%;
	padding-right: 15px;
}
.panel-glyph {
	display: inline-block;
	position: absolute;
	right: 30px;
}
.panel-count {
	margin: 20px 0 8px;
	font-size: 40px;
	line-height: 40px;
}
.panel-desc {
	color: @dark-yellow;
	font-weight: bold;
}

#vis_tree {
	.node {
		circle {
			fill: #000;
			stroke: @dark-yellow;
			stroke-width: 2px;
		}
		text {
			font: 14px sans-serif;
		}
	}

	.link {
		fill: none;
		stroke: #ccc;
		stroke-width: 2px;
	}
}
