/*
 * Base structure
 */

/* Move down content because we have a fixed navbar that is 50px tall */
body {
    padding-top: 50px;
}

/*
 * Global add-ons
 */

.sub-header {
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

/*
 * Navbar
 */
.navbar-inverse {
    background-image: url(/static/img/bcgr.png);
    background-repeat: no-repeat;
    background-position-x: 16px;
}

/*
 * Sidebar
 */

/* Hide for mobile, show later */
.sidebar {
    background-color: #303840;
    overflow-x: hidden;
    overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
    position: fixed;
    display: block;
    top: 39px;
    bottom: 0;
    padding: 20px;
    border-right: 1px solid #eee;
}

/* Sidebar navigation */
.nav-sidebar {
    margin-right: -21px; /* 20px padding + 1px border */
    margin-bottom: 20px;
    margin-left: -20px;
    border-top: 1px solid #576a7d;
}
@media (max-width: 767px){
    .nav-sidebar{margin-right: -15px;}
}

.nav-sidebar > li > a {
    padding-right: 20px;
    padding-left: 20px;
    color: #b3c3d2;
}

.nav > li > a:focus, .nav > li > a:hover {
    background-color: #1f2429;
    color: #b2bfcc;
}

.nav-sidebar > .active > a {
    background-color: #44596b;
}

.profile_img {
    color: aliceblue;
    padding-bottom: 9px;
}

.main {
    margin-top: 10px;
}

.table-responsive thead {
    background-color: gainsboro;
}

td.btn-group {
    display: table-cell;
}

.table > tbody > tr > td {
    vertical-align: middle;
}
.borderbot>tbody>tr>td {
    border-top: 0;
    border-bottom: 1px solid #ddd;
}


.modal-header{
    border-radius: 4px 4px 0 0;
}
.modal-header.warning {background-color: #d2322d;}
.modal-header.success {background-color: #6ad245;}
.modal-header.primary {background-color: #789cbb;}

.page-header {
    margin-top: 19px;
}

.tab-pane {
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    border-radius: 0 0 5px 5px;
    padding: 10px;
}

/* search form */
.stylish-input-group .input-group-addon {
    background: white !important;
}

.stylish-input-group .form-control {
    border-right: 0;
    box-shadow: 0 0 0;
    border-color: #ccc;
}

.stylish-input-group button {
    border: 0;
    background: transparent;
}

/*---------Switch----------*/

.port {
    display: inline-block;
    margin: 10px;
    border: 1px solid #7B7B7B;
    border-radius: 3px;
    padding: 6px;
    width: 79px;
    font-size: x-small;
}
.port .port-img{
    background-image: url(/static/img/icon-port-64x64-grey.png);
    width: 64px;
    height: 64px;
    text-align: center;
}
.port-img b {
    color: #ebe8d8;
    position: relative;
    top: 27px;
}
.port-img{
    display: block;
    text-decoration: none;
}

/* 10GBit/s */
.port.ten{background-color: #a4fff7;}

/* 1GBit/s */
.port.giga{background-color: #caccfb;}

/* 100 MBit/s */
.port.mega{background-color: #B5FFB5;}

/* 10 MBit/s */
.port.kilo{background-color: #f9c76e;}

/* Disabled */
.port.dis{background-color: #ff9c99;}

/* Not connected */
.port.na{background-color: white;}


/*-------END-Switch--------*/

/* Table filter */
.table th > a {
    color: inherit;
    cursor: pointer;
    text-decoration: none;
}

/* end */

/* в модуле для живого поиска надпись на кнопке выравнивается по левой стороне */
.selectajax button.selectajax-btn{
    text-align: left;
}


/*
 * Off Canvas. На маленьком экране появляется кнопка чтоб сдвинуть экран
 * --------------------------------------------------
 */
@media screen and (max-width: 767px) {
  .row-offcanvas {
    position: relative;
    -webkit-transition: all .25s ease-out;
       -moz-transition: all .25s ease-out;
            transition: all .25s ease-out;
  }

  .row-offcanvas-left {
    left: 0;
  }

  .row-offcanvas-left .sidebar-offcanvas {
    left: -50%; /* 6 columns */
  }

  .row-offcanvas-left.active {
    left: 50%; /* 6 columns */
  }

  .sidebar-offcanvas {
    position: absolute;
    top: 0;
    width: 50%; /* 6 columns */
  }

  body{overflow-x: hidden;}
}

button[data-toggle=offcanvas]{
    position: absolute;
    left: 0;
    top: 194px;
    z-index: 1;
    height: 42px;
    background-color: #44596b;
    border: 0;
}


/*
 * Цвет заливки графика
 */
.ct-series-a .ct-area {
    fill: #367cb8;
    fill-opacity: 0.4;
}


/*
 * Ajax loader
 */
div#loading {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: none;
}

.scroll-area {
    overflow-y: auto;
    max-height: 65vh;
}

pre {
    border: 0; background-color: transparent;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/*
 * Markers icons
 */
.m-icon{
    background-image: url(../img/user_markers.png);
    width: 26px;
    height: 26px;
    display: inline-block;
    margin-bottom: -9px;
}
.m-icon_donkey{background-position: 0 0;}
.m-icon_fire{background-position: -26px 0;}
.m-icon_ok{background-position: -52px 0;}
.m-icon_king{background-position: 0 -26px;}
.m-icon_tv{background-position: -26px -26px;}
.m-icon_smile{background-position: -52px -26px;}
.m-icon_dollar{background-position: 0 -52px;}
.m-icon_service{background-position: -26px -52px;}
.m-icon_mrk{background-position: -52px -52px;}


@media (max-width: 991px) and (min-width: 768px){
    .container {
        width: 874px;
    }
}


/* Icon near to device info */
.font-extra-large{
    font-size: 75px;
}

.form-group-sm .form-control{height: 25px;}
