/* IBM Plex
-------------------------------------------------- */

@font-face {
  font-family: 'Plex';
  src: url('fonts/IBMPlexSans-Light.woff2') format('woff2'),
       url('fonts/IBMPlexSans-Light.woff') format("woff"),
       url('fonts/IBMPlexSans-Light.eot'),
       url('fonts/IBMPlexSans-Light.eot?#iefix') format('embedded-opentype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Plex';
  src: url('fonts/IBMPlexSans-LightItalic.woff2') format('woff2'),
       url('fonts/IBMPlexSans-LightItalic.woff') format("woff"),
       url('fonts/IBMPlexSans-LightItalic.eot'),
       url('fonts/IBMPlexSans-LightItalic.eot?#iefix') format('embedded-opentype');
  font-weight: 300;
  font-style: italic;
}

@font-face {
  font-family: 'Plex';
  src: url('fonts/IBMPlexSans-SemiBold.woff2') format('woff2'),
       url('fonts/IBMPlexSans-SemiBold.woff') format("woff"),
       url('fonts/IBMPlexSans-SemiBold.eot'),
       url('fonts/IBMPlexSans-SemiBold.eot?#iefix') format('embedded-opentype');
  font-weight: 600;
  font-style: normal;
}

/*------------------------------------*\
    basics
\*------------------------------------*/

html {
	height: 100%;
	width: 100%;
        margin: 0;
        padding: 0;
}

body {
	margin: 0;
	padding: 0;
	background-image: url("/img/login.jpg?1646140891");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	font-variant-numeric: lining-nums;
    -moz-font-feature-settings: "lnum";
    -webkit-font-feature-settings: "lnum";
    -ms-font-feature-settings: "lnum";
    font-feature-settings: "lnum";
}
                                               
face, body,td,th {
	font-family:"Plex", Courier, sans !important;
	font-size: 14px;
	color: #FFF;
	font-weight: 300;
/*	overflow: hidden;*/
	text-decoration: none;
}
b, strong {
	
	font-weight: 600;
	font-style: normal;
}

/*------------------------------------*\
    scrollbar
\*------------------------------------*/

html {
  --scrollbarBG: #1289C2;
  --thumbBG: rgba(0,0,0,.5);
}
body {
  scrollbar-width: thin;
  scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}
body::-webkit-scrollbar-track {
  background: var(--scrollbarBG);
}
body::-webkit-scrollbar-thumb {
  background-color: var(--thumbBG) ;
  border-radius: 0px;
  border: 2px solid var(--scrollbarBG);
}

/*------------------------------------*\
    checkboxes
\*------------------------------------*/

input[type=checkbox] {
	-webkit-appearance: none;
	background-color: #0c5a80;
	border: 0px solid #0c5a80;
	box-shadow: 1px 1px 2px rgba(0,0,0,0.1),
				-1px -1px 2px rgba(255,255,255,.05),
				inset 0px -15px 10px -12px rgba(0,0,0,0.05);
	padding: 7px;
	margin-top: 2px;
	border-radius: 2px;
	display: inline-block;
	position: relative;
}
input[type=checkbox]:active, input[type=checkbox]:checked:active {
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}

input[type=checkbox]:checked {
	background-color: #1289C2;
	border: 0px solid #1289C2;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
	color: #99a1a7;
}
input[type=checkbox]:checked:after {
	font-family:"Plex" !important;
	content: '✓';
	font-size: 14px;
	line-height: 14px;
	font-weight: 600;
	position: absolute;
	top: 0px;
	left: 1px;
	color: #FFF;
}
/*------------------------------------*\
    toggle
\*------------------------------------*/
.css_chooser  {
	height:0px;
	line-height: 0px;
	font-size: 0px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 17px;
  margin-top: -12px;
  float:right;
  right:5px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

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

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

input:checked + .slider {
  background-color: #1289C2;
}

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

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

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

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

/*------------------------------------*\
    sidebar
\*------------------------------------*/

.logo {
	padding:14px 20px;
	border-bottom:5px solid #5E5E5E;

        /*padding:14px 20px;        
        border-bottom:5px solid #000000;       */
        background-image:url(/img/nlogo.png);
        background-size:160px 30px;                    
        background-repeat:no-repeat;
        background-position: center center;
		background-color:#1289C2;
        width:160px;           
        height:30px;  
}
img {
	border:0;
}

.sidemenu {
	position:fixed;
	background:rgba(0,0,0,.2);
	width:200px;
	height:auto;
        max-height: calc(100% - 110px);
        overflow-x: hidden;
        overflow-y: auto; 
	margin:0px;
	z-index:3;
	border-radius:0px;
	-moz-border-radius:0px;
	-webkit-border-radius:0px;
	box-shadow:3px 3px 7px rgba(0,0,0,0.1);
	mox-box-shadow:3px 3px 7px rgba(0,0,0,0.1);
	-webkit-box-shadow:3px 3px 7px rgba(0,0,0,0.1);
}

.menufooter {
	position: fixed;
	color:#FFF;
	background:rgba(0,0,0,.4);
	width:180px;
	left: 0px;
	bottom: 0px;
	cursor: default;
	text-align: left;
	z-index:5;
	padding:10px;
	box-shadow:3px 3px 7px rgba(0,0,0,0.1);
	mox-box-shadow:3px 3px 7px rgba(0,0,0,0.1);
	-webkit-box-shadow:3px 3px 7px rgba(0,0,0,0.1);
}
.menufooter td {
	font-size:10pt;
	line-height:1.4em;
}
.menu {
	background: rgba(0,0,0,.5);
	padding:10px 0;
	border-radius:0px;
	-moz-border-radius:0px;
	-webkit-border-radius:0px;
	overflow:visible;
}
.lang_chooser {
	background: rgba(0,0,0,.5);
	padding:0 0;
	padding-top:3px;
	border-radius:0 0 0 0;
	-moz-border-radius:0 0 0 0;
	-webkit-border-radius:0 0 0 0;
	color: #EEE;
	text-align: center;
	font-size: 11px;
	width: 200px;
	font-weight: bold;
}
.lang_chooser a {
	color:#EEE;
	text-decoration:none;
}
.lang_chooser a:visited {
	color:#EEE;
	text-decoration:none;
}
.choosen_lang {
	color:#1289C2;
}
.menuitem {
	position:relative;
	margin:0px auto;
	padding: 8px 0;
	left: 0px;
	text-align: center;
	font-size: 14px;
	vertical-align: middle;
	color: #EEE;
	cursor: pointer;
	z-index: 4;
	width: 200px;
	border-bottom: solid 1px rgba(255,255,255,.1);
}
.menuitem a, .menuitem a:visited {
	color:#FFFFFF;
	text-decoration:none;
}
a .menuitem:hover {
	background:#1289C2;
}
a, a:visited {
	color:#12ADC2;
	text-decoration:none;
	font-weight: 600;
}
.menuitem a:hover {
	width:180px;
	padding:8px 10px;
}
.selected_menuitem {
	background:#1289C2;
	color:#FFFFFF;
	border-bottom: solid 1px rgba(255,255,255,.1);
	font-size: 14px;
	padding: 8px 0;
	text-align: center;
	position: relative;
	margin: 0px auto;
	left: 0px;
	z-index: 4;
	width: 200px;
}

/*------------------------------------*\
    pingBox
\*------------------------------------*/

.pingBox {
	position: absolute;
	z-index: 5;
	background: rgba(18,137,194,.97);
	border:1px solid rgba(18,137,194,1);
	border-radius:2px;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	box-shadow:3px 3px 7px rgba(0,0,0,0.1);
	mox-box-shadow:3px 3px 7px rgba(0,0,0,0.1);
	-webkit-box-shadow:3px 3px 7px rgba(0,0,0,0.1);
	left: 310px;
	top: 180px;
	height: 300px;
	width: 880px;
	visibility: hidden;
	z-index:100;
}
.pingBox p {
	color:#FFF;
	padding:4px;
	margin:0px;
}
.pingBox td {
	width:12px;
	font-size:x-small;
	font-family:arial;
}
.pingBox .empty {
	background:transparent;
}
.pingBox .withContent {
	background:rgba(18,137,194,.97);
	font-size:xx-small;
	text-align:center;
}
.pingBox .withoutContent {
	background:rgba(18,137,194,.97);
	font-size:xx-small;
	color:#FFF;
	text-align:center;
}
.pingBox::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}
.pingBox::-webkit-scrollbar-track {
	background-color: rgba(18,137,194,.1);
	-webkit-border-radius: 4px;
}
.pingBox::-webkit-scrollbar-thumb:vertical {
	background-color: rgba(0,0,0,.2);
	-webkit-border-radius: 5px;
}
.pingBox::-webkit-scrollbar-thumb:vertical:hover,
.pingBox::-webkit-scrollbar-thumb:horizontal:hover {
	background: red;
}
.pingBox::-webkit-scrollbar-thumb:horizontal {
	background-color: rgba(0,0,0,.2);
	-webkit-border-radius: 5px;
}

/*------------------------------------*\
    site elements
\*------------------------------------*/

.element {
	position:relative;
	float:left;
	margin-right:10px;
}
.box {
/*	cursor: pointer;*/
	position: relative;
	margin-top: 5px;
	width: 600px;
	border: solid 1px rgba(255,255,255,.1);
	padding:0;
	overflow: auto;
	height: 100px;
	vertical-align: middle;
	font-size: 14px;
	font-weight: bold;
	filter: alpha(opacity= 100);
	-moz-opacity: 1;
	opacity: 1;
	filter:alpha(opacity=100);
	z-index: 5;
	background: rgba(50,50,50,.4);
}
.box2 {
	position: relative;
	margin:0 0 10px 0;
	border: solid 1px rgba(255,255,255,.1);
	background: rgba(50,50,50,.4);
	border-radius:0px;
	padding: 0;
	overflow: auto;
	vertical-align: middle;
	font-size: 14px;
	font-weight: bold;
	z-index: 5;
}
.bgbox {
	position: relative;
	left: 250px;
	top: 70px;
	max-width: 1150px;
	z-index: 3;	
	background: rgba(50,50,50,.8);
	padding: 1em;
	display:inline-block;
	float:left;
	clear:both;
	border-radius: 14px;
	box-shadow: -3px -3px 9px rgba(255,255,255,.05), 
            	3px 3px 9px rgba(0,0,0,.2);
}
.note {
	border-right: 225px solid rgba(50,50,50,.0);
}
.groupbox, .tabgroupbox {
	position: relative;
	border: 1px solid rgba(150,150,150,.2);
	background: rgba(30,30,30,.6);
	padding: 2px 0px 3px 7px;
	margin-bottom:8px;
	min-height: 20px;
	box-shadow: -3px -3px 7px rgba(255,255,255,.05), 
          		3px 3px 7px rgba(0,0,0,.2);
}
.groupbox {
	border-radius: 10px;
}
.tabgroupbox {
	border-radius: 0 0 10px 10px;
	min-width:582px;
	display:flow-root;
}
#datagrid.box2 {
	border-radius: 6px;
}

#nummern.groupbox,
#glob_dialplan.groupbox,
#einstellungen.groupbox,
#provisioning.groupbox,
#nummern.groupbox {
	border-radius: 0 0 10px 10px;
}
.linebox {
	position: relative;
	border: 0;
	background:rgba(18,137,194,.1);
	padding: 2px 0px 3px 10px;
	margin:5px 2px 5px 0px;
}
.linebox:first-child {
	margin-top:17px;
}
.linebox img {
	max-height:16px;
}
.textbox {
	position:relative;
	width: 680px;
	z-Index:6
}
.tabs {
	position:relative;
	min-height:25px;
/*	white-space:nowrap;*/
/*	display:inline-block;*/
}
#number_tabs {
	max-width: 1083px;
}
.tabbutton {
	position: relative;
	float:left;
	min-width:93px;
	height:18px;
	padding: 2px 6px;
	margin: 3px 3px 0 0;
	background: rgba(30,30,30,.6);
	text-align: center;
	color:#FFF;
	cursor: pointer;
	z-index: 4;
	border-radius:  6px 6px 0 0;
}
.tabbuttongroupboxed, .tabbuttonselected {
	position: relative;
	float:left;
	min-width:93px;
	height:21px;
	padding: 2px 6px;
	background: rgba(30,30,30,.6);
	/*background: #0090A9;*/
	text-align: center;
	border-radius:  6px 6px 0 0;
	border-bottom:0;
	border: 1px solid rgba(150,150,150,.2);	
	border-bottom:0;
	color: #12ADC2;
	font-weight: bold; 
	cursor: pointer;
	z-index: 4;

	top:-1px;
	margin:1px 3px -2px 0;
}

.scrolltab {
	position:relative;
	float:right;
	height:16px;
	cursor:pointer;
	z-Index:10;
}
.scrolltab img {
	max-height:16px;
}
.label {
	position: relative;
	color:#FFF;
	border: 0px;
	padding: 1px 0 2px 0;
	overflow: hidden;
}
.icon {
	width:16px;
	height:16px;
	padding:5px;
}
.icon img {
	max-height:16px;
}

/*------------------------------------*\
    imput fields
\*------------------------------------*/

input[type=text],input[type=password] {
	width:142px;
	height:18px;
	margin:1px 4px 0 0;
	padding:1px 2px;
	height:18px;
	max-height:18px;
	overflow:hidden;
	background:#333;
	color:#FFF;
	border:none;
	outline: none;
	font-family:"Plex", Courier, sans;
	font-size:13px;
	border-radius: 3px;
	box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.2) inset,
	 -2px -2px 2px 0 rgba(255, 255, 255, .05) inset;
}
input {
	border:none;
	outline: none;
	border-radius:0px;
	margin:1px 4px 0 0;
	font-family:"Plex", Courier, sans;
	font-size:14px;
}
input:focus {
	box-shadow: 0px 0px 4px 0 #00B7D8;
}
select {
	font-family:"Plex", Courier, sans;
	min-width:120px;
	cursor:pointer;
	font-size:13px;
}
.multiSelect select {
	background-color: rgba(20,20,20,.5);
	border: none;
	border-radius: 3px;
	box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.2) inset,
    -2px -2px 2px 0 rgba(255, 255, 255, .05) inset;
	color:  #FFF;
}

input[type=text]:focus,input[type=password]:focus {
	font-family:"Plex", Courier, sans;
	font-size:13px;
	box-shadow:0;
	outline: none;
	box-shadow: 0px 0px 4px 0 #00B7D8;
}
input[type=submit],input[type=button] {
	background:#0c5a80;
	color:#FFF;
	padding:3px;
	min-width:120px;
	font-family:"Plex", Courier, sans;
	font-size: 14px;
	border:0;
	border-radius:12px;
	-moz-border-radius:12px;
	-webkit-border-radius:12px;
	margin:4px auto;
	margin-right: 8px !important;
	cursor:pointer;
	box-shadow: 2px 2px 4px 0 rgba(0,0,0,.2),
	           -2px -2px 4px 0 rgba(255,255,255,.05);
}
input[type=submit]:active,input[type=button]:active {
	background:#0088A0;
	-moz-box-shadow:    inset 1px 1px 2px rgba(0,0,0,.2);
	-webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,.2);
	box-shadow:         inset 1px 1px 2px rgba(0,0,0,.2);
}


input[type=file] {
	font-family:"Plex", Courier, sans;
	font-size:13px;
	font-size: 14px;
}
.dropdown {
	font-family:"Plex", Courier, sans;
	font-size:13px;
	width:170px;
	text-align:right;
}
textarea {
	border: 0;
}
textarea:focus, textarea:active {
	box-shadow: 0px 0px 4px 0 #00B7D8;
	border: 0;
}

/*------------------------------------*\
    Tabellen
\*------------------------------------*/

table.grid {
	border-collapse: collapse;
	width:100%;
} 
table.grid td {
	cursor: pointer;
	white-space: nowrap;
	border-bottom: 1px solid rgba(255,255,255,.1);
	border-right: 1px solid rgba(255,255,255,.1);
}
table.grid td:last-child {
	border-right:none;
}
table.grid td.gridtitle {
	cursor: none;
	white-space: nowrap;
	background: rgba(50,50,50,.3);
}
tr.gridtitle {
	border-radius:4px 4px 0px 0px;
	color: rgba(50,50,50,.3);
	font-size:9px !important;
	cursor:auto;
}
tr.gridtitle td {
	font-size:12px !important;
	padding:2px;
	cursor:auto;
}
td {
	padding:1px 0 1px 2px;
}
td:last-child {
	padding:1px;
}
tr img {
	max-height:16px;
}
.selectedRow td {
	background: rgba(18,137,194,.3) !important;
}

/*------------------------------------*\
    select box
\*------------------------------------*/

.simpleSelect {
	position: relative;
	float: left;
	font-size: 14pt;
	line-height: 12pt;
	height: 20px;
}
.simpleSelect:nth-child(n+2):before {
	content:".";
	margin: 0 1px 0 -4px;
	font-size: 13px;
}
.simpleSelect {
  position: relative;
  margin-right: 6px;
}
.simpleSelect select {
  width:100%;
  height:100%;
	padding: 0px 16px 2px 4px;
	-moz-padding: 0px 14px 0px 2px;
	background: #0c5a80;
	color: #FFF;
	border: 1px solid #1f5a68;
	-moz-border: 0px solid #1f5a68;
	display: inline-block;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none;
	cursor: pointer;
	outline: none;
	background-image: url('../img/arrowdown70.png');
	background-position: right center;
	background-repeat: no-repeat;
	background-size: 14px 12px;
	border-radius: 8px;
	box-shadow: 2px 2px 4px 0 rgba(0,0,0,.15),
	           -2px -2px 4px 0 rgba(255,255,255,.05);
}
.simpleSelect select:hover {
	background-image: url('../img/arrowdown.png');
}
}
.simpleSelect select:-moz-focusring {
	color: transparent;
	text-shadow: 0 0 0 #444;
}
.simpleSelect select::-ms-expand {
	display: none;
}

/*.simpleSelect:after {
  content: "^";
  font-weight: 600;
  position: absolute;
  right: 3px;
  top:0px;
  transform: rotate(180deg);
}*/

.material-icons {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}

/*------------------------------------*\
    id's
\*------------------------------------*/

#nummernblock {
	background: #ccc
}
#nummern {
	height:100%;
	max-width:1110px;
	width:100%;
	margin-right:12px;
	display:inline-block;
}
#dialplan {
	height:230px;
	margin-right:10px;
}
.groupbox #dialplan {
	display:inline-block;
}
#glob_dialplan {
	height:467px;
	width:855px;
	margin-right:10px;
	margin-top:0px;
}
#tabelle {
	width:105%;
	height:160px;
}
#tabelle td {
	font-size:11px;
	padding:1px 0px 1px 2px;
}
#tabelle tr {
	background:#FFF;
	background: rgba(50,50,50,.5);
}
#einstellungen {
	min-width:582px;
	min-height:308px;
	display:flow-root;
}
#provisioning {
    min-width:700px;
    min-height:675px;
    float: left;
}
#ringer {
   width:1080px;
}
#ringerglob {
   width:1075px;
}
div.fullwithd {
	width:100%;
}
.width300 {
	max-width:300px;
}
.width292 {
	min-width:292px;
}
div.width210 {
	max-width:210px !important;
}
#datagrid {
	border:1px solid #444;
	border-radius: 0px;
	background: rgba(30,30,30,.5);
	width: 380px;
	height: 482px;
	box-shadow: -2px -2px 5px rgba(255,255,255,.05), 2px 2px 5px rgba(0,0,0,.2);
}
#datagridMusik {
	width: 240px;
	height: 390px;
}

/*------------------------------------*\             
    OTHER
\*------------------------------------*/  
.green {                                              
        color: #A5D050;    
}                                  
.red {                                            
        color: red;                
}
.list td {
	color: #000000;
}
.pingtitle {
	color: #ffffff;
}
/*------------------------------------*\
    RESPONSIVE
\*------------------------------------*/

@media screen and (max-width:1250px) {

	.pingBox {
		left: 30px;
	}
}
@media screen and (max-width:945px) {

	.pingBox {
		left: 10px;
		right: 10px;
		width: auto;
		overflow-x:auto;
	}

}