@font-face {
    font-family: 'Circe';
    src: url("./fonts/Circe-Regular.eot");
    src: url("./fonts/Circe-Regular.eot?#iefix") format("embedded-opentype"), url("./fonts/Circe-Light.woff") format("woff"), url("./fonts/Circe-Light.svg#custom_font") format("svg");
    font-style: normal;
}

@font-face {
    font-family: 'Circe';
    src: url("./fonts/Circe-Regular.eot");
    src: url("./fonts/Circe-Regular.eot?#iefix") format("embedded-opentype"), url("./fonts/Circe-Regular.woff") format("woff"), url("./fonts/Circe-Regular.svg#custom_font") format("svg");
    font-weight: 400;
    font-style: normal;
}


@font-face {
    font-family: 'Circe';
    src: url("./fonts/Circe-Bold.eot");
    src: url("./fonts/Circe-Bold.eot?#iefix") format("embedded-opentype"), url("./fonts/Circe-Bold.woff") format("woff"), url("./fonts/Circe-Bold.svg#custom_font") format("svg");
    font-weight: bold;
    font-style: normal;
}

html { 
    height: 100%;
}

body    {
    font-family: "Circe", Helvetica, Arial, sans-serif;
    font-size: 12px;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    color: #363636;
    min-width:1400px;
}

input, button {font-family: "Circe", Helvetica, Arial, sans-serif;}

a, a:visited {color: #363636; text-decoration: none;}
a:hover { color: #C4262E}

.cl, .clear {clear:both;}

i.ibtn{
    width:16px;
    height:16px;
    display: inline-block;
    background-image: url(../img/btnicon.png);
    background-size: 16px;
}

.inline-form{
  display: inline;
}

/* xctrl - style start  */

.xselect {
    display: inline-block;
}

.dropdown-menu-toggle{
    background: #FFF;
    color: #363636;
    border: 1px solid #c9c9c9;
    border-radius: 4px;
    font-size: 16px;
    min-width: 38px;
    padding: 6px 26px 6px 10px;
    text-align: left;
    position: relative;
    cursor: pointer;
    display: flex;
    line-height: 24px;
    word-break: break-all;
    max-height: 36px;
    margin-top: 1px;
    overflow: hidden;
    min-height: 36px;
  }

  .dropdown-header {
    color: #9B9B9B;
    margin-bottom: 6px;
  }

  .empty .dropdown-menu-toggle {
    color: #9B9B9B;
  }
  
  .dropdown-menu-toggle-link{
    text-decoration: none;
    color: #626262;
  }
  
  .dropdown-menu-toggle i.fa-angle-down{
    width:16px;
    height:16px;
    display: inline-block;
    background-image: url(../img/arrows.png);
    background-size: 16px;
    background-position-y: -128px;
    margin-top: 4px;
    margin-left: 8px;
    position: absolute;
    right: 10px;
  }


  .dropdown-open .dropdown-menu-toggle i.fa-angle-down {
    background-position-y: -144px;
  }

  .dropdown-menu-toggle i.fa-angle-down.fa-cfg,  .dropdown-open .dropdown-menu-toggle i.fa-angle-down.fa-cfg {
    background-image: url(../img/btnicon.png);
    background-position-y: -102px;
  }
  
  .dropdown-input-container{
    margin: 8px 0 16px 0;
    position: relative;
  }
  

  .dropdown-menu {
    background: #fff;
    min-width: 200px;
    max-width: 500px;
    padding: 16px 20px;
    border-radius: 4px;
    border: 1px solid #E5E5E5;
    color: #363636;
    margin-top: 45px;
    position: absolute;
    display: none;
    z-index: 15;
    background: #FFFFFF;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.12);
    font-weight: 400;
    font-size: 16px;
    color:#363636;
    }
  
  .dropdown-open .dropdown-menu {
    display: block;
  }


  .dropdown-input{
    color: #363636;
    width: calc(100% - 56px);
    padding: 3px 46px 2px 8px;
    line-height: 30px;
    background: #F6F6F6;
    border: 1px solid #DDDDDD;
    border-radius: 4px;
    font-size: 16px;
 }

  

    .dropdown-input-container i.fa{
        width:16px;
        height:16px;
        display: inline-block;
        background-image: url(../img/btnicon.png);
        background-size: 16px;
        position: absolute;
        top: 10px;
    }

   .dropdown-input-container i.fa-search{
        background-position-y: -34px;
        right:8px
    }

    .dropdown-input-container i.fa-clear{
      background-image: url(../img/arrows.png);
      background-position-y: -224px;
      right: 30px;
  }


  .dropdown-content {
      max-height: 310px;
      overflow-y: auto;
      overflow-x: hidden;
      margin: 0 -20px;
  }

  .dropdown-content .x-scrollbar-wrapper {
    max-height: 288px;
  }

  .dropdown-content  ul{
      list-style: none;
      padding: 0;
      margin: 0;
      }
  .dropdown-content    li.divider{
        border-bottom: 1px solid rgba(0,0,0,0.1);
        margin: 0 0 5px 0;
      }
  .dropdown-content    li a{
        padding: 5px 20px;
        display: block;
        text-decoration: none;
        color: #363636;
        position: relative;
        cursor: pointer;
     }

  .dropdown-content    li a  .count {
    color:#9B9B9B;
  }

  .dropdown-content    li a:hover{
        background: #F6DCDE; /*#fbfbfb */
    }

  .dropdown-content    li a.empty {
    color:  #9B9B9B;
  }

  .dropdown-content .no-data {
    color:  #9B9B9B;
    margin: 0 20px;
  }
    
  .xselect.sites .dropdown-content .dropdown-group{
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: #9B9B9B;    
    display: block;
    margin-top: 8px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .xselect.sites .dropdown-content {
    margin-top: -10px;
  }

  .xselect.positions .dropdown-content .dropdown-group, .xselect.positions .dropdown-content .group {
    font-weight: 700;
    display: block;
    background: #F6F6F6;
    border: solid 1px  #E5E5E5;
    padding: 8px 20px 6px;
  }

  .xselect.positions .dropdown-content a.group:hover {
    background: #F6DCDE; /*#fbfbfb */
}

  .multiple  .dropdown-content    li a {
    padding-left: 50px
  }
  .multiple  .dropdown-content   li i.fa-check{
    height:20px;
    width:20px;
    margin-right: 5px;
    position: absolute;
    top: 6px;
    left: 20px;
    background: url(../img/chk.png);
    background-size: 20px;
    background-position-y: -120px;
  }

  .multiple  .dropdown-content  li a.is-selected i.fa-check {
    background-position-y: -140px;
  }

  .dropdown-content  li a.is-disabled {
    opacity: 0.4;
  }
 
   .xdaterange .ranges ul, .xdaterange .ranges {
        display: inline-block;
        padding: 0;
        margin:0;
   }

   .xdaterange .ranges li, .xdaterange  .reportrange-text {
        display: inline-block;
        list-style: none;
        color: #9B9B9B;
        border: solid 1px #9B9B9B;
        border-radius: 8px;
        padding: 8px 20px 6px;
        font-weight: 400;
        font-size: 16px;
        margin-right: 8px;
        cursor: pointer;
   }

   .xdaterange .ranges li.active, .xdaterange  .reportrange-text.active {
        color: #C4262E;
        border-color: #C4262E;
        background: #fff;
   }
   .xdaterange  .reportrange-text{
        margin-left: 32px;
   }

   .xdaterange  .reportrange-text  i.fa-calendar{
      width:16px;
      height:16px;
      display: inline-block;
      background-size: 16px;
        background-image: url(../img/btnicon.png);
        background-position-y: -50px;
        margin: 0 6px -2px -2px;
    }
    .xdaterange  .reportrange-text.active  i.fa-calendar{
      background-position-y: -68px;
    }

    .xdaterange  {
        position: relative;
    }

    .xdaterange  .daterangepicker {
        position: absolute;
        background: #fff;
        border-radius: 8px;
        box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.12);
        top: 44px;
        z-index: 10;
      }

      .xdaterange .drp-calendar {
        display: inline-block;
        vertical-align: top;
      }

      .xdaterange .drp-calendar.center {
        border-left: solid 1px #e5e5e5;
        border-right: solid 1px #e5e5e5;
        height: 348px;
      }

      .xdaterange .calendars-container {
        border-top: solid 1px #e5e5e5;
        border-bottom: solid 1px #e5e5e5;
      }

      .xdaterange .table-condensed td {
        margin: 4px 16px 2px;
      }

      .xdaterange .table-condensed td {
        font-size: 16px;
        font-weight: 400;
        padding: 2px;
      }

      .xdaterange .table-condensed tbody th {
        font-weight: bold;
        font-size: 12px;
        text-transform: uppercase;
        color: #9B9B9B;
      }

      .xdaterange .table-condensed tbody th:nth-child(6), .xdaterange .table-condensed tbody th:nth-child(7) {
        color: #C4262E;
      } 

      .xdaterange .table-head {
        font-weight: bold;
        font-size: 20px;
        text-transform: uppercase;
        text-align: center;
        border-bottom: solid 1px #e5e5e5;
        padding: 8px 0 6px;
        margin-bottom: 8px;
      }

      .xdaterange .table-condensed span {
        display: block;
        height: 31px;
        width: 40px;
        text-align: center;
        padding-top: 8px;
        cursor: pointer;
      }

      .xdaterange .table-condensed .disabled span {
        color:  #e5e5e5;
        cursor: default;
      }

      .xdaterange .table-condensed .in-range span {
        background: #F6DCDE;
        border-radius: 4px;
      }

      .xdaterange .table-condensed .off span {
        display: none;
        cursor: default;
      }

      .xdaterange .table-condensed {
        margin: 8px 16px 2px;
      }  

      .xdaterange .year-navy {
        text-align: right;
        padding: 20px 18px 16px;
      }

      .xdaterange .year-navy a {
        display: inline-block;
        font-weight: 400;
        font-size: 16px;
        padding: 8px 20px 6px;
        border: 1px solid #e5e5e5;
        border-radius: 8px;
        margin-left: 4px;
        color: #9b9b9b;
        cursor: pointer;        
      }

      .xdaterange .year-navy a.active {
        border: 1px solid #C4262E;
        color: #C4262E;
      }


      .xdaterange .navy {
        float: left;
        margin: 22px 0 0 16px; 
      }

      .xdaterange  .navy a {
        cursor:pointer;
      }

      .xdaterange  .navy a.inactive {
        cursor: default;
      } 

      .xdaterange  .navy  i.fa{
        background-image: url(../img/arrows.png);
        width:32px;
        height:32px;
        display: inline-block;
        background-size: 32px;
      }

      .xdaterange  .navy  i.fa-prev{
        background-position-y: -416px;
      }
      .xdaterange  .navy  i.fa-next{
        background-position-y: -384px;
        
      }

      .xdaterange  .navy .inactive i.fa-prev{
        background-position-y: -352px;
      }
      .xdaterange  .navy .inactive  i.fa-next{
        background-position-y: -320px;
        
      }

      .xdaterange  .drp-buttons {
        padding: 16px 18px 20px;
        text-align: center;
      }

      .xdaterange  .drp-buttons .drp-selected {
        display: inline-block;
        font-size: 16px;
        font-weight: 400;
        padding: 8px 8px 6px;
        border: 1px solid #E5E5E5;
        border-radius: 4px;
        width: 176px;
      }

      .xdaterange  .drp-buttons .btn {
        margin-left:16px;
      }

      .x-filetrs-list-item {
        display: inline-block;
        background: #F6F6F6;
        border: 1px solid #E5E5E5;
        border-radius: 40px;
        font-weight: 400;
        font-size: 16px;
        line-height: 20px;
        padding: 8px 16px;
        margin-right: 8px;
        margin-bottom: 16px;
      }

      .x-filetrs-list-item i.fa-exclude{
        width:16px;
        height:16px;
        display: inline-block;
        background-size: 16px;
          background-image: url(../img/arrows.png);
          background-position-y: -240px;
          margin: 0 -3px -4px 16px;
         cursor: pointer;
      }
  
      .x-filetrs-list-item.last {
        margin-right: 24px;
      }  

      .x-filetrs-list-item.more, button.x-filetrs-list-item {
        color: #9b9b9b;
      }

      button.x-filetrs-list-item {
        cursor: pointer;
      }


      .x-chart {
        width:100%;
        margin-bottom: 32px;
      }

      .x-chart .chart {
        height:400px;
      }

      .x-chart.x-chart-v4 {
        width:100%;
        margin-bottom: -32px;
      }

      .x-chart.x-chart-v4 .chart {
        height:450px;
      }

      /* Так не работает resize графика
      .x-chart { display:table; }
      .x-chart > div {display: table-cell;} 
      .x-chart .chart-block {width:100%;}
      .x-chart .legend-block {vertical-align: top;}
      */

      .x-chart > div {display: inline-block;} 
      .x-chart .chart-block {width:79%;}
      .x-chart .legend-block {float:right; width: 20%;}

      .chart-switch {
        float: right;
        margin-right: 21%;
        padding-right: 20px;
        margin-top: 13px;
      }

      @media all and (min-width:1650px) {
        .x-chart .chart-block {width:84%;}
        .x-chart .legend-block {float:right; width: 15%;}
        .chart-switch {margin-right: 16%;}
      }

      .x-radio, .x-checkbox {
        cursor: pointer;
      }

      .chart-switch .x-radio {
        font-size: 16px;
        display: inline-block;
        margin-left: 16px;
      }

      .x-chart .legend {
        background: #FFFFFF;
        box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.08);
        border-radius: 8px;
        padding: 16px;
        margin-top: 19px;
        position: relative;
      }
      
      .x-chart .legend .x-scrollbar-wrapper {
        max-height: 300px;
      }

      .x-legend-group {
        margin-bottom: 32px;
      }

      .x-legend-group:last-child {
        margin-bottom: 0;
      }

      .x-chart-legend-title, .x-chart-legend-group-title{ 
        font-weight: 400;
        font-size: 16px;
        line-height: 20px;
        color: #9B9B9B;
        margin-bottom: 10px;
      }

      .x-chart-legend-items-list {
        padding-left: 28px;
        margin-top: 0
      }

      .x-chart-legend-item {
        font-weight: 400;
        font-size: 14px;
        line-height: 16px;
        list-style: none;  
        margin-bottom: 12px; 
        white-space: nowrap;     
      }

      .x-chart-legend-item a {
        cursor: pointer;
      }

      .x-chart-legend-item.mirror a {
        color: #9b9b9b;
      }

      .x-chart-legend-item.mirror a:hover {
        color: #C4262E;
      }

      .x-chart-legend-item i {
        display: inline-block;
        width: 18px;
        height: 18px;
        margin-left: -27px;
        margin-right: 8px;
        margin-bottom: -5px;
        border-radius: 4px;

        background-image: url(../img/chk.png);
        background-position: -1px -101px;
        background-size: 20px;
      }

      .x-chart-legend-item.off i {  
        background: url(../img/chk.png);
        background-size: 20px;
        background-position-y: -61px;
        background-position-x: -1px;
      }

      .x-chart-legend-subtitle {
        display: block;
        color: #9B9B9B;
      }

      .x-chart-legend-item.subtitled i {
        margin-bottom: -13px;
      }

      .x-chart-legend-item.inactive i {      
        background-image: none;
        border-radius: 16px;
      }


      .x-chart-legend-subitem {
        display: block;
        color: #9B9B9B;        
        margin: 5px 0;
      }

      .x-chart-legend-subitems-list {
        list-style: none; 
        margin: 0;
        padding: 0 0 1px 0;
      }

      .x-chart-legend-subitem span {
        background-repeat: repeat no-repeat;
        background-position: 0 100%;
        background-size: auto 2px;
      }


      .x-chart .legend-block i.fa-legend-position {
        width: 16px;
        height: 16px;
        display: block;
        background-image: url(../img/arrows.png);
        background-size: 16px; 
        cursor: pointer;
        background-position-y: -64px;
        position: absolute;
        top: 16px;
        right: 12px;
        background-color: #FFF;
        z-index:10
        /*
        float: right;
        margin-left: 4px;
        margin-bottom: -2px;
        */
      }

      .x-chart.bottom-legend .legend-block i.fa-legend-position {
        background-position-y: -80px;
      }

      .x-chart.bottom-legend {
        margin-bottom: 32px;
      }

      .x-chart.bottom-legend .chart-block {
        width: 100%;
      }

      .x-chart.bottom-legend .legend-block {
        float: none;
        width: auto;
        margin-top: -32px;        
      }

      .x-chart-legend-item span.index {
        float:right;
      }

      .x-chart-legend-item span.diff {
        margin-left: 8px;   
        display: inline-block;     
      } 

      .x-chart-legend-item span.value {
        margin-left: 8px;   
        min-width: 50px;
        text-align: right;
        color: #363636;
        display: inline-block;     
      } 

      .x-chart-legend-item span.diff.good {
        color: #00B42D;
      }

      .x-chart-legend-item span.diff.bad {
        color: #C4262E;
      }

      .bottom-legend .x-chart-legend-item {
        display: inline-block;
        margin-right: 46px;
      }

      .x-chart-legend-item span.index

      .bottom-legend .x-chart-legend-item:not(:first-child) {
        margin-left: 44px;
      }

      .bottom-legend .x-chart-legend-group.x-legend-group {
        float: left;
        margin-right: 0px;
        margin-bottom: 0px;
      }

      .x-ws-shadow, .x-ajax-shadow {
        display: none;
      }

      .x-ws-shadow.x-ws-inprogress, .x-ajax-shadow.x-ajax-inprogress, .unload-shadow {
        display: block;
        position: fixed;
        top: 164px;
        bottom: 1px;
        left: 248px;
        right: 0;
        background-color: rgba(128,128,128,0.3);
        z-index: 50;
      }

      .x-ws-shadow.x-ws-inprogress.no-shadow, .x-ajax-shadow.x-ajax-inprogress.no-shadow {
        display: none; 
      }

      .x-ws ~ .x-ajax, .x-ajax ~ .x-ws  {
        margin-top: -4px;
      }

      .x-chart-legend-item.inactive a {
        cursor: default;
      }
      .x-chart-legend-item.inactive a:hover {
        color: #363636;
      }


      .block-columns td > .chart-column {
        display: block;
        min-height: calc(100% - 32px);
        border-radius: 8px;
        background: #FFF;
        box-shadow: 4px 4px 20px 0px rgba(0, 0, 0, 0.08);
        padding: 16px;
        position: relative;
      }

      .block-columns .chart-column h2 {
        font-size: 18px;
        margin-top: 0;
        line-height: 22px;
        margin-bottom: 10px;
      }

      .block-columns .chart-column .x-chart.x-chart-v4 .chart {
        height: 300px;
        margin: 0 -10px 0 -16px;
      }

      .block-columns .chart-column .x-chart.x-chart-v4 {
        margin-bottom: 0;
      }

      .block-columns .chart-column .x-chart .chart-block {
        width: 100%;
      }

      .block-columns .chart-column .x-chart .legend-block {
        float: none;
        width: auto;
        margin-top: -32px;  
        display: block;   
      }

      .block-columns .chart-column .x-chart-legend-item, .block-columns .chart-column .x-chart-legend-item:not(:first-child) {
        display: block;
        font-size: 16px;
      }

      .block-columns .chart-column .x-chart-legend-item span.index {
        font-weight: bold;
      }

      .block-columns .chart-column .x-chart-legend-group.x-legend-group {
        margin: 0;
      }

      .block-columns .chart-column .x-chart-legend-group.x-legend-group:last-child {
        margin-bottom: -12px;
      }
      
      .block-columns .chart-column .x-chart .legend-block i.fa-legend-position {
        display: none;
      }

      .block-columns .chart-column .x-chart .legend{
        box-shadow: none;
        margin-top: 0;
        padding: 0;
        border-radius: 0;
      }

      .block-columns .chart-column .x-chart-legend-title, .block-columns .chart-column .x-chart-legend-group-title {
        display: none;
      }

      .block-columns .chart-column i.fa {
        width: 16px;
        height: 16px;
        display: inline-block;
        background-color: #fff;
        background-image: url(../img/btnicon.png);
        background-size: 16px; 
        cursor: pointer;
        position: absolute;
        top: 18px;        
      }

      .block-columns .chart-column i.fa {
        background-position-y: -153px;
        right: 16px;
      }

      .block-columns .min-column {
        width: 0;
      }

      .block-columns .min-column > .datectrl {
        white-space: nowrap;
      }

      .block-columns .max-column {
        width: 100%;
      }

      .block-columns .max-column > .xselect, .block-columns .max-column > .xselect > button {
        width: 100%;
      }

      .block-columns .max-column > .xselect > .dropdown-menu {
        margin-top: 8px;
      }

      .x-ws, .x-ajax {
        height: 4px;
      }

      .x-ws-inprogress .x-ws-progress-bg, .x-ajax-inprogress .x-ajax-progress-bg {
        height:4px;
        border-radius: 4px;
        background: #E5E5E5;
      }

      .x-ws-inprogress .x-ws-progress-bar, .x-ajax-inprogress .x-ajax-progress-bar {  
        background: #C4262E;
        height:4px;
        border-radius: 4px;
      }

      .x-table {
        font-weight: 400;
        font-size: 16px;
        line-height: 20px;
        width: 100%;
        border-collapse: collapse;
        
      }

      .x-table td, .x-table th {
        border: solid 1px #E5E5E5;
        padding: 16px;
        text-align: left;
        white-space: nowrap;
      }

      .x-table td.wrap, .x-table th.wrap {
        white-space: normal;
      }

      .x-table td.wrap.checkbox {
        text-indent: -26px;
        padding-left: 40px;
      }

      .x-table td.right, .x-table th.right {
        text-align: right;
      }

      .x-table td.center, .x-table th.center {
        text-align: center;
      }

      .x-table tr:nth-child(even) td {
        background: #F6F6F6;
      }

      .x-table tr:nth-child(odd) td, .x-table th {
        background: #FFFFFF;
      }

      .x-table tr:hover td, .x-table tr.hover td {
        background: #F6DCDE;
      }  

      .x-table tr.group:nth-child(n) td {
        background: #F6F6F6;
        font-weight: bold;
      }

      .x-table tr.subgroup:nth-child(n) td {
        background: #FFFFFF;
      }

      .x-table tr.group:hover td, .x-table tr.group.hover td, .x-table tr.subgroup:hover td, .x-table tr.subgroup.hover td {
        background: #F6DCDE;
      } 

      .x-table tr.subgroup td:first-child {
        padding-left: 40px;
      }

      .x-table th.subgroup {
        font-weight: 400;
        font-size: 14px;
        color: #9B9B9B;
        padding: 3px 16px 2px;
      }

      .x-table th.group {
        font-weight: 400;
        padding: 3px 16px;
      }

      .x-table .x-table-legend {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 8px;
        margin-right: 4px;
      }

      .x-table th .x-th-count {
        color: #9B9B9B;
        font-weight: normal;
      }

      .x-table th .x-th-toolbar i.fa {
        width: 16px;
        height: 16px;
        display: inline-block;
        background-image: url(../img/btnicon.png);
        background-size: 16px; 
        margin-left: 4px;
        margin-bottom: -2px;
        cursor: pointer;
      }

      .x-table th .x-th-toolbar i.fa-sum,
      .x-table th .x-th-toolbar i.fa-percent,
      .x-table th .x-th-toolbar i.fa-freq {
        width: 24px;
        height: 24px;
        background-image: url(../img/reptbbtn.png);
        background-size: auto 49px; 
        margin-bottom: -8px;
        margin-top: -2px;
      }

      .x-table th .x-th-toolbar i.fa-sum.active,
      .x-table th .x-th-toolbar i.fa-percent.active,
      .x-table th .x-th-toolbar i.fa-freq.active {
        background-position-y: -25px;
      }

      .x-table th .x-th-toolbar.inactive i.fa {
        cursor: default;
      }

      .x-table th .x-th-toolbar {
        margin-left: 4px;
      }

      .x-table th:not(.sortable) .x-th-toolbar {
        float: right; /* пока только в экспорте, там с количестовм и без сортировки так смотрится лучше */
    }

      .x-table th .x-th-toolbar.inactive {
        opacity: 0.3;
      }

      .x-table i.fa-add {
        background-position-y: -119px;
      }

      .x-table i.fa-edit {
        background-position-y: -136px;
      }
      .x-table i.fa-delete {
        background-position-y: -153px;
      }

      .x-table i.fa-add:hover {
        background-position-y: -170px;
      }

      .x-table i.fa-edit:hover {
        background-position-y: -187px;
      }

      .x-table i.fa-delete:hover {
        background-position-y: -204px;
      }

      .x-table .inactive > i.fa-add:hover {
        background-position-y: -119px;
      }
      .x-table .inactive > i.fa-delete:hover {
        background-position-y: -153px;
      }


      .x-table i.fa-percent {
        background-position-x: -25px;
      }
      .x-table i.fa-freq {
        background-position-x: -50px;
      }

      .x-table .x-td-toolbar i.fa {
        width: 16px;
        height: 16px;
        display: inline-block;
        background-image: url(../img/btnicon.png);
        background-size: 16px;
        margin-left: 4px;
        cursor: pointer;
      }
  
      .x-table .x-td-toolbar-place{
        position: relative;
        padding: 16px;
        margin: -16px;
      }

      .x-table .x-td-toolbar {
        position: absolute;
        top: 20px;
        right: 12px;
        display: none;
      }

      .x-table td:hover .x-td-toolbar {
        display: block;
      }

      .x-table td.tools-1 .x-td-toolbar-place {
        padding-right: 32px;
      }

      .x-td-edit-shadow {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 300;
      }

      .x-td-edit {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 400;        
      }

      .x-td-edit input {
        width: calc(100% - 66px);
        height: calc(100% - 36px);
        padding: 16px 48px 16px 14px;
        border: solid 2px #C4262E;
        font-size: 16px;
      }

      
      .x-table .x-td-edit i.fa {
        width: 16px;
        height: 16px;
        display: inline-block;
        background-image: url(../img/arrows.png);
        background-size: 16px;
        margin-left: 4px;
        cursor: pointer;
        position: absolute;
        top: calc(50% - 8px);
      }

      .x-table .x-td-edit i.fa-accept {
        background-position-y: -320px;
        right: 32px;
      }
      .x-table .x-td-edit i.fa-cancel {
        background-position-y: -240px;
        right: 12px;
      }
      
      .x-table td i.fa-serps {
        width: 16px;
        height: 16px;
        display: inline-block;
        background-image: url(../img/btnicon.png);
        background-size: 16px; 
        margin-left: 4px;
        margin-bottom: -2px;
        cursor: pointer;
        float: right;
        background-position-y: -34px;
      }

      .x-table td i.fa.fa-serp-4 {
        background-position-y: -254px;
      }

      .x-table td i.fa.fa-serp-3 {
        background-position-y: -237px;
      }

      .x-table .error {
        color: #C4262E;
      }

      .x-pager-pages {
        float: left;
      }

      .x-pager-sizes {
        text-align: right;
      }

      .x-pager-page {
        margin-right: 2px;
        padding: 0 3px;
        cursor: pointer;
        color: #9B9B9B;
      }

      .x-pager-page.active {
        color: #C4262E;
      }

      .x-pager-space {
        margin-right: 2px;
        color: #9B9B9B;
      }

      .x-pager-size {
        color: #9B9B9B;
        margin-left: 8px;
        border: solid 1px #E5E5E5;
        padding: 2px 8px 0;
        border-radius: 3px;
        cursor: pointer;
      }

      .x-pager-size.active {
        border-color: #C4262E;
        background: #C4262E;
        color: white;
      }

      .x-pager-line {
        font-size: 16px;
        padding: 16px;
        border: solid 1px #E5E5E5;
        margin-top: -1px;
        box-shadow: 0px -4px 8px rgba(0, 0, 0, 0.12);        
        position: relative;
      }

      .x-table tr.x-table-pager-row td {
        background: #FFFFFF;
      }
      .x-table tr.x-table-pager-row:nth-child(even) td {
        background: #F6F6F6;
      }

      .x-table tr.x-table-pager-row .x-pager-line{
        padding: 0;
        border: none;
        box-shadow: none;
      }

      .x-pager-pages i.fa {
        width:16px;
        height:16px;
        display: inline-block;
        background-size: 16px;
        background-image: url(../img/arrows.png);
        opacity: 0.3;
        margin-bottom: -2px;
      }

      .x-pager-pages i.fa-next {        
        background-position-y: -160px;
      }

      .x-pager-pages i.fa-prev {
        background-position-y: -176px;
        margin-right: 2px;
      }

      .x-pager-pages i.fa.active  {
        cursor: pointer;
        opacity: 1;
      }     
      
      .x-table-break td {
        background: none !important;
        padding: 4px;
        border: none;
      }

      .x-table i.fa-angle-down{
        width:16px;
        height:16px;
        display: inline-block;
        background-image: url(../img/arrows.png);
        background-size: 16px;
        background-position-y: -64px;
        margin-bottom: -4px;
        margin-right: 8px;
        cursor: pointer;
      }
    
        
      .x-table i.fa-angle-down.open {
        background-position-y: -80px;
      }


      .x-table th.sortable > div {
        position: relative;
        padding-right: 16px;
      }

      .x-table th.sortable.center > div {
        padding-left: 16px;
      }

      .x-table .sortable i.fa-arrow{
        width:16px;
        height:16px;
        display: inline-block;
        background-image: url(../img/arrows.png);
        background-size: 16px;
        background-position-y: -272px;
        margin-top: 2px;
        margin-left: 8px;
        opacity: 0.1;
        position: absolute;
        right: -3px;
        top: 0;
      }
    
      
      .x-table .sortable i.fa-arrow.dsc {
        background-position-y: -256px;
      }

      .x-table .sortable.active i.fa-arrow {
        opacity:1
      }

      .x-table th.sortable {
        cursor: pointer;
      }

      .x-table .root td, .x-table .total td {
        font-weight: bold;
      }

      .x-table i.fa-check{
        height:20px;
        width:20px;
        margin-right: 5px;
        margin-bottom: -5px;
        display: inline-block;
        background: url(../img/chk.png);
        background-size: 20px;
        background-position-y: -120px;
      }
    
      .x-table i.fa-check.checked {
        background-position-y: -140px;
      }

      .x-table .disabled i.fa.fa-check {
        opacity: 0.2;
      }

      .x-table th.group i.fa-check {
        margin-top: -1px;
      }

      .x-table .root i.fa-check {
        display: none;
      }

      .x-table th i.fa.fa-check {
        position: relative;
        margin-left: -2px;
        margin-right: 2px;
        margin-top: -1px;
      }

      .x-table th i.fa.fa-check.clear {
        opacity: 0.2;
        cursor: default;
      }

      .x-table th i.fa.fa-check.checked.clear {
        background-position-y: -180px;
        opacity: 1;
        cursor: pointer;
      }

      .x-table th i.fa.fa-check span.x-all-chk-count {
        display: none;
      }
      .x-table th i.fa.fa-check:hover span.x-all-chk-count {
        position: absolute;
        display: inline;
        top: -14px;
        font-size: 10px;
        left: 20px;
        color: #c9c9c9;
        font-style: normal;
        font-weight: normal;
      }

      .x-table .level2 {
        display: inline-block;
        width: 48px;
      }

      .x-table .index {
        margin-right:4px;
        display: inline-block;
        min-width: 48px;
      }

      .x-table .index sup {
        font-size: 12px;
        margin-top: -5px;
        display: inline-block;
      }
      .x-table .index sup.bad, .x-table .index.out {
        color:#C4262E;
      }
      .x-table .index sup.good {
        color: #00B42D;
      }
      .x-table .index sup.uwarn {
        color: #C4262E;
        border: solid 1px #C4262E;
        padding: 1px 6px 0;
        border-radius: 13px;
        line-height: 11px;
        font-size: 9px;
        font-weight: 700;
        cursor: default;
      }

      .x-table .index.diff-value sup {
        min-width: 40px;
        display: inline-block;
        text-align: left;
      }

      .x-table .index.diff-value.diff-value-top sup {
        min-width: 8px;
      }

      .x-table .index.diff-value-top {
        min-width: 16px;
      }

      .x-table a {
        text-decoration: underline;
      }

      .x-scrollbar-transition, .x-scrollbar-vertical, .x-scrollbar-horizontal {
        transition: all 0.1s ease;
      }

      .x-scrollbar-wrapper {
        margin: 0 auto;
        overflow: hidden;
        position: relative;
      }
        
      .x-scrollbar-wrapper:hover .x-scrollbar-vertical, .x-scrollbar-wrapper:hover .x-scrollbar-horizontal {
          opacity: 1; 
      }
      
      .x-scrollbar-vertical, .x-scrollbar-horizontal {
        opacity: 0.7;
        position: absolute;
        background: transparent; 
      }

      .x-scrollbar-vertical:hover, .x-scrollbar-horizontal:hover, .x-scrollbar-dragging {
        background: rgba(128, 128, 128, 0.1);
        opacity: 1; 
      }

      .x-scrollbar-vertical .scrollbar, .x-scrollbar-horizontal .scrollbar {
        position: relative;
        background: rgba(128, 128, 128, 0.2);
        cursor: default; 
      }
      
      .x-scrollbar-vertical {
        width: 4px;
        height: 100%;
        top: 0;
        right: 1px; 
        border-radius: 4px;
      }

      .x-scrollbar-vertical .scrollbar {
          width: 4px; 
          border-radius: 4px;
          min-height: 8px;
      }
      
      .x-scrollbar-horizontal {
        height: 4px;
        width: 100%;
        bottom: 1px;
        right: 0; 
        border-radius: 4px;
      }
        
      .x-scrollbar-horizontal .scrollbar {
        height: 4px;
        border-radius: 4px; 
      }

      .x-fix-cols .x-fix-block {
        margin-top: 10px;
        box-shadow: 4px 0px 8px rgba(0, 0, 0, 0.12);
      }

      .x-fix-cols .x-table-block .x-table {
        margin-top: 10px;
      }

      .x-fix-cols .x-fix-head .x-fix-block .x-table {
        margin-top: 0;
      }

      .x-fix-cols .x-fix-head .x-fix-block {
        margin-top: 0;
      }

      .x-fix-cols .x-fix-block .x-fix-head .x-table-block .x-table {
        margin-top: 0;
      }

      .x-fix-cols  .x-scrollbar-horizontal {
        top:0; 
        bottom: auto;
      }

      .x-fix-cols .scrollbar {
        background-color: #C4262E;
      }

      .x-fix-block .x-table-break td{
        border-right: solid 1px #E5E5E5;
      }

      .x-fix-head {
        position: relative;
      }
      .x-fix-head .x-fix-block {        
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.12);
      }

      .x-fix-head .x-fix-block.x-scrollbar-fixed-slave {
        overflow: hidden;
        overflow-y: visible;
        overflow-x: clip;
      }

      .x-btn {
        font-weight: 400;
        font-size: 16px;
        text-align: center;
        color: #fff;
        background: #C4262E;
        border:solid 1px #C4262E;
        padding: 8px 16px 6px;
        font-family: "Circe", Helvetica, Arial, sans-serif;
        cursor: pointer;
        border-radius: 4px;
      }
      
      .top-filters .x-btn.disabled {
        color: #9B9B9B;
        border: solid 1px #9B9B9B;        
        background: none;
        cursor: default;
      }

      .x-btn.disabled, .x-btn.disabled-main {
        color: #FFFFFF;
        border: solid 1px #9B9B9B;        
        background: #9B9B9B;
        cursor: default;
      }

      .x-input input {
        background: #FFF;
        color: #363636;
        border: 1px solid #c9c9c9;
        border-radius: 4px;
        font-size: 16px;
        min-width: 150px;
        padding: 6px 10px;
      }

      .x-input.iconed, .x-input.clearable {
        position: relative;
      } 

      .x-input.iconed input, .x-input.clearable input{
        padding-right: 26px;
      }

      .x-input.iconed.clearable input{
        padding-right: 54px;
      }
      
      .x-input i.fa {
        position: absolute;
        width: 16px;
        height:16px;
        background-image: url(../img/btnicon.png);
        background-size: 16px;
        right: 8px;
        top: 9px;
      }

      .x-input i.fa-search {
        background-position-y: -85px;
      }

      .x-input i.fa-clear {
        background-image: url(../img/arrows.png);
        background-position-y: -240px;
        cursor: pointer;
      }

      .x-input.iconed i.fa-clear {
        right: 32px;
        top: 10px;
      }




      i.fa-radio{
        height:20px;
        width:20px;
        margin-right: 5px;
        background: url(../img/chk.png);
        background-size: 20px;
        background-position-y: -20px;
        display: inline-block;
        margin-bottom: -5px;
      }

      .checked i.fa-radio {
        background-position-y: 0;
      }
      .checked.disabled i.fa-radio {
        background-position-y: -220px;
      }


      i.fa-check{
        height:20px;
        width:20px;
        margin-right: 5px;
        margin-bottom: -5px;
        display: inline-block;
        background: url(../img/chk.png);
        background-size: 20px;
        background-position-y: -120px;
      }
    
      .checked i.fa-check {
        background-position-y: -140px;
      }

      .checked.disabled i.fa.fa-check {
        background-position-y: -200px;
      }      

      .x-help-hint-container {
        position: relative;
      }

      .x-help-hint-container .x-scrollbar-wrapper {
        max-height: 350px;
        padding: 0px 15px;
        margin: 0 -15px;
      }

      .x-fix-cols .x-help-hint-container .scrollbar {
        background-color: rgba(128, 128, 128, 0.2);;
      }

      .x-table-help-hint {
        width: 11px;
        height: 11px;
        border: solid 1px #9B9B9B;
        display: inline-block;
        border-radius: 10px;
        margin-right: 5px;
        font-size: 10px;
        font-style: normal;
        color: #9B9B9B;
        position: relative;
        top: 2px;
        text-align: center;
      }

      .x-table-help-hint::before {
        content: 'i';
        position: relative;
        line-height: 5px;
        top: -4px;
      }

      .x-help-hint-body {
        font-weight: 400;
        font-size: 16px;
        
      }

      .x-help-hint-body p {
        margin-top: 0;
      }

      .x-help-hint {
        position: absolute;
        z-index: 100;
        width: 350px;
        background: #FFF;
        box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.08);
        border-radius: 8px;
        padding: 16px 20px;        
        margin-top: 10px;
      }

      .x-help-hint-title {
        border-bottom: 1px solid #E5E5E5;
        padding: 0 20px 8px;
        font-weight: 400;
        font-size: 20px;
        margin: 0 -20px 10px;
      }

      .x-help-hint-title i.fa-close {
        width: 16px;
        height: 16px;
        display: inline-block;
        background-size: 16px;
        background-image: url(../img/arrows.png);
        background-position-y: -240px;
        margin: 5px -3px -4px 16px;
        cursor: pointer;
        float: right;
      }


      .x-dlg-shadow {
        display: block;
        position: fixed;
        top: 0;
        bottom: 1px;
        left: 0;
        right: 0;
        background-color: rgba(128,128,128,0.8);
        z-index: 500;
      }

      .x-dlg-shadow.wait {
        z-index: 100000
      }

      .x-dlg-window{
        position: fixed;  
        width: 480px; 
        left:50%; 
        margin: 0 0 0 -272px; 
        background-color: #ffffff;  
        border-radius: 8px;
        z-index:1000;
        padding: 32px;
        font-size: 16px;
      }

      .x-dlg-wnd-title {
        font-weight: bold;
        font-size: 24px;
        line-height: 24px;
        position: relative;
        margin-bottom: 16px;
      }
      
      .x-dlg-wnd-title.empty-title {
        margin-bottom: 0;
      }

      .x-dlg-window i.ibtn.close {
        width:20px;
        height:20px;
        background-image: url(../img/dlgclose.png);
        position: absolute;
        right: -58px;
        top:-58px;
        cursor: pointer;
        background-size: 20px;
      }

      .x-dlg-window .x-dlg-wnd-buttons .x-btn {
        margin: 20px 16px 0 0; 
      }

      .x-dlg-window .error {
        color:#C4262E;
      }

      .x-dlg-window p {
        margin-top: 0;
      }

      .x-dlg-window .x-scrollbar-wrapper {
        max-height: 300px;
      }

      .x-dlg-window .x-dlg-scroll-container {
        height: 300px;
      }

      .x-dlg-about {
        margin-bottom: 16px;
        font-size: 14px;
      }


      .x-dlg-window .dropdown-content {
        margin-left: -32px;
        margin-right: -32px;
      }

      .x-dlg-window .dropdown-content li a {
        padding-left: 32px;
        padding-right: 32px;
      }

      .x-dlg-window .multiple .dropdown-content li a {
        padding-left: 62px;
      }

      .x-dlg-window .multiple .dropdown-content li i.fa-check {
        left: 32px;
      }

      .x-dlg-window .dropdown-content .dropdown-group {
        font-weight: 400;
        font-size: 12px;
        line-height: 16px;
        color: #9B9B9B;
        display: block;
        margin-top: 8px;
        padding-left: 32px;
        padding-right: 32px;
    }

    .x-dlg-window > .x-input {
      margin-bottom: 16px;
    }

    .x-dlg-window > .x-input input {
      width: calc(100% - 22px);
    }

    .x-dlg-shadow.top-right-menu{
      opacity: 0;  
    }

    .x-dlg-window.top-right-menu{
      top: 167px !important;
      left: auto;
      right: 2px;
      width: auto;
      box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.08);
      padding: 16px 20px;
      min-width: 370px;
      max-width: 400px;
    }  

    .x-dlg-window.top-right-menu .x-dlg-wnd-title {
      font-size: 20px;
      font-weight: 400;
      margin: 0 -20px 16px;
      border-bottom: 1px solid #E5E5E5;
      padding: 0 40px 8px 20px;    
    }

    .x-dlg-window.top-right-menu i.ibtn.close {
      right: 20px;
      top: 1px;
      background-image: url(../img/arrows.png);
      background-position-y: -300px;
      width: 16px;
      height: 16px;
    }


    .x-dlg-window ul.filters-info {
      color: #9B9B9B;      
      margin: 4px 0;
      padding-left: 24px;
    }

    .x-dlg-window ul.filters-info li{
      list-style-type: none;
    }

    .x-dlg-window .x-dlg-block {
      margin-top: 16px;
    }

    .x-dlg-window .x-dlg-scroll-container .x-dlg-block {
      margin-top: 0;
      margin-bottom: 16px;
    }
    
    .x-dlg-window a {
      color:#C4262E;
    }

    .x-dlg-window  .x-dlg-block .x-radio,  .x-dlg-window  .x-dlg-block .x-checkbox, .x-dlg-window  .x-dlg-block .x-dlg-header{
      margin-bottom: 4px;
    }

    .x-dlg-header {
      font-weight: bold;
      font-size: 20px;
      line-height: 20px;
      margin-bottom: 16px;
    }

    .x-dlg-window.serps {
      width:800px;
      margin-left: -400px;
    }
    .serp-title {
      font-weight: 400;
      margin-top: 4px;
    }
    .serp-snippet {
      font-size: 14px;
      color: #9B9B9B;
      margin-top: 4px;
      font-weight: normal;
    }

    .serps .x-dlg-block li {
      margin-top: 4px;
    }

    .serps .x-dlg-block li.highlinght {
      font-weight: bold;
      font-size: 110%;
    }

    /* xctrl - style end  */

      

.btn, .x-btn.close, .x-btn.cancel, .x-btn.reexport {
  font-weight: 400;
  font-size: 16px;
  text-align: center;
  color: #9B9B9B;
  border: solid 1px #9B9B9B;
  padding: 8px 16px 6px;
  font-family: "Circe", Helvetica, Arial, sans-serif;
  background: none;
  cursor: pointer;
  border-radius: 4px;
}

.btn:disabled {
  cursor: default;
  opacity: 0.5;
}

.btn.btn-success {
  color: #fff;
  background: #C4262E;
  border-color: #C4262E;
}

.x-dlg-window.top-right-menu .x-btn.download {
  font-weight: 400;
  font-size: 16px;
  text-align: center;
  color: #C4262E;
  border: solid 1px #C4262E;
  padding: 8px 16px 6px;
  font-family: "Circe", Helvetica, Arial, sans-serif;
  background: none;
  cursor: pointer;
  border-radius: 4px; 
}



.btn i.fa{
  width:16px;
  height:16px;
  display: inline-block;
  background-image: url(../img/btnicon.png);
  background-size: 16px;
  margin-bottom: -3px;
  margin-left: 2px;
}

.btn i.fa-search{
  background-position-y: -34px;
}

.btn i.fa-close-black {
  background-image: url(../img/arrows.png);
  background-position-y: -240px;
}

.btn i.fa-export{
  background-position-y: -221px;
  margin-left: 8px;
}

.btn i.fa-fav{
  background-position-y: -273px;
  margin-left: 6px;
}

header { 
    position: fixed; 
    height: 92px; 
    left: 0%; 
    right: 0%;
    top: 0px;  
    background: #FFFFFF; 
    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.08); 
    padding: 4px 32px; 
    z-index: 200;
}

header i.logo {
    display:inline-block;
    width:176px;
    height:45px;
    background-image: url(../img/logo.png);
    background-size: 100%;
    margin-bottom: -11px;
    margin-top: 11px;
}

header em.logo {
    display:inline-block;
    width: 180px;
    height: 32px;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    margin-left: 16px;
}

header .outerlinks {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    text-align: right;
    border-bottom: solid 1px #E5E5E5;
    padding-bottom: 2px;
}

header .outerlinks  a {
    margin-left: 16px;
}


header .outerlinks  a i{
    margin-left: 4px;
    margin-bottom: -4px;
}

header .usermenu {
    float:right;
    font-size: 16px;
    line-height: 20px;
    font-weight: bold;
    margin-top: 16px;
}

header .usermenu .letter {
    background: #C4262E;
    padding: 2px 8px 0;
    font-size: 28px;
    color: #fff;
    border-radius: 24px;
    text-transform: capitalize;
    display: inline-block;
    width: 24px;
    height: 38px;
    line-height: 39px;
    text-align: center;
    margin-right: 8px;
  }

header .usermenu .info {  
  line-height: 38px;
  display: inline-block;
  vertical-align: top;
}

header .usermenu i.fa-exit {
    width: 16px;
    height: 16px;
    display: inline-block;
    background-image: url(/st/v2/img/btnicon.png);
    background-size: 16px;
    margin-bottom: 3px;
    margin-left: 8px;
    background-position-y: -322px;
}

nav.leftmenu {
    position:fixed;
    top:100px;
    left:0;
    bottom:0;
    width:248px;
    background-color: #363636;
    color:#fff;
    overflow: auto;
    z-index: 300;
}

nav.leftmenu .x-scrollbar-wrapper {
  position: absolute;
  bottom: 0;
  top: 0;
}


nav.leftmenu .x-scrollbar-vertical .scrollbar {
  background: rgba(255, 255, 255, 0.3);
}

nav.leftmenu .x-scrollbar-vertical:hover, nav.leftmenu .x-scrollbar-dragging {
  background: rgba(255, 255, 255, 0.2);
}

nav.leftmenu a, nav.leftmenu a:visited { color: #fff } 
nav.leftmenu a:hover { color: #FF5252}

nav.leftmenu ul li {
    list-style: none;
}

nav.leftmenu ul.menu-groups {
    padding: 0;
    margin: 0;
    min-width: 248px;
}

nav.leftmenu ul.menu-groups .group-title
{
    font-weight: bold;
    font-size: 16px;
    background: #2c2c2c;
    padding: 11px 32px;
    border-bottom: 1px solid #444444;
}

nav.leftmenu ul.menu-items {
    padding:0;
}

nav.leftmenu ul.menu-items > li {
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        border-bottom: 1px solid #444444;
        padding-left: 32px;
        padding-bottom: 8px;
        padding-top: 8px;
}

nav.leftmenu ul.menu-subitems {
    padding-left: 36px;
}

nav.leftmenu ul.menu-subitems > li {
    margin-top: 8px;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
}

nav.leftmenu li.active a{
    color: #FF5252;
}

nav.leftmenu li.active i.fa-bull{
  width:16px;
  height:16px;
  display: block;
  float: right;
  background-image: url(../img/arrows.png);
  background-size: 16px;
  background-position-y: -287px;
  margin-right: 8px;  
}

nav.leftmenu .ibtn {
    background-image: url(../img/mmenu.png);
    background-size: auto 32px;
    margin: 0 12px -3px 0;
}

nav.leftmenu a:hover .ibtn, nav.leftmenu li.active .ibtn {background-position-y: -16px;}


nav.leftmenu .ibtn.visibility {background-position-x: -16px;}
nav.leftmenu .ibtn.pos {background-position-x: -32px;}
nav.leftmenu .ibtn.freq {background-position-x: -48px;}
nav.leftmenu .ibtn.segment {background-position-x: -64px;}
nav.leftmenu .ibtn.index {background-position-x: -80px; margin-top: 11px; float: left;}
nav.leftmenu .ibtn.settings {background-position-x: -96px;}
nav.leftmenu .ibtn.queries {background-position-x: -112px;}
nav.leftmenu .ibtn.history {background-position-x: -128px;}
nav.leftmenu .ibtn.export {background-position-x: -144px;}

nav.projmenu {
        position: fixed;
        top: 100px;
        left: 248px;
        right: 0;
        height: 32px;
        background: #FFFFFF;
        border-bottom: 1px solid #E5E5E5;
        padding: 16px 32px;
        font-size: 16px;
        color: #9B9B9B;
        z-index: 100;
}

nav.projmenu i.split{
    display: inline-block;
    height: 4px;
    width: 4px;
    vertical-align: top;
    margin: 14px 4px 0 10px;
    background-color: #9B9B9B;
    border-radius: 6px;
}


nav.projmenu i.fa-angle-down{
    width:16px;
    height:16px;
    display: inline-block;
    background-image: url(../img/arrows.png);
    background-size: 16px;
    background-position-y: -33px;
    margin-top:5px;
    margin-left: 8px;
    position: static;
}




nav.projmenu  .dropdown-menu-toggle {
    font-weight: 400;
    font-size: 20px;
    border: none;
    color: #C4262E;
    padding: 2px 10px;
}

nav.projmenu .dropdown-open i.fa-angle-down {
    background-position-y: -48px;
}

nav.projmenu .dropdown-menu {
    padding: 24px 20px 16px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.08);
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    margin-top: 20px;
}

nav.projmenu .dropdown-content li a {
    padding: 8px 20px;
    display: block;
    text-decoration: none;
    color: #555;
    position: relative;
  }

nav.projmenu .dropdown-content li a:hover {  
  background: #F6DCDE;
}

nav.projmenu .dropdown-content li a.is-selected::before {
    content: none;
}

nav.projmenu .dropdown-content li a.is-selected{
    color: #C4262E;  
}

nav.projmenu  .menu-buttons {
   float: right;
   margin-top: -4px;
}

nav.projmenu  .menu-buttons button:not(:first-of-type){
  margin-left: 16px;
}

main {
  padding: 0 0 0 248px;
  position: fixed;
  top: 164px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
  min-width: 1160px; /* меньше - схлопывается календарь - или его уменьшать*/
}

.mb {padding: 24px 32px 24px 40px;}
.mb.top {background: #F7F7F7;}
.mb.nogap {
  padding-top: 0;
  margin-top: -24px;
}
.mb.top .spacer {height: 32px;}
.mb.moveup {margin-top: -62px;}
.mb.top.ws {
  padding-top: 0;
  margin-top:-14px;
  padding-bottom: 48px;
}

.mb.zerogap {
  padding-top: 0;
  margin-top: 0px;
}


h2 {
  font-weight: 400;
  font-size: 20px;
  line-height: 32px;
  margin: 8px 0 8px;
}

h1{
    font-weight: 400;
    font-size: 28px;
    margin-top: 0;
    margin-bottom: 16px;
}

table.block-columns {
  width: 100%;
  border-collapse: collapse;
}

table.block-columns > tbody > tr > td {
 padding: 0 16px 32px;
 vertical-align: top;
 height: 1px; /* важно для вертикальной растяжки блоков внутри */
}

table.block-columns.chart-in-line-3 > tbody > tr > td {
  width: 33%
}

table.block-columns.chart-in-line-3 > tbody > tr > td:nth-child(2) {
  width: 34%;
}

table.block-columns.chart-in-line-2 > tbody > tr > td {
  width: 50%;
}

table.block-columns > tbody > tr:last-child > td {
  padding-bottom: 0;
}

table.block-columns > tbody > tr > td:first-child {
  padding-left: 0;
}

table.block-columns > tbody > tr >  td:last-child {
  padding-right: 0;
}

table.block-columns.chart-in-line-3 > tbody > tr >  td:not(:nth-child(3)) {
  padding-right: 16px;
}

.top .filters {
  margin-bottom: -64px;
}

.top .filters.no-data {
  font-size: 16px;
  margin-bottom: -56px;
  display: block;
}

.top .filters.no-data a {
  color: #C4262E;
}


.filters {
  background: #FFFFFF;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.08);
  margin-top: 24px;
  margin-bottom: 24px;
  display: flex;
  padding: 20px 32px;
}

.filters.filters-outlbl {
  display: block;
}

.filters.small {
  width:550px;
}

.filters .xselect {
  display: inline-flex;
  flex: 1 1 0;
  margin-right: 24px;
}

.filters .filter-joining .xselect {
  margin-right: -1px;
}

.filters .middle-joined .xselect button {
  border-radius: 0;
}

.filters .first-joined .xselect button {
  border-radius: 4px 0 0  4px;
}

.filters .last-joined .xselect button {
  border-radius: 0 4px 4px 0;
}

.filters .xselect .dropdown-menu-toggle {
  flex: 1 1 auto;
}

.top-filters .x-filetrs-list {
  margin-top:36px;
}

.top-filters {
  margin-top: -48px;
}

.filters .x-input {
  display: flex;
  flex-grow: 1;
}

.filters .x-input input {
  width:100%
}

.filter-lbl-block {
  display: flex;
  flex-grow: 1;  
}

.filter-lbl-block.gap {
  margin-top: 16px;
}

.filter-lbl-block .no-label {
  margin-top: 20px;
}

.filter-lbl-block > div{
  width: 100%;
}

.filter-top-label {
  font-size: 14px;
  color: #9B9B9B;
}

.filters .filter-lbl-block .xselect {
  display: flex;
}


.filter-lbl-block > div.no-stretch {
  flex: 0;
}

.filter-lbl-block .icon-btn {
  height: 36px;
  width: 36px;
  padding: 0;
  margin-top: 22px;
  border: 1px solid #c9c9c9;
}

.pre-filter-progress {
  margin-top: 12px;
  margin-bottom: -12px;
}

.mb-hf-help {
  float:right;
  width: 350px;
  font-size: 16px;
  line-height: 20px;
}

.mb-hf-help .mb-hf-example {
  color: #C4262E
}

.mb-hf-form {
  width: calc(100% - 374px);
}

.mb-hf-form .mb-hf-example, .mb-hf-buttons .mb-hf-example, .mb-hf-buttons a.mb-hf-example:hover {
  color: #9B9B9B;
}
.mb-hf-form .mb-hf-error {
  color: #C4262E;
}
.mb-hf-form a {
   color: #9B9B9B;
   cursor: pointer;
   font-weight: normal;
}

.mb-hf-form textarea {
  width: calc(100% - 18px);
  height: 234px;
  font-size: 14px;
  line-height: 16px;
  padding: 2px 8px;
}

.mb-hf-rctlr {
  float:right;
}

.mb-hf-form .mb-hf-rctlr a {
  margin-left: 16px;
}

.mb-hf-form a i.ibtn {
  vertical-align: text-top;
}

.mb-helped-form-block .x-btn {
  margin: 4px 16px 4px 0;
}

i.ibtn.clear{
  background-image: url(../img/arrows.png);
  background-position-y: -224px;
}

i.ibtn.up-close{
  background-image: url(../img/arrows.png);
  background-position-y: -80px;
}

.tc-time, .dc-dates, .sc-filesize {
  color: #9B9B9B;
  font-size: 14px;
  margin-left: 8px;
}

.sc-progress {
  color: #9B9B9B;
}