body,html {
margin: 0;
padding: 0;
}

body {
font-family: "Ubuntu", sans-serif;
width: 100%;
height: 100%;
font-size: 13px;
background: #ddd;
}

a {
color: #00f;
}

a.untouched,
a.untouched:hover {
color: #00f !important;
}

td {
font-family: "Ubuntu", sans-serif;
}

.ttip {
  cursor: help !important;
}

img {
border: 0;
}

img.moreinfo {
  height: 1.5em;
  padding: 0 0.4em;
  text-align: center;
  text-align: center;
  margin: 0 auto;
  margin: 0;
  display: inline;
  opacity: 0.5;  
}

div.top_header {
padding-bottom: 10px;
padding: 1em;
border-bottom: 2px solid #bcf;
box-shadow: #000 0px 0px 8px;
}

div.maintenance div.indicator {
  background: url('static/images/maintenance.svg') no-repeat center;
  background-size: auto 200px;
  margin-top: 3em;
  height: 200px;
}

.bodywrap {
background: #4E9ACE;
box-shadow:
#999 0px 0px 80px,
#999 0px 0px 60px,
#999 0px 0px 50px,
#999 0px 0px 40px,
#999 0px 0px 30px,
#999 0px 0px 20px,
#999 0px 0px 15px,
#999 0px 0px 10px,
#999 0px 0px 8px,
#999 0px 0px 4px,
#999 0px 0px 2px
;
  max-width: calc(100% - 6em) !important;
  margin: 0 auto;
}

@media all and (min-width: 1366px) {
  .bodywrap {
    width: calc(100% - 8em - (100% - 1250px) * 0.7 );
    max-width: calc(100% - 8em - (100% - 1250px) * 0.7 );
  }
}
@media all and (min-width: 2500px) {
  .bodywrap {
    width: calc(2500px - 8em - (2500px - 1250px) * 0.7 );
    max-width: calc(2500px - 8em - (2500px - 1250px) * 0.7 );
  }
}

.csrmode .bodywrap {
  margin: 0 auto;
}
#csrshrinker {
  width: calc(100% - 14em);
}
.csrpanelhidden #csrshrinker {
  width: calc(100%);
}
#csrpanel {
  position: fixed;
  z-index: 1000;
  right: 0px;
  width: 14em;
  height: 100%;
  background: #333;
  color: #ccc;
  box-shadow: #000 0px 0px 16px;
  padding: 0;
  overflow-y: auto;
}
#csrpanel h3.alert {
  background: red;
  padding: 0.1em 0.25em;
  color: white;
}
#csrpanel h3.issue {
  background: white;
  padding: 0.1em 0.25em;
  color: black;
}
#csrpanel a.floated_alertlink,
#csrpanel a.floated_issuelink {
  color: white;
  text-decoration: none;
  padding-top: 0.2em;
  padding-right: 0.5em;
}
#csrpanel a.floated_issuelink {
  color: #00f;
}
#csrpanel a.floated_issuelink:hover,
#csrpanel a.floated_alertlink:hover {
  text-decoration: underline;
}
#csrpanel a {
  color: #9c9;
}
@media only print {
  #csrpanel {
    display: none;
  }
}
.csrpanelhidden #csrpanel.sudowarning h2 {
  background: #c00;
  padding: 0.5em;
  margin: -0.5em;
}
.csrpanelhidden #csrpanel {
  height: 2em;
  width: 3.5em;
  overflow: hidden;
}
#csrpanel .inner {
  padding: 0.5em;
}
#csrpanel h2 {
  font-size: 110%;
  font-weight: bold;
  margin: 0;
  padding: 0;
}
#csrpanel h2 {
  margin-bottom: 0.5em;
}
#csrpanel h3 {
  font-size: 100%;
  font-weight: bold;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #999;
}
.mobile .bodywrap {
  box-shadow: none;
  max-width: 100% !important;
  overflow-x: hidden;
}
#entirepage {
  background: white;
  min-height: 10em;
}

div.top_header div.logo {
float: left;
padding: 0;
}

div.top_header div.logo a {
text-decoration: none;
display: inline-block;
height: 120px;
width: 350px;
background: url('static/images/NocTel-Talk-300x122-01.svg') no-repeat;
background-size: auto 120px;
}

@media all and (max-width: 1365px) {
  div.top_header div.logo a {
    height: 70px;
    width: 200px;
    background-size: auto 70px;
  }  
}


table.login td {
font-size: 10px;
}

table.login .field input {
height: 18px;
width: 30px;
}

table.login input.button {
height: 12px;
width: 48px;
font-size: 9px;
}

div.footer {
padding: 0;
padding-bottom: 0.25em;
position: relative;
background-color: #2A528E;
margin-top: -5px;
}

div.footer div.serverid {
  font-size: 10px;
  color: #EEE;
  float: right;
  padding: 0.5em 1em;
}

div.footer div.support {
  font-size: 10px;
  color: #000;
  float: right;
  text-align: center;
  padding: 0.5em 1em;
}

div.copyright {
font-size: 10px;
padding: 0.5em 1em;
padding-top: 0.5em;
color: #fff;
border-radius: 0.5em;
margin: 1em 0.25em;
margin-top: 0.5em;
margin-bottom: 0;
}

.wrapper {
min-height: 400px;
/*    height: auto !important;*/
height: 100%;
margin: 1em;
margin-top: 0px;
padding-top: 16px;
}

.push {
}

div.alert_dialog {
/* To be used if there is a system-wide alert to show at the top of every screen for outage, holiday closure, etc.  */
/* Yellow */
border: 1px SOLID #CCC;
background-color: #FFC30F;
font-size: 14px;
padding: 10px;
margin: 10px;
}

#topnav #left_menu hr,
#menupanel_full #left_menu hr {
  border: none;
  height: 1px;
  background-color: #313034;
}

#menupanel_full #left_menu {
width: 180px;
border: 1px solid #000;
text-align: left;
margin-top: 16px;
margin-left: 12px;
background: #555664;
color:white;
margin-bottom: 20px;
}

.pagebody {
margin-left: 200px;
min-height: 24em;
}

#menupanel_full #left_menu a {
color: #FFF;
text-decoration: none;
}

#menupanel_full #left_menu .selected {
font-weight: bold;
color: #FCDC93;
}

#menupanel_full #left_menu div.menu_header .closebutton,
#menupanel_full #left_menu div.menu_header .closebutton a {
color: white;
line-height: 1.0;
}
#menupanel_full #left_menu div.menu_header .closebutton:hover {
background: white;
color: black;
border-radius: 0.5em;
}

#menupanel_full div.menu_header {
background-color: #3A3B4A;
text-align: left;
font-weight: bold;
color: white;
padding: 0.5em;
font-size: 120%;

}

#menupanel_full a.menu_section {
display: block;
padding: 0.35em;
font-size: 110%;
padding-left: 0.5em;
}

#menupanel_full a.menu_section:hover {
background: #313034;
}

#topnav .menu_header {
  font-size: 140%;
  line-height: 2;
  padding: 0 1em;
  background: #003;
  color: #fc9;
  border-right: 1px solid #46c;
}
.mobile #topnav {
  padding-bottom: 1em;
}
.mobile #topnav a:last-child {
  border-bottom: 1px solid #000;
}
.mobile #topnav #controlpanel_item {
  display: none;
}
#website_item {
  display: none;
}
#website_sep {
  display: none;
}
.mobile #website_sep {
  display: block;
}
.mobile #website_item {
  display: block;
}
#topnav a div.selected {
  color: #fc9;
  background: #006;
}
#topnav .menu_header a {
  font-size: 100%;
  background: #006;
  padding: 0 1em;
  margin-left: -1em;
  margin-right: 1em;
}
.mobile #topnav {
  display: none;
}

#menupanel_full div.menu_item {
display: block;
}

#menupanel_full a.menu_sub_item {
display: block;
padding: 0.35em;
padding-left: 1.5em;
font-size: 110%;
}

#topnav .menu_sub_item {
  padding: 0.5em 1em;
  padding-left: 2em;
/*  margin: -0.5em -1em; */
/*  border: none; */
font-weight: 100;
}

#menupanel_full a.menu_sub_item:hover {
background-color: #313034;
}

a.menu_sub_item_selected {
padding: 3px;
border: 2px solid #999;
padding-left: 15px;
font-weight: bold;
/*    background-color: #B0ADAD;*/
}

table.grid {
width: 730px;
border-collapse: collapse;
border: 1px solid #CCC;
margin: 1em;
}

table.grid tr {
height: 20px;
border-bottom: 1px SOLID #EEE;
}

table.grid {
box-shadow: #999 6px 6px 40px;
}

.tabpage table.grid {
  box-shadow: #ccc 6px 6px 15px;
  margin-left: 1.5em;
  width: calc(100% - 3em);
}

.tabpage table.grid td {
  padding-top: 0.25em;
  padding-bottom: 0.25em;
}

.tabpage table.grid.subtlehover tr:hover td {
  background: #eee;
}

#tabpage_dialing .crunched_options p {
  padding-top: 0;
  margin-top: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}

#tabpage_dialing .crunched_options em {
  font-weight: bold;
  color: #000;
  line-height: 2.0;
  font-style: normal;
  background: #ddd;
  padding: 0.25em 0.5em;
}

#tabpage_dialing .crunched_options h4 {
  padding-bottom: 0em;
  padding-top: 0em;
  margin-top: 1em;
  margin-bottom: 1em;
}

table.grid th {
text-align: center;
color: white;
padding-top: 3px;
padding-bottom: 3px;
font-size: 100%;

background: #4c4c4c; /* Old browsers */

background: -moz-linear-gradient(top,  #4c4c4c 0%, #595959 12%, #666666 25%,
#474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%,
#131313 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,#4c4c4c), color-stop(12%,#595959), color-stop(25%,#666666),
color-stop(39%,#474747), color-stop(50%,#2c2c2c), color-stop(51%,#000000),
color-stop(60%,#111111), color-stop(76%,#2b2b2b), color-stop(91%,#1c1c1c),
color-stop(100%,#131313)); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top,  #4c4c4c 0%,#595959 12%,#666666
25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c
91%,#131313 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top,  #4c4c4c 0%,#595959 12%,#666666 25%,#474747
39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);
/* Opera 11.10+ */

background: -ms-linear-gradient(top,  #4c4c4c 0%,#595959 12%,#666666 25%,#474747
39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);
/* IE10+ */

background: linear-gradient(to bottom,  #4c4c4c 0%,#595959 12%,#666666
25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c
91%,#131313 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c',
endColorstr='#131313',GradientType=0 ); /* IE6-9 */

}

.tabpage table.grid th {
  background: #666;
}

table.grid th a {
color: white;
text-decoration: none;
}
table.grid th a:hover {
text-decoration: underline;
}

table.grid td {
padding-left: 1em;
text-align: left;
font-size: 105%;
}

table.bedit td {
padding-left: 0.5em;
padding-top: 1em;
vertical-align: top;
font-size: 11px;
}

table.grid tr.newsection td {
border-top: 2px solid #999;
}

div.tab {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-left: 1px solid #AAA;
border-top: 1px solid #AAA;
border-right: 1px solid #AAA;
width: 15em;
padding: 0.2em;
margin-top: 1em;
margin-bottom: -1px;
position: relative;
z-index: 2;
text-align: center;
font-weight: bold;
font-size: 14px;
background-color: #FFF;  /* JD 2013-06-25 */
margin-right: 0.25em;
}
div.tabactive {
cursor: pointer;
float: left;
width: auto;
background: white;
padding-left: 1em;
padding-right: 1em;
}
div#tab_csr.tabinactive {
background: url("images/csr.gif") repeat 0 0 transparent;
}
div.tabinactive {
cursor: pointer;
float: left;
border-bottom: 1px solid #AAA;
position: relative;
top: -1px;
padding-left: 1em;
padding-right: 1em;
margin-bottom: -2px;
background: #ccc;
width: auto;
}
div.tabpage {
padding: 1px;
padding-top: 1em;
display: block;
overflow-x: scroll;
padding-bottom: 1em;
}
div.tabpageactive {
display: block;
overflow-x: scroll;
}
div.tabpageinactive {
display: none;
background: silver;
}
div.tabpagecontainer {
border: 1px solid #AAA;
clear: left;
width: 100%;
z-index: 1;
background: white;
position: relative;
}
table.edit {
border-collapse: collapse;
padding: 1em;
position: relative;
z-index: 1;
border: 1px solid #AAA;
border-bottom-left-radius: 5px
border-bottom-right-radius: 5px
}

table.tabcontent {
border: none;
}

table.edit tr {
height: 30px;
}

table.formgrid th,
table.edit th {
width: 180px;
padding-left: 0.5em;
padding-top: 1em;
vertical-align: top;
font-size: 12px;
}
table.formgrid th {
text-align: left;
}

table.tabcontent th {
text-align: right;
}

table.edit td {
width: 0px;
font-size: 11px;
padding-right: 1em;
padding-left: 1em;
padding-top: 1em;
/*    background-color: #EEE;   JD 2013-06-25 */
}

table.edit td input {
}

table.edit td select {
width: 290px;
}
/* Header Style */

div.status_graph {
width: 150px;
border: 1px SOLID #CCC;
float: left;
text-align: center;
font-weight: bold;
}

div.ext_type_div td {
padding: 1em;
padding-left: 1em;
text-align: left;
}

div.ext_type_div  {
border: 3px SOLID #CCC;
width: 100%;
display: none;
}

div.ext_type {
font-size: 14px;
padding: 0.5em;
cursor: pointer;

}

.ext_type:hover {
background-color: #BBC5D7;
}

div.ivr_item {
float: left;
display: none;
}

/* dropdown for autocomplete in admin page */
.firstcol {
display: inline-block;
width: 115px;
}

.adminterm {
font-weight:bold;
color:blue;
}

.hide {
display:none;
}

.error {
border:1px solid red;
}

#ajaxstatus {
height:19px;
font-weight:bold;
padding-left: 4px;
display: inline-block;
}
input.ui-autocomplete-loading {
background: white url('autocomplete/images/ui-anim_basic_16x16.gif') right center no-repeat;
}

#busy {
background: url("images/ajax-loader.gif") no-repeat scroll 0 0 transparent;
height:16px;
width: 16px;
display: inline-block;
}

#busy.hide {
visibility:hidden;
}

.clear{
clear:both;
}

#overlay {
background-color: #000000;
display: none;
height: 100%;
opacity: 0.6;
position: fixed;
top: 0;
width: 100%;
z-index: 2;
}

.button{
background: #FFFFFF;
border: 2px solid #222222;
cursor: pointer;
display: inline-block;
font-size: 13px;
margin-bottom: 5px;
margin-left: 5px;
margin-top: 7px;
padding: 2px;
text-align: center;
width: 70px;
}

.button:hover {
background: #666666;
color: #FFFFFF;
}

#email_result{
font-weight:bold;
height:19px;
}

a.delete_range,
a.delete_action {
color: #999;
text-decoration: none;
}
a.delete_range:hover,
a.delete_action:hover {
  color: red;
}
a.move_range,
a.move_action {
color: #999;
text-decoration: none;
}
a.move_range:hover,
a.move_action:hover {
color: #00F;
}
body tr.menuoption {
display: none;
}
body.showmenuoptions tr.menuoption {
display: table-row;
}
table.edit tr.menuoption_invalid th,
table.edit tr.menuoption_invalid td {
padding-top: 2em;
}

table.edit td.action {
white-space: nowrap;
width: 100%;
}
div.sortlist div.buttons,
table.edit td.buttons {
white-space: nowrap;
padding-left: 2em;
width: 1%;
vertical-align: top;
padding-top: 1.25em;
}
div.sortlist {
  display: table-row;
}
div.sortlist div.buttons {
  display: table-cell;
  padding-right: 1em;
}
div.sortlist > div > div {
  display: table-cell;
}
div.sortlist div.butons .moveup_action,
table.edit td.buttons .moveup_action {
position: relative;
top: -0.05em;
}
table.edit th.step {
white-space: nowrap;
padding-left: 0em;
}
div.sortlist div.buttons a,
table.edit td.buttons a {
padding: 0 0.2em !important;
}
table.edit th {
vertical-align: center !important;
}
#tabpage_routing div.buttons,
#tabpage_inbound td.buttons,
#tabpage_cid div.buttons {
font-size: 100%;
line-height: 0.8;
white-space: nowrap;
text-align: right;
}
#tabpage_inbound td.buttons a.delete_action {
font-size: 150%;
position: relative;
top: 0.15em;
}
.addicon,
#tabpage_routing div.buttons a.delete_range,
#tabpage_cid div.buttons a.delete_range {
  font-size: 150%;
}
.addicon {
  margin-right: 0.1em;
  color: #999;
}

#tabpage_routing td.buttons span,
#tabpage_inbound td.buttons span {
position: relative;
top: -0.5em;
}
#tabpage_inbound th.label {
white-space: nowrap;
padding-right: 0.5em;
}
#tabpage_inbound .data {
display: none;
}
#tabpage_inbound tr.actionlistfirst .moveup_action {
display: none;
}
#tabpage_inbound tr.actionlistlast .movedown_action {
display: none;
}
#tabpage_inbound tr.swapping th.label span,
#tabpage_inbound tr.filling th.label span {
visibility: hidden;
}
#tabpage_inbound tr.swapping td.buttons {
visibility: hidden;
}
#tabpage_inbound tr.swapping select {
visibility: hidden;
}
.actionlist_tail {
display: none;
}
#actiontypelist {
display: none;
}
#tabpage_routing td.buttons span,
#tabpage_inbound td.buttons span {
display: block;
width: 5.5em;
}
body.ajaxloading #tabpage_inbound .moveup_action,
body.ajaxloading #tabpage_inbound .movedown_action {
display: none;
}
#tabpage_inbound table td,
#tabpage_inbound table th {
background: none;
}

div.clearing {
height: 1px;
margin-top: -1px;
clear: both;
}

h4 {
margin-bottom: 0;
padding-bottom: 0;
}
.newswrapper p {
padding-top: 0.5em;
margin-top: 0;
}
.disabled {
opacity: 0.5;
}

div.infoarea {
background: #93C986;
width: 30em;
padding: 1em;
margin: 2em;
}
div.infoarea th {
text-align: right;
padding: 0.5em 1em;
}
div.infoarea td {
padding: 0.5em 1em;
}
tr.clickable {
cursor: pointer;
}
tr.clickable:hover td {
background: #fc9;
}

.headerbg {


background: #2A528E; /* Old browsers */
}

#loginpage {
  font-size: 100%;
  text-align: center;
  background: #e7f4fa;
  margin-right: 0em;
  position: relative;
  top: 1px;
}


h2 {
  padding-left: 0.5em;
}

h2#extheading {
  padding-right: 0.5em;
}

#loginpage h2 {
  font-size: 120%;
  padding: 2em;
  padding-top: 1em;
  padding-bottom: 1em;
}


#loginpage div.login {
padding: 0em;
margin: 0 auto;
width: 260px;
border-radius: 1em;
margin-top: 1.5em;
white-space: nowrap;
border: 1px solid #000;
box-shadow: #016 0px 0px 16px;
background: #eee;

}

#loginpage div.inner {
padding: 1em;
}
#loginpage .loginoptions {
  padding: 1em;
  font-size: 110%;
}

#loginpage .loginoptions span {
color: #999;
}

#loginpage .loginoptions a {
text-decoration: none;
}

#loginpage .loginoptions a:first-child {
font-weight: bold;
}

#loginpage .loginoptions a:hover {
text-decoration: underline;
}

#loginpage .field {
  font-size: 100%;
  text-align: left;
}
#loginpage .caption {
  padding-left: 0;
}
#loginpage .field input {
  margin-left: -0.1em;
  margin-right: 0.5em;
}
input[type="submit"] {
font-family: "Ubuntu", sans-serif;
}

.deeptitlebar {
color: white;
font-weight: bold;
background: #336;
padding: 0.2em 0.5em;
font-size: 120%;
border-radius: 0.4em;

}
table.wizardform, table.newform {
margin-top: 1em;
border-collapse: collapse;
}
table.wizardform th, table.newform th {
text-align: right;
padding-right: 0.5em;
white-space: nowrap;
}
table.subtab {
border-collapse: collapse;
}
table.subtab > tr > td,
table.subtab > tr > th {
padding: 0;
margin: 0;
}
.errortext {
color: #f00;
font-weight: bold;
}

h2 a {
text-decoration: none;
}
h2 a:hover {
text-decoration: underline;
}
div.sudowrap table.grid {
  width: calc(100% - 3em) !important;
  max-witdh: calc(100% - 3em) !important;
}
div.sudowrap form {
  float: left;
}
a.sudojump {
color: black !important;
border: 2px solid #999;
box-shadow: #000 0px 0px 4px;
background: #ccc; /* url('images/csr.gif'); */
padding: 0.2em 0.5em;
display: inline-block;
top: -0.5em;
border-radius: 0.5em;
position: relative;
text-decoration: none;
}
a.sudo {
display: inline-block;
background: #c00;
border: 2px solid black;
border-radius: 1em;
padding: 0.5em 1em;
text-decoration: none;
color: white;
position: relative;
top: -0.5em;
z-index: 1000;
}
a.sudo:hover {
background: #000;
}
.cpstatus p {
margin: 0;
padding: 0;
color: white;
}
.csr {
background: url("images/csr.gif") repeat 0 0 transparent;
}
.csrgrid table.grid {
margin: 0;
}
.csrgrid table.grid tr.calllog_normal td,
.csrgrid table.grid tr.calllog_alert td {
background: white;
}
table.grid tr.calllog_alert td.message {
color: red;
}
tr.hascsrnotes td {
background: #fcc;
}
tr.marked td {
background: #cfc;
}
tr.marked.hascsrnotes td:first-child {
background: #fcc;
}
tr.marked.hascsrnotes:hover td {
background: #fc9;
}
tr.pending td {
font-style: italic;
}
table.grid td.t {
vertical-align: top;
}
table.grid td.r, table.grid th.r,
td.r, th.r {
text-align: right;
}
table.newform td.l, table.newform th.l,
table.wizardform td.l, table.wizardform th.l,
table.grid td.l, table.grid th.l,
td.l, th.l {
text-align: left;
}
table.grid td.c, table.grid th.c,
td.c, th.c {
text-align: center;
}
table.grid td.rp, table.grid th.rp,
td.rp, th.rp {
padding-right: 1em;
}
table.grid td.lp, table.grid th.lp,
td.lp, th.lp {
padding-left: 1em;
}

div.actionfailed,
div.actionsuccess,
div.specialoffer,
div.actionrequired {
background: #afa;
padding: 1em;
border-radius: 1em;
margin: 1em;
}

div.specialoffer {
  display: table;
  margin: 0;
  margin-bottom: 1em;
}

div.actionfailed {
background: #faa;
}
div.contentbody div.actionfailed,
div.contentbody div.actionsuccess,
div.contentbody div.specialoffer,
div.contentbody div.actionrequired {
margin-left: 0;
}
div.actionfailed a,
div.actionsuccess a,
div.specialoffer a,
div.actionrequired a {
color: #00f;
text-decoration: none;
}
div.actionfailed a:hover,
div.actionsuccess a:hover,
div.specialoffer a:hover,
div.actionrequired a:hover {
text-decoration: underline;
}
div.actionrequired, div.actionfailed {
background-image: url('static/images/alert.svg');
min-height: 4em;
padding-left: 6.5em;
background-size: auto 4em;
background-repeat: no-repeat;
background-position: 1em center;
}
table.numberslist tr.number_portrequested td,
table.numberslist tr.number_portpossible td,
table.numberslist tr.number_portloareceived td,
table.numberslist tr.number_portsubmitted td,
table.numberslist tr.number_portfocreceived td,
table.numberslist tr.number_portbillreceived td {
font-style: italic;
}
a.gridanchor {
color: #000;
text-decoration: none;
}
table.numberslist tr.number_portrequested td.number a.gridanchor,
table.numberslist tr.number_portpossible td.number a.gridanchor,
table.numberslist tr.number_portloareceived td.number a.gridanchor,
table.numberslist tr.number_portsubmitted td.number a.gridanchor,
table.numberslist tr.number_portfocreceived td.number a.gridanchor,
table.numberslist tr.number_portbillreceived td.number a.gridanchor {
color: #999;
}
table.numberslist tr.number_portnotpossible td.number a.gridanchor,
table.numberslist tr.number_portfailure td.number a.gridanchor {
color: #900;
text-decoration: line-through;
}
table.numberslist tr.number_portnotpossible td.status,
table.numberslist tr.number_portfailure td.status {
color: red;
}
table.numberslist tr.number_portrequested td.status,
table.numberslist tr.number_portpossible td.status,
table.numberslist tr.number_portloareceived td.status,
table.numberslist tr.number_portsubmitted td.status,
table.numberslist tr.number_portfocreceived td.status,
table.numberslist tr.number_portbillreceived td.status {
color: #090;
}
table.numberslist tr.number_portfocreceived td.status {
font-style: normal;
font-weight: bold;
}
table.numberslist tr.number_deleted td {
background: #ccc;
opacity: 0.5;
}
table.numberslist tr.number_deleted:hover td {
background: #999;
}
.beta {
background: black;
color: white;
padding: 0.5em 1em;
font-weight: bold;
text-align: right;
}

.ntl_displaytablecell .guide {
  display: table-cell;
}

div.guide {
background: #fc3;
margin: 1em;
padding: 0.5em 1em;
border-radius: 1em;
margin-bottom: 2em;
}
div.guide a {
color: #00f;
text-shadow: #fff 0px 0px 3px, #fff 0px 0px 4px;
text-decoration: none;
}
div.guide a:hover {
text-decoration: underline;
color: black;
}
div.guide p {
padding: 0.5em 0;
margin: 0;
}
.contentbody {
padding-left: 1em;
padding-right: 1em;
}
.contentbody table.grid {
margin-left: 0;
}

table.grid tr.lightbar_cursor td,
table.grid tr.lightbar_cursor th,
table.grid tr.lightbar_cursor a.gridanchor {
background: #000;
color: white;
}

tr.thenmaster th.label,
tr.thenclause th.label {
background: #9c9 !important;
}
tr.thenmaster td.action,
tr.thenclause td.action {
background: #cfc !important;
padding-left: 2em;
}
tr.elsemaster th.label,
tr.elseclause th.label {
background: #c99 !important;
}
tr.elsemaster td.action,
tr.elseclause td.action {
background: #fcc !important;
padding-left: 2em;
}
tr.swapping td.action,
tr.swapping th.label {
background: white !important;
}
#sourceanim,
#destanim {
position: absolute;
opacity: 0.6;
background: #ccc;
}
#sourceanim td.action,
#destanim td.action {
background: white !important;
}
#tabpage_inbound table.slider {
border-collapse: collapse;
}
div.sortlist div.swapping {
  opacity: 0.5;
}
div.sortlist span.insert {
  display: block;
  position: relative;
  top: -2em;
  padding: 0.5em 0;
  margin-bottom: -2.5em;
  color: white;
  text-align: left;
  width: 5em;
  text-align: right;
}
div.sortlist div:hover span.insert span.addicon {
  color: #999;
}
div.sortlist div span.insert:hover,
div.sortlist div span.insert:hover span.addicon {
  color: #33f;
  cursor: pointer;
}
.movable.no_up .moveup_action,
.movable.no_down .movedown_action {
  opacity: 0;
  cursor: default;
  background: lime;
}
#tabpage_inbound tr.swapping table.slider select {
visibility: visible !important;
}
#tabpage_inbound table.slider th.label {
border: none;
visibility: hidden;
}
#tabpage_inbound table.slider td {
border: none;
}
#tabpage_inbound table.slider td.buttons {
display: none;
}

div.blackwidget,
div.whitewidget {
width: 0.7em;
height: 0.7em;
margin-top: 0.05em;
margin-left: 0.05em;
background: black;
border: 2px solid #666;
float: left;
cursor: pointer;
}
div.blackwidget:hover,
div.whitewidget:hover {
border: 2px solid #fff;
}
div.whitewidget {
border: 2px solid black;
background: #ccc;
}
div.workwidget,
div.workwidget:hover {
background: #666;
border: 2px solid #000;
}
table.grid th a.activesort:after {
font-weight: bold;
content: '\0025bc';
color: #fff;
text-decoration: none;
}
table.grid th a:hover {
color: #fc9;
text-decoration: none;
}
.flaticon {
opacity: 0.6;
}
.flaticon_inactive {
opacity: 0.20;
}
a:hover .flaticon {
opacity: 1.0;
}
table.grid tr.unread td {
font-weight: bold;
}

a.pageaction {
position: relative;
z-index: 100;
margin-right: 1em;
}

a.pageaction img.flaticon {
vertical-align: middle;
margin-right: 0.5em;
height: 1.5em;
}

a.faxsend span.faxsend_stauts {
color: black;
}
a.faxsend_pending span.faxsend_status {
font-weight: bold;
color: black;
}
a.faxsend span.faxsend_failed {
color: red;
}
.nw {
white-space: nowrap;
}
kbd.light {
font-family: "monospace";
font-size: 125%;
font-weight: bold;
margin: 0 0.25em;
padding: 0.25em;
}
table.history td.dtaction {
white-space: nowrap;
}
table.history span.actiontype {
color: #060;
font-weight: bold;
}
table.infogrid {
border-collapse: collapse;
margin-left: 1em;
}
table.infogrid th {
padding: 0.5em;
background: #ccc;
color: black;
border-bottom: 4px solid #999;
}
table.infogrid {
border: 1px solid #ccc;
}
table.infogrid tr.odd td {
background: #fc9;
}
table.infogrid tr.even td {
background: #fff;
}
table.grid tr span.celloverlay {
background: white;
box-shadow: 12px 0px 12px 0px #fff;
z-index: 105;
}
table.grid tr:hover span.celloverlay {
background: inherit;
color: #930;
box-shadow: none;
z-index: 100;
}
table.grid tr div.cellsecondary {
color: #999;
background: white;
float: right;
text-align: right;
height: 0px;
overflow: visible;
padding-left: 1em;
margin-right: -1px;
}
table.grid tr:hover div.cellsecondary {
background: #fc9;
height: 1.1em;
color: #000;
position: relative;
z-index: 110;
box-shadow: -12px 0px 12px 0px #fc9;
}
div.infoarea img {
box-shadow: #000 0px 0px 10px;
}
.phonesel div.infoarea img {
box-shadow: none;
}
span.presenceicon {
padding: 1px;
padding-left: 1.75em;
background: url('static/images/presence-unknown.svg') center left no-repeat;
background-size: 1.5em 1.5em;
white-space: nowrap;
line-height: 1.5
}
div.infoarea img {
box-shadow: #000 0px 0px 10px;
}
.phonesel div.infoarea img {
box-shadow: none;
}
span.presence_virtual { background-image: url('static/images/presence-virtual.svg'); }

span.presence_offline { background-image: url('static/images/presence-offline.svg'); }
span.presence_offline_offline { background-image: url('static/images/presence-offline.svg'); }

span.presence_ringing {  background-image: url('static/images/presence-ringing.svg'); }
span.presence_offline_ringing {  background-image: url('static/images/presence-ringing.svg'); }

span.presence_available {  background-image: url('static/images/presence-available.svg'); }
span.presence_forward {  background-image: url('static/images/presence-forward.svg'); }
span.presence_away {  background-image: url('static/images/presence-away.svg'); }
span.presence_outofoffice {  background-image: url('static/images/presence-outofoffice.svg'); }
span.presence_lunch {  background-image: url('static/images/presence-lunch.svg'); }
span.presence_busy {  background-image: url('static/images/presence-busy.svg'); }
span.presence_working {   background-image: url('static/images/presence-working.svg'); }

span.presence_offline_away {  background-image: url('static/images/presence-offline-away.svg'); }
span.presence_offline_outofoffice {  background-image: url('static/images/presence-offline-outofoffice.svg'); }
span.presence_offline_lunch {  background-image: url('static/images/presence-offline-lunch.svg'); }
span.presence_offline_busy {  background-image: url('static/images/presence-offline-busy.svg'); }
span.presence_offline_working {   background-image: url('static/images/presence-offline-working.svg'); }

span.presence_talking-available { background-image: url('static/images/presence-talking-available.svg'); }
span.presence_trunk { background-image: url('static/images/presence-trunk.svg'); }

span.presence_faxata { background-image: url('static/images/presence-faxata.svg'); }

span.presence_offline_talking,
span.presence_talking {  background-image: url('static/images/presence-talking.svg'); }
span.presence_offline_hold,
span.presence_hold {  background-image: url('static/images/presence-hold.svg'); }

span.sip_offline .statusmode,
span.sip_offline .message {
opacity: 0.5;
}

td.keyfunction div.function[data-realtype="dial"] span.presenceicon {
  background-image: url('static/images/speeddial.svg');
  background-position: 26% center;
  background-size: 1em 1em;
}

td.keyfunction div.function[data-realtype="voicemail"] span.presenceicon {
  background-image: url('static/images/inbox.svg');
}

td.keyfunction div.function[data-realtype="blank"] span.presenceicon {
  background-image: url('static/images/blank-speeddial.svg');
}

.floatwin {
  border: 1px solid black;
  box-shadow: #000 0px 0px 10px;
  padding: 0 0.5em;
  border-radius: 0.5em;
  background: white;
  position: absolute;
}

.shelf, .shelf2 {
margin: 0;
width: 100%;
background: #eee;
border: 1px solid #999;
border-top: 0px;
padding-top: 1px;
}
.shelf {
background: #ccc;
}
.shelf > div, .shelf2 > div {
padding: 1em;
}
.shelfchart {
padding: 0;
margin-right: -10px;
background: white;
margin-right: 1em;
overflow: hidden;
border-radius: 1em;
margin-bottom: 1em;
}
.shelf input[type="submit"] {
box-sizing: content-box;
font-size: 16px;
margin-right: 1em;
padding: 0.5em 1em !important;
}

body.mobile div.top_header div.logo {
  float: right;
  margin-right: 1em;
  margin-left: 1em;
}
body.mobile div.top_header div.logo a {
text-decoration: none;
  background: url('static/images/NocTel_TalkOnly_Logo_HORZ_RevWht_RGB.svg') no-repeat;
  background-size: auto 42px;
  border: none;
  height: 50px;
  width: 105px;
margin: 0;
display: inline-block;
}

#menubutton {
display: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
body.mobile .pagebody {
margin-left: 0;
}
body.mobile #menubutton {
display: block;
height: 25px;
background: #036;
float: left;
margin-right: 10px;
padding-top: 5px;
border-radius: 4px;
padding-bottom: 5px;
cursor: pointer;
font-size: 140%;
line-height: 1.4;
color: #39f;
font-weight: normal;
padding-right: 0.5em;
}
body.mobile #menubutton:hover,
body.mobile #menubutton:hover div.glyph div {
box-shadow: #fff 0px 0px 2px;
}
body.mobile #menubutton div.glyph {
  float: left;
  width: 34px;
}
.cpstatus {
  color: white;
}
body.mobile .cpstatus,
body.mobile .cpstatus.login {
display: block;
float: none;
padding-right: 1em;
}
body.mobile .cpstatus.login .sudo {
display: none;
}
body.mobile.menumode .cpstatus.login .sudo {
display: block;
white-space: nowrap;
position: absolute;
top: 8px;
left: 170px;
}
body.mobile .cpstatus p {
display: inline;
margin-right: 1em;
white-space: nowrap;
}
#menubutton .glyph div {
background: #fff;
height: 3px;
margin: 6px;
margin-top: 4px;
margin-bottom: 0;
}
body.mobile div.mencol {
display: none;
font-size: 140%;
}
body.mobile {
padding-top: 50px;
}
body.mobile a.pageaction {
display: block;
font-size: 120%;
line-height: 2.0;
}
body.mobile a.pageaction img {
width: 32px;
}
body.mobile table.grid {
margin: 0;
margin-top: 0.5em;
margin-left: 0;
width: 100%;
margin-right: 0.5em;
}
body.mobile table.grid td {
font-size: 120%;
padding: 1em 0.5em;
}
body.mobile div.top_header {
height: 42px;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
z-index: 200;
overflow: hidden;
padding: 6px;
margin: 0;
}
body.mobile #topnav {
  display: block;
}
body.mobile #topnav a {
  display: block;
}
/*
body.mobile.menumode div.menu_header {
border-radius: 0;
margin: 0;
}
body.mobile.menumode div#left_menu {
width: auto;
border: none;
padding-top: 0.5em;
margin: 0;
padding-bottom: 3em;
border-radius: 0;
box-shadow: none;
}
*/

.compaterror {
color: #000;
border: 4px solid red;
padding: 1em;
}

.topnavwrapper {
float: left;
}
.mainbodywrapper {
padding: 2em;
}

.serviceinterruption {
margin:1em; padding: 2em; background-color: #FFC30F; border: 5px solid RED; font-size: 14px;
}


.ntl_nomargin { margin: 0; }
.ntl_nopadding { padding: 0; }
.ntl_nowrap { white-space: nowrap; }
.ntl_left { float: left; }
.ntl_taleft { text-align: left; }
.ntl_right { float: right; }
.ntl_taright { text-align: right; }
.ntl_clearleft { clear: left; }
.ntl_blacktext { color: #000; }
.ntl_tablelayoutfixed { table-layout: fixed; }
.ntl_overflowhidden { overflow: hidden; }
.ntl_width10perc { width: 10%; }
.ntl_width15perc { width: 15%; }
.ntl_width20perc { width: 20%; }
.ntl_width30perc { width: 30%; }
.ntl_width50perc { width: 50%; }
.ntl_width35perc { width: 35%; }
.ntl_width65perc { width: 65%; }
.ntl_width80perc { width: 80%; }
.ntl_padleft4x { padding-left: 4px; }
.ntl_padleft1em { padding-left: 1em; }
.ntl_padleft1p5em { padding-left: 1.5em; }
.ntl_padleft0p25em { padding-left: 0.25em; }
.ntl_relative { position: relative; }
.ntl_zindex120 { z-index: 120; }
.ntl_padright1em { padding-right: 1em; }
.ntl_height1p5em { height: 1.5em; }
.ntl_rightmargin0p5em { margin-right: 0.5em; }
.ntl_width400px { width: 400px; }
.ntl_marginbottom0 { margin-bottom: 0; }
.ntl_width5em { width: 5em; }
.ntl_width10em { width: 10em; }
.ntl_width20em { width: 20em; }
.ntl_marginright1em { margin-right: 1em; }
.ntl_marginright4em { margin-right: 4em; }
.ntl_marginbottom4em { margin-bottom: 4em; }
.ntl_nounderline { text-decoration: none; }
.ntl_margin1p5em { margin: 1.5em; }
.ntl_padding0p25em1em { padding: 0.25em 1em; }
.ntl_padtop0p5em { padding-top: 0.5em; }
.ntl_padtop0p25em { padding-top: 0.25em; }
.ntl_padbottom0p25em { padding-bottom: 0.25em; }
.ntl_bgccc { background: #ccc; }
.ntl_valignmiddle { vertical-align: middle; }
.ntl_fontweightnormal { font-weight: normal; }
.ntl_redtext { color: red; }
.ntl_width710px { width: 710px; }
.ntl_padright3em { padding-right: 3em; }
.ntl_padleft0p5em { padding-left: 0.5em; }
.ntl_valigntop { vertical-align: top; }
.ntl_bgwhite { background: white; }
.ntl_br0p5em { border-radius: 0.5em; }
.ntl_padding1em { padding: 1em; }
.ntl_padding2em { padding: 2em; }
.ntl_padding3em { padding: 3em; }
.ntl_padding1em0 { padding: 1em 0; }
.ntl_width760px { width: 760px; }
.ntl_padbottom1em { padding-bottom: 1em; }
.ntl_padright5px { padding-right: 5px; }
.ntl_margin0auto { margin: 0 auto; }
.ntl_clearboth { clear: both; }
.ntl_padleft2em { padding-left: 2em; }
.ntl_padleft3em { padding-left: 3em; }
.ntl_padleft4em { padding-left: 4em; }

.ntl_topneg0p5em { top: -0.5em; }
.ntl_width3em { width: 3em; }
.ntl_margintop1em { margin-top: 1em; }
.ntl_nomarginbottom { margin-bottom: 0; }
.ntl_padleft2p5em { padding-left: 2.5em; }
.ntl_padding1px { padding: 1px; }
.ntl_lineheight2p5 { line-height: 2.5; }

.ntl_padleft2p5em { adding-left: 2.5em; }
.ntl_width4em { width: 4em; }
.ntl_width15em { width: 15em; }
.ntl_widthauto { width: auto; }
.ntl_width100perc { width: 100%; }

.ntl_padding02em { padding: 0 2em; }
.ntl_margin1em { margin: 1em; }
.ntl_padding1em { padding: 1em; }

.ntl_width20em { width: 20em; }
.ntl_height20em { height: 20em; }

.shelfshadow {
padding: 0 !important;
position: relative;
top: -1x;
height: 1px;
box-shadow: #000 0px 1px 8px;
overflow: hidden;
}

.ntl_graytext { color: #999; }

.ntl_nomarginleft { margin-left: 0; }
.ntl_nopadleft { padding-left: 0; }

.ntl_nopaddingleft { padding-left: 0; }
.ntl_displaytable { display: table; }

.ntl_height22em { height: 22em; }

.ntl_maxwidth800px { max-width: 800px; }

.ntl_nomargintop { margin-top: 0; }
.ntl_nopaddingtop { padding-top: 0; }

.ntl_tacenter { text-align: center; }
.ntl_padright1em { padding-right: 1em; }

.ntl_width25em { width: 25em; }
.ntl_nopaddingleft { padding-left: 0; }
.ntl_width100px { width: 100px; }
.ntl_graytext { color: #999; }
.ntl_width70px { width: 70px; }

.ntl_padright2em { padding-right: 2em; }
.ntl_marginright6em { margin-right: 6em; }
.ntl_padtop1em { padding-top: 1em; }
.ntl_padbottom1em { padding-bottom: 1em; }
.ntl_padright15perc { padding-right: 15%; }
.ntl_padright20perc { padding-right: 20%; }
.ntl_fontweight100 { font-weight: 100; }
.ntl_padleft0p5em { padding-left: 0.5em; }

.ntl_zindex100 { z-index: 100; }
.ntl_absolute { position: absolute; }
.ntl_height4em { height: 4em; }
.ntl_topneg4em { top: -4em; }
.ntl_left10em { left: 10em; }

.ntl_greentext { color: #090; }
.ntl_f00text { color: #f00; }
.ntl_margin01em { margin: 0 1em; }
.ntl_marginleft1em { margin-left: 1em; }
.ntl_height2em { height: 2em; }
.ntl_padding01em { padding: 0 1em; }
.ntl_padding02em { padding: 0 2em; }

.ntl_bordernone { border: none; }
.ntl_width4em { width: 4em; }
.ntl_height1p8em { height: 1.8em; }
.ntl_marginleftneg2p5em { margin-left: -2.5em; }
.ntl_margintopneg0p3em { margin-top: -0.3em; }
.ntl_nopaddingtop { padding-top: 0; }
.ntl_nomargintop { margin-top: 0; }

.ntl_padbottom1em { padding-bottom: 1em; }
.ntl_width600px { width: 600px; }
.ntl_width760px { width: 760px; }
.ntl_valigncenter { vertical-align: center; }
.ntl_valignmiddle { vertical-align: middle; }
.ntl_leftneg1em { left: -1em; }
.ntl_width740px { width: 740px; }
.ntl_padding0p5em1em { padding: 0.5em 1em; }

.ntl_width250px { width: 250px; }
.ntl_padding1em0 { padding: 1em 0; }
.ntl_width25em { width: 25em; }
.ntl_padright5px { padding-right: 5px; }
.ntl_marginright2em { margin-right: 2em; }

table.tabcontent th.ntl_padleft2p5em { padding-left: 2.5em; }
table.tabcontent th.ntl_taleft { text-align: left; }

table.grid.ntl_width100perc { width: 100%; }

.infoarea.ntl_marginbottom0p5em {
margin-bottom: 0.5em;
}
td.ntl_valigntop {
vertical-align: top;
}
div.infoarea.ntl_widthauto { width: auto; }
div.infoarea td.ntl_nomargin { padding: 0; }
div.infoarea td.ntl_padright1em { padding-right: 1em; }

form.ntlpadtop1em { padding-top: 1em; }
.ntl_marginbottom1em { margin-bottom: 1em; }

.ntl_padright5px { padding-right: 5px; }
.ntl_fontsize100perc { font-size: 100%; }
.ntl_fontsize90perc { font-size: 90%; }
.ntl_width70px { width: 70px; }
.ntl_width80px { width: 80px; }
.ntl_marginleft3px { margin-left: 3px; }
.ntl_marginleft5px { margin-left: 5px; }
.ntl_marginright3px { margin-right: 3px; }
.ntl_margintop3em { margin-top: 3em; }
.ntl_paddingtop0p2em { padding-top: 0.2em; }
.ntl_paddingbottom0p5em { padding-bottom: 0.5em; }
.ntl_fontsize90perc { font-size: 90%; }

.ntl_top1em { top: 1em; }
.ntl_left1em { left: 1em; }
.ntl_bgred { background: red; }
.ntl_whitetext { color: white; }

.ntl_marginleft3px { margin-left: 3px; }

.cpstatus p.ntl_margintop1em { margin-top: 1em; }

.ntl_fontweightbold { font-weight: bold; }

.grid.ntl_width200px { width: 200px; }

summary { cursor: pointer; }

.csrgridnotes {
position: relative;
height: 1px;
margin-left: -200px;
}
.csrgridnotes pre {
position: absolute;
margin-left: auto;
background: white;
border: 2px solid red;
margin: 0;
padding: 1em;
overflow: visible;
}

.digitsu {
background: url('static/images/digitsu.svg') no-repeat 90% 1em;
background-size: 100px auto;
}

.ntl_2col {
column-count: 2;
column-gap: 2em;
-webkit-column-count: 2;
-webkit-column-gap: 2em;
-moz-column-count: 2;
-moz-column-gap: 2em;
}
body.nocols .ntl_2col {
column-count: 1;
-webkit-column-count: 1;
-moz-column-count: 1;
}

.ntl_2col h3, .ntl_2col h4 {
-webkit-break-after: avoid;
break-after: avoid;
-webkit-column-break-after: avoid;
-moz-column-break-after: avoid;
column-break-after: avoid;
}
.ntl_2col p {
-webkit-break-before: avoid;
break-before: avoid;
-webkit-column-break-before: avoid;
-moz-column-break-before: avoid;
column-break-before: avoid;
}

a.info {
color: #999;
text-decoration: none;
}
div.tipreveal {
position: absolute;
width: 20em;
background: #ffc;
padding: 1em;
display: none;
box-shadow: #996 0px 0px 8px;
}

#extensionlist, #extensionlist table.grid {
width: 100%;
}
#extensionlist table.grid {
display: table;
margin: 0;
width: 100%;
}

table.grid .griddetail {
margin-left: 1em;
margin-top: 0.5em;
margin-bottom: 1em;
background: #ddd;
padding: 0.5em 0.8em;
}

/*
#statusfull #statusbox {
margin-left: 1em;
margin-top: 2em;
margin-right: 1em;
width: auto;
}
*/

.netstatus {
display: inline-block;
background: white;
padding: 0.25em;
vertical-align: -0.25em;
margin-right: 0.5em;
border-radius: 1em;
}
#csrpanel .netstatus {
  vertical-align: middle;
}
#csrpanel ul {
  margin-left: 0.5em;
  padding-left: 1em;
}
#csrpanel ul li {
  margin-left: 0em;
  padding-left: 0;
  margin-left: 0;
  text-indent: -0.2em;
}

#csrpanel ul li p {
  padding: 0;
  margin: 0;
  padding-bottom: 0.2em;
  
}

.moremenu {
padding: 0.5em;
background: white;
z-index: 400;
position: absolute;
text-align: left;
border-bottom-left-radius: 0.5em;
border-bottom-right-radius: 0.5em;
border-top-left-radius: 0.5em;
}

.moreitem {
  display: block;
  color: black;
  border-radius: 0.25em;
  padding: 0.25em;
  padding-left: 1.5em;
  padding-right: 0.5em;
  text-decoration: none;
}
.moreitem:focused {
  color: #00f;
  text-decoration: underline;
}
.moreitem.selected {
  font-weight: bold;
  padding-left: 0.5em;
}
.moreitem.selected::before {
content: '✓ ';
}
.moreitem:hover {
  background: #ccc;
  cursor: pointer;
}
.moremenubutton {
  padding: 0.35em 0.5em;
  border-radius: 0.5em;
  position: relative;
}
.moremenubutton:hover {
  background: #ccc;
  color: black;
}
.moremenubutton.selected {
  z-index: 500;
  background: #fff;
  color: #666;
  border-bottom: 1px solid white;
  padding: 0.35em 1em;
  border-bottom-right-radius: 0;
}
.moremenubutton.selected .arrow {
  visibility: hidden;
  display: none;
}
#topnav {
  background: #379dd1;
  padding: 0px 1em;
  box-shadow: #000 0px 0px 2px;
  padding-bottom: 1px;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}
#topnav a {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  color: white;
  font-weight: normal;
  font-size: 120%;
  background: #028;
  border-left: 1px solid black;
  border-right: 1px solid #46c;
  display: none;
}
#topnav a:hover {
  background: #36a;
}
#topnav a.last:hover {
  border-right: 1px solid black;
}

#home_rightcol {
  float: right;
  width: 360px;
}
#home_rightcol p {
  line-height: 1.4;
}

#topnav a.selected {
  background: #003;
  color: #fc9;
  background: #006;
}

#supportboxhome {
  float: right;
  background: inherit;
  margin-top: -1em;
  display: table;
}

.mobile #supportboxhome {
  display: none;
}


@media all and (max-width: 1200px) {

  #supportboxhome,
  #supportboxhome #supportbox {
    min-width: auto;
    max-width: auto;
    width: auto;
    display: block;
    float: none;
    margin: 0 auto;
  }
  #supportboxhome {
    display: block;
    min-width: auto;
    max-width: auto;
    width: 100%;
    padding-right: 1em;
  }

}

#home_main {
  padding-top: 0em;
  width: 20em;
  width: calc(100% - 361px);
}

#home_main a {
  color: black;
}

#home_office { background: url('static/images/home-office-sm.jpg'); }
#home_mobile { background: url('static/images/home-mobile-sm.jpg'); }
#home_distributed { background: url('static/images/home-distributed-sm.jpg'); }
#home_home { background: url('static/images/home-home-sm.jpg'); }

@media only screen and (min-device-width: 780px) {
  #home_office { background: url('static/images/home-office-md.jpg'); }
  #home_mobile { background: url('static/images/home-mobile-md.jpg'); }
  #home_distributed { background: url('static/images/home-distributed-md.jpg'); }
  #home_home { background: url('static/images/home-home-md.jpg'); }
}

@media only screen and (min-device-width: 1500px) {
  #home_office { background: url('static/images/home-office.jpg'); }
  #home_mobile { background: url('static/images/home-mobile.jpg'); }
  #home_distributed { background: url('static/images/home-distributed.jpg'); }
  #home_home { background: url('static/images/home-home.jpg'); }
}

#home_office,
#home_mobile,
#home_distributed,
#home_home {
  margin-left: -1em;
  background-position: left 3px;
  height: 400px;
  background-repeat: no-repeat;
  background-size: 100% auto;
}
.home_pane {
  display: none;
}
.pane_showing {
  display: block;
}
.home_panewrap {
  margin: -1px;
  margin-left: 0;
  padding: 1px;
  overflow: hidden;
  position: relative;
  top: -3px;
}

.home_pane h2 {
  margin: 0;
/*  background: rgba(1, 1, 1, 0.2); */
  float: right;
  font-weight: normal;
  margin-right: 2em;
  text-align: center;
  margin-top: 2em;
  border-radius: 1em;
  padding: 0.5em;
  width: 33%;
  text-shadow: #fff 0px 0px 8px;
  line-height: 0.9;
  color: white;
  color: rgba(1, 1, 1, 0.9);
  font-size: 300%;
}
.home_pane h3 {
  text-align: center;
  clear: right;
  float: right;
  font-size: 130%;
  margin: 0;
  margin-right: 14em;
  min-width: 30%;
}
.home_pane h2, .home_pane h3 {
  cursor: pointer;
}

#home_office h2 {
  color: #090;
  width: 80%;
}
#home_mobile h2 {
  color: #fed;
  text-shadow: #000 0px 0px 8px;
}
#home_distributed h2 {
 color: #c5d8f2;
 text-shadow: #000 0px 0px 8px;
 margin-top: 4em;
}
#home_office h3 {
  text-align: left;
}

#home_office h3 img {
  margin-top: 0.5em;
  margin-left: -0.6em;
}
#home_mobile h3 {
  margin-right: 6.5em;
}
#home_distributed h3 {
  margin-right: 6.5em;
}
#home_home h2 {
  float: right;
  margin-top: 6em;
  margin-right: 1em;
  color: #f33;
  text-shadow: #000 0px 0px 8px;
  width: 30%;
}
#home_home h3 {
  float: right;
  clear: right;
  color: white;
  margin-right: 4.25em;
  margin-left: auto;
  text-align: left;
  width: 30%;
  text-shadow: #000 0px 0px 8px;
}
#home_home h3 img.moreinfo {
  margin-left: 4em;
  margin-top: 0.5em;
}

@media all and (max-width: 895px) {

  #home_rightcol {
    display: block;
    float: none;
    width: 100%;
    min-height: 0;
  }
  #home_main {
    width: 100%;
  }
}

.omitfull {
  display: none;
}
.mobile .omitfull {
  display: block;
}
.mobile .omitmobile {
  display: none;
}
.narrow .omitnarrow {
  display: none;
}
.omitcustom {
  display: none;
}

#home_rightcol h2,
#support_main h2,
#blog_rightcol h2,
#products_rightcol h2 {
  display: block;
  text-align: left;
  border-bottom: 1px solid #78a;
  margin: 0 1em;
  background: #9bd;
  padding: 0;
  margin-top: 2em;
  padding: 0.2em 0.5em;
}

span.price {
  font-weight: bold;
  font-size: 200%;
}

span.price {
  color: #090;
}
span.price small {
  font-size: 60%;
}


.plan_inner {
  overflow: hidden;
}
#pricing_main .watermark {
  width: 100%;
  height: 100%;
  position: absolute;
  right: -5em;
  opacity: 0.05;
}
#pricing_main .plan_enterprise .plan_inner .watermark {
  background: url('static/images/pricing-enterprise.svg');
  background-size: 300px auto;
  background-position: top right;
  background-repeat: no-repeat;
  top: -1.5em;
  right: -4.5em;
}
#pricing_main .plan_office .plan_inner .watermark {
  background: url('static/images/pricing-office.svg');
  background-size: 250px auto;
  background-position: top right;
  background-repeat: no-repeat;
  right: -4em;
}
#pricing_main .plan_tie .plan_inner .watermark {
  background: url('static/images/pricing-tie.svg');
  background-size: auto 300px;
  background-position: top right;
  background-repeat: no-repeat;
  right: -1em;
}
#pricing_main .plan_mobile .plan_inner .watermark {
  background: url('static/images/pricing-mobile.svg');
  background-size: auto 300px;
  background-position: top right;
  background-repeat: no-repeat;
  right: -3.5em;
}
#pricing_main .plan_custom .plan_inner .watermark {
  background: url('static/images/pricing-custom.svg');
  background-size: auto 300px;
  background-position: top right;
  background-repeat: no-repeat;
  right: -4em;
}
#support_main #support_rightcol {
  width: 40%;
  float: right;
  overflow: hidden;
  border-left: 2em solid white;
}
#support_main .supportnumber {
  font-size: 250%;
  text-align: right;
  margin: 0 1em;
}
#support_main .supportemail {
  text-align: right;
  font-size: 120%;
  margin-top: -2em;
  margin: 0 1em;
}
#support_main .supportemail em {
  font-weight: bold;
  margin-left: 0.5em;
  font-style: normal;
}
#support_main .supportnumber em {
  font-weight: normal;
  font-size: 80%;
  color: #9bd;
  margin-right: 1em;
}
#support_main p {
  line-height: 1.8;
}
#blog_main {
  padding: 1px;
  max-width: calc(100% - 300px);
  overflow-x: hidden;
}
.mobile #blog_main {
  max-width: 100%;
  width: 100%;
}
#blog_main .post_authorimage img {
  width: 4em;
  height: 4em;
  float: left;
  margin-right: 1em;
  border-radius: 0.5em;
}
#blog_main .blog_post {
  padding: 1em;
  margin-top: 1em;
}

#blog_main .post_info {
  background: #def;
  margin-top: 0;
  padding: 1em 2em;
}
#blog_rightcol,
#products_rightcol {
  float: right;
  width: 300px;
  background: #9bd;
  padding: 0;
  padding-left: 1em;
  position: relative;
  border-bottom-left-radius: 2em;
}
#blog_rightcol h2,
$products_rightcol h2 {
  background: #def;
}
#blog_rightcol h2:first-child,
$products_rightcol h2:first-child {
  margin-top: 1.5em;
}
#blog_rightcol ul,
#products_rightcol ul {
  line-height: 1.8;
}
#blog_rightcol a,
#products_rightcol a {
  color: black;
  font-weight: bold;
}
#blog_main .blog_post h2 {
  margin: 0;
  background: #eee;
  font-size: 200%;
  border-bottom: 1px solid #78a;
  margin-bottom: 0;
  border-top-left-radius: 0.5em;
  border-top-right-radius: 0.5em;
  padding: 0.5em 1em;  
}
/*
.mobile #blog_main .post_info {
  width: auto;
}
.mobile #blog_main .blog_post h2 {
  width: auto;
}
*/
#blog_main .blog_post h2 a {
  color: black;
}
#blog_main .post_info div {
  display: inline;
}
#blog_main .post_info .sep {
  margin: 0 1em;
}

#blog_main .post_article {
  padding: 1em;
}
#blog_main .left {
  margin: 0;
  margin-right: 1em;
  margin-bottom: 1em;
  margin-top: 0.5em;
  float: left;
}
#blog_main .right {
  margin: 0;
  margin-left: 1em;
  margin-bottom: 1em;
  margin-top: 0.5em;
  float: right;
}
#blog_main img.left,
#blog_main img.right {
  width: 33%;
}
#blog_main .post_author {
  clear: left;
  background: #fff;
  border: 4px dotted #eee;
  border-radius: 1em;
  padding: 1em;
  width: 75%;
  max-width: 35em;
  margin-bottom: 2em;
}
#blog_main .post_article img:first-child {
  margin-top: 1em;
}
.mobile #blog_main .post_author {
  width: auto;
}
#blog_main .post_authorname {
  padding-top: 0.25em;
  font-weight: bold;
  font-size: 140%;
  margin-bottom: 1em;
}
#blog_main .post_authorname a {
  text-decoration: none;
}
#blog_main .post_authorname a:hover {
  text-decoration: underline;
}
#blog_main .post_author .sep {
  display: none;
}
#blog_main .post_article {
  line-height: 1.8;
}
#blog_main .post_authortitle {
  display: block;
  padding-top: 0.25em;
  font-size: 90%;
  font-weight: normal;
  font-style: italic;
}
#blog_main .post_authorbio {
  color: #666;
}

.mobile #blog_rightcol,
.mobile #products_rightcol {
  float: none;
  width: auto;
  min-height: 0px !important;
  height: auto !important;
}
.mobile #products_rightcol {
  padding: 1px 1em;
  margin-left: 25%;
}
#products_rightcol.isfull {
  margin-bottom: -1em;
  border-radius: 0;
}
#blog_main .blog_nav {
  font-size: 150%;
  font-weight: bold;
  text-align: center;
  padding: 1em;
  padding-bottom: 0;
}
#blog_main .blog_nav_bottom {
  padding-top: 0;
  padding-bottom: 1em;
}

.product_featured,
.product {
  width: 20em;
  float: left;
}
.product_featured_inner,
.product_inner {
  background: #eee;
  margin-bottom: 1em;
  margin-right: 1em;
  padding: 1em 1em;
  border-radius: 1em;
  height: 13em;
  position: relative;
  overflow: hidden;
}
.product_inner {
  height: 10em;
}
.product h3,
.product_featured h3 {
  margin: 0;
}
.product h4 {
  margin-top: 0;
}
.product .seemore,
.product_featured .seemore {
  position: absolute;
  left: 0;
  width: 17em;
  padding: 1em;
  bottom: 0;
  display: table-cell;
  vertical-align: middle;
  background: #9bd;
  background: #69b;
  text-align: right;
}
.product_price {
  float: right;
  clear: right;
  margin-top: 0.2em;
  padding-right: 0.5em;
  text-align: right;
  font-size: 140%;
}
.product_price span.mark {
  color: #090;
  font-size: 80%;
  margin-right: 0.2em;
  font-weight: normal;
}
.product_price sup {
  font-size: 70%;
  position: relative;
  top: 0.2em;
}
.product_name a {
  color: black;
  text-decoration: none;
}
.product_name a:hover {
  text-decoration: underline;
}
.product_image {
  height: 7em;
  float: right;
}
.product_brand {
  font-size: 80%;
  margin-top: 0.5em;
}
.product_featured h3 a {
  color: black;
}
.seemore a {
  color: white;
  text-shadow: #029 0px 0px 5px; 
}

.moredetail {
  font-size: 80%;
  position: absolute;
  top: 12.75em;
}
.product .moredetail {
  top: 11em;
}
.moredetail a {
  text-decoration: none;
}
#product_main {
  padding-right: 1em;
}
#product_main h3 {
  padding-left: 1em;
  clear: left;
}
#product_main h2 {
  margin-bottom: 0.2em;
}
#product_main p {
  padding-left: 0.5em;
  line-height: 1.4;
  max-width: 40em;
}
#product_main > .product_brand {
  padding-left: 1.5em;
  padding-top: 0;
  margin-top: 0;
  font-weight: normal;
  font-style: italic;
  font-size: 100%;
}
#product_main h2 {
  padding-left: 1em;
}

#product_main .product {
  width: 13em;
  margin-bottom: 1em;
}
#product_main .product_inner {
  border-radius: 0;
  display: table-cell;
  vertical-align: middle;
  width: 10em;
  height: 10.5em;
  padding: 0.5em;
  border: 0.5em solid #eee; 
  background: none;
  border-radius: 1em;
  text-align: center;
}
#product_main .product_price {
  float: none;
  clear: none;
  height: 1px;
  overflow: visible;
  margin-top: -0.5em;
  max-width: 30em;
  padding-right: 0;
  text-align: right;
}
.mobile #product_main .product_price {
  height: 1.5em;
}

#product_main .product_related {
  margin-left: 1em;
  display: table;
}
.mobile #product_main .product {
  font-size: 80%;
}
#product_main .product_supplementary {
  margin-top: 1em;
  margin-right: -1em;
}
#product_main .product_related h3 {
  padding-left: 0;
}
#product_main .product_image_large {
  margin-left: 1em;
}
#product_main .product_related .product_image {
  float: none;
  margin: 0 auto;
  height: 5.5em;
}

#product_main .product_sku {
  color: #999;
  margin-top: 0.5em;
  margin-left: 1.5em;
  margin-bottom: 1em;
}

#addfunds p.tip,
#newuser_main p.tip,
#panel_main p.tip {
  background: #fc9;
  padding: 1.5em 2em;
  display: table;
  border-radius: 1em;
}
#panel_main p.tip a {
  color: #03f;
  text-shadow: #fff 0px 0px 2px,
    #fff 0px 0px 4px;
  text-decoration: none;
}
#panel_main p.tip a:hover {
  text-decoration: underline;
}

#newuser_main input[type=text],
#newuser_main input[type=password],
#panel_main input[type=text],
#panel_main input[type=password] {
  border: 1px solid #999;
  border-radius: 0.5em;
  font-size: 100%;
  padding: 0.5em;
}

#newuser_main div.field,
#panel_main div.field {
  display: block;
  width: 100%;
  margin-bottom: 0.5em;
}

#newuser_main div.label,
#panel_main div.label {
  display: table-cell;
  text-align: right;
  padding-right: 1em;
}

#newuser_main div.value,
#panel_main div.value {
  display: table-cell;
  text-align: left;
}

#newuser_main h3,
#panel_main h3 {
  line-height: 2.0;
}

#newuser_main h3 .errortext,
#panel_main h3 .errortext {
  margin-left: 2em;
  white-space: nowrap;
  margin-top: 1em;
}

.mobile #newuser_main div.field,
.mobile #panel_main div.field {
  display: inline;
}

#newuser_main div.mobilefield,
#panel_main div.mobilefield {
  display: table-cell;
  padding-right: 1em;
}

.mobile #newuser_main div.mobilefield,
.mobile #panel_main div.mobilefield {
  display: table-row;
}

#newuser_main div.field div.label,
#panel_main div.field div.label {
  width: 6em;
}

#newuser_main div.field div.labelmore,
#panel_main div.field div.labelmore {
  width: auto;
}

#newuser_main select {
  
  -moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
  
    font-size: 12px;
    padding: 0.5em;
 
    margin: 5px;
    border-radius:0.5em;
    background: #f8f8f8;
    color:#888;
    border: 1px solid #999;
    outline:none;
    display: inline-block;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    cursor:pointer;
}

/* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    #newuser_main select {padding-right:20px
    -moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
  }
  
}

#newuser_main label {position:relative}
#newuser_main label.select:after {
    content:'▼';
    color:#aaa;
    border-bottom: 1px solid #999;
    background-color:#fff;
    border-radius:0 0.5em 0.5em 0px;
    right:6px; top:0px;
    padding: 5px;
    padding-top: 6px;
    padding-right: 0.75em;
  margin: -6px 0px 0px 0px;
    border-left:1px solid #ddd;
    position:absolute;
    pointer-events:none;
}

#newuser_main label.select:before {  
    content:'';
    right:6px; top:0px;
    width:20px; height:20px;
    background:#f8f8f8;
    position:absolute;
    pointer-events:none;
    display:block;
}

.nicebutton {
        -moz-box-shadow:inset 0px 1px 2px 0px #cae3fc;
        -webkit-box-shadow:inset 0px 1px 2px 0px #cae3fc;
        box-shadow:inset 0px 1px 2px 0px #cae3fc;
        background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #4197ee) );
        background:-moz-linear-gradient( center top, #79bbff 5%, #4197ee 100% );
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#4197ee');
        background-color:#79bbff;
        border-radius: 0.5em;
        text-indent:0;
        border:1px solid #469df5;
        display:inline-block;
        color:#ffffff;
        font-size: 110%;
        font-weight:normal;
        font-style:normal;
        line-height: 2.0;
        width: 9em;
        text-decoration:none;
        text-align:center;
        text-shadow:1px 1px 0px #287ace;
}
.nicebutton:hover {
        background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #4197ee), color-stop(1, #79bbff) );
        background:-moz-linear-gradient( center top, #4197ee 5%, #79bbff 100% );
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4197ee', endColorstr='#79bbff');
        background-color:#4197ee;
}
.nicebutton:active {
        position:relative;
        top:1px;
}
ul.minitips {
  border-radius: 0.5em;
  background: #eee;
  margin-left: 4em;
  margin-right: 2em;
  padding: 0.5em 1em;
  padding-left: 3em;
  padding-top: 0.25em;
  font-size: 90%;
}
#midsection {
  background: white;
  margin: 0;
  padding-top: 1px;
}

body.loading {
  height: 1px;
  overflow: hidden;
}

span.complexity0,
span.complexity1,
span.complexity2,
span.complexity3,
span.complexity4 {
  display: inline-block;
  height: 0.5em;
  border-radius: 1em;
  vertical-align: middle;
  width: 2em;
  margin-left: 1em;
}
span.complexity1 {
  background: #fff;
  border: 2px solid #f00;
}
span.complexity0 {
  background: #f00;
  border: 2px solid #f00;
}
span.complexity2 {
  background: #f90;
  border: 2px solid #f90;
}
span.complexity3 {
  background: #0f0;
  border: 2px solid black;
}
#undobutton {
  margin-left: 1em;
}

span.saving {
  font-weight: bold;
  color: #33f;
  border: 2px solid #00f;
  border-radius: 0.5em;
  display: inline-block;
  padding: 0.2em 1em;
  background: #ffe;
}
div.tabsurplus {
  background: red !important;
  float: left !important;
  font-size: 75%;
}
tr.surplus th,
tr.surplus td {
  background: red;
}

.extmodule {
  width: 33%;
  float: left;
  min-width: 23.4em;
}

/* cutoffs for wickets in one, two, three, or four columns */
@media all and (max-width: 1540px) {
  .extmodule {
    width: 33%;
  }
}
@media all and (max-width: 1230px) {
  .extmodule {
    width: 50%;
  }
}
@media all and (max-width: 920px) {
  .extmodule {
    width: 100%;
    max-width: 28em;
  }
  body.mobile .extmodule {
    width: 50%;
  }
}
@media all and (max-width: 620px) {
  body.mobile .extmodule {
    width: 100%;
    max-width: 28em;
  }
}

@media all and (max-width: 1722px) {
  body.csrpanelvisible .extmodule {
    width: 33%;
  }
}
@media all and (max-width: 1412px) {
  body.csrpanelvisible .extmodule {
    width: 50%;
  }
}
@media all and (max-width: 1102px) {
  body.csrpanelvisible .extmodule {
    width: 100%;
    max-width: 28em;
  }
  body.mobile.csrpanelvisible .extmodule {
    width: 50%;
  }
}
@media all and (max-width: 802px) {
  body.mobile.csrpanelvisible .extmodule {
    width: 100%;
    max-width: 28em;
  }
}


.extmodule .modinner {
  background: #eee;
  border-radius: 0.5em;
  height: 2em;
  padding: 0.5em;
  margin-right: 0.5em;
  margin-bottom: 0.5em;
  padding-right: 2em;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
}
.modinner select {
  float: left;
}
.modinner span.switchlabel {
  vertical-align: bottom;
  line-height: 26px;
  display: inline-block;
}

img.invoke {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  opacity: 0.66;
  height: 2em;
  cursor: pointer;
  -moz-transition: -moz-transform 0.3s ease;
  -webkit-transition: -webkit-transform 0.3s ease;
  -o-transition: -o-transform 0.3s ease;
  transition: transform 0.3s ease;
}
img.invoke:hover {
  opacity: 1.0;
}

.rotate90 {
  -moz-transform: rotate(90deg);
  -webkit-transform:rotate(90deg); 
  -ms-transform:rotate(90deg);
  -o-transform:rotate(90deg);
}

.modpane {
  display: none;
  min-width: 20em;
  z-index: 200;
  position: absolute;
  width: calc(100% - 0.4em);
  padding: 0;
  padding-top: 2.5em;
  min-height: 3em;
  margin-right: 0.5em;
  margin-top: 0;
  background: #eee;
  border-radius: 0.55em;
  box-shadow: #000 0px 0px 10px;
}
.paneinner {
  padding-left: 0em;
  padding-bottom: 0.25em;
  margin-top: -2.5em;
  padding-top: 2.2em;
  padding-right: 1.0em;
}

.modpane > div {
  text-indent: -1.6em;
  padding-left: 2.5em;
}
.modpane td {
  text-indent: 0;
  padding-left: 0;
}
.modpanewrap {
  position: relative;
  top: -3.5em;
}

#shadowscreen {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;  
  background: rgba(0,0,0,0.5);
  z-index: 150;
}

.modal {
  position: relative;
  z-index: 210;
  background: rgba(0,0,0,0);
}

.extmodulecsr.managercsr .modinner {
  background: url("images/csr.gif") repeat 0 0 transparent;
  border: 3px solid #966;
  box-sizing: border-box;
  min-height: 3em;
}

.extmodule.manager .modinner, .extmodule.manager .modpane {
  background: #966 !important;
  color: white; 
}
.extmodule .suboptionmanager {
  background: #966 !important;
  color: white;
}
.hidemanager .extmodule .suboptionmanager {
  display: none;
}
.hidemanager .manager , .hidemanager .managercsr {
  display: none;
}

div#widgetland {
  width: calc(100% + 0.8em);
}
div#widgetland div.manager {
  transition: font-size 2s ease;
}

label.switch.manager span.switch-handle {
  background: #966 linear-gradient(top, #fff, #966) !important;
}
label.switch.manager span.switch-handle:before {
  background: #966 !important;
}

img.invoke.manager {
  background: #966 !important;
  padding: 2px;
  border-radius: 0.5em;
  margin-top: -2px;
  margin-right: -2px;
}

.extmodule a {
  display: inline-block;
  background: white;
  padding: 0 0.5em;
  border-radius: 0.5em;  
}
.extmodule a.rbutton {
  position: absolute;
  right: 0.5em;
  top: 0.5em;
  display: block;
}

table.sudogrid {
  margin: 1em !important;
  margin-left: 4em !important;
  margin-right: 4em !important;
  width: 100% !important;
  
}
#inboxlist table.grid td, #inboxlist table.grid th {
  font-size: 85%;
}
.popout {
  width: 3em;
  height: 3em;
  padding: 0.5em;
  border-radius: 0.5em;
  border: 0.25em solid #ccc;
  margin-right: 1em;
  margin-top: 1em;
  opacity: 0.6;
}
.popout:hover {
  border: 0.25em solid #ccc;
  background: #eee;
  opacity: 1.0;
}

th.onlynarrow,
td.onlynarrow {
  display: none;
}
.narrow td.onlynarrow, .narrow th.onlynarrow {
  display: table-cell;
}

th.shortstatus {
  width: 2em !important;
}
td.shortstatus {
  width: 2em !important;
  padding: 2em 0;
  overflow: hidden;
}
td.shortstatus span {
  position: relative;
  left: -0.5em;
}
td.shortstatus span span {
  display: none;
}
.narrow .narrow_width100perc {
  width: 100%;
}

#features_index {
  float: left;
  width: 20em;
  box-shadow: #cde 1.25em -0.75em 2em;
}

#features_content {
  float: left;
  padding: 0;
  width: calc(100% - 20em);
}

.mobile #features_index {
  display: none;
}
.mobile #features_content {
  float: none;
  display: block;
  width: auto;
}

#features_content h2 {
  padding-left: 0;
  margin-left: 0;
}

.dynamicedit {
  border: 2px solid white;
  border-radius: 0.5em;
  margin-top: 1em;
}
.dynamicedit:hover {
  cursor: text;
  border: 2px dotted black;
  background: #eee;
}

.dynamicedit img.actionicon {
  vertical-align: middle;
  margin-left: 0.5em;
  opacity: 0.5;
}
.dynamicedit:hover img.actionicon {
  opacity: 1.0;
}
.identityedit {
  clear: left;
  display: table-cell;
  z-index: 2;
  font-size: 150%;
  margin-top: 2.5em;
  padding: 0 0.5em;
  font-weight: bold;
  padding-top: 0em;
  border-bottom: none;
  padding-bottom: 1.9em;
  white-space: nowrap;
  position: relative;
  top: 1em;
  left: 1px;
}
.identityedit table {
  border-collapse: collapse;
}
.identityedit input[type=text] {
  font-size: 100%;
  font-weight: bold;
  font-family: "Ubuntu", sans-serif;
  margin: 0;
}
.identityedit input[type=submit] {
  font-size: 100%;
  margin-left: 0.1em;
}
img.linekey {
  opacity: 0.5;
  cursor: pointer;
}
img.linekey:hover {
  opacity: 1.0;
}
img.linekey.selected {
  opacity: 1.0;
  cursor: default;
}
td.linekey {
  opacity: 0.5;
  cursor: pointer;
}
td.linekey:hover {
  opacity: 1.0;
}
td.linestatus span.statusmode,
td.linestatus span.message {
  display: none;
  position: absolute;
}
td.linestatus .presenceicon {
  position: relative;
  left: 0.15em;
}

td.keyfunction:hover {
  cursor: pointer;
}
td.keyfunction div.function {
  border: 2px solid rgba(0,0,0,0);
  margin: -0.4em -0.5em;
}
td.keyfunction:hover div.function {
  background: #ffc;
  border: 2px dotted black;
  border-radius: 0.5em;
  position: relative;
  z-index: 2;
  box-shadow: #fff 0px 0px 4px, #fff 0px 0px 8px, #fff 0px 0px 20px;
}

div#keyeditor {
  position: absolute;
  width: 30em;
  background: white;
  border: 1px solid black;
  box-shadow: #000 0px 0px 3px, #000 4px 4px 20px;
  border-radius: 1em;
  padding: 1em; 
  z-index: 200;
  background: #cdf;
}

td.keyfunction div.function.line {
  font-weight: bold;
}
td.keyfunction:hover div.function.line {
  background: inherit;
  border: 2px solid rgba(0,0,0,0);
  border-radius: 0.5em;
  box-shadow: none;
  cursor: text;
}
td.keyfunction div.function.selectedkey {
  background: #cdf;
  border: 2px solid black;
  border-bottom: none;
  border-radius: 0.5em;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  position: relative;
  z-index: 210;
  box-shadow: none;
}

td.keyfunction div.function.inherit div.behavior {
  opacity: 0.5;
}
td.keyfunction div.behavior {
  white-space: nowrap;
}

/*
 * Let's target IE to respect aspect ratios and sizes for img tags containing SVG files
 *
 * [1] IE9
 * [2] IE10+
 */
/* 1 */
.ie9 img[src*=".svg"] {
  height: 1.5em;
}
/* 2 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  img[src*=".svg"] {
    height: 1.5em; 
  }
}
@keyframes phaseAnimation {
  0%   { opacity:1; }
  50%  { opacity:0.33; }
  100% { opacity:1; }
}
@-o-keyframes phaseAnimation{
  0%   { opacity:1; }
  50%  { opacity:0.33; }
  100% { opacity:1; }
}
@-moz-keyframes phaseAnimation{
  0%   { opacity:1; }
  50%  { opacity:0.33; }
  100% { opacity:1; }
}
@-webkit-keyframes phaseAnimation{
  0%   { opacity:1; }
  50%  { opacity:0.33; }
  100% { opacity:1; }
}
.animate_phase {
   -webkit-animation: phaseAnimation 2s infinite;
   -moz-animation: phaseAnimation 2s infinite;
   -o-animation: phaseAnimation 2s infinite;
    animation: phaseAnimation 2s infinite;
}
.post_linkimage {
  position: absolute;
  top: 0px;
  height: 1px;
  overflow-y: hidden;
  z-index: 1;
  width: 200px;
  opacity: 0.01;
  overflow: hidden;
}

#accuser_sep {
  height: 0.2em;
  background: #666;
  border-left: none;
  border-right: none;
}
.mobile #accuser_sep {
 background: #24a;
 display: block;
 height: 3.6em !important;
}
.mobile #accuser_sep:before {
  content: 'My User:';
  display: block;
  position: relative;
  top: -1.5em;
  margin-top: 2.2em;
  font-size: 140%;
  line-height: 2;
  padding: 0 1em;
  background: #003;
  margin-right: -2px;
  color: #fc9;
  border-right: 1px solid #46c;
}

p.searchlist {
  float: right;
  margin-top: 0;
  margin-left: 2em;
  margin-bottom: -1em;
  white-space: nowrap;
}
p.searchlist img {
  height: 1em;
  padding-right: 0.5em;
}
.mobile p.searchlist {
  display: block;
  z-index: 199;
  position: fixed;
  left: 0;
  bottom: 0em;
  text-align: right;
  padding-bottom: 1.5em;
  padding-top: 0.5em;
  width: 100%;
  background: #ccc;
  border-top: 1px solid #999;
  attachment: fixed;
}
.mobile p.searchlist input {
  width: calc(100% - 4em);
  margin-right: 1em;
  font-size: 1.5em;
}
.mobile p.searchlist img {
  height: 2em;
  vertical-align: -40%;
}

/* ******** CHOOSER ************* */

#chooser_mask {
  opacity: 0.1;
  background: white;
  z-index: 10;
}

#extension_chooser {
  background: #f9f9f9;
  box-shadow: rgba(0,0,0,0.25) 0px 0px 4px,
    rgba(0,0,0,0.25) 0px 0px 8px;
  border-radius: 0.25em;
  z-index: 10;
}

#extension_chooser > div:first-child {
  padding: 0.25em;
  background: url('images/magnify.svg');
  background-size: 1em 1em;
  background-position: calc(100% - 0.5em) center;
  background-repeat: no-repeat;
}

#extension_chooser input[type=text] {
  width: calc(100% - 2.5em);
  border-radius: 0.2em;
  border: 1px solid #ccc;
  padding: 0.2em;
  outline: none;
}

#extension_chooser div.chooser_wrapper {
  padding: 0;
  padding-bottom: 0.5em;
}

#extension_chooser span.shortstatus {
  padding-right: 0;
}
#extension_chooser .statusmode {
  display: none;
}

#extension_chooser div.chooser_list {
  color: #999;
  white-space: nowrap;
  overflow-y: auto;
  overflow-x: hidden;
  font-family: sans-serif;
  font-size: 100%;
}

div.chooser_item {
  overflow: visible;
  white-space: normal;
  text-indent: -2em;
  padding: 0.25em 0.5em;
  padding-left: 2.5em;
  padding-right: 0.5em;
  color: black;
  cursor: pointer;
  width: calc(100% - 2.5em);
  overflow-x: hidden;
  border-top: 1px solid #ccc;
}
div.chooser_item.chooser_oldvalue {
  background: #ccc;
}

div.chooser_item:hover, div.chooser_item.lightbar_cursor {
  background: #39f;
  color: white;
}
div.chooser_item.lightbar_cursor {
  background: #666;
}
div.chooser_item:hover .devicetype,
div.chooser_item.lightbar_cursor .devicetype {
  color: white;
}
div.chooser_item > span {
  padding-right: 0.5em;
}
div.chooser_item .devicetype {
  color: #999;
  font-size: 80%;
}
div.chooser_pages {
  padding: 0 0.5em;
  padding-top: 0.5em;
  border-top: 1px solid #ccc;
}
div.chooser_loading {
  padding: 0.5em;
}

div.chooser_stats {
  white-space: normal;
}

span.chooser_value {
  display: none;  
}

span.chooser_label {
  display: none;
}

span.chooser_label.chooser_plaintext {
  display: block;
}

div.chooser_notfound {
  padding: 0.5em;
}

input.chooser_focus {
  position: absolute;
  left: -8000px;
  height: 10px;
  width: 10px;
}

#extension_chooser .chooser_stats {
  display: none;
}

/* ******** END CHOOSER ************* */