/*



              ***** DEPRECATED *****

New structure:

                    utils.css
                       /\
                      /  \
                     /    \
       2talk.styles.css   sb-admin.styles.css
        (2talk theme)     (white label theme)




The styles are broken up in to 3 sections

1. Fixes (fix a particular issue with the default bootstrap)
2. Styles (add a new style)
3. New elements (a class(es) that can be used in multiple pages to acheive a certain look)

*/


/* 1. Fixes */
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/


body {
  font-family: 'Open Sans', sans-serif;
}

/* Changes to make the display not look buggy */
.navbar-brand {
  padding-top: 7px;
  height: 40px;
}

.navbar-brand img {
  height: 40px;
}

/*Better aligns checkbox/label in panel header*/
.panel-heading .pull-right input[type="checkbox"] {
  margin-top: 8px;
}

/*Style a text input inside a panel header*/
.panel-heading input[type="text"] {
  /*display: block;*/
  height: 26px; /*34*/
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
  -o-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;
}

.minimum-text-box-req {
  /*height: 26px; /*34*/
  /*padding: 6px 12px;*/
  font-size: 14px;
  font-weight: normal;
  line-height: 1.42857143;
  color: #555;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
  -o-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;
}

/*Tries to fix the checkbox/label alignment issue*/
.checkbox-fix {
  float: left;
  margin-right: 5px !important;
}

/*Always show checkboxes*/
::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 6px;
  height: 6px;
}

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

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

.alert .form-group {
  margin-bottom: 0;
}

.form-group .alert {
  margin-bottom: 0px !important;
}

.nav-tabs {
  margin-bottom: 15px;
}

/* Fade the top dropdown menu in */
.open > .dropdown-menu {
animation-name: slidenavAnimation;
animation-duration:.5s;
animation-iteration-count: 1;
animation-timing-function: ease;
animation-fill-mode: forwards;

-webkit-animation-name: slidenavAnimation;
-webkit-animation-duration:.5s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease;
-webkit-animation-fill-mode: forwards;

-moz-animation-name: slidenavAnimation;
-moz-animation-duration:.5s;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease;
-moz-animation-fill-mode: forwards;
}
@keyframes slidenavAnimation {
from {
  opacity: 0;
}
to {
  opacity: 1;
}
}
@-webkit-keyframes slidenavAnimation {
from {
  opacity: 0;
}
to {
  opacity: 1;
}
}

.pagination {
margin: 40px 0;
}

/*Add the right side border*/
#page-wrapper {
      border-right: 1px solid #e7e7e7;
}

/* STYLES: Overwrite bootstrap/theme styles for better look */
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/


/* Possibly move this to seperate css as user customisation */
h1 {
  /*font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;*/
  font-family: Verdana;
  font-weight: normal;
  letter-spacing: -1px;
  font-size: 27px;
}

h1.page-header {
  border-bottom: 0;
}


h3 {
  margin-bottom: 30px;
  margin-top: 30px;
  font-family: Verdana;
  font-size: 21px;
  letter-spacing: 1px;
}

/*h4 {
  margin-bottom: 15px;
  margin-top: 30px;
  font-family: Verdana;
  font-size: 21px;
  letter-spacing: 1px;
}
*/
.modal h3 {
  margin-top: 20px;
}

h6 {
  font-weight: bold;
}

.panel-default>.panel-heading>span {
  /*font-family: Verdana;*/
  font-size: 13px;
  /*text-transform: uppercase;*/
  letter-spacing: 1px;
  font-weight: bold;
}

.table>thead>tr>th {
  border-bottom: 1px solid #c3c3c3
}

.form-horizontal .control-label {
  font-weight: normal;
}

/*Unbold labels in panel header*/
.panel-heading label {
  font-weight: normal;
}

.toggle-icon {
  /*display: none !important;*/
}

.popover-icon {
  color: #31708f;
}

.fa-calendar {
  color: #31708f;
  cursor: pointer;
}

@media (min-width: 768px) {
  .modal-dialog.wide {
      width: 825px;
  }
}

.modal-dialog.less-wide {
  width: 525px;
}

.wide .panel {
  margin-bottom: 0px;
}

.modal form, .modal .panel {
margin-bottom: 0px;
}

.datepicker {
  padding: 5px 15px 5px 15px;
}

.fa-spin {
  -webkit-animation: fa-spin 2s infinite cubic-bezier(0.18, 0.89, 0.32, 1.28) !important;
  animation: fa-spin 2s infinite linear;
}

.underline {
  text-decoration:underline;
}

/* Use when you have no results */
.empty-text {
  text-align: center;
  font-style: italic;
}

.background-white {
  background-color: #fff;
}

/* Used for menu item -> selected number */
.menu-alt-item {
  background-color: #fff;
  border-bottom: 1px solid #CCC !important;
}

#side-menu .menu-divider {
height: 15px;
background-color: #fff;
}

/*Remove boostraps default grey active background*/
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
background-color: initial;
}

/*.menu-alt-item a {
  overflow: auto;
}
*/
.menu-alt-item .active {
background-color: #fff !important;
}

.module-debug {
color: #fff;
background-color: #ff0000;
}
.module-debug-warning {
color: #fff;
background-color: #FF8C00;
}

table .fa-times, .j-danger {
color: crimson;
}

.j-danger-border {
border-color: crimson;
}


/* Page specific */
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

/*Admin -> Release notes*/
.text-small {
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #898989;
  font-size: 13px;
  font-weight: 200;
}

.theme-color-main {
  color: #08C;
}

/*Admin -> Email template*/
.boxsizingBorder {
  width: 100%;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.legend-click {
  cursor: pointer;
}

.legend-click:hover {
  text-decoration: underline;
}


/*Reports page*/

.scrollable {
  overflow-y: scroll;
}

.graph-block .panel {
  overflow: hidden;
  position: relative;
}

.graph-block .footer {
  text-align: center;
  color: #2F4F4F;
  margin: 10px 0 5px 0px;
  font-size: 12px;
}

.graph-block i.loader {
  position: absolute;
  display: block;
  left: 48%;
  top: 40%;
}

#data-sets ul.data-sets-list-check {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

  #data-sets ul.data-sets-list-check li input {
      margin-right: 10px;
      /*border: 1px solid red;*/
      margin-left: 25px
  }

      #data-sets ul.data-sets-list-check li label {
          display: inline-block;
          font-weight: normal;
      }

.graph-messsage {
  text-align: center;
  line-height:300px;
  color:#aaa;
}

/*  Customer status page (async table within div )*/
#tbl-by-group>.table {
  margin-bottom: 0;
}

/* Login */
#login-logo {
  max-height: 150px;
}

/* PABX pages */
.pref-render label {
  font-weight: normal !important;
  /*margin-top:15px;*/
  width: 95%;
}
.pref-render input[type=checkbox] {
vertical-align: top;
}
.pref-render .pref-ren-text label {
text-align: left !important;
}

/* Selectline pages */
.changed {
background-color: #DEEDF1;
}

/* Payment page */
#frm-payment .amount-well {
  color: #FFF;
  min-height: 20px;
  padding: 10px;
  margin-bottom: 20px;
  background-color: #FF678E;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
}

#frm-payment .amount-well .form-group {
    margin-bottom: 0px;
}



/* Super Cap Provisioning */
.number-display {
  padding-right: 0px;
}

#number-filter {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0
}

#number-list {
  /*
    Becareful changing this element. Derick used the same ID on the
    number provisioning page (provisioning-bs3.php)
  */
  top: -3px;
  padding-top: 11px;
  border-bottom: 1px solid #ccc;
}

.number-provisioning-list {
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
}

.number-provisioning-list li span {
  padding-left: 10px;
  color: inherit;
  font-weight: normal;
}

/* BUMP/broadband/change */
.section-style {
  border: 1px solid lightgray;
  padding: 10px;
  border-style: dotted;
  background-color: ghostwhite;
}
   .section-style strong {
      line-height: 21px;
  }



.timeline-frame {
font-size: 11px;
}

.timeline-event {
  cursor: pointer;
}


/* Events page: (/account/events) - All the colours */

.timeline-event.event-c1 {
color: #fff;
/*background-color: #c02e1d;*/
background-color: #cd584a;
border-color: #ad291a;
}
.event-c1 {
color: #cd584a;
}

.timeline-event.event-c2 {
color: #fff;
/*background-color: #f16c20;*/
background-color: #f4894d;
border-color: #d9611d;
}
.event-c2 {
color: #f4894d;
}

.timeline-event.event-c3 {
color: #fff;
/*background-color: #ebc844;*/
background-color: #efd369;
border-color: #d3b43d;
}
.event-c3 {
color: #efd369;
}

.timeline-event.event-c4 {
color: #fff;
/*background-color: #1395ba;*/
background-color: #42aac8;
border-color: #1186a7;
}
.event-c4 {
color: #42aac8;
}

.timeline-event.event-c5 {
color: #fff;
/*background-color: #0d3c55;*/
background-color: #3d6377;
border-color: #0c364c;
}
.event-c5 {
color: #3d6377;
}

.timeline-event.event-c6 {
color: #fff;
/*background-color: #a2b86c;*/
background-color: #b5c689;
border-color: #92a561;
}
.event-c6 {
color: #b5c689;
}

.timeline-event.timeline-event-selected {
color: #000;
}

/*Broadband orders*/
.broadband-status-completed {
color: #28BA28 !important;
}

.broadband-status-scheduled {
color: #e60278;
}

.broadband-status-submitted {
color: #337ab7;
}

.broadband-status-cancelled {
color: #654321;
}

.broadband-status-pending-information {
color: #ff7f00;
}

.broadband-status-requested {
color: #fdd700;
}

.broadband-status-abandoned {
color: #838181;
}

.broadband-status-submit-failed {
color: #EA0000;
}

span.filter-col a i {
cursor: not-allowed;
}



/* 3. REUSABLE: New classes/elements to use */
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/



/*
  This is used in a panel-footer to determine the alignment of buttons.
  All save buttons (and similar) should go in here.
*/
.button-container {
  text-align: center;
}

p.intro-text {
  margin-bottom: 40px;
}

/* Copied from the bootstrap docs css */
.bs-callout {
  padding: 20px;
  margin: 20px 0;
  border: 1px solid #eee;
  border-left-width: 5px;
  border-radius: 3px;
}
  .bs-callout-info {
      border-left-color: #1b809e;
  }

  .bs-callout p:last-child {
      margin-bottom: 0;
  }

  .bs-callout-info h4 {
    color: #1b809e;
  }
  .bs-callout h4 {
    margin-top: 0;
    margin-bottom: 5px;
  }
      .bs-callout-warning {
          border-left-color: #aa6708;
      }
      .bs-callout-warning h4 {
          color: #aa6708;
      }

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

  /*Use for headers that arn't h1 - allows for inline action */
  .page-header.sub small {
      /*font-family: initial;*/
      letter-spacing: initial;
      font-weight: normal
  }

/*.page-header.underline {
  border-bottom: 1px solid #dedede;
}*/

/*
  Allow wide tables to resize
*/
div.table-scroll, fieldset.table-scroll {
  overflow-x: scroll;
  overflow: -moz-scrollbars-horizontal;
}
table.table-scroll {
  /*width: 1000px;*/
  /*width: 100%;*/
  max-width: initial;
  overflow: -moz-scrollbars-horizontal;
}
i.expand-page {
  padding-left: 10px;
  cursor: pointer;
}

/*Add pointer cursor over row*/
table.clickable tbody tr, .pointer, .clickable {
  cursor: pointer;
}

/*Set row color based on status*/
tr.highlight-row-new {
  background-color: #d9edf7;
  background-color: #F0F8FC
  /*color:;*/
}
tr.highlight-row-active {
  background-color: #dff0d8;
  background-color: #F2F9EF;
    /*color: #3c763d;*/
}
tr.highlight-row-cancelled {
  background-color: #f2dede;
  background-color: #FAF2F2;
}
/*tr.online {
  background-color: #F2F9EF;
}

tr.offline {
  background-color: #FAF2F2;
}*/

#side-menu .well {
  padding: 15px 10px 15px 10px;
}

.panel-body.slim .form-group, .bs-callout.slim .form-group, .form-group.slim {
  margin-bottom: 0px;
}

.slim.info, .form-highlight {
  /*color: cornflowerblue;*/
  color: steelblue;
}

/* Provide visual difference (customer/ manager side bar) */
.bg-management {
  background-color: #dff0d8 !important;
  border-color: #d6e9c6 !important;
}
  .bg-management h4{
     color: #3c763d;
  }
.bg-customer {

  background-color: #f2dede /*#d9edf7*/ !important;
  border-color: #ebccd1 /*#bce8f1*/ !important;
}
  .bg-customer h4 {
      color: #a94442 /*#31708f*/;

  }

/*styling for under inputs (used in porting)*/
.under-input.error {
  color: crimson;
  font-size: 12px;
  margin-top: 3px;
  display: block;
  text-align: center;
}

.psuedo-tabs {
margin-bottom: 20px;
}

.psuedo-tabs a {
padding-right: 10px
}

/* Required fields */
.req {
color: red;
font-size: 11px;
}

.chk-all {
overflow:hidden;
  padding:0px;
  margin:0px;
}

/*
text-bright-active is created because the "active" part is returned from the DB
*/
.text-success-bright, .text-bright-active, .text-online {
color: #25ad34;
}

.text-bright-new {
color: #08C;
}

.text-bright-suspended, .text-offline {
color: crimson;
}


a.disabled {
pointer-events: none;
cursor: default;
color: slateGray;
}

.text-vert-center {
/*display: inline-block;*/
vertical-align: middle;
/*float: none;*/
}

input.too-short:focus {
  color: #ccc;
}

input.too-short  {
  color: #ccc;
}

.text-left {
text-align: left !important;
}

.no-wrap {
white-space: nowrap !important;
}

.stripe {
  background-image: linear-gradient(-45deg,
    #ccc 25%,
    transparent 25%,
    transparent 50%,
    #ccc 50%,
    #ccc 75%,
    transparent 75%,
    transparent
  );
  background-size: 10px 10px;
}


/* ======================
 Identity card circles
========================== */

.hi-icon-effect-2 a:hover{
text-decoration: none;
}

/* BUMP C */
.bump-c-circle {
box-shadow: 0 0 0 3px #FF678E;
color:#fff;
line-height:50px;
text-align:center;
font-size:20px;
font-weight: bold;
font-family: 'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
}
.bump-c-circle:after {
background: #FF678E;
}
.bump-c-circle:hover{
color: #FFF;
}

/* BUMP A */
.bump-a-circle {
box-shadow: 0 0 0 3px steelblue;
color:#fff;
line-height:49px;
text-align:center;
font-size:30px;
/*font-weight: bold;*/
font-family: Verdana, sans-serif;
/*padding-left: 2px;*/
}
.bump-a-circle:after {
background: steelblue;
}
.bump-a-circle:hover{
color: #FFF;
}

/* CAP C */
.cap-c-circle {
box-shadow: 0 0 0 3px #FFE45E;
font-size:30px;
color:#000;
line-height:50px;
text-align:center;
font-family: Verdana, sans-serif;
}
.cap-c-circle:after {
background: #FFE45E;
}
.cap-c-circle:hover{
color: #000;
}

/* CAP M */
.cap-m-circle {
box-shadow: 0 0 0 3px #55C1E7;
font-size:30px;
color:#fff;
line-height:49px;
text-align:center;
/*font-weight: bold;*/
font-family: Verdana, sans-serif;
/*padding-left: 1px;*/
}
.cap-m-circle:after {
background: #55C1E7;
}
.cap-m-circle:hover{
color: #FFF;
}

/* SUPER S */
.super-s-circle {
box-shadow: 0 0 0 3px #FF9900; /*#714a95;*/
font-size:30px;
color:#fff;
line-height:49px;
text-align:center;
/*font-weight: bold;*/
font-family: Verdana, sans-serif;
/*padding-left: 1px;*/
}
.super-s-circle:after {
background: #FF9900; /*#714a95;*/
}
.super-s-circle:hover{
color: #FFF;
}

/* SUPER M */
.super-m-circle {
box-shadow: 0 0 0 3px #663399; /*#714a95;*/
font-size:23px;
color:#fff;
line-height:49px;
text-align:center;
/*font-weight: bold;*/
font-family: Verdana, sans-serif;
/*padding-left: 1px;*/
}
.super-m-circle:after {
background: #663399; /*#714a95;*/
}
.super-m-circle:hover{
color: #FFF;
}

.circle-200 {
width:180px;
height:55px;
border-radius:4px;
font-size:20px;
color:#fff;
line-height:22px;
text-align:center;
background: #FF678E;
font-weight: bold;
/*font-family: 'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;*/
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}

.egg {
 display:block;
 width: 126px;
 height: 180px;
 background-color: red;
 -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
 border-radius:         50%  50%  50%  50%  / 60%   60%   40%  40%;
}


/* ----------------
 Circle effect
------------------- */

.hi-icon {
display: inline-block;
/*font-size: 0px;*/
cursor: pointer;
/*margin: 15px 30px;*/
width: 50px;
height: 50px;
border-radius: 50%;
text-align: center;
position: relative;
z-index: 1;
/*color: #fff;*/
}

.hi-icon:after {
pointer-events: none;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
content: '';
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}

.hi-icon:before {
font-family: 'ecoicon';
speak: none;
font-size: 48px;
line-height: 90px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
display: block;
-webkit-font-smoothing: antialiased;
}


/* Effect 2 */
.hi-icon-effect-2 .hi-icon {
/*color: #FFF; /*#eea303*/;*/
/*box-shadow: 0 0 0 3px #FF678E;*/
-webkit-transition: color 0.3s;
-moz-transition: color 0.3s;
transition: color 0.3s;
}

.hi-icon-effect-2 .hi-icon:after {
top: -2px;
left: -2px;
padding: 2px;
z-index: -1;
/*background: #FF678E;*/
-webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
-moz-transition: -moz-transform 0.2s, opacity 0.2s;
transition: transform 0.2s, opacity 0.2s;
}

/* Effect 2a */
.hi-icon-effect-2a .hi-icon:hover {
/*color: #FFF; /*#eea303*/;
}

.hi-icon-effect-2a .hi-icon:hover:after {
-webkit-transform: scale(0.85);
-moz-transform: scale(0.85);
-ms-transform: scale(0.85);
transform: scale(0.85);
}

.external-account-number-text {
font-size: 12px;
font-weight: bold;
}

.chat {
  margin-bottom: 10px;
  margin-top: 10px;
}
.chat .chat-body {
  font-size: 13px;
  padding-bottom: 12px;
}

.chat-img {
padding-left: 5px;
padding-top: 5px
}

.chat li, .chat .sidebar ul li {
  margin-bottom: 0px;
  border-bottom: 0 !important;
}

/*Spinner container*/
.loading, .loading i {
  height: 25px;
  line-height: 25px;
}

.loading i, i.header-loading-indicator {
  display: none;
}

/*#header-loading-indicator {
  display: none !important;
}*/


/*Set panel background color*/
.panel-bg-info {
  background-color: #f8f8f8;
}

.panel-bg-status {
  /*background-color: #f1f1f1;*/
  /*background-color: #eaeaea;*/
  background-color: #fafafa;
}


.status-green {
  color: #28BA28;
}

.status-red {
  color: #EA0000;
}

.status-grey {
  color: #838181
}

.image {
  border: 1px solid #91A4B3;
  margin: 0px 20px 20px 20px;
  padding: 10px;
  vertical-align: text-bottom;
  max-width: 700px;
}


.slideDown {  display: none; }
/*.grabPromo { cursor:pointer; }*/


.border-right {
  border-right: 1px solid #ccc;
}

.border-left {
  border-left: 1px solid #ccc;
}

ul.no-bullets {
list-style-type: none;
}

ul.no-bullets.no-indent, ul.no-indent {
  padding-left: 0px;
}

/*@media (min-width: 992px) {*/

  #j-fixed-header {
      position: fixed;
      top: 0px;
      display:none;
      background-color:white;
  }

      #j-fixed-header .fixed-header-hide {
          display: none;
      }

/*}*/


/*Stop stuff being selected with double click*/
.no-select {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}




/* Credit cards
--------------------- */

.card {
  width: 37px;
  height: 22px;
  display: inline-block;
  margin: 6px 0 0 -74px;
  vertical-align: middle;
  position: relative;
}

.card.visa {
  background: url('/images/creditcards/visa.png');
  background-size: cover;
}

.card.mastercard {
  background: url('/images/creditcards/mastercard.png');
  background-size: cover;
}

.card.amex {
  background: url('/images/creditcards/amex.png');
  background-size: cover;
}

.card.other {
  background: url('/images/creditcards/money.png');
  background-size: cover;
}


/*Diver with shadow
--------------------- */

.or-spacer {
margin-top: 100px;
margin-left: 100px;
width: 400px;
position: relative;
}
.or-spacer .mask {
overflow: hidden;
height: 20px;
}
.or-spacer .mask:after {
content: '';
display: block;
margin: -25px auto 0;
width: 100%;
height: 25px;
border-radius: 125px / 12px; 0 0 6px #333; /*0 0 8px black;*/
}
.or-spacer span {
width: 50px;
height: 50px;
position: absolute;
bottom: 100%;
margin-bottom: -25px;
left: 50%;
margin-left: -25px;
border-radius: 100%;
box-shadow: 0 2px 4px #999;
background: white;
}
.or-spacer span i {
position: absolute;
top: 4px;
bottom: 4px;
left: 4px;
right: 4px;
border-radius: 100%;
border: 1px dashed #aaa;
text-align: center;
line-height: 40px;
font-style: normal;
color: #999;
}

.or-spacer-vertical {
display: inline-block;
width: 20px;
position: relative;
}
.or-spacer-vertical .mask {
overflow: hidden;
width: 20px;
height: 200px;
}
.or-spacer-vertical.left .mask:after {
content: '';
display: block;
margin-left: -20px;
width: 20px;
height: 100%;
border-radius: 12px / 125px;
box-shadow: 0 0 6px #A9A9A9; /*0 0 8px black;*/
}
.or-spacer-vertical.right .mask:before {
content: '';
display: block;
margin-left: 20px;
width: 20px;
height: 100%;
border-radius: 12px / 125px;
box-shadow: 0 0 6px #333; /*0 0 8px black;*/
}




/*Ribbons
--------------------- */

/* The ribbons */

.corner-ribbon{
width: 200px;
background: #e43;
position: absolute;
top: 25px;
left: -50px;
text-align: center;
line-height: 15px; /*50*/
letter-spacing: 1px;
color: #f0f0f0;
transform: rotate(-40deg); /*45*/
-webkit-transform: rotate(-40deg); /*45*/
z-index: 1;
padding: 10px; /*added*/
}

/* Custom styles */

.corner-ribbon.sticky{
/*position: fixed;*/
position: absolute;
}

.corner-ribbon.shadow{
box-shadow: 0 0 3px rgba(0,0,0,.3);
}

/* Different positions */

.corner-ribbon.top-left{
top: 19px; /*25*/
left: -48px; /*-50*/
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}

.corner-ribbon.top-right{
top: 25px;
right: -50px;
left: auto;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}

.corner-ribbon.bottom-left{
top: auto;
bottom: 25px;
left: -50px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}

.corner-ribbon.bottom-right{
top: auto;
right: -50px;
bottom: 25px;
left: auto;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}

/* Colors */

.corner-ribbon.white{background: #f0f0f0; color: #555;}
.corner-ribbon.black{background: #333;}
.corner-ribbon.grey{background: #999;}
.corner-ribbon.blue{background: #39d;}
.corner-ribbon.green{background: #2c7;}
.corner-ribbon.turquoise{background: #1b9;}
.corner-ribbon.purple{background: #95b;}
.corner-ribbon.red{background: #e43;}
.corner-ribbon.orange{background: #e82;}
.corner-ribbon.yellow{background: #ec0;}


/* JSON highlighting */

pre.color {
  /*outline: 1px solid #ccc;*/
  color: #333;
  padding: 5px;
  margin: 5px;
  border: 1px solid #ccc;

  background-color: #f2f2f2;
}

.string { color: #C03030; }
.number { color: darkorange; }
.boolean { color: blue; }
.null { color: magenta; }
.key { color: #2060A0; }


/* API docs menu */

ul.links li a:hover:after,
.api-docs.sidebar ul li a:hover:after,
#wiki-topics li ul li a:hover:after {
content: "\00a0\2192";
}

.api-docs.sidebar ul li {
border-bottom: 0;
}

#wiki-topics li a:hover:after {
content: "";
}

ul#wiki-topics {
font-family: 'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
font-size: 12px;
font-style: normal;
/*font-weight: bold;*/
line-height: 19px;
/*text-transform: uppercase;*/

list-style: none;
}

ul#wiki-topics a {
border: 0;
}


ul#wiki-topics > li > a {
background-image: url('/assets/images/api-docs/icons.png');
background-position: right -130px;
background-repeat: no-repeat;
padding-right: 15px;
}

ul#wiki-topics > li.closed > a:hover {
background-position: right -130px;
}

ul#wiki-topics > li.closed.current > a {
background-position: right -171px;
}

ul#wiki-topics > li.opened > a {
background-position: right -151px;
}

ul#wiki-topics > li.opened.current > a {
background-position: right -192px;
}

ul#wiki-topics > li.opened.current > a:hover {
background-position: right -192px;
}

ul#wiki-topics li ul {
border-left: 1px solid #dcdee0;
margin: 0;
padding: 4px 0 4px 0;
list-style: none;
}

#wiki-topics li ul li {
background: transparent url('/assets/images/api-docs/wiki-list-bg.png') no-repeat left 8px;
line-height: 19px;
padding-left: 16px;
}

.wiki-post-meta {
border-top: 1px solid #dcdee0;
border-bottom: 1px solid #fcfdff;
position: relative;
margin-bottom: 18px;
}

.closed .target,
.closed ul {
display: none;
visibility: hidden;
}

.opened .target,
.opened ul {
display: block;
visibility: visible;
}

/* API Docs */

.parameter, #response-info tr {
  border-bottom: 1px solid #e1e8ed;
  padding: 20px 0 4px;
  width: 100%;
  min-height: 60px;
  color: #292F33;
}

.parameter:last-child {
  border: none;
}

.parameter .param {
  z-indexwebkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  color: #000;
  display: block;
  float: left;
  font-size: 18px;
  font-weight: 500;
  padding-right: 10px;
  width: 35%;
  word-wrap: break-word;
}

.parameter .param > span, #response-info th {
  color: #8899a6;
  display: block;
  font-weight: normal;
  /*font-size: 18px;*/
}

.parameter p {
  margin-bottom: 16px;
  margin-left: 35%;
  margin-top: 0;
}

.resource-url {
  color: #292f33;
  font-size: 1em;
}

h3.api-heading {
  margin-bottom: 8px;
}

.api code {

}

#response-info th {
  width: 200px;
}

#response-info tr td, #response-info tr th  {
  padding: 20px 0;
  font-size: 13px;
  /*margin: 20px 0;*/
}

.resource-data-list {
  font-size: 12px;
  line-height: 20px;

}



/* Jude's refinements */
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/


.panel-body {
  padding: 30px;
}

#reports .panel-body {
padding: 15px;
}

.form-group {
  margin-bottom: 10px;
}

.form-control {
  height: 32px;
  padding: 5px 12px; /* originally: 6px 12px;, but some low hangin lettters (g) get cut off in Windows */
}

#create-page {
height: initial;
}

.form-horizontal .form-group .col-sm-5 .control-label:first-child,
.form-horizontal .form-group .col-sm-3.control-label:first-child {
  text-align: left;
  margin-left: 40px;
}

#reports .form-horizontal .form-group .col-sm-5 .control-label:first-child,
#reports .form-horizontal .form-group .col-sm-3.control-label:first-child {
  text-align: right;
  margin-left: 0px;
}

/* modal fix */
.modal .form-horizontal .form-group .col-sm-5 .control-label:first-child,
.modal .form-horizontal .form-group .col-sm-3.control-label:first-child {
  margin-left: 0px;
}

.form-group .control-offset {
  /*
    Changed this to 55px, from 40px, to fix checkboc alignmnt
    UPdate ('http://managementportal.dev/plan/edit?alias=CallingPlan536' needs it to be about 40px)
  */
  padding-left: 40px;
  /*padding-left: 55px;*/
}

/* Set left and right form margins (this is overridden for mobile, below) */
form .col-sm-5, form .col-sm-7 {
  padding-left: 0;
}

.btn-group-xs>.btn, .btn-xs {
  padding: 4px 7px;
  margin-top: -4px;
}

/* disabled elements */
.cancelled {
text-decoration: line-through;
color: grey;
}




/* =============================================================== */
/* THIS COOL GUY CODE BELOW IS FOR RESPONSIVE STUFF
/* =============================================================== */

/* iPad type device size ? */
@media (min-width: 668px) and (max-width: 1025px) {

  body {
      background-color: #fff;
  }

  .main-container {
      width: 100%;
      padding: 0;
  }

  /*Apply to the panel to decrease the padding*/
  .panel-body.mobile-panel-0 { padding: 0px !important; }
  .panel-body.mobile-panel-10 { padding: 10px !important; }

  .mobile-pad-bottom-10 { margin-bottom: 10px; }
}


/* iPhone type device size ? */
@media (max-width: 767px) {
/*@media (max-width: 1023px) {*/


  /* Set left and right form margins */
  form .col-sm-3, form .col-sm-5, form .col-sm-7 {
      padding-left: 10px !important;
      padding-right: 10px !important;
  }

/* =============================================================== */
/* Scroll main menu (functionality)
/* =============================================================== */

  #slider {
  overflow-x: scroll; /* scroll; */ /* 1 */
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch; /* 2 */
  }

  /*Hides scroll bar (optional)*/
  #slider::-webkit-scrollbar {
  display: none;
  }

  #slider ul {
  text-align: justify; /* 3 */
  width: 100%; /* (65em)  value must be larger than the sum of all the li's width. (default) */
  margin: 0; /*hides white space under ul*/
  }

      /* CAP */
      #slider ul.menu-account { width: 65em; }
      #slider ul.menu-customer { width: 130em; }
      #slider ul.menu-add-customer { width: 21em; }
      #slider ul.menu-plan { width: 66em; }
      #slider ul.menu-admin { width: 55em; }
      #slider ul.menu-number { width: 87em; }
      #slider ul.menu-broadband { width: 39em; }
      #slider ul.menu-mobile { width: 66em; }

      /* BUMP */
      #slider ul.customer-menu-account { width: 65em; }
      #slider ul.customer-menu-customer { width: 130em; }
      #slider ul.customer-menu-pbx { width: 108em; }
      #slider ul.customer-menu-emergency { width: 27em; }
      #slider ul.customer-menu-broadband { width: 89em; }
      #slider ul.customer-menu-mobile { width: 89em; }
      #slider ul.customer-menu-secret { width: 29em; }



#slider ul:after { /* 5 */
  content: '';
  display: inline-block;
  width: 100%;
}

#slider li {
  display: inline-block; /* 6 */
  border: 0;
  height: 40px;
}


  #slider li a {
      margin: 10px 0 0 0;
  }


#slider .nav>li>a {
  padding: 0 12px 0 12px;
  text-decoration: none;
}

/* This is a Bootstrap 3 class I've extended */
.table-responsive {
  padding-left: 0px;
  padding-right: 0px;
}

.row.cut-row-margins-xs {
  margin-right: -30px;
  margin-left: -30px;
}

/* =============================================================== */
/* Scroll main menu (styling)
/* =============================================================== */

  #slider {
      /*border: 1px solid #337ab7;*/
      /*Extend menu to edges*/
      margin-left: -15px;
      margin-right: -15px;

      /*background-color: #55c1e7;*/
  }

  #slider ul {
      background-color: #55c1e7;
      height: 40px;
  }

   .management-view #slider, .management-view #slider ul {
      background-color: #55c1e7;
  }

   .customer-view #slider, .customer-view #slider ul {
      background-color: #ffe45e;
      /*color: #f5f5f5 ;*/
  }

  .management-view #slider li a {
      color: #FFF;
  }

  .customer-view #slider li a {
      color: #333;
  }

  /*reset*/
  .sidebar ul li a.active {
      background-color: initial;
  }

  .management-view .sidebar ul li.active {
      background-color: #337ab7 !important;
  }

  .customer-view .sidebar ul li.active {
      background-color: #dbc258 !important;
  }


  .sidebar .nav>li>a:hover {

      background-color: transparent !important;
  }

/* =============================================================== */
/* Other phone responsive magic
/* =============================================================== */

  body {
      background-color: #fff;
  }

  #page-wrapper {
      padding-left: 0;
      padding-right: 0;
  }

  /*Modal fix*/
  .modal-body {
      padding: 30px;
  }

  /*Apply to the panel to decrease the padding*/
  /*.panel-body.mobile-panel-0 { padding: 0px !important; }*/
  /*.panel-body.mobile-panel-10 { padding: 10px !important; }*/
  /*.mobile-pad-bottom-10 { margin-bottom: 10px; }*/

  i.expand-page {
      display: none !important;
  }

  /*Release notes*/
  ul.no-bullets {
      padding: 10px;
  }

/* =============================================================== */
/* Forms
/* =============================================================== */



  .control-label {
      margin-left: 0 !important;
      padding-left: 0;
      font-weight: bold !important;
  }

  .form-control-static {
      margin-top: -10px;
      padding-bottom: 10px;
  }

}

/* =============================================================== */
/* Pulse
/* =============================================================== */



@-webkit-keyframes pulse
{
  0% {-webkit-transform: scale(0); opacity: 0;}
  8% {-webkit-transform: scale(0); opacity: 0;}
  15% {-webkit-transform: scale(0.1); opacity: 1;}
  20% {-webkit-transform: scale(0.5); opacity: 1;}
  100% {opacity: 0; -webkit-transform: scale(1);}
}

@-moz-keyframes pulse
{
  0% {-moz-transform: scale(0); opacity: 0;}
  8% {-moz-transform: scale(0); opacity: 0;}
  15% {-moz-transform: scale(0.1); opacity: 1;}
  20% {-moz-transform: scale(0.5); opacity: 1;}
  100% {opacity: 0; -moz-transform: scale(1);}
}

.pulse-status-red .pulse_holder
{
  display: block;
  position: relative;
  float: left;
}

.pulse-status-red .pulse_holder .pulse_rays
{
  margin: 0 auto;
  border-radius: 50px;
  position: absolute;
  left: -12px;
  top: -10px;
  z-index: 10;
  background-color: transparent;
  opacity: 0.1;
  width: 40px;
  height: 40px;
  border: 2px solid rgba(234, 0, 0, 1);
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -o-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px;
  /* Giving Animation Function */
  -webkit-animation: pulse 2s linear infinite;
  -moz-animation: pulse 2s linear infinite;
  border-image: initial;
}


/* =============================================================== */
/* Teams / Director
/* =============================================================== */


ol.wizard .completed {
    color: #ccc;
}

ol.wizard .current {
    color: #333;
    font-weight: bold;
    /*text-decoration: underline;*/
}

ol.wizard .waiting {
    color: #8e8e8e;
}

.breadcrumb > li + li:before {
    color: #ccc;
    /*content: "/ ";*/
    padding: 0 5px;

    font-family: FontAwesome;
    content: "\f054";

}

.teams-image {
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;

}


/* =============================================================== */
/* Terminal page
/* =============================================================== */


.terminal-button-container {
    float: right;
    position: relative;
    right: 4px;
    top: 13px;
    z-index:10;
    border:0px solid red;
    width:50px;
    height:30px
}

    .terminal-button-container .btn {
        display: none;
    }


.terminal-save-container {
    text-align: center;
    margin-top: 20px;
}


/**
 *  Terminal style
 --------------------------
 */

.terminal {
    font-family: monospace, monospace;
    background-color: #292f39;
    color: #ccc;
    min-height: 60px;
    padding: 20px;
    border-radius: 3px;
}




/* =============================================================== */
/* Footer
/* =============================================================== */


footer {
/*    border-left: 1px solid #e7e7e7;
  border-right: 1px solid #e7e7e7;
  border-bottom: 1px solid #e7e7e7;*/

  border-top: 1px solid #e7e7e7;

  color: #7b7b7b;
  margin: 0 0 55px 250px;

  height: 40px;
  line-height: 40px;
}

.footer {
/*font-size: 12px;*/
text-align: center;
/*background-color: #fff;*/
background-color: #f8f8f8;

}

.footer-container {
display: inline-block;
vertical-align: middle;
line-height: normal;
width: 100%;

}

a.social-icon {
color: #555;
font-size: 18px;
}

a.social-icon:hover {
color: #337ab7;
}