@import url(jquery.mCustomScrollbar.css);
// @import url(https://fonts.googleapis.com/css?family=Roboto:100,500,400&subset=latin,latin-ext);
@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700&subset=latin,latin-ext);
@font: "Roboto", sans-serif;
@black: #231f20;
@nounblue: #0070c0; //#145b8d;
@pink: #e43e5e;
@blue: #00adef;
@gray: #969696;
@teal: #1ed4b0;
@verylightblue: #faf7f2; /* yellow, actually */

.thin {
	font-weight: 100;
}

.light {
	font-weight: 300;
}

.regular {
	font-weight: 400;
}

.medium {
	font-weight: 500;
}

.bold, b {
	font-weight: 700;
}

// global
body {
	font-family: @font;
	.light;
	font-size: 12pt;
	color: @black;
}

h1, h2, h3, h4 {
	margin: 0;
}

// navigation
a {
	color: @pink;
	cursor: pointer;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

.external {
	color: @blue;
}

.hidden {
	display: none;
}

.expander {
	.regular;
	white-space: nowrap;
}

.arrow {
	@size: 1.5em;

	display: inline-block;

	width: @size;
	height: @size;
	line-height: @size;

	text-align: center;

	&.external, .external & {
		transform: rotate(-45deg);
	}
	&.expander, .expander & {
		transform: rotate(90deg);
	}
	&.expander.expanded, .expander.expanded & {
		transform: rotate(-90deg);
	}
}

.circle {
	@size: 1.5em;

	display: inline-block;

	width: @size;
	height: @size;
	line-height: @size;

	text-align: center;

	border-radius: 50%;
	border: 1px @black solid;
}

.togglable {
	color: @black;
}

// layout
body, html {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	background-color: @verylightblue;
}

.header {
	padding: 1em 15% 0 15%;
	text-align: center;
	position: relative;
	overflow: hidden;

	.selected {
		color: @pink;
	}

	h1 {
		font-size: 100%*(40/12);
		margin-bottom: 0.1em;
		.light;
	}
	.main_menu {
		font-size: 100%*(20/12);
		.light;
		text-transform: uppercase;
		padding-bottom: 0.5em;
		a {
			color: @black;
			&.selected {
				color: @pink;
			}
		}
	}
	.filters {
		.regular;
		padding-bottom: 1em;
		& ul > li {
			padding-bottom: 0.4em;
			line-height: 0.9em;
		}
	}
	.fixed_bottom {
		position: absolute;
		bottom: 1em;
		right: 2em;
	}
}

.dictionary {
	margin: 0 2em;
	.column {
		overflow: auto;
		// overflow-x: hidden;
		float: left;
		height: 100%;

		&.alphabet {
			width: 6em;
			line-height: 1em;
			// .matrjoska {
			// 	padding-left: 2em;
			// }
			table {
				border-spacing: 0;
			}
			.letter {
				padding-right: 1em;
				color: @nounblue;
			}
			.alphabet_row {
				.count {
					color: @gray;
				}
				&.selected {
					color: @pink;
					.bold;
					.count {
						color: @pink;
					}
				}
				&:hover {
					text-decoration: underline;
					cursor: pointer;
				}
			}
		}
		&.framelist {
			@leftPadding: 1em;
			width: 14em;
			position: relative;
			.search {
				padding-left: @leftPadding;
				height: 2em;
				// width: 100%;
				line-height: 2em;
				background-image: url("../img/search.png");
				background-size: contain;
				background-repeat: no-repeat;
				background-position: right center;
				.search_input {
					font-family: @font;
					font-size: 100%;
					.light;
					width: 10em;
				}
			}
			.matrjoska {
				width: 100%;
				position: absolute;
				top: 3em;
				bottom: 0;
			}
			.result {
				padding-left: @leftPadding;
				height: 100%;

				.scrollhack {
					display: block;
					height: 100%;
					width: 100%;
				}

				&.search_active {
					li {
						a {
							color: @gray;
							&.found {
								color: @black;
							}
						}
					}
				}

				li {
					margin-left: 1em;
					text-indent: -1em;
					a {
						color: @nounblue;
						&.selected {
							color: @pink !important;
							.bold;
						}
						&.not_match {
							color: @gray;
						}
					}
				}
			}
		}
		&.wordentry {
			position: relative;
			.matrjoska {
				padding: 0 2em;
			}
			.wordentry_header {
				height: 2em;
				.matrjoska {
					padding-right: 0;
				}
			}
			.wordentry_content {
				position: absolute;
				top: 3em;
				bottom: 0;
				width: 100%;
			}
		}
	}
}

// slovníkové heslo
.wordentry {
	.light;

	table {
		border: 0px transparent none;
		border-spacing: 0;
		border-collapse: separate;
		margin: 0;
		padding: 0;
	}

	.expander_cell {
		padding-left: 1em;
		text-align: right;
        white-space: nowrap;
		.disabled {
			color: @gray;
			cursor: default;
			&:hover {
				text-decoration: none;
			}
		}
	}

	.pdtvallex-box {
		position: absolute;
		right: 0;
		z-index: 10;
		background-color: #ffffff;

		.expander {
			.external;
		}

		.pdt-links {
			border: 1px @gray solid;
			margin: 0;
			padding: 0.5em 0;
			list-style-type: none;
			text-align: right;
		}
	}

	.attr a {
		color: @black;
	}

	.gloss {
		.regular;
		color: @nounblue;
		.scriptsize {
			.light;
		}
	}

	.headword {
		.regular;
		color: @nounblue;
		font-size: 100%*(18/12);
		margin-bottom: 0.5em;
		.scriptsize {
			font-size: 50%;
		}
	}

	.lexical_unit_index {
		width: 2em;
		a {
			color: @black;
		}
	}

	table.frame {
		.medium;
		a {
			color: @black;
		}
		.type, .forms {
			font-size: 80%;
			line-height: 1em;
			height: 1em;
		}
		.functor:first-child {
			padding-left: 0;
		}
		.functor {
			padding-left: 1em;
		}
		// .forms 
	}

	.lexical_unit {
		width: 100%;
		border-spacing:0 0.2em;
		border: 3px transparent dotted;
		&.selected {
			border: 3px @pink dotted;
		}
	}

	.scriptsize {
		color: @teal;
	}

	.primary-mark {
		.bold;
	}

	.attr .rule-link {
		.light;
		color: @pink;
	}

	.attr {
		vertical-align: top;
        .valuename::after {
             content: "\a0\a0\a0"; //three non-breakable spaces
             white-space: pre;
        }
	}

	.attrname {
		vertical-align: top;
		width: 5em;
		color: @gray;
		a {
			color: @gray;
		}
		&.frame {
			vertical-align: middle;
		}

	}

	.invisible {
		display: none;
	}
}



.exrichFuncGroupFirst {
    font-weight: bold;
    color:#048ca7;
    font-style:italic;
}

.exrichFuncGroup {
    font-weight: bold;
    color:#048ca7;
    font-style:italic;
}

.exrichFunc {
    color:#048ca7;
    font-size: 80%;
}

.exrichPred {
    font-weight: bold;
}

.valdiffFunctor {
    margin-left: 0px;
    margin-right: 2px;
}

.valdiffParentheses {
    vertical-align: sub;
    font-size: 80%;
}

.valdiffAdded {
    color: green;
}

.valdiffRemoved {
    color: orange;
}

.frameFunctorObl {
    margin-left: 5px;
    margin-right: 2px;
}

.frameFunctorOpt {
    margin-left: 5px;
    margin-right: 2px;
    color: blue;
}

.frameFunctorTyp {
    margin-left: 5px;
    margin-right: 2px;
    color: green;
}

.frameParentheses {
    vertical-align: sub;
    font-size: 80%;
}

.frameOrig {
    margin-left: 5px;
    color: grey;
}




ul {
	list-style: none;
	padding: 0;
	margin: 0;

	&.inline {
		li {
			display: inline-block;
		}
	}

	&.separators {
		li {
			padding-left: 0.3em;
		}
		li + li::before {
			content: "|";
			padding-right: 0.3em;
		}
        li + li.thickSeparator::before {
              content: "||";
        }
		&.gt_separators li + li::before {
			content: ">";
		}
	}
}

// vysouvací patička
.footer {
	text-align: center;
	position: absolute;
	bottom: 0;
	left: 0;
	background-color: #fff;
	border-top: 0px @black solid;
	width: 100%;
	z-index: 2;
	.top {
		height: 18px;
		.expander {
			display: inline-block;
			height: 18px;
			transform: scale(3, 2);
			// background-color: red;
			.arrow {
				position: relative;
				top: -3px;
			}
		}
	}
	.content {
		padding: 1em;
	}
}

// autocomplete
.autocomplete-suggestions {
	background-color: #ffffff;
	border: 1px @gray solid;
	margin-top: 0.5em;
	overflow: auto;

	.autocomplete-suggestion {
		color: @gray;
		white-space: nowrap;
		overflow: hidden;
	}
	.autocomplete-selected {
		color: @black;
	}
}

// .autocomplete-suggestions { border: 1px solid #999; background: #FFF; overflow: auto; }
// .autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; }
// .autocomplete-selected { background: #F0F0F0; }
// .autocomplete-suggestions strong { font-weight: normal; color: #3399FF; }
// .autocomplete-group { padding: 2px 5px; }
// .autocomplete-group strong { display: block; border-bottom: 1px solid #000; }

// scrollbar
.mCS-rounded-dark.mCSB_scrollTools {
	opacity: 1;
	width: 26px;
}

.mCS-rounded.mCSB_scrollTools .mCSB_dragger, .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger, .mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger {
	height: 26px;
}

.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
	background-color: #fff;
	border: 1px @black solid;
	margin: 0;
	width: 24px;
	height: 24px;
}

.mCS-rounded-dark.mCSB_scrollTools .mCSB_draggerRail{
	background-color: @black;
	width: 4px;
	// border-radius: 4px;
}

// .mCustomScrollBox {
// 	overflow: visible;
// 	overflow-x: visible;
// 	overflow-y: visible;
// }

.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, 
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: @black; }

.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, 
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: @black; }

.lu_id {
  color: #A9A9A9;
  margin-left: 15px;
}