:root {
	--left-content-width: 276px;
	--navigation-width: 850px;

	--black: #000;
	--white: #f6f6f6;
	--dark-gray: #777;
	--light-gray: #e0e0e0;
	--border-color: var(--light-gray);
	--background-color: var(--white);
	--text-color: var(--black);
	--emphasis-color: #e30040;
	--header-inactive-color: #777;
	--header-active-color: var(--emphasis-color);
}

html {
	overflow-y: scroll;
}

body {
	background: var(--background-color);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin: 0;
}
div#header {
	padding: 15px 0;
	background: var(--background-color);
	overflow: hidden;
}

div#header-inner {
	width: 926px;
	height: 120px;
	margin: 0 auto;
}

#header-logos {
	width: 100%;
}

#header-logo-main {
	width: 50%;
	float: left;
}

#header-logo-client {
	width: 50%;
	float: right;
	text-align: right;
}

#header-logo-client img {
	margin-top: 15px;
	height: 40px;
}

#header-logout {
	float: right;
}

#header-logout a {
	color: var(--header-inactive-color);
	font-size: 13px;
	font-weight: 700;
	text-transform: lowercase;
	text-decoration: none;
}

#header-navigation {
	float: left;
	width: 100%;
	margin-top: 30px;
}

#header-navigation nav {
	float: left;
	width: var(--navigation-width);
}

#header-navigation ul {
	overflow: hidden;
	margin: 0;
	padding: 0;
}

#header-navigation ul li {
	display: inline-block;
	float: left;
	padding: 0;
	margin: 0;
	background-repeat: no-repeat;
	background-position: right;
}

#header-navigation ul li a {
	color: var(--header-inactive-color);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 1px;
	padding: 0px 15px 0px 0px;
	text-transform: uppercase;
	text-decoration: none;
}

#header-navigation ul li.active a {
	color: var(--header-active-color);
}

div#content-wrapper {
	width: 950px;
	margin: 0 auto 20px auto;
	background: var(--background-color);
	position: relative;
	overflow: hidden;
}

#content {
	width: 100%;
	overflow: hidden;
}

.content-box {
	padding: 10px;
	font-size: 12px;
}
.content-box + .content-box {
	border-top: 1px solid var(--border-color);
}

#content-header {
	margin: 30px auto;
	width: 950px;
}

h1 {
	padding: 0 0 0 15px;
	color: var(--emphasis-color);
	font-weight: bold;
	font-size: 20px;
	text-transform: uppercase;
	letter-spacing: 1px;
}

#mainbar {
	width: 650px;
	float: left;
}

#sidebar {
	width: 300px;
	float: right;
	padding-top: 8px;
}

.form-container h3 {
	padding: 0;
	border-bottom: 0px;
	color: var(--emphasis-color);
	font-size: 14px;
	font-weight: bold;
}

.form-container h3 [type="inside"] {
	padding: 0;
	border-bottom: 0px;
	color: var(--emphasis-color);
	font-size: 12px;
	font-weight: bold;
}

div.form-content {
	border: 1px solid var(--border-color);
	padding: 15px 20px;
}

div.form-container {
	margin: 0;
	padding: 15px;
}

#form-login label {
	display: inline-block;
	font-weight: bold;
	width: 100px;
}

#form-login #flash {
	font-weight: bold;
	font-size: 12px;
}

.flash span {
	display: block;
}

.alert {
	position: relative;
	padding: 15px;
	margin-bottom: 1rem;
	border: 1px solid transparent;
	border-radius: .25rem;

	color: #004085;
	background-color: #cce5ff;
	border-color: #b8daff;
}

.alert-success {
	color: #155724;
	background-color: #d4edda;
	border-color: #c3e6cb;
}

.alert-warning {
	color: #856404;
	background-color: #fff3cd;
	border-color: #ffeeba;
}

.alert-info {
	color: #0c5460;
	background-color: #d1ecf1;
	border-color: #bee5eb;
}

.loading-container {
	background: rgba(255,255,255,0.5);
	z-index: 1;
	height: 100%;
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	display: none
}
.loading {
	display: block;
	width: 100px;
	height: 100px;
	background: url(../images/loading.svg);
	background-size: 100px 100px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -50px;
	margin-top: -50px;
	z-index: 2;
}
.progress-container {
	display: none;
	width: 300px;
	height: 20px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -150px;
	margin-top: 50px;
	z-index: 2;
	background-color: var(--background-color);
	border: 1px solid var(--border-color);
	-o-border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-ms-border-radius: 4px;
	border-radius: 4px;
}
.progress-container div {
	display: block;
	height: 100%;
	line-height: 20px;
	text-align: center;
	border: 0px solid transparent;
	font-weight: 700;
	color: var(--white);
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	outline: 0;
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: 1px;
	background: var(--emphasis-color);
	-o-border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-ms-border-radius: 4px;
	border-radius: 4px;
}
#progress-bar {
	width: 20%;
	background: var(--emphasis-color);
}
div.form-content label {
	color: var(--black);
	display: inline-block;
	width: 260px;
	font-weight: bold;
}
div.form-content label.radioValueLabel {
	width: 200px;
}

div.form-content label.radioValueLabelConfig {
	width: 150px;
}

div.form-content label.radioValueLabelSub {
	width: 188px;
}

div.form-content label.topalign {
	vertical-align: top;
	margin-top: 5px;
}

div.form-content span.label {
	display: inline-block;
	width: 260px;
	font-weight: bold;
}

div.form-content span.value {
	display: inline-block;
}

div.form-content label[for="admin"], div.form-content label[for="user"],
div.form-content label[HTMLfor="admin"], div.form-content label[HTMLfor="user"] {
	width: 65px;
	font-weight: inherit;
}

div.pblock {
	border: 1px solid var(--border-color);
	margin: 10px 0;
	background-color: var(--background-color);
}

div.pblock > a, div.pblock div.pblockkey > label {
	margin: 0;
	padding: 5px 5px 5px 15px;
	line-height: 26px;
	color: var(--emphasis-color);
	background-color: var(--background-color);
	font-weight: bold;
	display: block;
	width: inherit;
	overflow: hidden;
}

div.pblock>a:hover {
	color: #009;
	cursor: pointer;
}

div.pblockkeys > input.delete-button {
	float: right;
	padding: 0 12px;
	height: auto;
	line-height: 22px;
}

div.pblockkeygroup {
}

div.pblockkey > label > input {
	float: right;
	margin-right: 10px;
	height: 20px;

	padding: 0 12px;
	height: auto;
	line-height: 22px;
}

div.pblock label {
	margin-bottom: 0px;
	margin-top: 10px;
	margin-left: 2px;
}

div.pblockkeys {
	margin-bottom: 15px;
	margin-top: 10px;
	margin-left: 25px;
	margin-right: 15px;
}

div.pblock label.pblockkey {
	width: 150px;
}

div.pblock label.pblockkeyid {
	width: inherit;
	margin: 10px;
}

div.pblockkey {
	border: 1px solid var(--border-color);
	margin: 10px 0;
	background-color: var(--background-color);
}

div#content div.pblockkey span.pblockkeyid {
	font-size: 11px;
}

div#content div.pblockkey div.pblockrsakey {
	word-wrap: break-word;
	font-family: monospace;
	margin: 0 10px 10px 10px;
	font-size: 11px;
}

div.tslblock {
	border: 1px solid var(--border-color);
	margin: 10px 0;
	background-color: var(--background-color);
}

div.tslblock > a, div.tslblock div.tslblockkeys > label {
	margin-bottom: 15;
	padding: 5px 5px 5px 15px;
	line-height: 26px;
	color: var(--emphasis-color);
	background-color: var(--background-color);
	font-weight: bold;
	display: block;
	width: inherit;
	overflow: hidden;
}

div.tslblock>a:hover {
	color: #009;
	cursor: pointer;
}

table.tslblockkeygroup {
	margin: 10px 10px;
	line-height: 22px;
	background-color: var(--background-color);
	display: block;
	width: inherit;
	overflow: hidden;
	border-collapse: collapse;
}

table.tslblockkeygroup>tr>th {
	border: 2px solid var(--border-color);
	padding: 5px 7px 5px 7px;
	font-weight: bold;
	text-align: left;
}

table.tslblockkeygroup>tr>th.name {
	width: 50%;
}

table.tslblockkeygroup>tr>td {
	border: 1px solid var(--border-color);
	padding: 5px 7px 5px 7px;
	font-weight: bold;
	text-align: left;
}

table.tslblockkeygroup>tr>td.name {
	font-weight: bold;
}

table.tslblockkeygroup>tr>td.fp {
	font-family: monospace;
}

#content .form-content p {
	overflow: hidden;
	margin: 0;
	padding: 10px 0;
}

#content .form-content p + p {
	border-top: 1px solid var(--border-color);
}

#content .form-content .cs-value {
	font-family: monospace;
}

#content .form-content .form-group {
	display: block;
	width: 310px;
	float: right;
}

#content .form-content input.fill {
	width: calc(100% - var(--left-content-width));
}

input.fill:disabled {
	background: var(--border-color);
}

#content .form-content input.mschapCiDTextDisabled {
	width: calc(100% - var(--left-content-width));
}
input.mschapCiDTextDisabled:disabled {
	background: var(--border-color);
}

#content .form-content input.shortNum {
	width: 20px;
	margin: auto 1px auto auto;
	direction: rtl;
}

#content .form-content input.shortNumFollow {
	width: 20px;
	margin: auto 1px auto 8px;
	direction: rtl;
}

#content .form-content textarea.fill {
	width: calc(100% - var(--left-content-width));
	resize: vertical;
}

:focus {
	outline: none;
}

.select-dropdown {
	position: relative;
	padding: 5px;
	background-color: var(--white);
	border: 1px solid var(--border-color);
	opacity: 1.0
}

.select-dropdown select {
	font-size: 12px;
	font-weight: 700;
	max-width: 100%;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.select-dropdown:disabled {
	background: var(--border-color);
}

input {
	padding: 5px;
	background: var(--white);
	border-width: 1px;
	border-style: solid;
	border-color: var(--border-color);
}

textarea {
	padding: 5px;
	background: var(--white);
	border-width: 1px;
	border-style: solid;
	border-color: var(--border-color);
	font-size: 12px;
}

input[type="submit"],
input[type="button"] {
	padding: 8px;
	position: relative;
	display: inline-block;
	width: auto;
	height: 30px;
	line-height: 26px;
	margin: 0;
	padding: 0 23px;
	border: 0px solid transparent;
	font-weight: 700;
	text-align: left;
	color: var(--white);
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	outline: 0;
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: 1px;
	background: var(--emphasis-color);
	-o-border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-ms-border-radius: 4px;
	border-radius: 4px;
}

::-webkit-file-upload-button {
	content:'Browse...';
	left: 0%;
	margin-left:0px;
	position: relative;
	-webkit-appearance: button;
	padding: 3px 8px 2px;
	border:0px;
	color: var(--white);
	background-color: var(--emphasis-color);
	-o-border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-ms-border-radius: 4px;
	border-radius: 4px;
}

input[type="submit" i],
input[type="button" i] {
	-webkit-appearance: none;
}

#footer {
	padding: 20px 0;
	color: var(--header-inactive-color);
	background: var(--background-color);
	text-align: center;
}

input.useDhcpDisabled:disabled {
	background: var(--border-color);
}

.hidden {
	display: none;
	visibility: hidden;
}

.separate_button {
	margin-left: 60px;
}

#smcb_interface {
	display: none;
	z-index: 1;
	background: rgba(255,255,255,0.5);
	height: 100%;
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
}

#smcb_window {
	display: block;
	z-index: 2;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -300px;
	margin-top: -140px;
	width: 600px;
	height: 280px;
	text-align: center;
	align-items: center;
	vertical-align: middle;
	background: white;
	box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}

.smcb_text {
	display: block;
	width: 90%;
	font-size: 14px;
	font-weight: bold;
	margin: 25px;
}

#smcb_logout_div {
	display: block;
	width: 97%;
	font-size: 30px;
	font-weight: bold;
	margin: 5px;
	text-align: right;
}

#smcb_logout {
	cursor: pointer;
}

#smcb_countdown {
	display: none;
	width: 500px;
	margin-left: 50px;
	height: 16px;
	background-color: var(--background-color);
	border: 1px solid var(--border-color);
	border-radius: 4px;
}

#smcb_countdown div {
	display: block;
	height: 100%;
	line-height: 16px;
	border: 0px solid transparent;
	border-radius: 4px;
}

#smcb_countdown_bar {
	width: 100%;
	background: var(--emphasis-color);
}

.topalign {
	vertical-align: top;
}

pre.sha384 {
	margin: 0px;
}
.pinpadEnabled {
	display: none;
}

.pinpadInformationPeer {
	display: none;
}

.pinpadPaired {
	display: none;
}

.pinpadNotPaired {
	display: none;
}

#pairedNameLine {
	display: none;
}