@import url(https://fonts.googleapis.com/css?family=Roboto:400,400italic,500,500italic,700italic,700&subset=latin,cyrillic);
html, body {
    height: 100%;
    font-family: 'Roboto', sans-serif;
    background-color: #f5f5f5;
    position: relative;
    min-width: 320px;
}

div > h4 > small {
    min-height: 10px;
}

.scrollfixed {
    position: fixed;
    z-index: 2;
    bottom: 0;
    right: 40px;
    width: 50px;
    height: 50px;
    background: #2196f3;
    border-radius: 25px;
    display: block !important;
    cursor: pointer;
}

.scrollfixed > i {
    font-size: 30px;
    padding: 5px 7px;
}

.focus-search input[type="text"] {
    display: none;
    color: #f5f5f5;
    animation: fs-hide 0.2s;
    -webkit-animation: fs-hide 0.2s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    left:-90px;
}
.focus-search.active input[type="text"] {
    display: inline-block;
    animation: fs-show 0.2s;
    -webkit-animation: fs-show 0.2s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    position: relative;
    top: -7px;
    width: 240px;
    left: 10px;
    height: 36px;
    padding: 7px 12px;
    font-size: 13px;
    line-height: 1.5384616;
    color: #333333;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ddd;
    border-radius: 3px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.focus-search .focus-search-icon {
    position: relative;
    top: 1px;
    color: #f5f5f5;
}
.focus-search.active .focus-search-icon {
    color: #333;
    top: -7px;
    left: -15px;
}
.user-search-form{
    position: relative;
}

a.settings-a > div > div.active {
    top: -22px;
    left: -5px;
}
body.sidebar-xs > div > div > div > div > div > div > div > div > div > div > div > div > li > a >  .user-search-form, body.sidebar-xs > div > div > div > div > div > div > div > div > li > a >  .user-search-form {
    display: none;
}

.device-actions {
    padding-bottom: 5px;
}

.btn-transparent {
    border-color: transparent;
    color: transparent;
}

.heading-btn-group > a.btn:hover {
    color: #2196F3!important;
}

.page-info {
    margin: 5px;
}

@media (min-width: 769px) {
    .page-header {
        margin-top: 52px !important;
    }
    .content-wrapper > .ng-scope {
        padding-top: 65px;
    }
}

.error-text {
    font-size: 13px;
    width: 90%;
    max-width: 300px;
    margin: auto;
    text-align: center;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
}
.error-text > p {
    position: relative;
    top: 25%;
    color: #999999;
    line-height: 1.25;
}

/*-----tooltip-----*/
.d3-tip {
    position: absolute;
    padding: 0px 15px;
    border-radius: 3px;
    background-color: #333;
    color: #fff;
    margin-bottom: -3px;
    font-size: 12px;
    z-index: 1070;
}
.d3-tip .d3-tip-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}
.d3-tip.n .d3-tip-arrow {
    bottom: -4px;
    left: 50%;
    margin-left: -4px;
    border-width: 4px 4px 0;
    border-top-color: #333;
}
.d3-tip.e .d3-tip-arrow {
    top: 50%;
    left: -4px;
    margin-top: -4px;
    border-width: 4px 4px 4px 0;
    border-right-color: #333;
}
.d3-tip.w .d3-tip-arrow {
    top: 50%;
    right: -4px;
    margin-top: -4px;
    border-width: 4px 0 4px 4px;
    border-left-color: #333;
}
.d3-tip.s .d3-tip-arrow {
    top: 0;
    left: 50%;
    margin-left: -4px;
    border-width: 0 4px 4px;
    border-bottom-color: #333;
}
/*---------------------------*/

/*-----col-xxs-----*/
@media (max-width: 380px) {
    .col-xxs-12 {
        width: 100% !important;
    }
    .hidden-xxs {
        display: none !important;
    }
}
/*---------------------------*/

.async-block-grid-wrapper {
    margin: 5px;
}
.inline-panel {
    display: inline-grid;
    height: 212px;
    width: 32%;
    min-width: 300px;
    margin-right: 10px;
}
.content {
    padding: 15px 15px 60px 15px;
}

/*-----icon for widgets-----*/
.panel-icon {
    font-size: 24px!important;
    top:40%!important;
}
.wait-icon {
    position: absolute !important;
    left: 46%;
}
.error-icon {
    position: absolute !important;
    width: 100%;
    left: 0;
}
.dark-icon {
    color: black;
}
.light-icon {
    color: white;
}
/*--------------------------*/

.heading-elements-toggle {
    cursor: pointer;
    display: block;
    line-height: 1;
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -8px;
    color: inherit !important;
}

/*-----double-sidebar-class for replace sidebar-main-----*/
.double-sidebar-container {
    top: 52px;
    display: table-cell;
    z-index: 99;
    vertical-align: top;
    background-color: #37474F;
    position: relative;
}

.computer-filter > li.active > a, .computer-filter > li.active > a:hover, .computer-filter > li.active > a:focus,
.navigation > li.active > a, .navigation > li.active > a:hover, .navigation > li.active > a:focus,
.navigation > li > ul > li.active > a, .navigation > li > ul > li.active > a:hover, .navigation > li > ul > li.active > a:focus,
.navigation > li > ul > li > ul > li.active > a, .navigation > li > ul > li > ul > li.active > a:hover, .navigation > li > ul > li > ul > li.active > a:focus {
    background-color: #26A69A;
}
.computer-filter > li > a.active > i.text-primary, .computer-filter > li.active > ul > li > a.active_grouped_computer > i.text-primary {
    color: #0960E5!important;
}
@media (min-width: 1050px) {
    .double-sidebar-container {
        width: 520px;
    }
}
.sidebar-xs .double-sidebar-container {
    width: 112px;
}
@media (min-width: 769px) {
    .sidebar-xs .double-sidebar-container .sidebar-category-visible {
        display: block;
    }
    .sidebar-xs .double-sidebar-container .navigation > li > a {
        display: block;
        text-align: center;
        padding-left: 0;
        padding-right: 0;
    }
    .sidebar-xs .double-sidebar-container .navigation > li > a > i {
        margin: 2px 0;
        display: block;
        float: none;
    }
    /*26A69A*/
    .sidebar-xs .double-sidebar-container .sidebar-computers, .sidebar-xs .double-sidebar-container .sidebar-events {
        width: 56px !important;
        top: 0px;
        bottom: 0px;
        margin-bottom: 0px;
    }
    .sidebar-xs .double-sidebar-container .navigation > li:hover > a > span, .sidebar-xs .double-sidebar-container .navigation > li:hover > ul {
        display: block;
        z-index: 99;
    }
    .sidebar-xs .double-sidebar-container .navigation > li:hover > ul {
        padding: 0px;
    }
    .sidebar-xs .double-sidebar-container .navigation > li > a > span, .sidebar-xs .double-sidebar-container .navigation > li > ul {
        display: none;
        position: absolute;
        top: 0;
        right: -260px;
        background-color: #37474F;
        border: 1px solid #37474F;
        width: 260px;
        text-align: left;
        color: #fff;
        cursor: pointer;
        border-bottom-right-radius: 3px;
        border-top-right-radius: 3px;
    }

    .sidebar-xs .double-sidebar-container .navigation li > .has-ul:after {
        display: none;
    }

    .computer-filter > li > a.active > span, .navigation > li.active > a > span, .navigation > li > ul > li.active > a.active > span, navigation > li > ul > li > ul > li.active > a.active > span {
        background-color: #26A69A !important;
        border-color: #26A69A !important;
    }

    .sidebar-xs .double-sidebar-container .sidebar-events .navigation > li > a > span {
        padding: 15px 20px;
        margin: 0;
    }
    .sidebar-xs .double-sidebar-container .navigation > li > a > span.company {
        padding: 19.5px 20px;
        margin: 0;
    }
    .sidebar-xs .double-sidebar-container .navigation > li > a.has-ul > span.number {
        display: none!important;
    }
    .sidebar-xs .double-sidebar-container .navigation > li:hover > a > span {
        height: 100%;
    }
    .sidebar-xs .double-sidebar-container .sidebar-computers .navigation > li > a > span {
        padding: 16px 20px;
    }
    .sidebar-xs .double-sidebar-container .sidebar-computers .navigation > li > a > span.company {
        padding: 19px 20px;
    }
}

.navigation > li > ul > li {
    /*padding-left: 10px;*/
}

/*----------------------------------------*/
@media (min-width: 769px) {
    .sidebar-xs .sidebar-main .sidebar-content {
        width: 56px;
    }
}

.sidebar-xs-indicator .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
    color: #FFFFFF;
}

.navbar-inverse .navbar-nav > .open > a {
    background-color: rgba(0, 0, 0, 0.25);
}

@media (max-width: 767px) {
    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
        background-color: rgba(0, 0, 0, 0.1);
    }
}

.computer-filter, .event-filter {
    padding-bottom: 38px !important;
}

.text-dark {
    color: #333333 !important;
}

.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
    z-index: 3;
    color: #fff;
    cursor: default;
    background-color: #2196F3!important;
    border-color: #2196F3!important;
}
.pagination > li > a, .pagination > li > span {
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #2196F3;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
}

/*-----------------------*/
@media (min-width: 1025px) {
    .help-inline:not(.label) {
        color: #999999;
    }
}
.help-inline {
    width: 100%;
}
.filter-input {
    display: inline;
    padding: 0 3px;
}

/*-----datepicker-----*/
.datepicker.dropdown-menu {
    width: 250px;
    height: 250px;
}
.datepicker.dropdown-menu button {
    outline: none;
    border: 0px;
}
.datepicker.dropdown-menu tbody {
    height: 180px;
}
.datepicker.dropdown-menu tbody button {
    text-align: center;
    padding: 0px !important;
}
.datepicker.dropdown-menu tbody button span:hover {
    background-color: transparent;
}
.datepicker.dropdown-menu.datepicker-mode-1 tbody button, .datepicker.dropdown-menu.datepicker-mode-2 tbody button {
    height: 65px;
}
.datepicker-mode-0 {
    min-height:300px;
}
/*----------------------------------------*/

/*-----daterange-----*/
.date-range-container {
    position: relative;
}
.date-range-container {
    position: relative;
    display: inline-block;
}
.date-range-current {
    background-color: #F5F5F5;
    cursor: pointer;
    height: 39px;
    font-weight: 100;
    font-size: 13px;
    padding: 10px 20px;
    border: none;
}
.date-range-current-arrow {
    font-size: 0.8em;
}
.date-range-current:hover {
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.0980392);
}
.date-range-menu {
    position: absolute;
    right: 0;
    top: 100%;
    display: none;
    background-color: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.0980392);
    padding: 5px 0;
    z-index: 99999;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.0980392);
    min-width: 300px;
}
.date-range-menu-item {
    white-space: nowrap;
    padding: 1px 22px;
    cursor: pointer;
}
.date-range-menu-item .glyphicon-ok {
    margin-left: -22px;
    width: 22px;
    text-align: center;
}
.date-range-apply {
    white-space: nowrap;
    margin-top: 5px;
    padding: 8px 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.0980392);
}
.date-range-menu-item:hover {
    background-color: #F5F5F5;
}
.date-range-custom-end {
    position: relative;
}
.date-range-menu-item-custom input[type="text"] {
    width: 100px;
}
.date-range-menu-item-custom.has-error input[type="text"] {
    color: red;
}
/*----------------------------------------*/

.navbar-nav > li > .dropdown-menu {
    width: max-content;
}
.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {
    color: #e3e3e3 !important;
    background-color: rgba(0,0,0,.1) !important;
}
.navbar-inverse .navbar-nav > li > a {
    color: #FFF !important;
}
.navbar-inverse.navbar {
    background-color: rgb(55,71,79);
}
.navbar-fixed-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse {
    max-height: max-content;
}

.dropdown-user > a {
    padding: 9px 15px !important;
}

/*-----change bootstrap primary color-----*/
.btn-primary,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:hover {
    background-color: #2196F3!important;
    border-color: #2196F3!important;
}
/*----------------------------------------*/

/*-----light scrollbar-----*/
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-button {
    width: 0px;
    height: 0px;
}
::-webkit-scrollbar-track-piece {
    background: #d6d6d6;
}
::-webkit-scrollbar-thumb {
    background: #a9a9a9;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background-color: #d6d6d6;
    border: 1px solid #a9a9a9;
}
::-webkit-scrollbar-thumb:active {
    background-color: #d6d6d6;
}
/*----------------------------------------*/

.adv .notices-block{
    position: fixed;
    top: 68px;
    left: 260px;
    z-index: 50;
    right: 8px;
}
.header-float.fixed .breadcrumb-line {
    margin-right: 50px;
}
.top-filter-block .filter-input:not(.filter-input-date) input[type="text"] {
    width:155px;

}

.page-content>.content-wrapper1, body>.wrap-container{
    overflow-y:scroll;
    height: 100%;
}

.panel-body {
    background-color: #fff;
}
.ibox-device-info .ibox.panel {
    border-width:1px;
    border-color: #ddd;
}
.panel .ibox-loading {
    background-color: #fff;
}
.ibox.panel .panel-title h5, .panel .panel-heading h5{
    font-size:15px;
    margin:  2px 0;
}
a.navbar-brand > img {
    margin-top: 0;
    height: 30px;
}
.ibox-content svg, .ibox svg {
    display: inline-block;
}
.navigation.navigation-computers {
    padding: 0px;
}
.filter-logo{
    background-size: auto 56px !important;
}
.overauto {
    overflow: auto;
    height: 100%;
}

.wrap {
    min-height: 100%;
    height: auto;
    margin: 0 auto -60px;
    padding: 0 0 60px;
}
.wrap > .container-fluid {
    padding: 50px 15px 20px 0;
}
footer {
    height: 60px;
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
    padding-top: 20px;
}
.main-content-inner {
    width: 100%;
}
.online {
    color: green;
}
.container-dashboard {
    min-height: 100%;
}

.breadcrumb-line {
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #ddd !important;
    background-color: #FFFFFF !important;
    margin: 0 15px 20px;
}
.breadcrumbs {
    margin: 0 0 10px 0;
    padding: 8px 15px;
    background-color: #f5f5f5;
    border-radius: 4px;
    position: relative;
}
.breadcrumbs ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.breadcrumbs ul > li {
    display: inline-block;
}
.breadcrumbs ul > li + li:before {
    content: "/\00a0";
    padding: 0 5px;
    color: #cccccc;
}
.breadcrumbs ul > .active {
    color: #999999;
}
.fixed .breadcrumbs {
    display: inline-block;
    margin: 0 15px 0 0;
    padding: 5px 10px;
}
.jumbotron {
    text-align: center;
    background-color: transparent;
    padding-top: 20px;
    padding-bottom: 20px;
}

.nav-filter ul {
    margin: 0;
    padding: 0;
    list-style: none;
    -webkit-transition: all linear 0.1s;
    transition: all linear 0.1s;
    /*max-height: 300px;*/
    opacity: 1;
}
.nav-filter ul.ng-hide-add, .nav-filter ul.ng-hide-remove {
    display: block!important;
}
.nav-filter ul.ng-hide {
    -webkit-transition: all linear 0.2s;
    transition: all linear 0.3s;
    opacity: 0;
}
.nav-filter ul a {
    background-color: #555;
}
.nav-filter ul ul li a {
    margin-left: -5px;
    padding-left: 30px;
}
.nav-filter ul ul ul li a {
    margin-left: -5px;
    padding-left: 50px;
    background-color: rgb(45,50,62);
}
.nav-filter li a {
    color: #ffffff;
    text-shadow: 0 0 1px #000000;
    margin: 0 -5px;
    background-color: rgb(45,50,62);
    border-bottom: 1px solid rgb(92,97,111);
    cursor: pointer;
    padding: 5px 15px;
    display: block;
}
.nav-filter i:not(.icon-event-info) {
    margin-right: 10px;
}
.nav-filter li a:hover {
    text-shadow: none;
    background: rgba(0,0,0,.1);
}
.nav-filter li a.active {
    background: rgb(92,97,111);
}
.nav-filter li a.active:hover {
    background-color: rgb(92,97,111) !important;
}
.nav-filter li a.access-no {
    color: #c41731;
}

/*----------------------------------------*/
.nav-filter .icon-event-info {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -moz-osx-font-smoothing: grayscale;
}
.nav-filter .collapsing {
    height: auto;
}
.nav-filter .collapsing .icon-event-info:before, .nav-filter .not-collapsed .icon-event-info:before {
    content: "\e114";
}
.nav-filter .collapsing.collapsed .icon-event-info:before, .nav-filter .collapsed .icon-event-info:before {
    content: "\e113";
}
.nav-filter .collapsing.active .icon-event-info:before, .nav-filter .active .icon-event-info:before {
    content: "\e080";
}
.event-list .event-item {
    padding: 5px 0;
    border-bottom: 1px solid #dddddd;
    position: relative;
    font-size: 10pt;
    color: #000;
}
.event-list .event-item a {
    color: #2B587A;
}
.event-list .event-item .event-value {
    color: #000000;
}
.event-list .event-item .event-value .control-key {
    color: #999;
}
.event-list .event-item .event-value .control-key {
    color: #999;
    font-weight: normal;
}
.event-list .event-item .event-value .empty-row {
    height: 20px;
}
.event-list .event-item .event-value .event-action {
    position: absolute;
    bottom: 10px;
    left: 0;
}
.event-list .event-item .event-value .event-action a {
    color: #999;
    border: 1px solid #ddd;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    font-size: 0.75em;
    padding: .1em .3em .1em;
    margin: 0 .1em;
}
.event-list .event-item .event-value .event-action a.active {
    color: #428bca;
    text-decoration: underline;
}
.event-list .event-item .event-value .event-action .label {
    padding: .1em .3em .1em;
}
.event-list .event-item .event-value:hover {
    text-decoration: underline;
    cursor: pointer;
}
.event-list .event-item .event-name {
    color: #999;
}
.event-list .event-item .event-toolbar {
    font-size: 10pt;
}
.event-list .event-item .event-toolbar .event-requested {
    color: #FFF;
    background-color: #5cb85c;
    padding: 0px 8px;
    border-radius: 2px;
    cursor: default;
}
.event-list .event-item .event-toolbar .event-requested:hover {
    text-decoration: initial;
}
.event-list .event-item .event-time {
    color: #999;
    font-size: 11px;
}
.event-list .event-item .event-action-delim {
    color: #2B587A;
}
.event-list .event-item .event-info {
    float: right;
    font-size: 0.9em;
    color: #999;
    text-align: right;
    max-width: 50%;
}
.event-list .event-item .event-preview {
    max-width: 120px;
    max-height: 100px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.event-list .event-item .event-preview img {
    max-width: 100%;
    max-height: 100%;
}
.event-list .event-item .event-preview i {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -0.5em;
    margin-top: -0.5em;
    font-size: 3em;
    opacity: 0.5;
}
.event-list .event-item .event-btn-play {
    padding: 1px 4px;
    border: 1px solid #999;
    border-radius: 2px;
    cursor: pointer;
}
.event-list .event-item.event-alert {
    background-color: #fffff0;
}
.event-list .event-item.event-blocking {
    background-color: #fff0f0;
}
.event-list .event-item:hover {
    background-color: #fcfcfc;
}
.event-list .event-item:hover .event-action a {
    border-color: #428bca;
    color: #428bca;
}
.event-list .event-item:hover .event-action a.active {
    background-color: #FFF;
    color: #428bca;
}
.event-list .event-message-received .event-sender {
    color: #428bca;
}
.event-list .event-message .event-sender {
    float: left;
    width: 150px;
    text-align: right;
    font-weight: bold;
    padding-right: 10px;
    overflow: hidden;
}
.event-list .event-message .event-text {
    margin-left: 160px;
}
.event-list .event-message .event-time {
    float: right;
}
.event-list .event-filter-users {
    width: 150px;
    float: left;
}
.event-list .event-messages {
    margin-left: 160px;
    border-left: 1px solid #dddddd;
    padding-left: 10px;
    overflow: hidden;
}
.event-list .event-filter-user {
    cursor: pointer;
    padding: 2px 5px;
}
.event-list .event-filter-user:hover {
    background-color: #eeeeee;
}
.event-list .event-filter-user.active {
    background-color: #dddddd;
}
.event-list .event-sms {
    font-style: italic;
    background-color: #eeeeee;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    display: inline-block;
    padding: 0 10px;
}
.event-list .expand-arrow {
    left: 50px !important;
}
.header-float.fixed {
    position: fixed;
    margin: 0;
    z-index: 10;
    top: 0;
    margin-top: 52px;
    right: 8px;
}
.header-float.fixed > div {
    background-color: #eeeeee;
    height: 70px;
}
@-moz-document url-prefix() {
    .header-float.fixed {
        right: 16px;
    }
}
.header-float-replacement {
    display: none;
}
.header-float .btn-header-right:hover {
    color: #000000;
}
.header-float.fixed .header-float-show {
    display: block;
    border: 1px solid;
}
.header-float.fixed .header-float-hide {
    display: none;
}
.icon-loading {
    background: url(../images/loading.16x16.gif) 0 0 no-repeat;
    width: 20px;
    height: 16px;
    vertical-align: middle;
    display: inline-block;
}
.icon-event {
    width: 16px;
    height: 16px;
    display: inline-block;
    background: url("../images/events.png") no-repeat;
}

.scheduler-event .event-datetime div {
    max-width: 270px;
}
.scheduler-event .event-action div {
    max-width: 270px;
}
.scheduler-event .event-duration div {
    max-width: 270px;
}
.scheduler-event .event-date {
    display: inline;
    margin-right: -3px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    width: 59%;
}
.scheduler-event .event-time {
    display: inline;
    margin-left: -2px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    width: 39%;
}
.fc-event {
    height: 22px;
    font-size: 1em;
}
.fc-event-time .icon-event {
    padding-right: 2px;
}
.fc-event-title {
    font-size: 1em;
    line-height: 22px;
}
.fc-event-title.hidden-xs {
    display: inline !important;
}
@media (max-width: 767px) {
    .fc-event-title.hidden-xs {
        display: none !important;
    }
}
.timepicker.dropdown-menu {
    padding: 0 4px;
}
.timepicker.dropdown-menu button {
    outline: none;
    border: 0px;
}
.timepicker.dropdown-menu tbody button {
    padding: 6px;
}
.top-block {
    border-bottom: 1px solid #000000;
    padding: 10px;
    background-color: #c41731;
    color: #FFFFFF;
    position: relative;
}
.top-block h4 {
    color: #FFF;
    font-size: 1.4em;
    padding-right: 20px;
    display: inline;
}
.top-block a {
    color: #FFF;
    text-decoration: underline;
}
.top-block .form-control {
    display: inline-block;
    width: auto;
}
.top-block button {
    font-weight: bold;
}
.top-block .top-block-close {
    position: absolute;
    top: 0px;
    right: 0px;
    color: #FFFFFF;
    font-size: 2em;
    cursor: pointer;
    width: 40px;
    height: 40px;
    text-align: center;
}
.animate.ng-enter {
    -webkit-transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s;
    -moz-transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s;
    -o-transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s;
    transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s;
}
.animate.ng-leave {
    -webkit-transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s;
    -moz-transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s;
    -o-transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s;
    transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s;
}
.animate.ng-enter {
    position: absolute;
    background-color: #FFFFFF;
    width: 100%;
    z-index: 102;
    left: -100%;
    opacity: 0;
}
.animate.ng-enter-active {
    left: 0;
    opacity: 1;
}
.animate.ng-leave {
    position: absolute;
    background-color: #FFFFFF;
    width: 100%;
    z-index: 101;
    opacity: 1;
    right: 0;
}
.animate.ng-leave-active {
    opacity: 0;
    right: -100%;
}
.axis path, .axis line, .item path {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}
.axis text {
    font-family: sans-serif;
    font-size: 11px;
}
.brush .extent {
    stroke: #000;
    fill-opacity: .125;
    shape-rendering: crispEdges;
}
.crart-clip {
    clip-path: url(#clip);
}
.device-info {
    width: 30%;
    float: left;
    margin: 0 1%;
    background-color: #FFFFFF;
}
.device-user:after {
    content: ", ";
}
.device-user:last-child:after {
    content: "";
}
.device-user-online {
    color: green;
}
.device-user-noactive {
    color: gray;
}
.device-name b {
    font-size: 2em;
    font-weight: normal;
}
.activity-day {
    text-align: center;
}
.activity-day b {
    font-size: 1.2em;
}
.activity-value {
    background-color: #fbf9ed;
    border-radius: 5px;
    border: 1px solid #e3e3e3;
    display: inline-block;
    text-align: center;
    padding: 3px 10px;
    margin-top: 5px;
}
.ibox-device-info .ibox {
    border: 4px solid #e7eaec;
    border-width: 0 4px 4px;
}
.ibox-stat .ibox-content {
    text-align: center;
}
.ibox-words text.value {
    font-weight: bold;
}
.ibox-content table {
    background-color: #FFFFFF;
}
.ibox-content tr.header:hover {
    background-color: #FFFFFF;
}
.ibox-content tr.data {
    cursor: pointer;
}
.state-chart {
    display: inline-block;
}
@media (min-width: 1344px) {
    .ibox-device-info {
        display: block !important;
    }
}
.device-info-popover {
    display: inline-block;
    color: #337ab7;
}
.ibox-device-info {
    display: none;
}
.media-item {
    margin: 8px 8px 0 0;
    width: 240px;
    height: 180px;
    text-align: center;
    position: relative;
    border: 4px solid #e7eaec;
    padding: 2px 2px 22px 2px;
    float: left;
    cursor: pointer;
    overflow: hidden;
}
.media-item:hover {
    border-color: #a4a7a9;
}
.media-play {
    background: url(../images/play.png) center center no-repeat;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: 50px;
    margin-left: -16px;
    width: 32px;
    height: 32px;
    opacity: 0.8;
}
.media-action {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    padding: 2px 10px 3px;
    border-bottom: 1px solid #a4a7a9;
    background-color: #FFFFFF;
    text-align: right;
}
.media-action .event-request {
    font-size: 0.8em;
    border: 1px solid #ddd;
    border-radius: 2px;
    padding: 0.1em 0.3em;
    color: #999;
}
.media-action .event-request:hover {
    border-color: #428bca;
    color: #428bca;
}
.media-not-loaded {
    font-size: 2.5em;
    text-align: center;
    padding-top: 30px;
    color: #cccccc;
}
.media-info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0px;
    max-height: 20px;
    overflow: hidden;
    font-size: 0.8em;
    text-align: left;
    padding: 2px 10px;
    border-top: 1px solid #a4a7a9;
    background-color: #FFFFFF;
    transition: all ease-out 0.5s;
}
.media-title {
    font-weight: bold;
    color: #000000;
}
.media-app {
    font-style: italic;
}
.media-item:hover .media-info {
    max-height: 100%;
}
.media-item img {
    max-width: 100%;
    max-height: 100% !important;
}
.media-list {
    font-size: 10pt;
}
.media-not-loaded {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}
.media-loaded {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #FFFFFF;
    z-index: 2;
}
.media-action {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
    padding: 0;
}
.media-action a {
    padding: 0px 8px;
}
.media-action a.event-requested {
    color: #FFF;
    background-color: #5cb85c;
    cursor: default;
}
.media-action a.event-requested:hover {
    text-decoration: initial;
}
.media-info {
    z-index: 4;
}
.expand-list {
    position: relative;
}
.expand-opened {
    position: absolute;
    background-color: #000000;
    width: 100%;
    height: 0;
    display: none;
}
.expand-opened.expand-show {
    height: auto;
    display: block;
}
.expand-opened-inner {
    padding: 10px;
    text-align: center;
    overflow: hidden;
}
.expand-opened img {
    max-width: 100%;
}
.expand-opened-title {
    text-align: left;
    font-weight: bold;
    color: #FFFFFF;
}
.expand-app {
    text-align: left;
    color: #FFFFFF;
}
.expand-property {
    text-align: left;
    color: #FFFFFF;
}
.expand-arrow {
    position: absolute;
    left: 50%;
    margin-left: -20px;
    margin-top: -20px;
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid black;
}
.expand-close {
    position: absolute;
    top: 0px;
    right: 0px;
    color: #FFFFFF;
    font-size: 2em;
    cursor: pointer;
    width: 40px;
    height: 40px;
    text-align: center;
}
.animating {
    transition: all 0.2s ease-in;
}
.event-expand.animating {
    overflow: hidden;
}
.expand-item-fix {
    margin-bottom: 0 !important;
}
.expand-action {
    text-align: left;
}
.axis path, .axis line {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}
.axis text {
    font-family: sans-serif;
    font-size: 11px;
}
.dot {
    stroke: #000;
}
.legend-box {
    display: inline-block;
    overflow: hidden;
}
.legend-box-scroll {
    height: 100%;
    display: inline-block;
    border: 1px solid #999999;
    position: relative;
}
.legend-box .title {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 1.4em;
    margin-top: -1em;
    white-space: nowrap;
}
.legend {
    padding: 15px 25px 15px 15px;
    font: 10px sans-serif;
    list-style: none;
    height: 100%;
    overflow: auto;
    overflow-x: hidden;
}
.legend td {
    padding: 0 5px;
    white-space: nowrap;
}
.show-all {
    cursor: pointer;
    text-decoration: underline;
    text-align: center;
}
.serie rect {
    stroke: white;
}
.serie rect:hover {
    opacity: 0.9;
}
.pie-chart path {
    stroke: #fff;
}
.pie-chart path:hover {
    opacity: 0.9;
}

html.push-navbar-active {
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    margin: 0;
    padding: 0;
}
.push-navbar-body {
    overflow-x: hidden;
    position: relative;
    margin: 0 50px 0 0;
    transition: 0.2s ease;
    min-height: 100%;
    padding: 0;
    -webkit-transform: translateX(50px);
    transform: translateX(50px);
}
.push-navbar-body.push-navbar-toggled {
    -webkit-transform: translateX(315px);
    transform: translateX(315px);
    margin: 0 315px 0 0;
}
.push-navbar-toggled-show {
    display: none;
}
.push-navbar-toggled .push-navbar-toggled-show {
    display: block;
}
nav.push-navbar {
    transition: 0.2s ease;
    position: absolute;
    width: 315px;
    top: 0;
    left: -315px;
    min-height: 100%;
    border-radius: 0;
    margin: 0;
    z-index: 1000;
    padding: 5px;
}
.push-navbar-toggle {
    position: absolute;
    padding: 5px;
    right: 5px;
    top: 5px;
    font-size: 2em;
    color: #fff;
    cursor: pointer;
}
.push-navbar-toggled .push-navbar-toggle {
    color: #9d9d9d;
    right: 0px;
}
.navbar-filter {
    background-color: rgb(45,50,62);
}
.navbar-inverse.navbar .navbar-nav > .active > a{
    background: rgba(0,0,0,.1);
}
.navbar-filter {
    color: #FFF;
}
.navbar-filter a {
    color: #FFF;
}
nav.navbar-filter {
    height: 100%;
    overflow-y: hidden;
}
.push-navbar-toggled nav.navbar-filter {
    overflow-y: scroll;
}
.push-navbar-body .wrap-container {
    height: 100%;
    overflow-y: scroll;
}
.loading-container {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}
.loading-container .overlay {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: #000;
    /* IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
    /* Safari 1.x */
    -khtml-opacity: 0.2;
    opacity: 0.2;
    z-index: 1001;
}
.loading-container .message i {
    background: url(../images/loading.16x16.gif) no-repeat 0 0;
    display: inline-block;
    width: 16px;
    height: 16px;
}
.loading-container .message {
    position: absolute;
    left: 50%;
    top: 0;
    background-color: #FFF;
    color: #000;
    width: 160px;
    margin-left: -80px;
    z-index: 1002;
    text-align: center;
    padding: 5px 20px;
    border-radius: 0 0 5px 5px;
    font-size: 1.4em;
}
.push-navbar-body .loading-container {
    left: -50px;
}
.push-navbar-body.push-navbar-toggled .loading-container {
    left: -315px;
}
.notices-block {
    margin-top: -20px;
    margin-bottom: 20px;
}
.notices-block .notice {
    border-bottom: 1px solid #000000;
    padding: 10px;
    background-color: #f5f5f5;
    color: #000000;
    position: relative;
}
.notices-block .notice-warning {
    background-color: #c41731;
    color: #FFFFFF;
}
.notices-block .notice-inner {
    margin: 0 auto;
    width: 1170px;
}
.push-navbar-body .notices-block .notice-inner {
    width: auto;
}
.notices-block .notice .form-control {
    display: inline-block;
    width: auto;
}
.notices-block .notice h4 {
    display: inline-block;
}
.notices-block .notice input[type=submit] {
    font-weight: bold;
}
.notices-block .notice .register-computer form {
    display: inline-block;
}
.notices-block .notice-close:before {
    content: '×';
}
.notices-block .notice-close {
    position: absolute;
    top: 0px;
    right: 10px;
    color: #FFFFFF;
    font-size: 2em;
    cursor: pointer;
    width: 20px;
    height: 20px;
    text-align: center;
}
.top-filter-block {
    border-bottom: 1px solid #dddddd;
    padding-bottom: 10px;
    margin-bottom: 10px;
    background: #FFFFFF;
}
.top-filter-block .filter-input {
    margin: 5px 3px 5px 3px;
    display: inline-block;
}
.top-filter-block .filter-input select,
.top-filter-block .filter-input input[type="text"] {
    padding: 2px 5px;
    color: #000000;
    width: 100px;
    display: inline-block;
}
.top-filter-block .filter-input select {
    width: auto;
}
.top-filter-block .filter-input input[type="text"] {
    width: 95px;
}
.fixed.top-filter-block {
    background-color: #dddddd;
}
.ibox-device .device-actions {
    padding-bottom: 10px;
}
.ibox .form-group {
    margin-bottom: 5px;
}
.ibox .checkbox {
    margin-top: 5px;
    margin-bottom: 5px;
}
.input-group-with-text .input-group-addon {
    border: 0px;
    background: none;
}
.input-group-with-text.input-group .form-control {
    border-radius: 3px !important;
}
.settings-actions {
    background-color: #FFFFFF;
    border-top: 1px solid #cccccc;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    padding: 10px 20px;
    box-sizing: border-box;
}
.settings-container {
    padding-bottom: 80px !important;
}
input.changed-settings {
    font-weight: bold;
}
.changed-settings {
    color: green;
}
.changed-settings-info {
    color: green;
    font-weight: bold;
}
.flag {
    display: inline-block;
    width: 16px;
    height: 11px;
    background: url(../images/flags.png) no-repeat;
}
.flag.flag-ad {
    background-position: -16px 0;
}
.flag.flag-ae {
    background-position: -32px 0;
}
.flag.flag-af {
    background-position: -48px 0;
}
.flag.flag-ag {
    background-position: -64px 0;
}
.flag.flag-ai {
    background-position: -80px 0;
}
.flag.flag-al {
    background-position: -96px 0;
}
.flag.flag-am {
    background-position: -112px 0;
}
.flag.flag-an {
    background-position: -128px 0;
}
.flag.flag-ao {
    background-position: -144px 0;
}
.flag.flag-ar {
    background-position: -160px 0;
}
.flag.flag-as {
    background-position: -176px 0;
}
.flag.flag-at {
    background-position: -192px 0;
}
.flag.flag-au {
    background-position: -208px 0;
}
.flag.flag-aw {
    background-position: -224px 0;
}
.flag.flag-az {
    background-position: -240px 0;
}
.flag.flag-ba {
    background-position: 0 -11px;
}
.flag.flag-bb {
    background-position: -16px -11px;
}
.flag.flag-bd {
    background-position: -32px -11px;
}
.flag.flag-be {
    background-position: -48px -11px;
}
.flag.flag-bf {
    background-position: -64px -11px;
}
.flag.flag-bg {
    background-position: -80px -11px;
}
.flag.flag-bh {
    background-position: -96px -11px;
}
.flag.flag-bi {
    background-position: -112px -11px;
}
.flag.flag-bj {
    background-position: -128px -11px;
}
.flag.flag-bm {
    background-position: -144px -11px;
}
.flag.flag-bn {
    background-position: -160px -11px;
}
.flag.flag-bo {
    background-position: -176px -11px;
}
.flag.flag-br {
    background-position: -192px -11px;
}
.flag.flag-bs {
    background-position: -208px -11px;
}
.flag.flag-bt {
    background-position: -224px -11px;
}
.flag.flag-bv {
    background-position: -240px -11px;
}
.flag.flag-bw {
    background-position: 0 -22px;
}
.flag.flag-by {
    background-position: -16px -22px;
}
.flag.flag-bz {
    background-position: -32px -22px;
}
.flag.flag-ca {
    background-position: -48px -22px;
}
.flag.flag-catalonia {
    background-position: -64px -22px;
}
.flag.flag-cd {
    background-position: -80px -22px;
}
.flag.flag-cf {
    background-position: -96px -22px;
}
.flag.flag-cg {
    background-position: -112px -22px;
}
.flag.flag-ch {
    background-position: -128px -22px;
}
.flag.flag-ci {
    background-position: -144px -22px;
}
.flag.flag-ck {
    background-position: -160px -22px;
}
.flag.flag-cl {
    background-position: -176px -22px;
}
.flag.flag-cm {
    background-position: -192px -22px;
}
.flag.flag-cn {
    background-position: -208px -22px;
}
.flag.flag-co {
    background-position: -224px -22px;
}
.flag.flag-cr {
    background-position: -240px -22px;
}
.flag.flag-cu {
    background-position: 0 -33px;
}
.flag.flag-cv {
    background-position: -16px -33px;
}
.flag.flag-cw {
    background-position: -32px -33px;
}
.flag.flag-cy {
    background-position: -48px -33px;
}
.flag.flag-cz {
    background-position: -64px -33px;
}
.flag.flag-de {
    background-position: -80px -33px;
}
.flag.flag-dj {
    background-position: -96px -33px;
}
.flag.flag-dk {
    background-position: -112px -33px;
}
.flag.flag-dm {
    background-position: -128px -33px;
}
.flag.flag-do {
    background-position: -144px -33px;
}
.flag.flag-dz {
    background-position: -160px -33px;
}
.flag.flag-ec {
    background-position: -176px -33px;
}
.flag.flag-ee {
    background-position: -192px -33px;
}
.flag.flag-eg {
    background-position: -208px -33px;
}
.flag.flag-eh {
    background-position: -224px -33px;
}
.flag.flag-en {
    background-position: -160px -154px;
}
.flag.flag-er {
    background-position: 0 -44px;
}
.flag.flag-es {
    background-position: -16px -44px;
}
.flag.flag-et {
    background-position: -32px -44px;
}
.flag.flag-eu {
    background-position: -48px -44px;
}
.flag.flag-fi {
    background-position: -64px -44px;
}
.flag.flag-fj {
    background-position: -80px -44px;
}
.flag.flag-fk {
    background-position: -96px -44px;
}
.flag.flag-fm {
    background-position: -112px -44px;
}
.flag.flag-fo {
    background-position: -128px -44px;
}
.flag.flag-fr {
    background-position: -144px -44px;
}
.flag.flag-ga {
    background-position: -160px -44px;
}
.flag.flag-gb {
    background-position: -176px -44px;
}
.flag.flag-gd {
    background-position: -192px -44px;
}
.flag.flag-ge {
    background-position: -208px -44px;
}
.flag.flag-gf {
    background-position: -224px -44px;
}
.flag.flag-gg {
    background-position: -240px -44px;
}
.flag.flag-gh {
    background-position: 0 -55px;
}
.flag.flag-gi {
    background-position: -16px -55px;
}
.flag.flag-gl {
    background-position: -32px -55px;
}
.flag.flag-gm {
    background-position: -48px -55px;
}
.flag.flag-gn {
    background-position: -64px -55px;
}
.flag.flag-gp {
    background-position: -80px -55px;
}
.flag.flag-gq {
    background-position: -96px -55px;
}
.flag.flag-gr {
    background-position: -112px -55px;
}
.flag.flag-gs {
    background-position: -128px -55px;
}
.flag.flag-gt {
    background-position: -144px -55px;
}
.flag.flag-gu {
    background-position: -160px -55px;
}
.flag.flag-gw {
    background-position: -176px -55px;
}
.flag.flag-gy {
    background-position: -192px -55px;
}
.flag.flag-hk {
    background-position: -208px -55px;
}
.flag.flag-hm {
    background-position: -224px -55px;
}
.flag.flag-hn {
    background-position: -240px -55px;
}
.flag.flag-hr {
    background-position: 0 -66px;
}
.flag.flag-ht {
    background-position: -16px -66px;
}
.flag.flag-hu {
    background-position: -32px -66px;
}
.flag.flag-ic {
    background-position: -48px -66px;
}
.flag.flag-id {
    background-position: -64px -66px;
}
.flag.flag-ie {
    background-position: -80px -66px;
}
.flag.flag-il {
    background-position: -96px -66px;
}
.flag.flag-im {
    background-position: -112px -66px;
}
.flag.flag-in {
    background-position: -128px -66px;
}
.flag.flag-io {
    background-position: -144px -66px;
}
.flag.flag-iq {
    background-position: -160px -66px;
}
.flag.flag-ir {
    background-position: -176px -66px;
}
.flag.flag-is {
    background-position: -192px -66px;
}
.flag.flag-it {
    background-position: -208px -66px;
}
.flag.flag-je {
    background-position: -224px -66px;
}
.flag.flag-jm {
    background-position: -240px -66px;
}
.flag.flag-jo {
    background-position: 0 -77px;
}
.flag.flag-jp {
    background-position: -16px -77px;
}
.flag.flag-ke {
    background-position: -32px -77px;
}
.flag.flag-kg {
    background-position: -48px -77px;
}
.flag.flag-kh {
    background-position: -64px -77px;
}
.flag.flag-ki {
    background-position: -80px -77px;
}
.flag.flag-km {
    background-position: -96px -77px;
}
.flag.flag-kn {
    background-position: -112px -77px;
}
.flag.flag-ko {
    background-position: -144px -77px;
}
.flag.flag-kp {
    background-position: -128px -77px;
}
.flag.flag-kr {
    background-position: -144px -77px;
}
.flag.flag-kurdistan {
    background-position: -160px -77px;
}
.flag.flag-kw {
    background-position: -176px -77px;
}
.flag.flag-ky {
    background-position: -192px -77px;
}
.flag.flag-kz {
    background-position: -208px -77px;
}
.flag.flag-la {
    background-position: -224px -77px;
}
.flag.flag-lb {
    background-position: -240px -77px;
}
.flag.flag-lc {
    background-position: 0 -88px;
}
.flag.flag-li {
    background-position: -16px -88px;
}
.flag.flag-lk {
    background-position: -32px -88px;
}
.flag.flag-lr {
    background-position: -48px -88px;
}
.flag.flag-ls {
    background-position: -64px -88px;
}
.flag.flag-lt {
    background-position: -80px -88px;
}
.flag.flag-lu {
    background-position: -96px -88px;
}
.flag.flag-lv {
    background-position: -112px -88px;
}
.flag.flag-ly {
    background-position: -128px -88px;
}
.flag.flag-ma {
    background-position: -144px -88px;
}
.flag.flag-mc {
    background-position: -160px -88px;
}
.flag.flag-md {
    background-position: -176px -88px;
}
.flag.flag-me {
    background-position: -192px -88px;
}
.flag.flag-mg {
    background-position: -208px -88px;
}
.flag.flag-mh {
    background-position: -224px -88px;
}
.flag.flag-mk {
    background-position: -240px -88px;
}
.flag.flag-ml {
    background-position: 0 -99px;
}
.flag.flag-mm {
    background-position: -16px -99px;
}
.flag.flag-mn {
    background-position: -32px -99px;
}
.flag.flag-mo {
    background-position: -48px -99px;
}
.flag.flag-mp {
    background-position: -64px -99px;
}
.flag.flag-mq {
    background-position: -80px -99px;
}
.flag.flag-mr {
    background-position: -96px -99px;
}
.flag.flag-ms {
    background-position: -112px -99px;
}
.flag.flag-mt {
    background-position: -128px -99px;
}
.flag.flag-mu {
    background-position: -144px -99px;
}
.flag.flag-mv {
    background-position: -160px -99px;
}
.flag.flag-mw {
    background-position: -176px -99px;
}
.flag.flag-mx {
    background-position: -192px -99px;
}
.flag.flag-my {
    background-position: -208px -99px;
}
.flag.flag-mz {
    background-position: -224px -99px;
}
.flag.flag-na {
    background-position: -240px -99px;
}
.flag.flag-nc {
    background-position: 0 -110px;
}
.flag.flag-ne {
    background-position: -16px -110px;
}
.flag.flag-nf {
    background-position: -32px -110px;
}
.flag.flag-ng {
    background-position: -48px -110px;
}
.flag.flag-ni {
    background-position: -64px -110px;
}
.flag.flag-nl {
    background-position: -80px -110px;
}
.flag.flag-no {
    background-position: -96px -110px;
}
.flag.flag-np {
    background-position: -112px -110px;
}
.flag.flag-nr {
    background-position: -128px -110px;
}
.flag.flag-nu {
    background-position: -144px -110px;
}
.flag.flag-nz {
    background-position: -160px -110px;
}
.flag.flag-om {
    background-position: -176px -110px;
}
.flag.flag-pa {
    background-position: -192px -110px;
}
.flag.flag-pe {
    background-position: -208px -110px;
}
.flag.flag-pf {
    background-position: -224px -110px;
}
.flag.flag-pg {
    background-position: -240px -110px;
}
.flag.flag-ph {
    background-position: 0 -121px;
}
.flag.flag-pk {
    background-position: -16px -121px;
}
.flag.flag-pl {
    background-position: -32px -121px;
}
.flag.flag-pm {
    background-position: -48px -121px;
}
.flag.flag-pn {
    background-position: -64px -121px;
}
.flag.flag-pr {
    background-position: -80px -121px;
}
.flag.flag-ps {
    background-position: -96px -121px;
}
.flag.flag-pt {
    background-position: -112px -121px;
}
.flag.flag-pw {
    background-position: -128px -121px;
}
.flag.flag-py {
    background-position: -144px -121px;
}
.flag.flag-qa {
    background-position: -160px -121px;
}
.flag.flag-re {
    background-position: -176px -121px;
}
.flag.flag-ro {
    background-position: -192px -121px;
}
.flag.flag-rs {
    background-position: -208px -121px;
}
.flag.flag-ru {
    background-position: -224px -121px;
}
.flag.flag-rw {
    background-position: -240px -121px;
}
.flag.flag-sa {
    background-position: 0 -132px;
}
.flag.flag-sb {
    background-position: -16px -132px;
}
.flag.flag-sc {
    background-position: -32px -132px;
}
.flag.flag-scotland {
    background-position: -48px -132px;
}
.flag.flag-sd {
    background-position: -64px -132px;
}
.flag.flag-se {
    background-position: -80px -132px;
}
.flag.flag-sg {
    background-position: -96px -132px;
}
.flag.flag-sh {
    background-position: -112px -132px;
}
.flag.flag-si {
    background-position: -128px -132px;
}
.flag.flag-sk {
    background-position: -144px -132px;
}
.flag.flag-sl {
    background-position: -160px -132px;
}
.flag.flag-sm {
    background-position: -176px -132px;
}
.flag.flag-sn {
    background-position: -192px -132px;
}
.flag.flag-so {
    background-position: -208px -132px;
}
.flag.flag-somaliland {
    background-position: -224px -132px;
}
.flag.flag-sr {
    background-position: -240px -132px;
}
.flag.flag-ss {
    background-position: 0 -143px;
}
.flag.flag-st {
    background-position: -16px -143px;
}
.flag.flag-sv {
    background-position: -32px -143px;
}
.flag.flag-sx {
    background-position: -48px -143px;
}
.flag.flag-sy {
    background-position: -64px -143px;
}
.flag.flag-sz {
    background-position: -80px -143px;
}
.flag.flag-tc {
    background-position: -96px -143px;
}
.flag.flag-td {
    background-position: -112px -143px;
}
.flag.flag-tf {
    background-position: -128px -143px;
}
.flag.flag-tg {
    background-position: -144px -143px;
}
.flag.flag-th {
    background-position: -160px -143px;
}
.flag.flag-tibet {
    background-position: -176px -143px;
}
.flag.flag-tj {
    background-position: -192px -143px;
}
.flag.flag-tk {
    background-position: -208px -143px;
}
.flag.flag-tl {
    background-position: -224px -143px;
}
.flag.flag-tm {
    background-position: -240px -143px;
}
.flag.flag-tn {
    background-position: 0 -154px;
}
.flag.flag-to {
    background-position: -16px -154px;
}
.flag.flag-tr {
    background-position: -32px -154px;
}
.flag.flag-tt {
    background-position: -48px -154px;
}
.flag.flag-tv {
    background-position: -64px -154px;
}
.flag.flag-tw {
    background-position: -80px -154px;
}
.flag.flag-tz {
    background-position: -96px -154px;
}
.flag.flag-ua {
    background-position: -112px -154px;
}
.flag.flag-ug {
    background-position: -128px -154px;
}
.flag.flag-um {
    background-position: -144px -154px;
}
.flag.flag-us {
    background-position: -160px -154px;
}
.flag.flag-uy {
    background-position: -176px -154px;
}
.flag.flag-uz {
    background-position: -192px -154px;
}
.flag.flag-va {
    background-position: -208px -154px;
}
.flag.flag-vc {
    background-position: -224px -154px;
}
.flag.flag-ve {
    background-position: -240px -154px;
}
.flag.flag-vg {
    background-position: 0 -165px;
}
.flag.flag-vi {
    background-position: -16px -165px;
}
.flag.flag-vn {
    background-position: -32px -165px;
}
.flag.flag-vu {
    background-position: -48px -165px;
}
.flag.flag-wales {
    background-position: -64px -165px;
}
.flag.flag-wf {
    background-position: -80px -165px;
}
.flag.flag-ws {
    background-position: -96px -165px;
}
.flag.flag-xk {
    background-position: -112px -165px;
}
.flag.flag-ye {
    background-position: -128px -165px;
}
.flag.flag-yt {
    background-position: -144px -165px;
}
.flag.flag-za {
    background-position: -160px -165px;
}
.flag.flag-zanzibar {
    background-position: -176px -165px;
}
.flag.flag-zm {
    background-position: -192px -165px;
}
.flag.flag-zw {
    background-position: -208px -165px;
}

.live-box {
    background: #000;
    color: #FFF;
    font-size: 1.2em;
}
.live-title {
    padding: 5px 10px;
}
.live-info {
    padding: 5px 10px;
}
.live-view {
    position: relative;
    min-height: 200px;
}
.live-view img, .live-video video {
    max-width: 100%;
    display: block;
    margin: 0 auto;
}
.live-view-info {
    position: absolute;
    right: 0;
    top: 0;
    color: #FFF;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.5);
}
.live-view-blank {
    font-size: 1.6em;
    text-align: center;
}
.live-control {
    padding: 10px;
    text-align: center;
}
.live-control button {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
}
.live-recording,
.live-recording:focus {
    color: red;
}
.computer-live h4 {
    text-align: center;
}
.computer-live-screen {
    position: relative;
    background: #ccc;
    border: 1px solid #888;
    border-radius: 3px 3px 0 0;
    cursor: pointer;
}
.computer-live-screen:before {
    content: "";
    display: block;
    padding-top: 56.25%;
}
.computer-live-screen-camera {
    position: absolute;
    top: 1%;
    right: 48.225%;
    width: 1.875%;
    height: 3%;
    border-radius: 50%;
    border: 2px solid #333;
    background: #666;
    z-index: 10;
}
.computer-live-screen-inner {
    position: absolute;
    top: 5%;
    left: 2%;
    bottom: 3%;
    right: 2%;
    background: #000;
    text-align: center;
    overflow: hidden;
}
.computer-live-screen img {
    max-width: 100%;
    max-height: 100%;
    height: -webkit-fill-available;
}
.computer-live-online h4 {
    color: #393;
}
.computer-live h4 small {
    display: block;
    word-wrap: normal;
    white-space: nowrap;
    font-size: 0.6em;
    overflow: hidden;
}
.computer-live-control {
    margin-top: 6px;
    padding-top: 6px;
    padding-bottom: 6px;
    margin-bottom: 6px;
}
.computer-live-off {
    position: absolute;
    right: 5px;
    top: 0;
    text-align: center;
    color: #fff;
}
.computer-live-off b {
    font-size: 2em;
}
.computer-live-off p {
    font-size: 0.75em;
    color: #999;
}
.breadcrumbs-control {
    float: right;
    padding: 5px;
}
.computer-live-control .btn span {
    display: none;
}
.live-view-4x .computer-live-control .btn span {
    display: inline ;
}
.page-info .breadcrumbs {
    margin-bottom: 15px;
}
.focus-search {
    position: relative;
}
@keyframes fs-show {
    from {
        width: 30px;
        margin-left: calc(70%);
    }
    to {
        width: 100%;
        margin-left: 0;
    }
}
@keyframes fs-hide {
    from {
        width: 100%;
        margin-left: 0;
    }
    to {
        width: 30px;
        margin-left: calc(70%);
    }
}
@-webkit-keyframes fs-show {
    from {
        width: 30px;
        margin-left: calc(70%);
    }
    to {
        width: 100%;
        margin-left: 0;
    }
}
/*.focus-search input[type="text"] {*/
    /*display: none;*/
    /*width: 0px;*/
    /*color: #000;*/
    /*animation: fs-hide 0.2s;*/
    /*-webkit-animation: fs-hide 0.2s;*/
    /*animation-fill-mode: forwards;*/
    /*-webkit-animation-fill-mode: forwards;*/
/*}*/
/*.focus-search.active input[type="text"] {*/
    /*display: inline-block;*/
    /*animation: fs-show 0.2s;*/
    /*-webkit-animation: fs-show 0.2s;*/
    /*animation-fill-mode: forwards;*/
    /*-webkit-animation-fill-mode: forwards;*/
    /*position: relative;*/
    /*top: -3px;*/
    /*left: -24px;*/
/*}*/
/*.focus-search .focus-search-icon {*/
    /*position: absolute;*/
    /*top: 3px;*/
    /*right: 27px;*/
    /*color: #fff;*/
/*}*/
/*.focus-search.active .focus-search-icon {*/
    /*color: #000;*/
/*}*/
.computer-users-list {
    margin-left: 15px;
}
.computer-users-list u {
    text-decoration: none;
    border-bottom: 1px dotted #23527c;
    cursor: pointer;
}
.computer-users-list ul {
    list-style: none;
    display: inline;
    padding: 0;
}
.computer-users-list ul li {
    display: inline;
}
.computer-users-list li.active u {
    color: #337ab7;
}
.user-edit {
    cursor: pointer;
    text-decoration: none;
    border-bottom: 1px dotted #23527c;
}
.user-edit.user-noactive {
    color: #999;
    text-decoration: none;
    border-bottom: 1px dotted #23527c;
}
.user-edit-popover {
    color: #000;
}
@media (min-width: 1600px) {
    .container {
        width: 1570px;
    }

    .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
        float: left;
    }

    .col-xl-12 {
        width: 100%;
    }

    .col-xl-11 {
        width: 91.66666667%;
    }

    .col-xl-10 {
        width: 83.33333333%;
    }

    .col-xl-9 {
        width: 75%;
    }

    .col-xl-8 {
        width: 66.66666667%;
    }

    .col-xl-7 {
        width: 58.33333333%;
    }

    .col-xl-6 {
        width: 50%;
    }

    .col-xl-5 {
        width: 41.66666667%;
    }

    .col-xl-4 {
        width: 33.33333333%;
    }

    .col-xl-3 {
        width: 25%;
    }

    .col-xl-2 {
        width: 16.66666667%;
    }

    .col-xl-1 {
        width: 8.33333333%;
    }

    .col-xl-pull-12 {
        right: 100%;
    }

    .col-xl-pull-11 {
        right: 91.66666667%;
    }

    .col-xl-pull-10 {
        right: 83.33333333%;
    }

    .col-xl-pull-9 {
        right: 75%;
    }

    .col-xl-pull-8 {
        right: 66.66666667%;
    }

    .col-xl-pull-7 {
        right: 58.33333333%;
    }

    .col-xl-pull-6 {
        right: 50%;
    }

    .col-xl-pull-5 {
        right: 41.66666667%;
    }

    .col-xl-pull-4 {
        right: 33.33333333%;
    }

    .col-xl-pull-3 {
        right: 25%;
    }

    .col-xl-pull-2 {
        right: 16.66666667%;
    }

    .col-xl-pull-1 {
        right: 8.33333333%;
    }

    .col-xl-pull-0 {
        right: auto;
    }

    .col-xl-push-12 {
        left: 100%;
    }

    .col-xl-push-11 {
        left: 91.66666667%;
    }

    .col-xl-push-10 {
        left: 83.33333333%;
    }

    .col-xl-push-9 {
        left: 75%;
    }

    .col-xl-push-8 {
        left: 66.66666667%;
    }

    .col-xl-push-7 {
        left: 58.33333333%;
    }

    .col-xl-push-6 {
        left: 50%;
    }

    .col-xl-push-5 {
        left: 41.66666667%;
    }

    .col-xl-push-4 {
        left: 33.33333333%;
    }

    .col-xl-push-3 {
        left: 25%;
    }

    .col-xl-push-2 {
        left: 16.66666667%;
    }

    .col-xl-push-1 {
        left: 8.33333333%;
    }

    .col-xl-push-0 {
        left: auto;
    }

    .col-xl-offset-12 {
        margin-left: 100%;
    }

    .col-xl-offset-11 {
        margin-left: 91.66666667%;
    }

    .col-xl-offset-10 {
        margin-left: 83.33333333%;
    }

    .col-xl-offset-9 {
        margin-left: 75%;
    }

    .col-xl-offset-8 {
        margin-left: 66.66666667%;
    }

    .col-xl-offset-7 {
        margin-left: 58.33333333%;
    }

    .col-xl-offset-6 {
        margin-left: 50%;
    }

    .col-xl-offset-5 {
        margin-left: 41.66666667%;
    }

    .col-xl-offset-4 {
        margin-left: 33.33333333%;
    }

    .col-xl-offset-3 {
        margin-left: 25%;
    }

    .col-xl-offset-2 {
        margin-left: 16.66666667%;
    }

    .col-xl-offset-1 {
        margin-left: 8.33333333%;
    }

    .col-xl-offset-0 {
        margin-left: 0;
    }

    .visible-xl {
        display: block !important;
    }

    table.visible-xl {
        display: table;
    }

    tr.visible-xl {
        display: table-row !important;
    }

    th.visible-xl, td.visible-xl {
        display: table-cell !important;
    }

    .visible-xl-block {
        display: block !important;
    }

    .visible-xl-inline {
        display: inline !important;
    }

    .visible-xl-inline-block {
        display: inline-block !important;
    }

    .hidden-xl {
        display: none !important;
    }
}

.media-action a.media-upload {
    position:relative;
    display:block;
    color:white;
    line-height:30px;

}
.media-action a.media-upload i {
    font-size: 29px;
    vertical-align: middle;
    opacity:0.6;

}
.media-item:hover .media-upload i {
    opacity:1;


}
.media-item:hover .media-upload {
    color:#337ab7;
    text-decoration:none;


}
.media-action a.media-progress {
    position: absolute;
    display: block;
    font-size: 40px;
    top: 50px;
    width: 100%;
    text-align: center;
    transition: opacity 1s ease-in-out;
    color: #26A69A;

}
.media-error i {
    position: absolute;
    display: block;
    font-size: 40px;
    top: 60px;
    width: 100%;
    text-align: center;
}
.media-action a.media-queued {
    position: absolute;
    display: block;
    font-size: 40px;
    top: 50px;
    width: 100%;
    text-align: center;
    transition: opacity 1s ease-in-out;
    color: #26A69A;
}

.modal {
    display: none;
    position: fixed;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.5);
}
.modalWindow-content {
    background-color: #FFF;
    margin: auto;
    padding: 20px;
    border: 1px solid #26a69a;
    position: fixed;
    top: 50%;
    left: 50%;
    width: 25%;
    transform: translate(-50%, -50%);
}
.close {
    color: #aaaaaa;
    padding-left: 100%;
    padding-bottom: 0%;
}
.modalBtn {
    font-size: 14px;
    margin: 15px;
    width: max-width;
}

*, *:before, *:after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.tabs {
    margin: 0 auto;
}
.tabs > section {
    display: none;
    padding: 15px;
    background: #fff;
    border: 1px solid #ddd;
}
.tabs > section > p {
    margin: 0 0 5px;
    line-height: 1.5;
    color: #383838;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}
@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.tabs > input {
    display: none;
    position: absolute;
}
.tabs > label {
    display: inline-block;
    margin: 0px -5px -1px 0px;
    padding: 13px 15px 10px 15px;
    text-align: center;
    color: #aaa;
    border: 1px solid #ddd;
    background: #f1f1f1;
}
.tabs > label:before {
    font-family: fontawesome;
    color: #999;
    margin-right: 10px;
}
.tabs > input:checked + label:before {
    color: #2196f3;
}

.tabs > label[for="settingsTab1"]:before { content: "\f108"; }
.tabs > label[for="settingsTab2"]:before { content: "\f0c0"; }
.tabs > label[for="settingsTab3"]:before { content: "\f023"; }
.tabs > label[for="settingsTab4"]:before { content: "\f03e"; }
.tabs > label[for="settingsTab5"]:before { content: "\f11c"; }
.tabs > label[for="settingsTab6"]:before { content: "\f129"; }

.tabs > label[for="account"]:before { content: "\f234"; }
.tabs > label[for="computers"]:before { content: "\f108"; }
.tabs > label[for="actions"]:before { content: "\f03a"; }
.tabs > label[for="groupnet"]:before { content: "\f0e8"; }

#account:checked ~ #accountTab, #computers:checked ~ #computersTab, #actions:checked ~ #actionsTab, #groupnet:checked ~ #groupnetTab {
    display: block;
}

.tabs > label:hover {
    color: #888;
    cursor: pointer;
}
.tabs > input:checked + label {
    color: #555;
    box-shadow: inset 0 3px #2196f3;
    border-bottom: 1px solid #fff;
    background: #fff;
}
#settingsTab1:checked ~ #content-settingsTab1, #settingsTab2:checked ~ #content-settingsTab2,
#settingsTab3:checked ~ #content-settingsTab3, #settingsTab4:checked ~ #content-settingsTab4,
#settingsTab5:checked ~ #content-settingsTab5, #settingsTab6:checked ~ #content-settingsTab6 {
    display: block;
}

@media screen and (max-width: 970px) {
    .tabs > label:before {
        margin: 0;
        font-size: 18px;
    }
}

@media (min-width: 576px){
    .login {
        width: 400px !important;
    }
}
@media (max-width: 575px){
    .login {
        width: 270px !important;
    }
}

.product-option{
    white-space: nowrap;
    margin: 5px 0;
}
.product-list{
    margin-bottom: 200px;
}
.product-list ul.nav-tabs{
    border-width: 0px;
    margin-bottom: 20px;
}
.product-list ul.nav-tabs li a{
    background-color: #f8f8f8;
    color: #888;
    cursor: pointer;
    border-radius: 0;
    padding: 15px 40px;
    border-color:#e0e0e0;
}
.product-list ul.nav-tabs li.active a{
    background-color: #4c4d58;
    color: #fff;
}
.product-list .product-logo{
    background: url(//www.spyrix.com/images/seclogo.png) center 60px no-repeat;
    width: 350px;
    min-height: 300px;
}
.product-list .product-item{
    border: 1px solid #ddd;
    border-collapse: collapse;
    /*margin-left: 20px;*/
    padding-bottom: 20px;
    /*left: 50%;*/
    /*transform: translate(-50%, 0%);*/
}
.product-list .product-group-price{
    padding-left: 20px;
}
.product-list .product-item label{
    min-width: 120px;
}
.product-list .product-item .product-option-price s,
.product-list .product-item .product-option-price i {
    min-width: 70px;
    display: inline-block;
}
.product-list .product-item .product-option-price b{
    font-size: 1.2em;
}
.product-list h3{
    color: #fff;
    font-size: 16px;
    margin: 0 -15px 10px;
}
.product-list .product-item h3{
    background-color: #26A69A;
    padding: 14px 20px;
    font-weight: lighter;
}
.product-list .product-item h3 span{
    display: block;
    font-weight: normal;
}
.product-list .product-item-odd h3{
    background-color: #59a9c9;
}
.product-total-price{
    font-size: 1.8em;
}
.product-item-footer{
    padding: 20px 0 30px;
}

tr.selected:not(:hover){
    background-color: #26A69A;
    color: #fff;
}
tr.selected:hover{
    background-color: #26A69A !important;
    color: #fff;
}
tr.selected:hover{
    text-decoration: underline;
}
.groups .panel:not(.selected) .panel-body {
    display:none;
}

.groups .panel .panel-body {
    padding:0px;
    overflow:hidden;
}
.groups .label {
    margin-right:15px;
}
.icon-display {
    margin:5px;
}
.vertical-middle {
    margin-top:50px;
}
.vertical-middle>div{
    margin-bottom:25px;
}
.emptygroup {
    padding:20px;
}
.groups form {
    margin-bottom:10px;
}
.panel.selected .groupedit {
    display: inline;
}
.groupedit {
    display:none;
}
.groupedit a{
    color: rgba(255, 255, 255, 0.72);
    padding-left:10px;
}
.groupedit a:hover {
    color: white;
    text-decoration:none;
}

.total-sort {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAQAAADYWf5HAAAAkElEQVQoz7X QMQ5AQBCF4dWQSJxC5wwax1Cq1e7BAdxD5SL+Tq/QCM1oNiJidwox0355mXnG/DrEtIQ6azioNZQxI0ykPhTQIwhCR+BmBYtlK7kLJYwWCcJA9M4qdrZrd8pPjZWPtOqdRQy320YSV17OatFC4euts6z39GYMKRPCTKY9UnPQ6P+GtMRfGtPnBCiqhAeJPmkqAAAAAElFTkSuQmCC');
    vertical-align: middle;
}
.total-sort.desc{
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAZUlEQVQ4y2NgGAWjYBSggaqGu5FA/BOIv2PBIPFEUgxjB+IdQPwfC94HxLykus4GiD+hGfQOiB3J8SojEE9EM2wuSJzcsFMG4ttQgx4DsRalkZENxL+AuJQaMcsGxBOAmGvopk8AVz1sLZgg0bsAAAAASUVORK5CYII= ');
}
.total-sort.asc{
    background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAZ0lEQVQ4y2NgGLKgquEuFxBPAGI2ahhWCsS/gDibUoO0gPgxEP8H4ttArEyuQYxAPBdqEAxPBImTY5gjEL9DM+wTENuQahAvEO9DMwiGdwAxOymGJQLxTyD+jgWDxCMZRsEoGAVoAADeemwtPcZI2wAAAABJRU5ErkJggg==');
}
.user-list-container{
    overflow-x: auto;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    width: 100%;
}
.user-list-container::-webkit-scrollbar {
    height: 8px;
}
.user-list-container::-webkit-scrollbar-track-piece {
    background: #f9f9f9;
}
.total-header .breadcrumbs{
    vertical-align: middle;
    display: inline-block;
}
.total-header .date-range-container{
    position: absolute;
    right: 30px;
    top: 5px;
    float: right;
    vertical-align: middle;
}
.user-list{
    margin-bottom: 0;
    border: none;
}
.user-list tr:first-child th{
    white-space: nowrap;
    border-top: none !important;
}
.user-list td:first-child, .user-list th:first-child{
    border-left: none !important;
}
.user-list td:last-child, .user-list th:last-child{
    border-right: none !important;
}
.user-list td, .user-list th{
    cursor: pointer;
}
.user-list .user-name-column small{
    color: #999;
}
.user-list .user-name-column i{
    font-style: normal;
    font-size: 0.9em;
}
.user-list .pagination{
    margin-top: 0;
}
.user-list .crosshair{
    background-color: #eef;
}
.user-list .selected{
    background-color: #def !important;
}
.user-chart{
    text-align: center;
}
#user-filter{
    float: right;
}
#user-filter label{
    font-weight: normal;
}
.item-list{
    font-size: 0.9em;
}
.charts table td, .charts table th{
    padding:5px !important;
}

#user-filter{
    float: right;
}
#user-filter label{
    font-weight: normal;
}
.item-list{
    font-size: 0.9em;
}
.charts table td,
.charts table th{
    padding:5px !important;
}

.active_grouped_computer,
.active_grouped_computer:hover {
    background-color: #26A69A !important;
    color: #fff !important;
}
.navigation-groups>li>ul>li>a {
    padding-left:30px;
    font-size: smaller;
}
.navigation .badge {
    margin-top: 2px;
}
.navigation.navigation-groups.navigation-accordion {
    padding-top:0px;
}

.app-description{
    color: #666;
    font-size: 0.8em;
}

.animate-show-hide.ng-hide {
    opacity: 0;
}
.animate-show-hide.ng-hide-add,
.animate-show-hide.ng-hide-remove {
    transition: all linear 0.5s;
}

.panel.panel-body h6 {
    font-size:15px;
}
arc-multi, area-chart, donut-basic, bar-chart {
    display: block;
    text-align: center;
    text-align: -webkit-center;
}
.table-th {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
.ibox-content > div > .table-bordered {
    border: 2px solid #2196f3;
}
.img-icon {
    width: 18px !important;
    height: 18px !important;
}
.img-icon-userlist {
    float: left;
    margin: -4px 15px 0 5px;
    width: 32px !important;
    height: 32px !important;
}
donut-basic>svg>g>text {
    color:#777 !important;
    font-size:14px !important;
    font-weight:400 !important;
}
#progress_percentage_three donut-basic>svg>g>text {
    font-size:16px !important;
    font-weight:400 !important;
}

/**/

@-moz-document url-prefix() {
    .header-float.fixed {
        right: 16px;
    }
}
.header-float-replacement {
    display: none;
}
.header-float .btn-header-right {
    width: 30px;
    height: 30px;
    float: right;
    display: none;
    text-align: center;
    cursor: pointer;
    margin-bottom: 0px;
    margin-left: 5px;
}

.date-control {
    display: inline-block !important;
    padding: 0px 20px !important;
    height: 30px !important;
    width: 100px !important;
}

.date-range-container {
    position: relative;
}
.date-range-container {
    position: relative;
    display: inline-block;
}
.date-range-current:hover {
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.0980392);
}
.date-range-menu {
    position: absolute;
    right: 0;
    top: 100%;
    display: none;
    background-color: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.0980392);
    padding: 5px 0;
    z-index: 1000;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.0980392);
    min-width: 310px;
}
.date-range-menu-item {
    white-space: nowrap;
    padding: 7px 22px;
    cursor: pointer;
}
.date-range-menu-item .glyphicon-ok {
    margin-left: -22px;
    width: 22px;
    text-align: center;
}
.date-range-apply {
    white-space: nowrap;
    margin-top: 5px;
    padding: 8px 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.0980392);
}
.date-range-menu-item:hover {
    background-color: #F5F5F5;
}
.date-range-custom-end {
    position: relative;
}
.date-range-custom-end .dropdown-menu {
    left: auto !important;
    right: 0px;
}
.date-range-menu-item-custom input[type="text"] {
    width: 100px;
}
.date-range-menu-item-custom.has-error input[type="text"] {
    color: red;
}

@-webkit-keyframes blink{0%,50%,100%{opacity:1}25%,75%{opacity:0}}@keyframes blink{0%,50%,100%{opacity:1}25%,75%{opacity:0}}

form.form > input[type="text"] {
    padding:0px 10px;
    -webkit-border-radius:20px;
    -moz-border-radius:20px;
    -o-border-radius:20px;
    border-radius:20px;
    outline:none;
    border:2px solid #eee;
    background:transparent;
    width:10px;
    color:#eee;
    -webkit-transition: all .5s cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition: all .5s cubic-bezier(0.77, 0, 0.175, 1);
    -ms-transition: all .5s cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition: all .5s cubic-bezier(0.77, 0, 0.175, 1);
    transition: all .5s cubic-bezier(0.77, 0, 0.175, 1);
}

form.form > input[type="text"].active {
    width:207px;
    background: #eee;
    height: 30px;
    color: #444;
}

form.form > .search {
    height:15px;
    width:2px;
    display:inline-block;
    background:#eee;
    -webkit-transition: all .5s cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition: all .5s cubic-bezier(0.77, 0, 0.175, 1);
    -ms-transition: all .5s cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition: all .5s cubic-bezier(0.77, 0, 0.175, 1);
    transition: all .5s cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    -o-border-radius:2px;
    border-radius:2px;
    -webkit-transform: translate(-5px, 17px) rotate(-45deg);
    -moz-transform: translate(-5px, 17px) rotate(-45deg);
    -ms-transform: translate(-5px, 17px) rotate(-45deg);
    -o-transform: translate(-5px, 17px) rotate(-45deg);
    transform: translate(-5px, 17px) rotate(-45deg);
}

form.form > .search.move {
    -webkit-animation: blink 3s both .7s infinite;
    animation: blink 3s both .7s infinite;
    display: none;
    -webkit-transform: translate(-188px, 8px) rotate(0deg);
    -moz-transform: translate(-188px, 8px) rotate(0deg);
    -ms-transform: translate(-188px, 8px) rotate(0deg);
    -o-transform: translate(-188px, 8px) rotate(0deg);
    transform: translate(-188px, 8px) rotate(0deg);
}

form.form {
    position:relative;
}

.antivirus {
    max-width: 1010px;
    margin: 25px auto;
}
.antivirus > p {
    color: #777777;
    font-size: 16px;
}
.antivirus > span {
    margin-right: 15px;
}

#anyTab {
    display: block;
}
.tabs-input > section {
    display: none;
}
.tabs-input > div > div > div {
    display: inline-block;
    margin: 5px 0;
}
.tabs-input > div > div > div > input {
    /*display: none;*/
    position: relative;
    top: -5px;
}
.tabs-input > div > div > div > label {
    margin: 0 15px 0 3px;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 2px 10px;
    /* padding: 5px 15px 5px 5px; */
}
.tabs-input > div > div > div > label:hover {
    cursor: pointer;
}
.tabs-input > div > div > div > input:checked + label {
    color: white;
    /* background-color: #2196F3!important; */
    border-color: #2196F3!important;
    border-width: 2px;
}
.tabs-rounded {
    border: 1px solid #ddd;
    padding: 15px;
    text-align: center;
}
.tabs-rounded > label.radio-step {
    position: relative;
    display: inline-block;
    padding: 6px 12px;
    font-weight: normal;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: auto;
    background-color: white;
    font-size: 25px;
    min-width: 50px;
    margin-bottom: 5px;
    /*border-radius: 100px;*/
}
.tabs-rounded > input, .tabs-rounded > section {
    display: none;
}
.tabs-rounded > input:checked + label {
    color: #2196F3!important;
    /* background-color: #2196F3!important; */
    border-color: #2196F3!important;
    border-bottom: 2px solid; /*remove*/
    border-radius: 0; /*remove*/
}
#avast-steps-1:checked ~ #avast-step-1, #avast-steps-2:checked ~ #avast-step-2, #avast-steps-3:checked ~ #avast-step-3,
#avg-steps-1:checked ~ #avg-step-1, #avg-steps-2:checked ~ #avg-step-2, #avg-steps-3:checked ~ #avg-step-3,
#eset-steps-1:checked ~ #eset-step-1, #eset-steps-2:checked ~ #eset-step-2, #eset-steps-3:checked ~ #eset-step-3,
#norton-steps-1:checked ~ #norton-step-1, #norton-steps-2:checked ~ #norton-step-2, #norton-steps-3:checked ~ #norton-step-3,
#kaspersky-steps-1:checked ~ #kaspersky-step-1, #kaspersky-steps-2:checked ~ #kaspersky-step-2, #kaspersky-steps-3:checked ~ #kaspersky-step-3,
#other-steps-1:checked ~ #other-step-1, #other-steps-2:checked ~ #other-step-2, #other-steps-3:checked ~ #other-step-3 {
    display: block;
    text-align: left;
    margin-top: 15px;
}
.navbar-header {
    min-width: unset;
}
nav.navbar > .container {
    width: unset !important;
}
.navbar-brand {
    padding: 10px !important;
}

img.animate-zoom {
    max-width: 30%;
    transition: all 0.2s ease-out;
}
img.animate-zoom:hover {
    max-width: 100%;
    transition-delay: 0.35s;
}
.prg_path {
    background-color: white;
    display: inline-block;
}
input.prg_path {
    width: 450px;
    text-align: center;
}
.prg_download_link {
    font-size: 32px !important;
    margin: 50px !important;
}
@media (max-width: 520px) {
    .next-btn {
        margin: 5px 0 !important;
    }
    .next-btn > span {
        display: none;
    }
    .prg_download_link, .download_link {
        font-size: 15px !important;
        padding: 10px !important;
    }
    .splogo > div > h2 {
        font-size: 22px;
    }
    input.prg_path {
        width: 100%;
    }
}
.download-buttons {
	display: flex;
    justify-content: center;
}
.download-buttons__block {
    margin-right: 30px;
}
.download-buttons__title {
    text-align: center;
}



.keylogger-mac {
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin-top: 40px;
    align-items: center;
}

.keylogger-mac__tabs-block {
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 80px;
}
.app-switchers {
    display: flex;
    border-bottom: 1px solid #ddd;
}
.app-switcher {
    padding: 20px 30px;
    font-size: 26px;
    font-weight: bold;
    cursor: pointer;
    flex: 1;
    text-align: center;
    background-color: #f1f1f1;
    transition: .3s;
    color: #aaaaaa;
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-switcher:hover {
    background-color: rgba(51, 51, 51, .1);
}

.app-switcher--active {
    background-color: #337ab7;
    color:#fff;
}

.app-switcher--active:hover {
    background-color: #337ab7;
}

.app-switcher:not(:last-child) {
    border-right: 1px solid #ddd;
}

.tabs {
    padding: 30px 40px;
}

.tab {
    display: none;
}

.tab--active {
    display: flex;
    flex-direction: column;
}

.tab__header {
    display: flex;
    align-items: center;
}

.tab__header-logo {
    margin-right: 20px;
    width: 60px;
    height: 80px;
    object-fit: contain;
}

.tab__title {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.tab__title span {
    margin-top: 5px;
    font-size: 14px;
    font-weight: normal;
}

.tab__version {
    margin-bottom: 15px;
}

.tab__item {
    font-size: 24px;
}

.tab__item span {
    color: #d9534f;
    font-size: 16px;
}

.tab__buttons {
    display: flex;
    justify-content: center;
}

.tab__button {
    margin-right: 15px;
}

.btn-simple {
    transition: .3s;
    background-color: #337ab7;
    color: #fff;
}

.btn-simple:hover {
    background-color: #23527c;
    color: #fff;
}

@media screen and (max-width: 768px) {
    .app-switcher {
        font-size: 22px;
    }
    .tab__item {
        font-size: 18px;
    }
}

@media screen and (max-width: 480px) {
    .app-switcher {
        font-size: 18px;
        padding: 10px 15px;
    }
}




.screenshots {
    max-width: 70%;
    margin-bottom: 80px;
}

.screenshots__title {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 50px;
}

.screenshots__title span {
    margin-left: 10px;
    font-size: 12px;
    font-weight: bold;
    font-weight: 300;
    color: #d9534f;
}

.swiper {
    position: relative;
    z-index: 1;
    border-radius: 5px;
    overflow: hidden;
}

.swiper-slide {
    overflow: hidden;
    display: flex;
    justify-content: center;
}

.swiper__image {
    object-fit: contain;
    max-width: 100%;
}
.screenshots__wrapper {
    position: relative;
    margin-bottom: 30px;
}
.swiper-navigation-prev {
    /* height: 50px; */
    background-color: #337ab7;
    position: absolute;
    -webkit-mask: url(/images/loadpage/icons/arrowMenu.svg) no-repeat center/contain;
    mask: url(/images/loadpage/icons/arrowMenu.svg) no-repeat center /cover;
    fill: #337ab7;
    top: 50%;
    width: 40px;
    height: 60px;
    left: -40px;
    z-index: 1000px;
    cursor: pointer;
    transform: translate(-50%, -50%) rotate(-90deg);
}
.swiper-navigation-next {
    /* height: 50px; */
    background-color: #337ab7;
    position: absolute;
    -webkit-mask: url(/images/loadpage/icons/arrowMenu.svg) no-repeat center/contain;
    mask: url(/images/loadpage/icons/arrowMenu.svg) no-repeat center /cover;
    fill: #337ab7;
    top: 50%;
    width: 40px;
    height: 60px;
    right: -80px;
    z-index: 1000px;
    cursor: pointer;
    transform: translate(-50%, -50%) rotate(90deg);
}

.swiper-button-disabled {
    background-color: rgba(52, 122, 183, .3);
}

.swiper-pagination {
    bottom: -30px !important;
}

@media screen and (max-width: 768px) {
    .screenshots {
        max-width: 90%;
    }
    .screenshots__title {
        font-size: 26px;
    }
    .screenshots__title span {
        font-size: 10px;
    }
    .swiper-navigation-next {
        width: 30px;
        right: -50px;
    }
    .swiper-navigation-prev {
        width: 30px;
        left: -20px;
    }
}

@media screen and (max-width: 480px) {
    .screenshots {
        max-width: 95%;
    }
    .swiper-navigation-next {
        display: none;
    }
    .swiper-navigation-prev {
        display: none;
    }
}



.benefits {
    margin-bottom: 80px;
}

.benefits__list {
    padding: 0 50px;
    display: grid;
    grid-template-columns: repeat(6, auto);
    grid-column-gap: 15px;
    grid-row-gap: 25px;
}

.benefits__item {
    display: flex;
    align-items: flex-start;
}

.benefits__item:not(:last-child) {
    margin-right: 15px;
}

.benefits__item-title {
    font-size: 16px;
    font-weight: 500;
    margin: 0;
}

.benefits__item-icon {
    background-color: #337ab7;
    min-width: 30px;
    min-height: 30px;
    margin-right: 10px;
}

.benefits__item:first-child .benefits__item-icon {
    -webkit-mask: url(/images/loadpage/icons/numberedList.svg) no-repeat center/contain;
    mask: url(/images/loadpage/icons/numberedList.svg) no-repeat center /contain;
}

.benefits__item:nth-child(2) .benefits__item-icon {
    -webkit-mask: url(/images/loadpage/icons/spy.svg) no-repeat center/contain;
    mask: url(/images/loadpage/icons/spy.svg) no-repeat center /contain;
}

.benefits__item:nth-child(3) .benefits__item-icon {
    -webkit-mask: url(/images/loadpage/icons/guard.svg) no-repeat center/contain;
    mask: url(/images/loadpage/icons/guard.svg) no-repeat center /contain;
}

.benefits__item:nth-child(4) .benefits__item-icon {
    -webkit-mask: url(/images/loadpage/icons/fingerLike.svg) no-repeat center/contain;
    mask: url(/images/loadpage/icons/fingerLike.svg) no-repeat center /contain;
}

.benefits__item:nth-child(5) .benefits__item-icon {
    -webkit-mask: url(/images/loadpage/icons/eye.svg) no-repeat center/contain;
    mask: url(/images/loadpage/icons/eye.svg) no-repeat center /contain;
}

.benefits__item:nth-child(6) .benefits__item-icon {
    -webkit-mask: url(/images/loadpage/icons/dollar.svg) no-repeat center/contain;
    mask: url(/images/loadpage/icons/dollar.svg) no-repeat center /contain;
}

@media screen and (max-width: 1100px) {
    .benefits__list {
        grid-template-columns: repeat(3, auto);
        padding: 0 40px;
    }
}

@media screen and (max-width: 600px) {
    .benefits__list {
        grid-template-columns: repeat(2, auto);
        padding: 0 15px;
    }
}

@media screen and (max-width: 420px) {
    .benefits__list {
        grid-template-columns: repeat(1, auto);
    }
}



.features__title {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 50px;
}

.features__blocks {
    padding: 0;
}

.features__block-image {
    flex: 1;
}

.features__block-pic {
    width: 100%;
    height: 100%;
    border-radius: 5px;
    object-fit: contain;
}

.features__block {
    list-style-type: none;
    display: flex;
    align-items: center;
    margin-bottom: 100px;
}

.features__block:nth-child(2n+1) {
    flex-direction: row-reverse;
}

.features__block:nth-child(2n+1) .features__list {
    margin-right: 0;
    margin-left: 40px;
}

.features__list {
    width: 35%;
    margin-right: 20px;
    padding: 0 4%;
}

.features__item {
    list-style-type: none;
    display: flex;
    margin-bottom: 40px;
}

.features__item:last-child {
    margin-bottom: 0;
}

.features__item-icon {
    background-color: #337ab7;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-right: 20px;
    -webkit-mask: url(/images/loadpage/icons/check.svg) no-repeat center/contain;
    mask: url(/images/loadpage/icons/check.svg) no-repeat center /contain;
}

.features__item-title {
    margin: 0;
    margin-bottom: 10px;
}

@media screen and (max-width: 1100px) {
    .features__block {
        flex-direction: column;
    }
    .features__block:nth-child(2n+1) {
        flex-direction: column;
    }

    .features__list {
        width: 100%;
        display: flex;
    }

    .features__block:nth-child(2n+1) .features__list {
        margin-left: 0;
    }

    .features__item {
        padding: 0 5px;
    }
}

@media screen and (max-width: 768px) {
    .features__title {
        font-size: 26px;
    }
}

@media screen and (max-width: 550px) {
    .features__list {
        flex-direction: column;
        margin-bottom: 20px;
    }
    .features__item {
        margin-bottom: 20px;
    }
}