/* COMMON ELEMENTS */
html, body {
	height: 100%;
	color: #464646;
	font-size: 10pt;
	padding: 0px;
	margin: 0px;
	font-family: arial, sans-serif;
	font:10pt arial, sans-serif;
}

a {
	color: #464646;
	text-decoration: none;
}

a:hover {
	color: #000000;
}

sup, sub {
	font-size:smaller;
}

sub {
	vertical-align:sub;
}

sup {
	vertical-align:super;
}

.gray-bg {
	background:#F2F2F2;
}

[ng-click] {
	cursor: pointer;
	cursor: hand;
}

input, select, textarea, button {
	font-size:100%;
}

/* COMMON CLASSES */
.mr_propper {
	clear: both;
}

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

.align-right {
	text-align:right;
}

.dropdown {
	position: relative;
}

.dropdown .toggle {
	cursor: hand;
	cursor: pointer;
}

.dropdown .dropdown-block {
	display: block;
	position: absolute;
	top: 100%;
	left: 0px;
	background-color: white;
	width: 150px;
	padding: 10px;
	border: 1px solid #a3a3a3;
	z-index:2;
}

.dropdown .dropdown-block.right {
	left:auto;
	right:0px;
	width:250px;
	text-align:left;
}

.dropdown .dropdown-block.right img {
	vertical-align:middle;
	height:32px;
}

.dropdown .dropdown-block.right .fa-caret-down {
	float:right;
}

#header .dropdown .dropdown-block.right .fa-caret-down {
	margin-top:3px;
}

.dropdown .dropdown-block.right .fa-caret-down {
	display:none;
}

.dropdown .dropdown-block.right .active .fa-caret-down {
	display:inline-block;
	transform:rotate(180deg);
}

.dropdown .dropdown-block.right .collapsed .active .fa-caret-down {
	transform:rotate(0deg);
}

.dropdown .dropdown-block.right .collapsed a {
	display:none;
}

.dropdown .dropdown-block.right .collapsed a.active {
	display:block;
}

.dropdown.collapsed .dropdown-block {
	display: none;
}

.dropdown .dropdown-menu {
	width: 170px;
	padding: 10px 0px;
}

.dropdown .dropdown-menu a {
	display: block;
	padding: 8px 15px;;
}

.dropdown .dropdown-menu a[href], .dropdown .dropdown-menu a[ng-click], .dropdown .dropdown-menu a[onclick] {
	cursor: pointer;
	cursor: hand;
}
.dropdown .dropdown-menu a[href]:hover, .dropdown .dropdown-menu a[ng-click]:hover, .dropdown .dropdown-menu a[onclick]:hover {
	background-color: #D8D8D8;
}

.dropdown .dropdown-menu .separator {
	height: 0px;
	width: 100%;
	display: block;
	border-top: 1px solid #d0d0d0;
	margin: 10px 0px;
}

.btn {
	display: inline-block;
	padding: 5px 10px;
	border: 1px solid #a3a3a3;
	height: auto;
	min-width: 30px;
	vertical-align: bottom;
	font-size: 100%;
	cursor: pointer;
}

.btn * {
	vertical-align: middle;
}

.btn.btn-big {
	padding: 15px;
}

.btn.btn-bigbig {
	padding: 25px;
}

.btn.btn-gray {
	background-color: #464646;
	color: white;
}

.btn.btn-green {
	background-color: #a4b04a;
	color: white;
}

.btn.btn-red {
	background-color: #e0001a;
	color: white;
}

.btn.btn-blue {
	background-color: #0075bb;
	color: white;
}

.modal {
	width: 760px;
	max-height: 80%;
	position: fixed;
	top: 10%;
	left: 50%;
	z-index: 20;
	margin-top: 0px;
	margin-left: -380px;
	background-color: #fff;
	border: 1px solid #999;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	outline: 0;
	-webkit-box-shadow: 0 3px 7px rgba(0,0,0,0.3);
	-moz-box-shadow: 0 3px 7px rgba(0,0,0,0.3);
	box-shadow: 0 3px 7px rgba(0,0,0,0.3);
	-webkit-background-clip: padding-box;
	-moz-background-clip: padding-box;
	background-clip: padding-box;
	overflow-y: auto;
	cursor:default;
}

.modal > .closer {
	position:absolute;
	top:0px;
	left:100%;
	margin-left:-17px;
	font-size:120%;
	z-index:25;
}

.modal-header {
	padding: 9px 15px;
	border-bottom: 1px solid #eee;
}

.modal-header h1 {
	font-size:110%;
	font-weight:bold;
}


.modal-body {
	position: relative;
	max-height: inherit;
	padding: 15px;
	overflow-y: auto;
}

.modal-footer {
	background-color:#f2f2f2;
	padding: 9px 15px;
	border-top: 1px #d9d9d9 solid;
}

.modal-footer .buttons {
	float:right;
}

.modal-footer .buttons button {
	margin:0px 10px;
}

.blocker {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: gray;
	opacity: 0.6;
	z-index: 10;
	cursor:default;
}

.bubble {
	min-width: 200px;
	background-color: white;
	border: 1px gray solid;
	position: absolute;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	left: 50%;
	top: 0%;
	box-sizing: border-box;
	padding: 7px;
	line-height: 18px;
	text-align: left;
	z-index: 2;
}

.bubble .close {
	position: absolute;
	top: 0%;
	left: 100%;
	margin-left: -20px;
	margin-top: 2px;
	width: 20px;
	height: 20px;
	line-height: 20px;
	vertical-align:middle;
}

.bubble .arrow {
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -7px;
	width: 15px;
	height: 7px;

}
.bubble .arrow:before,
.bubble .arrow:after {
	content: '';
	display: block;
	border-style: solid;
	border-color: transparent;
	border-width: 15px;
	width: 0px;
	height: 0px;
	position: absolute;
	top: 0px;
	left: 0px;
}
.bubble .arrow:after {
	top: -1px;
}

.bubble.top .arrow:before {
	border-top-color: gray;
	border-bottom-width: 0px;
}
.bubble.top .arrow:after {
	border-top-color: white;
	border-bottom-width: 0px;
}


.bubble.bottom .arrow {
	top: 0%;
	margin-top: -15px;
}
.bubble.bottom .arrow:before {
	border-bottom-color: gray;
	border-top-width: 0px;
}
.bubble.bottom .arrow:after {
	border-bottom-color: white;
	border-top-width: 0px;
	top: 1px;
}

.bubble.left .arrow:before {
	border-left-color: gray;
	border-right-width: 0px;
}
.bubble.left .arrow:after {
	border-left-color: white;
	border-right-width: 0px;
}

.bubble.right .arrow:before {
	border-right-color: gray;
	border-left-width: 0px;
}
.bubble.right .arrow:after {
	border-right-color: white;
	border-left-width: 0px;
}


/* SPECIFIC */
#loader .blocker {
	z-index: 40;
}

#loader .loading {
	position: fixed;
	top: 50%;
	left: 50%;
	width: 200px;
	height: 80px;
	margin-top: -70px;
	margin-left: -130px;
	text-align: center;
	padding: 30px;
	border: 1px black solid;
	font-size: 150%;
	line-height: 200%;
	background: white;
	z-index: 50;
}

.loginmodal {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 30;
}

.loginmodal .blocker {
	background-color: white;
	opacity: 0.7;
	z-index:0;
}

.loginmodal #login_frame {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 700px;
	height: 550px;
	margin-left: -350px;
	margin-top: -275px;
	border: none;
}

#main {
	width:100%;
	height:100%;
	table-layout:fixed;
	border-collapse:collapse;
}

#header {
	height:49px;
	text-align:center;
	background-color:#f2f2f2;
	font-size:100%;
}
#header > td {
	border-bottom:1px #d9d9d9 solid;
}
#header td {
	vertical-align:middle;
}

#header .fa {
	font-size:140%;
	vertical-align:middle;
	margin-top:-1px;
}

#header > td > table {
	width:100%;
	height:100%;
}

#header > td > table tr > td.left {
	width:300px;
	text-align:left;
	font-size:120%;
	padding-left:20px;
}

#header > td > table tr > td.center {
	text-align:center;
	font-size:140%;
	font-weight:bold;
}

#header > td > table tr > td.right {
	width:300px;
	text-align:right;
	font-size:120%;
	padding-right:20px;
}

#header .main_category {
	height:46px;
	line-height:49px;
	display:inline-block;
	margin:0px 15px;
	border-bottom:3px transparent solid;
}

#header .main_category.active {
	color:#00b1ff;
	border-bottom:3px #00b1ff solid;
}

#middle > td {
	vertical-align:top;
}

#middle > td > div {
	font-size:110%;
}

#middle.padding-top > td > div > div > div {
	padding-top:20px;
}

#groups .inner {
	padding-left:0px;
	padding-right:0px;
}

.inner {
	padding-left:15px;
	padding-right:15px;
}

#middle > .filters {
	font-size:100%;
}

#middle .center > div {
	border-right:1px #ececec solid;
}

#middle .left > div {
	border-right:1px #ececec solid;
}

#footer {
	background-color:#f2f2f2;
	text-align:right;
	padding:0px 20px;
}

#header > td {
	border-top:1px #d9d9d9 solid;
}

#footer td {
	padding:9px;
	height:30px;
}

#footer button {
	margin-left:20px;
}

button {
	border:none;
	height:30px;
	line-height:22px;
	box-sizing:border-box;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	background-color:#d9d9d9;
	color:#464646;
	font-size:120%;
	padding:0px 15px;
	vertical-align:middle;
}

button:hover {
	background-color:#00b1ff;
	color:white;
}

button[disabled=disabled],
button[disabled=disabled]:hover {
	background-color:#dedede;
	color:#a6a6a6;
}

.scrollin {
	height:100%;
	position:relative;
}

.scrollin > div {
	height:100%;
	position:relative;
}

.scrollin > div > div {
	width:100%;
	height:100%;
	position:absolute;
	top:0px;
	left:0px;
	overflow:auto;
	box-sizing:border-box;
}

td.maxAutoHeight, th.maxAutoHeight {
	height:100%;
}

.fullHeight {
	height:100%;
}

@media screen and (min-width:0\0) {
	td.maxAutoHeight, th.maxAutoHeight {
		height:auto;
	}
}

.box_overlay {
	position:absolute;
	background-image:url('../images/box_bg.png');
	height:100%;
	width:100%;
	top:0px;
	left:0px;
	right:0px;
	bottom:0px;
}


*::-webkit-scrollbar {
  width: 15px;
}

*::-webkit-scrollbar-thumb {
  background-color: #d9d9d9;
	border-radius:7px;
	border-left:5px transparent solid;
	border-right:5px transparent solid;
	background-clip: content-box;
}

*::-webkit-scrollbar-track {
  background-color: #d9d9d9;
	border-left:7px transparent solid;
	border-right:7px transparent solid;
	background-clip: content-box;
}

*:hover::-webkit-scrollbar-thumb {
  background-color: #464646;
}

*:hover::-webkit-scrollbar-track {
  background-color: #464646;
}

/* jednotlive sekce */
#list .item {
	position:relative;
	line-height:15px;
	min-height:15px;
	padding:5px 10px;
	vertical-align:middle;
}

#list .item:hover {
	background-color:#f2f2f2;
}

#list .item.active {
	background-color:#00b1ff;
	color:white;
}

#list .item .description {
	height:20px;
	color:#bdbdbd;
}

#list .item.active .description {
	color:#eeeeee;
}

#list .item .favorite {
	display: none;
	position: absolute;
	left: 100%;
	margin-left: -20px;
	top: 3px;
	font-size: 90%;
	color: #999999;
}

#list .item:hover .favorite {
	display: block;
}

#list .item .favorite.fa-star {
	display: block;
}

#list .item .favorite:hover {
	color: black;
}

.toggler {
	display:inline-block;
	width:28px;
	height:13px;
	border:1px #707070 solid;
	border-radius:15px;
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
	position:relative;
	vertical-align:middle;
}

.toggler .switcher {
	height:13px;
	width:13px;
	border-radius:13px;
	-moz-border-radius:13px;
	-webkit-border-radius:13px;
	position:absolute;
	top:0px;
	left:0px;
	background-color:#00b1ff;
}
.toggler .switcher.right {
	left:15px;
}

#groups, #filter {
	background-color:#f2f2f2;
}

#middle .left > div#groups,
#middle .center > div#groups,
#middle .left > div#filter,
#middle .center > div#filter {
	border-color:#d9d9d9;
}

#groups > div > div > table {
	border-collapse:separate;
	border-spacing:15px;
}

#groups .group {
	vertical-align:middle;
	width:50%;
}

#groups .group.active {
	border:2px #00b1ff solid;
}

#groups .group.icons {
	text-align:center;
	background-color:white;
	padding:15px;
}

#groups .group.icons > div {
}

#groups .group:hover {
	background-image:url("../images/unchecked.png");
	background-position:top right;
	background-repeat:no-repeat;
}
#groups .group.active {
	background-image:url("../images/checked.png");
	background-position:top right;
	background-repeat:no-repeat;
}

#groups .group.list {
	background-color:#e6e6e6;
	padding:7px 15px;
	font-size:150%;
	color:#464646;
}

#groups .group img {
	/*max-height:100%;
	max-width:100%;*/
	max-height:80px;
	max-width:100%;
}

#groups .abc > div {
	width:3.84%;
	min-width:15px;
	text-align:center;
	float:left;
}

#groups .abc .disabled {
	color:#b0b0b0;
}

#groups .abc .active {
	color:#00b1ff;
}

div.search {
	color:#707070;
	padding:8px 10px;
	border:1px #707070 solid;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	box-sizing:border-box;
	width:100%;
	height:40px;
	line-height:22px;
	vertical-align:middle;
	background-color:white;
}

div.search input {
	width:100%;
	padding:0px;
	margin:0px;
	border:none;
	background:transparent;
}

div.search input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
	font-style:italic;
}
div.search input::-moz-placeholder { /* Firefox 19+ */
	font-style:italic;
}
div.search input:-ms-input-placeholder { /* IE 10+ */
	font-style:italic;
}
div.search input:-moz-placeholder { /* Firefox 18- */
	font-style:italic;
}
div.search input::placeholder { /* Firefox 18- */
	font-style:italic;
}

div.search > table {
	width:100%;
}

div.search > table td.icon {
	width:30px;
	font-size:130%;
}

#middle .separator {
	border-bottom:1px #d9d9d9 solid;
	margin:15px -15px 15px -15px;
}

.data-header {
	margin:10px 0px;
	font-size:110%;
	font-weight:bold;
}

.item-data .data-row {
	line-height:30px;
	vertical-align:middle;
}

.item-data div.data-row {
	border-bottom:1px #d9d9d9 solid;
	clear:both;
}

.item-data .data-row:after {
	content:'';
	clear:both;
	display: block;
}

.item-data .data-row .label {
	float:left;
	text-align:left;
}

.item-data .data-row .info {
	display: inline-block;
	margin-left: 10px;
	position: relative;
}

.item-data .data-row .info > i.fa {
	color: #aaa;
}

.item-data .data-row a {
	text-decoration: underline;
}

.item-data .data-row .value {
	float:right;
	text-align:right;
}

.item-data .data-row.ignore,
.item-data .data-row.ignore select {
	color:#808080;
}

.item-data .data-row.ignore .align-right input,
.item-data .data-row.ignore .fa-palette {
	display:none;
}

.item-data .data-row.ignore .align-right input[disabled]{
	display:inline-block;
}

.item-data .data-row td.label, .item-data .data-row td.value {
	float:none;
}

.item-data tr.data-row td {
	padding:5px 0px;
	vertical-align:middle;
}

.item-links .link {
	float:left;
	width:49%;
	line-height:30px;
	vertical-align:middle;
	text-decoration:underline;
}

.item-links .link a {
	text-decoration:underline;
}

.item-image {
	text-align:center;
	position: relative;
}

.item-image img {
	max-height:80%;
	max-width:80%;
}

.item-image .overlay {
	position:absolute;
	top: 0%;
	left: 0%;
}

.item-header {
	margin:10px;
	margin-bottom:25px;
	font-size:140%;
}

.data-row input {
	height:30px;
	border:1px #707070 solid;
	padding:9px;
	line-height:22px;
	vertical-align:middle;
	box-sizing:border-box;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	width:120px;
}

.data-row select {
	height:30px;
	border:1px #707070 solid;
	padding:3px;
	line-height:22px;
	vertical-align:middle;
	box-sizing:border-box;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	width:120px;
}

.filter-row {
	border-top:1px #d9d9d9 solid;
	padding:5px 0px;
}

div > .filter-row:first-child {
	border-top:none;
}

.filter-row .label .single {
	color: #808080;
}

.filter-row .label .collapse-icon {
	float:right;
}

.filter-row .value-container {
	padding:5px 0px;
}

.filter-row .value-container.checkboxes .value {
	padding:5px 0px;
	color:#808080;
}

.filter-row .value-container.range .value {
	width:100%;
}

.filter-row .value-container.range .value .slider {
	min-width:200px;
	padding:0px 10px;
}

.filter-row .value-container.range .value .min-value,
.filter-row .value-container.range .value .max-value {
	width:60px;
}

.filter-row .value-container.range .value .min-value {
	text-align:right;
}

.filter-row .value-container.range .value input {
	width:50px;
}

.filter-row a {
	text-decoration:underline;
}

.activefilter {
	margin-bottom:10px;
}

.activefilter > span {
	display:inline-block;
	padding:3px 7px;
	background-color:#b3e8ff;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}

.modal-top-menu {
	text-align:center;
	height:35px;
}

.modal-top-menu span {
	font-size: 120%;
	font-weight: bold;
	display: inline-block;
	height: 35px;
	line-height: 35px;
	vertical-align: middle;
	box-sizing: border-box;
	margin-left: 8px;
	margin-right: 8px;
}

.modal-top-menu span.active {
	color: #00b1ff;
	border-bottom: 3px solid #00b1ff;
}

#samplers .category {
	margin-top: 10px;
}

#samplers .item {
	float: left;
	height: 110px;
	width: 110px;
	border: 3px solid #f2f2f2;
	margin-right: 6px;
	margin-bottom: 6px;
	padding: 5px;
	color: white;
	position: relative;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}

#samplers .item .title-bg {
	position:absolute;
	top:0px;
	left:0px;
	width:120px;
	height:55px;
	background-color:black;
	opacity:0.6;
}

#samplers .item .title {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 110px;
	height: 30px;
	color: white;
	padding: 5px;
}

#samplers .item.active {
	border: 3px solid #00b1ff;
}

.filtered-count {
	color:#00b1ff;
}