/* 
    Npartner Style
    Created on : 2017/8/22, 上午 09:38:14
    Author     : npartner
*/

#header {
    background: #fff;
    box-shadow: 0 2px 2px rgba(0,0,0,.05), 0 1px 0 rgba(0,0,0,.05);
}

.page-footer {
    background: #010b11;
}

a.nplink, a.nplink:hover, a.nplink:active {
    color:#fce406;
}

img.online {
    /*    border-left-color: #F9A11C!important;*/
}

#main, #ribbon, html   {
    background: #fff;
}

#ribbon .breadcrumb,#ribbon .breadcrumb a {
    color: #9fa1ac!important;
}

#ribbon .breadcrumb li:last-child,#ribbon .breadcrumb>.active {
    color: #898d96
}
.btn.btn-ribbon {
    background-color: #898d96;
    background-image: linear-gradient(to bottom,#898d96,#898d96);
}

/*menu*/
.login-info>span {
    border-bottom: 0px;
}
aside#left-panel {
    background: url(../img/style/left-menu.jpg);
    /*    background: #f6f6f6; */
    /*    background: -webkit-gradient(linear,left top,right top,color-stop(99%,#f7f7f7),color-stop(100%,#cacaca));*/
    box-shadow: 1px 0px 1px 0px #424242;
    background-attachment: fixed;
}
.minified nav>ul>li>ul, .minified nav>ul>li>ul>li, .minified nav>ul>li>ul>li>ul>li {
    background: #3e5160;
    color: #fff;
}

nav ul ul ul li a {
    color: #fff;
}

nav ul li a {
    color: #fff;
}

nav>ul>li>a>i,nav>ul ul li a i  {
    color: #517796;
}

nav ul li.active>a>i  {
    color: #fff;
}

nav ul .active>a[menuid] {
    background-color: #2c3946!important;
    box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
    color: #ffd835!important;
}

nav ul li.active>a:before {
    color: #fff;
}

nav ul li.open>a, nav ul li.open>a b {
    color: #fff!important;
    background-color: #3e5160!important;
    box-shadow: none;
}

nav ul .active>a {
    /*    color: #FF9800!important;*/
    background-color: #354555!important;
    box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
    color: #fff!important;
}

/*
nav ul li a:hover {
    color: #FF9800;
}*/

nav ul ul li>a:hover, nav ul li a:active, nav ul li a:hover {
    background-color: #59707f!important;
    color: #fff!important;
}

nav ul ul {
    background: #3e5160!important;
}

.login-info a span {
    color: #fff;
}
.login-info a span+i {
    color:#fff;
}

.minifyme {
    border-bottom: 1px solid rgba(35, 35, 35, 0.9);
    background: #d7dae2;
    color: #28617c;
}
.minifyme:hover {
    background: #28617c;
    color: #ffffff!important;
}
.minified .minifyme {
    color: #28617c;
    background-color: #d7dae2;
}
.minified .minifyme:hover {
    background: #28617c;
    color: #ffffff!important;
}
.minified nav>ul>li {
    border-bottom: 0px;
}
nav ul li.active>a:before {
    right: -22px;
    color: #fff;
}
/*End menu*/

/*datagrid*/
.eui-dialog .datagrid-header, .datagrid-td-rownumber,.datagrid-header-inner {
    font-weight: 600;
    background: #0b5384!important;
    color: #fff;
}
.datagrid-header-inner table td {
    color: #fff;
}

.datagrid-cell, .datagrid-cell-group, .datagrid-header-rownumber, .datagrid-cell-rownumber {
    padding-left: 5px!important;
    padding-right:5px!important;
}

.eui-dialog .datagrid-header td.datagrid-header-over, .datagrid-header-over {
    background: #fddb4c!important;
    ;
    color: #5f5f5f!important;
}

.datagrid-htable, .datagrid-btable, .datagrid-ftable {
    border-collapse: collapse!important;
}

/*mouse over*/
.datagrid-btable .datagrid-row-over {
    background: #fcea9d;
    color: #727171;
}
/*select*/
.datagrid-btable .datagrid-row-selected, .datagrid-btable .datagrid-row-selected a:not(.combo-arrow)  {
    background: #fddb4c;
    color: #020b0e;
}
.datagrid-btable .datagrid-row-selected a.dropdown-toggle-a {
    background: none;
    color: initial;
}
.datagrid-btable .datagrid-row-selected a:focus, .datagrid-btable .datagrid-row-selected a:hover  {
    color: #3276b1;
}

.panel-title {
    color: #727171;
}
/*End datagrid*/

.smart-form .checkbox input:checked+i, .smart-form .radio input:checked+i, .smart-form .toggle input:checked+i {
    border-color: #3ac2f4;
}

.smart-form .radio input+i:after {
    background-color: #3ac2f4;
}

.smart-form .checkbox input+i:after {
    color: #3ac2f4;
}

/*===botton=== */
.btn-default {
    background-color: #f7f8f8!important;
    color: #354555!important;
    border-color: #999!important;
}
.btn-default:hover {
    background-color: #b5b5b6;
    color: #fff;
}
.btn-default:active {
    background-color: #7a7a7a;
    color: #fff;
}

.btn-primary {
    background-color: #0b5384!important;
    border-color: #0b5384!important;
    color: #fff!important;
}

.btn-primary:hover {
    background-color: #008ecc!important;
    color: #fff!important;
}
.btn-primary.active, .btn-primary:active, .open>.dropdown-toggle.btn-primary {
    color: #fff!important;
    background-color: #517796!important;
}

.btn-success {
    background-color: #3fb29c!important;
    border-color: #308877!important;
    color: #fff!important;
}
.btn-success:hover {
    background-color: #0fdb8d!important;
    color: #fff!important;
}
.btn-success:active {
    background-color: #187e8c!important;
    color: #fff!important;
}

.btn-info:not(.no-style) {
     background-color: #2a8ddb!important; 
     border-color: #1d639a!important; 
     color: #fff!important; 
}
.btn-info:hover:not(.no-style) {
    background-color: #00bdff!important;
    color: #fff!important;
}
.btn-info:active:not(.no-style) {
    background-color: #1c81a9!important;
    color: #fff!important;
}

.btn-warning {
    background-color: #ffac00!important;
    border-color: #b77c02!important;
    color: #fff!important;
}
.btn-warning:hover {
    background-color: #ffd731!important;
    color: #fff!important;
}
.btn-warning:active {
    background-color: #dd9117!important;
    color: #fff!important;
}

.btn-danger {
    background-color: #e83828!important;
    border-color: #e61906!important;
    color: #fff!important;
}
.btn-danger:hover {
    background-color: #d10a00!important;
    color: #fff!important;
}
.btn-danger:active {
    background-color: #af0f0b!important;
    color: #fff!important;
}

.btn-default.disabled {
    background-color: #c9caca;
    border-color: #c9caca;
    color: #fff;
}
.btn-default.disabled:hover {
    background-color: #efefef;
    border-color: #efefef;
    color: #b5b5b6;
}
.btn-default.disabled:active {
    background-color: #b5b5b6;
    border-color: #b5b5b6;
    color: #3e3a39;
}
/*===botton=== */


.minified nav>ul>li>a>.menu-item-parent {
    background-color: #3e5160;
    color: #fff;
}

nav ul ul ul {
    background: #2c3946!important;
    color: #fff
}

nav ul ul ul li a:hover {
    color: #c9caca!important;
}

.minified nav>ul>li>ul>li>ul>li {
    background-color: #2c3946;
}

nav>ul ul li a i:before {
    /*    display:none;*/
}

.btn {
    font-weight: 600;
}

.smart-form .label {
    font-weight: 600;
    color: #231815;
}

.dt-toolbar.np-toolbar {
    background-color: #fbfbfb;
}

.smart-form .checkbox:hover i,.smart-form .input:hover input,.smart-form .radio:hover i,.smart-form .select:hover select,.smart-form .textarea:hover textarea,.smart-form .toggle:hover i {
    border-color: #3ac2f4;
}

.smart-form .checkbox, .smart-form .radio, .smart-form .input {
    color: #727171;
}

/*自動更新*/
.onoffswitch-inner:after {
    background-color: #dcdddd;
    color: #3e3a39;
}

.onoffswitch-inner:before {
    background-color: #3e515f;
    color: #fff;
}
/*自動更新*/

.dropdown-menu>li>a:focus,.dropdown-menu>li>a:hover {
    color: #fff;
    background-color: #2b617b
}

.panel-title {
    color: #545454;
}

.bg-color-np-blue {
    background-color: #2b617b!important;
}
.progress span {
    color: #c9caca;
}

/*shortcut bg color*/
.bg-color-np1 {
    background-color:#20A39E;
}
.bg-color-np2 {
    background-color:#086DA5;
}
.bg-color-np3 {
    background-color:#fa9f42;
}
.bg-color-np4 {
    background-color:#5296A5;
}
.bg-color-np5 {
    background-color:#FC5130;
}
.bg-color-np6 {
    background-color:#c30d23;
}
.bg-color-np7 {
    background-color:#B5B5B6;
}
.bg-color-np8 {
    background-color:#312CB9;
}
.bg-color-np9 {
    background-color:#EF5058;
}
.bg-color-np10 {
    background-color:#2C666E;
}
.bg-color-np11 {
    background-color:#519ac4;
}
.bg-color-np12 {
    background-color:#2B4162;
}
.bg-color-np13 {
    background-color:#8ec12d;
}
.bg-color-np14 {
    background-color:#95CC36;
}

/*shortcut bg color light*/
.bg-color-np1-1 {
    background-color:#1CD1C9;
}
.bg-color-np2-1 {
    background-color:#0AA5FC;
}
.bg-color-np3-1 {
    background-color:#FCB267;
}
.bg-color-np4-1 {
    background-color:#6CC6DB;
}
.bg-color-np5-1 {
    background-color:#F7745A;
}
.bg-color-np6-1 {
    background-color:#FA2943;
}
.bg-color-np7-1 {
    background-color:#D3D3D3;
}
.bg-color-np8-1 {
    background-color:#504BC1;
}
.bg-color-np9-1 {
    background-color:#F76F74;
}
.bg-color-np10-1 {
    background-color:#3E909B;
}
.bg-color-np11-1 {
    background-color:#62B9EA;
}
.bg-color-np12-1 {
    background-color:#435F93;
}
.bg-color-np13-1 {
    background-color:#ADEA39;
}
.bg-color-np14-1 {
    background-color:#B7FA43;
}

/*修正tag X 看不清楚*/
.bootstrap-tagsinput .tag [data-role=remove]:after {
    color: #fff;
}

.window {
    background:linear-gradient(to bottom,#19507b 0,#4b7ea7 20%)!important;
}

.window .panel-title {
    color: #fff;
}

.dt-toolbar.np-toolbar.np-topnx2 {
    background-color: #f0f0f0;
}

/*topnx2 dg header*/
.datagrid-view .datagrid-view .datagrid-header .datagrid-header-inner {
    background: #458bba;
    color: #fff;
}

.datagrid-view .datagrid-view .datagrid-td-rownumber {
    background: #458bba!important;
    color: #fff;
}

/*info certer*/
#header #logo-group #activity.info-center-service-not-allowed, .pull-right .info-center-service-not-allowed a {
    background: #a90329;
    background-color: #a90329!important;
    background-image: linear-gradient(to bottom,#a90329 0,#a90329 100%)!important;
    border: 1px solid #8B0913;
    color: rgba(255,255,255,.9);
}

/* info center robot icon*/
.n-robot-icon {
    position: fixed;
    right: 400px;
    bottom: 50px;
    width: 200px;
}
@media (min-width: 768px) and (max-width:880px) {
    .n-robot-icon {
        position: fixed;
        right: 425px;
        bottom: 50px;
        width: 190px;
    }
}
@media only screen and (min-width: 320px) and (max-width:479px) {
    .n-robot-icon {
        position: fixed;
        right: 205px;
        bottom: 175px;
        width: 160px;
    }
}

/*訊息視窗連結顏色*/
.bigBox a{
    color:#fff;
}

/*bigBox 內容限制*/
.bigBox p {
    height: 70px;
    overflow-y: auto;
}

/* 解chrome TopN 數值顯示不顯示bug */
.report-fixed-term-area {
    min-height: 105px;
}

/* filter topn */
.filter_topn_area.topn_set_area .well, .filter_set_add_area .well{
    margin: 5px;
    float: left;
    width: 360px;
}

/*IP Tracking ctrl Btn*/
#viewCtrlBtns {
    position: absolute;
    right: 0px;
    z-index: 100;
}
#timeline_list{
    position: absolute;
    width: 100%;
    /*    left: 20%;*/
    bottom: 120px;
}
/*IP Tracking player btn*/
#timeline_list span.ctrlBtn {
    left: 32px;
    position: absolute;
    z-index: 1;
    top: 30%;
    bottom: auto;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    height: 34px;
    width: 34px;
    border-radius: 50%;
    border: 2px solid #dfdfdf;
    text-align: center;
    line-height: 32px;
    -webkit-transition: border-color 0.3s;
    -moz-transition: border-color 0.3s;
    transition: border-color 0.3s;
    display: none;
    cursor: pointer;
}

#timeline_list span.ctrlBtn#playerBtn {
    border: 2px solid #3974e4;
}

#timeline_list span.ctrlBtn#playerBtn i{
    color: #3974e4;
}

#timeline_list span.ctrlBtn#nextBtn {
    display: block;
    top: 87px;
    border-radius: unset;
    border: 0px;
    left: 73px;
    cursor: pointer;
}

#timeline_list span.ctrlBtn#prevBtn{
    display: block;
    top: 87px;
    border-radius: unset;
    border: 0px;
    left: -5px;
    cursor: pointer;
}


/*告警視窗圓角*/
#divMiniIcons .cajita {
    border-radius: 3px;
}
/*告警視窗圓角*/
.bigBox {
    border-radius: 10px;
}

/* menu 避免文字過長變形 */
nav ul ul li>a {
    padding-left: 33px;
}

/*3d map*/
.globe_map_msg_area {
    width: 475px;
    position: absolute;
    top: 45px;
    right: 30px;
    overflow: hidden;
    z-index: 1;
}
.globe_map_msg_area thead tr {
    line-height: 1.5em;
    opacity: 0.8;
    transition: bottom .2s;
    background-color: unset;
    background-image: unset;
    font-size: 10px;
    color: #ffffff;
    font-weight: 100;
    font-family: 'Arial Narrow';
}
.globe_map_msg_area tbody tr {
    color: #f18383;
    font-size: 10px;
    font-weight: 100;
    background-color: rgba(0,0,0,.4)!important;
    font-family: "Open Sans";
}

.globe_map_msg_area .table tbody tr td {
    border-top: 0.5px solid #dddddd70;
}

.globe_map_msg_area .table tbody tr td .flag {
    background-image: url(../img/flags/flags.png);
}

.globe_map_msg_area .msg-body tr.msg_hide {
    display: none;
}

.globe_map_info {
    color: white;
    opacity: 0.8;
    padding-right: 8px!important;
    font-size: 16px;
}
.globe_map_info:hover {
    color: #ffffff;
}

@media screen and (max-width: 767px) {
    .globe_map_info {
        display: none;
    }
    .globe_map_msg_area {
        display: none;
    }
}
/*End 3d map*/



/*CSS3右邊淡入*/
.right_fade_in{
    -webkit-animation:fadeInRight 0.3s .2s ease both;
    -moz-animation:fadeInRight 0.3s .2s ease both;
}
@-webkit-keyframes fadeInRight{
    0%{
        opacity:0;
        -webkit-transform:translateX(20px)
    }
    100%{
        opacity:1;
        -webkit-transform:translateX(0)
    }
}
@-moz-keyframes fadeInRight{
    0%{
        opacity:0;
        -moz-transform:translateX(20px)
    }
    100%{
        opacity:1;
        -moz-transform:translateX(0)
    }
}
/*CSS3右邊淡入*/

/*jquery ui menu*/
.topology-menu li {
    padding: 3px;
}

/*username 字首不大寫*/
.login-info a span {
    text-transform: none;
}

/*select option 不可選*/
option:disabled {
    color: #cacaca;
}

/*filter threshold*/
.filterSet_thr_check_area {
    display: none;
}

/*select2 input error show*/
.smart-form .state-error .select2-selection.select2-selection--single {
    background: #fff0f0;
    border-color: #A90329
}

/*topology device info -> device status*/
#topology-dev-Info .dev_status_area {
    text-align: center;
    width: 95px;
}
#topology-dev-Info .dev_status_info {
    position: relative;
    display: inline-block;
    margin: 10px;
}

#topology-dev-Info .dev_status_info .fa-hdd-o {
    font-size: 30px;
}

#topology-dev-Info .dev_status_info .fa-circle {
    position: absolute;
    bottom: 0;
    right: 0;
    margin: -3px -6px;
}
#topology-dev-Info .dev_status_area label.label {
    font-weight: 100;
    font-size: 11px;
    text-align: center;
}
/*End topology device info -> device status*/