body {
    background-color: #FFF;
    bottom: 0;
    font-family: Verdana, serif;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.modal-backdrop {
    opacity:0.90 !important;
}

.win-space {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.win-space2 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

#wrapper {
    background-color: #FFF;
    width: 100%;
}

#wrapper > .navbar-windstream > .container-fluid {
    padding-left: 5px;
    padding-right: 5px;
}

#wrapper > .navbar-windstream > .container-fluid a.navbar-brand {
    margin: 0;
}

#page-wrapper {
    background-color: #FFF;
    border-left: 1px solid #e7e7e7;
    bottom: 25px;
    left: 0;
    margin: 52px 0 5px 0;
    overflow: auto;
    padding: 10px 0 0;
    position: absolute;
    right: 0;
    top: 0;
}
/*
#help_btn {
    margin-top: 1rem;
    background-color: #393939;
    color: #7DBA00;
    border-color: #393939;
}

#help_btn:hover {
    background-color: #484848;
    color: #7DBA00;
    font-style: italic;
    border-color: #393939;
}

#help_btn:focus {
    outline: none !important;
    border-color: #393939;
}

#help_btn2 {
    margin-top: 1rem;
    background-color: #393939;
    color: #7DBA00;
    border-color: #393939;
}

#help_btn2:hover {
    background-color: #484848;
    color: #7DBA00;
    font-style: italic;
    border-color: #393939;
}

#help_btn2:focus {
    outline: none !important;
    border-color: #393939;
}
*/
td.black_metric {
    background-color: #979797;
}

td.yellow_metric {
    background-color: #FFFD85;
}

td.red_metric {
    background-color: #FF8585;
}

td.no_base {
    background-color: #C6C;
}

.black_metric {
    background: #979797;
}

.green_metric {
    background: #6C6;
}

.yellow_metric {
    background: #FFFD85;
}

.red_metric {
    background: #FF8585;
}

.no_base {
    background: #C6C;
}

.heatmap_metric {
    cursor: pointer;
    font-size: 6pt;
    height: 18px;
    padding: 1px;
    text-align: center;
    width: 18px;
}

.hoverinfo {
    background-color: #FFF;
    border: 1px solid #CCC;
    border-radius: 1px;
    box-shadow: 1px 1px 5px #CCC;
    font-size: 12pt;
    padding: 4px;
}

th.rotate {
    white-space: nowrap;
}

.footer {
    padding: 5px;
    height: 30px;
    position: fixed;
    bottom: 0px;
    width: 100%;
    background-color: #393939;
    color: #CECECE;
}

.footer span {
    position: relative;
    top: 0px;
}

.border-bottom {
    border-bottom: 1px solid #DDD;
}

.clickable, a:hover {
    cursor: pointer;
}

.nav-box-shadow--2dp, .table-box-shadow--2dp, .box-shadow--2dp {
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
}

td.old_green, td.green_metric {
    background-color: #6C6;
}

#historyModalLabel {
    text-align: center;
}

#history_charts_div .history-chart-container {
    max-height: 300px;
    margin: 5px 10px 15px 10px;
    background-color: #f7f7f7;
    border-radius: 7px;
    border-color: #ddd;
    border-width: thin;
    border-style: dashed;
}

#history_charts_div #fd_chart_wrapper {
    margin-top: 15px;
}

#tooltip-container {
    background-color: #fff;
    border-radius: 5px;
    color: #000;
    display: none;
    padding: 0;
    position: absolute;
    width: 420px;
}

#tooltip-container .panel-heading {
    padding: 2px 0;
}

#tooltip-container .panel-heading-city-left {
    float: left;
    font-size: 10pt;
    font-weight: 700;
    line-height: 24px;
    padding: 0 10px 0 0;
    position: relative;
    text-align: right;
    width: 188px;
}

#tooltip-container .panel-heading-city-right {
    float: left;
    font-size: 10pt;
    font-weight: 700;
    line-height: 24px;
    padding: 0 0 0 10px;
    position: relative;
    text-align: left;
    width: 188px;
}

#tooltip-container .panel-heading-center {
    float: left;
    font-size: 10pt;
    font-weight: 700;
    line-height: 25px;
    padding: 0;
    position: relative;
    width: 15px;
}

#tooltip-container .panel-heading .row {
    padding: 0 2px;
}

#tooltip-container .panel-body {
    padding: 0;
}

#tooltip-container div.row {
    margin-left: 0;
    margin-right: 0;
}

#tooltip-container div.row > div {
    padding-right: 5px;
}

#tooltip-container .label-text {
    float: right;
    font-size: 8pt;
    font-weight: 700;
    padding-left: 5px;
}

#tooltip-container .value-text {
    float: left;
    font-size: 8pt;
    text-align: center;
    width: 100%;
}

#tooltip-container .row:not(:last-child) {
    border-bottom: 1px dashed #DDD;
}

#tooltip-container .sub-label {
    font-size: 8pt;
    font-style: italic;
}

#tooltip-container .col {
    padding: 5px 0;
}

#tooltip-container div.baseline-container {
    height: 28px;
    margin: 0 auto;
    padding: 3px 0 0;
    width: 225px;
}

#tooltip-container div.baseline-col {
    float: left;
    line-height: 24px;
    width: 150px;
}

#tooltip-container div.baseline-value-col {
    float: left;
    line-height: 24px;
}

#tooltip-container .baseline-text {
    font-size: 9pt;
    font-weight: 700;
}

#tooltip-container div.label-col-3 {
    float: left;
    font-size: 10pt;
    line-height: 60px;
    padding-top: 5px;
    width: 90px;
}

#tooltip-container div.label-col-2 {
    float: left;
    font-size: 10pt;
    line-height: 40px;
    padding-top: 5px;
    width: 90px;
}

#tooltip-container div.value-col {
    float: left;
    font-size: 10pt;
    padding-left: 15px;
}

#tooltip-container div.cos-header {
    border-left: 1px dashed #CCC;
    float: left;
    font-size: 10pt;
    font-weight: 700;
    left: 130px;
    position: relative;
    text-align: center;
    width: 70px;
}

#tooltip-container div.cos-header span {
    text-align: center;
}

#tooltip-container div.data {
    border-left: 1px dashed #CCC;
    float: left;
    font-size: 10pt;
    line-height: 12px;
    width: 70px;
}

#tooltip-container div.row.sub-data {
    float: left;
    padding-right: 0px;
}

#tooltip-container .sub-data > div.direction {
    border-left: 1px dashed #CCC;
    float: left;
    line-height: 12px;
    padding-right: 0;
    width: 40px;
}

#tooltip-container .sub-data > div.direction span {
    font-size: 8pt;
    font-weight: 700;
    text-align: center;
}

#tooltip-container .left-side {
    float: left;
    width: 181px;
}

#tooltip-container .right-side {
    float: left;
    width: 191px;
}

#tooltip-container div.baseline, #tooltip-container div.data span {
    text-align: center;
    width: 100%;
}

#tooltip-container div.panel {
    margin-bottom: 0px;
}

.navbar-top-links {
    margin-right: 0;
    padding-right: 7px;
    margin-left: 100px;
}

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

.navbar-top-links li:last-child {
}

.navbar-top-links li a {
    padding: 15px;
    min-height: 40px;
}

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

div.navbar-header {
    margin: 0;
    width: 100%;
    height: 50px;
}

a.navbar-brand {
    padding: 0px;
    margin-left: 10px;
}

div.latency_panel {
    padding-left: 5px;
    padding-right: 5px;
}

#historyModal > .modal-header {
    background-color: #ddd;
}

.column {
    min-height: 300px;
    /*min-width: 600px;*/
    padding-left: 10px;
    padding-right: 10px;
    background: #fff;
    float: left;
}

.column .dragbox {
    margin: 5px 2px 20px;
    background: #fff;
    position: relative;
    border: 1px solid #ddd;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.column .dragbox h2 {
    margin: 0;
    font-size: 12px;
    padding: 5px;
    background: #f0f0f0;
    color: #000;
    border-bottom: 1px solid #eee;
    font-family: Verdana;
    cursor: move;
}

.column .placeholder {
    background: #f0f0f0;
    border: 1px dashed #ddd;
}

.clickable {
    cursor: pointer;
}

.clickable .glyphicon {
    border: 1px solid #DDD;
    display: inline-block;
    padding: 6px 12px;
    border-radius: 4px
}

.clickable .glyphicon:hover {
    background-color: lightgrey;
}

div.modal-backdrop .fade .in {
    opacity: .8;
}

.main-panel > .panel-body {
    padding-top: 0px;
    padding-bottom: 0px;
}

.main-panel > .panel-heading span {
    margin-top: -23px;
    font-size: 15px;
    margin-right: -9px;
}

#main-panels {
    padding: 0 15px 0 15px;
    min-width: 131rem;
}

#main-help-panels {
    padding: 0 15px 0 15px;
    min-width: 45rem;
}

#latency_table_row {
    margin-bottom: 15px;
}

a.clickable {
    color: inherit;
}

a.clickable:hover {
    text-decoration: none;
}

a:hover {
    cursor: pointer;
}

.nav-box-shadow--2dp {
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12)
}

.table-box-shadow--2dp {
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12)
}

.box-shadow--2dp {
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12)
}

.box-shadow--3dp {
    box-shadow: 0 3px 4px 0 rgba(0, 0, 0, .14), 0 3px 3px -2px rgba(0, 0, 0, .2), 0 1px 8px 0 rgba(0, 0, 0, .12)
}

.box-shadow--4dp {
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .2)
}

.box-shadow--6dp {
    box-shadow: 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12), 0 3px 5px -1px rgba(0, 0, 0, .2)
}

.box-shadow--8dp {
    box-shadow: 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .2)
}

.box-shadow--16dp {
    box-shadow: 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(0, 0, 0, .2)
}

.col-left {
    float: left;
}

.col-right {
    float: right;
}

.fixed-right {
    float: right;
}

.background {
    fill: none;
    pointer-events: all;
}


#full_heatmap_matrix {
    padding-left: 1rem;
    padding-bottom: 1.25rem;
    padding-top: 10rem;
}

#network_fullheatmap_table {
    margin: auto;
}

#network_fullheatmap_table td.source_label {
    width: 15rem;
}

#network_fullheatmap_table td.heatmap_metric {
    border: 1px solid #FFF;
    width: 18px;
}

.sla_heading {
    text-align: right;
    font-size: 14pt;
    font-weight: bold;
    padding-right: 20px;
    position: relative;
    bottom: 30px;
}

td.old_green {
    background-color: #66CC66;
}

td.black_metric {
    background-color: #979797
}

td.green_metric {
    background-color: #66CC66
}

td.yellow_metric {
    background-color: #FFFD85
}

td.red_metric {
    background-color: #FF8585
}

.heatmap_metric {
    text-align: center;
    height: 18px;
    width: 18px;
    font-size: 6pt;
    cursor: pointer;
    padding: 1px;
}

th.destination_label.rotate {
    left: 5px;
    position: relative;
}

/* Heatmap Metric Font Size */
.source_label {
    padding-right: 10px;
    text-align: right;
    cursor: default;
    font-size: 8pt;
}

/* Heatmap Source City Font Size */

th.rotate {
    white-space: nowrap;
}

th.rotate > div {
    font-size: 8pt;
    transform: translate(-3px, 1px) rotate(295deg);
    width: 18px;
    height: 17px;
}

th.rotate > div > span {
    margin-left: 5px;
    cursor: default;
    font-size: 8pt;
    font-weight: 400;
}

/* Heatmap Destination Label Font Size */
th.percent {
    background-color: #FAEFD0;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 2px;
    font-weight: normal;
    font-size: 10pt;
}

#loadingModal .modal-dialog,
#loadingModal .modal-content,
#loadingModal .modal-body {
    background: transparent;
    color: rgba(255,255,255,1);
    box-shadow: none;
    border: none;
}

.panel-title .sub-title {
    font-style: italic;
}

.panel-heading {
    text-align: center;
}

.panel-title {
    display: inline;
}

.panel-title span.panel-sub-title {
    font-size: 10pt;
    font-style: italic;
    padding-left: 1rem;
}

.panel-heading .panel-title {
    font-size: 12pt;
    font-style: normal;
}

div.panel-heading-main {
    padding: 0px;
}

/*div.panel-title span {*/
/*    font-weight: bold;*/
/*    font-size: 10pt;*/
/*    padding-top: 2px;*/
/*    padding-bottom: 2px;*/
/*    margin-top: 0px;*/
/*    margin-bottom: 0px;*/
/*}*/

#historyModal {
    position: absolute;
    margin: 0;
}

#historyModal .modal-dialog {
    margin: 0px auto;
}

#historyModal .modal-body {
    overflow: auto;
}

#historyModal .modal-header button.close {
    opacity: 1;
    margin-top: 0px;
}

#historyModal .modal-heading-city-left {
    float: left;
    font-size: 10pt;
    font-weight: 700;
    line-height: 24px;
    padding: 0 10px 0 0;
    position: relative;
    text-align: right;
    width: 188px;
}

#historyModal .modal-heading-city-right {
    float: left;
    font-size: 10pt;
    font-weight: 700;
    line-height: 24px;
    padding: 0 0 0 10px;
    position: relative;
    text-align: left;
    width: 188px;
}

#historyModal .modal-heading-center {
    float: left;
    font-size: 10pt;
    font-weight: 700;
    line-height: 25px;
    padding: 0;
    position: relative;
    width: 15px;
}

#historyModal .modal-title {
    text-align: center;
    margin: auto;
}

#historyCitiesHeader {
}

#chart_export_btn {
    line-height: 1;
}

#btn_reset_history_zoom {
    line-height: 1;
}

#legend_container { margin-left: 10px; margin-top: 10px; text-align: center; }

#sla_heatmap_menu { padding-left: 10px; margin-left: 15px; padding-top: 2.5rem; padding-bottom: 1rem; }
#sla_heatmap_menu h3.panel-title { font-size: 12px; padding-left: 0; }
#sla_heatmap_menu .sla-menu-panel .panel-heading { padding: 2px; text-align: center; }
#sla_heatmap_menu .sla-menu-panel .panel-body { padding: 0px 15px 5px 15px; }

#network_legend { text-align: center; margin-left: 5px; }
#network_legend td { padding-left: 10px; padding-right: 10px; }
#netowrk_legend td:not(:first-child) { border-left: 1px dashed #CCC;}

#network_legend table:not(:last-child) { float: left; margin-right: 11px; margin-bottom: 5px; }
#network_legend table:last-child { float: left; margin-bottom: 5px; }
#network_legend table th { margin-left: 5px;}
#network_legend table tr { height: 20px; }

.sla-menu-panel { width: 345px; margin: auto; }
.sla-menu-panel .panel-title { font-weight: bold; font-size: 8pt; padding-top: 2px; padding-bottom: 2px; }
div.sla-menu-panel .form-group { margin-bottom: 0px; text-align: center; padding-right: 15px; }

#sla_heatmap_menu .sla-menu-panel .panel-heading { padding: 2px; text-align: center; }
#sla_heatmap_menu .sla-menu-panel .panel-body { padding: 0px 15px 5px 15px; }

@media only screen and (max-device-width: 480px) {
    #main-panels {
        padding: 0 15px 0 15px;
    }
}