.form-group {
	margin-bottom: 20px;
}

.form-group label {
    color: #888888;
    font-size: 12px;
    margin-bottom: 1px;
    font-weight: normal;
}

.form-group .form-control {
    border-radius: 0px;
    border-bottom: 1px;
    background-color: #ffffff;
    padding: 4px;
    border: none;
    box-shadow: none;
    border-bottom: 1px solid #888888;
}

.form-control:focus {
	border-bottom:1px solid #888888;
    outline: 0;
    background-color:#faffbd;
    box-shadow:none;
	-moz-box-shadow:none;
	-webkit-box-shadow:none;
}

.has-error .form-control:focus {
	border:1px solid #af1e17;
	box-shadow:none;
	-moz-box-shadow:none;
	-webkit-box-shadow:none;
}

.form-control input,
.form-control select,
.form-control textarea {
	width: 100%;
	margin-bottom: 10px;
	color: #4a4a4a
}

.control-label {
	padding-left:0;
}

.loginCardWrap {
	position: relative;
}

.loginCard {
    width: 50%;
    padding: 20px;
    background-color: rgba(255,255,255,0.98);
    position: absolute;
    left: 25%;
    border: 1px solid #cccccc;
}

.elementCard {
	width: 100%;
	margin: auto;
	padding: 20px;
	min-height: 100px;
	box-shadow: 0px 0px 8px 1px #aaaaaa;
}

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

.has-error,
.has-error .help-block,
.has-error .control-label  {
	color: #E9233B;
}

.uploadList {
	clear:both;
	border-top:5px solid #ffffff;
	overflow: hidden;
}

.uploadList:after {
	clear:both;
}

.deleteButton {
	background-color: #ffffff;
    border-radius: 11px;
    bottom: 5px;
    cursor: pointer;
    display: inline;
    left: 0;
    opacity: 0.5;
    padding: 0 4px;
    position: absolute;
    z-index: 1000000;
}

.deleteButton_Beitrag {
	background-color: #ffffff;
    border-radius: 11px;
    top: 5px;
    cursor: pointer;
    display: block;
    right: 5px;
    opacity: 0.5;
    padding: 0 4px;
    position: absolute;
    z-index: 1000000000;
}

.upload {
	display:block;
	float:left;
	position:relative;
	width:20%;

}

.upload_text {
	font-weight:lighter;
	font-size:8pt;
	text-align:center;
	z-index:1000000000;
	height:50px;
	overflow: auto;
}

.beitrag_title {
	font-weight:lighter;
	font-size:8pt;
	text-align:center;
	z-index:1000000;
	height:50px;
	overflow: hidden;
	position: relative;
	bottom: 44px;
	background: #ffffff88;
}

.loadingDiv_text {
	text-align: center;
	font-weight: lighter;
	font-size:8pt;

}

.upload_text_header {
	font-size: 10pt;
	font-weight: bold;
	margin-top:-10px;
	color: #000;
}

.upload_video_preview:before {
	padding-top: 0 !important;
}

.upload:before {
	content: "";
	display: block;
	padding-top: 56.25%;
}

.upload .preview {
	position:absolute;
	width:100%;
	height:100%;
	z-index:999995;
	border-right:5px solid #ffffff;
	border-bottom:5px solid #ffffff;
	top:0;
	left:0;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	display: block;
}

#regi_wrapper:before {
	content: "";
	display: block;
	padding-top: 155.25%;
}


#regi_wrapper {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top center;
	position:relative;
	overflow: hidden;
	display: block;
	width: 100%;
	min-height: 200px;
}

#regi_wrapper > img {
	height: auto;
    position: absolute;
    top: 0;
    width: 100%;
    visibility: hidden;
}

.vorschau {
	width:100%;
	position:relative;
	z-index:99;
	display: block;
}

.upload .preview.checked {
	background-color: #f7f7f7;
    opacity: 0.4;
}

.upload .preview.checked:after {
	background-image: url("/img/checked.png");
    background-position: center center;
    background-size: contain;
    bottom: 0;
    content: "";
    height: 30px;
    position: absolute;
    right: 0;
    width: 30px;
}

.upload .TheSlide {
	left: 0;
	position: absolute;
	top: 0;
}

.TheSlide {
	max-width: 100% !important;
}

.TheSlide > .ki_news_newsContainer  {
	left: 0px;
}

.TheSlide.ki_news_rechts > .ki_news_newsContainer  {
	left: auto;
	right: 0px !important;
}

.TheSlide > .ki_news_TheImage  {
	object-fit: cover;
	aspect-ratio: 8 / 9;
	right: 0;
	top: 0;
	height: 100%;
}

.TheSlide.ki_news_rechts > .ki_news_TheImage  {	
	left: 0 !important;
	right: auto;
}


.uploadDiv {
	display: flex !important;
  	align-items: center !important;
  	justify-content: center !important;
  	background-color: #F5F5F5;
}

.loadingDiv {
	position:absolute;
	text-align: center;
	width:100%;
	#height:calc(100% - 1 * 40px);
	height: 100%;
	z-index:99;
	top:0;
	left:0;
	display: flex !important;
  	align-items: center !important;
  	justify-content: center !important;
  	background-color: #F5F5F5;
}

.multiplePicText {
	font-weight: bold;
	font-size: 1.5em;
	z-index: 999999;
}

.form-group select.form-control {
	background: #e0e0e0; /* For browsers that do not support gradients */
  	background: -webkit-linear-gradient(left top, #e0e0e0 , #ffffff); /* For Safari 5.1 to 6.0 */
  	background: -o-linear-gradient(bottom right, #e0e0e0, #ffffff); /* For Opera 11.1 to 12.0 */
  	background: -moz-linear-gradient(bottom right, #e0e0e0, #ffffff); /* For Firefox 3.6 to 15 */
  	background: linear-gradient(to bottom right, #e0e0e0 , #ffffff); /* Standard syntax */
}

.form-group select.form-control option {
	padding-top: 5px;
	padding-bottom: 5px;
}

.form-group select.form-control option {
	padding-top: 5px;
	padding-bottom: 5px;
}

.input-group-addon {
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    color: #555;
    text-align: center;
    background-color: transparent;
    border: none;
    border-radius: 0;
}

#form-group-jedenTag {
	margin: 0;
}

#auswahlTage {
	width: 100%;
	float: left;
}

#auswahlTage .form-group {
	width: 10%;
	float: left;
    margin-right: 40px;
    margin-bottom: 0 !important;
    
}

.bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: #ffffff;
}

.bootstrap-datetimepicker-widget table td.active, 
.bootstrap-datetimepicker-widget table td.active:hover,
.bootstrap-datetimepicker-widget table td span.active {
	background-color: #BE0A26;
}

.slider-handle {
	background-color: rgb(189,43,38);
	background-image: linear-gradient(to bottom, #d02724 0px, #af1e17 100%);
}

/* changes MM 03072021 */
.tooltiptext {
	visibility: hidden;
    width: 90%;
	color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 10px;
	z-index: 2000000;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 150%;
	position: absolute;
	left: 50%;
	top: 30%;
	transform: translate(-50%, -30%);
	text-shadow:0 0 12px #000;
	cursor:default;
}

.tooltiptextInfo_aktiv {
	visibility: visible;
	opacity: 1;
}

.tooltiptext_aktiv {
	background-color: rgb(0, 255, 0, 0.75);
	background:linear-gradient(rgba(0,200,0,.7) 0%,rgba(0,255,0,.7) 100%);
    
  }
  .tooltiptext_inaktiv {
	background-color: rgb(255, 0, 0, 0.75);
	background:linear-gradient(rgba(200,0,0,.7) 0%,rgba(255,0,0,.7) 100%);
  }
  .tooltiptext_startet {
	background-color: rgb(0, 0, 255, 0.75);
	background:linear-gradient(rgba(0,0,200,.7) 0%,rgba(0,0,255,.7) 100%);
  }
  .upload:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
  }/*
  .upload:hover .tooltiptext_aktiv{
    visibility: visible;
    opacity: 1;
  }
  .upload:hover .tooltiptext_aktivin{
    visibility: visible;
    opacity: 1;
  }*/
/* --------------------- Ribbons ------------------*/
.upload .ribbon { 
	-webkit-animation:.5s FadeIn;-moz-animation:.5s FadeIn; -ms-animation:.5s FadeIn; -o-animation:.5s FadeIn; animation:.5s FadeIn;
	position:absolute; left:0; top:0; 
	overflow:hidden;
	width:7.5rem; height:7.5rem; text-align:right;
	z-index:1000000000;
	transition: -webkit-all .3s ease-in-out; transition: all .3s ease-in-out; transition: all .3s ease-in-out, -webkit-all .3s ease-in-out;
}
.upload .ribbon span { 
	cursor:default; font-weight:700; font-size: 1.2rem; color:#fff; text-transform:uppercase; text-align:center; line-height:2rem; transform:rotate(-45deg); -webkit-transform:rotate(-45deg); width:10rem; display:block; box-shadow:0 3px 10px -5px #000; position:absolute; top: 1.8rem; left:-2.2rem }
.upload .ribbon.ribbon-blue span { background:#2989d8; background:linear-gradient(rgba(0,0,200,.7) 0%,rgba(0,0,255,.7) 100%); text-shadow:0 0 12px #000 }
.upload .ribbon.ribbon-green span { background:#79a70a; background:linear-gradient(rgba(0,200,0,.7) 0%,rgba(0,255,0,.7) 100%); text-shadow:0 0 12px #000 }
.upload .ribbon.ribbon-orange span { background:#a7680a; background:linear-gradient(rgba(201,113,13,.7) 0%,rgba(167,104,10,.7) 100%); text-shadow:0 0 12px #000 }
.upload .ribbon.ribbon-red span { background:#a7200a; background:linear-gradient(rgba(200,0,0,.7) 0%,rgba(255,0,0,.7) 100%); text-shadow:0 0 12px #000 }
.upload .ribbon.ribbon-blue span::before, .card .ribbon.ribbon-blue span::after { border:3px solid #1e5799 }
.upload .ribbon.ribbon-green span::before, .card .ribbon.ribbon-green span::after { border:3px solid #79a70a }
.upload .ribbon.ribbon-orange span::before, .card .ribbon.ribbon-orange span::after { border:3px solid #d17309 }
.upload .ribbon.ribbon-red span::before, .card .ribbon.ribbon-red span::after { border:3px solid #a7200a }
.upload .ribbon span::before { content:""; position:absolute; left:0; top:100%; z-index:-1; border-right:3px solid transparent!important; border-bottom:3px solid transparent!important }
.upload .ribbon span::after {  content:"";  position:absolute;  right:0;  top:100%;  z-index:-1;  border-left:3px solid transparent!important;  border-bottom:3px solid transparent!important }

.sorting {
	text-align: right;
	cursor:pointer;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	background-color: rgb(255, 255, 255, 0.85);
	position: sticky;
	top: 0;
	z-index: 1000000;
}
.viewSelection {
	text-align: right;
	cursor:pointer;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	background-color: rgb(255, 255, 255, 0.85);
	z-index: 999999;
}
.viewSelectionIcons {
	padding: 0 0 1.2rem 1.2rem;
}
.tableTools {
	text-align: right;
	cursor:pointer;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	background-color: rgb(255, 255, 255, 0.85);
	z-index: 999999;
}
#search {
	margin: 0 0 5px 0;
}
#grouping {
	margin: 0 5px 5px 5px;
}

/*
=====
CORE STYLES
=====
*/

.toggle{
	--uiToggleSize: var(--toggleSize, 2.25rem);
	--uiToggleBorderWidth: var(--toggleBorderWidth, 2px);
	--uiToggleColor: var(--toggleColor, #222);
  
	display: var(--toggleDisplay, inline-flex);
	position: relative;
  }
  
  .toggle__input{
	/*
	The pattern by Sara Soueidan https://www.sarasoueidan.com/blog/inclusively-hiding-and-styling-checkboxes-and-radio-buttons/
	*/
	width: var(--uiToggleSize);
	height: var(--uiToggleSize);
	opacity: 0;
  
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
  }
  
  /*
  1. Calculation of the gap for the custom checkbox
  */
  
  .toggle__label{
	display: inline-flex;
	min-height: var(--uiToggleSize);
	padding-left: calc(var(--uiToggleSize) + var(--toggleIndent, .4em));
  }
  
  .toggle__input:not(:disabled) ~ .toggle__label{
	cursor: pointer;
  }
  
  /*
  1. Ems helps to calculate size of the checkbox
  */
  
  .toggle__label::after{
	content: "";
	box-sizing: border-box;  
	width: 1em;
	height: 1em;
	font-size: var(--uiToggleSize); /* 1 */
  
	background-color: transparent;
	border: var(--uiToggleBorderWidth) solid var(--uiToggleColor);
  
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
  }
  
  .toggle__input:checked ~ .toggle__label::after{
	background-color: var(--uiToggleColor);
  }
  
  .toggle__text{
	margin-top: auto;
	margin-bottom: auto;
  }
  
  /*
  The arrow size and position depends from sizes of square because I needed an arrow correct positioning from the top left corner of the element toggle
  
  1. Ems helps to calculate size and position of the arrow
  */
  
  .toggle__label::before{
	content: "";
	width: 0;
	height: 0;
	font-size: var(--uiToggleSize); /* 1 */
  
	border-left-width: 0;
	border-bottom-width: 0;
	border-left-style: solid;
	border-bottom-style: solid;
	border-color: var(--toggleArrowColor, #fff);
  
	position: absolute;
	top: .5428em;
	left: .25em;
	z-index: 3;
  
	transform-origin: left top;
	transform: rotate(-40deg) skew(10deg);
  }
  
  .toggle__input:checked ~ .toggle__label::before{
	--uiToggleArrowWidth: var(--toggleArrowWidth, 2px);
  
	width: .4em;
	height: .2em;
	border-left-width: var(--uiToggleArrowWidth);
	border-bottom-width: var(--uiToggleArrowWidth);
  }
  .page__toggle{
	margin-top: 1.25rem;
	margin-right: 1.5rem;
	font-size: var(--pageToggleTextFontSize);
  }
  .page__section{
	display: flex;
	flex-wrap: wrap;
	font-weight: 700;
	text-align: right;
	align-items: center;
  }

  .toggle__label::after{
	border-radius: var(--toggleBorderRadius, 2px);
  }
  
  /* 
  The animation of switching states
  */
  
  .toggle__input:not(:disabled) ~ .toggle__label::before{
	will-change: width, height;
	opacity: 0;
  }
  
  .toggle__input:not(:disabled):checked ~ .toggle__label::before{
	opacity: 1;
	transition: opacity .1s ease-out .25s, width .1s ease-out .5s, height .2s ease-out .3s;
  }
  
  .toggle__input:not(:disabled) ~ .toggle__label::after{
	will-change: background-color;
	transition: background-color .2s ease-out;
  }
  
  .page__section:nth-child(n+2){
	margin-top: 3rem;
  }
  .page__custom-settings{
	--pageToggleTextFontSize: 1.25rem;
 }

 /* ListView */
 .tabulator-col-title {
	text-align: center;
  }
.playerFrameHochformat {
    display:block;
    min-height:800px;
	aspect-ratio: 9 / 16;
}
.modal {
	z-index: 9999999999;
}
.modal-dialog-hoch {
	min-height: 850px;
	aspect-ratio: 9 / 16;
	width: 0%;
}
.playerFrameQuerformat {
    display:block;
    width:78em;
	aspect-ratio: 16 / 9;
}
.modal-dialog-quer {
	min-width: 80em;
	aspect-ratio: 16 / 9;
	height: 0%;
}

.details-modal-title {
  color: #111827;
  pointer-events: all;
  position: relative;
  width: calc(100% - 4.5em);
}  
.details-modal-title h1 {
	font-size: 1.25rem;
	font-weight: 600;
	line-height: normal;
  }
.close {
    font-size: 3em;
    font-weight: 700;
    top: 15px;
    right: 15px;
    line-height: 1;
    position: absolute;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=50);
    opacity: .5;
}
.lity {
	z-index: 999999 !important;
	background: #fff !important;
	background: rgba(255, 255, 255, 0.9) !important;
}
.lity-close {
	text-shadow: 0 3px 3px rgb(0 0 0 / 60%) !important;
	font-size: 40px !important;
}
.lity-container {
	max-width: 85% !important;
	aspect-ratio: 16 / 9;
}
.lity-iframe-container-hoch {
	width: unset !important;
	height: 100% !important;
	aspect-ratio: 9 / 16 !important;
	overflow: visible !important;
}
.lity-iframe-hoch {
	max-height: 95%;
	top: 50% !important;
    left: 50% !important;
    transform: translate(50%, -50%);
}
.lity-title {
	z-index: 9994;
    width: 50%;
    height: 35px;
    position: fixed;
    left: 5px;
    top: 5px;
    -webkit-appearance: none;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    padding: 0;
    color: #fff;
    font-style: normal;
    font-size: 35px;
    font-family: Arial, Baskerville, monospace;
    line-height: 35px;
    text-shadow: -1px -1px 2px #555555, 3px 2px 3px #000000;
    border: 0;
    background: none;
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none;
	text-align: left;
}