/**********/
/*Defaults*/
/**********/
html{
	height: 100%;
}

body{
	font-family: "Open Sans", Calibri, Arial, sans-serif;
	height: 100%;
	padding: 0px;
}
/*Background pattern*/
body::after{
	background-image: url("res/background.jpg");
	content: "";
	display: block;
	height: 100%;
	left: 0px;
	opacity: 0.8;
	position: fixed;
	top: 0px;
	width: 100%;
	z-index: -1;
}

textarea{
	resize: none;
}

span.form-control-feedback{
	pointer-events: initial;
	cursor: pointer;
}

span.form-control-feedback:hover{
	color: #777;
}



/*Hider*/
.hide-me{
	display: none;
}

.show-me{
	display: initial;
}

/*Containers*/
div.containerDiv{
	background: rgba(255, 255, 255, 0.8);
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
	margin: 0px auto;
	max-width: 1500px;
	min-height: 100%;
	min-width: 775px;
	padding: 160px 0px 5px 0px;
	width: 97%;
}

div.content{
	padding: 0px 3px;
}

/*Modals*/
div.modal-content{
	border-radius: 0px;
	border: 3px solid #50A331;
}

div.modal-header{
	text-align: center;
	border-bottom: 2px solid #50A331;
}

div.modal-header h3{
	font-family: 'Open Sans', Calibri, Arial, sans-serif;
	color: #50A331;
	font-weight: bold;
	letter-spacing: 5px;
}

a{
	cursor: pointer;
}

button.close{
	position: relative;
	display: block;
	width: 30px;
	height: 30px;
	background-color: white;
	left: 30px;
	bottom: 30px;
	border-radius: 50%;
	opacity: 1;
	border: 3px solid #50A331;
	text-shadow: none;
	color: #A00;
}

button.close:hover, button.close:focus{
	opacity: 1;
	border-color: #A00;
	color: #A00;
	outline: none;
}

/*VERA button*/
button.btn-vera{
	background-color: #FFF;
	border: 1px solid #CCC;
	font-size: 1.5em;
	text-transform: uppercase;
}

button.btn-vera:hover{
	background-color: #50A331;
	color: #FFF;
}

button.btn-vera:active, button.btn-vera:focus, button.btn-vera:active:focus{
	background-color:#D4D4D4;
	color: #333;
	outline: none;
}

/*BS alerts*/
div.alert{
	padding: 8px;
}

/*Horizontal align: center*/
.center{
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/*Smaller input controls*/
select.form-control{
	padding: 6px;
}

tr.searchRow .form-control{
	height: 30px;
	padding: 0px 6px;
}


.form-control:focus, .tokenfield.focus{
	border-color: #739659;
	box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(115,150,89,0.6);
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(115,150,89,0.6);
}

/*Typeahead fields*/
.tt-hint.token-input{
	width: 100% !important;
	top: 8px !important;
	left: 11px !important;
}

.tt-menu{
	background-color: white;
	border: 1px solid green;
	border-radius: 4px;
	left: 10px !important;
	padding: 0px 1px;
}

.tt-suggestion{
	font-size: 12px;
	padding: 6px;
}

.tt-cursor{
	background: #D7F3BC !important;
}

/*Tokenfields*/
div.tokenfield{
	height: auto;
	padding: 0px !important;
}

input.token-input.tt-input{
	margin: 0px;
}

div.tokenfield>div.token{
	margin: 5px 0px 5px 3px;
	font-size: 12px;
}

/*Fieldset style - used in competition and result edit*/
fieldset{
	border: 1px solid #50A331;
	margin: 0px;
	padding: 0px 15px 10px 15px;
}

legend{
	border: 0px;
	margin: 0px;
	padding: 0px 3px;
	width: auto;
}

/*Bigger icons*/
table a>span.glyphicon{
	font-size: 15px;
}

/********/
/*Banner*/
/********/

div#banner{
	background: #FFF;
	border-bottom: 3px solid #50A331;
	box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
	height: 150px;
	margin: 0px auto;
	max-width: 1500px;
	min-width: 775px;
	padding: 10px 0px 0px 0px;
	position: fixed;
	top: 0px;
	width: 97%;
	z-index: 5;
}

div#banner ul.nav:after{
	clear: none !important;
}

/***Logo in the upper left corner***/
div#logo{
	background: url("res/rocketLogo.png") no-repeat center 5px;
	background-size: auto 70%;
	float: left;
	height: 100%;
	padding: 0px;
	text-align: center;
	width: 125px;
}

div#logo h3{
	color: #50A331;
	font-family: 'Montserrat', Calibri, Arial, sans-serif;
	margin-top: 105px;
	width: 100%;
}


/***Navigation right to the logo***/
div#navigation{
	margin-left: 130px;
	padding: 0px;
}

/**Menu - the main part of the navigation**/
nav#menu{
	background: linear-gradient(to bottom,#f6f6f6 0,#d8d8d8 100%);
	border: 1px solid #BBB;
	border-right-width: 0px;
	height: 50px;
	margin-top: 45px;
}

#menu div{
	height: 100%;
	padding: 0px;
}

/*Lists*/
ul.nav, ul.rightFloat{
	display: inline;
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

ul.rightFloat{
	float: right;
}

/*Links*/
#menu li{
	float: left;
	font-family: 'Montserrat', Calibri, Arial, sans-serif;
}

/*Link hover effects*/
#menu a, #menu p.nolink, #menu>ul.nav>li>a:focus{
	color: #000;
	display: block;
	padding: 15px 15px 13px 15px;
	text-decoration: none;
}

#menu>ul.nav>li>a:focus{
	background: initial;
}


#menu>ul.nav>li>a:hover, #menu>ul.nav>li.open>a{
	background: initial;
	border-bottom: 3px solid #50A331;
	color: #50A331;
	padding-bottom: 11px;
}

#menu li.active>a{
	background: linear-gradient(to bottom,#CDEB8E 0,#50A331 100%);
}

#menu>ul.nav>li.active>a, #menu>ul.nav>li.active>a:hover{
	background: linear-gradient(to bottom,#CDEB8E 0,#50A331 100%);
	border: 0px;
	color: #000;
	padding-bottom: 13px;
}

#menu>ul.rightFloat>li>a:hover{
	border-bottom: 3px solid #C00;
	color: #C00;
	padding-bottom: 11px;
}

#menu>ul.rightFloat>li#profileLink>a:hover{
	border-bottom: 3px solid #266AB3;
	color: #266AB3;
	padding-bottom: 11px;
}

/*Dropdown*/
ul.dropdown-menu li{
	width: 100%;
}

#menu ul.dropdown-menu a{
	padding: 8px 15px 8px 15px;
}

/**The login form on the index page**/
div#indexLogin{
	padding: 8px 0px 7px 10px;
}

#indexLogin div.form-group{
	padding-right: 15px;
}

#indexLogin input{
	width: 130px;
}


/**Text div under the menu**/
div#text{
	height: 40px;
	position: relative;
}

#text h4{
	bottom: 0px;
	font-style: italic;
	margin: 0px;
	position: absolute;
	right: 13px;
	text-align: right;
}

#text p{
	bottom: 0px;
	color: red;
	font-size: 1.2em;
	margin: 0px;
	left: 5px;
	position: absolute;
	text-align: left;
}

#text a{
	color: inherit;
}

/**Responsiveness**/
@media(max-width: 920px)
{
	span.hideOnSmall{ display: none; }
}

/*************************************/
/*Other styles used on mulitple pages*/
/*************************************/

/**Table styles**/
table.table{
	margin-bottom: 0px;
}

/*Cells*/
table.table>thead>tr>th{
	border-bottom: 2px solid #50A331;
	color: #50A331;
	font-weight: bold;
}

table.table>tbody>tr>td{
	background-color: #FFF;
	border-bottom: 1px solid #50A331;
	border-top: 0px;
	font-size: 12px;
	vertical-align: middle;
	background-clip: padding-box;
}

/*Rows on hover*/
table.hoveredRows tr:hover>td{
	background-color: #D7F3BC;
}

/*Links - typically header cells and icons*/
table.table a, table.table a:link, table.table a:visited{
	color: #50A331;
}

table.table a:hover{
	color: #43822A;
}

table.table a:active{
	color: #065d06;
}

/*Sorting - the sort marker icon*/
span.sortMarker{
	margin-left: 4px;
}

/*Searching and filtering*/
tr.hidden-row, tr.row-hidden{
	display: none;
}

/*No result row and empty table notifier*/
.no-result-row{
	background-color: #FF8C8C;
	font-size: 1.5em;
	height: 1.5em;
	text-align: center;
}

tr.no-result-row, tr.loading-row{
	display: none;
}

table.hoveredRows tr.no-result-row>td, table.hoveredRows tr.no-result-row:hover>td{
	background-color: #FF8C8C;
}

/*Quick visibility change*/
table.table>tbody>tr[data-visibility='invisible']>td{
	background-color: #C8C8C8;
	color: #000;
}

table.table>tbody>tr[data-visibility='invisible']:hover>td
{
	background-color: #b6d29b;
}

tr[data-visibility='visible'] span.visibilityIcon:before
{
	content: "\e105";
}

tr[data-visibility='invisible'] span.visibilityIcon:before
{
	content: "\e106";
}

/*Table column widths*/
.idCell, .small-idCell{
	width: 45px;
}

.nameCell, .small-nameCell{
	width: 185px;
}

.classCell, .small-classCell{
	width: 85px;
}

.resCell, .compCell, .customCell{
	width: 25%;
}

.small-resCell, .small-compCell, .small-customCell{
	width: 20%;
}

.teacherCell, .small-teacherCell{
	width: auto;
}

.lexamCell{
	width: 13%;
}

.small-lexamCell{
	width: 10%;
}

.editCell, .small-editCell, .icon-column{
	width: 30px;
}

.small-moneyCell{
	width: 90px;
}

.small-dateCell{
	width: 100px;
}

.small-timeCell{
	width: 125px;
}

.small-praiseCell{
	width: 150px;
}

.small-roundsCell{
	width: 250px;
	text-align: center;
}

.small-saveCell{
	width: 100px;
}

/**Fixed table headers**/
div.fixer{
	background-color: white;
	margin-left: -3px;
	max-width: 1500px;
	min-width: 775px;
	padding: 5px 3px 0px 3px;
	position: fixed;
	top: 150px;
	width: 97%;
	z-index: 2;
}

/*Push the content below the header*/
div.hasTableHeader{
	padding-top: 237px;
}

div.tableHeader{
	margin: 0px auto 0px auto;
}

div.tableHeader>div{
	border: 0px;
	height: 50px;
	padding: 3px;
}

div.tableHeader>div>a, .pseudoLink{
	background-color: #82B370;
	box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
	color: #000;
	display: block;
	height: 100%;
	line-height: 44px;
	margin: 0px;
	overflow: hidden;
	padding: 0px 0px 0px 8px;
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
	text-decoration: none;
	vertical-align: middle;
	white-space: nowrap;
	width: 100%;
}

div.tableHeader>div>a:hover{
	box-shadow: 0 7px 15px rgba(0,0,0,0.25), 0 3px 10px rgba(0,0,0,0.22);
	transform: scale(1.01, 1.06);
	z-index: 5;
}

/*The search button has a different background if active*/
div.tableHeader a.toggled-on{
	background-color: #DABA4F;
}

/*Form elements in a table haeader*/
div.tableHeader label{
	font-weight: normal;
	margin: 0px;
}

div.tableHeader select{
	height: 30px;
	padding: 2px;
}

div.tableHeader button{
	line-height: 1;
}

/*******/
/*Login*/
/*******/
div#login{
	background-color: #E6E6E6;
	border: 3px solid green;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
	margin: 0px auto;
	max-width: 550px;
	min-width: 326px;
	padding: 10px;
	position: relative;
	top: 50px;
	width: 50%;
}

#login button{
	width: 100%;
}

/***********/
/*Versenyek*/
/***********/

/*Tiles*/
div.tileDiv{
	border: 0px;
	display: inline-block;
	height: 100px;
	margin: 0px;
	padding: 3px;
	text-align: center;
	width: 100%;/*this applies for small screens only*/
}

/*Responsiveness on tiles*/
@media (min-width: 768px){
	div.tileDiv{ width: 50%; }
}

@media (min-width: 1024px){
	div.tileDiv{ width: 33.33%; }
}


.tileDiv>div{/*div.tileDiv would override the background colors*/
	background-color: #D7F3BC;
	border: 2px solid #50A331;
	box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
	cursor: pointer;
	display: inline-block;
	position: relative;
	height: 100%;
	margin: 0px;
	padding: 5px;
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
	vertical-align: top;
	width: 100%;
}

/*New competition div*/
div#newCompetition>h4{
	position: absolute;
	top: 50%;
	transform: translate(0, -50%);
	width: 100%;
	margin: 0px;
	font-size: 24px;
}

/*Lift effect on hover*/
div.tileDiv>div:hover{
	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 3px 10px rgba(0,0,0,0.22);
	transform: scale(1.05, 1.05);
	z-index: 3;
}

div.tileDiv>div>h4{
	font-size: 20px;
	margin: 5px 0px 0px 0px;
}

div.tileDiv>div>p{
	position: absolute;
	bottom: -4px;
	width: 100%;
}

table#fordulokTable{
	width: 100%;
	margin-bottom: 15px;
}

table#fordulokTable thead{
	background-color: #8dd647;
}

#fordulokTable td, #fordulokTable th{
	border: 1px solid black;
	text-align: center;
}

/*Watermarks*/
div.tileDiv>div::after{
	content: "";
	display: block;
	position: absolute;
	background-position: 35px -14px;
	background-repeat: no-repeat;
	background-size: auto 75%;
	height: 85px;
	width: 85px;
	right: 0px;
	top: 0px;
	opacity: 0.2;
}

div.alreadySigned::after{
	background-image: url("res/success.svg");
}

div.noSign::after{
	background-image: url("res/forbidden.svg");
}

div.canSign::after{
	background-image: url("res/plus.svg");
}

/*Colors*/
div.alreadySigned, div.compInProgress{
	background-color: #fff8a4;
	border-color: #c18600;
}

div.noSign, div.finishedComp{
	background-color: #f16868;
	border-color: #9E0000;
}

div.canSign, div.newComp{
	background-color: #D7F3BC;
}

/*Editing competitions*/
div.fordulo{
	margin-left: 0px;
	padding-right: 15px;
}

div.fordulo div.form-group{
	display: inline-block;
	padding-left: 0px;
}

button#pluszFordulo{
	margin-left: 0px;
	margin-top: -7px;
	width: 100%;
}

p#requiredWarningText{
	color: #A94442;
	display: none;
	font-style: italic;
	margin-right: 10px;
	text-align: right;
	float:left;
}

.has-error .form-control{
	background-color: #FDD;
}

#versenySzerkesztes{
	overflow: auto;
}

/*Student signing for a competition*/
div#diakJelentkezes{
	height: 120px;
}

/*Calendar*/
div.calendar{
	width: 100%;
	max-width: 300px;
	border: 2px solid #50A331;
	position: absolute;
	right: 0px;
	margin-top: 3px;
	background-color: #FFF;
	z-index: 10;
	padding: 0px 10px;
	box-shadow: 0px 3px 10px -1px;
}

div.calendar ul{
	list-style-type: none;
	-webkit-padding-start: 0px;
	font-size: 0;
	padding: 0px;
}

div.calendar li{
	display: inline-block;
	width: 14.28%;
	text-align: center;
	font-size: 14px;
	border-radius: 50%;
}

div.cal-days li[onclick]{
	cursor: pointer;
}

div.cal-days li.selectedDay,
div.cal-days li.selectedDay:hover{
	background-color: #F0AD4C !important;
	text-decoration: undeline;
	font-weight: normal !important;
	cursor: default;
}

div.cal-days li[onclick]:hover{
	background-color: #BCF182;
	font-weight: bold;
}

div.cal-month{
	text-align: center;
	padding: 5px;
}

div.cal-weekdays{
	font-weight: bold;
	height: 25px;
	text-transform: uppercase;
	border-bottom: 1px solid #999;
}

div.cal-month a{
	color: #000;
	padding: 0px 10px;
}

#forduloList div.col-md-7.has-feedback>span,
#forduloList div.col-md-7.has-feedback div.calendar{
	right: 15px;
}

div.cal-time{
	border-top: 1px solid #50A331;
	padding: 5px;
	text-align: center;
}

div.cal-time input.form-control{
	display: inline;
	width: 60px;
	padding-right: 0px;
}


/***************/
/*Jelentkezések*/
/***************/

/*Coloring rows, hover on row effect except on money field*/
div#jelentkezesek>table>tbody>tr>td.feeCell{
	transition: background-color 0.2s ease-out;
}

div#jelentkezesek>table>tbody>tr:hover>td{
	background-color: #FFA;
}

#jelentkezesek tr[data-payed=jelentkezett]>td,
#jelentkezesek tr[data-payed=jelentkezett]:hover>td.feeCell{
	background-color: #FF8C8C;
}

#jelentkezesek tr[data-payed=fizetett]>td,
#jelentkezesek tr[data-payed=fizetett]:hover>td.feeCell{
	background-color: #D7F3BC;
}

/*Money field*/
td.money{
	text-align: right;
}

td.money>ul{
	margin: 0px;
	list-style-type: none;
	padding: 0px;
	-webkit-padding-start: 0px;
}

td.money li{
	display: inline;
	padding: 1px 2px;

}

td.feeCell{
	border: 3px solid #50A331;
}

tr[data-payed=jelentkezett]>td.feeCell span:before{
	content: "\e014";
}

tr[data-payed=fizetett]>td.feeCell span:before{
	content: "\e013";
}

/*Delete button*/
tr[data-payed=fizetett]>a.deleteButton{
	display: none;
}

/*Toggle payed state*/
td.toggleable{
	cursor: pointer;
}

/*Footer containing sums*/
#jelentkezesek table>tfoot{
	text-align: right;
}

#jelentkezesek table>tfoot td{
	background-color: transparent;
	border: 0px;
}

#jelentkezesek table>tfoot span{
	background-color: #FFFCB1;
	display: block;
	float: right;
	padding: 5px 8px 6px 0px;
	width: 100px;
}

td.nopadding{
	padding: 0px !important;
}

#jelentkezesek table tfoot td.money{
	background-color: #fffcb1;
	padding-right: 13px;
}

/*Filtering*/
div[data-deadlineFilter=aktiv] tr[data-expired=lejart],
div[data-deadlineFilter=lejart] tr[data-expired=aktiv],
div[data-payedFilter=fizetett] tr[data-payed=jelentkezett],
div[data-payedFilter=jelentkezett] tr[data-payed=fizetett]
{
	display: none;
}

/*Others*/
#jelentkezesFilters select{
	margin-right: 10px;
}

/***********************/
/*Tan�ri jelentkeztet�s*/
/***********************/
div.wrapper{
	background-color: #D7F3BC;
	border: 2px solid #50A331;
	box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.8);
	margin: 2px auto 18px auto;
	width: 85%;
}

#tanarJelentkezes h2{
	color: #50A331;
	font-family: 'Montserrat', Calibri, Arial, sans-serif;
	font-size: 2em;
	margin: 4px auto;
	text-align: center;
}

div#multipleDiakSelector{
	display: none;
	padding-bottom: 10px;
}

div#diakSearch{
	border-bottom: 2px dashed #50A331;
}


div#diakSelector{
	padding: 10px 20px;
}

div.two-column-layout::after{
	content: "";
	clear: both;
	display: table;
}

div.two-column-layout>div{
	display: inline-block;
	float: left;
	padding: 10px;
	width: 50%;
}

div.list{
	height: 500px;
}

div.list>ul{
	background-color: #DDD;
	border: 1px solid black;
	height: 450px;
	list-style-type: none;
	margin: 0px;
	overflow: auto;
	padding: 10px 5px 5px 5px;
	z-index: 0;
}

div.list li{
	background-color: #FFFCB1;
	cursor: pointer;
	display: block;
	font-size: 1.1em;
	margin: 2px 0px;
	padding: 3px 0px 3px 10px;
	width: 100%;
}

div.list li[data-signed=signed]::after{
	color: red;
	content: "Jelentkezett!";
	float: right;
	font-style: italic;
	padding-right: 3px;
}

div.list li:hover{
	background-color: #e4ce41;
}

div.list p{
	background-color: #DDD;
	display: block;
	font-size: 1.5em;
	border: 1px solid black;
	border-bottom: 0px;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
	margin: 0px auto;
	padding: 2px;
	position: relative;
	text-align: center;
	top: 1px;
	width: 60%;
	z-index: 1;
}

mark{
	background-color: #64CCE6;
	padding: 0px;
}

/************/
/*Eredm�nyek*/
/************/

/*Changing view*/
.table-hidden{
	display: none;
}

div.fifth{
	float: left;
	width: 20%;
}

div.fifth>a.switcher{
	background-color: #bce182;
	padding: 0px;
	text-align: center;
}

div.fifth>a.switcher-active{
	text-decoration: underline;
}


/*Adder and editor form row*/
td.new-result-class span{
	visibility: hidden;
}

tr.add{
	border-bottom: 3px solid #50A331;
	display: none;
}

#eredmenyek tr.add>td
{
	background-color: #ffe9a0 !important;
	padding: 10px 3px;
	vertical-align: middle;
	background-clip: padding-box;
}

#eredmenyek tr.editRow>td,
#eredmenyek tr.editRow:hover>td
{
	background-color: #ffe9a0;
	padding: 10px 8px;
}

#eredmenyek tr.add .form-control{
	padding: 6px;
}

#eredmenyek tr.editRow .form-control{
	margin: 0px -5px;
	padding: 6px;
	width: calc(100% + 10px);
}

/*Praise cell and box*/
td.praise{
	position: relative;
}

td.praise>span{
	border-bottom: 1px dotted #0E0E0E;
}

div.praise-box{
	background-color: #ffe9a0;
	border: 1px solid #50A331;
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
	border-top: 0px;
	bottom: -120px;
	height: 120px;
	left: -400px;
	padding: 10px;
	position: absolute;
	width: 400px;
	z-index: 1;
}

tr.add div.praise-box{
	border-top: 0px;
	border-width: 3px;
}

div.praise-box textarea{
	max-height: 74px;
}

/****************/
/*Eredm�nybe�r�s*/
/****************/

/*Overstyle col widths*/
#resultEditPage .small-nameCell{
	width: 100px;
}

form#compSelector{
	text-align: center;
}

/*Rounds cell*/
table.table>tbody>tr>td.roundOptions{
	padding: 2px 2px;
}

/*Rounds cell inputs*/
td.roundOptions .form-control{
	font-size: 12px;
	padding: 2px;
	margin: 1px;
	height: 27px;
	text-align: center;
	margin: auto;
}

td.roundOptions input.form-control{
	width: 35px;
}

td.roundOptions table{
	width: 100%;
}

td.roundOptions table td{
	padding: 3px;
}

td.roundOptions table tr:hover>td{
	background-color: transparent;
}

/*Save button*/
#resultsTable button.disabled{
	background-color: #959595;
	border-color: #565656;
}

/*Summary*/
label.sumLabel{
	float: left;
}

/*Praise*/
#resultsTable label{
	margin: 0px;
}

div.praiseField{
	margin-top: 5px;
	display: none;
}

/************/
/*query page*/
/************/
div#sqlForm{
	margin-bottom: 15px;
	overflow: hidden;
	width: 90%;
}

#sqlForm input{
	float: left;
	width: calc(100% - 50px);
}

#sqlForm button{
	float: left;
	width: 50px;
}



tr.hidden-row,tr.loading-row,tbody.loading,.loading tr.no-result-row {
    display: none
}

.loading tr.loading-row {
    display: table-row
}

a[data-direction='1']>.sort-marker::before {
    content: '\f0d7'
}

a[data-direction='-1']>.sort-marker::before {
    content: '\f0d8'
}

.sort-marker {
    left: 4px
}

.icon-column {
    width: 30px
}

tr.no-result-row>td,tr.loading-row>td {
    text-align: center;
    border: 0;
    font-style: italic;
    padding: 5px 0;
    font-size: 1.2em
}

div.loader {
    margin: 10px auto;
    border: 4px solid #CCC;
    border-top-color: #333;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    -webkit-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite
}

@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

tr.search-row td {
    padding: 4px;
    font-weight: normal;
    border-bottom-width: 2px
}

.table-counter {
    display: inline;
    background-color: rgba(100,100,100,0.6);
    padding: 3px 10px;
    border-radius: 50%;
    font-size: .9em;
    text-decoration: none
}

table input,table select {
    width: 100%;
    font-size: 1.1em;
    height: 30px;
    padding: 0 5px;
    margin: 0;
    outline: none
}

table i {
    margin: 0 2px
}