/* Style.css */

:root{
	--bgcolor: rgba(0, 0, 0, 0.7);;
	--textcolor: #fff;
	--hovercolor: #f1c232;
	--acolor: white;
	--ahovercolor: #f1c232;

}
html {
	overflow-y: scroll;
	overscroll-behavior: none;
	scroll-behavior: smooth;
}
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	scroll-behavior: smooth;
	position: relative;
	overscroll-behavior: none;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	color: #5e6e82;
	color: var(--textcolor);
	text-align: left;
	background-color: #edf2f9;
	background-color: var(--bgcolor);
	font-family: 'Helvetica Neue',Helvetica,Arial,Sans-Serif;
	
}
img {
    max-width: 100%;
}
h2, .h2{
	font-weight: 700;
	font-size: 18px;
	margin-bottom: 20px;
}
h3, .h3{
	font-size: 14px;
	font-weight: 700;
	margin-top: 10px;
	margin-bottom: 5px;
}

.pgrid a{ line-height: 32px;}

a{
	color: var(--acolor);
}

a.active{
	color: #333;
	text-decoration: underline;
}
a:hover{
	cursor: pointer;
	text-decoration: unset;
	color: var(--ahovercolor);
}
a.footer{
	padding: 10px 5px;
}

.container{
    max-width:1000px;
    margin-left: auto;
    margin-right: auto;
}
 /* HELPERS */
.mts {
    margin-top: 25px;
}
.mbs {
    margin-bottom: 25px;
}
.mtm{
    margin-top: 50px;
}
.mbm{
    margin-bottom: 50px;
}
.mrxs{
    margin-right: 10px;
}
.mla{
    margin-left: auto;
}
.mra{
    margin-right: auto;
}
.mlra{
    margin-left: auto;
    margin-right: auto;
}
.mlxs{
    margin-left: 10px;
}
.mtl{
    margin-top: 100px;
}
.mbl{
    margin-bottom: 100px;
}
.tar{
    text-align: right;
}

.italic{
	font-style: italic;
}
/* UI Styles */

.hidden {
	display: none;
	}
	
input {
    border: 0px;
    font-size: 14px;
    text-align: left;
    letter-spacing: -0.025em;
    border-radius: 2px;
    margin: 0px 0px;
    padding: 3px 6px;
    max-height: 25px;
    outline: none !important;
    transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
}
input[type="search"], div.dataTables_wrapper div.dataTables_length select {
	background: #f5f5f5;
	border: 1px solid #e5e5e5;
}

.odd input{
    width: 100%;
    background:rgba(185, 221, 255, 0.82)
}
.ui-widget-header {
    background: #fff;
}

.ui-widget.ui-widget-content {
    border: 1px solid #e0e0e0;
}

.ui-button {
    background: transparent;
    color: black;
    border-radius: 2px;
    border: 1px solid #e6e6e6;
    min-width: 300px;
    outline: none !important;
    padding: 3px;
    margin-left: 3px;
    margin-bottom: 3px;
    font-size: 13px;
    line-height: 1.1;
    padding: 5px;
}
.ui-button.ui-state-disabled {
    color: aliceblue;
    background: #2b8eda;
}

.ui-button:hover,
.ui-button:focus {
    background: #2b8eda;
    border-color: #2b8eda;
    color: white;
}

button#addTimestampBtn {
	z-index: 99;
	padding: 2px 15px;
	position: absolute;
}
button#addTimestampBtn::before {
	margin-right: 5px;
	padding-top: 5px;
}

.lazyshow{
	opacity: 0;
}

.fixed{
	position: fixed;
}

ul {
	list-style-type: none;
  }
ul li{
	  margin-bottom: 5px;
  }
  #faq ul{
	  margin-bottom: 1.5rem;
  }
li:before {
	content: '\2014';
	position: absolute;
	margin-left: -20px;
 }
  .navbar-nav li:before{
  content: unset;
  }

/*  Datatables
 */
 .btn.jumpbutton, .btn.editbutton{
    font-size: 13px;
    line-height: 1.1;
	padding: 5px;
	margin-right: 5px;
}
/* .fg-toolbar.ui-toolbar.ui-corner-br {
    display: none;
} */


table.dataTable.row-border tbody th, table.dataTable.row-border tbody td, table.dataTable.display tbody th, table.dataTable.display tbody td {
    border-top: 1px solid #ececec;
}
div.dataTables_wrapper div.dataTables_info, div.dataTables_wrapper div.dataTables_paginate{
	padding-top: 2px;
}
div.dataTables_wrapper div.dataTables_info{
	font-size: 13px;
}
#streamliste_wrapper .fg-toolbar.ui-toolbar {
	border: unset;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
table.dataTable th {
    border-bottom: 1px solid lightgrey;
}
table th, table td, table th{
	border: 1px solid #ebebeb;
	padding: 0.2em 0.75em;
}

table tr.odd{
	background: rgba(0, 0, 0, 0.05);
}
.dataTables_wrapper, .containerstreamliste{
	min-height: 420px;
}
.dataTables_wrapper tbody{
	min-height: 409px !important;	
}


table.dataTable thead .sorting:before, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_desc:before, table.dataTable thead .sorting_asc_disabled:before, table.dataTable thead .sorting_desc_disabled:before, table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc_disabled:after{
	font-weight: 300;
	bottom: 10px;
}
table tr:hover{
	background:rgba(185, 221, 255, 0.82);
	cursor: pointer;
}





/* http://webkit-scroll-gen.sourceforge.net */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-button {
width: 0px;
height: 0px;
}
::-webkit-scrollbar-thumb {
background: #ffffff;
border: 0px none #caabab;
border-radius: 50px;
}
::-webkit-scrollbar-thumb:hover {
background: #ffffff;
}
::-webkit-scrollbar-thumb:active {
background: #ffffff;
}
::-webkit-scrollbar-track {
/*background: #000000; */
border: 0px none #000000;
border-radius: 0px;
}
::-webkit-scrollbar-track:hover {
background: #000000;
}
::-webkit-scrollbar-track:active {
background: #000000;
}
::-webkit-scrollbar-corner {
background: transparent;
}


/* TOOLTIP */

[data-tooltip]:after {            
    position : absolute;
     content : attr(data-tooltip);
	 opacity : 0;
	 display: none;
	 padding: 5px;
	 background: rgba(17, 17, 17, 0.82);
	 transition: all .2s ease-in-out;
	 border-radius: 5px;
	 margin-left: -5px;
	 margin-top: 10px;
	 z-index: 10;
	 max-width: 300px;
	 font-size: 11px;
	 
}
[data-tooltip]:hover:after {        
	opacity : 1;
	display: block;
}




/* NAVBAR  */

/*-----------------------------------------------
|   Navigation Top
-----------------------------------------------*/
/* .topbar {
	min-height: 60px;
	display: flex;
	-webkit-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2);
	box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2);
	position: fixed;
	width: 100%;
	z-index: 999;
} */
main{
	padding-top: 60px;
}


@media (max-width: 1200px) {
	.hideonxl {
			display: none !important;
	}
}

/* .collapsing{
	transition: none;
	height: auto;
} */
.show .collapse, .active .collapse {
	display: block;
  }
  .dropdown .collapse{
	transition: all .5s ease-in-out;
  }

.navbar-toggler {
	border: 0;
	padding: 0;
}
.dropdown-indicator:after {
	content: "";
	display: block;
	position: absolute;
	right: 5px;
	height: 0.4rem;
	width: 0.4rem;
	border-right: 1px solid #5e6e82;
	border-bottom: 1px solid #5e6e82;
	top: 50%;
	-webkit-transform: translateY(-50%) rotate(45deg);
	-ms-transform: translateY(-50%) rotate(45deg);
	transform: translateY(-50%) rotate(45deg);
	-webkit-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	-webkit-transform-origin: center;
	-ms-transform-origin: center;
	transform-origin: center;
	-webkit-transition-property: border-color, -webkit-transform;
	transition-property: border-color, -webkit-transform;
	-o-transition-property: transform, border-color;
	transition-property: transform, border-color;
	transition-property: transform, border-color, -webkit-transform;
}

.navbar-collapse{
	transition: all .3s ease;
}
.navbar-light .navbar-nav .nav-link{
	color: white;
	font-weight: 700;
	background: rgba(0, 0, 0, 0.7);
	margin-bottom: 10px;
	font-style: italic;
	padding: 3px 25px 3px 15px;
	letter-spacing: 0.085em;
}

.navbar-light .navbar-nav .nav.dropdown .nav-link{
	background: rgba(0, 0, 0, 0.6);
	font-weight: 400;
}

@media (min-width: 992px) {
	.navbar-brand{
		margin-top: 12px;
		width: 225px;
	}
	.topbar > nav{
		flex-direction: column;
		padding: 10px 0px;
	}
	.col-left{
		min-height: 100vh;
		background-image: url("../images/ffuss-plissee 1.jpg");
		background-size: cover;
		padding: 0;
		position: fixed;
	}
	.col-right{
		flex-grow: 1 !important;
		flex-basis: 0;
		margin-left: 25%;
	}
	.topbar, .navbar{
		background-color: unset;
		/* position: sticky; */
		margin-top: 24px;
	}
}

@media (max-width: 991px) {
	.col-left{
		position: fixed;
		/* top: 0; */
		z-index: 999;
		box-shadow: 0em 0px 15px 0px rgb(0 0 0 / 20%);
	}
	.col-right{
		margin-top: 25px;
	}
}

.navbar-light .navbar-nav .nav-link:focus{
	color: white;
}

.navbar-light .navbar-nav .nav.dropdown .nav-link:hover,
.navbar-light .navbar-nav .nav-link:hover, a.active{
	background-color: var(--hovercolor) !important;
	text-decoration: unset;
	color: black !important;
}



.pblock{
	/* background: red; */
	flex: 1 0 250px;
	/* margin-right: 10px; */
	margin-bottom: 25px;
	max-width: 350px;
}
.pblock img{
	width: 100%;
}
.pgrid-4 {
display: grid;
grid-template-columns: repeat( auto-fill , minmax(200px, 1fr) );
grid-gap: 20px;
}
.pgrid-3 {
display: grid;
grid-template-columns: repeat( auto-fill , minmax(220px, 1fr) );
grid-gap: 20px;
}
.page-footer{
	margin-top: 250px;
}