/****************************************************
 * @author: Timon Plugge		      		        *
 * @description: In this File are all Styles        *
 * (except the styles in HTML, Bootstrap etc.)      *
 ****************************************************/
/****************************************************
 * 					Font Import				        *
 * @description: Import the jambo Font  			*
 ****************************************************/
@font-face {
    font-family: MyriadWebPro;
    src: url(../font/MyriadWebPro.ttf);
}

@font-face {
    font-family: MyriadWebProIt;
    src: url(../font/MyriadWebPro-Italic.ttf);
}

@font-face {
    font-family: MyriadWebProCond;
    src: url(../font/MyriadWebPro-Condensed.ttf);
}

@font-face {
    font-family: MyriadWebProCondIt;
    src: url(../font/MyriadWebPro-CondensedIt.ttf);
}

@font-face {
    font-family: MyriadWebProBold;
    src: url(../font/MyriadWebPro-Bold.ttf);
}
/****************************************************
 * 				 	    General  			        *
 * @description: Body Font and background           *
 ****************************************************/
body{
	font-family: MyriadWebPro;
	background-color: var(--jambo_secondary);
	scrollbar-width: thin;
}

.text-overflow{
	overflow: hidden;
	text-overflow: ellipsis;
}
/****************************************************
 * 					   Submenu			            *
 * @description: all Submenu classes for the subbar *
 ****************************************************/
.submenu{
	z-index:850;
	margin-top:60px;
	width:100%;
	background-color: var(--jambo_primary);
	position:fixed;
	text-align:center;
	font-size:18px;
	-webkit-box-shadow: 0px 13px 10px -5px rgba(133,133,133,1);
	-moz-box-shadow: 0px 13px 10px -5px rgba(133,133,133,1);
	box-shadow: 0px 13px 10px -5px rgba(133,133,133,1);
	table-layout: fixed;
	white-space: nowrap;
}

.submenu td{
	padding-bottom:0px;
	border-top:none;
	border-top:none;
	padding-bottom:0px;
	border-bottom:5px solid var(--jambo_primary);
	white-space: nowrap;
    text-overflow: ellipsis;
}

.submenu .cur-sub{
	padding-bottom:0px;
	color:var(--jambo_yellow) !important;
	border-bottom:5px solid var(--jambo_yellow) !important;
}

.submenu td:hover{
	border-bottom:5px solid var(--jambo_yellow) !important;
	cursor:pointer;
	color:var(--jambo_yellow);
}

.with-sub{
	padding-top:125px;
}
/****************************************************
 * 					General a			            *
 * @description: Stop <a> decoration                *
 ****************************************************/
 a{
 	text-decoration:none;
 	color:#000;
 	display:block;
 }

 a:hover{
 	text-decoration:none;
 	color:#000;
 }
/****************************************************
 * 		           General Inputs                   *
 * @description: styles for inputs and lists        *
 ****************************************************/
.select{
	border-top-left-radius:0px;
	border-bottom-left-radius:0px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width:150px;
	background:url('../img/icons/dropdown.svg') no-repeat;
	background-position: 95% 5px;
	cursor:pointer;
	background-color:var(--jambo_primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

li{
	list-style-type: none !important;
	list-style: none !important;
}

.align-center-left{
	text-align: left;
	display:flex;
	flex-direction: column;
	margin-left: 32% !important;
}

input{
	border-radius: 5px;
    border: 1px solid #a5a3a3;
    border-color:#E6E9EC;
    height:36px;
}

input[required]{
 background-color:#fbf7df;
}

/****************************************************
 * 					General Button		            *
 * @description: Button styling for all Buttons with*
 * btn-class                 						*
 ****************************************************/
.btn{
	border: 1px solid var(--jambo_blue);
	margin-left: 15px;
	background-color: var(--jambo_blue);
	color: var(--jambo_primary);
	min-width: 150px;
	height: 36px;
	padding: 0px 10px 0px 10px;
}

.btn:hover{
	background-color: var(--jambo_blue_hover);
	border:1px solid var(--jambo_blue_hover);
	color:var(--jambo_primary);
}
.btn[disabled]:hover {
	border: 1px solid var(--jambo_blue);
	background-color: var(--jambo_blue) !important;
	color: var(--jambo_primary);

}

.btn img{
	-webkit-filter: invert(100%);
	margin: 6px 6px 6px -4px;
	padding: 0px 0px 0px 0px;
}

.btn-light{
	color: #212529;
	background-color: #f7f7f7;
	border-radius: 4px;
	box-shadow: none;
	border: 1px solid #c6c6c6;
}
/****************************************************
 * 		       General Progress Bar		            *
 * @description: Genearal Prograss Bar style        *
 ****************************************************/
.progress{
	background-color:#adadad;
	margin-bottom:25px;
	height:40px;
	width:65%;
	min-width:440px;
	box-shadow: inset 11px 9px 15px -8px rgba(0,0,0,0.65);
}

.progress-bar{
	height:40px;
	width:440px;
	margin-bottom:10px;
	background-color:var(--jambo_blue);
	box-shadow: inset 11px 9px 15px -8px rgba(0,0,0,0.65);
}

.progress-text{
	position:absolute;
	font-size:16px;
	padding-left: 15px;
	max-width:65%;
}
/****************************************************
 *              General Button Group                *
 * @description: This classes are for the groups	*
 * above the tables for example: 					*
 * Verwaltung | Benutzer anlegen in userEditor      *
 ****************************************************/
.btn-groups-cos{
	margin-left:15px;
}

.btn-groups-cos .input-group{
	width: 322px;
	margin-top: 10px;
	height: 30px;
}

.btn-groups-cos p{
	width: 135px;
	font-size:18px;
	border-right:3px solid var(--jambo_blue);
	margin-top:15px;
	min-width: 120px;
}

.btn-groups-cos .input-group-prepend{
	margin-left:15px;
}

.btn-groups-cos .input-group-prepend img{
	-webkit-filter: invert(100%);
}

.btn-groups-cos .input-group-text{
	border-color:var(--jambo_blue);
	border-top-right-radius:0px;
	border-bottom-right-radius:0px;
	background-color:var(--jambo_blue);
	color:var(--jambo_primary);
}

.btn-groups-cos .form-control{
	border-top-left-radius:0px;
	border-bottom-left-radius:0px;
	width:150px;
}

.btn-groups-cos .custom-control{
	background-color:var(--jambo_primary);
	border:1px solid gray;
	border-top-right-radius:5px;
	border-bottom-right-radius:5px;
	border-left:none;
}

.check-field{
	margin-top: 6px;
	margin-left: 8px;
	margin-right: 2px;
}
/****************************************************
 * 				Additional Table classes            *
 * @description: Table classes for general table    *
 ****************************************************/
table.dataTable.no-footer{
	border-bottom:3px solid var(--jambo_blue);
}

table.dataTable thead th{
	text-align:center;
	border-bottom:3px solid var(--jambo_blue);
}

table.dataTable tbody td{
	padding-left:10px;
	text-align:center;
	justify-content:center;
	margin-left:auto;
	margin-right:auto;
}

.table-inner-btn{
	border: 1px solid var(--jambo_secondary);
	background-color:var(--jambo_primary);
	border-radius: 5px;
	box-shadow: 4px 4px 4px 0px rgba(221,221,221,1);
}

.table-inner-btn:hover{
	border: 1px solid var(--jambo_blue_invert);
	background-color: var(--jambo_blue_invert);
	border-radius: 5px;
	-webkit-filter: invert(100%);
	color:#000;
	transition: all 0.3s;
}
.table-inner-btn[disabled] {
	opacity: .5;
	border: 1px solid var(--jambo_secondary);
	background-color:var(--jambo_primary);
	border-radius: 5px;
	box-shadow: 4px 4px 4px 0px rgba(221,221,221,1);
}
.table-inner-btn[disabled]:hover {
	-webkit-filter: none !important;
	-ms-filter: none !important;
	transition: none;
}

.quota-cell .progress{
	background-color:#adadad;
	height:20px;
	margin-bottom:0px;
	width:100%;
	min-width:10px;
	box-shadow: inset 11px 9px 15px -8px rgba(0,0,0,0.65);
}

.quota-cell .progress-bar{
	height:20px;
	width:100%;
	margin-bottom:10px;
	background-color:green;
	box-shadow: inset 11px 9px 15px -8px rgba(0,0,0,0.65);
}

.quota-cell .progress-text{
	position:relative;
	font-size:12px;
	text-align:left;
	max-width:65%;
}

.table-style{
	z-index:50;
	text-align:center;
	max-width: 100%;
	font-size:16px;
	margin-right:15px;
}

.mac-input{
	max-width:126px;
}

.ip-input{
	max-width: 122px;
}

.beamer-res{
	max-width:120px;
	text-align:center;
}

.check-group{
	margin:11px 10px 10px 10px;
}

.centered{
	justify-content: center;
	text-align: center;
}

.content{
	padding-top:75px;
	font-size:16px;
}

td .select{
	border-top-left-radius:5px;
	border-bottom-left-radius:5px;
	margin:auto;
	max-height:36px;
	padding: 0px 25px 0px 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/****************************************************
 * 				DATATABLES CLASSES   	            *
 * @description: Overwrite datatables classes       *
 ****************************************************/
table.dataTable thead .sorting {
 background-image:url("../img/icons/sort-no.svg")
}

table.dataTable thead .sorting_asc {
 background-image:url("../img/icons/asc.svg")
}

table.dataTable thead .sorting_desc {
 background-image:url("../img/icons/desc.svg")
}

table.dataTable.display tbody tr.odd>.sorting_1,
table.dataTable.order-column.stripe tbody tr.odd>.sorting_1 {
 background-color:#e0dede;
}

table.dataTable.display tbody tr.even>.sorting_1,
table.dataTable.order-column.stripe tbody tr.even>.sorting_1 {
 background-color:var(--jambo_secondary);
}

.dt-button{
	border: 1px solid var(--jambo_blue);
	background-color: var(--jambo_blue);
	color: var(--jambo_primary);
	text-align: center;
	min-width: 150px;
	border-radius: 5px;
	margin-top: 5px;
	height: 28px;
}
.dt-button:hover{
	background-color: var(--jambo_blue_hover);
	border: 1px solid var(--jambo_blue_hover);
}

.dt-buttons{
	padding-left: calc(50% - 150px);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
	color:var(--jambo_primary);
	background:none;
	background-color: gray;
	opacity:0.5;;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
	background:none;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled img,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover img,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active img{
	-webkit-filter: invert(50%);
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
	background:none;
	border-color:var(--jambo_blue);
	background-color:var(--jambo_blue);
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover img{
	-webkit-filter: invert(100%);
}

.dataTables_wrapper .dataTables_length select{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width:65px;
	background:url('../img/icons/dropdown.svg') no-repeat;
	background-position: 35px 0px;
	cursor:pointer;
	background-color:var(--jambo_primary);
	border:1px solid rgb(206, 212, 218);
	margin-top:5px;
}

.dataTables_wrapper .dataTables_length label{
	width:120%;
}
/****************************************************
 * 						NAVBAR			            *
 * @description: Navbar at Top of Screen            *
 ****************************************************/
.navbar{
	height:60px;
	background-color:var(--jambo_primary);
	box-shadow: 0 4px 2px -2px gray;
	width:100%;
	position:fixed;
	min-width:400px;
}

.nav-fluid{
	z-index:900;
}

.navbar.nav-sub{
	box-shadow:none;
}

.navbar .navbar-toggler-icon {
  height: 30px;
  width: 30px ;
}

.nav-middle{
	padding-bottom:0.8rem;
}

.nav-fluid{
	padding-left:0px;
	padding-right:0px;
	margin-left:0px;
	margin-right:0px;
}

.brand{
	margin-left:15px;
	font-size:26px;
}

.dropdown-menu{
	border:none;
	z-index:950;
	margin-left: -2px;
	margin-top: -2px;
    border-bottom: 1px solid var(--jambo_blue);
    border-left: 1px solid var(--jambo_blue);
    border-right: 1px solid var(--jambo_blue);
}

.btn-profil{
	color:#000;
	cursor:pointer;
	border:none;
	background-color: transparent;
	border-left:3px solid var(--jambo_blue);
	border-right:3px solid var(--jambo_blue);
	border-radius: 0px;
	text-decoration:none;
}
/****************************************************
 * 					   SIDEPANEL    		        *
 * @description: Sidebar-menu styling*
 ****************************************************/
.sidepanel {
  width: 270px;
  position: fixed;
  z-index: 1200;
  height: calc(100vh - 60px);
  top: 60px;
  left: -270px;
  border-top:1px solid var(--jambo_secondary);
  background: var(--jambo_primary);
  transition: all 0.3s;
  overflow-y: scroll;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
  overflow-x: hidden;
  overflow-x: hidden;
  padding-top: 35px;
  scrollbar-width: thin;
}

.sidepanel-start {
  width: 270px;
  position: fixed;
  z-index:1200;
  height: calc(100vh - 60px);
  top: 60px;
  left: 0px;
  border-top:1px solid var(--jambo_secondary);
  background: var(--jambo_primary);
  overflow-y: scroll;
  scrollbar-width: thin;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
  overflow-x: hidden;
  transition: all 0.3s;
}

.side-backdrop {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 800;
	background-color: #000;
	opacity: 0;
}

.side-sub{
	height: calc(100vh - 104px);
	top: 104px;
}

.openbtn{
	border: 1px solid var(--jambo_secondary);
	border-radius:5px;
	background-color:transparent;
	height:40px;
	width:50px;
}

.sidepanel .closebtn{
  position: absolute;
  top: 0;
  right: 8px;
  font-size: 36px;
  text-decoration:none;
  color:#000;
}

.side-head,.side-head-activate{
	padding-top: 13px;
	padding-left: 8px;
	padding-bottom: 13px;
	border-bottom: 1px solid var(--jambo_secondary);
	width: auto;
	height: 50px;
	padding-right: 50px;
	border-left:5px solid var(--jambo_primary);
}

.side-head-activate:hover{
	border-left:5px solid var(--jambo_yellow);
	background-image: linear-gradient(to right, rgba(255, 179, 0,0.2), rgba(255,0,0,0));
	transition: all 0.3s;
}

.btn-groups-cos .form-inline p{
	min-width:100px;
}

.group-item-side{
	height: 50px;
	padding-left: 9px;
	padding-top: 13px;
	padding-bottom: 13px;
	font-size: 16px;
	border-left: 5px solid var(--jambo_primary);
}

.group-item-side:hover{
	cursor:pointer;
	border-left:5px solid var(--jambo_yellow);
	background-image: linear-gradient(to right, rgba(255, 179, 0,0.2), rgba(255,0,0,0));
	transition: all 0.3s;
}

.group-item-side img{
	margin-right:10px;
	padding-bottom:2px;
}

.f-footer{
	text-align:center;
	font-size:11px;
}

#current {
	border-radius:0px;
	border-left:5px solid var(--jambo_yellow);
	background-image: linear-gradient(to right, rgba(255, 179, 0,0.2), rgba(255,0,0,0));
}

/****************************************************
 * 						Login    		            *
 * @description: Styles for Login page 				*
 ****************************************************/
.login-input-name {
	background: url("../img/icons/userEditor.svg") no-repeat 6px center white;
 	border-radius: 0px;
	border:none;
    border-bottom: solid gray 1px;
	color: gray;
	padding-left: 35px;
	font-size: 16px;
}

.card img{
	max-width:100%;
	max-height:100%;
}

.login-input-pw {
	background: url("../img/icons/lock.svg") no-repeat 6px center white;
	border-radius: 0px;
	border:none;
	border-bottom: solid gray 1px;
	color: grey;
	padding-left: 35px;
	font-size: 16px;
}

input:focus, input.form-control:focus {
    outline:none;
    outline-width: 0;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}

.alert-danger{
	text-align:center;
	border-radius:0px;
	margin-bottom:-10px;
}

.card{
	min-height: 350px;
	max-height: 470px;
	min-width: 450px;
	max-width: 550px;
	margin:0px 0px 0px 0px;
}

.card-header{
	background-color:var(--jambo_primary);
}

.card-body .btn{
	width:100%;
	margin-left:0px;
}

.sso-login{
	text-align: center;
	margin-top: 20px;
	text-decoration: underline;
}

.version {
	border-radius: 0;
	border-left: 5px solid var(--jambo_yellow);
	background-image: linear-gradient(to right, rgba(255, 179, 0, 0.2), rgba(255, 0, 0, 0));
	margin: -15px 0 0 -15px;
	font-size: 15px;
}

.version span {
	margin-left: 10px;
	font-size: 28px;
	font-weight: bold;
}
/*****************************************************
 * 						Hompage			       		 *
 * @description: general Hompage styles              *
 *****************************************************/
.home-img{
	width: calc(100vw - 330px);
	height: calc(100vh - 90px);
	text-align: center;
	margin-left: 300px;
	margin-top: 90px;
}

.img-fluid{
	max-width: 100%;
	max-height: calc(100% - 68px);
}

.home-btn {
	margin-left:15px;
	margin-bottom: 15px;
	margin-top: 15px;
}
/*****************************************************
 * 				          Popups					 *
 * @author: Igor Zobin & Timon Plugge				 *
 * @description: Popup classes from Igor Zobin.		 *
 * editing to the new style Timon Plugge			 *
 *****************************************************/
.bsPopup-open {
  overflow: hidden;
}

.close {
  position: absolute;
  top: 0px;
  right: 0px;
  height:40px;
  width: 40px;
  color: var(--jambo_primary);
}

.close:hover {
	color:var(--jambo_primary);
}

.bsPopup {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	display: none;
	outline: 0;
	opacity: 1 !important;
	z-index:1300;
}

.bsPopup-open .bsPopup {
  overflow-x: hidden;
  overflow-y: auto;
}

.bsPopup-content .smaller-con{
	width:50%;
}

.bsPopup-dialog {
	position: relative;
	width: auto;
	min-width:200px;
	max-width:600px;
	margin: 10px auto;
}

.bsPopup-table td{
	width:50%;
	text-align:left;
}

.bsPopup-content {
	background-color: var(--jambo_secondary);
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	outline: 0;
	width: auto;
	border-radius:5px;
	-webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
    box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
    overflow-y: scroll;
    scrollbar-width: thin;
	max-height: 97vh;
}

.bsPopup-content input[type='text']{
	width:80%;
	min-width:150px;
}

.bsPopup-content input[type='email']{
	width:80%;
	min-width:150px;
}

.bsPopup-content input[type='number']{
	width:80%;
	min-width:150px;
	-webkit-appearance: none;
  	margin: 0;
  	-moz-appearance: textfield;
}

.bsPopup-content input[type='password']{
	width:80%;
	min-width:150px;
}

.bsPopup-content .form-control{
		width: 80%;
		min-width:150px;
}

.bsPopup-backdrop {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1100;
	background-color: #000;
	opacity: 0.5;
}

.bsPopup-backdrop.fade {
  filter: alpha(opacity=0);
  opacity: 0;
}

.bsPopup-backdrop.in {
  filter: alpha(opacity=50);
  opacity: .5;
}

.bsPopup-header {
	background-color: var(--jambo_blue);
	color:var(--jambo_primary);
	height:58px;
	text-align:center;
	position: fixed;
	width: 100%;
	z-index: 1400;
}

.bsPopup-header h2{
	margin-top:10px;
}

.bsPopup-body {
	margin-top: 73px;
	position: relative;
	margin-left: 15px;
	margin-right: 15px;
	margin-bottom: 55px;
}

.bsPopup-body-table{
	margin-top: 55px;
	position: relative;
	margin-left: 15px;
	margin-right: 10px;
	margin-bottom: 55px;
}


.bsPopup-footer {
	margin-left: -15px;
	position: fixed;
	z-index: 1700;
	bottom: 0px;
	width: 100%;
}

.bsPopup-footer .btn-group{
	width:100%;
}

.bsPopup-footer .btn-group button{
	margin-left:0px;
	border-radius:0px;
}

.bsPopup-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll;
}

.container:before,
.container:after,
.bsPopup-header:before,
.bsPopup-header:after,
.bsPopup-footer:before,
.bsPopup-footer:after {
  display: table;
  content: " ";
}

.container:after,
.bsPopup-header:after,
.bsPopup-footer:after {
  clear: both;
}

.fade.in {
  opacity: 0.65;
}

.bsPopup.fade .bsPopup-dialog {
  -webkit-transition: -webkit-transform .3s ease-out;
       -o-transition:      -o-transform .3s ease-out;
          transition:         transform .3s ease-out;
  -webkit-transform: translate(0, -25%);
      -ms-transform: translate(0, -25%);
       -o-transform: translate(0, -25%);
          transform: translate(0, -25%);
}

.bsPopup.in .bsPopup-dialog {
  -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
       -o-transform: translate(0, 0);
          transform: translate(0, 0);
}

.custom-file{
	max-width: 375px;
	margin-top:15px;
	margin-bottom:15px;
}

.custom-file-label{
	text-align:left;
}

.bsPopup-xl {
	max-width: 85% !important;
}

/*****************************************************
 * 				   Sidebar for Room				     *
 * @description: Style for Room Sidebar   			 *
 *****************************************************/
.sidebar-live {
  width: 270px;
  position: fixed;
  z-index: 910;
  height: calc(100vh - 60px);
  top: 60px;
  left: 0px;
  border-top:1px solid var(--jambo_secondary);
  background: var(--jambo_primary);
  transition: all 0.3s;
  overflow-y: scroll;
  scrollbar-width: thin;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
  overflow-x: hidden;
}

.side-control.sidebar-live{
	position: relative;
	z-index: 910;
	width: 270px;
	top: -17px;
	background: var(--jambo_primary);
	overflow-y: scroll;
	scrollbar-width: thin;
	box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
	overflow-x: hidden;
	height: calc(97vh - 94px);
}

.sidebar-live h1{
text-align:center;
font-size:30px;
margin-top:15px;
}

.sidebar-live h2{
text-align:center;
font-size:22px;
}

.sidebar-live h3{
text-align:center;
font-size:20px;
margin-top:15px;
}

.live-list{
	margin-top:20px;
	margin-left:15px;
	padding-top:5px;
	padding-bottom:5px;
	padding-left:5px;
	margin-right:5px;
	border:1px solid #e5e5e5;
	border-radius:5px;
	cursor:pointer;
	margin-right:5px;
}

.live-list-dis{
	margin-top:20px;
	margin-left:15px;
	padding-top:5px;
	padding-bottom:5px;
	padding-left:5px;
	margin-right:5px;
	border:1px solid #e5e5e5;
	border-radius:5px;
	margin-right:5px;
	opacity:0.3;
	pointer-events:none;
}

.live-list-dis img{
	margin-right:15px;
	margin-bottom:2px;
}

.side-control.sidebar-live .live-list{
	margin-left: 10px;
	margin-top: 5px;
	width: calc(100% - 20px);
}

.side-control.sidebar-live .live-list-dis{
	margin-left: 10px;
	margin-top: 5px;
	width: calc(100% - 20px);
}

.live-list:hover{
	border-left:5px solid var(--jambo_yellow);
	background-image: linear-gradient(to right, rgba(255, 179, 0,0.2), rgba(255,0,0,0));
	transition: all 0.3s;
}

.live-list img{
	margin-right:15px;
	margin-bottom:2px;
}

.sidebar-live .btn-groups{
	text-align:center;
}

.sidebar-live .btn{
	width: 80%;
	margin-top:5px;
	text-align:center;
	background-color:var(--jambo_blue);
	color:var(--jambo_primary);
	margin-left:0px;
}

.sidebar-live.side-control .btn{
    width: calc(100% - 20px);
    margin-top: 5px;
    text-align: left;
    background-color: var(--jambo_blue);
    color: var(--jambo_primary);
    margin-right: 10px;
    margin-left: 10px;
}
.sidebar-live.side-control .btn:hover{
	background-color:var(--jambo_blue_hover);
	transition: all 0.3s;
}

.live-table .moni-in{
	margin-top: 13px;
	height: 60px;
}

.live-table .delete{
	position: absolute;
	width: 24px;
	height: 24px;
	margin-left: 58px;
	cursor: pointer;
	margin-top: -3px;
}

.live-table .name{
	height: 24px;
	overflow:auto;
	font-size: 14px;
	width: 97px;
	scrollbar-width: thin;
}

.sidebar-live .btn-live:hover{
	background-color:var(--jambo_blue_hover);
	transition: all 0.3s;
}

.sidebar-live .btn-live img{
	margin-right:10px;
	-webkit-filter: invert(100%);
}

.sidebar-live .form-group{
	width:80%;
	margin-top:5px;
}

.alt-image-cc {
	background-color: #F8EAD7;
	color: #aa7215;
	border: 1px solid #EDD3B0;
	margin-bottom: 15px;
	margin-left: 5px;
	text-align: center;
	padding-top: 60px;
	padding-bottom: 60px;
}

.sidebar-live .select{
	border-top-left-radius:5px;
	border-bottom-left-radius:5px;
	width:170px;
}

.info-field{
	width:220px;
	margin-left:25px;
}

.drag{
	cursor:move;
}

.info-field .box-red{
	width:20px;
	height:20px;
	background-color:red;
	border-radius:5px;
	margin-left:15px;
}

.info-field .box-black{
	width:20px;
	height:20px;
	background-color:#000;
	border-radius:5px;
	margin-left:39px;
}

.info-field .text{
	margin-left:10px;
}

.live-table{
	width:calc(100vw - 370px);
	height:calc(100vh - 90px);
	margin-left:320px;
	margin-top:auto;
	margin-bottom:auto;
}

.inner-live{
	margin:auto;
	-webkit-box-shadow: 0px 0px 41px -4px rgba(115,115,115,1);
	-moz-box-shadow: 0px 0px 41px -4px rgba(115,115,115,1);
	box-shadow: 0px 0px 41px -4px rgba(115,115,115,1);
}

.inner-live td{
	background-color:var(--jambo_primary);
	border:1px solid gray;
	width:100px;
	height:100px;
	text-align:center;
	vertical-align:top;
}

.mini-lockicons{
	width: 100%;
	margin-top: 3px;
	display: flex;
	justify-content: center;
}

.inner-live td .mini-lockicons img{
	margin-top:2px;
	margin-left:0px;
	margin-right:0px;
	width:16px;
	height:16px;
}

.inner-live td .moni{
	margin-left:0px;
	margin-right:0px;
	width:70px;
	height:70px;
	cursor:pointer;
}

.inner-live .moni-notOn{
	margin-left:0px;
	margin-right:0px;
	width:70px;
	height:70px;
	pointer-events:none;
}

.compOn{
	margin-top: 73px;
}

.multi{
	width:260px;
	min-height:200px;
	margin-top:15px;
}

.box-live{
	width:248px;
	height:300px;
	border:1px solid gray;
	margin-left:10px;
	overflow-y:scroll;
	overflow-x:hidden;
	scrollbar-width: thin;
}

.multi-live{
	width: 240px;
	z-index: 999;
	margin-left: 5px;
}

.multi-live img{
	width:32px;
	height:32px;
	margin-left:15px;
	margin-top:2px;
}

.bin{
	cursor: pointer;
	z-index: 1001;
	padding-bottom: 2px;
}

.content-live{
	width:100%;
	height:100%;
}

.mini-lockicons-active{
	margin-left:2px;
	margin-top:70px;
}

.text-multi{
	padding-top: 7px;
	height: 40px;
	width: 180px;
	overflow-y: hidden;
	overflow-x: scroll;
	scrollbar-width: thin;
}

.scalable {
	width: 93px;
	height: 70px;
	margin-top:1px;
	transition: all 0.3s;
}

.scalable:hover{
	transform: scale(1.7);
	z-index: 1;
	transition: all 0.3s;
}

.live-img{
	width: calc(100% - 300px);
	margin-left: 17px;
	height: calc(97vh - 130px);
	text-align: center;
}

.live-img img{
	max-width: 100%;
	max-height: 100%;
}

#exam-mode-toggle-form {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: 15px;
}

#exam-mode-toggle-form label {
	margin-bottom: 0 !important;
}

#exam-mode-toggle-form .switch {
	margin-left: 15px;
}

#exam-mode-info {
	text-decoration: underline;
	margin-left: 15px;
}

#exam-mode-info:hover {
	color: var(--jambo_blue_hover);
	cursor: pointer;
}
/****************************************************
 * 					Systemmonitor	                *
 * @description: classes for system monitoring      *
 ****************************************************/
 .systemText{
 	margin-left:15px;
 }

.systemHeader{
	margin-left:0px;
}

.system .progress{
	background-color:#adadad;
	height:20px;
	margin-bottom:0px;
	width:100%;
	min-width:250px;
	border-radius:5px;
	-webkit-border-radius:5px;
	box-shadow: inset 11px 9px 15px -8px rgba(0,0,0,0.65);
	margin-bottom:15px;
}

.system .progress-bar{
	height:20px;
	width:100%;
	margin-bottom:10px;
	background-color:var(--jambo_blue);
	transition: all 0.3s;
	box-shadow: inset 11px 9px 15px -8px rgba(0,0,0,0.65);
}

.system progress-text{
	position:relative;
	font-size:12px;
	text-align:left;
	max-width:65%;
}

.systemBox{
	border: 1px solid gray;
	margin-bottom: 15px;
	border-radius: 5px;
	-webkit-box-shadow: 0px 5px 5px 0px rgba(112,112,112,1);
	-moz-box-shadow: 0px 5px 5px 0px rgba(112,112,112,1);
	box-shadow: 0px 5px 5px 0px rgb(112, 112, 112);
}

.pipe{
	margin-left:15px;
	margin-right:15px;
}

.systemTable{
	width: calc(100% - 20px);
	margin: 10px;
}

.systemTable td{
	text-align:center;
}

.systemTable tr{
	background-color: var(--jambo_secondary);
	border:1px solid gray;
}

.systemTable th{
	text-align:center;
}

.download-table{
	margin: auto;
	align-content: center;
	align-items: center;
	justify-content: center;
}
/****************************************************
 * 					Error Dialog                    *
 * @description: Style for Error Dialoge            *
 ****************************************************/
.errormsg{
	background-color: #F8D7DA;
	color: #721c24;
	border: 1px solid #EDB0B6;
	margin-bottom: 15px;
	width: 550px;
	margin-left: 10px;
	text-align: center;
}

.error-text{
	color: #721c24;
}

.infomsg{
	margin-bottom: 15px;
	width: 550px;
	margin-left: 10px;
	text-align: center;
}
/****************************************************
 * 				  Edit Groups side                  *
 * @description: Styles for edit group*
 ****************************************************/
.editGroupTable{
	margin:auto;
}

.ms-selector-class .ms-container{
	margin:auto;
	height:35vh;
}

.ms-selector-class .ms-container .ms-list{
	height:35vh;
	scrollbar-width:thin;
}

.editGroupTable .select{
	width:100%;
	margin-left:0px;
	margin-right:0px;
}

.ms-container .ms-selection{
	background-color:transparent;
}

.ms-container .ms-selectable{
	background-color:transparent;
}

/*********************************************************
 * 					Single Multiselect                   *
 * @description: Style for a single JQuery Multiselect   *
 ********************************************************/

.ms-single-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	border-bottom: 3px solid var(--jambo_blue);
	border-top: 3px solid var(--jambo_blue);
	background: var(--jambo_primary);
}

.ms-single-container > * {
	margin: 5px;
}


/****************************************************
 * 					Update-Dialog	                *
 * @description: Style for Update Dialoge           *
 ****************************************************/
.popup-content.update-dialog{
	margin-top:-15px;
}

.popup-content.update-dialog h3{
	margin-left:-15px;
	padding-left: 15px;
	width: 600px;
}

.popup-content.update-dialog ul{
	margin-bottom: 0px;
	margin-top:0px;
	padding-left:15px;
	margin-left:0px;
}

.popup-content.update-dialog li{
	margin-top:0px;
	padding-left:0px
}
/****************************************************
 * 					Chrome Scrollbar	            *
 * @description: The Chrom scrollbar to a thin      *
 ****************************************************/
::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar:horizontal {
  height: 5px;
}

::-webkit-scrollbar-track {
  background: #ddd;
}

::-webkit-scrollbar-thumb {
  background: #666;
}
/****************************************************
 * 				Table without Datatables            *
 * @description: For js issues.                     *
 ****************************************************/
.tableOnlyStyle{
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
}

.tableOnlyStyle thead th{
	text-align: center;
	border-bottom: 3px solid var(--jambo_blue);
	padding: 10px 18px;
	font-weight: bold;
	box-sizing: content-box;
}

.tableOnlyStyle tbody td{
	border-top: 1px solid #ddd;
	padding-left: 10px;
	line-height: 2;
    text-align: center;
    height:35px;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    box-sizing: content-box;
    background-color:var(--jambo_primary);
}

.tableOnlyStyle tbody tr .lastRow{
	border-bottom: 3px solid var(--jambo_blue);
	border-collapse: collapse;
}
/****************************************************
 * 						IntroJs                     *
 * @description: For nicer style                    *
 ****************************************************/
.introjs-helperLayer {
    background-color: var(--jambo_primary);
    background-color: rgba(255,255,255,.4);
    border: 2px solid var(--jambo_primary);
}

.licenses {
	width: 20%;
	color:#aaa;
}

/****************************************************
 * 				W3Schools Checkbox Switch			*
 * @description: Display Checkbox as a Slider/Switch*
 ****************************************************/
/* The switch - the box around the slider */
.switch {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

/* The slider */
.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s;
}

.slider:before {
	position: absolute;
	content: "";
	height: 26px;
	width: 26px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
}

input:checked + .slider {
	background-color: #2196F3;
}

input:focus + .slider {
	box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
	-webkit-transform: translateX(26px);
	-ms-transform: translateX(26px);
	transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
	border-radius: 34px;
}

.slider.round:before {
	border-radius: 50%;
}


/****************************************************
 * 				VUEJS        						*
 * @description: CSS for vue components             *
 ****************************************************/

#vue-app {
	position: absolute;
	width: 100%;
    /*Muss >= dem z-index von .nav-fluid  sein.*/
	z-index: 900;
	display: flex;
	justify-content: center
}

/*
 * VUEJS POPUP (Modal)
 */

.vue-modal {
	width: 100%;
	display: flex;
	justify-content: center;
	margin-top: 10px;
}

.vue-modal-backdrop {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(0, 0, 0, 0.3);
	display: flex;
	justify-content: center;
	align-items: center;
}

.vue-modal-dialog {
	background: #FFFFFF;
	box-shadow: 2px 2px 20px 1px;
	overflow-x: hidden;
	display: flex;
	flex-direction: column;
	max-width: 95%;
	min-width: 50%;
	max-height: 95vh;
	position: relative;
}

.vue-modal-header {
	padding: 10px;
	display: flex;
	background-color: var(--jambo_blue);
	color:var(--jambo_primary);
	height:58px;
	position: relative;
	border-bottom: 1px solid #eeeeee;
	justify-content: center;
}

.vue-modal-footer {
	border-top: 1px solid #eeeeee;
	display: flex;
	justify-content: center;
	background-color: var(--jambo_blue);
	color:var(--jambo_primary);
}

.vue-modal-footer .btn {
	margin: 0;
	width: 100%;
}

.vue-modal-body {
	position: relative;
	padding: 15px;
}

.vue-modal-fade-enter,
.vue-modal-fade-leave-to {
	opacity: 0;
}

.vue-modal-fade-enter-active,
.vue-modal-fade-leave-active {
	transition: opacity 2s ease;
}

.vue-modal-table {
	border-top: 2px solid black;
	border-bottom: 2px solid black;
	margin: 10px;
}

.vue-modal-table td {
	padding: 8px 10px;
	text-align: center;
	min-width: 50%;
}

.vue-modal-table tr:nth-child(even) {
	background-color: #f9f9f9;
}
.vue-modal-table tr:nth-child(even):hover {
	background-color: #f9f9f9;
}

.vue-modal-table tr:nth-child(odd) {
	background: #ffffff;
}

.vue-modal-table tr:nth-child(odd):hover {
	background: #f9f9f9;
}

/****************************************************
 * 				REGISTRATION        				*
 * @description: Design for the registration page   *
 ****************************************************/

.big-card {
	min-height: 350px;
	max-height: none;
	min-width: 450px;
	max-width: 550px;
	margin-top: 150px;
	margin-bottom: 50px;
}

.register-page {
	display: flex;
	justify-content: center;
}

.register-page a {
	text-decoration: underline !important;
}

#register-form {
	width: 85%;
}

/****************************************************
 * 				CSV GROUP IMPORT                    *
 * @description: Design for the registration page   *
 ****************************************************/

.csv-group-import-inputs .btn {
	margin: 0;
}

/****************************************************
* 				MISCELLANEOUS						*
* @description: Random useful design classes       *
****************************************************/

.success-text {
	color: #36b357;
}

.import-deleted-text {
	color: #cb8e61;
}

.long-details {
	width: 100%;
	text-align: justify;
	margin-left: 10px;
}

.long-details p {
	padding: 15px;
}

/*
 * For cases like:
 * This is a text describing something with inputs under it.
 * -- label1 input1
 * -- label2 input2
 */
.text-with-aligned-inputs label {
	padding-left: 10px;
	display: block;
}

/*
 * For date inputs (start- and endDate). Start- and end date label are same size.
 * Labels of the input must be inside a span-tag
 */
.date-inputs span {
	display: inline-block;
	min-width: 40px;
	max-width: 50px;
}
.some-margin-top {
	margin-top: 25px;
}

.divider {
	border: 1px solid black;
}

.one-row-left-aligned {
	display: flex;
	justify-content: start;
}

.circle-loading-align {
	margin-left: 5px;
	position: relative;
}

/* Column aligned radio buttons */
.radio-align {
	min-width: 70px;
	text-align: left;
}