/*



              ***** 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;
}