ol,
ul {
    list-style: none;
    margin: 0;
    padding: 0
}

img {
    border: 0
}

body {
    background: url(../img/page_bg.png) left top rgba(0, 0, 0, 0.05)
}

a {
    display: inline-block;
    text-decoration: none;
    outline: none;
    color: #000;
    cursor: pointer
}

a.e {
    color: #a00
}

a.e:hover {
    color: #f00
}

div,
section,
nav,
aside,
footer,
article {
    margin: 0 auto
}

p {
    margin: 0;
    padding: 0 0 10px;
    text-align: justify
}

body,
input,
textarea,
select,
h1,
h2,
h3,
h4,
h5,
h6 {
    border: 0;
    padding: 0;
    margin: 0;
    outline: 0;
    color: rgba(0, 0, 0, 0.6)
}

input::-webkit-input-placeholder {
    color: rgba(0, 0, 0, 0.2)
}

input::-moz-placeholder {
    color: rgba(0, 0, 0, 0.2)
}

textarea {
    vertical-align: top
}

*:focus {
    outline: 0
}

@font-face {
    font-family: 'FontAwesome';
    src: url("../fonts/fontawesome-webfont.eot?v=4.3.0");
    src: url("../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0") format("embedded-opentype"), url("../fonts/fontawesome-webfont.woff2?v=4.3.0") format("woff2"), url("../fonts/fontawesome-webfont.woff?v=4.3.0") format("woff"), url("../fonts/fontawesome-webfont.ttf?v=4.3.0") format("truetype"), url("../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular") format("svg");
    font-weight: normal;
    font-style: normal
}

.math,
.log_holder {
    direction: ltr;
    text-align: left
}

.clear {
    display: block;
    float: none;
    clear: both
}

.clear_bot:after {
    content: '';
    display: block;
    clear: both
}

.hidden {
    display: none !important
}

.ltr {
    direction: ltr
}

.rtl {
    direction: rtl
}

.success {
    color: #0a0
}

.error {
    color: #a00
}

.lighted {
    background: #f3c440
}

.kw_c1 {
    color: #3a8291
}

.kw_c2 {
    color: #9c439f
}

.kw_c3 {
    color: #d49102
}

.toggle {
    position: relative;
    cursor: pointer
}

.toggle:after {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1
}

.toggle:hover {
    color: #000
}

.icon,
.form_field .lst>li.n:before {
    font: 16px/100% FontAwesome;
    text-align: center
}

.icon.ic_monitor:after {
    content: "\f06e"
}

.icon.ic_desktop:after {
    content: "\f108"
}

.icon.ic_laptop:after {
    content: "\f109"
}

.icon.ic_plus:after {
    content: "\f067"
}

.icon.ic_server:after {
    content: "\f233"
}

.icon.ic_phone:after {
    content: "\f098"
}

.icon.ic_call:after {
    content: "\f095"
}

.icon.ic_ivr:after {
    content: "\f126"
}

.icon.ic_wrench:after {
    content: "\f0ad"
}

.icon.ic_grid:after {
    content: "\f009"
}

.icon.ic_list:after {
    content: "\f00b"
}

.icon.ic_logs:after {
    content: "\f022"
}

.icon.ic_cols:after {
    content: "\f0db"
}

.icon.ic_gear:after {
    content: "\f013"
}

.icon.ic_cube:after {
    content: "\f1b2"
}

.icon.ic_cubes:after {
    content: "\f1b3"
}

.icon.ic_edit:after {
    content: "\f044"
}

.icon.ic_filter:after {
    content: "\f0b0"
}

.icon.ic_info:after {
    content: "\f05a"
}

.icon.ic_help:after {
    content: "\f059"
}

.icon.ic_lock:after {
    content: "\f023"
}

.icon.ic_plus:after {
    content: "\f067"
}

.icon.ic_minus:after {
    content: "\f068"
}

.icon.ic_search:after {
    content: "\f002"
}

.icon.ic_inbox:after {
    content: "\f01c"
}

.icon.ic_tag:after {
    content: "\f02b"
}

.icon.ic_remove:after {
    content: "\f00d"
}

.icon.ic_delete:after {
    content: "\f014"
}

.icon.ic_clear:after {
    content: "\f057"
}

.icon.ic_exchange:after {
    content: "\f0ec"
}

.icon.ic_question:after {
    content: "\f29c"
}

.icon.ic_file:after {
    content: "\f0f6"
}

.icon.ic_chart_bar:after {
    content: "\f080"
}

.icon.ic_chart_line:after {
    content: "\f201"
}

.icon.ic_chart_pie:after {
    content: "\f200"
}

.icon.ic_up:after {
    content: "\f077"
}

.icon.ic_right:after {
    content: "\f054"
}

.icon.ic_down:after {
    content: "\f078"
}

.icon.ic_left:after {
    content: "\f053"
}

.icon.ic_power:after {
    content: "\f011"
}

.icon.ic_home:after {
    content: "\f015"
}

.icon.ic_user:after {
    content: "\f007"
}

.icon.ic_time:after {
    content: "\f017"
}

.icon.ic_spinner:after {
    content: "\f0d7"
}

.icon.ic_add:after {
    content: "\f067"
}

.icon.ic_group:after {
    content: "\f0c0"
}

.icon.ic_play:after {
    content: "\f04b"
}

.icon.ic_play.active:after {
    content: "\f04d"
}

.icon.ic_pause:after {
    content: "\f04c"
}

.icon.ic_download:after {
    content: "\f019"
}

.icon.ic_upload:after {
    content: "\f093"
}

.icon.ic_save:after {
    content: "\f0c7"
}

.icon.ic_archive:after {
    content: "\f187"
}

.icon.ic_dir_up:after {
    content: "\f176"
}

.icon.ic_dir_down:after {
    content: "\f175"
}

.icon.ic_copy:after {
    content: "\f0c5"
}

.icon.ic_tick:after {
    content: "\f00c"
}

.icon.ic_repeat:after {
    content: "\f01e"
}

.icon.ic_undo:after {
    content: "\f0e2"
}

.icon.ic_calendar:after {
    content: "\f073"
}

.icon.ic_mail:after {
    content: "\f003"
}

.icon.ic_action:after {
    content: "\f142"
}

.icon.ic_dash:after {
    content: "\f0e4"
}

.icon.ic_exclam:after {
    content: "\f071"
}

.icon.ic_refresh:after {
    content: "\f021"
}

.icon.ic_unlink:after {
    content: "\f127"
}

.icon.ic_expand:after {
    content: "\f065"
}

.icon.ic_collapse:after {
    content: "\f066"
}

.icon.ic_reorder:after {
    content: "\f0c9"
}

.icon.ic_enable:after {
    content: "\f05d"
}

.icon.ic_disable:after {
    content: "\f05c"
}

.icon.ic_expand:after {
    content: "\f065"
}

.icon.ic_retract:after {
    content: "\f066"
}

.icon.ic_mobile:after {
    content: "\f10b"
}

.icon.ic_sms:after {
    content: "\f27b"
}

.main_shadow,
.page_side,
.profile_panel {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2)
}

.box_shadow,
.controls .panel,
.fld_items .view,
.btn_extra .more,
.item_actions,
.dashboard_screen,
.player_holder .player,
.date_picker .panel {
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1)
}

.noselect,
.tabs_button>li .t,
.action_holder>ul>li>.l,
.drag_handle {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.dataTables_wrapper,
.data_table_holder {
    margin: 0 0 10px;
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.05);
    position: relative
}

.dataTables_wrapper {
    padding: 40px 0 0
}

.dataTables_length {
    position: absolute;
    top: 5px;
    right: 8px
}

.dataTables_length select {
    background: none
}

.dataTables_filter {
    position: absolute;
    top: 5px;
    left: 8px
}

.dataTables_filter input {
    height: 26px;
    padding: 5px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1)
}

.dataTables_info,
.dataTables_paginate {
    padding: 10px
}

.dataTables_info {
    border-bottom: 0
}

.dataTables_paginate {
    border-top: 0
}

.dataTables_scrollHead th {
    cursor: pointer
}

.dataTables_scrollHead th:after {
    margin: 0 5px;
    font: 14px/20px 'FontAwesome'
}

.dataTables_scrollHead th.sorting:after {
    content: "\f0dc";
    color: rgba(0, 0, 0, 0.4)
}

.dataTables_scrollHead th.sorting:hover:after {
    color: rgba(0, 0, 0, 0.8)
}

.dataTables_scrollHead th.sorting_disabled:after {
    content: ""
}

.dataTables_scrollHead th.sorting_asc:after {
    content: "\f0de";
    color: #efefef
}

.dataTables_scrollHead th.sorting_desc:after {
    content: "\f0dd";
    color: #efefef
}

.paginate_button {
    min-width: 20px;
    padding: 5px;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
    text-align: center;
    overflow: hidden;
    position: relative;
    cursor: pointer
}

.paginate_button:after {
    content: "";
    display: none;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1
}

.paginate_button.disabled {
    cursor: default
}

.paginate_button.first:after,
.paginate_button.previous:after,
.paginate_button.next:after,
.paginate_button.last:after {
    padding: 5px;
    background: #fff;
    color: #efefef;
    font: 14px/20px 'FontAwesome'
}

.paginate_button.first:after {
    content: "\f101"
}

.paginate_button.previous:after {
    content: "\f105"
}

.paginate_button.next:after {
    content: "\f104"
}

.paginate_button.last:after {
    content: "\f100"
}

.paginate_button.current {
    cursor: default;
    background: #efefef;
    color: #fff
}

.dt_action,
.du_action,
.dp_action {
    margin: 0 5%;
    cursor: pointer
}

.dt_action:hover,
.du_action:hover {
    color: #efefef
}

.data_table_holder {
    overflow: auto
}

.data_table {
    min-width: 100%;
    border-spacing: 0;
    border-collapse: collapse
}

.data_table td,
.data_table th {
    padding: 8px;
    vertical-align: top;
    white-space: nowrap;
    overflow: hidden
}

.data_table td {
    direction: ltr
}

.data_table th {
    font-weight: bold
}

.data_table tr {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1)
}

.data_table tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.4)
}

.data_table tr.foc {
    box-shadow: 0 0 0 1px #000 inset
}

.data_table thead,
.data_table tfoot {
    background: linear-gradient(to bottom, transparent 0, #fff 100%)
}

.data_table tbody tr:hover {
    background: rgba(0, 0, 0, 0.05)
}

.data_table .dt_action:hover,
.data_table .du_action:hover,
.data_table .dp_action:hover {
    color: #000
}

.list_holder {
    padding: 1% 0;
    clear: both
}

.data_list {
    position: relative
}

.data_list>li {
    padding: 0 0 5px;
    margin: 0 0 5px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1)
}

.data_list>li .t {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.data_list>li .i {
    opacity: .4
}

.data_list>li .i:after {
    content: ")"
}

.data_list>li.faded .t {
    opacity: .4;
    text-decoration: line-through
}

.data_list>li.faded .ic_enable {
    opacity: .4
}

.data_list .icon.h,
.data_list .form_field .lst>li.h.n:before,
.form_field .data_list .lst>li.h.n:before {
    opacity: .4;
    cursor: move
}

.ls_action {
    margin: 0 5px;
    cursor: pointer
}

.gen_indent {
    padding: 0 1% 10px
}

.sec_half,
.sec_quarter {
    overflow: hidden
}

.mini_progress {
    display: block;
    width: 100px;
    height: 12px;
    margin: 2px;
    border: 1px solid #efefef;
    border-radius: 3px;
    overflow: hidden;
    position: relative
}

.mini_progress .inner {
    display: block;
    width: 0;
    height: 100px;
    background: #efefef;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1
}

.division {
    padding: 15px 10px 10px;
    margin: 10px 0 20px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    position: relative;
    clear: both
}

.division:before {
    content: attr(data-title);
    display: block;
    padding: 0 5px;
    background: #fff;
    font-weight: bold;
    transform: translate(0, -50%);
    position: absolute;
    top: 0;
    z-index: 1
}

.link {
    display: block;
    padding: 10px 2%;
    color: #efefef;
    clear: both;
    cursor: pointer
}

.link:hover {
    color: #000
}

.success_holder {
    color: #0cab11
}

.error_holder {
    color: #d41515
}

.popup_back {
    background: rgba(240, 240, 240, 0.9);
    overflow: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    opacity: 0;
    transition: 200ms
}

.popup_back>table {
    width: 100%;
    height: 100%
}

.popup_back>table>tr>td {
    width: 100%;
    height: 100%;
    padding: 10px;
    vertical-align: middle
}

.popup_box {
    max-width: 600px;
    margin: -100px auto 0;
    background: #fff;
    border-radius: 5px;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
    transform: scale(0.6, 0.6);
    transition: 200ms
}

.popup_box>h2 {
    padding: 10px;
    font-weight: bold;
    color: #efefef;
    border-bottom: 2px solid #efefef
}

.popup_box>h2 .ic_help {
    padding: 2px;
    cursor: pointer
}

.popup_box>.content {
    padding: 10px 30px;
    background: rgba(0, 0, 0, 0.02)
}

.popup_box>.content:after {
    content: "";
    display: block;
    clear: both
}

.popup_box>img {
    width: 100%;
    height: auto
}

.popup_box .data_table {
    margin-bottom: 10px;
    border: 1px solid rgba(0, 0, 0, 0.1)
}

.popup_box .bot {
    clear: both;
    font-size: .9em;
    color: rgba(0, 0, 0, 0.4);
    margin: 0 -20px
}

.popup_box.wide {
    max-width: 98%
}

.popup_box .cover {
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.6);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2
}

.popup_extra {
    width: 98%;
    margin: 1%;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3
}

.popup_extra>h2 {
    padding: 10px;
    font-weight: bold;
    color: #efefef;
    border-bottom: 2px solid #efefef
}

.popup_extra>.content {
    padding: 10px 10%;
    background: rgba(0, 0, 0, 0.02);
    position: relative
}

.popup_extra>.content:after {
    content: "";
    display: block;
    clear: both
}

.popup_back.active {
    opacity: 1
}

.popup_back.active .popup_box {
    margin-top: 0;
    transform: scale(1, 1)
}

.popup_panel {
    max-height: 300px;
    overflow: auto
}

.toast {
    padding: 20px;
    margin: 5px;
    border-radius: 5px;
    color: #fff;
    box-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4) inset, 2px 2px 2px -2px rgba(0, 0, 0, 0.4);
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
    position: absolute;
    top: 40px;
    z-index: 101
}

.notification {
    max-width: 98%;
    padding: 10px 1%;
    background: #a00;
    color: #fff;
    border-radius: 5px;
    box-shadow: 2px 2px 2px -2px rgba(0, 0, 0, 0.4);
    position: absolute;
    top: 0;
    z-index: 101
}

.tabs_holder {
    margin: 5px 0 10px
}

.tabs_button {
    z-index: 2
}

.tabs_button:after {
    content: "";
    display: block;
    clear: both
}

.tabs_button>li {
    padding: 5px 8px 10px;
    background: rgba(93, 178, 255, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 0;
    border-radius: 3px;
    position: relative;
    z-index: 1;
    cursor: pointer
}

.tabs_button>li:before,
.tabs_button>li:after {
    content: "";
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0
}

.tabs_button>li:before {
    background: url(../img/tab_shadow_left.png) no-repeat left top;
    left: -10px
}

.tabs_button>li:after {
    background: url(../img/tab_shadow_right.png) no-repeat right top;
    right: -10px
}

.tabs_button>li:hover {
    background: rgba(45, 195, 232, 0.1)
}

.tabs_button>li.active {
    z-index: 3;
    background: #fff !important;
    color: #efefef;
    padding-bottom: 10px;
    top: -3px
}

.tabs_button>li.active:before,
.tabs_button>li.active:after {
    display: block
}

.tabs_button>li .icon,
.tabs_button>li .form_field .lst>li.n:before,
.form_field .tabs_button>li .lst>li.n:before {
    position: relative;
    z-index: 2
}

.tabs_button.has_actions>li .icon,
.tabs_button.has_actions>li .form_field .lst>li.n:before,
.form_field .tabs_button.has_actions>li .lst>li.n:before {
    opacity: .4
}

.tabs_button.has_actions>li .icon:hover,
.tabs_button.has_actions>li .form_field .lst>li.n:hover:before,
.form_field .tabs_button.has_actions>li .lst>li.n:hover:before {
    color: #a00;
    opacity: 1
}

.tabs_button.has_actions>li.critic .icon,
.tabs_button.has_actions>li.critic .form_field .lst>li.n:before,
.form_field .tabs_button.has_actions>li.critic .lst>li.n:before {
    opacity: 1;
    color: rgba(0, 0, 0, 0.6)
}

.tabs_content {
    clear: both;
    position: relative;
    top: -5px;
    z-index: 2
}

.tabs_content>li {
    display: none;
    padding: 10px;
    min-height: 500px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1)
}

.tabs_content>li:after {
    content: "";
    display: block;
    clear: both
}

.tabs_content>li.active {
    display: block
}

.data_box {
    margin: 0 1% 1%;
    background: #fff;
    border-radius: 5px;
    box-shadow: 2px 4px 2px -2px rgba(0, 0, 0, 0.2);
    position: relative
}

.data_box:after {
    content: "";
    display: block;
    clear: both
}

.data_box .tit {
    padding: 10px;
    border-bottom: 2px solid #efefef
}

.data_box .tit h2 {
    min-height: 18px;
    font-weight: bold;
    color: #efefef
}

.data_box .tit .icon,
.data_box .tit .form_field .lst>li.n:before,
.form_field .data_box .tit .lst>li.n:before {
    padding: 2px;
    color: #efefef
}

.data_box .tit .icon.action:hover,
.data_box .tit .form_field .lst>li.action.n:hover:before,
.form_field .data_box .tit .lst>li.action.n:hover:before {
    color: #000
}

.data_box .tit .icon.action.blink,
.data_box .tit .form_field .lst>li.action.blink.n:before,
.form_field .data_box .tit .lst>li.action.blink.n:before {
    animation: blink2 .1s linear 0s infinite alternate
}

.data_box .tit .ic_help,
.data_box .tit .action_holder,
.data_box .tit .ic_save {
    cursor: pointer;
    position: absolute;
    top: 10px;
    z-index: 3
}

.data_box .con {
    padding: 10px
}

.data_box .con:after {
    content: "";
    display: block;
    clear: both
}

.data_box .tit .action_holder .icon,
.data_box .tit .action_holder .form_field .lst>li.n:before,
.form_field .data_box .tit .action_holder .lst>li.n:before {
    display: block;
    padding: 2px 8px
}

.action_holder>ul,
.action_holder>ul>li>ul {
    display: none;
    min-width: 100px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1)
}

.action_holder li:before {
    display: none;
    content: "\f047";
    font: 16px/100% FontAwesome;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 4px;
    z-index: 1
}

.action_holder li:hover {
    cursor: move
}

.action_holder li:hover,
.action_holder li.open {
    background: rgba(0, 0, 0, 0.05)
}

.action_holder li.open>ul {
    display: block
}

.action_holder>ul {
    color: rgba(0, 0, 0, 0.6);
    font: 12px/18px font-farsi, tahoma, arial, sans-serif;
    position: absolute;
    top: 100%;
    z-index: 1
}

.action_holder>ul>li {
    position: relative
}

.action_holder>ul>li>.l {
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis
}

.action_holder>ul>li>ul {
    position: absolute;
    top: 0;
    z-index: 1
}

.action_holder>ul>li>ul>li {
    padding: 3px 10px;
    white-space: nowrap;
    text-overflow: ellipsis;
    position: relative
}

.action_holder.active>ul {
    display: block
}

.inner_panel {
    clear: both;
    border: 1px solid rgba(0, 0, 0, 0.1)
}

.inner_panel:after {
    content: "";
    display: block;
    clear: both
}

.inner_panel>h2 {
    padding: 5px;
    margin: 0 0 10px;
    background: rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    text-align: center
}

.filters {
    padding: 10px 0 30px;
    margin: 0 0 10px;
    position: relative;
    z-index: 3
}

.filters .filters_btn {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 1
}

.controls {
    margin: 0 0 10px;
    position: relative
}

.controls .ctrl {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    position: relative;
    overflow: hidden;
    cursor: pointer
}

.controls .ctrl:before {
    content: attr(data-text);
    display: block;
    padding: 5px 10px 5px 30px;
    position: relative;
    z-index: 2
}

.controls .ctrl:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    background: rgba(45, 195, 232, 0.1);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    transition: 400ms;
    transform: translate(-50%, -50%)
}

.controls .ctrl:hover:after {
    width: 200%;
    height: 200%
}

.controls .ctrl .icon,
.controls .ctrl .form_field .lst>li.n:before,
.form_field .controls .ctrl .lst>li.n:before {
    position: absolute;
    left: 10px;
    top: 5px;
    z-index: 2
}

.controls .panel {
    display: none;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    overflow: hidden;
    position: absolute;
    top: 100%;
    z-index: 5
}

.controls .panel>ul>li {
    padding: 5px;
    position: relative;
    cursor: pointer
}

.controls .panel>ul>li .icon,
.controls .panel>ul>li .form_field .lst>li.n:before,
.form_field .controls .panel>ul>li .lst>li.n:before {
    font-size: .9em;
    margin: 5px
}

.controls .panel>ul>li.desc {
    background: rgba(0, 0, 0, 0.1);
    text-align: center
}

.controls .panel>ul>li:hover {
    background: rgba(45, 195, 232, 0.1)
}

.controls .panel.active {
    display: block
}

.action_file {
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    cursor: pointer;
    -webkit-appearance: none
}

.filters:after,
.controls:after {
    content: "";
    display: block;
    clear: both
}

@keyframes blink2 {
    from {
        color: #f00;
        box-shadow: 0 0 0 4px #f00
    }

    to {
        color: #efefef
    }
}

.chart_holder {
    position: relative;
    margin: 0 0 20px;
    overflow: auto
}

.chart_holder .legend {
    font: 14px/18px arial;
    position: absolute;
    top: 60px;
    z-index: 1
}

.chart_holder .legend>ul>li {
    margin-bottom: 5px
}

.chart_holder .legend>ul>li>span {
    width: 18px;
    height: 18px;
    border-radius: 50%
}

.canvas {
    margin: 0
}

.donut_info {
    text-align: center;
    position: absolute;
    bottom: 41%;
    z-index: 1
}

.donut_info .key,
.donut_info .value {
    display: block
}

.donut_info .key {
    border-bottom: 1px solid rgba(0, 0, 0, 0.2)
}

.donut_info .value {
    font-weight: bold
}

.form_holder {
    max-width: 600px;
    margin: 0 0 10px
}

.form_holder:after {
    content: "";
    display: block;
    clear: both
}

.form_field {
    min-height: 38px;
    margin: 0 0 10px;
    position: relative
}

.form_field.w {
    width: 100%;
    float: none
}

.form_field:after {
    content: "";
    display: block;
    clear: both
}

.form_field .lab {
    width: 30%;
    min-height: 20px;
    padding: 6px 0;
    white-space: nowrap;
    overflow: hidden
}

.form_field .lnk {
    display: block;
    background: #fafafa;
    min-height: 20px;
    margin: 0 2%;
    padding: 6px 0;
    color: #efefef;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    z-index: 2
}

.form_field .lnk:hover {
    color: #000
}

.form_field .lst>li {
    margin: 0 0 5px;
    padding: 0 0 5px;
    border-bottom: 1px solid rgba(45, 195, 232, 0.1);
    position: relative;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.form_field .lst>li.n {
    color: #efefef;
    cursor: pointer
}

.form_field .lst>li.n:before,
.form_field .lst>li.n:after {
    display: block;
    position: absolute;
    top: 0
}

.form_field .lst>li.n:before {
    content: "\f067";
    z-index: 1
}

.form_field .lst>li.n:after {
    content: "";
    width: 100%;
    height: 100%;
    z-index: 2
}

.form_field .lst>li.n:hover {
    color: #000
}

.form_field .lst .icon,
.form_field .lst>li.n:before {
    cursor: pointer
}

.form_field .lst .icon:hover,
.form_field .lst>li.n:hover:before {
    color: #000
}

.form_field .fld {
    width: 70%;
    position: relative
}

.form_field .fld .box {
    margin: 0 2% 5px
}

.form_field .fld .ic_spinner {
    opacity: .4;
    position: absolute;
    top: 10px;
    z-index: 2
}

.form_field .fld:hover .ic_spinner {
    opacity: 1
}

.form_field .fld .ic_play {
    opacity: .8;
    position: absolute;
    top: 6px;
    z-index: 2;
    cursor: pointer
}

.form_field .fld .ic_play:hover {
    opacity: 1
}

.form_field .fld .percent {
    display: block;
    width: 0;
    height: 100%;
    margin: 0 2%;
    background: #efefef;
    border-radius: 3px;
    opacity: .4;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1
}

.form_field .fld .pwd_toggle {
    padding: 5px;
    background: #fff;
    color: rgba(0, 0, 0, 0.4);
    position: absolute;
    top: 2px;
    z-index: 1;
    cursor: pointer
}

.form_field .fld_active {
    width: 30px;
    position: absolute;
    top: 0;
    z-index: 1
}

.form_field .act {
    padding: 5px;
    background: #fff;
    color: rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    position: absolute;
    top: 2px;
    z-index: 1;
    cursor: pointer
}

.form_field .act:hover {
    color: #000
}

.form_field .option_holder {
    width: 70%;
    position: relative
}

.form_field .cnt {
    max-height: 100px;
    overflow: auto
}

.form_field.disabled .lab {
    opacity: .4
}

.fld_items>.icon,
.form_field .lst.fld_items>li.n:before {
    color: #efefef;
    position: absolute;
    top: 5px;
    z-index: 1;
    cursor: pointer
}

.fld_items>.icon:hover,
.form_field .lst.fld_items>li.n:hover:before {
    color: #eaeaea
}

.fld_items .items {
    display: block;
    min-height: 18px
}

.fld_items .view {
    display: none;
    width: 80%;
    padding: 2%;
    background: #fff;
    border-radius: 3px;
    position: absolute;
    top: 100%;
    z-index: 2
}

.fld_items .view.active {
    display: block
}

.fld_items .form_field {
    margin-bottom: 0
}

.input_box,
.form_field .cnt,
.fld_items .items,
.txt,
.fil,
.txta,
.slc,
.slc_over,
.slc_inner {
    width: 92%;
    width: calc(92% - 2px);
    padding: 5px 2%;
    margin: 0 2%;
    background: #fff;
    color: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 3px
}

.txt,
.fil {
    direction: ltr
}

.txta {
    resize: none;
    height: 100px
}

.slc {
    height: 28px;
    opacity: 0
}

.chk {
    width: 24px;
    height: 31px;
    opacity: 0
}

.tag {
    display: block;
    padding: 9px 0
}

.val {
    display: block;
    padding: 6px 2%;
    margin: 0 2%;
    color: #efefef
}

.btn {
    background: #efefef;
    color: #fff !important;
    border-radius: 3px;
    cursor: pointer
}

.btn.e {
    background: #a00
}

.btn:first-child {
    margin: 0 0 3px
}

a.btn {
    position: relative;
    overflow: hidden;
    z-index: 1
}

a.btn:before {
    content: attr(data-text);
    display: block;
    padding: 5px 10px;
    position: relative;
    z-index: 2
}

a.btn:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    background: #eaeaea;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    transition: 400ms;
    transform: translate(-50%, -50%)
}

a.btn.e:after {
    background: #c00
}

a.btn:hover:after {
    width: 200%;
    height: 200%
}

a.btn.i .icon,
a.btn.i .form_field .lst>li.n:before,
.form_field a.btn.i .lst>li.n:before {
    position: absolute;
    top: 5px;
    z-index: 3
}

a.btn.i.busy {
    background: #c1c107
}

a.btn.i.busy .icon,
a.btn.i.busy .form_field .lst>li.n:before,
.form_field a.btn.i.busy .lst>li.n:before {
    animation: rotate 2s linear 0s infinite normal
}

input.btn {
    padding: 5px 10px;
    line-height: 18px
}

input.btn:hover {
    background: #eaeaea
}

input.btn.e:hover {
    background: #c00
}

.btn_txt {
    padding: 5px 10px;
    line-height: 18px;
    color: #1a73e8;
    cursor: pointer
}

.btn_txt:hover {
    color: #000
}

.slc_over {
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1
}

.slc_over.var {
    color: #f57508;
    font-weight: bold
}

.opt_over {
    min-height: 20px;
    max-height: 200px;
    overflow: auto;
    margin: 0 2%;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
    position: absolute;
    top: 30px;
    left: 0;
    right: 0;
    z-index: 3;
    display: none
}

.opt_over.active {
    display: block
}

.opt_over>li {
    min-height: 20px;
    padding: 5px 2%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer
}

.opt_over>li:hover {
    background: rgba(0, 0, 0, 0.05)
}

.opt_over>li.hover {
    background: rgba(0, 120, 200, 0.6);
    color: #fff
}

.opt_over>li.selected {
    color: rgba(0, 0, 0, 0.2);
    background: #fff !important;
    cursor: default
}

.opt_over>li.header {
    font-weight: bold;
    background: rgba(0, 0, 0, 0.1) !important;
    color: #000 !important;
    text-align: center;
    cursor: default
}

.opt_over>li.var {
    font-weight: bold;
    color: #f57508
}

.opt_over>li.var.selected {
    color: #f9b67d
}

.opt_over>li.var .var_action {
    color: rgba(0, 0, 0, 0.4)
}

.opt_over>li.var:hover .var_action {
    color: #f57508
}

.slc_inner {
    position: absolute;
    top: 0;
    right: 0;
    left: 0
}

.slc_inner .slc_over {
    position: static;
    padding: 0;
    margin: 0;
    border: 0;
    width: 100%;
    border-radius: 0
}

.slc_basket {
    max-height: 300px;
    padding: 0 0 1px;
    overflow: auto
}

.slc_basket:after {
    content: "";
    display: block;
    clear: both
}

.slc_basket>li {
    max-width: 85%;
    padding: 0 20px 0 5px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    direction: ltr;
    position: relative;
    overflow: hidden
}

.slc_basket>li.var {
    color: #f57508;
    font-weight: bold
}

.slc_basket>li .remove {
    display: block;
    width: 18px;
    height: 18px;
    color: rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 0;
    right: 0;
    line-height: 1em;
    cursor: pointer
}

.slc_basket>li .remove:hover {
    color: #a00
}

.slc_pager {
    display: block;
    margin: 0 0 5px;
    padding: 0 0 5px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1)
}

.slc_pager:after {
    content: "";
    display: block;
    clear: both
}

.slc_pager .p {
    float: left;
    min-width: 16px;
    padding: 2px 5px;
    margin: 2px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    text-align: center;
    cursor: pointer
}

.slc_pager .p:hover {
    background: #eee
}

.slc_pager .p.active {
    background: #efefef;
    color: #fff
}

@keyframes blink {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.slc_basket>li.slc_pending {
    padding: 0 25px 0 5px;
    background: #efefef;
    color: #fff;
    animation: blink .5s linear 0s infinite alternate
}

.slc_basket>li.slc_pending:after {
    content: "/...";
    font-weight: bold;
    position: absolute;
    top: 0;
    right: 5px;
    z-index: 1
}

.chk_box {
    display: block;
    width: 30px;
    height: 30px;
    margin: 0 auto;
    position: relative
}

.chk_over {
    display: block;
    width: 24px;
    height: 24px;
    font-size: 24px;
    position: absolute;
    top: 5px;
    z-index: 1;
    cursor: pointer
}

.chk_over.on:after {
    content: "\f046"
}

.chk_over.off:after {
    content: "\f096"
}

.fld.disabled,
.chk_box.disabled {
    opacity: .4
}

.fld.disabled:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1
}

.fld.disabled .txt,
.fld.disabled .txta,
.fld.disabled .slc,
.fld.disabled .slc_over {
    background: rgba(0, 0, 0, 0.05);
    cursor: default
}

.fld.disabled .chk_over,
.btn.disabled {
    opacity: .4;
    cursor: default
}

.btn.disabled:hover:after {
    display: none
}

.fld.pending .slc_pending {
    display: block
}

.fld.pending .opt_over {
    display: none !important
}

.json_holder {
    display: block
}

.json_holder .number {
    color: #ad7fa8
}

.json_holder .key {
    color: #204a87
}

.json_holder .string {
    color: #4e9a06
}

.json_holder .boolean {
    color: #c4a000
}

.json_holder .null {
    color: #babdb6
}

.btn_holder {
    position: relative
}

.btn_holder:after {
    content: "";
    display: block;
    clear: both
}

.btn_holder.waiting * {
    opacity: 0
}

.btn_holder.waiting:before {
    content: "\f1ce";
    display: block;
    width: 18px !important;
    height: 18px !important;
    margin: 6px;
    color: #efefef;
    text-align: center;
    position: absolute;
    top: 0;
    z-index: 1;
    animation: rotate 2s ease-in-out 0s infinite normal;
    font: 18px/18px FontAwesome
}

@keyframes rotate {
    from {
        transform: rotateZ(-135deg)
    }

    to {
        transform: rotateZ(585deg)
    }
}

.icon.busy,
.form_field .lst>li.busy.n:before {
    animation: rotate 2s ease-in-out 0s infinite normal
}

.params_holder {
    min-height: 50px;
    position: relative
}

.params_holder:after {
    content: "";
    display: block;
    clear: both
}

.params_holder.waiting:before {
    content: "\f1ce";
    display: block;
    width: 30px !important;
    height: 30px !important;
    margin: 0;
    color: #efefef;
    text-align: center;
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 1;
    animation: rotate 2s ease-in-out 0s infinite normal;
    font: 30px/30px FontAwesome
}

.btn_add {
    width: 40px;
    height: 40px;
    background: #efefef;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    position: fixed;
    bottom: 20px;
    z-index: 10
}

.btn_add:after {
    content: "+";
    display: block;
    width: 100%;
    height: 100%;
    font: 40px/40px arial;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1
}

.btn_add:hover {
    background: #eaeaea
}

.btn_extra {
    position: relative;
    z-index: 2
}

.btn_extra:after {
    content: "";
    display: block;
    clear: both
}

.btn_extra .ic {
    display: block;
    width: 20px;
    height: 20px;
    padding: 4px;
    margin: 0;
    color: #fff;
    background: #efefef;
    border-radius: 3px;
    text-align: center;
    cursor: pointer;
    position: absolute;
    top: 0;
    z-index: 1
}

.btn_extra .ic:before {
    content: "\25bc";
    font: 14px/20px arial
}

.btn_extra .ic:hover {
    background: #eaeaea
}

.btn_extra .btn {
    margin: 0
}

.btn_extra .more {
    display: none;
    background: #fff;
    max-height: 140px;
    border-radius: 3px;
    overflow: auto;
    position: absolute;
    top: 100%;
    z-index: 1
}

.btn_extra .more>li {
    margin: 0 0 3px;
    white-space: nowrap
}

.btn_extra .more>li.h {
    padding: 4px 10px;
    color: #000;
    border: solid rgba(0, 0, 0, 0.1);
    border-width: 1px 0
}

.btn_extra .more>li.i {
    padding: 2px 10px;
    cursor: pointer
}

.btn_extra .more>li.i:hover {
    background: rgba(45, 195, 232, 0.1)
}

.btn_extra.active .more {
    display: block
}

.btn_extra:first-child {
    margin: 0 0 3px
}

.btn_wide {
    display: block;
    clear: both;
    padding: 3px;
    text-align: center;
    cursor: pointer;
    color: #efefef;
    border-top: 1px solid rgba(0, 0, 0, 0.2)
}

.btn_wide:hover {
    color: #000
}

.item_list {
    clear: both
}

.item_list>li {
    margin: 0 0 5px
}

.item_list>li:before {
    content: "-";
    margin: 0 5px
}

.divider {
    height: 20px;
    margin: 5px 0 30px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    clear: both
}

.v_gap_100 {
    display: block;
    clear: both;
    height: 100px
}

.p {
    padding: 0;
    margin: 0 0 20px
}

.p_color {
    padding: 5px;
    margin: 0 0 10px;
    background: rgba(45, 195, 232, 0.1);
    border-radius: 3px
}

.h2 {
    margin: 0 0 20px
}

.mono_font {
    font: 14px/1.4em Courier, monospace
}

.cli_holder {
    padding: 10px;
    min-height: 500px;
    background: #000;
    color: #ccc;
    position: relative;
    font: 14px/1.4em Courier, monospace
}

.cli_holder textarea {
    display: block;
    width: 100%;
    background: none;
    color: #ccc;
    resize: none;
    font: 14px/1.5em Courier, monospace
}

.cli_holder .rs {
    color: #ccf
}

.cli_holder .cr {
    display: block;
    height: 0;
    color: #ffa
}

.cli_holder .cr:before {
    content: "CLI > "
}

.cli_holder .cm {
    width: calc(100% - 50px);
    margin-left: 50px
}

.cli_holder .suggest {
    display: none;
    max-height: 200px;
    background: #555;
    border: 1px solid #666;
    border-radius: 3px;
    overflow: auto;
    position: absolute;
    left: 10px;
    z-index: 1
}

.cli_holder .suggest.active {
    display: block
}

.cli_holder .suggest>li {
    padding: 0 10px;
    cursor: pointer
}

.cli_holder .suggest>li:hover,
.cli_holder .suggest>li.active {
    background: #888;
    color: #fff
}

.period_holder .ind,
.period_holder .hou {
    background: #fff;
    box-shadow: -1px -1px 0 rgba(0, 0, 0, 0.1) inset
}

.period_holder .ind:after,
.period_holder .hou:after {
    content: "";
    display: block;
    clear: both
}

.period_holder .ind {
    margin-bottom: 5px
}

.period_holder .con>li {
    display: none
}

.period_holder .ind>li,
.period_holder .hou>li {
    padding: 5px 0;
    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1) inset;
    text-align: center;
    overflow: hidden;
    cursor: pointer
}

.period_holder .ind>li {
    width: 25%;
    color: rgba(0, 0, 0, 0.2);
    position: relative
}

.period_holder .hou>li {
    width: 20%
}

.period_holder .ind>li.on {
    background: #fff;
    color: rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 0 1px #000 inset
}

.period_holder .con>li.on {
    display: block
}

.period_holder .hou>li.on {
    background: #efefef;
    color: #fff
}

.period_holder .ind>li.has:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-left-color: #efefef;
    border-top-color: #efefef;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1
}

.more_options {
    clear: both
}

.more_options>.panel {
    display: none
}

.more_options>.panel:after {
    content: "";
    display: block;
    clear: both
}

.more_options>.handle {
    display: block;
    padding: 5px;
    margin: 10px 0;
    background: rgba(0, 0, 0, 0.05);
    cursor: pointer
}

.more_options>.handle:after {
    content: "\f0d7";
    margin: 0 10px;
    font: 1em/100% FontAwesome
}

.more_options.active>.panel {
    display: block
}

.more_options.active>.handle:after {
    content: "\f0d8"
}

.gen_scroll {
    max-height: 300px;
    overflow: auto
}

.tick_holder {
    margin: 10px 1% 20px;
    border: 1px solid rgba(0, 0, 0, 0.1)
}

.tick_holder>ul {
    font-weight: bold;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1)
}

.tick_holder>ul .m2 {
    cursor: pointer
}

.tick_holder>ul .m2:before {
    content: "\f096";
    margin: 5px;
    font: 12px/12px FontAwesome
}

.tick_holder>ul .m2[data-active="1"]:before {
    content: "\f046"
}

.tick_holder ul>li {
    padding: 0 1%
}

.tick_holder ul>li:after {
    content: "";
    display: block;
    clear: both
}

.tick_holder ul>li:nth-child(even) {
    background: rgba(0, 0, 0, 0.05)
}

.tick_holder .m1 {
    display: block;
    padding: 5px 0
}

.tick_holder .m1.sup {
    color: #efefef;
    font-weight: bold
}

.tick_holder .m1.sub {
    font-size: 0.9em
}

.tick_holder .m2 {
    width: 70px;
    white-space: nowrap;
    overflow: hidden;
    text-align: center
}

.tick_holder>ul>li>.m2 {
    padding: 5px 0
}

.context_list {
    border-top: 1px solid rgba(0, 0, 0, 0.1)
}

.context_list>li {
    padding: 5px 1%;
    cursor: pointer;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1)
}

.context_list>li:hover {
    color: #000;
    background: rgba(45, 195, 232, 0.1)
}

.context_list>li.inactive {
    color: #ccc;
    background: none !important;
    cursor: default
}

.no_wrap_hidden,
.bread_crumb,
.bread_crumb>ul,
.side_col>h3,
.column>h3,
.column_item .trip,
.column_item .part,
.column_item .sec {
    white-space: nowrap;
    overflow: hidden
}

.page_holder {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    overflow: hidden
}

.page_dock {
    background: #efefef;
    position: absolute;
    left: 0;
    right: 0;
    z-index: 3
}

.page_dock:after {
    content: "";
    display: block;
    clear: both
}

.page_dock.t {
    height: 40px;
    top: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2)
}

.page_dock.b {
    bottom: 0;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05) inset
}

.page_side {
    width: 230px;
    background: #fff;
    overflow: hidden;
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    transition: 200ms
}

.page_side:after {
    content: "";
    display: none;
    width: 17px;
    height: 100%;
    background: #fff;
    position: absolute;
    top: 0;
    z-index: 1
}

.sheet_outer {
    background: rgba(0, 0, 0, 0.05);
    overflow: hidden;
    position: relative
}

.sheet_outer .sht_tgl {
    display: none;
    width: 40px;
    padding: 5px 0;
    line-height: 18px;
    background: #efefef;
    color: #fff;
    cursor: pointer;
    position: absolute;
    top: 0;
    z-index: 1
}

.sheet_outer .sht_tgl:hover {
    background: #eaeaea
}

.sheet_outer.exceeded .sht_tgl {
    display: block
}

.sheet_outer.exceeded .sht_tgl:after {
    content: "\f065"
}

.sheet_outer.exceeded.all .sht_tgl:after {
    content: "\f066"
}

.sheet_outer.exceeded.all .sheet_inner {
    width: 100% !important
}

.sheet_inner {
    margin: 0
}

.sheet_finder {
    display: none;
    width: 180px;
    padding: 5px 0;
    border-radius: 3px;
    background: #efefef;
    position: absolute;
    bottom: 100%;
    z-index: 1
}

.sheet_finder.open {
    display: block
}

.sheet_opt_holder {
    position: absolute;
    bottom: 100%;
    z-index: 1
}

.sheet_opt_holder .opt {
    display: none;
    width: 100px;
    background: #efefef;
    color: #fff;
    border-radius: 3px;
    font-size: .9em;
    position: absolute;
    bottom: 100%;
    z-index: 1
}

.sheet_opt_holder .opt>li {
    padding: 5px 10px;
    position: relative;
    cursor: pointer;
    box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.05) inset
}

.sheet_opt_holder .opt>li:hover {
    background: rgba(255, 255, 255, 0.2)
}

.sheet_opt_holder .opt .sheet_file {
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    cursor: pointer;
    -webkit-appearance: none
}

.sheet_opt_holder.open .opt {
    display: block
}

.page_dock.b .sheet_btn,
.page_dock.b .sheet_act {
    background: #efefef;
    color: #fff;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    position: relative;
    cursor: pointer
}

.page_dock.b .sheet_btn:hover,
.page_dock.b .sheet_act:hover {
    background: rgba(255, 255, 255, 0.2)
}

.page_dock.b .sheet_btn.active {
    background: rgba(0, 0, 0, 0.2)
}

.page_dock.b .sheet_btn.red {
    background: #c10404
}

.page_dock.b .sheet_btn * {
    display: block
}

.page_dock.b .sheet_btn .tx {
    padding: 5px 10px;
    white-space: nowrap
}

.page_dock.b .sheet_btn .ed {
    font-size: 10px;
    line-height: 18px;
    position: absolute;
    top: 0
}

.page_dock.b .sheet_act {
    line-height: 18px
}

.page_dock.b .sheet_btn .ed,
.page_dock.b .sheet_act {
    width: 40px;
    padding: 5px 0;
    text-align: center
}

@keyframes flash {
    0% {
        background-color: transparent
    }

    20% {
        background-color: transparent
    }

    40% {
        background-color: transparent
    }

    60% {
        background-color: transparent
    }

    80% {
        background-color: rgba(255, 255, 255, 0.4)
    }

    100% {
        background-color: rgba(255, 255, 255, 0.4)
    }
}

.page_dock.b .sheet_act.active,
.page_dock.b .sheet_btn.changed .tx {
    animation: flash .5s linear 0s infinite alternate
}

.side_scroll {
    direction: ltr;
    position: absolute;
    top: 40px;
    left: 0;
    right: -17px;
    bottom: -17px;
    overflow: scroll
}

.page_content {
    position: absolute;
    top: 40px;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    overflow: auto;
    transition: 200ms
}

.bread_crumb {
    padding: 5px 1%;
    font-size: 12px
}

.bread_crumb .icon,
.bread_crumb .form_field .lst>li.n:before,
.form_field .bread_crumb .lst>li.n:before {
    font-size: 16px
}

.bread_crumb>ul>li:before {
    font: 1em/100% FontAwesome;
    margin-top: 3px
}

.h1 {
    position: relative;
    height: 0;
    overflow: hidden
}

.h1:after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.1) 0, transparent 100%);
    position: absolute;
    left: 0;
    bottom: 0
}

#page_content {
    position: relative;
    z-index: 1
}

#page_content:after,
#page_content:before {
    display: block;
    position: absolute
}

#page_content:after {
    content: "";
    width: 80px;
    height: 80px;
    margin: -40px;
    border: 4px solid #efefef;
    border-left-color: transparent;
    border-radius: 50%;
    top: 80px;
    left: 50%;
    z-index: 101;
    animation: rotate 2s ease-in-out 0s infinite normal
}

#page_content:before {
    content: "";
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #fff;
    z-index: 100
}

#page_content.loaded:after,
#page_content.loaded:before {
    display: none
}

.footer {
    padding: 10px 0;
    text-align: center
}

.page_dock.t>.toggle {
    width: 40px;
    height: 40px;
    color: #fff;
    font-size: 20px
}

.page_dock.t>.toggle:after {
    padding: 10px
}

.page_dock.t>.nav_toggle:after {
    content: "\f0c9"
}

.page_dock.t>.nav_toggle:hover {
    background: rgba(0, 0, 0, 0.1)
}

.page_dock.t>.tray_toggle {
    display: block;
    padding: 5px 10px;
    position: absolute;
    background: #fff;
    border-radius: 3px;
    box-shadow: 1px -1px 2px rgba(0, 0, 0, 0.2);
    transform: rotateZ(90deg);
    cursor: pointer;
    transition: 200ms
}

.page_dock.t>.tray_toggle .icon,
.page_dock.t>.tray_toggle .form_field .lst>li.n:before,
.form_field .page_dock.t>.tray_toggle .lst>li.n:before {
    margin: 0 5px
}

.page_dock.t>.tray_toggle .effector {
    display: none;
    position: absolute;
    width: 2px;
    height: 2px;
    border: 5px solid #ff8100;
    border-radius: 50%;
    left: 0;
    top: 0;
    opacity: 0
}

.page_dock.t>.tray_toggle .effector.active {
    display: block;
    animation: focus2 .3s ease-in 0s 1 normal
}

.page_dock.t>.tray_toggle .effector.l1 {
    animation-delay: 1s
}

.page_dock.t>.tray_toggle .effector.l2 {
    animation-delay: 1.2s
}

.page_dock.t>.tray_toggle .effector.l3 {
    animation-delay: 1.4s
}

.page_dock.t>.logo {
    padding: 2px 5px
}

.page_dock.t>.logo img {
    width: auto;
    height: 30px
}

@keyframes focus2 {
    from {
        transform: scale(100);
        opacity: 0
    }

    to {
        transform: scale(0);
        opacity: 1
    }
}

.profile_toggle {
    display: block;
    max-width: 160px;
    height: 100%;
    padding: 0 10px 0 50px;
    overflow: hidden;
    cursor: pointer;
    position: absolute;
    top: 0
}

.profile_toggle:after {
    content: "";
    display: block;
    width: 2px;
    height: 60%;
    background: #fff;
    opacity: .4;
    position: absolute;
    top: 20%
}

.profile_toggle>.img {
    display: block;
    width: 30px;
    height: 30px;
    border: 1px solid #fff;
    border-radius: 50%;
    overflow: hidden;
    opacity: .6;
    position: absolute;
    top: 5px;
    left: 10px
}

.profile_toggle>.img:before,
.profile_toggle>.img:after {
    content: "";
    display: block;
    background: #fff;
    border-radius: 50%
}

.profile_toggle>.img:before {
    width: 12px;
    height: 12px;
    margin: 4px auto 2px
}

.profile_toggle>.img:after {
    width: 100%;
    height: 100%
}

.profile_toggle>.name {
    display: block;
    padding: 5px;
    color: #fff;
    line-height: 30px;
    white-space: nowrap
}

.profile_toggle:hover {
    background: rgba(0, 0, 0, 0.1)
}

.profile_panel {
    display: none;
    width: 150px;
    background: #fff;
    text-align: center;
    position: absolute;
    top: 40px;
    z-index: 1
}

.profile_panel .name {
    display: block;
    padding: 5px;
    margin: 0 0 10px;
    background: rgba(0, 0, 0, 0.2);
    opacity: .6
}

.profile_panel .timer {
    display: block;
    margin: 0 0 10px;
    font-weight: bold
}

.profile_panel .action {
    float: none
}

.profile_panel.active {
    display: block
}

.lang_list {
    margin: 0 0 10px
}

.lang_list:after {
    content: "";
    display: block;
    clear: both
}

.lang_list>li {
    float: left;
    width: 50%;
    padding: 5px 0;
    cursor: pointer
}

.lang_list>li:before {
    content: "";
    display: inline-block;
    width: 30px;
    height: 15px;
    margin: 0 5px;
    vertical-align: middle
}

.lang_list>li.en:before {
    background: url("../img/en.jpg")
}

.lang_list>li.fa:before {
    background: url("../img/fa.jpg")
}

.lang_list>li.ar:before {
    background: url("../img/ar.jpg")
}

.lang_list>li.tr:before {
    background: url("../img/tr.jpg")
}

.lang_list>li.fr:before {
    background: url("../img/fr.jpg")
}

.lang_list>li:hover {
    background: rgba(0, 0, 0, 0.05)
}

.side_list {
    margin: 0 0 30px;
    background: #fff
}

.side_list li {
    position: relative
}

.side_list li>a {
    display: block;
    padding: 10px;
    color: rgba(0, 0, 0, 0.6)
}

.side_list li>a>.icon,
.side_list .form_field li>a.lst>li.n:before,
.form_field .side_list li>a.lst>li.n:before {
    width: 20px
}

.side_list>li:before {
    content: "";
    display: none;
    width: 3px;
    height: 40px;
    background: #efefef;
    position: absolute;
    top: 0;
    z-index: 1
}

.side_list>li:after {
    content: "";
    display: block;
    width: 100%;
    height: 5px;
    background: url(../img/box_shadow_center.png) no-repeat center bottom;
    opacity: .4;
    position: absolute;
    bottom: -5px;
    left: 0;
    z-index: 1
}

.side_list>li>.toggle {
    display: block;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 4px
}

.side_list>li>.toggle:after {
    content: "\f107";
    padding: 8px;
    font-size: 14px
}

.side_list>li.active>.toggle:after {
    content: "\f106"
}

.side_list>li:hover,
.side_list>li.active {
    background: #fbfbfb
}

.side_list>li:hover:before,
.side_list>li.active:before {
    display: block
}

.side_list>li:hover>a,
.side_list>li.active>a {
    color: #efefef
}

.side_list ul {
    display: none;
    background: rgba(0, 0, 0, 0.02);
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2) inset;
    position: relative
}

.side_list ul:before {
    content: "";
    width: 1px;
    background: #efefef;
    opacity: .2;
    position: absolute;
    top: 0;
    bottom: 15px;
    z-index: 1
}

.side_list ul li:before,
.side_list ul li:after {
    content: "";
    display: block;
    background: #efefef;
    position: absolute;
    z-index: 1
}

.side_list ul li:before {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    opacity: .4;
    top: 18px
}

.side_list ul li:after {
    width: 0;
    height: 2px;
    bottom: 0;
    transition: 200ms
}

.side_list ul li:hover,
.side_list ul li.active {
    background: rgba(0, 0, 0, 0.05)
}

.side_list ul li:hover:after {
    width: 100%
}

.side_list ul li:hover>a,
.side_list ul li.active>a {
    color: #000
}

.version {
    display: block;
    padding: 5px 10px;
    color: #efefef
}

.version a {
    color: #efefef
}

.version a:hover {
    color: #000
}

.side_search {
    width: 90%;
    padding: 5px 5%;
    background: #fff;
    position: absolute;
    left: 0;
    top: 40px;
    z-index: 1
}

.side_search input[type=text] {
    width: 100%;
    background: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1)
}

.main_col {
    overflow: auto
}

.side_col {
    background: rgba(93, 178, 255, 0.05);
    box-shadow: 0 0 0 5px rgba(93, 178, 255, 0.05)
}

.side_col>h3,
.column>h3 {
    padding: 0 0 5px;
    margin: 0 1% 10px;
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
    font-weight: bold
}

.side_col>h3>.count,
.column>h3>.count {
    padding: 0 5px
}

.side_col>h3>.count:before,
.column>h3>.count:before {
    content: ": "
}

.column {
    width: 25%;
    min-width: 300px
}

.monitor_list>li {
    padding: 0 0 10px;
    margin: 0 1%;
    position: relative
}

.monitor_list>li:after,
.monitor_list>li:before {
    content: "";
    display: none;
    width: 100%;
    height: 10px;
    position: absolute;
    bottom: 0
}

.monitor_list>li:after {
    background: url(../img/box_shadow_left.png) no-repeat left bottom;
    left: 0
}

.monitor_list>li:before {
    background: url(../img/box_shadow_right.png) no-repeat right bottom;
    right: 0
}

.column_item {
    padding: 10px 2%;
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    box-shadow: 1px 2px 1px -1px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    position: relative
}

.column_item:after {
    content: "";
    display: block;
    clear: both
}

.column_item>.icon,
.form_field .lst.column_item>li.n:before {
    width: 18px;
    padding: 5px;
    border-radius: 50%;
    color: #fff;
    background: #ccc;
    box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2), 1px 1px 2px #fff, 1px 1px 1px rgba(0, 0, 0, 0.2) inset;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    position: absolute;
    top: 5px;
    z-index: 4
}

.column_item>.icon:before,
.form_field .lst.column_item>li.n:before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    position: absolute;
    top: 1px;
    left: 2px;
    z-index: 3
}

.column_item.paused>.icon,
.form_field .lst.column_item.paused>li.n:before {
    background: #ccc
}

.column_item.invalid>.icon,
.form_field .lst.column_item.invalid>li.n:before {
    background: #ccc
}

.column_item.unavailable>.icon,
.form_field .lst.column_item.unavailable>li.n:before {
    background: #ccc
}

.column_item.idle>.icon,
.form_field .lst.column_item.idle>li.n:before {
    background: #f00
}

.column_item.ringing>.icon,
.form_field .lst.column_item.ringing>li.n:before {
    background: #fa0
}

.column_item.in_use>.icon,
.form_field .lst.column_item.in_use>li.n:before {
    background: #0f0
}

.column_item.hold>.icon,
.form_field .lst.column_item.hold>li.n:before {
    background: #7a00ff
}

.column_item.deactivate>.icon,
.form_field .lst.column_item.deactivate>li.n:before {
    background: #fa0
}

.column_item.ok>.icon,
.form_field .lst.column_item.ok>li.n:before {
    background: #0f0
}

.column_item.busy>.icon,
.form_field .lst.column_item.busy>li.n:before {
    background: #fa0
}

.column_item.waiting {
    cursor: pointer
}

.column_item.waiting>.icon,
.form_field .lst.column_item.waiting>li.n:before {
    animation: blink .3s linear 0s infinite alternate
}

.column_item.processing>.icon,
.form_field .lst.column_item.processing>li.n:before {
    animation: rotate .8s linear 0s infinite normal
}

.column_item .in_out {
    display: inline-block;
    width: 18px;
    height: 16px;
    vertical-align: middle;
    overflow: hidden
}

.column_item .in_out.ic_dir_down {
    color: #08f
}

.column_item .in_out.ic_dir_up {
    color: #f50
}

.column_item .queue {
    display: inline-block;
    padding: 0 5px;
    color: #fff;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 3px
}

.column_item .direct {
    color: #efefef
}

.column_item .part {
    width: 50%
}

.column_item .trip,
.column_item .part,
.column_item .sec {
    min-height: 18px;
    margin: 0 0 5px;
    position: relative;
    z-index: 2
}

.column_item .trip>.icon,
.column_item .form_field .lst.trip>li.n:before,
.form_field .column_item .lst.trip>li.n:before,
.column_item .part>.icon,
.column_item .form_field .lst.part>li.n:before,
.form_field .column_item .lst.part>li.n:before,
.column_item .sec>.icon,
.column_item .form_field .lst.sec>li.n:before,
.form_field .column_item .lst.sec>li.n:before {
    width: 20px;
    color: #bbb;
    font-size: 16px
}

.column_item .trip>.name,
.column_item .part>.name,
.column_item .sec>.name {
    display: block
}

.column_item.s {
    background: #eee
}

.column_item .l {
    color: #bbb
}

.column_item .waiting_calls {
    display: none;
    padding: 10px 2%;
    background: #f9f698;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
    overflow: auto
}

.column_item .waiting_calls .r {
    display: block;
    margin: 0 0 5px
}

.column_item .waiting_calls .r>.icon,
.column_item .waiting_calls .form_field .lst.r>li.n:before,
.form_field .column_item .waiting_calls .lst.r>li.n:before {
    width: 20px;
    font-size: 16px
}

.column_item .waiting_calls .r>.ic_phone {
    color: #fa0
}

.column_item .waiting_calls .r.hold>.ic_phone {
    color: #7a00ff
}

.column_item .waiting_calls .r .tick {
    margin: 0 5px
}

.column_item .waiting_calls .r .n {
    font-weight: bold
}

.column_item.more .waiting_calls {
    display: block
}

.grid_list>li {
    width: 220px
}

.dash_list {
    min-height: 500px
}

.dash_list:after {
    content: "";
    display: block;
    clear: both
}

.dash_list>li {
    float: left;
    margin: 0 5px 5px 0;
    border: 1px solid #efefef;
    border-radius: 3px;
    position: absolute;
    z-index: 1;
    overflow: hidden
}

.dash_list>li:after {
    border-left: 1px solid #2dc3e8;
    width: 20px;
    right: 0;
    bottom: 20px;
    top: 0
}

.dash_list>li:before {
    border-top: 1px solid #2dc3e8;
    height: 20px;
    right: 0;
    bottom: 0;
    left: 0
}

.dash_list>li>.icon,
.form_field .dash_list>li.lst>li.n:before {
    display: block;
    padding: 5px;
    cursor: pointer;
    position: absolute;
    top: 0;
    z-index: 3
}

.dash_list>li>.icon:hover,
.form_field .dash_list>li.lst>li.n:hover:before {
    color: #000
}

.dash_item>.icon,
.form_field .lst.dash_item>li.n:before {
    min-width: 16px
}

.dash_item>.ic_action {
    left: 0
}

.dash_item>.toggle_screen {
    right: 0
}

.dash_item .data_table_holder {
    margin: 5px
}

.item_actions {
    display: none;
    background: #fff;
    border-radius: 3px;
    position: absolute;
    top: 30px;
    left: 0;
    z-index: 2
}

.item_actions>li {
    padding: 2px 10px;
    cursor: pointer
}

.item_actions>li:hover {
    color: #000;
    background: rgba(93, 178, 255, 0.05)
}

.dash_item.active .item_actions {
    display: block
}

.drag_handle {
    cursor: pointer;
    width: 100%;
    min-height: 20px;
    padding: 5px 0;
    background: #fff;
    border-bottom: 1px solid #efefef;
    color: #efefef;
    text-align: center;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2
}

.dash_inner {
    background: #fff;
    position: absolute;
    top: 30px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    overflow: auto
}

.dashboard_num {
    padding: 10px 0;
    text-align: center;
    font-weight: bold;
    overflow: hidden
}

.dashboard_num:after {
    content: "";
    display: block;
    clear: both
}

.dashboard_num .di {
    float: left;
    padding: 0 2%
}

.dashboard_num .t {
    display: block;
    margin: 0 0 10px;
    font-size: .4em;
    line-height: 1em;
    opacity: .4
}

.dashboard_num .v {
    display: block
}

.dashboard_link iframe {
    width: 100%;
    border: 0
}

.dashboard_list {
    padding: 5px
}

.dashboard_list>li {
    margin: 0 0 5px
}

.dashboard_list.row {
    min-width: 650px
}

.dashboard_list.grid>li {
    width: 220px;
    margin-right: 5px;
    float: left
}

.column_holder {
    padding: 5px 0 0
}

.column_holder:after {
    content: "";
    display: block;
    clear: both
}

.ui-resizable {
    position: relative
}

.ui-resizable-handle {
    display: block;
    position: absolute;
    z-index: 2
}

.ui-resizable-e {
    cursor: e-resize;
    width: 5px;
    right: 0;
    top: 0;
    bottom: 0
}

.ui-resizable-s {
    cursor: s-resize;
    height: 5px;
    right: 0;
    bottom: 0;
    left: 0
}

.ui-resizable-se {
    cursor: se-resize;
    border-bottom: 1px solid #000;
    width: 16px;
    height: 16px;
    right: -25px;
    bottom: -12px;
    transform: rotateZ(130deg);
    transform-origin: left top;
    opacity: .4
}

.ui-resizable-se:after,
.ui-resizable-se:before {
    content: "";
    display: block;
    border-bottom: 1px solid #000;
    position: absolute;
    z-index: 3
}

.ui-resizable-se:after {
    width: 10px;
    bottom: 2px;
    left: 3px
}

.ui-resizable-se:before {
    width: 4px;
    bottom: 5px;
    left: 6px
}

.dashboard_screen {
    background: #fff;
    position: absolute;
    top: 0;
    left: 10px;
    right: 10px;
    bottom: 5px;
    z-index: 10
}

.dashboard_screen>h2 {
    padding: 5px;
    min-height: 20px;
    text-align: center;
    font-weight: bold;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 2
}

.dashboard_screen>h2>.icon,
.form_field .dashboard_screen>h2.lst>li.n:before {
    float: right;
    padding: 5px;
    cursor: pointer
}

.dashboard_screen>.dash_inner {
    margin: 5px
}

.dash_item_droplet {
    display: block;
    padding: 5px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
    position: fixed;
    z-index: 100
}

.player_holder {
    width: 400px;
    max-width: 100%;
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 100
}

.player_holder .close,
.player_holder .toggle {
    display: block;
    width: 30px;
    height: 30px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: none;
    line-height: 30px;
    position: absolute;
    top: -29px;
    z-index: 1;
    cursor: pointer
}

.player_holder .close:hover,
.player_holder .toggle:hover {
    color: #000
}

.player_holder .close {
    right: 0;
    border-left: none
}

.player_holder .toggle {
    right: 30px;
    border-right: none
}

.player_holder .close:after {
    content: "\f00d"
}

.player_holder .toggle:after {
    content: "\f078"
}

.player_holder .toggle.active:after {
    content: "\f077"
}

.player_holder .player {
    width: 100%;
    padding: 10px 0;
    background: #fff;
    border-radius: 3px
}

.player_holder h2 {
    padding: 5px 1%
}

.player_holder .ctrls {
    padding: 5px 1%;
    text-align: center;
    direction: ltr;
    position: relative
}

.player_holder .ctrls:after {
    content: "";
    display: block;
    clear: both
}

.player_holder .ctrls .ctrl {
    float: left;
    width: 30px;
    height: 30px;
    margin: 0 1%;
    background: rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.01);
    border-radius: 50%;
    box-shadow: 10px 10px 10px rgba(255, 255, 255, 0.5) inset;
    line-height: 30px;
    position: relative;
    cursor: pointer
}

.player_holder .ctrls .ctrl:hover,
.player_holder .ctrls .ctrl.active {
    color: #fff;
    background: #efefef
}

.player_holder .ctrls .ctrl.download:after {
    content: "\f019"
}

.player_holder .ctrls .ctrl.list:after {
    content: "\f03a"
}

.player_holder .ctrls .ctrl.volume {
    float: right
}

.player_holder .ctrls .ctrl.volume:after {
    content: "\f028"
}

.player_holder .ctrls .ctrl.volume.mute:after {
    content: "\f026"
}

.player_holder .ctrls .ctrl.prev:after {
    content: "\f048"
}

.player_holder .ctrls .ctrl.play:after {
    content: "\f04b"
}

.player_holder .ctrls .ctrl.play.active:after {
    content: "\f04c"
}

.player_holder .ctrls .ctrl.next:after {
    content: "\f051"
}

.player_holder .ctrls .ctrl.repeat:after {
    content: "\f01e"
}

.player_holder .vol_bar {
    display: block;
    width: 80px;
    height: 5px;
    background: rgba(0, 0, 0, 0.1);
    position: absolute;
    top: 50%;
    right: 45px;
    z-index: 1;
    cursor: pointer
}

.player_holder .vol_bar .vol {
    width: 100%;
    height: 100%;
    background: #efefef;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1
}

.player_holder .playlist {
    margin: 0 1%;
    display: none
}

.player_holder .playlist ul {
    max-height: 200px;
    padding: 5px 0;
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1) inset;
    overflow: auto
}

.player_holder .playlist li {
    padding: 5px;
    cursor: pointer
}

.player_holder .playlist li.active {
    color: #fff;
    background: rgba(0, 0, 0, 0.1) !important;
    cursor: default
}

.player_holder .playlist li:hover {
    background: rgba(255, 255, 255, 0.4)
}

.player_holder .seek {
    padding: 5px 1%
}

.player_holder .seek .timer,
.player_holder .seek .total {
    margin: 0 1%;
    color: rgba(0, 0, 0, 0.4)
}

.player_holder .seek .timer {
    float: left
}

.player_holder .seek .total {
    float: right
}

.player_holder .seek .bar {
    display: block;
    clear: both;
    height: 5px;
    margin: 5px 1%;
    background: rgba(0, 0, 0, 0.1);
    cursor: pointer;
    position: relative
}

.player_holder .seek .progress,
.player_holder .seek .loaded {
    display: block;
    width: 0;
    height: 100%;
    background: #efefef;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    transition: 200ms
}

.player_holder .seek .progress {
    z-index: 2
}

.player_holder .seek .loaded {
    z-index: 1;
    opacity: .1
}

.player_holder audio {
    display: none
}

.date_picker {
    text-align: center;
    position: relative
}

.date_picker .panel {
    display: none;
    width: 200px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 3
}

.date_picker.active .panel {
    display: block
}

.date_picker h2 {
    padding: 5px
}

.date_picker .year {
    display: block
}

.date_picker .year:hover {
    cursor: pointer;
    color: #000;
}

.date_picker .nav {
    padding: 5px
}

.date_picker .nav .next,
.date_picker h2 .exchange {
    float: left
}

.date_picker .nav .prev {
    float: right
}

.date_picker .month {
    display: block
}

.date_picker .week {
    background: rgba(0, 0, 0, 0.1)
}

.date_picker .days {
    margin: 0 0 5%
}

.date_picker .days>.day {
    cursor: pointer
}

.date_picker .days>.day:hover {
    background: rgba(0, 0, 0, 0.05)
}

.date_picker .days>.day.cur {
    font-weight: bold;
    box-shadow: 0 0 0 1px #000 inset
}

.date_picker .days>.day.pin {
    font-weight: bold;
    background: #efefef;
    color: #fff
}

.date_picker .week>span,
.date_picker .days>span {
    width: 14.28%;
    padding: 5px 0;
    overflow: hidden
}

.date_picker .week:after,
.date_picker .days:after {
    content: "";
    display: block;
    clear: both
}

.date_picker .icon,
.date_picker .form_field .lst>li.n:before,
.form_field .date_picker .lst>li.n:before {
    opacity: .4;
    cursor: pointer
}

.date_picker .icon:hover,
.date_picker .form_field .lst>li.n:hover:before,
.form_field .date_picker .lst>li.n:hover:before {
    opacity: 1
}

.date_picker .time {
    height: 40px;
    line-height: 30px
}

.date_picker .hour,
.date_picker .minute {
    width: 30%;
    height: 20px;
    padding: 5px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    text-align: center
}

.date_picker .hour {
    float: left;
    margin-left: 5%
}

.date_picker .minute {
    float: right;
    margin-right: 5%
}

.date_picker.d .time {
    display: none
}

.date_picker .ok,
.date_picker .today {
    margin: 5px;
    color: #0a0;
    position: absolute;
    top: 0;
    z-index: 1;
    opacity: 1;
    cursor: pointer
}

.date_picker .ok:hover,
.date_picker .today:hover {
    color: #000
}

.date_picker .ok {
    right: 0
}

.date_picker .today {
    left: 0
}

.date_picker .grid_years {
    height: 40px;
    line-height: 30px
}

.date_picker .grid_years {
    height: 218px;
    line-height: 30px;
    overflow: auto;
}

.date_picker .grid_years>span {
    width: 33.28%;
    padding: 5px 0;
    overflow: hidden;
    cursor: pointer;
}

.date_picker .grid_years>span.cur {
    font-weight: bold;
    background: #2dc3e8;
    color: #fff
}

.cp_holder {
    max-height: 400px;
    padding: 10px 10px 30px;
    margin: 0 0 10px;
    border: 2px solid #eee;
    position: relative;
    overflow: auto;
    text-align: left;
    direction: ltr
}

.cp_holder:after {
    content: "";
    display: block;
    clear: both
}

.cp_holder .col {
    min-height: 20px;
    font: 14px/20px monospace
}

.cp_holder .col.i {
    width: 20px;
    padding: 12px 5px;
    text-align: right;
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 1
}

.cp_holder .col.i .c {
    display: block;
    text-align: right
}

.cp_holder #area_holder {
    margin-left: 30px;
    position: relative;
    z-index: 2
}

.cp_holder .back,
.cp_holder .area {
    width: 2000px;
    margin: 12px 0;
    padding: 0 10px 0 25px;
    white-space: pre;
    word-wrap: break-word;
    overflow: hidden;
    border: 0 solid;
    letter-spacing: 1px;
    font: 14px/20px monospace
}

.cp_holder .back {
    color: #000;
    border-color: transparent;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1
}

.cp_holder .area {
    color: #000;
    -webkit-text-fill-color: transparent;
    background: transparent;
    border-color: #ccc;
    resize: none;
    position: relative;
    z-index: 2
}

.cp_holder .li {
    min-height: 20px;
    border-radius: 3px;
    position: relative
}

.cp_holder .li.er:before {
    content: "x";
    display: block;
    width: 14px;
    height: 14px;
    background: #f00;
    color: #fff;
    border-radius: 50%;
    line-height: 14px;
    text-align: center;
    position: absolute;
    top: 3px;
    left: -20px;
    z-index: 1
}

.cp_holder .li.er>* {
    box-shadow: 0 -1px 0 #fc8 inset
}

.cp_holder .ch {
    color: #aaf
}

.cp_holder .wr {
    color: #0aa
}

.cp_holder .qt {
    color: #a00
}

.cp_holder .cm {
    color: #ccc
}

.cp_holder .sp {
    color: transparent
}

.cp_holder .suggest {
    width: 200px;
    background: #fff;
    border: 5px solid #fff;
    border-radius: 3px;
    box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5
}

.cp_holder .suggest>ul {
    max-height: 72px;
    overflow: auto;
    list-style: none;
    margin: 0;
    padding: 0
}

.cp_holder .suggest li {
    padding: 2px 5px;
    white-space: nowrap;
    text-overflow: ellipsis
}

.cp_holder .suggest li.sl {
    background: #8af;
    color: #fff
}

.cp_holder .suggest .desc {
    width: 600px;
    max-height: 200px;
    padding: 10px;
    overflow: auto;
    background: #fff;
    position: absolute;
    left: 102%;
    top: 0;
    z-index: 1;
    border-radius: 3px;
    box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.2)
}

.captcha_holder {
    margin: 0 2%;
    clear: both;
    text-align: center
}

.captcha_holder:after {
    content: "";
    display: block;
    clear: both
}

.captcha_holder .inner {
    float: left;
    width: 200px;
    height: 40px;
    border-radius: 3px;
    overflow: hidden;
    position: relative
}

.captcha_holder .inner:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: #efefef;
    opacity: .1;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1
}

.captcha_holder .letter {
    float: left;
    width: 40px;
    height: 40px
}

.captcha_holder .refresh {
    float: right;
    color: #efefef;
    cursor: pointer
}

.captcha_holder .refresh:hover {
    color: #eaeaea
}

.captcha_holder.busy .inner:before {
    content: "Loading ..."
}

.captcha_holder.busy .refresh {
    display: none
}

.special_value_holder {
    padding: 5px;
    margin: 40px 0 20px 0
}

.special_value {
    padding: 5px 10px;
    color: #000;
    font-family: monospace;
    font-weight: bold;
    letter-spacing: .1em;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.05)
}

.log_holder {
    font: bold 14px/1.4em Courier, monospace;
    max-height: 300px;
    overflow: auto;
    margin: 0 0 10px
}

.log_holder.wide {
    max-height: 500px;
    height: 500px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 3px
}

.log_holder>ul>li {
    white-space: nowrap
}

.FollowMe__add-follower-view {
    width: 91% !important;
    z-index: 3 !important;
}

.ic_user_reserved {
    color: #ff9800 !important;
}

@media (min-width: 1200px) {
    .form_field {
        width: 25%
    }

    .sec_half {
        width: 50%
    }

    .sec_quarter {
        width: 25%
    }

    .side_col {
        width: 10%
    }

    .main_col {
        width: 90%
    }

    .column_item .trip {
        width: 33%
    }
}

@media (min-width: 980px) and (max-width: 1199px) {
    .form_field {
        width: 33.3%
    }

    .sec_half {
        width: 50%
    }

    .sec_quarter {
        width: 33.3%
    }

    .side_col {
        width: 15%
    }

    .main_col {
        width: 85%
    }

    .column_item .trip {
        width: 33%
    }
}

@media (min-width: 620px) and (max-width: 979px) {
    .form_field {
        width: 50%
    }

    .sec_half {
        width: 100%
    }

    .sec_quarter {
        width: 50%
    }

    .side_col {
        width: 20%
    }

    .main_col {
        width: 80%
    }

    .column_item .trip {
        width: 50%
    }
}

@media (max-width: 619px) {
    .form_field {
        width: 100%
    }

    .sec_half {
        width: 100%
    }

    .sec_quarter {
        width: 100%
    }

    .side_col {
        width: 40%
    }

    .main_col {
        width: 60%
    }

    .column_item .trip {
        width: 100%
    }
}

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