/*!
 * Start Bootstrap - SB Admin 2 Bootstrap Admin Theme (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

body {
    background-color: #f8f8f8;
}

#wrapper {
    width: 100%;
}

#page-wrapper, #page-wrapper-full {
    padding: 0 15px;
    min-height: 568px;
    background-color: #fff;
}

@media(min-width:768px) {
    #page-wrapper {
        position: inherit;
        margin: 0 0 0 250px;
        padding: 0 30px;
        border-left: 1px solid #e7e7e7;
    }
    #page-wrapper-full {
        position: inherit;
        margin: 0 0 0 0px;
        padding: 0 30px;
        border-left: 1px solid #e7e7e7;
    }
}

@media(min-width:768px) and (max-width:1023px) { /*-j*/
    #page-wrapper {
        margin: 0 0 0 200px;
    }
}

@media (max-width: 767px) {
    #page-wrapper {
        border-right: 0 !important;
    }
}

.navbar-top-links {
    margin-right: 0;
}

.navbar-top-links li {
    display: inline-block;
}

.navbar-top-links li:last-child {
    margin-right: 15px;
}

.navbar-top-links li a {
    /*padding: 15px;*/
    padding: 15px 10px; /* -j */
    min-height: 50px;
}

.navbar-top-links .dropdown-menu li {
    display: block;
}

.navbar-top-links .dropdown-menu li:last-child {
    margin-right: 0;
}

.navbar-top-links .dropdown-menu li a {
    padding: 3px 20px;
    min-height: 0;
}

.navbar-top-links .dropdown-menu li a div {
    white-space: normal;
}

.navbar-top-links .dropdown-messages,
.navbar-top-links .dropdown-tasks,
.navbar-top-links .dropdown-alerts {
    width: 310px;
    min-width: 0;
}

.navbar-top-links .dropdown-messages {
    margin-left: 5px;
}

.navbar-top-links .dropdown-tasks {
    margin-left: -59px;
}

.navbar-top-links .dropdown-alerts {
    margin-left: -123px;
}

.navbar-top-links .dropdown-user {
    right: 0;
    left: auto;
}

.sidebar .sidebar-nav.navbar-collapse {
    padding-right: 0;
    padding-left: 0;
}

.sidebar .sidebar-search {
    padding: 6px 15px 6px 15px; /*-j*/
}

.sidebar ul li {
    border-bottom: 1px solid #e7e7e7;
    background-color: #f8f8f8
}

.sidebar ul li a.active {
    background-color: #eee;
}

.sidebar .arrow {
    float: right;
}

.sidebar .fa.arrow:before {
    content: "\f104";
}

.sidebar .active>a>.fa.arrow:before {
    content: "\f107";
}

.sidebar .nav-second-level li,
.sidebar .nav-third-level li {
    border-bottom: 0!important;
}

.sidebar .nav-second-level li a {
    padding-left: 37px;
}

.sidebar .nav-third-level li a {
    padding-left: 52px;
}

@media(min-width:768px) {
    .sidebar {
        z-index: 1;
        position: absolute;
        width: 250px;
        /*padding-top: 10px;*/ /*-j*/
    }

    .navbar-top-links .dropdown-messages,
    .navbar-top-links .dropdown-tasks,
    .navbar-top-links .dropdown-alerts {
        margin-left: auto;
    }
}
@media(min-width:768px) and (max-width:1023px) { /*-j*/
    .sidebar {
        width: 200px;
    }
}

.btn-outline {
    color: inherit;
    background-color: transparent;
    transition: all .5s;
}

.btn-primary.btn-outline {
    color: #428bca;
}

.btn-success.btn-outline {
    color: #5cb85c;
}

.btn-info.btn-outline {
    color: #5bc0de;
}

.btn-warning.btn-outline {
    color: #f0ad4e;
}

.btn-danger.btn-outline {
    color: #d9534f;
}

.btn-primary.btn-outline:hover,
.btn-success.btn-outline:hover,
.btn-info.btn-outline:hover,
.btn-warning.btn-outline:hover,
.btn-danger.btn-outline:hover {
    color: #fff;
}

.chat {
    margin: 0;
    padding: 0;
    list-style: none;
}

.chat li {
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px dotted #999;
}

.chat li.left .chat-body, .chat .chat-body { /*-j*/
    /*margin-left: 60px;*/
    margin-left: 15px;
}

.chat li.right .chat-body {
    margin-right: 60px;
}

.chat li .chat-body p {
    margin: 0;
}

.panel .slidedown .glyphicon,
.chat .glyphicon {
    margin-right: 5px;
}

.chat-panel .panel-body {
    height: 350px;
    overflow-y: scroll;
}

.from-top {
    margin-top: 5%;
}

/*-j*/
/*.login-panel {
    margin-top: 50px;
}*/

.login-header { /*-j*/
    margin-bottom: 50px;
}

.flot-chart {
    display: block;
    height: 400px;
}

.flot-chart-content {
    width: 100%;
    height: 100%;
}

.dataTables_wrapper {
    position: relative;
    clear: both;
}

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled {
    background: 0 0;
}

table.dataTable thead .sorting_asc:after {
    content: "\f0de";
    float: right;
    font-family: fontawesome;
}

table.dataTable thead .sorting_desc:after {
    content: "\f0dd";
    float: right;
    font-family: fontawesome;
}

table.dataTable thead .sorting:after {
    content: "\f0dc";
    float: right;
    font-family: fontawesome;
    color: rgba(50,50,50,.5);
}

.btn-circle {
    width: 30px;
    height: 30px;
    padding: 6px 0;
    border-radius: 15px;
    text-align: center;
    font-size: 12px;
    line-height: 1.428571429;
}

.btn-circle.btn-lg {
    width: 50px;
    height: 50px;
    padding: 10px 16px;
    border-radius: 25px;
    font-size: 18px;
    line-height: 1.33;
}

.btn-circle.btn-xl {
    width: 70px;
    height: 70px;
    padding: 10px 16px;
    border-radius: 35px;
    font-size: 24px;
    line-height: 1.33;
}

.show-grid [class^=col-] {
    padding-top: 10px;
    padding-bottom: 10px;
    border: 1px solid #ddd;
    background-color: #eee!important;
}

.show-grid {
    margin: 15px 0;
}

.huge {
    font-size: 40px;
}

.panel-green {
    border-color: #5cb85c;
}

.panel-green .panel-heading {
    border-color: #5cb85c;
    color: #fff;
    background-color: #5cb85c;
}

.panel-green a {
    color: #5cb85c;
}

.panel-green a:hover {
    color: #3d8b3d;
}

.panel-red {
    border-color: #d9534f;
}

.panel-red .panel-heading {
    border-color: #d9534f;
    color: #fff;
    background-color: #d9534f;
}

.panel-red a {
    color: #d9534f;
}

.panel-red a:hover {
    color: #b52b27;
}

.panel-yellow {
    border-color: #f0ad4e;
}

.panel-yellow .panel-heading {
    border-color: #f0ad4e;
    color: #fff;
    background-color: #f0ad4e;
}

.panel-yellow a {
    color: #f0ad4e;
}

.panel-yellow a:hover {
    color: #df8a13;
}




/**
 *
 *
 *                         _
 *                        | |
 *           ___ _   _ ___| |_ ___  _ __ ___
 *          / __| | | / __| __/ _ \| '_ ` _ \
 *         | (__| |_| \__ \ || (_) | | | | | |
 *          \___|\__,_|___/\__\___/|_| |_| |_|
 *
 *
 *
 *



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: 5px;
    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: 20px 0 40px 0;
}

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

/* 2. 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;
}

.table>tbody>tr>td {
    border-top: 1px solid #ececec;
}


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

.input-group-addon .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;
}

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


    .frm-payment .pay-sub-header {
        font-weight: bold;
        display: inline-block;
        border: 1px solid #ddd;
        width: 100%;
        padding: 10px 10px;
        background-color: #f5f5f5;
        margin: 30px 0 10px 0;
    }

    .frm-payment .card-type-select .pay-sub-header {
        margin-top: 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;
}


/* Connection page ========================================================== */

table .form-group.min {
    /*margin: 0 5px;*/
}

table .form-group.min .form-control {
    height: 28px;
    padding: 6px 6px;
}

table .form-group.min .input-group-addon {
    padding: 6px 6px;
}


.save-pulse {
    animation: singlepulse 3s ;
}

@keyframes singlepulse {
  0%, 100% {
    color: darkgrey;
  }
  10%, 90% {
    color: green;
  }
}


/* Broadband connection results ==============================================*/

#status-container {
    border: 0px solid black;
    display: inline-block;
}

    #status-indicator {
        float:left;
        width: 70px;
        border: 0px solid purple;
        text-align: center;

    }

        #ont-status-circle {
            width: 50px;
            height: 50px;
        }


    #status-result {
        float: right;
        padding-left: 15px;
        border: 0px solid green;
    }

        #ont-status-text {
            font-weight: bold;
        }

06-0188-0100723-03
.status-note {
    margin-top: 30px;
    font-size: 12px;
}

#broadband-tests .port {
    display: inline;
}

.port-status-description {
    width: 100%;
    /*border: 1px solid #000;*/
    background-color: #fff;
    padding: 15px 15px;
    color: #333;
}


.port-container {
    display: inline-block;
}
    .port-container  span.rgw-status  {
        position: absolute;
        top: -25px;
        font-size: 30px;

        margin-left: -44px;
    }

        .port-container  span.rgw-status-yes  {
            color: green;
        }

        .port-container  span.rgw-status-no  {
            color: red;
        }

    .port-container  span.rgw-status-yes-1  {
/*        left: 37px;*/
    }

    .port-container  span.rgw-status-yes-2  {

    }




#description-box-container {
    margin-top: 10px;
    margin-bottom: 10px;
}




/* Port 1 arrow */
#description-box-container #port-status-description-1.arrow_box:before {
    margin-left: -164px;
}
#description-box-container #port-status-description-1.arrow_box:after {
    margin-left: -163px;
}

/* Port 2 arrow */
#description-box-container #port-status-description-2.arrow_box:before {
    margin-left: -97px;
}
#description-box-container #port-status-description-2.arrow_box:after {
    margin-left: -96px;
}

/* Port 3 arrow */
#description-box-container #port-status-description-3.arrow_box:before {
    margin-left: -29px;
}
#description-box-container #port-status-description-3.arrow_box:after {
    margin-left: -28px;
}

/* Port 4 arrow */
#description-box-container #port-status-description-4.arrow_box:before {
    margin-left: 39px;
}
#description-box-container #port-status-description-4.arrow_box:after {
    margin-left: 40px;
}

/* Port 5 arrow */
#description-box-container #port-status-description-5.arrow_box:before {
    margin-left: 107px;
}
#description-box-container #port-status-description-5.arrow_box:after {
    margin-left: 108px;
}



#traffic-size {
    border: 1px solid;
    display: inline-block;
    width: 100%;
    height: 102px;
    vertical-align: middle;
    font-size: 12px;
}

    #traffic-size #upload-container {
        float: left;
        width: 50%;
        text-align: center;
        vertical-align: middle;

        border-right: 1px solid;
    }

    #traffic-size #download-container {
        float: left;
        width: 50%;
        text-align: center;
        vertical-align: middle;
    }

        #traffic-size #upload-container div#upload-size,
        #traffic-size #download-container div#download-size {
            font-weight: bold;
            font-size: 25px;
        }

            #traffic-size #upload-container div#upload-size span,
            #traffic-size #download-container div#download-size span {
                font-size: 13px;
            }



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


/*
The following is depricated and replaced with - status-level-* (utils.css)
for themability
*/
.status-green {
    color: #28BA28;
}

.status-red {
    color: #EA0000;
}

.status-grey {
    color: #838181
}



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

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

.panel-body.slim {
    padding: 25px 30px 15px 30px;
}

.panel-body.slim-no-panel-header {
    padding: 15px 30px 15px 30px;
}

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

/* Provide visual difference (account/ 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;
}

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

.iframe-panel {
    border: 1px solid rgb(221, 221, 221);
    border-radius: 4px;
}


/* ======================
   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 #ffcd15;
  font-size:30px;
  color:#000;
  line-height:50px;
  text-align:center;
  font-family: Verdana, sans-serif;
}
.cap-c-circle:after {
  background: #ffcd15;
}
.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;
}

.chat h4 {
    text-shadow: 1px 1px 2px #fff;
    font-size: 12px;
    display: inline-block;
    margin-bottom: 5px;
    font-weight: bold;
}
/*#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;
}



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




/* ======================
  Broadband Identity card
========================== */

/*sidebar more*/
.customer-menu-broadband a#sidebar-more.active,
.customer-menu-pbx a#sidebar-more.active {
    background-color: initial ;
}

.customer-menu-broadband .sidebar ul li.sidebar-search a.btn-header.active,
.customer-menu-pbx .sidebar ul li.sidebar-search a.btn-header.active {
    background-color: #FF678E;
    text-decoration: none;
}
.customer-menu-broadband .sidebar ul li.sidebar-search a.btn-header.active:hover,
.customer-menu-pbx .sidebar ul li.sidebar-search a.btn-header.active:hover {
    text-decoration: none;
}

/* Customer */
.customer-menu-broadband .sidebar-search .btn-header,
.customer-menu-pbx .sidebar-search .btn-header {
    background-color: #FF678E;
    color: #fff;
    padding: 7px 50px;
    outline: none;
}

/* Cap */
.menu-broadband .sidebar-search .btn-header {
    /*background-color: #55C1E7;*/
    color: #fff;
    padding: 7px 60px;
    outline: none;
}

/* ======================
   Graph Legend Placement
========================== */

.legend {
    top: -47px;
    position: relative;
}

.legend td.legendColorBox {
    padding-right: 5px;
}

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

    .pagination>li>a {
        padding: 6px 10px;
    }


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

    span.fa.arrow {
        display: none;
    }

    .sidebar {
        overflow: auto;
        margin-left: -15px;
        margin-right: -15px;
        height: 40px;

        overflow-y: hidden;
        /*overflow-x: scroll;*/
        -webkit-overflow-scrolling: touch;
    }

    #slider {
        overflow: auto;
        display: inline-block;
    }

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

    #slider ul {
        overflow: auto;
        white-space: nowrap;
        text-align: center;
        margin: 0; /*hides white space under ul*/
        /*width: auto;*/
    }

    /* 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: 33em; }
    #slider ul.menu-broadband { width: 23em; }*/

    /* BUMP [naming: [portal]-menu-[section]-[index] */
/*    #slider ul.customer-menu-account { width: 65em; }
    #slider ul.customer-menu-customer-1 { width: 130em; }
    #slider ul.customer-menu-customer-2 { width: 130em; }
    #slider ul.customer-menu-pbx { width: 68em; }
    #slider ul.customer-menu-emergency { width: 27em; }
    #slider ul.customer-menu-broadband { width: 89em; }
    #slider ul.customer-menu-secret { width: 29em; }*/


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

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


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


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

    .sidebar ul li {
        background-color: #55c1e7;
    }



    #paginatron-data {
      display: inline-flex;
    }

    #page-search-filter {
        margin-top: 30px;
    }


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

    #slider {

    }

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

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


/* =============================================================== */
/* Version 2 - Scroll (sub) menu (styling)
/* =============================================================== */


    div.scrollmenu {
        margin-top: 10px;
    }

    /* Hide the scroll bar */
    div.scrollmenu::-webkit-scrollbar {
        display: none;
    }

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

    body {
        background-color: #fff;
    }

    #page-wrapper {
        padding-left: 0;
        padding-right: 0;
        border-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;
  }



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


/* =============================================================== */
/* List organiiser
/* =============================================================== */


.subject-info-box-1,
.subject-info-box-2 {
  float: left;
  /*width: 45%;*/
  width: 100%;
}
.subject-info-box-1 select,
.subject-info-box-2 select {
  height: 200px;
  padding: 0;
}
.subject-info-box-1 select option,
.subject-info-box-2 select option {
  padding: 4px 10px 4px 10px;
}
.subject-info-box-1 select option:hover,
.subject-info-box-2 select option:hover {
  background: #EEEEEE;
}

.subject-info-arrows {
  float: left;
  /*width: 10%;*/
  width: 100%;
}
.subject-info-arrows input {
  width: 70%;
  margin-bottom: 5px;
}


.subject-info-arrows {
    margin-top: 30px;
}

.subject-info-arrows .btn {
    margin-top: 10px;
}

.subject-info-arrows.mobile {
    margin-top: 0px;
    margin-bottom: 10px;
}

/* =============================================================== */
/* QOS page
/* =============================================================== */

a#btn-run-speed-test .panel-body {
    -o-transition:.3s;
    -ms-transition:.3s;
    -moz-transition:.3s;
    -webkit-transition:.3s;
    transition:.3s;
}

a#btn-run-speed-test .panel-body:hover {
    background-color: #fbfbfb;

}


/* =============================================================== */
/* Zendsupport/ Zendesk
/* =============================================================== */


/* Attachments */
/* ----------------------------------------------------- */

.zend-chat .attachments  {
    float:left;
    clear:both;
    margin-top: -22px;
    margin-left: 13px;
    margin-bottom: 16px;
}
    .zend-chat .attachments i.attachment {
        margin-left: 10px;
    }


.zend-chat .attachments.attach-aligh-right {
    float:right;
    clear:both;
    margin-top: -22px;
    margin-right: 13px;
    margin-bottom: 16px;
}

    .zend-chat .attachments.attach-aligh-right i.attachment {
        /*margin-right: 10px;*/
    }


/* Speach bubbles */
/* ----------------------------------------------------- */

.zend-chat {
    /*width: 490px;*/
    width: 600px;
    float: right;
    margin-right: 77px;
    /*background: #f2f5f8;*/
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    color: #434651;
    display: contents;
}
.zend-chat .chat-header {
  padding: 20px;
  border-bottom: 2px solid white;
}
.zend-chat .chat-header img {
  float: left;
}
.zend-chat .chat-header .chat-about {
  float: left;
  padding-left: 10px;
  margin-top: 6px;
}
.zend-chat .chat-header .chat-with {
  font-weight: bold;
  font-size: 16px;
}
.zend-chat .chat-header .chat-num-messages {
  color: #92959e;
}
.zend-chat .chat-header .fa-star {
  float: right;
  color: #d8dadf;
  font-size: 20px;
  margin-top: 12px;
}
.zend-chat .chat-history {
  padding: 30px 30px 20px;
  border-bottom: 2px solid white;
  overflow-y: scroll;
  /*height: 575px;*/
}
.zend-chat .chat-history .message-data {
  margin-bottom: 15px;
}
.zend-chat .chat-history .message-data-time {
  color: #a8aab1;
  padding-left: 6px;
}
.zend-chat .chat-history .message {
  color: white;
  padding: 18px 20px;
  line-height: 26px;
  font-size: 16px;
  border-radius: 7px;
  margin-bottom: 30px;
  width: 90%;
  position: relative;
}
.zend-chat .chat-history .message:after {
  bottom: 100%;
  left: 7%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-bottom-color: #86bb71;
  border-width: 10px;
  margin-left: -10px;
}
.zend-chat .chat-history .my-message {
  background: #86bb71;
}
.zend-chat .chat-history .other-message {
  background: #94c2ed;
}
.zend-chat .chat-history .other-message:after {
  border-bottom-color: #94c2ed;
  left: 93%;
}
.zend-chat .chat-message {
  padding: 30px;
}
.zend-chat .chat-message textarea {
  width: 100%;
  border: none;
  padding: 10px 20px;
  font: 14px/22px "Lato", Arial, sans-serif;
  margin-bottom: 10px;
  border-radius: 5px;
  resize: none;
}
.zend-chat .chat-message .fa-file-o,
.zend-chat .chat-message .fa-file-image-o {
  font-size: 16px;
  color: gray;
  cursor: pointer;
}
.zend-chat .chat-message button {
  float: right;
  color: #94c2ed;
  font-size: 16px;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  font-weight: bold;
  background: #f2f5f8;
}
.zend-chat .chat-message button:hover {
  color: #75b1e8;
}

.online,
.offline,
.me {
  margin-right: 3px;
  font-size: 10px;
}

.online {
  color: #86bb71;
}

.offline {
  color: #e38968;
}

.me {
  color: #94c2ed;
}

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

.align-right {
  text-align: right;
}

.float-right {
  float: right;
}


/* =============================================================== */
/* 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;

}




/* =============================================================== */
/* Status color for nav bar notification drop down
/* =============================================================== */

.noti-heading {
    width: 100%;
    display: block;
    padding: 3px 12px;
    margin: 0 0 8px 0;
    background-color: #cfcece;
        border-radius: 4px;
}

.noti-info1 {
    background-color: #428bca;
}

/* green */
.noti-featurerelease {
/*    background-color: #dff0d8;*/
    background-color: #5cb85c;
    color: #FFF;
}

/* blue  */
.noti-info {
/*    background-color: #d9edf7;*/
    background-color: #5bc0de;
    color: #FFF;
}

/* warning */
.noti-warning {
/*    background-color: #fcf8e3;*/
    background-color: #eea236;
    color: #FFF;
}

.noti-danger {
/*    background-color: #f2dede;*/
    background-color: #d9534f;
    color: #FFF;
}


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


/**
 *
 *
 *         _   _                    _
 *        | | | |                  (_)
 *        | |_| |__   ___ _ __ ___  _ _ __   __ _
 *        | __| '_ \ / _ \ '_ ` _ \| | '_ \ / _` |
 *        | |_| | | |  __/ | | | | | | | | | (_| |
 *         \__|_| |_|\___|_| |_| |_|_|_| |_|\__, |
 *                                           __/ |
 *                                          |___/
 *
 *
 *
 * Could possibly belong in utils.css but not sure?
 */



/**
 *  SVG image.
 --------------
 * If you convert an icon image to svg (remove the stroke color attribute) and add the folling
 * class, the color can change dynamically with the theme!
 * See: connectiontestresults.php;
 */

.svg-stroke-color {
    stroke: #000;
}


.muted .svg-stroke-color {
    stroke: #cacaca;
}

.active .svg-stroke-color {
    /*stroke: #dec35e;*/
    fill: #e7e7e7;
}


/**
 *  Generic theme classes.
 --------------------------
 * This is for non-essential classes that add varience to your theme.
 *
 */

.theme-sub-text {

}

.theme-radius {
    border-radius: 4px;
}

/* General theme color for borders */
.theme-border-color {
    border-color: #333;
}



#system-notifications .dropdown-menu {
    padding-bottom: 0;
}

#system-notifications .dropdown-menu>li>a {
    padding: 0;
}

#system-notifications .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
    background-color: unset;
    color: initial;
}



/* Dropdown Notifications */
#system-notifications .dropdown-menu.notifications {
    width: 500px;
/*    max-height: 400px;*/
    overflow-y: auto;
}

#system-notifications .notification-item {
/*    padding: 15px 20px; */
    border-bottom: 1px solid #eee; /* Add divider */
}


#system-notifications .notification-item .fa-external-link {
    font-size: 15px;
}



#system-notifications li.notification-item {
    padding: 15px 20px !important;
}

#system-notifications .notification-item:slast-child {
    border-bottom: none; /* Remove divider from the last item */
}

#system-notifications .notification-item.has-link:hover {
    background-color: #f9f9f9;
}
#system-notifications .notification-content {
    display: flex;
    align-items: center; /* Align items vertically */
}

#system-notifications .notification-status {
    margin-right: 15px; /* Adjust spacing */
    display: flex;
    align-items: center;
}

#system-notifications .notification-status i {
    font-size: 20px; /* Increase icon size */
}

#system-notifications .notification-body {
    flex: 1;
}

#system-notifications .notification-header {
    margin-bottom: 8px; /* Adjust spacing */
}

#system-notifications .notification-type {
    font-weight: bold;
    margin-right: 8px; /* Adjust spacing */
}

#system-notifications .badge {
    margin-left: auto; /* Move badge to the right */
    vertical-align: middle;
}

#system-notifications .badge-danger {
    background-color: #dc3545;
}

#system-notifications .no-notifications {
    text-align: center;
    padding: 10px;
    color: #888;
}

#system-notifications .notification-message {
/*    text-align: justify;*/
    padding-right: 10px;
}


/*------------*/