:root {
	--border: #cccccc;
	--border-light: #eeeeee;
	--border-dark: #d0d0d0;
	--background-white: #fff;
	--background: #e9ece5; /* main bg */
	--background2: #f4f4f4; /* list odd */
	--background3: #e0e0e0;
	--background4: #f8f8f8; /* tab-pane */
	--text-black: #000;
	--text-white: #fff;
	--text-grey-light: #aaa;
	--text-grey: #888;
	--text-grey-dark: #555;
	--text-headline: #2070B0;
	--text-dark: #333;
	--text-link: #3b3a36;
	--text-link-hover: #2b2923;
	--text-red: red;
	--text-green: green;
	--text-blue: #2070B0;
	--background-gradient-gray: linear-gradient(to bottom, #ffffff 0%, #e0e0e0 100%);
	--background-gradient-gray2: linear-gradient(to bottom, #f8f8f8 0%, #e0e0e0 100%);
	--background-gradient-gray-hover: linear-gradient(to bottom, #e0e0e0 0%, #e0e0e0 100%);
	--background-gradient-gray-disabled: linear-gradient(to bottom, #eee 0%, #eee 100%);
	--background-gradient-panel-heading: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
	--background-gradient-list-group: linear-gradient(to bottom, #d9edff 0%, #b9deff 100%);
	--background-disabled: #eaeaea;

	--success-border: #6eaf6e;
	--success-background: linear-gradient(to bottom, #8cd88c 0%, #71B671 100%);
	--info-background: linear-gradient(to bottom, #9bd0de 0%, #6abbd2 100%);
	--info-border: #68b4c9;
	--warning-background: linear-gradient(to bottom, #f0cd8e 0%, #fbb356 100%);
	--warning-border: #f3ad53;
	--danger-background: linear-gradient(to bottom, #f9837f 0%, #e15e5a 100%);
	--danger-border: #d95c58;
	--success-background-hover: #7cd07c;
	--info-background-hover: #6abbd2;
	--warning-background-hover: #fbb356;
	--danger-background-hover: #e15e5a;
	
	--text-tabheader-dim: #607080e6;
	--background-list-green: linear-gradient(to bottom, #dff0d8 0%, #c8e5bc 100%);
	--background-list-green-border: #b2dba1;
	--background-list-green-hover: linear-gradient(to bottom, #cff0c8 0%, #b8e5ac 100%);
	--background-list-green-hover-border: #b2dba1;
	--background-list-blue: linear-gradient(to bottom, #d9edf7 0%, #b9def0 100%);
	--background-list-blue-border: #9acfea;
	--background-list-blue-hover: linear-gradient(to bottom, #c9ddf7 0%, #a9cef0 100%);
	--background-list-blue-hover-border: #9acfea;
	--background-list-yellow: linear-gradient(to bottom, #fcf8e3 0%, #f8efc0 100%);
	--background-list-yellow-border: #f5e79e;
	--background-list-yellow-hover: linear-gradient(to bottom, #fcf8d3 0%, #f8efb0 100%);
	--background-list-yellow-hover-border: #f5e79e;
	--background-list-red: linear-gradient(to bottom, #f2dede 0%, #e7c3c3 100%);
	--background-list-red-border: #dca7a7;
	--background-list-red-hover: linear-gradient(to bottom, #e2cece 0%, #d7b3b3 100%);
	--background-list-red-hover-border: #dca7a7;
	--background-list-grey: linear-gradient(to bottom, #f0f0f0 0%, #e5e5e5 100%);
	--background-list-grey-border: #dbdbdb;
	--background-list-grey-hover: linear-gradient(to bottom, #e0e0e0 0%, #d5d5d5 100%);
	--background-list-grey-hover-border: #dbdbdb;
	--background-list-grey-listtop2: linear-gradient(to bottom, #e0e0e0 0%, #d5d5d5 100%);
	--background-grey-flat: linear-gradient(to top, #eee 0%, #eee 100%);
	--background-red-flat: linear-gradient(to bottom, #f2dede 0%, #f2dede 100%);

	--presence-available: #7EC67E;
	--presence-busy: #ED716D;
	--presence-out-of-office: #F5C072;
	--presence-off-work: #86C7D9;
	--presence-holiday: #86C7D9;
}

@media (prefers-color-scheme: dark) {
	:root {
		--border: #303030;
		--border-light: #5e5e5e;
		--border-dark: #404040;
		--background-white: #000;
		--background: #1c1c1c; /* main bg */
		--background2: #0c0c0c; /* list odd */
		--background3: #303030;
		--background4: #101010; /* tab-pane */
		--text-black: #eee;
		--text-white: #000;
		--text-grey-light: #777;
		--text-grey: #606868;
		--text-grey-dark: #bbb;
		--text-headline: #3475ab;
		--text-dark: #ddd;
		--text-link: #e0dccd;
		--text-link-hover: #f0ecdd;
		--text-red: red;
		--text-green: green;
		--text-blue: #5b9fd7;
		--background-gradient-gray: linear-gradient(to bottom, #2e2e2e 0%, #1a1a1a 100%); /*linear-gradient(to bottom, #ffffff 0%, #e0e0e0 100%);*/
		--background-gradient-gray2: linear-gradient(to bottom, #202020 0%, #1a1a1a 100%); /*linear-gradient(to bottom, #f8f8f8 0%, #e0e0e0 100%);*/
		--background-gradient-gray-hover: linear-gradient(to bottom, #252525 0%, #252525 100%);
		--background-gradient-gray-disabled: linear-gradient(to bottom, #181818 0%, #181818 100%);
		--background-gradient-panel-heading: linear-gradient(to bottom, #2e2e2e 0%, #1a1a1a 100%);
		--background-gradient-list-group: linear-gradient(to bottom, #495d7f 0%, #294e7f 100%);
		--background-disabled: #333333;

		--success-border: #4e8f4e;
		--success-background: linear-gradient(to bottom, #4c984c 0%, #317631 100%);
		--info-background: linear-gradient(to bottom, #5b909e 0%, #2a7b92 100%);
		--info-border: #4894a9;
		--warning-background: linear-gradient(to bottom, #b08d4e 0%, #bb7316 100%);
		--warning-border: #d38d33;
		--danger-background: linear-gradient(to bottom, #d9635f 0%, #c13e3a 100%);
		--danger-border: #b93c38;
		--success-background-hover: #216621;
		--info-background-hover: #0a6b82;
		--warning-background-hover: #ab6306;
		--danger-background-hover: #b12e2a;
			
		--text-tabheader-dim: #c3c3c3e6;
		--background-list-green: linear-gradient(to bottom, #377038 0%, #38753c 100%);
		--background-list-green-border: #b2dba1;
		--background-list-green-hover: linear-gradient(to bottom, #278028 0%, #28852c 100%);
		--background-list-green-hover-border: #b2dba1;
		--background-list-blue: linear-gradient(to bottom, #3f4f77 0%, #304070 100%);
		--background-list-blue-border: #1f2f57;
		--background-list-blue-hover: linear-gradient(to bottom, #2f3f87 0%, #203080 100%);
		--background-list-blue-hover-border: #1f2f97;
		--background-list-yellow: linear-gradient(to bottom, #454500 0%, #353500 100%);
		--background-list-yellow-border: #f5e79e;
		--background-list-yellow-hover: linear-gradient(to bottom, #555500 0%, #555500 100%);
		--background-list-yellow-hover-border: #f5e79e;
		--background-list-red: linear-gradient(to bottom, #723f3f 0%, #773030 100%);
		--background-list-red-border: #dca7a7;
		--background-list-red-hover: linear-gradient(to bottom, #822f2f 0%, #872020 100%);
		--background-list-red-hover-border: #dca7a7;
		--background-list-grey: linear-gradient(to bottom, #303030 0%, #202020 100%);
		--background-list-grey-border: #101010;
		--background-list-grey-hover: linear-gradient(to bottom, #404040 0%, #303030 100%);
		--background-list-grey-hover-border: #101010;
		--background-list-grey-listtop2: linear-gradient(to bottom, #303030 0%, #252525 100%);
		--background-grey-flat: linear-gradient(to top, #444 0%, #444 100%);
		--background-red-flat: linear-gradient(to bottom, #f23030 0%, #f23030 100%);

		--presence-available: #5EA65E;
		--presence-busy: #CD514D;
		--presence-out-of-office: #D5A052;
		--presence-off-work: #66A7B9;
		--presence-holiday: #66A7B9;
	}
	.btn-big {
		background-image: var(--background-gradient-gray);
		border-color: var(--border);
		text-shadow: var(--background-white);
	}
	.btn-big:hover {
		box-shadow: 0px 0px 8px rgba(255,255,255,0.2) !important;
		background-position: 0 0;
		border-color: var(--border-dark);
	}
	.btn-default {
		background-image: var(--background-gradient-gray);
		border-color: var(--border) !important;
		text-shadow: var(--background-white);
		color: var(--text-dark);
	}
	.btn-default:hover {
		border-color: var(--border-dark) !important;
	}
	.navbar-default {
		background-image: linear-gradient(to bottom, var(--background4) 0%, var(--background2) 100%) !important;
		border-color: var(--border) !important;
	}
	.bc {
		background-color: var(--background4) !important;
		border-top: 1px solid var(--border-light) !important;
		box-shadow: 1px 3px 10px rgba(255, 255, 255, 0.2) !important;
	}
	.bc-user {
		background-color: var(--background4) !important;
		border-top: 1px solid var(--border-light) !important;
		box-shadow: 1px 3px 10px rgba(255, 255, 255, 0.2) !important;
	}
	.dropdown-menu {
		background-color: var(--background4) !important;
		border-color: var(--border) !important;
	}
	.dropdown-menu > li > a {
		color: var(--text-black);
	}
	.navbar-default .navbar-nav > .open > a {
		background-image: var(--background4) !important;
		background-color: var(--background4) !important;
		color: var(--text-black) !important;
	}
	.dropdown-menu > li > a:hover {
		background-image: linear-gradient(to bottom, var(--background3) 0%, var(--background3) 100%) !important;
		color: var(--text-black) !important;
	}
	.btn-default:hover, .btn-default:focus {
		background-position: 0 0;
		color: var(--text-black);
		background-image: var(--background-gradient-gray-hover);
	}

	.btn-default:active, .btn-default.active {
		background-color: var(--background3) !important;
	}
	.modal-content {
		box-shadow: 0 0 100px rgba(255, 255, 255, 0.3) !important;
		border: 1px solid var(--border-light) !important;
	}
	
	.alert-info {
		background-image: linear-gradient(to bottom, #3b707e 0%, #0a5b72 100%);
		border-color: #287489;
		color: #9bdcff !important;
	}

	.alert-warning {
		background-image: linear-gradient(to bottom, #906d2e 0%, #9b5306 100%);
		border-color: #b36d13;
		color: #fed7a1;
	}

	.alert-danger {
		background-image: linear-gradient(to bottom, #b9433f 0%, #a11e1a 100%);
		border-color: #991c18;
		color: #fdafaf;
	}

	.alert-success {
		background-image: linear-gradient(to bottom, #2c782c 0%, #115611 100%);
		border-color: #2e6f2e;
		color: #b5ffb5;
	}

	.bg-grey-listtop {
		background-image: linear-gradient(to bottom, #1c1c1c 0%, #101010 100%) !important;
	}

	.login-logo {
		background: linear-gradient(to bottom, #888 0%, #777 100%) !important;
	}

	.btn-info { text-shadow: 1px 1px 2px #aaa !important }
	.btn-warning { text-shadow: 1px 1px 2px #aaa !important; }
	.btn-danger { text-shadow: 1px 1px 2px #aaa !important; }
	.btn-success { text-shadow: 1px 1px 2px #aaa !important; }

	.progress {
		background-image: linear-gradient(to bottom, #505050 0%, #585858 100%);
	}

	.table > tbody + tbody {
		border-top: 2px solid var(--border-light) !important;
	}

	a.list-group-item:hover, button.list-group-item:hover, a.list-group-item:focus, button.list-group-item:focus {
		background-color: #384147;
	}

	.panel-footer {
		background-color: var(--background3) !important;
	}

	.list-group-item-icon {
		color: var(--text-dark) !important;
	}

	.text-muted {
		color: var(--text-grey) !important;
	}

	.navbar-brand {
		background-image: linear-gradient(to right, #aaa 25%, #000000 100%) !important;
	}

}

/* new */

.table-striped > tbody > tr:nth-of-type(odd) {
	background-color: var(--background3);
}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
	/* border: 1px solid var(--border-dark); */
	border-color: var(--border-light) var(--border-light) var(--border-dark);
}
.nav-tabs {
	border-bottom: 1px solid var(--border-dark);
}
.form-control {
	color: var(--text-grey-dark);
	background-color: var(--background-white);
	border: 1px solid var(--border);
}
.panel-default > .panel-heading {
	background-image: var(--background-gradient-panel-heading);
	color: var(--text-dark);
	border-color: var(--border-dark);
}

.panel-default {
	border-color: var(--border-dark);
}

a.list-group-item, button.list-group-item {
	color: var(--text-grey-dark);
}

a.list-group-item:hover, button.list-group-item:hover, a.list-group-item:focus, button.list-group-item:focus {
	color: var(--text-grey-dark);
}

.modal-content {
	background-color: var(--background-white);
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
	border: 1px solid rgba(0, 0, 0, 0.2);
}

.input-group-addon {
	color: var(--text-grey-dark);
	background-color: var(--background3);
	border: 1px solid var(--border);
}

.btn-default.disabled, .btn-default[disabled], fieldset[disabled] .btn-default, .btn-default.disabled:hover, .btn-default[disabled]:hover, fieldset[disabled] .btn-default:hover, .btn-default.disabled:focus, .btn-default[disabled]:focus, fieldset[disabled] .btn-default:focus, .btn-default.disabled.focus, .btn-default[disabled].focus, fieldset[disabled] .btn-default.focus, .btn-default.disabled:active, .btn-default[disabled]:active, fieldset[disabled] .btn-default:active, .btn-default.disabled.active, .btn-default[disabled].active, fieldset[disabled] .btn-default.active {
	background-color: var(--background3);
	border-color: var(--border-dark);
	text-shadow: none;
}

.table-bordered {
	border: 1px solid var(--border-dark);
}

.table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {
	border: 1px solid var(--border-dark);
}

.btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default {
	color: var(--text-dark);
	background-color: var(--background);
	text-shadow: none;
}

.btn-default:active:hover, .btn-default.active:hover, .open > .dropdown-toggle.btn-default:hover, .btn-default:active:focus, .btn-default.active:focus, .open > .dropdown-toggle.btn-default:focus, .btn-default:active.focus, .btn-default.active.focus, .open > .dropdown-toggle.btn-default.focus {
    color: var(--text-dark);
    background-color: var(--background3);
}

.well {
	background-image: linear-gradient(to bottom, var(--background3) 0%, var(--background2) 100%);
	border-color: var(--border-dark);
}

.panel {
	background-color: var(--background-white);
}

.panel-shadow {
	margin-top: 6px;
	box-shadow: 0px 5px 10px var(--background3);
}


.text-red { color: var(--text-red); }
.text-grey-mid { color: var(--text-grey); }
.text-grey-dark { color: var(--text-grey-dark); }
.text-black { color: var(--text-black) !important; }
.text-white { color: var(--text-white) !important; }
.text-grey  { color: var(--text-grey-light) !important; }
.text-green { color: var(--text-green); }
.text-blue { color: var(--text-blue); }
.background-even { background-color: var(--background2); }
.background-odd { background-color: var(--background-white); }
.italic { font-style: italic; }
.box-success { border-width: 1px; border-style: solid; border-color: var(--success-border); background: var(--success-background); border-radius: 5px; }
.line-through { text-decoration: line-through; }
.navbar-default {
	background-image: linear-gradient(to bottom, #e9ece5c4 0%, #dbe0d3c5 100%);
}

a { color: var(--text-link); }
a:hover, a:focus { color: var(--text-link-hover); }

/***** MISC UI FIXES *****/
/** .ng-animate-disabled to disable angular animation on an element */
.pm { border: 1px solid var(--text-black); }
.max50 { max-width: 50px; }
.max75 { max-width: 75px; }
.max85 { max-width: 85px; }
.max100 { max-width: 100px; }
.max110 { max-width: 110px; }
.max125 { max-width: 125px; }
.max150 { max-width: 150px; }
.max170 { max-width: 170px; }
.max185 { max-width: 185px; }
.max200 { max-width: 200px; }
.max250 { max-width: 250px; }
.max300 { max-width: 300px; }
.max400 { max-width: 400px; }
.max500 { max-width: 500px; }
.min50 { min-width: 50px; }
.min75 { min-width: 75px; }
.min100 { min-width: 100px; }
.min125 { min-width: 125px; }
.min150 { min-width: 150px; }
.min170 { min-width: 170px; }
.min175 { min-width: 175px; }
.min200 { min-width: 200px; }
.min550 { min-width: 250px; }
.min300 { min-width: 300px; }
.min400 { min-width: 400px; }
.min500 { min-width: 500px; }
.mr10 { margin-right: 10px; }
.ml20 { margin-left: 20px; }
.mlr0 { margin-left: 0 !important; margin-right: 0 !important; }
.h25 { height: 25px; }
.h50 { height: 50px; }
.h75 { height: 75px; }
.h100 { height: 100px; }
.h200 { height: 200px; }
.bold { font-weight: bold; }
.padlr2 { padding-left: 2px; padding-right: 2px; }
.padlr5 { padding-left: 5px; padding-right: 5px; }
.padlr10 { padding-left: 10px; padding-right: 10px; }
.padlr15 { padding-left: 15px !important; padding-right: 15px !important; }
.pad510 { padding: 5px 10px 5px 10px; }
@media (max-width: 767px) { .padlr5-xs { padding-left: 5px; padding-right: 5px; } }
@media (max-width: 767px) { .padlr11-xs { padding-left: 11px; padding-right: 11px; } }
.padlr0 { padding-left: 0; padding-right: 0; }
.padl5 { padding-left: 5px; }
.padb0 { padding-bottom: 0; }
.padb2 { padding-bottom: 2px; }
.padb5 { padding-bottom: 5px; }
.padt2 { padding-top: 2px; }
.padt7 { padding-top: 7px; }
.pad0 { padding: 0 !important; }
.pad0i { padding: 0 !important; }
.padr0 { padding-right: 0 !important; }
.padr0i { padding-right: 0 !important; }
.padr5 { padding-right: 5px; }
.padr15 { padding-right: 15px; }
.padr10 { padding-right: 10px; }
.pad3 { padding: 3px !important; }
.padtb5 { padding-top: 5px; padding-bottom: 5px; }
.padtb2 { padding-top: 2px !important; padding-bottom: 2px !important; }
.padtb3 { padding-top: 3px !important; padding-bottom: 3px !important; }
.padt12 { padding-top: 12px !important; }
.pad20 { padding: 20px !important; }
.pad15 { padding: 15px !important; }
.padt4 { padding-top: 4px !important; }
.padt5 { padding-top: 5px !important; }
.padl0 { padding-left: 0 !important; }
.margin0 { margin: 0; }
.margint0 { margin-top: 0;}
.margint3 { margin-top: 3px; }
.margint4 { margin-top: 4px; }
.margint7 { margin-top: 7px; }
.marginb7 { margin-bottom: 7px; }
.marginb10 { margin-bottom: 10px !important; }
.margint10 { margin-top: 10px; }
.margint12 { margin-top: 12px; }
.margintminus11 { margin-top: -11px; }
.margintminus8 { margin-top: -8px; }
.margintminus7 { margin-top: -7px; }
.margintminus6 { margin-top: -6px; }
.margintminus4 { margin-top: -4px; }
.margintminus1 { margin-top: -1px; }
.margintminus2 { margin-top: -2px; }
.marginb0 { margin-bottom: 0; }
.marginb2 { margin-bottom: 2px; }
.marginb5 { margin-bottom: 5px; }
.margintb0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.margintb2 { margin-top: 2px !important; margin-bottom: 2px !important; }
@media (min-width: 1200px) { .marginb0lg { margin-bottom: 0 } }
@media (min-width: 992px) and (max-width: 1199px) { .marginb0md { margin-bottom: 0 } }
.padt27 { padding-top: 27px !important; }
@media (max-width: 767px) { .padt27 { padding-top: 0px !important; } }
.padtb0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.marginr10 { margin-right:10px; }
.marginl10 { margin-left:10px; }
.center { text-align: center; }
.leftalign { text-align: left; }
.table-s { white-space: nowrap; width: 1%; } /* For making table cells as small as possible without wrapping text */
.table-changelog { font-size: 12px; margin-bottom: 0; }
.help-change { top: 55px; right: 5px; position: fixed; z-index: 101; }
.current-user { top: 56px; right: 100px; position: fixed; z-index: 101; text-align:right;line-height:10px;font-size:12px;color:var(--text-grey-light); }
.current-user i { font-size:21px;margin-top:-2px;padding-right:5px; }
.current-user div { text-align:left;max-width:250px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden; }
label small { color: var(--text-grey); }
@media (max-width: 767px) {
	.table-s { white-space: inherit; width: auto; }
	.nav > li > a { padding: 6px 6px; }
	.modal-dialog { margin: 2px; }
	.modal-body { padding-left: 5px; padding-right: 5px; }
	.tab-pane-box { box-shadow: 0 5px 10px var(--background) !important; padding: 5px !important; }
	.max100xs { max-width: 100px; }
	.w100xs { width: 100px !important; }
	.overflow-ellipsis-sm { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
}
@media (max-width: 900px) {
	.overflow-ellipsis-md { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
}
.display-block { display: block; }
.display-inline { display: inline-block; }
.overflow-ellipsis { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.overflow-ellipsis-cancel { text-overflow: ellipsis; white-space: normal; overflow: auto; }

.bordertest { border: 1px solid #f00; }
.pointer { cursor: pointer !important; }
.pointerwait { cursor: wait !important; }
.pointerdefault { cursor: default !important; }
.form-group-closer { margin-bottom: 5px; } /* used when checkboxes should be close together */
.form-group-closer:last-child { margin-bottom: 55px; }
.form-group > label:first-child { display:block; }  /* needed for checkboxes else label does not work */
.form-group > label > small { font-weight: normal; }
body {
	background-color: var(--background);
	color: var(--text-grey-dark);
}
label { margin-bottom: 0; }
.nowrap { white-space: nowrap; }
.panel-list-tag { margin-left: 5px; font-size: 13px; color: var(--text-grey-light); }
a:focus, button:focus { outline: none; } /* Remove dotted outline on IE */
button::-moz-focus-inner { border: 0; }
select::-ms-expand { display:none; } /* Removes down arrow on IE */
select { text-indent: 0.01px; text-overflow: ''; } /* Removes down arrow on FF */
@media (max-width: 900px) { .hidden-900 { display: none; } }
.visible-xxs { display: none !important; }
@media (max-width: 414px) { /* iPhone 7+ portait */
	.hidden-xxs { display: none; }
	.visible-xxs { display: block !important; }
}
.hidden-below-450 { display: block; }
@media (max-width: 450px) {
	.hidden-below-450 { display: none !important; }
}
.monospaced { font-family: monospace; }
.tright { text-align: right; }
.rotate90 { transform:rotate(90deg); }
.rotate135 { transform:rotate(135deg); }
.gi-call-idle:before { content: "\E443"; }
.gi-call-idle { transform:rotate(135deg); padding-bottom: 2px; }

.badge { font-weight: normal; letter-spacing: 0.7px;  }
.badge.listpad {
	margin-top: -5px;
	padding-left: 7px !important;
	padding-right: 7px !important;
	margin-right: 5px;
	box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
	font-weight: 500;
}
.badge.bolder { font-weight: 600; }
.smalltext { color: var(--text-grey); font-size: 10px; font-style: italic; }
.modal-body h4 { margin-bottom: 0; background-color: #f0f0f0; border-bottom: 1px solid #c0c0c0; padding: 2px; color: var(--text-headline); }

/* Searchbox */
.searchbox {
    margin-top: 5px;
    height: 25px;
    border-radius: 15px;
    width: 25px !important;
    padding-left: 10px;
    transition: width 0.5s ease-in;
}
.searchbox:focus {
    width: 225px !important;
    padding-left: 25px;
    transition: width 0.5s ease-out;
}
.searchboxsmall {
    height: 25px;
    border-radius: 15px;
    width: 25px !important;
    margin-top: 13px;
    margin-right: 10px;
    padding-left: 15px;
    display: inline-block;
    transition: width 0.5s ease-in;
}
.searchboxsmall:focus {
    width: 150px !important;
    padding-left: 25px !important;
    transition: width 0.5s ease-out;
}
.dropdown-menu { padding: 0; }
.dropdown-menu .divider { margin: 0; }
.searchresult { border-bottom: 1px solid var(--border); padding-left: 5px !important; }
.dropdown-menu > li > .searchresult > ul > li:first-child { font-size: 100%; color: var(--text-headline); }
.dropdown-menu > .active > .searchresult > ul > li:first-child { font-size: 100%; color: var(--text-white); }
.searchresult > ul > li { font-size: 80%; }
@media (min-width: 768px) and (max-width: 991px) {
    .pm-hidden-sm {
        height: 0%;
        opacity: 0;
        transition: height 0s linear 0.5s, opacity 0.5s linear;
    }
    .pm-visible-sm {
        height: 100%;
        opacity: 1;
        transition-delay: 1s;
    }
}

.modal-md {	width: 400px; }
.modal-inner-md > .modal-dialog { width: 400px; }
@media (max-width: 767px) {
	.modal-md { width: 100%; }
	.modal-inner-md > .modal-dialog { width: 100%; }
}

.modal-inner-lg > .modal-dialog { width: 750px; }
.modal-inner-lg-width { width: 750px; }
@media (max-width: 767px) {
	.modal-lg { width: 100%; }
	.modal-inner-lg > .modal-dialog { width: 100%; }
	.modal-inner-lg-width { width: 100%; }
}

.modal-sm {	width: 300px; }
.modal-inner-sm > .modal-dialog { width: 300px; }
@media (max-width: 767px) {
	.modal-sm { width: 100%; }
	.modal-inner-sm > .modal-dialog { width: 100%; }
}

.modal-inner-vlg > .modal-dialog { width: 1314px; }
.modal-inner-lg-width { width: 1314px; }
@media (max-width: 1340px) {
	.modal-inner-vlg > .modal-dialog { width: 98%; }
	.modal-inner-vlg-width { width: 98%; }
}

.modal-inner-mlg > .modal-dialog { width: 1200px; }
.modal-inner-lg-width { width: 1200; }
@media (max-width: 1200px) {
	.modal-inner-mlg > .modal-dialog { width: 98%; }
	.modal-inner-mlg-width { width: 98%; }
}

.modal-inner-full > .modal-dialog { width: 100%; }
.modal-inner-full-width { width: 100%; }
@media (max-width: 1340px) {
	.modal-inner-full > .modal-dialog { width: 98%; }
	.modal-inner-full-width { width: 98%; }
}

.center-block2 { display: table; margin: 0 auto; }
.no-items-found { display: table; margin: 20px auto; border-radius:10px; padding:5px; width:50%; font-weight: 500; font-size: 25px; background-color: var(--background); color: var(--text-black); text-align: center; }
.no-items-found-list { display: table; margin: 0 auto; border-radius:0; padding:4px; width:100%; font-weight: 500; font-size: 20px; color: var(--text-grey-light); text-align: center; }
.form-control.disabled { box-shadow: none; background: var(--background-disabled) !important; }
.btlr0 { border-top-left-radius: 0; }
.btrr0 { border-top-right-radius: 0; }
@media (max-width: 767px) {
	.xs-inline {
		display: inline !important;
	}
}
/* Fixes the panel header */
.panel-heading.heading-fixed {
	position: fixed;
	top: 79px;
	z-index: 99;
	background-repeat: repeat-x;
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
	padding-bottom: 4px;
	border-radius: 0;
}
.panel-heading.heading-fixed2 {
	position: fixed;
	top: 112px;
	z-index: 99;
	background-repeat: repeat-x;
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
	padding-bottom: 4px;
	border-radius: 0;
	height: 21px;
	padding-top: 6px;
	/*margin-top:6px*/
}
.panel-heading.heading-fixed + .list-group { margin-top: 40px; }
.panel-heading.heading-fixed2 + .list-group { margin-top: 40px; }
.panel-heading > div { margin-top:-6px; margin-left: 7px; }
.panel-heading-rightmost { margin-right: -10px; }
.filter-showing-label { padding-top: 4px; line-height: 12px; color:var(--text-grey); font-size: 11px; text-align: center; }

.panel-heading-new {
	background-image: var(--background-gradient-panel-heading);
	color: var(--text-dark);
	border-color: var(--border-dark);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 15px;
	width: 100%;
	gap: 5px;
}
.panel-heading-new div.flex {
	display: flex;
	align-items: center;
	width: max-content;
	flex-grow: 0;
	gap: 5px;
	flex-wrap: wrap;
}
/* Make sure last child aligns with end of container */
.panel-heading-new div.flex:last-child {
	flex-direction: row-reverse;
}

.panel-heading-sticky {
	position: sticky;
	top: 78px;
	z-index: 99;
	border-bottom: 1px solid var(--border);
}
.panel-heading-new div.flex.nowrap {
	flex-wrap: nowrap;
}

.panel-heading-new.heading-fixed {
	position: fixed;
	top: 79px;
	z-index: 99;
	background-repeat: repeat-x;
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
	padding-bottom: 4px;
	border-radius: 0;
}

/* Override bootstraps cursor so that disabled fields show a default pointer and safari text is the same as on other platforms */
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
	cursor: default;
	background-color: var(--background-disabled);
	border-color: var(--border);
	box-shadow: none;
	-webkit-text-fill-color: var(--text-grey-dark);
}

.unselectable {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* For making tabs look better, we put a box around the content */
.tab-pane-box {
	border-left: 1px solid var(--border);
	border-right: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
	padding: 10px;
	box-shadow: 5px 5px 10px var(--background);
	background-color: var(--background4);
}

.tab-pane-box2 {
	border-left: 1px solid var(--border);
	border-right: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
	padding: 10px;
	box-shadow: 5px 5px 10px var(--background);
	background-color: var(--background2);
}

/* For making tabs look better, we put a box around the content */
.tab-pane-box-with-top {
	border: 1px solid var(--border);
	padding: 10px;
	box-shadow: 5px 5px 10px var(--background);
	background-color: var(--background4);
}

/* handles when navigation tabs gets too wide */
.nav.nav-tabs {
	display: flex;
	width: 100%;
	overflow-x: scroll;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.nav.nav-tabs::-webkit-scrollbar {
	display: none;
}

.nav.nav-tabs > li > a {
	background-color: rgba(255,255,255,0.5);
	margin-top: 8px;
	margin-bottom: -8px;
	padding-top: 8px;
	height: 33px;
	transition: 0.2s;
}

.nav-tabs > li > a:hover {
	border-color: var(--border-light) var(--border-light) var(--border-dark);
}

.nav.nav-tabs > li.active > a {
	background-color: var(--background4);
	color: var(--text-black);
	box-shadow: 2px 2px 2px rgba(200, 200, 200, 0.25);
	margin-top: 0;
	margin-bottom: 0;
	height: 42px;
	padding-top: 10px;
	transition: 0.2s;
}

.nav.nav-tabs > li:not(.active) > a:hover {
	background-color: var(--background3);
	margin-top: 4px;
	margin-bottom: -4px;
	padding-top: 9px;
	height: 37px;
	transition: 0.2s;
	color: var(--text-black);
}

.nav.nav-tabs > li:not(.active) > a {
	background: linear-gradient(to bottom, var(--background3) 0%, var(--background4) 100%);
	color: var(--text-tabheader-dim);
}

/* For fixing breadcrumbs to the to of the screen */
.bc {
	padding-top: 1px;
	padding-bottom: 5px;
	height: 28px;
	line-height: 28px;
	overflow-x: hidden;
	overflow-y: hidden;
	margin-bottom: 0;
	border-radius: 0;
	font-size: 14px;
}

.bc > li i {
	padding-right: 5px;
}

.bc > li + li:before {
	padding: 0;
	color: var(--border);
	position: absolute;
	font-size: 40px;
	top: 0px;
	margin-left: -23px;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

/* Makes breadcrumb better on mobile devices */
@media (max-width: 767px) {
	.bc > li + li:before {
		text-shadow: 0 0 0;
		color: var(--border);

		font-size: 37px;
		top: inherit;
		margin-left: -13px;
		margin-top: -2px;
	}

	.bc {
		padding-left: 5px;

	}

	.bc > li {
		margin-right: 9px !important;
	}

	.bc > li i {
		padding-right: 2px;
	}
}

.bc > li {
	margin-right: 25px;
}

.bc > li > a {
	text-decoration: none;
	text-overflow: ellipsis;
}

/* for glyphicons in top nav menues */
.gi-space { padding-right: 10px; }
/* for glyphicons in list where a second icon augments the first */
.gi-second { border-radius: 50px;  margin-left:-6px; top:-5px; position:relative; font-size:10px; }

/* For improving spacing on page-header with H2 inside */
.page-header-main {
	margin: 0 0 20px;
	border-bottom: 1px solid var(--border-light);
	padding-bottom: 0;
}
.page-header-main .h2,
.page-header-main h2 {
	margin-bottom: 0;
}

/* For improving spacing on sub section header with H3 inside */
.page-header-sub {
	margin: 0 0 8px;
	border-bottom: 2px solid var(--border-dark);
	padding-bottom: 0;
}

.page-header-sub h3,
.page-header-sub .h3,
.page-header-sub h4,
.page-header-sub .h4 {
	margin-bottom:0;
	margin-top:0;
}

.page-header-sub h3,
.page-header-sub .h3 {
	color: var(--text-headline);
	text-shadow: 1px 1px 2px rgba(150, 150, 150, 0.20);
}

.page-header-sub.noline {
	border-bottom: 0;
	margin-bottom: 2px;
}

.page-header-sub span {
	color: var(--text-headline);
    text-shadow: 1px 1px 2px rgb(150 150 150 / 20%);
    font-size: 24px;
	font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
}

.list-group.list-settings > li {
	height: 40px;
	padding-top: 8px;
}

/* Fixing list groups for search results and generel lists */
.list-group-item-icon {
	font-size: 34px;
	padding-right: 10px;
	color: var(--text-grey);
	position: absolute;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

.list-group-item-icon.smaller i {
	font-size: 16px;
}

.list-group-item-icon.smaller {
	margin-top: -10px;
}

.list-group-item-icon-porting-zoom {
	font-size: 20px;
	color: var(--text-grey-light);
	transition: 200ms;
	margin-left: -10px;
	margin-top: -10px;
}

.list-group-item-icon-porting-nozoom {
	transition: 200ms;
}

a.list-group-item.active .list-group-item-icon,
a.list-group-item.active:hover .list-group-item-icon,
a.list-group-item.active:focus .list-group-item-icon {
	font-size: 38px;
	padding-right: 10px;
	color: #ddd;
}

.list-group-item-list {
	margin: 0;
	padding: 0;
	color: var(--text-grey);
}

a.list-group-item.active .list-group-item-list,
a.list-group-item.active:hover .list-group-item-list,
a.list-group-item.active:focus .list-group-item-list {
	margin: 0;
	padding: 0;
	color: #ddd;
}

.tablehover:hover,
a.list-group-item:hover,
a.list-group-item:focus {
	background-repeat: repeat-x;
	background-image: var(--background-gradient-list-group);
}

.list-group-item-hover:hover {
	background-repeat: repeat-x;
	background-image: var(--background-gradient-list-group) !important;
}

a.list-group-item-focus {
	background-repeat: repeat-x !important;
	background-image: var(--background-gradient-list-group) !important;
}

/* Alternative list items background to make them stand out */
.list-group-item:nth-of-type(even) {
	background: var(--background);
}

.list-group-item.narrow-padding {
	padding: 4px 8px 6px 8px !important;
}

.list-group-item.flex-space-between {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* A subheader - use together with */
.list-group-subheader {
	font-size: 85%;
	font-weight: bold;
	border: none;
	height: 25px;
	padding: 4px 10px 15px 16px;
}

.numbers-list-group {
	max-height: 327px;
	min-height: 25px;
	overflow-y: scroll;
}

.channels-list-group {
	max-height: 509px;
	min-height: 33px;
	overflow-y: scroll;
}

.sip-cdr-viewport {
	min-height: 0;
	max-height: 450px;
	overflow-y: scroll;
	width: 100%;
}

.product-destination-viewport {
	min-height: 34px;
	max-height: 400px;
	overflow-y: scroll;
}

.numbers-list-group::-webkit-scrollbar-track,
.channels-list-group::-webkit-scrollbar-track {
	background-color: var(--background3);
	border-left:1px solid var(--border);
	border-bottom-right-radius: 4px;
}

/* Ensures the scrollbar is visible in webkit browsers */
@media (min-width: 768px) {
	.sip-cdr-viewport::-webkit-scrollbar {
		-webkit-appearance: none;
		width: 7px;
	}

	.sip-cdr-viewport::-webkit-scrollbar-thumb {
		border-radius: 4px;
		background-color: rgba(0, 0, 0, 0.4);
		box-shadow: 0 0 1px rgba(255, 255, 255, .5);
	}

	.numbers-list-group::-webkit-scrollbar, .channels-list-group::-webkit-scrollbar {
		-webkit-appearance: none;
		width: 7px;
	}

	.numbers-list-group::-webkit-scrollbar-thumb, .channels-list-group::-webkit-scrollbar-thumb {
		border-radius: 4px;
		background-color: rgba(0,0,0,0.4);
		box-shadow: 0 0 1px rgba(255,255,255,.5);
	}
}

@media (max-width: 767px) {
	.numbers-list-group, .channels-list-group {
		min-height: 1px;
		max-height: none;
		overflow-y: auto;
	}

	.sip-cdr-viewport {
		min-height: 1px;
		max-height: none;
		overflow-y: auto;
	}

	.product-destination-viewport {
		min-height: 300px;
		max-height: none;
		overflow-y: auto;
	}
}


@media (max-width: 767px) {

	/* Fixing e.g. breadcrumbs so that they remain one lined and hide overflowing content */
	.list-inline > li {
		display: inline-block;
		padding-left: 0;
	}

	.list-inline { overflow-x: hidden; }

	/* maximize screen width on mobile phones */
	.container { padding: 0; }

	input[type="text"].form-control,
	input[type="tel"].form-control,
	input[type="number"].form-control,
	input[type="password"].form-control {
		padding-left: 5px;
		padding-right: 5px;
	}
}

/* Next 3 hides stuff on smaller screens and down */
@media (max-width: 767px) {

	/* fixes sideways scrolling on mobile */
	.row {
		margin-left: -11px;
		margin-right: -11px;
	}
}

/* File upload - make it pretty */
.fileUpload {
	position: relative;
	overflow: hidden;
}

.fileUpload input.upload {
	position: absolute;
	top: 0;
	right: 43px;
	left: 0;
	bottom: 0;
	margin: 0;
	padding: 0;
	font-size: 20px;
	cursor: pointer;
	opacity: 0.5;
	border: 1px solid #f00;
}

/* Fixes select dialogs so that they look pretty */
.newSelect {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	box-shadow: none;
	-webkit-padding-end: 25px;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background-image: url(../img/d22x6.png), var(--background-gradient-gray);
	background-position: center right;
	background-repeat: no-repeat;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding-right: 27px;
}

.newSelect:hover {
	background-image: url(../img/d22x6.png), var(--background-gradient-gray-hover);
}

.newSelect:disabled,
.newSelect:active:disabled,
.newSelect:focus:disabled,
.newSelect.active:disabled {
	background-image: url(../img/d22x6.png), var(--background-gradient-gray-disabled);
	opacity: 0.85;
}

.newSelect:active,
.newSelect:focus,
.newSelect.active {
	background-image: url(../img/d22x6.png), var(--background-gradient-gray);
}

.newSelect.input-sm {
	padding-top: 0;
	border-radius: 3px !important;
}

/* Bottom of page submit buttons - right aligned and full width on mobile */
.actionbuttons {
	float: right !important;
	margin-top: 5px;
	margin-bottom: 5px;
}

@media (max-width: 767px) {
	.actionbuttons {
		float: none !important;
		margin-top: 5px;
		margin-bottom: 5px;
		display: table;
		width: 100%;
		border-collapse: separate;
		table-layout: fixed;
	}

	.actionbuttons > button {
		/* min-width: inherit; */
		display: inline;
		float: none;
		width: 1%;
	}

	.actionbuttons > a .btn  {
		min-width: inherit;
		display: table-cell;
		float: none;
		width: 1%;
	}

}

.btn-group-list {
	display: flex;
}
.btn-group-list > .btn {
	flex-grow: 1;
	border-radius: 0;
	border-left: 0;
	border-top: 0;
	border-right: 2px solid var(--border) !important;
	border-bottom: 0;
	box-shadow: none;
}

.btn-group-list > .btn:last-child {
	border-right: 1px solid var(--border) !important;
}

/* makes ul lists (e.g. address details) with bullet between elements */
.list-bullet {
	padding-left: 41px;
	list-style: none;
	margin-bottom: 0;
}

.list-bullet > li {
	display: inline-block;
	font-size: 13px;
}

.list-bullet > li:after {
	content: ' \02022';
}

.list-bullet > li {
	padding-right: 0;
	padding-left:0;
}

.list-bullet > li:last-child:after {
	content: '';
}

.list-bullet > li:first-child:after {
	content: '';
}

.list-bullet > li:first-child {
	padding-left: 0;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 500;
	line-height: 1;
	margin-top: 2px;
	margin-bottom: 2px;
	font-size: 16px;
	display: block;
	color: var(--text-dark);
}

.list-bullet > li > i {
	padding-right: 3px;
}

/* makes generic lists (e.g. search, user etc.) */
.list-main {
	padding-left: 41px;
	list-style: none;
	margin-bottom: 0;
}

.list-main > li {
	display: inline-block;
	padding-right: 15px;
	padding-left: 0;
	font-size: 13px;
	/*overflow: hidden;*/
	/*text-overflow: ellipsis;*/
	/*white-space: nowrap;*/
}

.list-main > li:first-child {
	padding-left: 0;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 500;
	line-height: 1.11;
	margin-top: 2px;
	margin-bottom: 2px;
	font-size: 16px;
	display: block;
	color: var(--text-dark);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.list-main > li > i {
	padding-right: 3px;
}

.list-main2 > li > i {
	padding-right: 3px;
}

/* makes generic lists (e.g. search, user etc.) */
.list-main2 {
	padding-left: 50px;
	list-style: none;
	margin-bottom: 0;
}

.list-main2 > li {
	display: inline-block;
	padding-right: 15px;
	padding-left: 0;
	/*overflow: hidden;*/
	/*text-overflow: ellipsis;*/
	/*white-space: nowrap;*/
}

.list-main2 > li > i {
	padding-right: 3px;
}

.list-group-item {
	padding: 5px 10px;
	background-color: var(--background-white);
	border: 1px solid var(--border-dark);
}

/* The next 3 is for making a compact version of the list, used e.g. in porting status */
.list-group-sm > .list-group-item {
	padding-top: 2px;
	padding-bottom: 3px;
	font-size: 80%;
}

.list-group-sm > .list-group-item > .list-group-item-icon {
	font-size: 25px;
	padding-top: 2px;
}

.list-group-sm > .list-group-item > .list-group-item-icon2 {
	font-size: 25px;
	padding-top: 2px;
}

.list-group-sm > .list-group-item > .list-main {
	padding-left: 35px;
}

.list-group-sm > .list-group-item > .list-main.smaller {
	padding-left: 23px;
}

.list-inputs {
	list-style: none;
	margin-bottom: 0;
	padding-left: 0;
}

.list-inputs > li {
	display: block;
	padding-right: 15px;
	padding-left: 0;
	margin-bottom: 5px;
}

.list-inputs-inline {
	list-style: none;
	margin-bottom: 0;
	padding-left: 0;
}

.list-inputs-inline > li {
	display: inline-block;
	padding-right: 15px;
	padding-left: 0;
	margin-bottom: 5px;
}

/* Fixes list group headers so that they are clipped and ... - better on small devices */
.list-group-item-heading {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (max-width: 320px) {
	.list-group-item-heading {
		font-size: 15px;
	}
}

@media (max-width: 450px) {
	.table-fix-overflow {
		table-layout: fixed; 
		word-wrap: break-word;
	}
}


/* new Checkbox with bootstrap look'n'feel */
.newCheckbox {
	display: none;
}

.newCheckbox + label {
	background: var(--background-gradient-gray);
	border: 1px solid var(--border);
	/* box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0 -15px 10px -12px rgba(0,0,0,0.05); */
	/*padding: 9px;*/
	padding-left: 18px;
	padding-top: 1px;
	border-radius: 3px;
	display: inline;
	position: relative;
}

.newCheckbox + label:hover {
	background: var(--background3);
}

.newCheckbox + label:active, .newCheckbox:checked + label:active {
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0 1px 3px rgba(0,0,0,0.1);
}

.newCheckbox:checked + label {
	/* background-color: #e9ecee; */
	border: 1px solid var(--border);
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0 -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
	/* color: #99a1a7; */
}

.newCheckbox:checked + label:after {
	content: '\E207';
	font-size: 14px;
	font-weight: normal;
	position: absolute;
	top: 2px;
	left: 3px;
	color: var(--text-grey-dark);
	font-family: 'Glyphicons Regular';
	-webkit-font-smoothing: antialiased;
	font-style: normal;
	line-height: 1;
	-moz-osx-font-smoothing: grayscale;
}

.newCheckbox + label + label {
	font-weight: normal;
	padding-left: 5px;
	white-space: normal;
	line-height: 12px;
	position:absolute;
	padding-top:3px;
	padding-right:20px;
}

.newCheckbox:disabled + label,
.newCheckbox:checked:disabled + label {
	background: var(--background3);
	border: 1px solid var(--border);
	/* box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0 -15px 10px -12px rgba(0,0,0,0.0); */
}

.newCheckbox:disabled + label:after {
	color: var(--text-grey);
}

/* new radio with bootstrap look'n'feel */
.newRadio {
	display: none;
}

.newRadio + label {
	background: var(--background-gradient-gray);
	border: 1px solid var(--border);
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0 -15px 10px -12px rgba(0,0,0,0.05);
	padding-left: 18px;
	padding-top: 1px;
	border-radius: 50px;
	display: inline;
	position: relative;
}

.newRadio:checked + label:after {
	content: ' ';
	width: 12px;
	height: 12px;
	border-radius: 50px;
	position: absolute;
	top: 3px;
	background: #99a1a7;
	box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
	text-shadow: none;
	left: 3px;
	font-size: 32px;
}

.newRadio:checked + label {
	background: var(--background-gradient-gray);
	color: var(--text-grey-dark);
	border: 1px solid #adb8c0;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0 -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1), inset 0 0 10px rgba(0,0,0,0.1);
}

.newRadio + label:active, .newRadio:checked + label:active {
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0 1px 3px rgba(0,0,0,0.1);
}

.newRadio + label + label {
	font-weight: normal;
	padding-left: 5px;
}

.well-with-input {
	margin-bottom: 0;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	border-bottom: 0;
}
@media (min-width: 768px) {
	.number-list-height {
		height: 250px;
		overflow-y: auto;
	}
}

/* Generel help button */
.help-btn {
	font-size: 18px;
	color: var(--border);
	padding: 3px;
}

.help-btn:hover {
	color: var(--text-grey);
}

.help-dl dt {
	padding-top: 20px;
	color: var(--text-grey-dark);
}

.help-dl dt:first-of-type {
	padding-top: 0;
}

.help-dl dd {
	margin-left: 25px;
	color: var(--text-grey);
}

/* Fixes the modal to make it look better */
.modal-footer {
	padding: 6px 6px 6px;
	background: var(--background-gradient-gray2);
	border-radius: 0 0 6px 6px;
	border-top: 1px solid var(--border-dark);
}

.modal-footer .actionbuttons {
	padding: 0;
	margin: 0;
}

.modal-header {
	padding-top: 5px;
	padding-bottom: 5px;
	background: var(--background-gradient-gray2);
	border-radius: 6px 6px 0 0;
	border-bottom: 1px solid var(--border-dark);
}

/* Enables the use of an icon in alerts */
.alert i {
	font-size: 25px;
	float: left;
	margin-top: -5px;
	margin-right: 10px;
}

.alert span {
	display: table;
}

.alert span ul {
	padding-left: 20px;
	margin: 0;
}

/* Fixes the datepicker button so that a date cannot be picked for a disabled date */
.input-group.date .form-control:disabled ~ span {
	display: none;
}

.input-group.date .form-control:disabled {
	border-radius: 4px;
}

.btn-big {
	width: 100%;
	padding-bottom: 15px; /* 15 */
	padding-top: 20px; /* 20 */
	margin-bottom: 20px;
	font-weight: normal;
	color: var(--text-grey-dark);
	transition: color 0.5s, box-shadow 0.5s;
}

.btn-big:hover {
	box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
	color: var(--text-headline);
	transition: color 0.5s, box-shadow 0.5s;
}

.btn-big:hover i {
	color: var(--text-headline);
	text-shadow: 3px 3px 2px rgba(0,0,0,0.2);
	transition: color 0.5s, text-shadow 0.5s;
}

.btn-big i {
	font-size: 40px; /* 70 */
	color: var(--text-grey);
	/* color: #636056; */
	text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
	transition: color 0.5s, text-shadow 0.5s;
}

.btn-big.smaller {
	padding-bottom: 4px;
	padding-top: 11px;
}

@media (max-width: 767px) {
	.btn-big {
		width: 100%;
		padding-bottom: 4px;
		padding-top: 11px;
		margin-bottom: 10px;
		font-size: 80%;
	}

	.btn-big i {
		font-size: 38px;
		color: var(--text-grey);
		text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
	}
}

.btn-big > .pm-btn-info {
	color: #585;
}
.btn-big > span.pm-btn-info {
	margin-left: 5px;
	margin-right: 5px;
}
.btn-big > .pm-btn-info > i {
	font-size: 14px;
	color: #585;
	margin-right:5px;
}

.btn-big > .pm-btn-alert {
	color: #f00;
}
.btn-big > span.pm-btn-alert {
	margin-left: 5px;
	margin-right: 5px;
}
.btn-big > .pm-btn-alert > i {
	font-size: 14px;
	color: #f00;
	margin-right:5px;
}

.pm-btn-big {
	height: 130px;
}

@media (min-width: 768px) {
	.pm-80-not-xs {
		width: 80%;
	}
}

@media (max-width: 767px) {
	.btn-big > span.pm-btn-info {
		margin-left: 1px;
		margin-right: 1px;
	}
	.btn-big > .pm-btn-info > i {
		margin-right:3px;
	}
	.pm-btn-xs-pad {
		padding-left: 5px;
		padding-right: 5px;
	}
	.pm-btn-xs-row {
		margin-left: 0;
		margin-right: 0;
	}
	.pm-btn-big {
		height: 108px;
	}
}


.btn-sm2 {
	padding: 2px 7px;
	font-size: 12px;
	line-height: 1.5;
	border-radius: 3px;
}

.btn-sm2 .glyphicons {
	font-size: 12px;
	line-height: 1.5;
	margin-top: -2px;
	margin-right: 5px;
}

.btn-sm3 {
	padding: 2px 7px;
	font-size: 12px;
	line-height: 1.5;
	border-radius: 3px;
}

.btn-sm3 .glyphicons {
	font-size: 12px;
	line-height: 1.5;
	margin-top: -2px;
	margin-right: 2px;
	margin-left: 2px;
}

.btn-sm4 {
	padding: 2px 10px;
	font-size: 14px;
	line-height: 1.5;
	border-radius: 3px;
}

.btn-sm3 .glyphicons {
	font-size: 12px;
	line-height: 1.5;
	margin-top: -2px;
	margin-right: 2px;
	margin-left: 2px;
}


/* Background colors for lists */
.bg-green, .bg-green-nb, .bg-green-nb-nohover {
	background-image: var(--background-list-green) !important;
	background-repeat: repeat-x !important;
}

.bg-green {
	border-color: var(--background-list-green-border) !important;
}

.bg-blue, .bg-table-hover:hover {
	border-color: var(--background-list-blue-border) !important;
}
.bg-blue, .bg-table-hover:hover, .bg-blue-nb, .bg-blue-nb-nohover {
	background-image: var(--background-list-blue) !important;
	background-repeat: repeat-x !important;
}

.bg-yellow {
	border-color: var(--background-list-yellow-border) !important;
}

.bg-yellow, .bg-yellow-nb, .bg-yellow-nb-nohover {
	background-image: var(--background-list-yellow) !important;
	background-repeat: repeat-x !important;
}

.bg-red {
	border-color: var(--background-list-red-border) !important;
}

.bg-red, .bg-red-nb, .bg-red-nb-nohover {
	background-image: var(--background-list-red) !important;
	background-repeat: repeat-x !important;
}

.bg-grey, .bg-grey-no-hover, .bg-grey-no-hover:hover {
	border-color: var(--background-list-grey-border) !important;
}

.bg-grey, .bg-grey-nb, .bg-grey-nb-nohover, .bg-grey-no-hover, .bg-grey-no-hover:hover, .bg-grey-listtop {
	background-image: var(--background-list-grey) !important;
	background-repeat: repeat-x !important;
}

.bg-grey-listtop2 {
	background-image: var(--background-list-grey-listtop2) !important;
	background-repeat: repeat-x !important;
}

.bg-green:hover {
	border-color: var(--background-list-green-hover-border) !important;
}

.bg-green:hover, .bg-green-nb:hover {
	background-image: var(--background-list-green-hover) !important;
	background-repeat: repeat-x !important;
}

.bg-blue:hover {
	border-color: var(--background-list-blue-hover-border) !important;
}

.bg-blue:hover, .bg-blue-nb:hover {
	background-image: var(--background-list-blue-hover) !important;
	background-repeat: repeat-x !important;
}

.bg-yellow:hover {
	border-color: var(--background-list-yellow-hover-border) !important;
}

.bg-yellow:hover, .bg-yellow-nb:hover {
	background-image: var(--background-list-yellow-hover) !important;
	background-repeat: repeat-x !important;
}

.bg-red:hover {
	border-color: var(--background-list-red-hover-border) !important;
}

.bg-red:hover, .bg-red-nb:hover {
	background-image: var(--background-list-red-hover) !important;
	background-repeat: repeat-x !important;
}

.bg-grey:hover {
	border-color: var(--background-list-grey-hover-border) !important;
}

.bg-grey:hover, .bg-grey-nb:hover {
	background-image: var(--background-list-grey-hover) !important;
	background-repeat: repeat-x !important;
}

.bg-grey-flat {
	background-image: var(--background-grey-flat) !important;
}

.bg-red-flat {
	background-image: var(--background-red-flat) !important;
	background-repeat: repeat-x !important;
}

/* Please wait spinner */
div.spinner {
	position: relative;
	width: 54px;
	height: 54px;
	display: inline-block;
}

div.spinner div {
	width: 12%;
	height: 26%;
	background: var(--text-black);
	position: absolute;
	left: 44.5%;
	top: 37%;
	opacity: 0;
	-webkit-animation: fade 1s linear infinite;
	animation: fade 1s linear infinite;
	border-radius: 50px;
	box-shadow: 0 0 3px rgba(0,0,0,0.2);
}

div.spinner div.bar1 {
	-webkit-transform:rotate(0deg) translate(0, -142%);
	-webkit-animation-delay: 0s;
	transform:rotate(0deg) translate(0, -142%);
	animation-delay: 0s;
}
div.spinner div.bar2 {
	-webkit-transform:rotate(30deg) translate(0, -142%);
	-webkit-animation-delay: -0.9167s;
	transform:rotate(30deg) translate(0, -142%);
	animation-delay: -0.9167s;
}
div.spinner div.bar3 {
	-webkit-transform:rotate(60deg) translate(0, -142%);
	-webkit-animation-delay: -0.833s;
	transform:rotate(60deg) translate(0, -142%);
	animation-delay: -0.833s;
}
div.spinner div.bar4 {
	-webkit-transform:rotate(90deg) translate(0, -142%);
	-webkit-animation-delay: -0.75s;
	transform:rotate(90deg) translate(0, -142%);
	animation-delay: -0.75s;
}
div.spinner div.bar5 {
	-webkit-transform:rotate(120deg) translate(0, -142%);
	-webkit-animation-delay: -0.667s;
	transform:rotate(120deg) translate(0, -142%);
	animation-delay: -0.667s;
}
div.spinner div.bar6 {
	-webkit-transform:rotate(150deg) translate(0, -142%);
	-webkit-animation-delay: -0.5833s;
	transform:rotate(150deg) translate(0, -142%);
	animation-delay: -0.5833s;
}
div.spinner div.bar7 {
	-webkit-transform:rotate(180deg) translate(0, -142%);
	-webkit-animation-delay: -0.5s;
	transform:rotate(180deg) translate(0, -142%);
	animation-delay: -0.5s;
}
div.spinner div.bar8 {
	-webkit-transform:rotate(210deg) translate(0, -142%);
	-webkit-animation-delay: -0.41667s;
	transform:rotate(210deg) translate(0, -142%);
	animation-delay: -0.41667s;
}
div.spinner div.bar9 {
	-webkit-transform:rotate(240deg) translate(0, -142%);
	-webkit-animation-delay: -0.333s;
	transform:rotate(240deg) translate(0, -142%);
	animation-delay: -0.333s;
}
div.spinner div.bar10 {
	-webkit-transform:rotate(270deg) translate(0, -142%);
	-webkit-animation-delay: -0.25s;
	transform:rotate(270deg) translate(0, -142%);
	animation-delay: -0.25s;
}
div.spinner div.bar11 {
	-webkit-transform:rotate(300deg) translate(0, -142%);
	-webkit-animation-delay: -0.1667s;
	transform:rotate(300deg) translate(0, -142%);
	animation-delay: -0.1667s;
}
div.spinner div.bar12 {
	-webkit-transform:rotate(330deg) translate(0, -142%);
	-webkit-animation-delay: -0.0833s;
	transform:rotate(330deg) translate(0, -142%);
	animation-delay: -0.0833s;
}

@-webkit-keyframes fade {
	from {opacity: 1;}
	to {opacity: 0.25;}
}

@keyframes fade {
	from {opacity: 1;}
	to {opacity: 0.25;}
}

/* Next 3 if a fix because ng-class cannot handle - so we change dropdown-header to dropdownheader */
.dropdownheader {
	display: block;
	padding: 3px 20px;
	font-size: 12px;
	line-height: 1.428571429;
	color: var(--text-grey);
}
.navbar-nav .open .dropdown-menu .dropdownheader {
	padding: 0 15px 0 18px;
	cursor: default;
}
@media (max-width: 767px) {
	.navbar-inverse .navbar-nav .open .dropdown-menu > .dropdownheader {
		border-color: #080808;
	}
}

.nav, .pagination, .carousel, .panel-title a { cursor: pointer; }

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

input[type=number] {
	-moz-appearance: textfield;
	appearance: textfield;
}

.form-control.ng-invalid.ng-dirty {
	border-color: #a94442;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}

.form-control.ng-invalid.ng-dirty:focus {
	border-color: #843534;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
}

.form-control.ng-invalid-countrycodes {
	border-color: #a94442;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}


.spin {
	-webkit-animation-name: spin;
	-webkit-animation-duration: 2500ms;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-ms-animation-name: spin;
	-ms-animation-duration: 2500ms;
	-ms-animation-iteration-count: infinite;
	-ms-animation-timing-function: linear;
	-moz-animation-name: spin;
	-moz-animation-duration: 2500ms;
	-moz-animation-iteration-count: infinite;
	-moz-animation-timing-function: linear;
	animation-name: spin;
	animation-duration: 2500ms;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

@-webkit-keyframes spin {
	from { -webkit-transform: rotate(0deg); }
	to { -webkit-transform: rotate(360deg); }
}
@-ms-keyframes spin {
	from { -ms-transform: rotate(0deg); }
	to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
	from { -ms-transform: rotate(0deg); }
	to { -ms-transform: rotate(360deg); }
}
@keyframes spin {
	from { transform:rotate(0deg); }
	to { transform:rotate(360deg); }
}

.leftline { border-left: 1px solid var(--border-light); }
.leftline2 { border-left: 1px solid var(--border); }
.rightline { border-right: 1px solid var(--border-light); }
.bottomline { border-right: 1px solid var(--border-light); }

@media (max-width: 767px) {
	.leftline { border-left: none; }
	.leftline-xs { border-left: 1px solid var(--border); }
	.rightline-xs { border-right: 1px solid var(--border); }
	.bottomline-xs { border-right: 1px solid var(--border); }
}

@media (min-width: 768px) {
	.leftline-sm { border-left: 1px solid var(--border); }
	.rightline-sm { border-right: 1px solid var(--border); }
	.bottomline-sm { border-right: 1px solid var(--border); }
}

@media (min-width: 992px) {
	.leftline-md { border-left: 1px solid var(--border); }
	.rightline-md { border-right: 1px solid var(--border); }
	.bottomline-md { border-right: 1px solid var(--border); }
}

@media (min-width: 1200px) {
	.leftline-lg { border-left: 1px solid var(--border); }
	.rightline-lg { border-right: 1px solid var(--border); }
	.bottomline-lg { border-right: 1px solid var(--border); }
}

/* Used by sip account phone number list */
.phone-number-panel {
	border-bottom: 0;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

/* Fade content in when selecting a tab */
.pm-fade {
	animation: PM-FADE-ANIMATION 0.5s;
	-webkit-animation: PM-FADE-ANIMATION 0.5s;
	-moz-animation: PM-FADE-ANIMATION 0.5s;
	-o-animation: PM-FADE-ANIMATION 0.5s;
}

@-webkit-keyframes PM-FADE-ANIMATION {
	0%   { opacity: 0; }
	100% { opacity: 1; }
}

@-moz-keyframes PM-FADE-ANIMATION {
	0%   { opacity: 0; }
	100% { opacity: 1; }
}
@-o-keyframes PM-FADE-ANIMATION {
	0%   { opacity: 0; }
	100% { opacity: 1; }
}
@keyframes PM-FADE-ANIMATION {
	0%   { opacity: 0; }
	100% { opacity: 1; }
}

/* Used by directive pm-cloak and others */
.opa0 { opacity: 0; }
.opa02 { opacity: 0.2; }
.opa05 { opacity: 0.5; transition: 500ms; }
.opa07 { opacity: 0.7; }
.opa1 { opacity: 1; }
.opa1-on-hover:hover {
	opacity: 1 !important;
	transition: 1000ms;
}

.f11p { font-size: 10.5pt; }
.border1 { border: 1px; }

.visible-hover {
	visibility: hidden;
}
.visible-hover:hover {
	visibility: visible;
}

.input-addon-listfill {
	padding: 0 5px;
	border: 0;
	border-radius: 0;
	background-color: rgba(224, 224, 224, 0.25);
}

.input-listfill {
	text-align: right;
	border: 0;
	border-radius: 0;
	padding-left: 5px;
	padding-right: 5px;
	background-color: rgba(255, 255, 255, 0.00);
	box-shadow: none;
}

.input-listfill:focus {
	border: 1px solid rgba(102, 175, 233, 1) !important;
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6) !important;
}

.input-listfill-disabled,
.input-listfill:disabled {
	background-color: rgba(0, 0, 255, 0.050);
}

.visible-xs2 {
	display: none !important;
}

@media (max-width: 767px) {
	.visible-xs2 {
		display: table-cell !important;
		width: 22% !important;
		text-align: right;
	}
}

.rttSelect {
    padding: 0px 10px;
    font-size: 12px;
    border-radius: 3px;
    height: 25px;
    line-height: 25px;
    width: 160px;
    margin-top: -2px;
}


@media (min-width: 1200px) {
    .col-lg-1d5 {
        float: left;
        position: relative;
        min-height: 1px;
        padding-right: 15px;
        padding-left: 15px;
        width: 12.5%;
    }
}

.flex-box-container {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.flex-row-nowrap {
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -ms-flex-flow: row nowrap;
}

@media (max-width: 767px) {
    .flex-row-nowrap > div {
        padding-left: 2px;
        padding-right: 2px;
    }
    .flex-row-nowrap > div:first-of-type {
        border-left: none;
    }
}

select:focus ~ .input-group-btn,
input:focus ~ .input-group-btn {
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
    -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

select:focus ~ .input-group-btn > .btn,
input:focus ~ .input-group-btn > .btn {
    border-top-color: #66afe9 !important;
    border-right-color: #66afe9 !important;
    border-bottom-color: #66afe9 !important;
    -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

select:focus ~ .input-group-addon,
input:focus ~ .input-group-addon {
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
	-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
	transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
	border-top-color: #66afe9 !important;
	border-right-color: #66afe9 !important;
	border-bottom-color: #66afe9 !important;
}

input ~ .input-group-addon {
	border-left: 0;
}

.form-control.ng-invalid.ng-dirty ~ .input-group-btn,
.form-control.ng-invalid.ng-dirty ~ .input-group-btn > .btn,
.form-control.ng-invalid.ng-dirty ~ .input-group-addon {
	border-color: #a94442 !important;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}

.form-control.ng-invalid.ng-dirty:focus ~ .input-group-btn,
.form-control.ng-invalid.ng-dirty:focus ~ .input-group-btn > .btn,
.form-control.ng-invalid.ng-dirty:focus ~ .input-group-addon {
	border-color: #843534 !important;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
}

.input-group-addon-boxfree {
	box-shadow: none !important;
	-webkit-transition: none !important;
	transition: none !important;
	border: 0 !important;
	outline: 0 !important;
	background: inherit;
}


.btn { outline: 0 !important; }
.pointerright { cursor: e-resize; }

.absolute-center {
	position: absolute;
	display: table;
	height: auto;
	width: 500px;
	margin: auto;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
}

/* Main dropdown menu fading */
.dropdown-mainmenu {
	-webkit-transition: opacity 400ms ease-in-out, max-height 1ms linear 400ms, visibility 1ms linear 500ms;
	transition: opacity 400ms ease-in-out, max-height 1ms linear 400ms, visibility 1ms linear 500ms;
	opacity: 0;
	display: block;
	max-height: 1px;
	overflow: hidden;
	visibility: hidden;
}

.open .dropdown-mainmenu {
	transition: max-height 1ms linear, opacity 400ms ease-in-out, visibility 1ms linear;
	-webkit-transition: max-height 1ms, opacity 400ms ease-in-out, visibility 1ms linear;
	opacity: 0.95;
	max-height: 1000px;
	visibility: visible;
}

.navbar-nav .dropdown-mainmenu .dropdownheader {
	padding: 5px 15px 5px 25px;
}

/* Notifications */
.notifications {
	position: fixed;
	top: 10px;
	right: 10px;
	width: 300px;
	z-index: 1500;
}

.notification-item {
	margin-bottom: 10px;
	box-shadow: rgba(0, 0, 0, 0.5) 3px 3px 6px;
	border-radius: 10px;
	border-width: 2px;
	text-shadow: rgba(0, 0, 0, 0.1) 1px 1px 1px;
	cursor: pointer;
}

.notification-close {
	font-style: italic;
	font-size: 10px;
	opacity: 0.8;
	margin-top: -17px;
	margin-right: -17px;
	padding: 8px;
	cursor: e-resize;
}

.notification-wrapper {
	opacity: 0.9;
	margin-left: 0;
	margin-right: 0;

}

.notification-wrapper.ng-enter {
	-webkit-transition: 1s;
	transition: 1s;
	opacity: 0;
	margin-left: 300px;
	margin-right: -300px;
}

.notification-wrapper.ng-enter-active {
	opacity: 0.9;
	margin-left: 0;
	margin-right: 0;
}

.notification-wrapper.ng-leave {
	transition: opacity 500ms ease, margin-left 500ms ease, margin-right 500ms ease, max-height 500ms linear 10ms, margin-top 500ms linear 10ms;
	max-height: 78px;
}

.notification-wrapper.ng-leave-active {
	opacity: 0;
	margin-left: 300px;
	margin-right: -300px;
	overflow: hidden;
	max-height: 0;
	margin-top: 0;
}

.dropdown-menu2 > li > a {
	padding: 5px 10px;
}

/* Makes input narrow in MD - used for CDR dates */
@media (min-width: 992px) and (max-width: 1199px) {
	.form-group.narrow-input-md > pm-datepicker > .date > input,
	.form-group.narrow-input-md > pm-timepicker > table > tbody > tr > td > pm-datepicker > .date > input,
	.narrow-input-md2 {
		padding-left: 7px;
		padding-right: 0;
	}
}

/* Employee picture */

.employee-picture-buttons {
	padding-left: 10px;
	padding-right: 10px;
	width: auto;
	max-width: 245px;
	max-height: 245px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	text-align: right;
}

.employee-picture {
	background-color: var(--background-white);
	padding: 10px;
	border-radius: 10px;
	border: 1px solid var(--border);
	width: auto;
	max-width: 245px;
	max-height: 245px;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.employee-picture img {
	max-width: 225px;
	max-height: 225px;
	width: 100%;
}

.employee-picture-progressbar {
	position: relative;
	z-index: 10;
	padding-left: 20px;
	padding-right: 20px;
	width: auto;
	max-width: 245px;
	max-height: 245px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: -42px;
}

/* Channel logo picture */

.channel-logo-buttons {
	padding-left: 10px;
	padding-right: 10px;
	width: auto;
	max-width: 422px;
	max-height: 248px;
	display: block;
	text-align: right;
}

.channel-logo {
	background-color: var(--background3);
	padding: 10px;
	border-radius: 10px;
	border: 1px solid var(--border);
	width: auto;
	max-width: 422px;
	max-height: 248px;
	display: block;
}

.channel-logo img {
	max-width: 400px;
	max-height: 225px;
	height: 225px;
	width: 100%;
	border: 1px solid var(--border);
	background-color: var(--background-white);
	background-image: linear-gradient(45deg, var(--background3) 25%, transparent 25%, transparent 75%, var(--background3) 75%, #eee),
	linear-gradient(45deg, var(--background3) 25%, transparent 25%, transparent 75%, var(--background3) 75%, #eee);
	background-size:20px 20px;
	background-position:0 0, 10px 10px;
}


.channel-logo-progressbar {
	position: relative;
	z-index: 10;
	padding-left: 20px;
	padding-right: 20px;
	width: auto;
	max-width: 400px;
	max-height: 225px;
	display: block;
	margin-top: -42px;
}

/* Reseller logo picture */

.reseller-logo-buttons {
	padding-left: 10px;
	padding-right: 10px;
	width: auto;
	max-width: 522px;
	max-height: 113px;
	display: block;
	text-align: right;
}

.reseller-logo {
	background-color: var(--background3);
	padding: 10px;
	border-radius: 10px;
	border: 1px solid var(--border);
	width: auto;
	max-width: 522px;
	max-height: 113px;
	display: block;
}

.reseller-logo img {
	max-width: 500px;
	max-height: 90px;
	height: 90px;
	width: 100%;
	border: 1px solid var(--border);
	background-color: var(--border-dark);
	background-image: linear-gradient(45deg, var(--border) 25%, transparent 25%, transparent 75%, var(--border) 75%, var(--border)),
	linear-gradient(45deg, var(--border) 25%, transparent 25%, transparent 75%, var(--border) 75%, var(--border));
	background-size:20px 20px;
	background-position:0 0, 10px 10px;
}

.small-logo-buttons {
	padding-left: 10px;
	padding-right: 10px;
	width: auto;
	max-width: 172px;
	max-height: 98px;
	display: block;
	text-align: right;
}

#small-logo {
	background-color: var(--background3);
	padding: 10px;
	border-radius: 10px;
	border: 1px solid var(--border);
	width: auto;
	max-width: 172px;
	max-height: 98px;
	display: block;
}

#small-logo img {
	max-width: 150px;
	max-height: 75px;
	height: 75px;
	width: 100%;
	border: 1px solid var(--border);
	background-color: var(--border-dark);
	background-image: linear-gradient(45deg, var(--border) 25%, transparent 25%, transparent 75%, var(--border) 75%, var(--border)),
	linear-gradient(45deg, var(--border) 25%, transparent 25%, transparent 75%, var(--border) 75%, var(--border));
	background-size:20px 20px;
	background-position:0 0, 10px 10px;
}

.background-image-buttons {
	padding-left: 10px;
	padding-right: 10px;
	width: auto;
	max-width: 320px;
	max-height: 180px;
	display: block;
	text-align: right;
}

#background-image {
	background-color: var(--background3);
	padding: 10px;
	border-radius: 10px;
	border: 1px solid var(--border);
	width: auto;
	max-width: 342px;
	max-height: 203px;
	display: block;
}

#background-image img {
	max-width: 320px;
	max-height: 180px;
	height: 180px;
	width: 100%;
	border: 1px solid var(--border);
	background-color: var(--border-dark);
	background-image: linear-gradient(45deg, var(--border) 25%, transparent 25%, transparent 75%, var(--border) 75%, var(--border)),
	linear-gradient(45deg, var(--border) 25%, transparent 25%, transparent 75%, var(--border) 75%, var(--border));
	background-size:20px 20px;
	background-position:0 0, 10px 10px;
}


.uploaded-image {
	background-color: var(--background3);
	padding: 10px;
	border-radius: 10px;
	border: 1px solid var(--border);
	width: auto;
	height: auto;
	min-height: 120px;
	min-width: 120px;
	max-width: 342px;
	max-height: 203px;
	display: block;
}

.uploaded-image img {
	min-height: 100px;
	min-width: 100px;
	max-width: 320px;
	max-height: 180px;
	width: 100%;
	border: 1px solid var(--border);
	background-color: var(--border-dark);
	background-image: linear-gradient(45deg, var(--border) 25%, transparent 25%, transparent 75%, var(--border) 75%, var(--border)),
	linear-gradient(45deg, var(--border) 25%, transparent 25%, transparent 75%, var(--border) 75%, var(--border));
	background-size:20px 20px;
	background-position:0 0, 10px 10px;
}


#iptv-settings-background-color {
	display: blocK;
	width: 150px;
	height: 75px;
}



.reseller-logo-progressbar {
	position: relative;
	z-index: 10;
	padding-left: 20px;
	padding-right: 20px;
	width: auto;
	max-width: 500px;
	max-height: 90px;
	display: block;
	margin-top: -42px;
}


/* Make colored button more plesant to look at */

.btn-success {
	background-image: var(--success-background);
	background-repeat: repeat-x;
	border-color: var(--success-border);
	text-shadow: 1px 1px 2px #444;
}
.btn-success:hover,
.btn-success:focus {
	background-color: var(--success-background-hover);
	background-position: 0 -30px;
}
.btn-success:active,
.btn-success.active {
	background-color: var(--success-background-hover);
	border-color: var(--success-border);
}

.btn-info {
	background-image: var(--info-background);
	background-repeat: repeat-x;
	border-color: var(--info-border);
	text-shadow: 1px 1px 2px #444;
}
.btn-info:hover,
.btn-info:focus {
	background-color: var(--info-background-hover);
	/* background-position: 0 -15px; */
}
.btn-info:active,
.btn-info.active {
	background-color: var(--info-background-hover);
	border-color: var(--info-border);
	color: #fff;
	/* text-shadow: none !important; */

}

.btn-warning {
	background-image: var(--warning-background);
	background-repeat: repeat-x;
	border-color: var(--warning-border);
	text-shadow: 1px 1px 2px #444;
}
.btn-warning:hover,
.btn-warning:focus {
	background-color: var(--warning-background-hover);
	/* background-position: 0 -15px; */
}
.btn-warning:active,
.btn-warning.active {
	background-color: var(--warning-background-hover);
	border-color: var(--warning-border);
	text-shadow: none !important;
}

.btn-danger {
	background-image: var(--danger-background);
	background-repeat: repeat-x;
	border-color: var(--danger-border);
	text-shadow: 1px 1px 2px #444;
}
.btn-danger:hover,
.btn-danger:focus {
	background-color: var(--danger-background-hover);
	/* background-position: 0 -15px; */
}
.btn-danger:active,
.btn-danger.active {
	background-color: var(--danger-background-hover);
	border-color: var(--danger-border);
}

.btn-record {
	background-image: linear-gradient(to bottom, #e15e5a 0%, #f9837f 100%);
	background-repeat: repeat-x;
	border-color: #d95c58;
	text-shadow: 1px 1px 2px #444;
	color: var(--text-white);
}
.btn-record:hover,
.btn-record:focus {
	background-color: #f9837f;
	background-position: 0 -15px;
	color: var(--text-white);
}
.btn-record:active,
.btn-record.active {
	background-color: #f9837f;
	border-color: #d95c58;
}
.btn-record.btn-big i {
	color: var(--text-white);
}


.btn-extension-group {
	padding: 0 0 0 0;
	border: none;
}

.btn-extension-group > a {
	border-radius: 0;
	/*text-shadow: none;*/
}

.btn-extension-group > a:first-child {
	border-radius: 0 0 0 0 !important;
}

.btn-extension-group > a:not(:first-child) {
	border-left: 0;
}

.form-control.no-highlight {
	box-shadow: none;
}

.form-control.no-highlight:focus {
	box-shadow: none;
	border-color: var(--border);
}

.no-radius {
	border-radius: 0;
}
.no-radius > li {
	border-radius: 0 !important;
}

@media (min-width: 768px) {
	.call-handling-block {
		float: left !important;
		margin-right: 10px;
		margin-bottom: 5px;
	}
	.call-handling-number {
		min-width: 150px;
		max-width: 150px;
	}
}
@media (max-width: 767px) {
	.call-handling-block {
		margin-right: 10px;
		margin-bottom: 5px;
	}
}

.user-phone-list-item {
	padding: 6px 4px 6px 8px;
	cursor: pointer;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: stretch;
}

.kroner:before {
	content: "Kr. ";
	float: left !important;
}

.user-image {
	margin-top: -2px;
	margin-left: -1px;
	vertical-align: inherit;
	border-radius: 23px 23px;
	width: 45px;
	height: 45px;
}

.user-presence {
	color: white;
	font-size: 10px;
	position: absolute;
	right: 5px;
	bottom: 12px;
	border-radius: 10px;
	width: 17px;
	height: 17px;
	padding-left: 3px;
	padding-top: 1px;
	border: 1px solid #a0a0a080;
}

.user-presence.AVAILABLE {
	background-color: var(--presence-available);
}

.user-presence.BUSY {
	background-color: var(--presence-busy);
}

.user-presence.OUT_OF_OFFICE {
	background-color: var(--presence-out-of-office);
}

.user-presence.OFF_WORK {
	background-color: var(--presence-off-work);
}

.user-presence.HOLIDAY {
	background-color: var(--presence-holiday);
}

.destination-amount .a-addon {
	padding: 0 5px;
	border: 0;
	border-radius: 0;
	background-color: rgba(224, 224, 224, 0.25);
	cursor: default !important;
}

@media (max-width: 1199px) and (min-width: 991px) {
	.destination-amount .a-addon {
		padding: 0 0 0 2px;
	}
	.destination-amount INPUT {
		padding: 0 2px 0 0;
	}
}

.switch {
	background: var(--background-white);
	border: 1px solid var(--border);
	position: relative;
	display: inline-block;
	box-sizing: content-box;
	overflow: visible;
	width: 52px;
	height: 32px;
	padding: 0;
	margin: 0;
	border-radius: 21px;
	cursor: pointer;
	/*box-shadow: rgb(223, 223, 223) 0 0 0 0 inset;*/
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
	transition: 0.3s ease-out all;
	top: 0;
}

/* Small switch - add with small-switch */
.switch.small-switch {
	height: 22px;
	width: 43px;
}

.switch.medium-switch {
	height: 27px;
}

/*adding a wide width for larger switch text*/
.switch.wide {
	width:80px;
}

/* The nob */
.switch small {
	background: #fff;
	border-radius: 100%;
	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
	/*box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);*/
	width: 30px;
	height: 30px;
	position: absolute;
	top: 1px;
	left: 1px;
	transition: 0.3s ease-out all;
}

/* for the small switch */
.switch.small-switch small {
	height: 20px;
	width: 20px;
}

/* for the medium switch */
.switch.medium-switch small {
	height: 25px;
	width: 25px;
}

.switch.checked {
	background: rgb(100, 189, 99);
	/*border-color: rgb(100, 189, 99);*/
}

.switch.checked small {
	left: 22px;
}
/*wider switch text moves small further to the right*/
.switch.wide.checked small {
	left:52px;
}
/*wider switch text moves small further to the right*/
.switch.medium-switch.checked small {
	left:26px;
}

/*styles for switch-text*/
.switch .switch-text {
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
}

.switch .off {
	display:block;
	position: absolute;
	right: 10%;
	top: 25%;
	z-index: 0;
	color:#A9A9A9;
}

.switch .on {
	display:none;
	z-index: 0;
	color:var(--text-white);
	position: absolute;
	top: 25%;
	left: 9%;
}

.switch.checked .off {
	display:none;
}

.switch.checked .on {
	display:block;

}

.switch.disabled {
	opacity: .50;
	cursor: not-allowed;
}

.switch.unchecked.off-red  {
	background: #f55;
}

PM-SWITCH + LABEL {
	font-weight: normal !important;
	vertical-align: top;
	padding-top: 2px;
}

.input-border-dim {
	border-color: var(--border-light);
	border-radius: 0;
}

.btn-borderless-in-list {
	border-radius: 0;
	border-left: 0;
	border-top: 0;
	border-right: 2px solid var(--border) !important;
	border-bottom: 0;
	padding-top: 7px;
	padding-bottom: 7px;
}

.btn-borderless-in-list2 {
	border-radius: 0;
	border-top: 0;
	border-right: 2px solid var(--border) !important;
	border-bottom: 0;
	padding-top: 7px;
	padding-bottom: 7px;
}

.channels-list-flex-down {
	flex-direction: row;
}

.channels-list-flex-height {
	height: 43px;
}

@media (max-width: 767px) {
	.channels-list-flex-down {
		flex-direction: column;
	}
	.channels-list-flex-height {
		height: 75px;
	}

	.narrow > pm-datepicker > .date > input {
		padding-left: 7px;
		padding-right: 0;
	}

}

.list-group-plain {
	border-radius: 0;
	box-shadow: none;
	margin-bottom: 8px;
}

.list-group-plain .list-group-item {
	background-color: transparent;
	border: none;
	padding-left: 0;
}
.list-group-plain .list-group-item:nth-of-type(even) {
	background: transparent;
}

.pm-progressbar-error {
	background-image: linear-gradient(to bottom, #f9605c 0%, #ff837f 100%) !important;
	text-shadow: 1px 1px #555;
}

.pm-progressbar-ok {
	background-image: linear-gradient(to bottom, #84dd84 0%, #8ce88c 100%) !important;
	text-shadow: 1px 1px #555;
}

.flex-list-row {
	display: flex;
	flex-direction: row;
}

@media (max-width: 767px) {
	.flex-list-row {
		display: flex;
		flex-direction: column;
	}
}

@media (max-width: 767px) {
	.expand-panel-xs {
		margin-left: -10px;
		margin-right: -10px;
	}

	.expand-panel-xs > .list-group {
		margin-right: 10px;
	}

}

.lineheight1 {
	line-height: 1.0;
}
.lineheight2 {
	line-height: 1.8;
}
.dropdown-pm {
	border-bottom: 1px solid var(--border);
}
.dropdown-pm div {
	padding: 4px 8px;
	cursor: pointer;
}

.dropdown-pm div:hover {
	background-color: #428bca;
	color: var(--text-white);
	text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
}


.dropdown-pm:last-of-type {
	border-bottom: none;
}

.space-between {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.drag-over-audio-upload {
	background-image: var(--success-background);
	background-repeat: repeat-x;
	border: 1px solid var(--success-border);
	text-shadow: 1px 1px 2px #444;
	border-radius: 2px 2px;
}
.drag-over-audio-upload BUTTON {
	display: none;
}

.drag-over-audio-upload .drag-over-audio-upload-invisible {
	opacity: 0;
}

.drag-over-audio-upload-label {
	display: none;
}

.drag-over-audio-upload > .drag-over-audio-upload-label {
	display: block;
	text-align: center;
	padding-top: 0;
	font-weight: bold;
	padding-top: 10px;
	font-size: 20px;
	height: 48px;
	color: var(--text-white);
}

/* Style slider */
input[type=range] {
	-webkit-appearance: none;
	appearance: none;
	margin: 10px 0;
	width: 100%;
}
@supports (-ms-ime-align:auto) {
	input[type=range] {
		margin: 0 0;
	}
}
input[type=range]:focus {
	outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
	width: 100%;
	height: 7px;
	cursor: pointer;
	box-shadow: -1px -1px 0px #0000001a, 0px 0px 1px #0d0d0d83;
	background: #398ae60c;
	border-radius: 3px;
	border: 0.2px solid var(--border);
}
input[type=range]::-webkit-slider-thumb {
	box-shadow: 1px 1px 5px #0000007a, 0px 0px 1px #0d0d0d59;
	/* border: 1px solid rgba(230,230,230, 0.479); */
	height: 25px;
	width: 25px;
	border-radius: 13px;
	background: rgb(255,255,255);
	background: radial-gradient(circle, rgba(240,240,240,1) 10%, rgba(220,220,220,0.7) 100%);
	cursor: pointer;
	-webkit-appearance: none;
	margin-top: -9px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
	background: #398ae62c;
}
input[type=range]::-moz-range-track {
	width: 100%;
	height: 7px;
	cursor: pointer;
	box-shadow: -1px -1px 0px #0000001a, 0px 0px 1px #0d0d0d83;
	background: #398ae60c;
	border-radius: 3px;
	border: 0.2px solid var(--border);
}
input[type=range]::-moz-range-thumb {
	box-shadow: 1px 1px 5px #0000007a, 0px 0px 1px #0d0d0d59;
	/* border: 1px solid rgba(230,230,230, 0.479); */
	height: 25px;
	width: 25px;
	border-radius: 13px;
	background: rgb(255,255,255);
	background: radial-gradient(circle, rgba(240,240,240,1) 10%, rgba(220,220,220,0.7) 100%);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	margin-top: -9px;
}
input[type=range]::-ms-track {
	width: 100%;
	height: 7px;
	cursor: pointer;
	background: transparent;
	border-color: transparent;
	border-width: 8px 0;
	color: transparent;
}
input[type=range]::-ms-fill-lower {
	box-shadow: -1px -1px 0px #a0a0a0, 0px 0px 1px #909090;
	background: #dce1e7;
	border-radius: 3px;
	border: 0.2px solid var(--border);
}
input[type=range]::-ms-fill-upper {
	box-shadow: -1px -1px 0px #a0a0a0, 0px 0px 1px #909090;
	background: #dce1e7;
	border-radius: 3px;
	border: 0.2px solid var(--border);
}
input[type=range]::-ms-thumb {
	box-shadow: 1px 1px 0px #707070, 0px 0px 0px #606060;
	border: 1px solid #c0c0c0;
	height: 25px;
	width: 25px;
	border-radius: 13px;
	background: rgb(255,255,255);
	background: radial-gradient(circle, rgba(240,240,240,1) 10%, rgba(220,220,220,0.7) 100%);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	margin-top: -2px;
}
input[type=range]:focus::-ms-fill-lower {
	background: #c4d3e6;
}
input[type=range]:focus::-ms-fill-upper {
	background: #c4d3e6;
}

/* week-box for pbx time-router */
.week-box {
	display: flex;
}

.week-box DIV:last-of-type {
	border-right: 1px solid #b0b0b0;
}

.week-box DIV {
	border-left: 1px solid var(--border);
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
	flex: 1;
	text-align: center;
	cursor: pointer;
	background-color: #fff;
	height: 20px;
	margin-bottom: 5px;
	width: 0;
}

/* .week-box:last-of-type DIV {
	border-bottom: 1px solid #c0c0c0;
} */

.week-box DIV:nth-of-type(even) {
	border-left: 1px solid var(--border-light);
}

.week-box DIV:nth-of-type(even).weekhighlight {
	border-left: 1px solid #f3ad53;
}

.week-box DIV:nth-of-type(even).weekactive {
	border-left: 1px solid var(--success-border);
}

.week-box DIV:nth-of-type(even).weekactive-first50 {
	border-left: 1px solid var(--success-border);
}

.week-box DIV.weekactive {
	background-image: var(--success-background);
	border-left: 1px solid var(--success-border);
}

.week-box DIV.weekactive-last50 {
	background-image: linear-gradient(to right, #00000000 25%, #71B671 100%);
}

.week-box DIV.weekactive-first50 {
	background-image: linear-gradient(to right, #71B671 0%, #00000000 75%);
	border-left: 1px solid var(--success-border);
}

.week-box DIV.weekhighlight {
	background-image: linear-gradient(to bottom, #f0cd8e 0%, #fbb356 100%);
	border-left: 1px solid #f3ad53;
}

.week-box-hours {
	display: flex;
	margin-left: -16px;
	margin-right: 18px;
}

@media (max-width: 1199px) and (min-width: 991px) {
	.week-box-hours {
		margin-left: -11px;
		margin-right: 13px;
	}
}

@media (max-width: 990px) and (min-width: 768px) {
	.week-box-hours {
		margin-left: -22px;
		margin-right: 22px;
	}
}

@media (max-width: 767px) {
	.week-box-hours {
		margin-left: -11px;
		margin-right: 11px;
	}
}

.week-box-note {
	display: block;

}

@media (max-width: 990px) {
	.week-box-note {
		display: flex;
	}
	
	.week-box-note DIV {
		margin-right: 10px;
		flex-grow: 1;
	}

	.week-box-note-override {
		width: 100%;
	}
}

.pm-timepicker.ng-invalid DIV.form-control,
.pm-timepicker.ng-invalid TABLE TR TD DIV.form-control,
	.pm-timepicker.ng-invalid TABLE TR TD DIV.input-group INPUT,
.pm-timepicker.ng-invalid TABLE TR TD DIV.input-group SPAN {
	border-color: #a94442 !important;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075) !important;
}

.pm-timepicker.ng-invalid DIV.form-control:focus,
.pm-timepicker.ng-invalid TABLE TR TD DIV.form-control:focus,
	.pm-timepicker.ng-invalid TABLE TR TD DIV.input-group:focus INPUT,
.pm-timepicker.ng-invalid TABLE TR TD DIV.input-group:focus SPAN {
	border-color: #843534 !important;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483 !important;
}

.speak-tag {
	background: linear-gradient(to bottom, #ff8 0%, #dd8 100%);
	color: #5050a1;
	border: 1px solid #cc0;
	padding-left: 4px;
	padding-right: 4px;
	padding-top: 1px;
	padding-bottom: 1px;
	box-shadow: 2px 2px 2px rgba(0,0,0,0.1);
	border-radius: 3px 3px;
	cursor: pointer;
	white-space: nowrap;
}

.speak-tag:focus,
.speak-tag:active {
	background: linear-gradient(to bottom, #dd0 0%, #ff0 100%);
}

.pbx-value-head {
	display: flex;
	flex-wrap: wrap;
	padding-top: 0;
}
.pbx-value-head > DIV {
	margin-right: 10px;
	margin-top: 10px;
}
.pbx-value-row {
	display: flex;
	flex-wrap: wrap;
	padding-top: 0;
}
.pbx-value-row > DIV {
	margin-right: 10px;
	margin-top: 10px;
}
@media (max-width: 767px) {
	.pbx-value-row {
		display: block;
	}

	.pbx-value-row > DIV > SELECT,
	.pbx-value-row > DIV > INPUT,
	.pbx-value-row > DIV > DIV
	{
		min-width: 100%;
		max-width: 100%;
	}

	.pbx-value-head > DIV.form-group {
		min-width: inherit;
		max-width: inherit;
		flex-grow: 100;
		
	}
}
/* SIP phone image on sip phone list */
.sipphone-container {
	margin-top: -5px;
	margin-left: -10px;
	vertical-align: inherit;
	background-color:white;
	padding-right: 0;
	margin-right: 10px;
	height: 100%;
	border-right: 1px solid #cccccc;
}

.sipphone-image {
	width: 52px;
	padding: 2px;
	margin-top: -5px;
}
.sipphone-noimage {
	margin-left: 9px;
	padding-top: 9px;
	width: 43px;
}

@media (max-width: 666px) {
	.sipphone-image {
		margin-top: 13px;
	}
}

th.rotate {
	height: 100px;
	white-space: nowrap;
}
  
th.rotate > div {
	transform:  translate(0px, 50px) rotate(-90deg);
	width: 50px;
}

.text-muted.smaller {
	font-size: 12px;
}

.text-dark {
	color: var(--text-dark);
}

.bmpui-ui-watermark, .bmpui-ui-titlebar  {
	display: none !important;
}

.call-hover:hover {
	background-image: linear-gradient(to bottom, #dff0d8 0%, #c8e5bc 100%) !important;
	background-repeat: repeat-x !important;
}

.no-border-readonly:read-only {
	border: none;
}

.humantask-employee-box {
	border: 1px solid var(--border-dark);
	background: var(--background2);
	margin-bottom: 10px;
}

.humantask-employee-name {
	font-size: 24px;
	font-weight: bold;
	background: var(--background-white);
	padding: 5px;
}

.humantask-employee-subheadline {
	font-size: 18px;
	font-weight: bold;
	background: var(--background3);
	border-radius: 5px;
	padding-left: 3px;
	padding-right: 3px;
}

.humantask-task:not(:last-of-type) {
	border-bottom: 1px solid #ccc;
}

.humantask-task {
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	cursor: pointer;
}

.humantask-task-headline {
	font-size: 16px;
}

.humantask-task-taglist {
	list-style: none;
	padding-inline-start: 0px;
	color: #579;
	font-size: 13px;
	margin-bottom: 2px;
}

.humantask-task-taglist > li {
	display: inline-block;
	margin-right: 10px;
}

.humantask-stats-label {
	font-weight: 300;
	letter-spacing: 0.04em;
	color: var(--text-grey);
	font-size: 12px;
	text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
	text-transform: uppercase;
}

.humantask-stats-value {
	font-size: 28px;
	color: var(--text-black);
	margin-top: -5px;
	margin-bottom: -5px;
}

.humantask-stats-box {
	border:1px solid var(--border);
	background:var(--background-white);
	text-align:center;
	border-radius:5px;
	padding:3px;
	margin-left: -10px;
	margin-right: -10px;
	margin-top: 5px;
	margin-bottom: 5px;
}

@media (min-width: 1920px) {
	.col-xl-4 {
		width: 25% !important;
	}
}

@media (min-width: 1920px) {
	.new-overview-for-tasks {
		width: 20% !important;
	}
}

@media (min-width: 1920px) {
	.new-overview-for-rest-tasks {
		width: 25% !important;
	}
}

.hide-slaves {
		display: none;
	}

.humantask-container {
	width: 100% !important;
}

.dont-break-out {
	overflow-wrap: break-word;
	word-wrap: break-word;

	-ms-word-break: break-all;
	/* This is the dangerous one in WebKit, as it breaks things wherever */
	word-break: break-all;
	/* Instead use this non-standard one: */
	word-break: break-word;

	/* Adds a hyphen where the word breaks, if supported (No Blink) */
	-ms-hyphens: auto;
	-moz-hyphens: auto;
	-webkit-hyphens: auto;
	hyphens: auto;
}

#tablet-config {
	.backgroundElement {
		background-size: 100% 100%;
		flex-grow: 1;
		background-repeat: no-repeat;
	}
	.tabletNavbar {
		background-color: black;
		position: relative;
		z-index: 1;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		img {
			height: 80%;
		}
	}
}
#tablet-config .tablet_navbar img {
	height: 55px;
	width: auto;
}

.tablet-profile-button {
	position: absolute;
	border: none;
	background: transparent; 
	outline: none;
	padding: 0;
}
.tablet-profile-button.legacy {
	margin-left: 20px; 
	margin-right: 20px; 
	padding: 5px; 
	display: inline-block; 
	border: 4px dashed darkgray;
	border-radius: 2px; 
	background: transparent; 
	outline: none;
	position: static;
}
.tablet-profile-button .warning {
	position: absolute;
	left: 0;
	bottom: calc(100% + 5px);
	padding: 4px 6px;
	border-radius: 4px;
	white-space: nowrap;
}

.tablet-profile-tabs-container ul {
	flex-wrap: wrap;
}
.tablet-profile-tabs-container ul li {
	min-width: max-content;
}

.tablet-profile-tabs-container ul li a {
	margin-bottom: 0 !important;
}

.faded-overlay {
	opacity: 0.4;

}

.popover {
	z-index: 200;
	max-width: 320px;
	min-width: 320px;
}
.popover.tablet-profile-button-popover {
	max-width: 450px;
	background-color: var(--background);
}
.popover.tablet-profile-button-popover .arrow:after {
	border-right-color: var(--background);
}
.popover.tablet-profile-button-popover.left .arrow:after {
	border-left-color: var(--background);
}

#tablet-config {
	position: relative;
	background-attachment: local; 
	background-repeat: no-repeat; 
	background-position: left top;
}

.visual-dialplan-wrapper {
	padding: 10px 10px 50px 10px;
	background: var(--background);
}
.hiding-bar {
	background: var(--background4);
}

.blue-hover:hover {
	border-color: #9acfea;
	background-repeat: repeat-x;
    background-image: var(--background-gradient-list-group);
}

.dark-blue-hover:hover {
	border-color: #9acfea;
	background-repeat: repeat-x;
    background-image: linear-gradient(to bottom, #d9edfc 0%, #b9defc 100%);
}

.cursor-pointer {
	cursor: pointer;
}

.w80 {
	width: 80%;
}
.employee-picture-round-box {
	position: absolute;
	width: 50px;
	height: 50px;
	padding-right: 10px;
	margin-top: -4px;
}

.employee-picture-round {
	background-color: #E8DED1;
	border: 1px solid #AAAAAA;
	border-radius: 50%;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.employee-picture-round-name {
	background-color: #E8DED1;
	color: #505050;
	border: 1px solid #AAAAAA;
	border-radius: 50%;
	position: absolute;
	top: 0;
	left: 0;
	text-transform: uppercase;
	font-weight: 200;
	text-align: center;
	padding-top: 6px;
}
.employee-picture-round-name > DIV {
	margin-top: -6px;
}

.impersonating-background {
	background: repeating-linear-gradient(
		45deg,
		#EFF3EF,
		#EFF3EF 10px,
		#DFE3DF 10px,
		#DFE3DF 20px
		);
}
.impersonating-user {
	color: #AAAAAA;
	animation: impersonating-user-flash 4s linear infinite;
}

@keyframes impersonating-user-flash {
	40% { color: #db3333; }
	70% { color: #AAAAAA; }
}

.ng-invalid.color-invalid {
	background: lightcoral;
}

.table-striped:nth-child(even) {
	background-color: rgba(0, 0, 0, 0.03);
}

/* Quagga barcode scanner overrides */
#interactive.viewport {
	width: 100%;
	aspect-ratio: 16 / 9;
}

#interactive.viewport canvas, video {
	width: 100%;
	border:1px solid #555;
}

#interactive.viewport canvas.drawingBuffer, video.drawingBuffer {
	display: none;
}


.ck-powered-by-balloon {
	display: none !important;
}

.form-group.ck-editor-limit-height > .ck-editor > .ck-editor__main {
	max-height: calc(100vh - 380px);
	overflow-y: scroll;
}

.remove-bottom-border {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.mobile-change-table th {
	padding-right: 15px;
}

.required-asterisk {
	font-size: 1rem;
	font-weight: 400;
}

@media (prefers-color-scheme: dark) {
	.ck-content pre {
		background: hsla(0, 0%, 22%, .3) !important;
		border: 1px solid hsla(0, 0%, 22%, 1) !important;
		color: var(--text-black) !important;
	}

	.ck.ck-editor__main > .ck-editor__editable {
		background: var(--background4) !important;
		border-color: var(--border) !important;
	}

	.ck-reset_all :not(.ck-reset_all-excluded *), .ck.ck-reset_all {
		color: #aaa !important;
	}

	.ck.ck-toolbar {
		background: var(--background) !important;
		border-color: var(--border) !important;
	}

	.ck-editor__editable.ck-content .todo-list .todo-list__label>span[contenteditable=false]>input:before {
		border: 1px solid #777 !important;
	}
}

.form-control::placeholder {
	color: var(--text-grey-light);
}

@media (prefers-color-scheme: dark) {
	.form-control::placeholder {
		color: var(--text-grey);
	}
}

.label-with-asterisk {
	display: flex !important;
	gap: 3px;
}

.beta-pill {
	position: absolute;
	top: 0px;
	right: 5%;
	background-color: rgb(25, 103, 187);
	border-radius: 10px;
	/* font-size: 12px; */
	/* letter-spacing: 1px; */
	/* font-weight: 800; */
	/* text-transform: uppercase; */
	/* padding: 2px;
	padding-left: 6px;
	padding-right: 6px; */
}

.code-keyword {
	color: #c678dd;
}

.code-title-class {
	color: #e6c07b;
}

.code-type {
	color: #d19a66;
}

.code-function {
		border: 0;
		margin: 0;
		padding: 0;
}

.code-comment {
	color: #5c6370;
	font-style: italic;
}

.code-string {
	color: #98c379;
}

.code-title {
	color: #61aeee;
}

.code-variable {
	color: #e06c75;
}

/* STB-profiles */
.stb-designer {
	width: 1280px;
	height: 720px;
	padding: 0;
	position: relative;
	background-repeat: no-repeat;
	background-size: 100%;
}
.stb-designer .topbar {
	height: 100px;
	width: 100%;
	flex-shrink: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 40px;
}
.stb-designer .topbar #logo {
	height: 70px;
	width: auto;
	cursor: pointer;
}
.stb-designer .topbar #clock #date {
	font-size: 16px;
}
.stb-designer .topbar #clock #time {
	font-size: 26px;
}

.stb-designer .body {
	width: inherit;
	flex-grow: 1;
	position: relative;
	margin: 0 20px;
}

.stb-designer .body .applet {
	position: absolute;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	background-color: transparent;
	border: none;
	padding: 0;
}
.stb-designer .body .applet * {
	pointer-events: none;
}
.stb-designer .body .applet .applet-title {
	padding: 0;
	margin: 0;
	margin-top: 5px;
	overflow: visible;
	white-space: nowrap;
}
.stb-designer #mac, .stb-designer #version {
	position: absolute;
	bottom: 20px;
	font-size: 12px;
}
.stb-designer #mac {
	right: 40px;
}
.stb-designer #version {
	left: 40px
}

.player-progress {
	background-image: linear-gradient(
		to right,
		rgba(125, 246, 59, 0.2) 0%,              /* Progress color */
		rgba(125, 246, 59, 0.2) var(--positionpercent), /* End of progress */
		transparent var(--positionpercent),              /* Start of empty */
		transparent 100%                          /* Rest of input */
	);
}