/** General Style Info **/
html {
	height: 100%;
}
body {
	background: #F4F4F4;
	color: #6c6c6c;
	font-family: 'Open Sans', sans-serif;
	font-size:100%;
	padding: 0;
	margin: 0;
	height: 100%;
}

* {
	box-sizing: border-box;
}

a {
	text-decoration: none;
	color: #000;
}
a img {
	border: none;
}

.sortable {
	cursor:pointer;
}

/** Tables **/
table {
	background: #fff;
	border-right:0;
	clear: both;
	color: #333;
	margin-bottom: 10px;
	width: 100%;
	border-spacing: 0;
}
th {
	border:0;
	border-bottom:2px solid #555;
	text-align: left;
	padding:4px;
}
th a {
	display: block;
	padding: 2px 4px;
	text-decoration: none;
}
th a.asc:after {
	content: ' ⇣';
}
th a.desc:after {
	content: ' ⇡';
}
table tr td {
	background: #fff;
	padding: 10px;
	text-align: left;
	vertical-align: middle;
	border-bottom:1px solid #ddd;
}
table tr:nth-child(2n) td {
	background: #f5f5f5;
}
table .altrow td {
	background: #f5f5f5;
}
table .total td {
	background: #ffffff;
	padding-bottom:20px;
}
td.actions {
	text-align: center;
	white-space: nowrap;
}

form {
	float:left;
	margin:5px 0px 0px 10px;
}

form .field {
	float:left;
	clear:left;
	margin:5px 0px 0px 10px;
}

form .field label {
	float:left;
	width:160px;
	margin-top:3px;
}

input[type=text],
input[type=password] {
	float:left;
	border:1px solid #dcdcdc;
	height:20px;
	padding:3px 5px;
	width:250px;
	margin-right:5px;
}

input.error {
	border:1px solid red;
}

textarea {
	float:left;
	border:1px solid #dcdcdc;
	height:100px;
	padding:3px 5px;
	width:250px;
	margin-right:5px;
}

input[type=submit] {
	float:right;
	clear:left;
	margin-top:20px;
}

table td a, a.button {
	float:left;
	clear:left;
	margin-bottom:3px;
}

input[type=submit], table td a, .button {
	text-decoration:none;
	text-transform:uppercase;
	font-size:90%;
	cursor:pointer;
	padding:5px 15px;
	color:#fff;
	font-weight:bold;
	font-style:normal;
	border:1px solid #e7767b;
	-moz-border-radius: 5px; /* Firefox */
    -webkit-border-radius: 5px; /* Safari, Chrome */
    -khtml-border-radius: 5px; /* KHTML */
    border-radius: 2px; /* Opera 10.50 beta and other CSS3 compatible browsers */

	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fc8846+0,eb742e+100 */
	background: #fc8846; /* Old browsers */
	background: -moz-linear-gradient(top,  #fc8846 0%, #eb742e 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #fc8846 0%,#eb742e 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #fc8846 0%,#eb742e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fc8846', endColorstr='#eb742e',GradientType=0 ); /* IE6-9 */
	display: inline-block;

}

.material-icons {
	vertical-align: middle;
}

.page-container {
	overflow: hidden;
	min-height: 100%;
}

.login-header {
	margin-top: 20px;
	text-align: center;
}

.login {
	margin: 40px auto;
	width: 500px;
	background: none repeat scroll 0 0 #FAFAFA;
	border: 4px solid #FFFFFF;
	border-radius: 20px;
	overflow: hidden;
	padding: 20px;
	text-align: center;
}


#top-menu {
	background: #fff;
	height: 44px;
	color: #7688A5;
	padding: 14px;
	border-bottom: #efefef solid 1px;
}

#top-menu .logo {
	float: left;
	margin-left: 20px;
	font-size: 10px;
	padding-top: 4px;
}

#top-menu ul {
	float: right;
	list-style: none;
	padding: 0;
	margin: 0;
}

#top-menu a {
	color: #7688A5;
	text-decoration: none;
	font-size: 14px;
	display: block;
}

#top-menu a i {
	margin-left: 4px;
	font-size: 14px;
}


#top-menu .language-menu {
	float: right;
	margin: 0 10px;
}

#top-menu .language-menu li {
	float: left;
	margin: 0 8px;
}

#top-menu .language-menu li a {
	font-size: 12px;
	margin-top: 2px;
	display: block;
	color: #181818;
}

#side-menu {
	float: left;
	background: none repeat scroll 0 0 #3B4F61;
    padding: 0;
    top: 0;
    width: 100%;
    z-index: 2000;
    overflow: hidden;
	width: 20%;
	height: 100%;

}

#side-menu .menu-title {
	color: #f8b80a;
	margin: 30px 30px 10px;
	font-size: 14px;
}


#side-menu ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

#side-menu ul li a {
	text-decoration: none;
	display: block;
	padding: 14px 20px;
	color: #CFCFCF;
	font-size: 14px;
}

#side-menu ul li a .material-icons {
	margin-right: 10px;
}

#side-menu ul li a.active {
	text-decoration: none;
	display: block;
	color: #fff;
	background: #2B3F51;
}




#side-menu .heading {
	color: #fff;
	text-transform: uppercase;
	font-weight: bold;
	height: 44px;
	font-size: 14px;
	width: 100%;

}

#side-menu .heading .logo {
	position: relative;
	display: block;
	width: 50%;
	margin: 10px auto;
	z-index:99;
}


.menu img {
	height: 60px;
	position: absolute;
}


#content-container {
	float: left;
	width: 80%;

}
#content-container > h2 {
	width: 100%;
	background: #fff;
	padding: 14px 30px;
	border-bottom: 2px solid #e9e9e9;
	color: #404040;
	font-weight: bold;
	font-size: 16px;
	margin: 0;

}

#content-container .content {
	width: 98%;
	padding: 10px;
	background: #FFFFFF;
	box-sizing: border-box;
	border: 1px solid #e9e9e9;
	margin: 10px 1%;
	overflow: hidden;
	font-size: 14px;
	color: #000;
	overflow: scroll;
}

#content-container .content .text-link {
	text-decoration: underline;
}

.messages {
	float:left;
	clear:left;
	margin:0 20px 20px 20px;
	width:calc(100% - 40px);
}

.messages ul {
	padding:20px;
	list-style:none;
}

.messages .success-texts {
	background:#69d961 !important;
}

.messages .error-texts {
	background:#ffc426;
}

.green {
	background:#69d961 !important;
	border:1px solid #4ab542;
}

.blue {
	background:#2686ff !important;
	border:1px solid #1f539f;
}

.orange {
	background:#ffc426 !important;
	border:1px solid #ffc426;
}

form input[type=checkbox] {
	float:left;
	margin-top:6px;
}

/** Tutorial **/

.tutorial-bubble {
    background-color: #F9AD1E;
    box-shadow: 0px 0px 2px #323232;
    margin-top: 16px;
    width:  340px;
	position: absolute;
	padding: 20px 10px 20px 20px;
	color: #fff;
}

.tutorial-bubble::after {
	background-color: #F9AD1E;
    content: "\00a0";
    display: block;
    height: 20px;
    left: -10px;
    position: absolute;
    top: 12px;
	box-shadow: -2px 0px 0px 0px #A2A2A2;
    transform:             rotate( 45deg );
        -moz-transform:    rotate( 45deg );
        -ms-transform:     rotate( 45deg );
        -o-transform:      rotate( 45deg );
        -webkit-transform: rotate( 45deg );
    width:  20px;
}

.tutorial-bubble.left-bubble::after {
    right: -10px;
	left: auto;
	box-shadow: 2px 0px 0px 0px #A2A2A2;
}



.tutorial-bubble h2 {
	font-style: italic;
	font-size: 28px;
	margin: 0;
	width: 100%;
	padding: 0 0 10px 0;
	font-family: 'Handlee', cursive;
	display: inline-block;
	vertical-align: top;
	border-bottom: 3px solid #FFBD30;
}


.tutorial-bubble .filuren {
	position: absolute;
	background-image: url('/images/filuren.png');
	background-repeat: no-repeat;
	background-size: contain;
	display: inline-block;
	width: 16%;
	height: 50px;
	right: 0;
	top: 14px;
}


.tutorial-bubble .text {
	font-size: 18px;
	clear: both;
	padding: 20px 0 0 0;
	font-family: 'Lato', sans-serif;
}

.highlight {
	border: 2px solid rgba(249, 173, 30, 0.6 ) !important;
}