/* ABillS Default CSS */

._red {
    background-color: #f00;
}

._blue {
    background-color: #8585f3;
}

._yellow {
    background-color: #ff0;
}

._green {
    background-color: #008000;
}

.main_body1 {
    background-color: #f5f5f5;
}

.main_body2 {
    background-color: #f0f;
}

.statusColor4 {
    color: white !important;
    background-color: #808080 !important;
}

.statusColor5 {
    color: white !important;
    background-color: #099 !important;
}

.statusColor6 {
    color: white !important;
    background-color: #87289e !important;
}

.statusColor4, .statusColor5, .statusColor6 {
    background-image: none !important;
    text-shadow: none !important;
}

span.badge.alert-warning {
    color: darkgrey;
    font-weight: 600;
}

@media print {
    a[href]:after {
        content: none;
    }
}

input[type='checkbox'].control-element {
    margin-top: 7px !important;
}

input[type='checkbox'] {
    cursor: pointer;
}

label.required:after {
    content: ' *';
    color: red;
}

textarea {
    resize: vertical;
}

textarea.horizontal-resize {
    resize: both;
}

table {
    width: 100%;
}

/* The input. */
input.mp_input {
    outline: none;
}

/* Ordered list for display results. */
ol.mp_list {
    overflow: hidden;
    position: absolute;
    padding-left: 0;
    width: 350px;
    z-index: 99999;
    /*border: 1px solid silver;*/
    border-radius: 4px;
}

/* Each list item, regardless of success, error, etc. */
ol.mp_list li:not(.disabled) {
    cursor: pointer;
}

ol.mp_list li {
    border-bottom: 1px solid silver;
    left: 0;
    right: 0;
    width: 350px;
    padding: 5px 10px;
    margin-left: -5px;
    /*margin: auto 10px;*/
    display: block;
}

ol.mp_list li span.mp_address {
    margin-right: 5px;
}

/* When a request is made that returns zero results. */
ol.mp_list li.mp_no_results {
    display: none;
}

/* When a request is made that doesn't meet the 'minChars' length option. */
ol.mp_list li.mp_min_chars {
    display: none;
}

/* When a request is made that fails during the ajax request. */
ol.mp_list li.mp_error {
    display: none;
}

div.checkbox-block {
    margin-left: 30px;
    text-align: left;
}

button.full-width {
    width: 100%;
}

.file-input .file-visible {
    cursor: pointer;
}

.navbar-form div.input-group > div.chosen-container {
    min-width: 300px !important;
}

div.box-body ul.pagination.pagination-sm {
    margin: 0 !important;

}

div.box-body ul.pagination.pagination-sm > li > a {
    padding: 2px 5px;
}

div.box-body .chosen-container.chosen-container-single {
    width: 100% !important; /* or any value that fits your needs */
}

nav.navbar a.header-btn-link {
    color: white;
    padding: 15px 15px;
    float: left;
}

/*Align last td (control buttons) to right side*/
table.table.with-function-fields > tbody > tr > td:last-child {
    text-align: right;
}

table.table.table-striped.table-hover.table-condensed > tbody > tr > td:last-child > a {
    margin: 0 10px;
}

a {
    cursor: pointer;
}

#up-btn {
    z-index: 2600;
    position: fixed;
    right: 0;
    bottom: 90px;
    width: 34%;
    margin-left: 90%;
    opacity: 0.5;
    filter: alpha(opacity=50);
}

#up-btn:hover {
    opacity: 1;
    filter: alpha(opacity=100);
    cursor: pointer;
}

.up-btn-icon {
    z-index: 2600;
    position: absolute;
    display: block;
    right: 5px;
    bottom: 0;
    padding: 0 12px 4px;
    font-size: 1.5em;
}

.form-horizontal .checkbox {
    margin-bottom: 10px;
}

div.box-body > div.button-block:not(.btn-group) > .btn {
    margin: 0 5px;
}

.content-header > .breadcrumb > li + li:before {
    content: '';
    padding: 0 3px;
}

div.box-heading, div.box-header, .box-title {
    text-align: left;
}

h4.table-caption > a > span.fa {
    margin-right: 5px;
}

.bg-red a, .bg-danger a {
    color: #843534;
    font-weight: 700;
}

.bg-red a:hover, .bg-danger a:hover {
    text-decoration: underline;;
}

div.modal-content > div.box {
    margin-bottom: 0;
}

div.input-group > span.input-group-addon.glyphicon {
    top: 0;
}

div.info-tip {
    position: fixed;
    color: white;
    border: 1px solid gray;
    border-bottom: none;
    background-color: #7AB932;
    padding: 3px;
    z-index: 1000;
    /* set this to create word wrap */
    max-width: 200px;
}

.table-striped>tbody>tr.row-active {
    background-color: #dbffdb !important;
}

div.box-footer {
    text-align: center;
}

select.normal-width  + div.chosen-container{
    width : 100% !important;
}

.btn-ethernet {
    border-radius: 3px;
    position: relative;
    padding: 3px;
    margin: 0 0 10px 10px;
    min-width: 60px;
    height: 60px;
    text-align: center;
    color: #666;
    border: 1px solid #ddd;
    background-color: #f4f4f4;
    font-size: 12px;
    display: inline-block
}

.btn-ethernet > .icon {
    font-size: 52px;
    display: block
}

.btn-ethernet > .port-num {
    position: absolute;
    top: 15px;
    right: 25px;
    font-size: 16px;
    font-weight: 900;
    color: #FFF;

}

.btn-ethernet > .badge {
    position: absolute;
    top: -5px;
    right: -5px;
    font-size: 12px;
    font-weight: 400;
    color: #777;
    border: 1px solid #ddd;
    background-color: #f4f4f4;
    padding: 3px 4px;
    border-radius: 4px;

}

.btn-ethernet > .badge > .fa {
    font-size: 12px;
}

.btn-ethernet > .badge-down {
    color: #dd4b39;
}

.btn-ethernet > .badge-down:active, .btn-ethernet > .badge-down:focus, .btn-ethernet > .badge-down:hover{
    color: #00a65a;
}

.btn-ethernet > .badge-up {
    color: #00a65a;
}

.btn-ethernet > .badge-up:active, .btn-ethernet > .badge-up:focus, .btn-ethernet > .badge-up:hover{
    color: #dd4b39;
}

.btn-ethernet > .badge-bottom {
    position: absolute;
    bottom: -12px;
    left: -7px;
    font-size: 13px;
    font-weight: 900;
    color: #777;
    border: 1px solid #ddd;
    background-color: #f4f4f4;
    padding: 0 3px;
    border-radius: 4px;

}

.text-dark-gray {
    color: #666 !important
}

.btn-user > i.fa {
    margin-right: 5px;
}

.chart {
    position: relative;
    display: inline-block;
    width: 120px;
    height: 120px;
    margin-top: 5px;
    margin-bottom: -5px;
    text-align: center
}

.chart canvas {
    position: absolute;
    top: 0;
    left: 0
}

.chart.chart-widget-pie {
    margin-top: 5px;
    margin-bottom: 5px
}

.pie-chart > span {
    left: 0;
    margin-top: -2px;
    position: absolute;
    right: 0;
    text-align: center;
    top: 50%;
    transform: translateY(-50%)
}

.chart > span > img {
    left: 0;
    position: absolute;
    right: 0;
    text-align: center;
    top: 50%;
    width: 60%;
    height: 60%;
    transform: translateY(-50%);
    margin: 0 auto
}

.percent {
    display: inline-block;
    line-height: 120px;
    z-index: 2;
    font-weight: 500;
    font-size: 22px;
    color: #313131
}