/*MAIN*/
body {
  font-family: 'Roboto', sans-serif; }

.right {
  float: right; }

.left {
  float: left; }

/*mixins*/
/*---------------------------normalise---------------------------*/
/*bootstrap*/
*:focus {
  outline: none !important;
  box-shadow: none !important; }

.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: none !important; }

.dropdown-item {
  cursor: pointer; }

.btn-primary.disabled, .btn-primary:disabled {
  color: #333;
  background-color: #ccc;
  border-color: #ccc; }

/*fancybox*/
.fancybox-content {
  min-width: 630px;
  max-width: 60%;
  max-height: 80%;
  padding: 0;
  overflow: hidden;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px; }
  .fancybox-content .mCSB_inside > .mCSB_container {
    margin-right: 0;
    padding-bottom: 50px;
    padding-right: 20px; }
  .fancybox-content .mCSB_scrollTools {
    opacity: 8 !important;
    right: 15px; }
  .fancybox-content .mCS_y_hidden {
    padding: 0 !important; }

.fancybox-close-small {
  color: white; }

#view.fancybox-content .fancy-back, #view.fancybox-content .fancy-next,
#edit.fancybox-content .fancy-back,
#edit.fancybox-content .fancy-next {
  content: '';
  position: absolute;
  top: 45%;
  z-index: 1;
  width: 40px;
  height: 40px;
  cursor: pointer; }
#view.fancybox-content .fancy-back,
#edit.fancybox-content .fancy-back {
  left: -5px;
  background: url("../img/icons/back.png") no-repeat center; }
#view.fancybox-content .fancy-next,
#edit.fancybox-content .fancy-next {
  right: -5px;
  background: url("../img/icons/next.png") no-repeat center; }

#create .form-header {
  position: static; }

/*radio*/
.custom-radio .custom-control-label {
  padding: 5px 0; }
.custom-radio .custom-control-input:checked ~ .custom-control-label::before {
  background-color: #51dd83; }

/*btn*/
button {
  cursor: pointer; }

/*swal*/
.swal-overlay {
  z-index: 99999; }

.swal-title {
  font-size: 20px; }

.swal-button--danger, .swal-button--danger:focus, .swal-button--danger:active {
  background-color: #78b7fa; }

/*...*/
.padding-5 {
  padding: 5px; }

.padding-6 {
  padding: 6px; }

.padding-7 {
  padding: 7px; }

.padding-8 {
  padding: 8px; }

.padding-10 {
  padding: 10px; }

.padding-12 {
  padding: 12px; }

.padding-15 {
  padding: 15px; }

.padding-20 {
  padding: 20px; }

.padding-25 {
  padding: 25px; }

.padding-top-10 {
  padding-top: 10px; }

.font-size-10 {
  font-size: 10px; }

.font-size-11 {
  font-size: 11px; }

.font-size-12 {
  font-size: 12px; }

.font-size-13 {
  font-size: 13px; }

.font-size-14 {
  font-size: 14px; }

.font-size-15 {
  font-size: 15px; }

.font-size-16 {
  font-size: 16px; }

.font-size-17 {
  font-size: 17px; }

.font-size-18 {
  font-size: 18px; }

.font-size-40 {
  font-size: 40px; }

.margin-left-5 {
  margin-left: 5px; }

.margin-left-10 {
  margin-left: 10px; }

.margin-left-15 {
  margin-left: 15px; }

.margin-right-5 {
  margin-right: 5px; }

.margin-right-10 {
  margin-right: 10px; }

.margin-right-15 {
  margin-right: 15px; }

/*MAIN*/
.title-small {
  font-size: 12px;
  font-weight: bold; }

.title-normal {
  font-size: 14px;
  font-weight: bold; }

.title-big {
  font-size: 16px;
  font-weight: bold; }

.title-gray {
  color: #7f8991; }

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

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

/*FIX*/
.mCustomScrollBox {
  width: 100%; }

.custom-checkbox .custom-control-label::before {
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  border-radius: 100%; }

.custom-control-label::before {
  background-color: #fff;
  border: 1px solid #dee2e6; }

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
  background-color: #51dd83;
  border: 1px solid #51dd83; }

.custom-control-label::after {
  top: 0.35rem; }

.custom-control-label::before {
  top: .35rem; }

/*=fix_buttons=*/
.btn {
  padding-left: 30px;
  padding-right: 30px; }

.btn-primary {
  background-color: #78b7fa;
  border-color: #78b7fa; }
  .btn-primary:hover {
    background-color: #4d99e9;
    border-color: #4d99e9; }

/*GENERAL*/
.wrapper {
  min-width: 1280px;
  position: absolute;
  width: 100%;
  height: 100%;
  /*@include media(m) { width: 100% ;}
  @include media(s) { width: 125px; }
  @include media(1000) {
    background: #f00;
  }*/ }

.sidebar {
  position: absolute;
  top: 0;
  left: 0;
  width: 220px;
  height: 100%;
  background: url("../img/bg/sidebar.png") no-repeat;
  background-size: 100% 100%;
  z-index: 10;
  overflow: hidden;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s; }
  .sidebar:hover {
    width: 220px !important; }
  .sidebar .logo {
    padding: 10px;
    text-align: center;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s; }
  .sidebar .nav-navbar {
    width: 100%;
    height: 43px;
    margin: 10px 0;
    background: url("../img/icons/menu/close.png") no-repeat center right 16px;
    cursor: pointer;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s; }
  .sidebar.closes .logo {
    width: 35px;
    overflow: hidden; }
  .sidebar.closes:hover {
    opacity: .9; }
    .sidebar.closes:hover .logo {
      width: 100%; }
  .sidebar.closes .nav-navbar {
    background: url("../img/icons/menu/open.png") no-repeat center left 16px;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s; }
  .sidebar.closes #cssmenu > ul > li > a {
    padding-left: 15px;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s; }
    .sidebar.closes #cssmenu > ul > li > a span {
      display: none; }
  .sidebar.closes:hover #cssmenu > ul > li > a {
    padding: 10px 10px 10px 20px;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s; }
    .sidebar.closes:hover #cssmenu > ul > li > a span {
      display: inline-block; }
  .sidebar.closes #cssmenu ul ul {
    height: 0;
    overflow: hidden; }
  .sidebar.closes:hover #cssmenu ul ul {
    height: auto; }
  .sidebar #cssmenu a:hover {
    color: #8AEBE3; }

.top-bar {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 45px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 220px;
  padding-right: 50px;
  background: #fff;
  font-size: 12px;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s; }
  .top-bar .name {
    display: inline-block;
    padding: 0 10px; }

.main {
  position: relative;
  width: auto;
  height: 100%;
  margin-left: 220px;
  padding: 45px 0 0;
  background: #f2f4f7;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s; }
  .main .title-page {
    padding: 15px 30px 0;
    font-size: 17px;
    font-weight: bold;
    color: #4a93c8; }
  .main .content {
    padding: 15px;
    /*---------------------------Favorites---------------------------*/
    /*---------------------------systemSettings---------------------------*/
    /*---------------------------monitoring---------------------------*/
    /*-----------------------------------------*/ }
    .main .content .col-margin-bottom {
      margin-bottom: 30px; }
    .main .content .block {
      height: 100%;
      padding: 8px 15px;
      background: #fff;
      -webkit-border-radius: 6px;
      -moz-border-radius: 6px;
      -ms-border-radius: 6px;
      border-radius: 6px;
      box-shadow: 0 0 4px #eee; }
      .main .content .block .topBg {
        margin-top: -8px;
        margin-left: -15px;
        margin-right: -15px;
        padding: 10px 20px;
        -webkit-border-radius: 6px 6px 0 0;
        -moz-border-radius: 6px 6px 0 0;
        -ms-border-radius: 6px 6px 0 0;
        border-radius: 6px 6px 0 0;
        background: #fafbfd; }
      .main .content .block .bottomBg {
        margin-bottom: -8px;
        margin-left: -15px;
        margin-right: -15px;
        padding: 10px 20px;
        -webkit-border-radius: 0 0 6px 6px;
        -moz-border-radius: 0 0 6px 6px;
        -ms-border-radius: 0 0 6px 6px;
        border-radius: 0 0 6px 6px;
        background: #fafbfd; }
      .main .content .block .delimiter {
        height: 1px;
        margin: 5px -9px;
        background: #ddd; }
      .main .content .block .delimiter-border-left {
        border-right: 1px solid #ddd; }
      .main .content .block .btitle {
        font-size: 14px; }
    .main .content .favorites .mask-wrap {
      position: relative;
      overflow: hidden; }
      .main .content .favorites .mask-wrap .mask {
        position: absolute;
        top: 0;
        right: 30px;
        width: 100px;
        height: 100px;
        background: linear-gradient(to right, rgba(0, 0, 0, 0), #fff);
        z-index: 1; }
    .main .content .favorites .items {
      list-style: none;
      margin-top: 25px;
      padding: 0 32px; }
      .main .content .favorites .items li {
        display: inline-block;
        margin-right: 25px;
        margin-bottom: 10px;
        font-size: 12px; }
        .main .content .favorites .items li a {
          color: #6e7173; }
          .main .content .favorites .items li a:hover {
            text-decoration: none; }
        .main .content .favorites .items li img {
          display: inline-block;
          margin-right: 10px; }
    .main .content .favorites .favorites-settings {
      margin-top: 8px;
      padding: 20px;
      border-top: 1px solid #ddd;
      background: #f4faff; }
      .main .content .favorites .favorites-settings .custom-control {
        margin-bottom: 12px;
        font-size: 12px;
        color: #7f8991; }
        .main .content .favorites .favorites-settings .custom-control img {
          position: relative;
          top: -2px;
          margin-right: 10px; }
      .main .content .favorites .favorites-settings .title-gray {
        margin: 25px 0 10px; }
    .main .content .favorites .slick-prev, .main .content .favorites .slick-next {
      position: absolute;
      width: 30px;
      height: 30px;
      padding-top: 26px;
      overflow: hidden;
      background: none;
      border: 1px solid #fafafa;
      -webkit-border-radius: 100%;
      -moz-border-radius: 100%;
      -ms-border-radius: 100%;
      border-radius: 100%;
      cursor: pointer; }
    .main .content .favorites .slick-prev {
      top: 0;
      left: 0;
      background: #fff url("../img/bg/pagination/prev-prev.png") no-repeat center; }
    .main .content .favorites .slick-next {
      top: 0;
      right: 0;
      background: #fff url("../img/bg/pagination/next-next.png") no-repeat center; }
    .main .content .systemSettings .titleSystemSettings {
      display: inline-block;
      margin-top: 10px;
      margin-bottom: 15px;
      padding: 4px 10px;
      background: #7fe3a3;
      -webkit-border-radius: 20px 20px 20px 0;
      -moz-border-radius: 20px 20px 20px 0;
      -ms-border-radius: 20px 20px 20px 0;
      border-radius: 20px 20px 20px 0;
      font-size: 14px;
      color: #fff; }
    .main .content .systemSettings .row-field {
      margin-bottom: 25px; }
    .main .content .systemSettings button {
      margin-right: 15px; }

    /*---------------------------------------------------------*/
    /*---   Стили для диаграммы "Схема компонент системы"   ---*/
    /*---------------------------------------------------------*/
    .main .content .monitoring {
        position: relative;
        max-width: 1100px;
        margin: auto;
        margin-top: 50px;
    }

        .main .content .monitoring .m-bg {
            padding: 65px;
        }

            .main .content .monitoring .m-bg img {
                width: 100%;
            }

        .main .content .monitoring .elements .element {
            display: inline-block;
            position: absolute;
            width: 180px;
            padding: 30px;
            background: #fff;
        }

            .main .content .monitoring .elements .element .title {
                position: absolute;
                top: -15px;
                left: 0;
                width: 100%;
                font-size: 14px;
                font-weight: bold;
                color: #5990cc;
                text-align: center;
            }

            .main .content .monitoring .elements .element .title span {
                font-size: 13px;
            }

            .main .content .monitoring .elements .element .img {
                width: 100px;
                height: 100px;
                margin: auto;
                border: 2px solid #74e298;
                -webkit-border-radius: 100%;
                -moz-border-radius: 100%;
                -ms-border-radius: 100%;
                border-radius: 100%;
            }

            .main .content .monitoring .elements .element .value {
                color: #74e298;
            }

            .main .content .monitoring .elements .element.errors .img {
                border: 2px solid #e25a33;
            }

            .main .content .monitoring .elements .element.errors .value {
                color: #e25a33;
            }

            .main .content .monitoring .elements .element:nth-child(1) {
                top: 0;
                left: 0;
                width: 190px;
                margin-left: -10px;
            }

                .main .content .monitoring .elements .element:nth-child(1) .img {
                    background: url("../img/bg/monitoring/PC.png") no-repeat center;
                    background-size: 70%;
                }

            .main .content .monitoring .elements .element:nth-child(2) {
                margin-left: auto;
                margin-right: auto;
                top: 0;
                left: 0;
                right: 0;
                width: 190px;
            }

                .main .content .monitoring .elements .element:nth-child(2) .img {
                    background: url("../img/bg/monitoring/notebook.png") no-repeat center;
                    background-size: 70%;
                }

            .main .content .monitoring .elements .element:nth-child(3) {
                top: 0;
                right: 0;
            }

                .main .content .monitoring .elements .element:nth-child(3) .img {
                    background: url("../img/bg/monitoring/user.png") no-repeat center;
                    border: 2px solid #acb5bc;
                }

            .main .content .monitoring .elements .element:nth-child(4) {
                bottom: 0;
                left: 18%;
            }

                .main .content .monitoring .elements .element:nth-child(4) .img {
                    background: url("../img/bg/monitoring/server.png") no-repeat center;
                }

            .main .content .monitoring .elements .element:nth-child(5) {
                bottom: 0;
                right: 20%;
            }

                .main .content .monitoring .elements .element:nth-child(5) .img {
                    background: url("../img/bg/monitoring/servers.png") no-repeat center;
                }

            .main .content .monitoring .elements .element:nth-child(6) {
                bottom: 0;
                right: 0;
                width: 190px;
                margin-left: 10px;
            }

                .main .content .monitoring .elements .element:nth-child(6) .title {
                    position: relative;
                    top: -20px;
                }

        .main .content .monitoring .elements .dropdown-menu {
            padding: 15px;
            font-size: 12px;
        }

/*---------------------------table---------------------------*/
.nav-table {
  margin-top: -15px;
  padding-top: 0; }

table.table {
  border: none;
  font-size: 12px;
  overflow: auto; }
  table.table thead tr {
    border-right: 1px solid #f2f4f7 !important;
    color: #fff; }
    table.table thead tr th {
      background: #78b7fa;
      border: none; }
      table.table thead tr th:first-child {
        -webkit-border-radius: 5px 0 0 5px;
        -moz-border-radius: 5px 0 0 5px;
        -ms-border-radius: 5px 0 0 5px;
        border-radius: 5px 0 0 5px; }
      table.table thead tr th:last-child {
        -webkit-border-radius: 0 5px 5px 0;
        -moz-border-radius: 0 5px 5px 0;
        -ms-border-radius: 0 5px 5px 0;
        border-radius: 0 5px 5px 0; }
      table.table thead tr th.filtered {
        background: #78b7fa url("../img/icons/filtered.png") no-repeat right 10px center;
        cursor: pointer;
        padding-right: 25px !important; }
  table.table tbody tr td {
    background: #fff;
    border: none;
    font-weight: normal;
    border-right: 1px solid #f3f4f7 !important; }
    table.table tbody tr td:first-child {
      -webkit-border-radius: 5px 0 0 5px;
      -moz-border-radius: 5px 0 0 5px;
      -ms-border-radius: 5px 0 0 5px;
      border-radius: 5px 0 0 5px; }
    table.table tbody tr td:last-child {
      -webkit-border-radius: 0 5px 5px 0;
      -moz-border-radius: 0 5px 5px 0;
      -ms-border-radius: 0 5px 5px 0;
      border-radius: 0 5px 5px 0; }
  table.table tbody tr.selected td {
    background: #d9f8e4; }
  table.table tbody tr.deleted td {
    background: #ffe8ec; }
  table.table tr {
    /*display: flex;
    flex-flow: row wrap;
    flex-wrap: nowrap;*/
    border-bottom: 2px solid #f2f4f7 !important; }
    table.table tr th, table.table tr td {
      /*display: flex;
      flex: 1;*/
      padding: 8px 12px !important;
      border-right: 1px solid #f2f4f7 !important;
      min-height: 36px !important; }
      table.table tr th > div, table.table tr td > div {
        min-width: 30px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: auto; }
  table.table div.custom-checkbox {
    padding-top: 2px;
    overflow: initial !important;
    min-height: 1rem;
    padding-left: 1.7rem; }
    table.table div.custom-checkbox .custom-control-label::before,
    table.table div.custom-checkbox .custom-control-label::after {
      top: 0; }

.btn-table {
  display: inline-block;
  margin: 0 0 8px;
  padding-right: 20px;
  background: url("../img/icons/arr-open.png") no-repeat right center;
  border: none;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer; }

.btn-table.open {
  background: url("../img/icons/arr-close.png") no-repeat right center; }

.table-wrap {
  overflow: auto; }

/*---------------------------forms---------------------------*/
.form {
  width: 100%;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px; }
  .form .form-header {
    position: absolute;
    z-index: 1;
    width: 100%;
    padding: 10px 20px;
    background: url("../img/bg/sidebar.png") no-repeat center;
    background-size: 100% 100%;
    font-size: 16px;
    color: #fff;
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
    -ms-border-radius: 4px 4px 0 0;
    border-radius: 4px 4px 0 0; }
  .form .form-body {
    padding: 50px 15px 20px;
    background-size: 100% 100%;
    font-size: 12px;
    color: #000;
    -webkit-border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
    -ms-border-radius: 0 0 4px 4px;
    border-radius: 0 0 4px 4px; }
    .form .form-body .row-field {
      padding: 5px 20px; }
      .form .form-body .row-field .view-field {
        max-width: 500px;
        min-width: 300px;
        padding: 3px;
        border-bottom: 1px solid #cdced2;
        margin-bottom: 5px; }
      .form .form-body .row-field .enter-field {
        padding: 3px;
        font-size: 11px;
        color: #7f8991; }
    .form .form-body input[type=text], .form .form-body input[type=password], .form .form-body textarea, .form .form-body select {
      min-width: 350px;
      background: #f4f5f9;
      border-color: #cdced2; }
    .form .form-body select {
      background: #f4f5f9 url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right 0.75rem center;
      background-size: 8px 10px;
      margin: 0 !important;
      padding: 3px 25px 2px 10px;
      height: 31px; }
  .form .form-footer {
    position: absolute;
    z-index: 1;
    bottom: 0;
    width: 100%;
    padding: 10px 20px; }

#views .form .form-body, #edit .form .form-body {
  padding: 50px 15px 60px; }

#view .form .row-field, #edit .form .row-field {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }
  #view .form .row-field .title-field, #edit .form .row-field .title-field {
    padding: 5px 0 0;
    -ms-flex: 0 0 30%;
    flex: 0 0 30%;
    max-width: 30%; }
  #view .form .row-field .view-field, #view .form .row-field .enter-field, #edit .form .row-field .view-field, #edit .form .row-field .enter-field {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%; }

/* Clear button styles
--------------------------------------------- */
.field-clear {
  position: relative;
  width: 100%; }
  .field-clear .clear {
    display: block;
    position: absolute;
    z-index: 99;
    top: 12px;
    right: 8px;
    width: 16px;
    height: 16px;
    background: url("../img/icons/closes.png") no-repeat center;
    font-size: 16px;
    cursor: pointer; }
    .field-clear .clear.clear-sm {
      top: 8px;
      right: 6px; }
  .field-clear input {
    padding-right: 28px; }

/*title-field*/
/* Steps
--------------------------------------------- */
.rg-step {
  position: relative;
  min-width: 500px;
  padding: 20px; }
  .rg-step .steps {
    text-align: center; }
    .rg-step .steps .step {
      display: inline-block;
      width: 32px;
      height: 32px;
      padding: 3px;
      background: #afd8fa;
      -webkit-border-radius: 100%;
      -moz-border-radius: 100%;
      -ms-border-radius: 100%;
      border-radius: 100%;
      font-size: 17px;
      color: #fff;
      text-align: center; }
      .rg-step .steps .step.active {
        display: inline-block;
        position: relative;
        top: -9px;
        padding: 4px;
        width: 54px;
        height: 54px;
        font-size: 24px;
        -webkit-transition: background 0.2s;
        -moz-transition: background 0.2s;
        -ms-transition: background 0.2s;
        -o-transition: background 0.2s;
        transition: background 0.2s; }
        .rg-step .steps .step.active > div {
          width: 46px;
          height: 46px;
          margin: auto;
          padding: 1px;
          background: #7de6a3;
          border: 2px solid #fff;
          border-radius: 100%;
          -webkit-transition: background 0.2s;
          -moz-transition: background 0.2s;
          -ms-transition: background 0.2s;
          -o-transition: background 0.2s;
          transition: background 0.2s; }
      .rg-step .steps .step.complete {
        background: #7de6a3;
        -webkit-transition: background 0.2s;
        -moz-transition: background 0.2s;
        -ms-transition: background 0.2s;
        -o-transition: background 0.2s;
        transition: background 0.2s; }
  .rg-step .line, .rg-step .line-active {
    position: absolute;
    top: 35px;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0, white 5%, white 95%, rgba(255, 255, 255, 0) 100%); }
  .rg-step .line-active {
    width: 0%;
    background: linear-gradient(to right, rgba(125, 230, 163, 0) 0, #7de6a3 5%, #7de6a3 95%, rgba(125, 230, 163, 0) 100%);
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s; }

.steps-content {
  padding: 20px 60px; }
  .steps-content .step {
    display: none; }
  .steps-content .step:first-child {
    display: block; }

.steps-title {
  padding: 10px 60px; }

.type-traffic {
  margin-top: 7px;
  margin-bottom: 5px;
  padding-left: 9px;
  font-size: 12px;
  font-weight: bold; }
  .type-traffic .input-select-wrap {
    padding-left: 0; }

.form .form-body .steps-content .row-field {
  padding: 0; }

.filters {
  padding-top: 3px;
  /**/ }
  .filters * {
    font-size: 11px; }
  .filters .filter {
    float: left; }
    .filters input:not([type="search"]) {
        margin: 0 0;
        padding: 5px 10px;
        height: 30px !important;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        -ms-border-radius: 4px;
        border-radius: 4px;
        border-radius: 4px !important;
    }
  .filters select {
    height: 30px !important;
    padding: 5px 15px 5px 5px !important;
    background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right 5px center;
    background-size: 8px 10px; }
  .filters .text {
    padding: 11px 0; }
  .filters .chb {
    position: relative;
    top: 6px;
    margin-top: -10px; }
  .filters .filter-control {
    margin-left: 10px;
    padding-top: 20px;
    /* button {
       width: 120px !important;
       margin-right: 7px;
     }*/ }
  .filters .custom-checkbox {
    margin-right: 15px; }
    .filters .custom-checkbox label {
      padding: 5px 0; }
  .filters .filter-date {
    float: left;
    margin-right: 5px; }
    .filters .filter-date input {
      width: 77px; }
  .filters #filter-date-start img,
  .filters #filter-date-finish img {
    height: 20px;
    margin-top: 8px; }
  .filters #filter-type select {
    width: 100px; }
  .filters #filter-serv-channel {
    min-width: 127px; }
    .filters #filter-serv-channel select {
      width: 176px; }
  .filters .refresh {
    padding: 5px 10px; }
    .filters .refresh img {
      width: 15px; }
  @media all and (max-width: 1450px) {
    .filters .clear, .filters .filtered {
      font-size: 0;
      padding: 13px 18px; } }
  @media all and (max-width: 1450px) {
    .filters .filtered {
      background-image: url("../img/icons/funnel.png");
      background-size: 20px;
      background-position: center;
      background-repeat: no-repeat; } }
  @media all and (max-width: 1450px) {
    .filters .clear {
      background-image: url("../img/icons/clear.png");
      background-size: 20px;
      background-position: center;
      background-repeat: no-repeat; } }

textarea {
  height: 31px;
  min-height: 31px; }

.inputError {
  border-color: #f00 !important; }

/*---------------------------chart---------------------------*/
.messages-bar {
  padding: 0 0 21px; }
  .messages-bar .messages-bar-info {
    margin-bottom: 20px; }
  .messages-bar .title {
    margin-top: 7px;
    font-size: 12px;
    font-weight: bold; }
  .messages-bar .description {
    margin-bottom: 20px;
    font-size: 14px;
    color: #6e7173; }
  .messages-bar .decipher {
    margin-top: 30px;
    margin-left: -15px;
    margin-right: -15px;
    margin-bottom: -30px;
    padding: 10px 20px;
    border-radius: 0 0 6px 6px;
    background: #fafbfd; }
    .messages-bar .decipher .item {
      float: left;
      padding-left: 20px;
      font-size: 13px;
      color: #6e7173;
      margin-right: 10px; }
    .messages-bar .decipher .item:nth-child(1) {
      background: url("../img/bg/barGraph-1_dec.png") no-repeat left top 6px; }
    .messages-bar .decipher .item:nth-child(2) {
      background: url("../img/bg/barGraph-2_dec.png") no-repeat left top 6px; }
    .messages-bar .decipher .item:nth-child(3) {
      background: url("../img/bg/barGraph-3_dec.png") no-repeat left top 6px; }
    .messages-bar .decipher .item:nth-child(4) {
      background: url("../img/bg/barGraph-4_dec.png") no-repeat left top 6px; }

.barGraph {
  position: relative;
  width: 80%;
  height: 125px;
  margin-left: 10%;
  background: #fff url("../img/bg/barGraph.png"); }
  .barGraph .data-rend {
    text-align: center;
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0; }
  .barGraph .column {
    display: inline-block;
    width: 10px;
    background: #0b2e13;
    margin: 0 3px;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s; }
  .barGraph .column-1, .barGraph .column-5 {
    background: url("../img/bg/barGraph-1.png");
    background-size: 10px 6px; }
  .barGraph .column-2, .barGraph .column-6 {
    background: url("../img/bg/barGraph-2.png");
    background-size: 10px 6px; }
  .barGraph .column-3, .barGraph .column-7 {
    background: url("../img/bg/barGraph-3.png");
    background-size: 10px 6px; }
  .barGraph .column-4, .barGraph .column-8 {
    background: url("../img/bg/barGraph-4.png");
    background-size: 10px 6px; }
  .barGraph .steps {
    position: absolute;
    top: -8px;
    left: -30px;
    font-size: 13px;
    text-align: right; }
    .barGraph .steps .step {
      font-size: 11px;
      color: #6e7173;
      margin-bottom: 4px; }
  .barGraph .label {
    position: absolute;
    bottom: -16px;
    left: 0;
    width: 100%;
    font-size: 13px;
    color: #6e7173;
    text-align: center; }

#bar-system-status {
  padding-top: 15px; }
  #bar-system-status .barGraph {
    height: 90px; }
    #bar-system-status .barGraph .column-1, #bar-system-status .barGraph .column-5 {
      background: linear-gradient(to top, rgba(255, 255, 255, 0.9), rgba(249, 138, 165, 0.9) 30%, rgba(249, 138, 165, 0.9));
      background-size: 100%;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      -ms-border-radius: 3px;
      border-radius: 3px; }

.circleDiagram-decipher {
  display: inline-block;
  float: left;
  margin-top: 35px;
  margin-left: 10px; }
  .circleDiagram-decipher .item {
    font-size: 12px; }
    .circleDiagram-decipher .item:before {
      content: '';
      display: inline-block;
      width: 8px;
      height: 8px;
      margin-right: 10px;
      -webkit-border-radius: 100%;
      -moz-border-radius: 100%;
      -ms-border-radius: 100%;
      border-radius: 100%; }
    .circleDiagram-decipher .item:nth-child(1):before {
      background: #82f2e7; }
    .circleDiagram-decipher .item:nth-child(2):before {
      background: #5ae894; }
    .circleDiagram-decipher .item:nth-child(3):before {
      background: #f5cd57; }

.circleDiagram {
  position: relative;
  float: left;
  width: 120px;
  height: 120px; }
  .circleDiagram .chart {
    position: absolute;
    width: 120px;
    height: 120px;
    top: 0;
    left: 0;
    margin: 0;
    padding: 10px; }
  .circleDiagram .doughnutSummary {
    position: absolute;
    top: 55%;
    left: 50%;
    color: #d5d5d5;
    text-align: center;
    cursor: default; }
  .circleDiagram .doughnutSummaryTitle {
    position: absolute;
    top: 50%;
    width: 100%;
    margin-top: -27%;
    font-size: 13px;
    letter-spacing: .06em;
    display: none; }
  .circleDiagram .doughnutSummaryNumber {
    position: absolute;
    top: 50%;
    width: 100%;
    margin-top: -25%;
    font-size: 20px;
    color: #6e7173; }
  .circleDiagram .chart path:hover {
    opacity: .65; }

.doughnutTip {
  position: absolute;
  min-width: 30px;
  max-width: 300px;
  padding: 5px 15px;
  border-radius: 1px;
  background: rgba(0, 0, 0, 0.8);
  color: #ddd;
  font-size: 17px;
  text-shadow: 0 1px 0 #000;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.3;
  letter-spacing: .06em;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  pointer-events: none; }

.doughnutTip:after {
  position: absolute;
  left: 50%;
  bottom: -6px;
  content: "";
  height: 0;
  margin: 0 0 0 -6px;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  border-top: 6px solid rgba(0, 0, 0, 0.7);
  line-height: 0; }

/*---------------------------buttons---------------------------*/
.actions {
  display: inline-block;
  float: left;
  width: 22px;
  height: 16px;
  margin: 0 2px;
  cursor: pointer; }
  .actions.view {
    background: url("../img/icons/action/vieew.png") no-repeat center; }
  .actions.edit {
    background: url("../img/icons/action/edit.png") no-repeat center; }
  .actions.delete {
    background: url("../img/icons/action/delete.png") no-repeat center; }
  .actions.close {
    background: url("../img/icons/action/close.png") no-repeat center; }

.btn-back {
  background-color: #fff;
  border-color: #78b7fa;
  color: #78b7fa; }

.btn-statistics {
  width: auto;
  margin: 0;
  padding: 0 20px 0 0;
  text-align: left; }

.btn-favorites {
  margin: 0;
  padding-left: 0; }

.control-master-button {
  padding-right: 3px !important; }

.btn-margin-right {
  margin-right: 15px; }

/*---------------------------auxiliary---------------------------*/
.tooltip {
  position: absolute;
  z-index: 1070;
  display: block;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  word-spacing: normal;
  white-space: normal;
  line-break: auto;
  font-size: .875rem;
  word-wrap: break-word;
  opacity: 0; }

.tooltip.show {
  opacity: 1; }

.tooltip .arrow {
  position: absolute;
  display: block;
  width: .8rem;
  height: 0.4rem; }

.tooltip .arrow::before {
  position: absolute;
  content: "";
  border-color: transparent;
  border-style: solid; }

.bs-tooltip-auto[x-placement^=top], .bs-tooltip-top {
  padding: 0.4rem 0; }

.bs-tooltip-auto[x-placement^=top] .arrow, .bs-tooltip-top .arrow {
  bottom: 0; }

.bs-tooltip-auto[x-placement^=top] .arrow::before, .bs-tooltip-top .arrow::before {
  top: 0;
  border-width: .4rem .4rem 0;
  border-top-color: #fdf4da; }

.bs-tooltip-auto[x-placement^=right], .bs-tooltip-right {
  padding: 0 0.4rem; }

.bs-tooltip-auto[x-placement^=right] .arrow, .bs-tooltip-right .arrow {
  left: 0;
  width: .4rem;
  height: 0.8rem; }

.bs-tooltip-auto[x-placement^=right] .arrow::before, .bs-tooltip-right .arrow::before {
  right: 0;
  border-width: .4rem .4rem .4rem 0;
  border-right-color: #fdf4da; }

.bs-tooltip-auto[x-placement^=bottom], .bs-tooltip-bottom {
  padding: 0.4rem 0; }

.bs-tooltip-auto[x-placement^=bottom] .arrow, .bs-tooltip-bottom .arrow {
  top: 0; }

.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .bs-tooltip-bottom .arrow::before {
  bottom: 0;
  border-width: 0 .4rem .4rem;
  border-bottom-color: #fdf4da; }

.bs-tooltip-auto[x-placement^=left], .bs-tooltip-left {
  padding: 0 0.4rem; }

.bs-tooltip-auto[x-placement^=left] .arrow, .bs-tooltip-left .arrow {
  right: 0;
  width: .4rem;
  height: 0.8rem; }

.bs-tooltip-auto[x-placement^=left] .arrow::before, .bs-tooltip-left .arrow::before {
  left: 0;
  border-width: .4rem 0 .4rem .4rem;
  border-left-color: #fdf4da; }

.tooltip-inner {
  max-width: 200px;
  padding: .25rem .5rem;
  color: #000;
  text-align: left;
  background-color: #fdf4da;
  border-radius: .25rem;
  box-shadow: 0 0 2px #eee; }

/*---------------------------paginations---------------------------*/
.gpb-pagination .page {
  float: left;
  width: 24px;
  height: 24px;
  margin-left: 4px;
  padding: 2px;
  background: #fff;
  border: 1px solid #78b7fa;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  border-radius: 100%;
  font-size: 13px;
  color: #7b7d7f;
  text-align: center;
  cursor: pointer; }
  .gpb-pagination .page.current {
    background: #78b7fa;
    border: 1px solid #78b7fa;
    color: #fff;
    cursor: default; }
  .gpb-pagination .page.prev {
    background: #fff url("../img/bg/pagination/prev.png") no-repeat center; }
  .gpb-pagination .page.prev-prev {
    background: #fff url("../img/bg/pagination/prev-prev.png") no-repeat center; }
  .gpb-pagination .page.next {
    background: #fff url("../img/bg/pagination/next.png") no-repeat center; }
  .gpb-pagination .page.next-next {
    background: #fff url("../img/bg/pagination/next-next.png") no-repeat center; }

.display-by {
  font-size: 12px;
  color: #6e7173; }
  .display-by input {
    display: inline-block;
    width: 50px;
    margin: 2px 0;
    padding: 3px 5px;
    font-size: 12px; }

/*# sourceMappingURL=style.css.map */