html, body, div, h1, h2, h3, h4, h5, h6, ul, li, p, dl, dt, dd, table, input {
    margin: 0;
    padding: 0;
    font-family: "Microsoft YaHei";
    /*color: black;*/
}

img {
    border: none;
}

input, select, textarea, a {
    font-family: "微软雅黑";
    color: #fff;
    text-decoration: none;
}

body, td, input, textarea, select {
    font-size: 14px;
}

table {
    border-collapse: collapse;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #bcbcbc;
}

li {
    list-style: none;
}

i {
    font-style: normal;
    font-size: 12px;
}

a {
    text-decoration: none;
}

body {
    overflow: hidden;
}

.fl_l {
    float: left;
}

.fl_r {
    float: right;
}

.clear {
    height: 0;
    border: none;
    padding: 0;
    margin: 0;
    clear: both;
}

.ta_c {
    text-align: center;
}

.pos_r {
    position: relative;
}

.pos_a {
    position: absolute;
}

.bdb {
    border: 1px solid #00c3ff;
}

.bg_black {
    background: rgba(0,37,49,0.85);
}

.shadow_inset {
    box-shadow: 0 0 5px #00c3ff inset;
}

.btn {
    display: inline-block;
    text-align: center;
    color: #fff;
}

.btn_blue {
    background: #0089b4;
}

input, select, textarea {
    display: inline-block;
    outline: none;
    background: #f6f6f6;
    border: 1px solid #ddd;
    font-size: 13px;
    height: 22px;
    line-height: 22px;
    border-radius: 4px;
    color: #fff;
}

input, textarea {
    padding: 0 5px;
}

select {
    height: 24px;
}

input[type="checkbox"] {
    /*-webkit-appearance: none;*/
    width: 14px;
    height: 14px;
    /*border: 1px solid #00c3ff;
    border-radius: 2px;*/
}

input[type="checkbox"], input[type="radio"] {
    position: relative;
    top: 2px;
    margin-right: 5px;
}

input[type="radio"] {
    top: 7px;
    margin-right: 3px;
}

input[type="checkbox"]:checked {
    /*background: url(img/checkbox.png);*/
    border: none;
}

::-webkit-scrollbar {
    width: 8px;
    height: 12px;
}

::-webkit-scrollbar-track {
    /*background-color: #0089b4;*/
}

::-webkit-scrollbar-thumb {
    background-color: #00c3ff;
}

.tit {
    font-weight: normal;
    font-size: 16px;
    color: #fff;
    line-height: 28px;
    padding: 0 18px;
    background: rgba(0,137,180,0.85);
    border: solid #00c3ff;
    border-width: 1px;
    box-shadow: 0 0 5px #00c3ff inset;
    position: relative;
}

.trs {
    font-weight: normal;
    font-size: 16px;
    color: #fff;
    line-height: 28px;
    padding: 0 18px;
    background: rgba(64, 109, 123, 0.85);
    border: solid #00c3ff;
    border-width: 1px;
    box-shadow: 0 0 5px #00c3ff inset;
    position: relative;
}

.tit i {
    position: absolute;
    right: 10px;
    top: 6px;
    color: #fff;
}

.box {
    background: rgba(0,37,49,0.85);
    border: 1px solid #00c3ff;
    box-shadow: 0 0 5px #00c3ff inset;
    position: absolute;
    line-height: 30px;
}

.box_l {
    width: 335px;
    left: 10px;
}

.search_box {
    position: absolute;
    left: 10px;
    top: 14px;
    z-index: 1001;
    background: rgba(0,37,49,0.85);
    border: 1px solid #00c3ff;
    box-shadow: 0 0 5px #00c3ff inset;
}

    .search_box .kw_search {
        display: block;
        position: absolute;
        right: -1px;
        top: -1px;
        width: 70px;
        height: 38px;
        line-height: 38px;
        text-align: center;
        background: rgba(0,137,180,0.85);
        border: 1px solid #00c3ff;
        box-shadow: 0 0 5px #00c3ff inset;
        font-size: 16px;
    }

.search_bar {
    overflow: hidden;
}

    .search_bar input, .btn_search {
        float: left;
    }

    .search_bar input {
        width: 312px;
        height: 38px;
        line-height: 38px;
        padding-left: 10px;
        background: none;
        font-size: 14px;
        margin-left: 0;
        border-radius: 0;
        border: 0;
    }

.btn_search {
    width: 62px;
    background: #0089b4;
    line-height: 38px;
    border-left: 0;
}

.search_list {
    left: 0px;
    width: 327px;
    position: relative;
    background: rgba(0,37,49,0.85);
}

.search_result {
    line-height: 30px;
    font-size: 14px;
    height: 305px;
    overflow-y: auto;
}

    .search_result a {
        display: block;
        padding-left: 20px;
    }

        .search_result a:hover, .search_result a.on {
            background: #0089b4;
        }

.header {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 50px;
    cursor: default;
    user-select: none;
    z-index: 1001;
    background: #1d374c;
    box-shadow: 0 2px 3px #3a3a3a;
}

.logo {
    position: absolute;
    left: 0;
    top: 0;
    width: 400px;
    height: 50px;
    overflow: hidden;
    user-select: none;
}

    .logo i {
        display: block;
        position: absolute;
        left: 10px;
        top: 11px;
        width: 40px;
        height: 35px;
        background: url(/content/img/logo.png?v=1) no-repeat 0 0px;
        background-size: auto 30px;
    }

    .logo b {
        display: block;
        position: absolute;
        left: 50px;
        top: 8px;
        line-height: 34px;
        color: #fff;
        font-size: 25px;
        font-weight: normal;
    }

    .logo u {
        display: block;
        position: absolute;
        left: 36px;
        top: 19px;
        line-height: 34px;
        color: #fff;
        font-size: 13px;
        font-weight: normal;
        text-decoration: none;
        color: #7bcff2;
    }

.logout {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    height: 50px;
    line-height: 50px;
    padding: 0 30px;
    text-align: center;
    font-size: 18px;
    background: rgba(0,37,49,0.3);
}

    .logout:hover {
        background: rgba(0,37,49,0.85);
    }

#mapbox {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    overflow: hidden;
}

.nav {
    position: absolute;
    right: 120px;
    top: 0;
}

    .nav > a {
        display: inline-block;
        height: 50px;
        position: relative;
    }

        .nav > a > label {
            display: block;
            line-height: 50px;
            padding: 0 20px;
            text-align: center;
            font-size: 18px;
            cursor: pointer;
        }

        /*.nav > a > label:hover {
                background: rgba(0,37,49,0.85);
            }*/

        .nav > a > ul {
            display: none;
            position: absolute;
            left: 0;
            top: 50px;
        }

            .nav > a > ul li {
                display: block;
                padding: 7px 20px;
                background: rgba(0,37,49,0.85);
                white-space: nowrap;
                line-height: 25px;
                font-size: 16px;
                text-align: left;
            }

                .nav > a > ul li:hover {
                    background: rgba(0,37,49,0.95);
                }

        .nav > a.on {
            background: rgba(0,37,49,0.90);
        }

.nav_btn {
    line-height: 38px;
    text-align: center;
    font-size: 18px;
    transform: skew(28deg,0deg);
}

.shipfilter {
    color: white;
    padding: 7px;
}

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

        .shipfilter label b {
            display: inline-block;
            width: 10px;
            height: 10px;
            border: 1px solid;
            position: relative;
            top: 1px;
        }

        .shipfilter label span {
            color: #b1b1b1;
            font-size: 12px;
        }

    .shipfilter label {
        display: inline-block;
        width: 48%;
        padding: 2px 0;
    }

        .shipfilter label i {
            font-style: normal;
            font-size: 12px;
            color: gray;
            margin-left: 3px;
        }

    .shipfilter .hide {
        display: none;
    }

    .shipfilter table {
        color: white;
        line-height: 25px;
        padding: 6px;
        margin-left: 15px;
    }

    .shipfilter dl dt {
        background: #587694;
        height: 24px;
        padding-top: 5px;
        padding-left: 15px;
        border-radius: 4px;
        margin: 2px 0;
    }

    .shipfilter dl dd {
        padding: 5px 2px;
        display: none;
    }

        .shipfilter dl dd.pad {
            padding: 5px 2px 5px 15px;
        }

    .shipfilter dl.on dd {
        display: block;
    }

#drawshipcount {
    z-index: 1000;
    position: absolute;
    bottom: 73px;
    left: 6px;
    text-align: center;
    border-radius: 3px;
    padding: 1px 3px;
    font-size: 12px;
    background-color: rgba(255, 255, 255, 0.63);
    color: #333;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.27);
}

#drawshipcount2 {
    z-index: 1000;
    position: absolute;
    bottom: 5px;
    left: 104px;
}

    #drawshipcount2 li {
        display: block;
        float: left;
        width: 40px;
        height: 40px;
        text-align: center;
        position: relative;
        margin-right: 20px;
        border-radius: 100%;
        background: rgba(255, 255, 255, 0.3);
        cursor: default;
    }

        #drawshipcount2 li:first-child {
            background: rgba(153, 34, 187, 0.4);
        }

        #drawshipcount2 li:last-child {
            background: rgba(0, 170, 255, 0.4);
        }

        #drawshipcount2 li i {
            display: block;
            position: absolute;
            top: 8px;
            left: 0;
            right: 0;
            font-size: 17px;
            color: white;
        }

        #drawshipcount2 li b {
            display: block;
            position: absolute;
            bottom: 5px;
            left: 0;
            right: 0;
            font-weight: normal;
            font-size: 12px;
            display: none;
        }

.box_jgc {
    position: absolute;
    left: 152px;
    bottom: 10px;
    z-index: 1000;
}

.nav_top {
    width: 357px;
    height: 17px;
    left: 354px;
    top: 10px;
    border-left: none;
}

.shipping_list a, .service_list a {
    display: block;
    width: 105px;
    height: 38px;
    line-height: 38px;
    background: rgba(0,37,49,0.85);
    border: 1px solid #00c3ff;
    text-align: center;
    margin-top: 10px;
    font-size: 16px;
    box-shadow: 0 3px 5px #333;
}

.toggle_bg {
    width: 80px;
    height: 17px;
    position: absolute;
    top: -15px;
    left: 50%;
    margin-left: -40px;
    cursor: pointer;
}

    .toggle_bg b, .toggle_bg span {
        display: inline-block;
    }

    .toggle_bg span {
        width: 40px;
        overflow: hidden;
        height: 15px;
        position: absolute;
    }

    .toggle_bg b {
        width: 40px;
        height: 12px;
        background: rgba(0,137,180,0.7);
        display: none;
    }

.toggle_bg_left {
    left: 0;
}

.toggle_bg_right {
    right: 0;
}

.toggle_bg_left b {
    transform: skew(-28deg,0);
    margin-left: 5px;
}

.toggle_bg_right b {
    transform: skew(28deg,0);
    margin-left: -5px;
}

.toggle_bg i {
    position: absolute;
    left: 38px;
    top: 1px;
}

.leaflet-control-attribution {
    display: none;
}

.leaflet-container {
    cursor: default;
}

.leaflet-popup-pane, .leaflet-control {
    cursor: auto;
}

.leaflet-dragging .leaflet-container, .leaflet-dragging .leaflet-clickable {
    cursor: default;
}

.leaflet-top {
    top: 10px;
}

.tip {
    display: block;
    padding-left: 17px;
    height: 30px;
    line-height: 30px;
    cursor: default;
}

.tlink {
    position: absolute;
    left: 310px;
    top: 0;
    height: 40px;
    line-height: 40px;
    background: #3A6F96;
    color: #fff;
    border-bottom: 1px solid #eee;
}

    .tlink a {
        display: inline-block;
        height: 40px;
        line-height: 40px;
        padding: 0 20px;
        font-size: 16px;
        color: #fff;
    }

        .tlink a:hover {
            background: #4982AD;
        }

.banner {
    height: 63px;
    position: relative;
}

.navver {
    height: 25px;
    line-height: 25px;
    padding: 0 5px;
    background: #d4eaff;
}

.sidder {
    position: absolute;
    left: 0;
    top: 103px;
    width: 299px;
    bottom: 0;
    border-right: 1px solid #ccc;
}

    .sidder .all {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 33px;
        overflow: auto;
    }

.botter, .botter2 {
    position: absolute;
    left: 340px;
    height: 200px;
    right: 10px;
    bottom: 10px;
    background-color: rgba(0,37,49,0.85);
    z-index: 1000;
}

.botter2 {
    height: 0;
    bottom: 0;
    background-color: transparent;
}

.kwtitle {
    position: absolute;
    left: 15px;
    top: 6px;
}

    .kwtitle span {
        margin-right: 12px;
        font-size: 15px;
    }

    .kwtitle .shipname {
        color: #3B92E7;
    }

    .kwtitle .callsign {
        color: #59A50F;
    }

    .kwtitle .mmsi {
        color: #F42C2C;
    }

    .kwtitle .imo {
        color: #EE5AF9;
    }

.top_ports {
    position: absolute;
    right: 8px;
    top: 7px;
    width: 300px;
    border: 1px solid #ddd;
    padding: 5px 7px;
    border-radius: 5px;
    line-height: 18px;
    height: 36px;
}

    .top_ports a {
        display: inline-block;
        width: 45px;
    }

.big_ships {
    position: absolute;
    left: 490px;
    top: 46px;
    display: none;
}

    .big_ships a {
        display: inline-block;
        width: 130px;
        height: 40px;
        line-height: 42px;
        text-align: center;
        background: #cc0000;
        color: white;
        border-radius: 10px;
        margin-right: 10px;
    }

.sidder .bar {
    position: absolute;
    right: -16px;
    top: 50%;
    width: 17px;
    height: 68px;
    margin-top: -34px;
    cursor: pointer;
    background: url(img/mapinfo_arrow_left.png);
    z-index: 1001;
}

.toggle_side .sidder {
    width: 0;
}

    .toggle_side .sidder .bar {
        background-image: url(img/mapinfo_arrow_right.png);
    }

.toggle_side .mainer {
    left: 0;
}

.toggle_side .botter {
    left: 0;
}

.mapshadow .h {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 4px;
}

.mapshadow .v {
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
}

.mapshadow i {
    display: block;
    background: #000;
    overflow: hidden;
}

.mapshadow .h i {
    width: 100%;
    height: 1px;
}

.mapshadow .v i {
    height: 100%;
    width: 1px;
    float: left;
}

.i1 {
    opacity: 0.20;
    filter: alpha(opacity=20);
}

.i2 {
    opacity: 0.15;
    filter: alpha(opacity=15);
}

.i3 {
    opacity: 0.10;
    filter: alpha(opacity=10);
}

.i4 {
    opacity: 0.05;
    filter: alpha(opacity=5);
}

.filters .section .lists {
    margin: 10px 0 10px 20px;
    font-size: 14px;
}

    .filters .section .lists label {
        display: inline-block;
    }

.filters .section .lists_full {
}

    .filters .section .lists_full label {
        display: block;
        width: 100%;
    }

.filters .section .lists label i {
    color: #b1b1b1;
    font-style: normal;
}

.filters .section .lists label b {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 1px solid #fff;
    background: #ffcc66;
    position: relative;
    left: 3px;
    top: 3px;
}

.col3 label {
    width: 135px;
}

.col4 label {
    width: 100px;
}

.panels {
    padding: 8px 0;
}

    .panels .head {
        height: 26px;
        line-height: 26px;
        font-weight: normal;
        text-indent: 20px;
        position: relative;
        color: #06C;
        background: url(img/arrow_right.gif) no-repeat 7px 8px;
        cursor: pointer;
    }

        .panels .head .r {
            position: absolute;
            right: 0;
            top: 0;
            padding: 0 7px;
        }

    .panels .body {
        padding: 0 0 10px 0;
        display: none;
    }

    .panels .on .head {
        background-color: #EBF2FA;
        background-image: url(img/arrow_bottom.gif);
    }

    .panels .on .body {
        display: block;
    }

.loading {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.01);
    z-index: 100000;
    -webkit-user-select: none;
}

    .loading div {
        position: fixed;
        top: 50%;
        margin-top: -22px;
        width: 100%;
    }

        .loading div span {
            display: block;
            margin: 0 auto;
            position: relative;
            width: 100px;
            padding: 10px 0 10px 10px;
            background: rgba(0,0,0,.5);
            border-radius: 5px;
        }

            .loading div span i {
                color: #fff;
                font-style: normal;
                white-space: nowrap;
                padding-left: 20px;
                background: url(img/loading.svg) no-repeat left;
            }

.shiptype1 {
    color: #3B92E7;
}

.shiptype2 {
    color: #59A50F;
}

.shiptype3 {
    color: #F42C2C;
}

.shiptype5 {
    color: #EE5AF9;
}

.shiptype6 {
    color: #FF6600;
}

.ship_info {
    padding: 0 3px;
}

    .ship_info h4 {
        border-bottom: 1px solid #dbe2e5;
        margin-bottom: 0;
        font-weight: normal;
        font-size: 15px;
    }

    .ship_info table {
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
    }

        .ship_info table td {
            padding: 1px 0;
            font-size: 13px;
            line-height: 1.5em;
        }

        .ship_info table .label {
            text-align: left;
        }

.ship_pic {
    display: block;
    position: absolute;
    right: 10px;
    top: 10px;
    width: 100px;
    height: 70px;
    line-height: 70px;
    text-align: center;
    color: #fff;
    background: #0089b4 url(/Content/img/nopic.png) no-repeat center;
    border: 1px solid #fff;
    cursor: pointer;
}

.lloydmicroarchives span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 120px;
    display: block;
}

.ship_ext {
    padding: 5px 10px;
    max-height: 95px;
    overflow: auto;
}

    .ship_ext table {
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
        border: 1px solid #ddd;
    }

        .ship_ext table .th {
        }

        .ship_ext table td {
            padding: 0 3px;
            font-size: 14px;
        }

.ship_btn {
    padding: 5px 0;
    text-align: right;
}

    .ship_btn a {
        display: inline-block;
        margin-right: 3px;
        padding: 0 10px;
        border-radius: 4px;
        border: 1px solid #00c3ff;
        background: #017aa1;
    }

        .ship_btn a:hover {
            background: #0089b4;
        }

.ship_btns {
    text-align: right;
    padding: 10px 8px;
}

    .ship_btns a {
        display: inline-block;
        margin: 0 5px;
        padding: 0 9px;
        border-radius: 4px;
        border: 1px solid #00c3ff;
        background: #017aa1;
        font-size: 13px;
        cursor: pointer;
    }

        .ship_btns a:hover {
            background: #0089b4;
        }

.form {
    padding: 15px 0;
}

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

    .form td {
        padding: 3px 5px;
    }

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

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

    .form .select {
        border-radius: 4px;
        border: 1px solid #00c3ff;
        background: #017aa1;
    }

    .form .input {
        width: 170px;
        padding: 3px;
        border-radius: 4px;
        border: 1px solid #00c3ff;
        background: #017aa1;
    }

    .form .textarea {
        width: 200px;
        padding: 7px;
        height: 60px;
        border-radius: 4px;
        border: 1px solid #00c3ff;
        background: #017aa1;
    }

    .form .hidesubmit {
        position: absolute;
        width: 0;
        height: 0;
        opacity: 0.01;
        filter: alpha(opacity=1);
    }

.button {
    display: inline-block;
    margin-right: 5px;
    padding: 0 10px;
    border-radius: 4px;
    background: #017aa1;
    line-height: 22px;
}

    .button:hover {
        background: #0089b4;
    }

.querys {
    position: absolute;
    left: 19px;
    top: 49px;
    width: 230px;
    background: rgba(0,37,49,0.85);
    border: 1px solid #00c3ff;
    z-index: 1;
}

    .querys a {
        display: block;
        height: 30px;
        line-height: 30px;
        text-indent: 7px;
    }

        .querys a.on,
        .querys a:hover {
            color: #fff;
            background: #0089b4;
            box-shadow: 0 0 5px #00c3ff inset;
        }

.table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #017aa1;
}

    .table .th {
        background: #eee;
    }

    .table td {
        padding: 5px 5px;
        border-bottom: 1px solid #458397;
        text-align: center;
    }

    .table .l {
        text-align: left;
    }

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

.botter .top {
    height: 30px;
    cursor: ns-resize;
}

.botter .tabs {
    position: absolute;
    left: 20px;
    top: 3px;
    height: 30px;
}

    .botter .tabs li {
        display: block;
        float: left;
        padding: 5px 15px 4px;
        cursor: pointer;
        font-size: 16px;
    }

        .botter .tabs li:hover {
            color: #00c3ff;
        }

        .botter .tabs li.on, #AlarmTab a.on {
            border-bottom: 2px solid #00c3ff;
            color: #00c3ff;
        }

.botter .top100 {
    position: absolute;
    right: 513px;
    top: 7px;
}

.botter .search {
    position: absolute;
    right: 8px;
    top: 5px;
    padding-left: 10px;
}

    .botter .search input {
        padding: 2px 12px;
        border: 1px solid #00c3ff;
        border-radius: 15px;
        margin: 2px 0 0 10px;
        outline: none;
        background: #002531;
        width: 150px;
    }

.botter .bot {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 40px;
    overflow: auto;
}

.list {
}

    .list table {
        width: 100%;
        border-collapse: collapse;
        font-size: 14px;
        color: #fff;
    }

        .list table td {
            text-align: center;
        }

        .list table .tit {
            font-size: 14px;
        }

        .list table tr {
            height: 30px;
        }

        .list table .th td {
            padding: 6px 3px;
        }

        .list table .on {
            background: #0089b4;
        }

        .list table .l {
            text-align: left;
        }

        .list table .r {
            text-align: right;
        }

.lists {
    padding: 10px 0;
}

    .lists dl {
    }

    .lists dt {
    }

    .lists dd {
        padding-left: 12px;
    }

    .lists dt {
        text-indent: 46px;
        height: 30px;
        line-height: 30px;
        position: relative;
    }

        .lists dt u {
            display: block;
            position: absolute;
            left: 5px;
            top: 10px;
            width: 9px;
            height: 9px;
            overflow: hidden;
            background: url(img/s_plus.gif) no-repeat center;
        }

        .lists dt.on u {
            background-image: url(img/s_minus.gif);
        }

        .lists dt b {
            display: block;
            position: absolute;
            left: 30px;
            top: 9px;
            width: 10px;
            height: 10px;
            overflow: hidden;
            background: #fcd;
            border: 1px solid #fff;
        }

        .lists dt i {
            display: block;
            position: absolute;
            color: #06c;
            font-style: normal;
            font-size: 16px;
            display: block;
            right: 0px;
            top: 6px;
            left: -30px;
            width: 14px;
            height: 14px;
            color: #fff;
        }

            .lists dt i.new {
                background: #f00;
                padding: 0;
                right: 10px;
                top: 16px;
                width: 8px;
                height: 8px;
                border-radius: 10px;
                overflow: hidden;
            }

        .lists dt span {
            font-size: 12px;
            color: #c3ffaa;
        }

        .lists dt .r {
            display: block;
            position: absolute;
            right: 0;
            top: 0;
            font-size: 14px;
            color: lime;
            padding: 5px;
        }

    .lists .g {
        text-indent: 11px;
    }

        .lists .g b {
            display: block;
            position: absolute;
            left: 3px;
            top: 14px;
            width: 12px;
            height: 12px;
            overflow: hidden;
            background: #fcd;
            border-radius: 10px;
        }

    .lists dd > a {
        display: block;
        height: 25px;
        line-height: 25px;
        position: relative;
        white-space: nowrap;
        padding-left: 17px;
    }

        .lists dd > a .r {
            display: block;
            position: absolute;
            right: 4px;
            top: 0px;
            height: 25px;
        }

            .lists dd > a .r i {
                float: left;
                display: block;
                width: 20px;
                height: 25px;
                margin: 6px auto;
            }

                .lists dd > a .r i.info {
                    background: url(img/info.gif) no-repeat 0px 1px;
                }

                .lists dd > a .r i.infonew {
                    background: url(img/infonew.gif) no-repeat 0px 1px;
                }

        .lists dd > a .new {
            background: #f00;
            display: block;
            position: absolute;
            left: -7px;
            top: 16px;
            width: 8px;
            height: 8px;
            border-radius: 10px;
            overflow: hidden;
        }

        .lists dd > a.gray {
            color: gray;
        }

        .lists dd > a.on {
            background: #0089B4;
        }

        .lists dd > a:hover {
            background: rgba(255, 255, 255, 0.1);
        }

.lists_ports {
    padding: 10px;
    line-height: 1.2em;
}

    .lists_ports dl {
        margin-top: 5px;
    }

    .lists_ports dt {
        padding: 5px;
        color: skyblue;
        background: #0089b4;
    }

    .lists_ports a {
        display: inline-block;
        margin-right: 5px;
        padding: 4px;
    }

.lists_message li {
    padding: 10px;
    color: #444;
    font-size: 13px;
}

    .lists_message li .msg {
        margin-top: 5px;
        display: inline-block;
        padding: 3px 8px;
        color: #fff;
        background: #2ed441;
        border-radius: 5px;
        word-break: break-all;
        line-height: 1.6em;
    }

.lists_track {
    padding: 10px;
}

    .lists_track a {
        display: block;
        position: relative;
    }

        .lists_track a .r {
            display: block;
            position: absolute;
            right: 0;
            top: 3px;
        }

.lists_mark {
}

    .lists_mark li {
        position: relative;
        padding: 4px 40px 4px 12px;
    }

        .lists_mark li p {
            display: inline;
        }

        .lists_mark li > i {
            font-size: 12px;
            color: #bbb;
            font-style: normal;
        }

        .lists_mark li .r {
            position: absolute;
            right: 0;
            top: 0;
            padding: 4px 10px 0 0;
            color: white;
        }

            .lists_mark li .r i {
                cursor: pointer;
            }

.xtitle {
    display: block;
    color: #000;
    height: 22px;
    line-height: 22px;
    position: relative;
}

.big_buttons {
    text-align: center;
}

    .big_buttons a {
        color: #fff;
        display: block;
        margin: 20px 20px;
        font-size: 16px;
        height: 40px;
        line-height: 40px;
        border: 1px solid #249db3;
        border-radius: 30px;
        cursor: pointer;
    }

        .big_buttons a:hover {
            border-color: #3ebfd6;
        }

.pages {
    padding: 5px 0;
    color: gray;
    font-size: 12px;
    text-align: right;
}

    .pages .jump {
        margin-left: 30px;
    }

        .pages .jump input {
            text-align: center;
            width: 40px;
            height: 14px;
            line-height: 14px;
            font-size: 12px;
            display: inline-block;
            padding: 0;
            margin: 0 3px;
        }

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

.more_data {
    display: block;
    color: gray;
    padding: 10px 0;
    text-align: center;
    cursor: pointer;
}

.popup {
}

    .popup h4 {
        font-weight: normal;
        color: #06c;
        font-size: 13px;
    }

    .popup p {
        margin: 0;
        color: #666;
        font-size: 12px;
    }

.group_color {
    padding: 10px 0;
}

    .group_color b {
        display: inline-block;
        width: 16px;
        height: 16px;
        overflow: hidden;
        border: 3px solid #fff;
        cursor: pointer;
        margin: 5px;
        border-radius: 15px;
    }

        .group_color b.on {
            border-color: #f60;
        }

.group_colors i {
    display: inline-block;
    border: 1px solid #fff;
    width: 12px;
    height: 12px;
    margin: 0px 3px;
}

    .group_colors i.on {
        border: 1px solid lime;
        width: 10px;
        height: 10px;
    }

.custom_tab {
    position: absolute;
    left: 50px;
    right: 70px;
    top: 0;
    height: 45px;
    text-align: center;
}

    .custom_tab ul {
        width: 164px;
        height: 45px;
        margin: 4px auto 0;
    }

        .custom_tab ul li {
            width: 80px;
            padding: 9px 0;
            float: left;
            position: relative;
            background: #f6f6f6;
            color: #666;
            border: 1px solid #ddd;
            display: inline-block;
            font-size: 14px;
            text-align: center;
            cursor: pointer;
        }

            .custom_tab ul li:first-child {
                border-radius: 20px 0 0 20px;
            }

            .custom_tab ul li:last-child {
                border-radius: 0 20px 20px 0;
                border-left-width: 0;
            }

            .custom_tab ul li.on {
                background: #fff;
                color: #000;
            }

    .custom_tab .new {
        background: #f00;
        display: block;
        position: absolute;
        right: 9px;
        top: 4px;
        width: 8px;
        height: 8px;
        border-radius: 10px;
        overflow: hidden;
    }

.port_tab li {
    display: inline-block;
}

.port_tab a {
    display: inline-block;
    padding: 6px;
    border-left: 1px solid #E2A5A5;
    margin: 4px 0;
    background: rgba(11, 54, 68, 0.85);
    cursor: pointer;
}

.domesticPort a:hover {
    background-color: #047FA7;
}

.port-tab-seleted {
    background: rgba(0,137,180,0.85) !important;
    border-bottom: 1px solid #8D77B1;
}

.OneOnePort li {
    display: inline-block;
}

.OneOnePort a {
    display: inline-block;
    padding: 3px 0 3px 23px;
    width: 200px;
}

    .OneOnePort a:hover {
        background-color: #9C82BD;
    }

.port-refer li {
    display: inline-block;
}

.port-refer a {
    display: inline-block;
    padding: 2px 4px;
}

    .port-refer a:hover {
        background-color: #EAE3E3;
    }

.port-refer-selected, .port-selected {
    background-color: #9C82BD;
}

.interPortGroup li {
    display: inline-block;
}

.interPortGroup a {
    display: inline-block;
    padding: 3px 0 3px 23px;
    width: 200px;
}

    .interPortGroup a:hover {
        background-color: #9C82BD;
    }

.port-tip {
    position: absolute;
    background-color: white;
    border: 1px solid #ccc;
    width: 261px;
    display: none;
    max-height: 300px;
    overflow-y: scroll;
    background-color: rgba(0,37,49,0.85);
}

    .port-tip a {
        display: block;
        padding: 0 9px;
        width: 225px;
        cursor: pointer;
        position: relative;
        height: 26px;
        line-height: 27px;
        overflow: hidden;
    }

.port-tip-a-hover {
    background: #0089b4;
}

.app-selectedports {
    height: 146px;
    margin-top: 7px;
    overflow-y: scroll;
    width: 260px !important;
}

    .app-selectedports li {
        float: left;
        padding: 4px 0px 0px 11px;
        margin: 0 0 5px 6px;
        width: 97px;
        height: 26px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

    .app-selectedports span {
        display: inline-block;
        float: left;
        line-height: 22px;
        width: 77px;
        white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        overflow: hidden;
    }

    .app-selectedports a {
        line-height: 22px;
    }

.legendBox {
    width: 200px;
    background: #e1f0ff;
    border: 1px solid #C8E1FB;
}

    .legendBox ul {
        padding: 10px;
    }

        .legendBox ul li {
            padding-left: 12px;
            height: 28px;
            text-indent: 3em;
            line-height: 28px;
            color: #666;
        }

            .legendBox ul li.legend_title {
                height: 20px;
                line-height: 20px;
                font-weight: bold;
                border-top: 1px solid #DBE8F3;
                margin: 3px 0;
                padding-left: 0;
                text-indent: 0;
                color: #333;
            }

            .legendBox ul li.fisShip {
                background: url(img/Screenshots/fisShip.gif) no-repeat 12px center;
            }

            .legendBox ul li.redShip {
                background: url(img/Screenshots/redShip.gif) no-repeat 12px center;
            }

            .legendBox ul li.purpleShip {
                background: url(img/Screenshots/purpleShip.gif) no-repeat 12px center;
            }

            .legendBox ul li.lawShip {
                background: url(img/Screenshots/lawShip.gif) no-repeat 12px center;
            }

            .legendBox ul li.yellowShip {
                background: url(img/Screenshots/yellowShip.gif) no-repeat 12px center;
            }

            .legendBox ul li.greenShip {
                background: url(img/Screenshots/greenShip.gif) no-repeat 12px center;
            }

            .legendBox ul li.grayShip {
                background: url(img/Screenshots/grayShip.gif) no-repeat 12px center;
            }

            .legendBox ul li.navigation {
                background: url(img/Screenshots/navigation.gif) no-repeat 12px center;
                line-height: 30px;
                height: 30px;
            }

            .legendBox ul li.turn {
                background: url(img/Screenshots/turn.gif) no-repeat 12px center;
                line-height: 30px;
                height: 30px;
            }

            .legendBox ul li.aisymbol {
                background: url(img/Screenshots/aisymbol.gif) no-repeat 12px center;
                line-height: 45px;
                height: 45px;
                text-indent: 8em;
            }

            .legendBox ul li.dplusymbol {
                background: url(img/Screenshots/dplusymbol.gif) no-repeat 12px center;
                line-height: 45px;
                height: 45px;
                text-indent: 8em;
            }

            .legendBox ul li.sAis {
                background: url(img/Screenshots/sAis.gif) no-repeat 12px center;
                line-height: 45px;
                height: 45px;
                text-indent: 8em;
            }

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

    .entry_lat_1 a {
        margin-top: 6px;
    }

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

    .entry_lng_1 a {
        margin-top: 6px;
    }

#entry_div_1 {
    overflow: auto;
    height: 200px;
}

    #entry_div_1 input {
        display: inline-block;
        width: 24px;
        height: 22px;
        background: #017aa1;
        border: 1px solid #00c3ff;
        margin: 2px 0;
    }

    #entry_div_1 label {
        display: inline-block;
        width: 25px;
    }

    #entry_div_1 select {
        display: inline-block;
        width: 38px;
        margin-left: 5px;
    }

    #entry_div_1 .du {
        width: 28px;
    }

    #entry_div_1 .fen {
        width: 49px;
    }

.entry_lat_1 a, .entry_lat_2 a {
    background: url(/Content/img/NSEW.png) no-repeat;
    background-position-y: -18px;
}

.entry_lat_1 .ns, .entry_lat_2 .ns {
    background: url(/Content/img/NSEW.png) no-repeat;
    background-position-y: 0px;
}

.entry_lng_1 a, .entry_lng_2 a {
    background: url(/Content/img/NSEW.png) no-repeat;
    background-position-y: -54px;
}

.entry_lng_1 .ew, .entry_lng_2 .ew {
    background: url(/Content/img/NSEW.png) no-repeat;
    background-position-y: -36px;
}

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

    .entry_lat_2 a {
        margin-top: 6px;
    }

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

    .entry_lng_2 a {
        margin-top: 6px;
    }

#entry_div_2 {
    overflow: auto;
    height: 200px;
}

    #entry_div_2 input {
        display: inline-block;
        width: 24px;
        height: 22px;
        background: #017aa1;
        border: 1px solid #00c3ff;
        margin: 2px 0;
    }

    #entry_div_2 label {
        display: inline-block;
        width: 25px;
    }

    #entry_div_2 select {
        display: inline-block;
        width: 38px;
        margin-left: 5px;
    }

    #entry_div_2 .du {
        width: 28px;
    }

    #entry_div_2 .miao {
        width: 31px;
    }

.entry_line_div {
    position: relative;
    height: 25px;
}

    .entry_line_div span {
        width: 11px;
        text-align: center;
    }

    .entry_line_div a {
        margin-left: 5px;
        height: 18px;
        width: 38px;
        cursor: pointer;
    }

    .entry_line_div div, .entry_line_div label, .entry_line_div span, .entry_line_div a, .entry_line_div input {
        float: left;
        display: inline-block;
    }

.entry_addnew {
    cursor: pointer;
    position: absolute;
    display: block;
    width: 60px;
    height: 15px;
    top: 8px;
    right: 5px;
    text-align: right;
}

.locusBox {
    font: normal 12px/19px Arial,sans-serif;
}

    .locusBox .attrName {
        width: 60px;
        text-align: left;
        display: inline-block;
    }

    .locusBox .attrCont {
        width: 115px;
        display: inline-block;
    }

.locusTab {
    height: 25px;
    border-bottom: 1px solid #00c3ff;
    position: relative;
}

    .locusTab .locus_ul {
        height: 24px;
        position: absolute;
        left: 0;
        top: 0;
    }

        .locusTab .locus_ul a {
            float: left;
            padding-left: 12px;
            display: inline-block;
            height: 24px;
            line-height: 24px;
            margin-right: 4px;
            border: 1px solid #00c3ff;
            background: rgba(0,37,49,0.85);
            transform: skew(-28deg,0deg);
        }

            .locusTab .locus_ul a span {
                display: block;
                float: left;
                padding-right: 12px;
                color: white;
                height: 24px;
                cursor: pointer;
                transform: skew(28deg,0deg);
            }

            .locusTab .locus_ul a.cur {
                background: rgba(0,137,180,0.85);
            }

.locusTab_main {
    overflow-x: hidden;
    overflow-y: auto;
    margin: 0px 11px;
}

.xalert {
    position: fixed;
    bottom: 20px;
    left: -150px;
    width: 300px;
    margin-left: 50%;
    text-align: center;
    z-index: 9999;
}

    .xalert div {
        display: inline-block;
        padding: 10px;
        color: #FFF;
        background: #FF0000;
        border-radius: 6px;
        font-size: 14px;
        min-width: 100px;
    }

.XPop {
    position: absolute;
    background: #1b3d48;
    border: 1px solid #64ABDB;
    min-width: 100px;
    min-height: 20px;
    z-index: 10000;
}

    .XPop ul {
        margin: 0;
        padding: 3px 5px;
    }

        .XPop ul li {
            line-height: 22px;
        }

            .XPop ul li input {
                margin-right: 3px;
            }

.alarm_config {
    padding: 10px 5px;
}

#alarm_config_tab {
    border-bottom: 1px solid #ddd;
    padding: 0 10px;
}

    #alarm_config_tab a {
        display: inline-block;
        padding: 3px 10px;
        margin-right: 5px;
    }

        #alarm_config_tab a.on {
            background: #eee;
        }

#alarm_config_box {
    min-height: 170px;
}

#alarm_config_btn {
    text-align: center;
}

#listenAlertsBox {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1001;
    width: 846px;
}

#AlarmBoxMax .min {
    position: absolute;
    right: 10px;
    top: -10px;
    overflow: hidden;
    font-size: 32px;
}

#AlarmBoxMax .body {
    width: 100%;
    height: 282px;
    overflow: auto;
}

#AlarmBoxMin {
    font-size: 16px;
    color: #00c3ff;
    cursor: pointer;
}

    #AlarmBoxMin b {
        padding: 0 2px;
        color: red;
    }

#AlarmTab {
    height: 28px;
    padding: 3px 0 0 10px;
    text-align: center;
}

    #AlarmTab a {
        display: inline-block;
        height: 28px;
        line-height: 28px;
        padding: 0 10px;
        position: relative;
    }

        #AlarmTab a i {
            position: absolute;
            right: 0px;
            top: 0px;
            min-width: 12px;
            line-height: 1em;
            text-align: center;
            padding: 1px;
            background: red;
            border-radius: 5px;
            color: white;
            font-style: normal;
            font-size: 12px;
            display: none;
        }

            #AlarmTab a i.new {
                display: block;
            }

#AlarmForm {
    margin: 10px 0 10px 20px;
}

    #AlarmForm select, #AlarmForm input {
        border: 1px solid #00c3ff;
        background: #002531;
        padding-left: 10px;
        outline: none;
        margin-right: 5px;
    }

    #AlarmForm select {
        height: 30px;
        width: 118px;
    }

    #AlarmForm input {
        height: 28px;
        width: 108px;
    }

.bell_box {
    width: auto;
    height: 48px;
    float: right;
    line-height: 50px;
    padding: 0 20px;
}

    .bell_box i {
        font-size: 22px;
        margin-right: 3px;
    }

.quite_btn {
    font-size: 14px;
    color: #00c3ff;
}

.user_name {
    margin: 0 20px;
    color: #fff;
    font-size: 18px;
}

.xtable {
    border-collapse: collapse;
    table-layout: fixed;
    cursor: default;
    width: 100%;
}

    .xtable, .xtable td {
        text-align: center;
    }

        .xtable td {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            line-height: 24px;
            font-size: 13px;
        }

            .xtable td.l {
                float: none;
                text-align: left;
            }

            .xtable td.r {
                float: none;
                text-align: right;
            }
        /*.xtable .bg, .xtable .th, .xtable .tf { background: #0089b4; }*/
        .xtable .ov {
            background: #fafafa;
        }

        .xtable .on {
            background: #ffb;
        }

.pages {
    padding: 10px 0;
    color: #a9a9a9;
    text-align: center;
}

    .pages a, .pages span {
        margin: 0 3px;
    }

.nodata {
    display: block;
    color: gray;
    padding: 10px 0;
    text-align: center;
    cursor: pointer;
}

.more_data {
    display: block;
    color: gray;
    padding: 10px 0;
    text-align: center;
    cursor: pointer;
}

.zcBtns {
    padding: 3px 0px;
    min-height: 22px;
}

.zcBtnsR {
    margin-left: auto;
    float: right;
}

.zcBtn, .zcBtnBig, .zcBtnDis, .zcBtnBigDis {
    display: inline-block;
    outline: none;
    background: #2770d4;
    color: #fff;
    font-size: 14px;
    padding: 0 15px;
    height: 22px;
    line-height: 22px;
    margin-right: 4px;
    border-radius: 4px;
}

.zcBtnBig, .zcBtnBigDis {
    background-image: url(/Content/img/btnBgBig.gif);
    width: 65px;
}

.zcBtnDis, .zcBtnBigDis {
    background-position: 0 -54px;
    cursor: default;
}

.zcBtn:hover, .zcBtnBig:hover {
    background-position: 0 -27px;
    text-decoration: none;
}

.form-horizontal .login-heading {
    display: block;
    font-size: 25px;
    font-weight: 700;
    padding: 20px 0;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 25px;
    box-sizing: border-box;
    color: #AFA9B8;
}

.form-horizontal .form-group {
    margin: 0 0 25px 0;
    position: relative;
    box-sizing: border-box;
}

    .form-horizontal .form-group i {
        position: absolute;
        top: 12px;
        left: 20px;
        font-size: 17px;
        color: #c8c8c8;
        transition: all 0.5s ease 0s;
    }

.form-horizontal .form-control {
    background: rgba(255,255,255,1);
    border-radius: 2px;
    box-shadow: none;
    padding: 0 20px 0 45px;
    height: 40px;
    border: none;
    font-family: 'Microsoft YaHei';
    color: black;
}

    .form-horizontal .form-control:focus {
    }

        .form-horizontal .form-control:focus + i {
            color: #666;
            border: none;
        }

.form-control {
    display: block;
    width: 282px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #fff;
}

.form-horizontal .btn {
    font-size: 14px;
    color: #fff;
    background: #db3235;
    border-radius: 2px;
    padding: 10px 0;
    border: none;
    transition: all 0.5s ease 0s;
    font-family: 'Microsoft YaHei';
    width: 100%;
}

.form-horizontal .text {
    line-height: 20px;
    color: #fff;
    font-family: 'Microsoft YaHei';
}

.form-horizontal .main-checkbox input[type=checkbox] {
    margin: 4px 0 0;
    line-height: normal;
}

.form-horizontal .main-checkbox {
    float: left;
    margin-right: 5px;
}

    .form-horizontal .main-checkbox label {
        width: 20px;
        height: 20px;
        position: absolute;
        cursor: pointer;
        max-width: 100%;
        margin-top: 5px;
        font-weight: 700;
    }

.clear {
    clear: both;
    height: 0;
}

.ta_c {
    text-align: center;
}

.loginMain {
    height: 138px;
    overflow: hidden;
    padding: 38px 9px 0 9px;
    width: 287px;
    background: url(img/loginBox.png) no-repeat 0 0;
}

    .loginMain ul {
        width: 100%;
        clear: both;
        padding-top: 4px;
        margin-bottom: 10px;
        *margin-bottom: -10px;
    }

        .loginMain ul li {
            height: 21px;
            padding-top: 7px;
            color: #676767;
        }

            .loginMain ul li span {
                display: inline-block;
                float: left;
                height: 21px;
                vertical-align: middle;
            }

    .loginMain .loginPadLeft {
        padding: 7px 0 0 48px;
    }

.loginName {
    color: #fff;
    font-size: 28px;
    margin: 2% 0 0 10%;
}

    .loginName img {
        vertical-align: middle;
        margin-right: 10px;
    }

.sSelect {
    padding-right: 9px;
}

    .sSelect select {
        border: 1px solid #7E9DB9;
        height: 20px;
        color: #618BA1;
    }

.loginWrap {
    width: 347px;
    margin: 15% auto 0;
}

.shipTypeCheck .ckLabel {
    height: 22px;
    line-height: 22px;
    display: inline-block;
    color: #0066A7;
    cursor: pointer;
}

.shipTypeCheck .ckInput {
    position: relative;
    top: 2px;
}

.icon_right {
    z-index: 99;
    position: absolute;
    top: 13px;
    right: 9px;
}

.icon_right1 .icon_reply {
    z-index: 9999;
    position: absolute;
    left: 5%;
    top: 2%;
    color: #fff;
    display: block;
    background: url('img/mapLayer.png') left center no-repeat;
    padding-left: 35px;
    line-height: 30px;
    font-size: 20px;
    padding-left: 29px;
}

.tab_map {
    width: 81px;
    display: block;
    padding: 3px 0 3px 5px;
    overflow: hidden;
    position: absolute;
    top: 50px;
    right: 0;
}

    .tab_map a {
        display: inline-block;
        width: 74px;
        float: left;
        height: 48px;
        margin-right: 5px;
        border: 1px solid #00c3ff;
        position: relative;
        cursor: pointer;
        border-radius: 1px;
    }

    .tab_map b {
        font-weight: normal;
        position: absolute;
        bottom: 0;
        right: 0;
        display: inline-block;
        width: 50px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        background: rgba(0,37,49,0.3);
        font-size: 14px;
        border-radius: 5px;
    }

.sea_maplayer {
    background: url('img/area_pic.jpg');
}

.maplayer {
    background: url('img/map_pic.jpg');
}

.star_maplayer {
    background: url('img/star_pic.jpg');
}

.tab_map .sel b {
    background: #0089b4;
}

.tab_map a.fl_r {
    float: right;
}

.tab_map1 {
    position: absolute;
    z-index: 10;
    right: 9px;
    top: 118px;
}

.tab_map u {
    text-decoration: none;
    display: block;
    font-size: 12px;
}

.tab_map img {
    height: 26px;
}

.leaflet-top {
    top: 80px;
}

.sel {
    border: 1px solid red !important;
}

.toleft_btn {
    position: absolute;
    left: 326px;
    top: 195px;
    width: 17px;
    height: 80px;
    cursor: pointer;
}

    .toleft_btn span, .toleft_btn b {
        display: inline-block;
    }

    .toleft_btn span {
        width: 17px;
        height: 40px;
        overflow: hidden;
    }

    .toleft_btn b {
        width: 12px;
        height: 40px;
        background: rgba(0,137,180,0.7);
    }

.toggle-bg_top b {
    transform: skew(0,28deg);
    margin-top: 5px;
}

.toggle-bg_bottom b {
    transform: skew(0,-28deg);
    margin-top: -5px;
}

.toggle-bg_top, .toggle-bg_bottom, .toleft_btn i {
    position: absolute;
}

.toggle-bg_top {
    top: 0;
}

.toggle-bg_bottom {
    bottom: 0;
}

.toleft_btn i {
    top: 33px;
    left: 4px;
}

#polyline-measure-control {
    background-image: url(/Content/img/ruler.png);
}

.hySearch {
    top: 28px;
    z-index: 1002;
    width: 736px;
    left: 10px;
    background: rgba(0,37,49,0.85);
    border: 1px solid #00c3ff;
    box-shadow: 0 0 5px #00c3ff inset;
    position: absolute;
    line-height: 36px;
    height: 57px;
}

    .hySearch div {
        margin: 10px 20px;
        overflow: hidden;
    }

    .hySearch input {
        width: 48px;
        line-height: 23px;
        height: 23px;
        padding-left: 0px;
        background: white;
        font-size: 14px;
        margin-left: 3px;
        border: 1px solid #ccc;
        border-radius: 2px;
        color: #000;
        text-align: center;
    }

.trackHistory {
    width: 209px;
    color: red;
    display: block;
    z-index: 9999;
    box-shadow: 0 0 5px #00c3ff inset;
    z-index: 1002;
    width: 177px;
    background: rgba(0,37,49,0.85);
    border: 1px solid #00c3ff;
    box-shadow: 0 0 5px #00c3ff inset;
    position: absolute;
    color: #fff;
    font-size: 14px;
    top: 59px;
    left: 19px;
}

    .trackHistory div {
        margin: 11px 20px 34px 16px;
        overflow: hidden;
    }

    .trackHistory button {
        z-index: 1002;
        width: 146px;
        background: rgba(0,37,49,0.85);
        border: 1px solid #00c3ff;
        box-shadow: 0 0 5px #00c3ff inset;
        position: absolute;
        color: #fff;
        font-size: 14px;
        height: 28px;
        line-height: 27px;
    }

.openeye {
    color: #64E564;
}

.openalert {
    color: #64E564;
}

.closealert {
    color: #fff;
}

.closeeye {
    color: #fff;
}

.leaflet-div-icon {
    background: yellow;
    border: 1px solid #F00707;
}

.pwd {
    background: rgba(0, 37, 49, 0);
    padding: 1px 20px; /* border-radius:5px; */
    margin: 10px auto;
}

.pwd {
    width: 228px;
}

    .pwd input[type="password"] {
        line-height: 20px;
        padding: 5px 10px;
        border: 1px solid #ccc;
        width: 207px;
        border-radius: 3px;
        color: #000;
    }

    .load p, .pwd p, .upd_pwd p {
        margin-bottom: 13px;
    }

.weather_buttons {
    width: 100%;
    overflow: hidden;
    margin-left: 25px;
}

    .weather_buttons a {
        display: inline-block;
        float: left;
        margin-right: 20px;
    }

        .weather_buttons a b {
            display: block;
            width: 36px;
            height: 15px;
            overflow: hidden;
            text-align: center;
            font-weight: normal;
            line-height: 1em;
            font-size: 12px;
        }

        .weather_buttons a i {
            display: block;
            width: 36px;
            height: 36px;
            overflow: hidden;
            border-radius: 7px;
            border: 1px solid #fff;
            margin: 0 3px 3px 0;
            background: url(/Content/img/wether.jpg?v=0) -72px 0;
        }

        .weather_buttons a.on i {
            background: url(/Content/img/wether.jpg?v=0) -36px 0;
            border-color: #e3e373;
        }

        .weather_buttons a:nth-child(1) i {
            background-position-y: -72px;
        }

        .weather_buttons a:nth-child(2) i {
            background-position-y: -108px;
        }

        .weather_buttons a:nth-child(3) i {
            background-position-y: -180px;
        }

        .weather_buttons a:nth-child(4) i {
            background-position-y: -36px;
        }

        .weather_buttons a:nth-child(5) i {
            background-position-y: 0;
        }

        .weather_buttons a:nth-child(6) i {
            background-position-y: -144px;
        }

        .weather_buttons a:nth-child(7) i {
            background-position-y: -216px;
        }

        .weather_buttons a:nth-child(8) i {
            background-position-y: -252px;
        }

        .weather_buttons a:nth-child(9) i {
            background-position-y: -288px;
        }

.bottom_box {
    position: absolute;
    bottom: 0;
    width: 100%;
}

    .bottom_box table {
        width: 100%; /* background: #f9f9f9; */
    }

    .bottom_box td {
        text-align: center;
        border: 1px solid #2C88C3; /* color: #333; */
        text-align: center;
        height: 24px;
        line-height: 24px;
        border: 1px solid rgba(252, 251, 251, 0.07);
        word-break: break-all;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .bottom_box th {
        background: rgba(255, 255, 255, 0.4);
        color: #fff;
        font-weight: normal; /* text-align: center; */ /* height: 24px; */ /* line-height: 24px; */ /* border: 1px solid rgba(252, 251, 251, 0.07); */ /* word-break: break-all; */ /* white-space: nowrap; */ /* overflow: hidden; */
        text-overflow: ellipsis;
        text-align: center;
        height: 24px;
        line-height: 24px;
        border: 1px solid rgba(252, 251, 251, 0.07);
        word-break: break-all;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .bottom_box tr {
        height: 24px;
    }

.dolines {
    background: rgba(0,37,49,0.85);
    overflow: hidden;
    padding: 10px 7px;
    box-shadow: 0 0 15px #ccc;
    border-top: 1px solid #999999;
    box-shadow: 0 0 8px #555555 inset; /* border: 1px solid #00c3ff; */
    box-shadow: 0 0 7px #00c3ff inset;
    color: !important #333;
}

    .dolines p {
        margin: 6px;
    }

    .dolines select {
        width: 149px; /* color: #333; */ /* background: rgba(0, 0, 0, 0.81); */
        border: 1px solid #fff;
    }

    .dolines td a {
        margin: 0 3px; /* color: #333; */
    }

        .dolines td a:hover {
            color: #027FF9;
        }

.up_btn {
    text-align: center;
    height: 24px;
}

    .up_btn a {
        display: inline-block;
        width: 68px;
        background: rgba(0, 0, 0, 0.44);
        font-size: 16px;
        color: rgb(255, 255, 255);
        line-height: 24px;
    }

.line_btn {
    display: inline-block;
    width: 82px;
    text-align: center;
}

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

    .line_btn:hover, .more_btn:hover {
        background: #0776E2;
    }

.more_btn {
    display: inline-block;
    width: 30px;
    text-align: center;
    margin-right: 10px;
    font-size: 14px;
    background: #333;
    line-height: 40px;
}

.left_btn {
    text-align: center;
    position: absolute;
    top: 0px;
}

    .left_btn a {
        display: inline-block;
        width: 24px;
        background: rgba(0, 0, 0, 0.44);
        font-size: 16px;
        color: rgb(255, 255, 255);
        line-height: 68px;
        position: fixed;
        left: 269px;
    }

.style_btn1 {
    display: inline-block;
    width: 100px;
    line-height: 24px;
    border: 1px solid #027FF9;
    border-radius: 3px;
    text-align: center;
    margin-right: 10px;
    color: #027FF9;
}

.c_grey {
    color: #666;
}

.style_btn2 a {
    display: inline-block;
    line-height: 22px;
    padding: 0 10px;
    text-align: center; /* background: #2475C3; */
    color: #fff;
    border-radius: 2px;
    margin-left: 5px;
    font-size: 12px;
}

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

.hr-warp {
    height: 1px;
    line-height: 0;
    font-size: 0;
    background: #d0d0d0;
    border-bottom: 1px solid #ffffff;
}

.actionbox {
    height: 30px;
    margin: 5px 0;
}

    .actionbox label {
        color: #666666;
    }

.buildbox {
    margin: 0 10px;
}

    .buildbox .mock {
        display: inline-block;
        height: 26px;
        line-height: 26px;
    }

        .buildbox .mock:first-child {
            margin-right: 10px;
        }

.point-timeseries input {
    width: 100px;
}

.vr-warp,
.vr-warp2 {
    margin: 0 10px;
    width: 1px;
    height: 160px;
    line-height: 0;
    background: #d0d0d0;
    border-right: 1px solid #ffffff;
}

.vr-warp2 {
    height: 26px;
}

.sxy-btn:hover {
    color: #fff;
    background: #027FF9;
}

    .sxy-btn:hover.icon:before {
        color: #2475C3;
    }

.sxy-btn.icon {
    speak: none;
    line-height: 1;
    text-transform: none;
    line-height: 22px;
}

.sxy-btn {
    display: inline-block;
    min-width: 80px;
    height: 24px;
    line-height: 24px;
    margin: 0 13px;
    border-radius: 3px;
    border: 1px solid #999999;
    box-shadow: 0 0 10px #cccccc inset;
    background: #f7f7f7;
    text-align: center;
    cursor: pointer;
    -webkit-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
}

.sxy-btn-group {
    position: relative;
    display: inline-block;
    margin: 0 10px;
    vertical-align: middle;
}

    .sxy-btn-group > .sxy-btn {
        position: relative;
        float: left;
        margin: 0;
        margin-left: -1px;
    }

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

    .sxy-btns .sxy-btn {
        font-size: 14px;
    }

.subjectbox {
    min-width: 768px;
    margin: 5px 0;
    padding: 0 10px;
}

.chartbox {
    height: 214px;
}

._tr_def_color {
    background-color: rgba(233, 233, 233, 0.1);
}

._tr_bc_color { /* background-color: #8a8f93; */
    color: #fff;
}

.lineNumIcon {
    width: 16px !important;
    height: 16px !important;
    border-radius: 8px;
    color: #ffa500;
    background: #fff;
    border: 1px solid #ffa500;
}

.lineNumIconCur {
    width: 16px !important;
    height: 16px !important;
    border-radius: 8px;
    color: #ffa500;
    background: #8323b8;
    border: 1px solid #ffa500;
}

.table_now {
    width: 100%;
    color: #333;
    font-size: 14px;
    padding: 5px 0;
    margin: 10px 0;
    font-family: 'Microsoft YaHei';
}

.currentVoyage p {
    color: #fff;
    font-size: 10px;
    line-height: 16px;
    text-align: center;
}

.currentVoyage span {
    color: #fff;
    font-size: 10px;
    line-height: 16px;
    text-align: center;
}

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

.fz_big {
    font-size: 12px;
    color: #fff;
    width: 106px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    margin: 0 auto;
}

.pos_a {
    position: absolute;
}

.line_state {
    left: 0;
    top: 5px;
    display: block;
    width: 100%;
    text-align: center;
}

.c_blue {
    color: #237fa3;
    font-family: "Microsoft YaHei";
}

.circle_line {
    height: 1px;
    position: relative;
    background: #ccc;
    margin: 5px 7px;
}

.circle_left {
    left: 0;
}

.circle_right {
    right: 0;
}

.arrow_blue {
    height: 5px;
    background: #d9f5ff;
    border-radius: 5px;
}

.arrow_purple {
    background: #a32383;
}

.arrow_red {
    background: #ec2404;
}

.circle_line {
    height: 1px;
    position: relative;
    background: #ccc;
    margin: 5px 7px;
}

.circle_left, .circle_right {
    display: inline-block;
    width: 5px;
    height: 5px;
    background: #fff;
    border: 1px solid #ccc;
    position: absolute;
    top: -3px;
    border-radius: 3px;
}

.currentVoyage p {
    line-height: 30px;
}

.fz_18 {
    font-size: 18px;
    width: 109px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    height: 22px;
    margin: 0 auto;
}

.fw_b {
    font-weight: bold;
}

.ac_line {
    margin-bottom: 10px;
    padding-left: 17px;
}

    .ac_line .fl_r {
        margin-right: 17px;
        color: #fff;
        font-size: 10px;
    }

.historyVoyage p {
    color: #fff;
    font-size: 10px;
    text-align: center;
}

.his_tit span, .his_tit a {
    float: right;
    color: #fff;
    font-size: 10px;
    margin: 0 5px;
    cursor: pointer;
}

.table_history {
    margin: 15px auto;
    width: 370px;
    border-radius: 3px;
    box-shadow: 0 0 5px #999;
    position: relative;
}

    .table_history .curve {
        position: absolute;
        right: 0;
        bottom: 3px;
        cursor: pointer;
        color: lime;
        text-decoration: underline;
    }

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

.alarm_panel {
    position: relative;
}

.alarm_tab {
    border-bottom: 1px solid #00c3ff;
    padding: 5px 10px 0;
    height: 28px;
}

    .alarm_tab a {
        display: inline-block;
        padding: 0 7px;
        margin-right: 1px;
        height: 28px;
        line-height: 28px;
        font-size: 13px;
        position: relative;
    }

        .alarm_tab a i {
            display: block;
            position: absolute;
            right: -3px;
            top: -3px;
            padding: 1px 1px;
            border-radius: 10px;
            background: red;
            color: white;
            line-height: 1em;
            min-width: 13px;
            text-align: center;
            font-size: 12px;
        }

            .alarm_tab a i:empty {
                display: none;
            }

        .alarm_tab a.on {
            background: #0089b4;
            border-radius: 5px 5px 0 0;
        }

.alarm_rbtn {
    display: block;
    position: absolute;
    right: 6px;
    top: 5px;
    width: 50px;
    height: 22px;
    line-height: 22px;
    border-radius: 15px;
    text-align: center;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
}

    .alarm_rbtn:hover {
        background: #0089b4;
    }

.alarm_rbtn {
    display: none;
    position: absolute;
    right: 10px;
    top: 5px;
    padding: 0 10px;
    height: 22px;
    line-height: 22px;
    border-radius: 15px;
    background: #0089b4;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
}

    .alarm_rbtn i {
        font-size: 18px;
        margin-top: 3px;
    }

.alarm_config {
    display: block;
    position: absolute;
    right: 10px;
    top: 5px;
    width: 74px;
    height: 22px;
    border-radius: 15px;
    background: #828282;
    color: #eee;
    line-height: 1em;
    font-size: 12px;
    cursor: pointer;
}

    .alarm_config i,
    .alarm_config u {
        display: block;
        position: absolute;
        left: 2px;
        top: 1px;
        width: 35px;
        height: 20px;
        line-height: 20px;
        border-radius: 15px;
        background: #0089b4;
        text-align: center;
    }

    .alarm_config u {
        background: transparent;
        left: auto;
        right: 2px;
    }

    .alarm_config.on i {
        background: transparent;
    }

    .alarm_config.on u {
        background: #0089b4;
    }

.alarm_snum {
    font-size: 12px;
    color: #ccc;
}

.lists_shapes {
}

    .lists_shapes dt {
        background: rgba(255,255,255,0.1);
        padding: 10px;
        position: relative;
    }

        .lists_shapes dt .s {
            color: #1db3e2;
        }

        .lists_shapes dt .r {
            position: absolute;
            right: 18px;
            top: 10px;
        }

            .lists_shapes dt .r i {
                cursor: pointer;
            }

    .lists_shapes a {
        display: block;
        height: 20px;
        line-height: 20px;
        position: relative;
        white-space: nowrap;
        padding: 5px 10px;
        position: relative;
    }

        .lists_shapes a:hover {
            background: rgba(255, 255, 255, 0.05);
        }

        .lists_shapes a .r {
            display: block;
            position: absolute;
            right: 4px;
            top: 2px;
            height: 25px;
        }

            .lists_shapes a .r i {
                float: left;
                display: block;
                width: 20px;
                height: 25px;
                margin: 6px auto;
            }

.openeye {
    color: #64E564;
}

.closeeye {
    color: #fff;
}

.shapewin {
}

    .shapewin div {
        line-height: 28px;
        margin: 0px auto;
    }

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

.myShapeSetting {
}

    .myShapeSetting label {
    }

.shapepoint {
}

    .shapepoint i {
        display: inline-block;
        border: 1px solid #fff;
        width: 25px;
        height: 42px;
        margin: 0px 3px;
        cursor: pointer;
    }

        .shapepoint i.on {
            border: 1px solid lime;
            width: 25px;
            height: 42px;
        }

.shapeline {
}

    .shapeline i {
        display: inline-block;
        border: 1px solid #fff;
        width: 12px;
        height: 12px;
        margin: 0px 3px;
    }

        .shapeline i.on {
            border: 1px solid lime;
            width: 12px;
            height: 12px;
        }

.shapepoly {
}

    .shapepoly i {
        display: inline-block;
        border: 1px solid #fff;
        width: 12px;
        height: 12px;
        margin: 0px 3px;
    }

        .shapepoly i.on {
            border: 1px solid lime;
            width: 12px;
            height: 12px;
        }

.shapecircle {
}

    .shapecircle i {
        display: inline-block;
        border: 1px solid #fff;
        width: 12px;
        height: 12px;
        margin: 0px 3px;
    }

        .shapecircle i.on {
            border: 1px solid lime;
            width: 12px;
            height: 12px;
        }

.aackLabel {
    display: inline-block;
    width: 32%;
}

.shape-circle-radio-txt {
    height: 23px;
    width: 88px;
}

.shape-circle-radio-div {
    position: absolute;
    top: 29%;
    left: 2%;
}

.shape-hide {
    display: none;
}

.fleetship_select {
}

.rnav {
    position: absolute;
    right: 20px;
    bottom: 70px;
    width: 50px;
    z-index: 10000;
}

    .rnav a {
        display: block;
        width: 50px;
        height: 50px;
        line-height: 50px;
        border-radius: 25px;
        margin-top: 10px;
        border: 1px solid #00c3ff;
        background: rgba(0,37,49,0.7);
        box-shadow: 0 0 5px #00c3ff inset;
        text-align: center;
    }

        .rnav a:hover {
            background: rgba(0,37,49,0.8);
        }

.toolbox {
    right: 13px;
    top: 300px;
    width: 60px;
    height: 60px;
    overflow: hidden;
    background: rgba(0,15,39,0.7);
    border-radius: 6px;
    box-shadow: 0 0 6px #999;
    display: inline-block;
    position: absolute;
    z-index: 999;
}

.toolbox_show {
    height: 300px;
}

.toolbox a {
    display: block;
    height: 60px;
    text-align: center;
    color: #fff;
    font-size: 12px;
}

    .toolbox a i {
        font-size: 26px;
        display: inline-block;
        padding-top: 8px;
    }

        .toolbox a i.icon-gongneng {
            padding-top: 18px;
        }

        .toolbox a i.icon-weifafanzuianjian {
            padding-top: 0px;
        }

        .toolbox a i.icon-a, .toolbox a i.icon-tulizhanshi {
            font-size: 22px;
            padding-top: 12px;
        }

    .toolbox a:hover, .toolbox a.on {
        background: rgba(0,15,39,0.6);
        color: #38b0fc;
    }

.toolbox .list_btn {
    border-radius: 6px;
}

.toolbox .pic_demo {
    border-radius: 0 0 6px 6px;
}

.toolbox_show .list_btn {
    background: rgba(0,15,39,0.6);
    color: #38b0fc;
    border-radius: 6px 6px 0 0;
}

.topbox {
    position: absolute;
    left: 10px;
    top: 92px;
    width: 60px;
    z-index: 1000;
}

    .topbox a {
        display: block;
        float: left;
        width: 60px;
        height: 60px;
        text-align: center;
        color: #fff;
        font-size: 12px;
        background: rgba(0,15,39,0.7);
        border-radius: 100%;
        border: 1px solid #00c3ff;
        box-shadow: 0 0 5px #00c3ff inset;
        margin-bottom: 5px;
        position: relative;
    }

        .topbox a s {
            display: block;
            position: absolute;
            right: 0;
            top: 0;
            padding: 1px 1px;
            border-radius: 10px;
            background: red;
            color: white;
            line-height: 1em;
            min-width: 13px;
            text-align: center;
            font-size: 12px;
            text-decoration: none;
        }

            .topbox a s:empty {
                display: none;
            }

        .topbox a i {
            font-size: 26px;
            display: inline-block;
            padding-top: 8px;
        }

            .topbox a i.icon-gongneng {
                padding-top: 18px;
            }

            .topbox a i.icon-weifafanzuianjian {
                padding-top: 0px;
            }

            .topbox a i.icon-a,
            .topbox a i.icon-tulizhanshi {
                font-size: 22px;
                padding-top: 12px;
            }

        .topbox a:hover,
        .topbox a.on {
            background: rgba(0,137,180,0.85);
        }

.g_icon {
    display: block;
    position: absolute;
    width: 28px;
    height: 28px;
    line-height: 28px;
    background: rgba(255,255,255,.9);
    color: #333;
    font-size: 16px;
    text-align: center;
    border: 1px solid #fff;
    overflow: hidden;
    z-index: 1000;
}

    .g_icon > i {
        color: #555;
    }

#ship_info_1 {
    min-height: 178px;
}

    #ship_info_1 table {
        width: 100%;
        line-height: 21px;
    }

    #ship_info_1 td {
        white-space: nowrap;
    }

.shipinfo_no_data {
    display: block;
    color: gray;
    text-align: center;
    cursor: pointer;
    position: absolute;
    left: 273px;
    top: 114px;
}

#ship_info_1 .shipinfo_padding_left {
    padding-left: 6px;
}

.shipinfo_tabs {
    border-bottom: 1px solid #017aa1;
    padding-left: 5px;
}

    .shipinfo_tabs span {
        display: inline-block;
        font-size: 13px;
        margin-right: 4px;
        background: transparent;
        padding: 3px 4px;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        cursor: pointer;
    }

    .shipinfo_tabs .on {
        background: rgba(255, 255, 255, 0.1);
    }

.user_radio {
    position: relative;
    top: -3px;
}

.maptabs_bg {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 80px;
    background: #fff;
    z-index: 1001;
    opacity: 0.7;
}

.maptabs_box {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 1002;
}

    .maptabs_box a {
        display: inline-block;
        position: absolute;
    }

.maptabs_box_show {
    width: 258px;
    height: 60px;
}

    .maptabs_box_show a {
        border: 1px solid #2770d4;
        z-index: 1002;
    }

        .maptabs_box_show a:hover {
            border: 1px solid #fff;
        }

.maptabs_box_hide {
    width: 96px;
    height: 60px;
}

    .maptabs_box_hide a {
        border: 1px solid #fff;
        top: 0;
        box-shadow: 0 2px 2px rgba(0,0,0,0.25);
    }

.map_layer1 {
    right: 0;
    opacity: 1;
    z-index: 1005;
}

.maptabs_box_hide a.map_layer2 {
    right: 10px;
    opacity: 0.5;
    z-index: 1004;
}

.maptabs_box_hide a.map_layer3 {
    right: 20px;
    opacity: 0.3;
    z-index: 1003;
}

.leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar {
    border: 0;
    box-shadow: 0 2px 2px rgba(0,0,0,0.25);
}

.maptabs_box b {
    position: absolute;
    bottom: 0;
    right: 0;
    display: inline-block;
    width: 50px;
    line-height: 20px;
    color: #fff;
    background: rgba(0,0,0,0.5);
    text-align: center;
    font-weight: normal;
}

.maptabs_box .map_layer1 b {
    background: #2770d4;
}

.maptabs_box img {
    vertical-align: middle;
}

.shipfilter_shiptype_label {
    display: inline-block;
    width: 48%;
}

#shipfilter_box {
    color: white;
    line-height: 25px;
    padding: 6px;
    padding-left: 15px;
}

    #shipfilter_box label {
        font-size: 13px;
    }

.leaflet-control-mouseposition .lat, .leaflet-control-mouseposition .lng {
    color: #333;
}

#mainbox {
    position: absolute;
    left: 0;
    top: 51px;
    bottom: 0;
    right: 0;
    overflow: hidden;
}

.full #mainbox {
    top: 0;
}

.full .header {
    display: none;
}

.left_box {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 450px;
    overflow: hidden;
}

.right_box {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 449px;
    border-left: 1px solid #bbb;
    background: #0f6473;
    color: #fff;
}

    .right_box .bar {
        position: absolute;
        left: -13px;
        width: 12px;
        height: 40px;
        top: 19px;
        background: #0f6473 url(/Content/img/sidebar.png) no-repeat -5px 15px;
        color: #fff;
        border-left: 1px solid #bbb;
        z-index: 1000;
        border-radius: 5px 0 0 5px;
        cursor: pointer;
    }

.togglebar .left_box {
    right: 0;
}

.togglebar .right_box {
    width: 0;
}

    .togglebar .right_box .bar {
        background-position: -35px 15px;
    }

.pans_shipinfo > div {
    padding: 5px 10px;
    min-height: 186px;
}

.pans_shipinfo table td {
    font-size: 13px;
}

.tabs {
    height: 30px;
    padding: 9px 0 0 10px;
    border-bottom: 1px solid #00c3ff;
    overflow: hidden;
    user-select: none;
}

    .tabs li {
        position: relative;
        display: inline-block;
        line-height: 30px;
        padding: 0 19px;
        text-align: center;
        float: left;
        background: #117696;
        border-radius: 5px 5px 0 0;
        margin-right: 9px;
        font-size: 16px;
        cursor: pointer;
    }

        .tabs li.on {
            background: #0089b4;
            color: #fff;
        }

        .tabs li i {
            display: block;
            position: absolute;
            right: -4px;
            top: -5px;
            padding: 1px 1px;
            border-radius: 10px;
            background: #0f6473;
            color: white;
            line-height: 1em;
            min-width: 13px;
            text-align: center;
            font-size: 12px;
            text-decoration: none;
        }

            .tabs li i:empty {
                display: none;
            }

.tabs_min {
    height: 26px;
    padding: 7px 0 0 10px;
    border-bottom: 1px solid #00c3ff;
    overflow: hidden;
}

    .tabs_min li {
        line-height: 27px;
        padding: 0 10px;
        font-size: 13px;
        border-radius: 4px 4px 0 0;
        margin-right: 6px;
    }

        .tabs_min li.on {
            background: #0089b4;
        }

        .tabs_min li i {
            right: -6px;
            top: -6px;
        }

            .tabs_min li i:empty {
                display: none;
            }

.right_pan {
    position: absolute;
    left: 0;
    right: 0;
    top: 40px;
    bottom: 0;
    overflow: auto;
}

.right_pan2 {
    position: absolute;
    left: 0;
    right: 0;
    top: 48px;
    bottom: 0;
    overflow: auto;
}

.right_form {
    padding: 12px 10px;
}

.right_form_btn {
    display: inline-block;
    padding: 3px 15px;
    border: 1px solid #00c3ff;
    background: #0089b4;
    color: #fff;
    margin-left: 3px;
}

    .right_form_btn i {
        font-style: normal;
        font-size: 12px;
        color: gray;
    }

        .right_form_btn i:empty {
            display: none;
        }

.ships_table {
    border-collapse: collapse;
    width: 100%;
}

    .ships_table td {
        padding: 4px 0;
        text-align: center;
    }

        .ships_table td > a {
            color: #57d7ff;
        }

        .ships_table td > input {
            border: 0;
            padding: 3px 0;
            background: transparent;
            width: 99%;
            color: #fff;
            border-radius: 0;
        }

            .ships_table td > input:focus {
                background: #198ea2;
            }

        .ships_table td.i {
            cursor: pointer;
        }

            .ships_table td.i i {
                display: block;
                width: 8px;
                height: 8px;
                border-radius: 8px;
                background: #ccc;
                margin: auto;
                position: relative;
                top: 1px;
            }

    .ships_table .th {
        background: #0089b4;
    }

        .ships_table .th td {
            padding: 5px 0;
        }

        .ships_table .th .on {
            font-weight: bold;
        }

    .ships_table .l {
        text-align: left;
    }

.ships_table_min td {
    padding: 1px 0;
}

.ships_table_min tr:hover {
    background: #0089b4;
}

.ships_table_min tr.on {
    background: #0089b4;
}

.setting_box {
    display: flex;
    padding: 10px;
}

.setting_list {
    width: 200px;
    height: 360px;
    overflow: auto;
    border: 1px solid #47cedb;
}

    .setting_list a {
        display: block;
        padding: 3px 7px;
        color: #57d7ff;
    }

        .setting_list a:hover {
            background: rgba(255,255,255,.1);
        }

        .setting_list a.on {
            background: rgba(255,255,255,.2);
        }

        .setting_list a:last-child {
            color: lime;
        }

.setting_form {
    flex: 1;
    padding-left: 10px;
}

    .setting_form dl {
        margin-bottom: 10px;
    }

        .setting_form dl dt {
            padding: 3px;
            color: #8ae0ff;
            position: relative;
        }

            .setting_form dl dt span {
                font-size: 12px;
            }

            .setting_form dl dt .r {
                position: absolute;
                right: 0px;
                top: 7px;
                font-size: 12px;
                color: #5c8b9e;
            }

        .setting_form dl dd {
            padding: 10px 0;
        }

            .setting_form dl dd label {
                display: inline-block;
                margin-right: 10px;
            }

                .setting_form dl dd label input {
                }

.setting_form_auto {
    height: 324px;
    overflow: auto;
}

.setting_form_btns {
    text-align: right;
    padding: 8px 3px;
}

#win_track_tabs {
    height: 22px;
    overflow: hidden;
    background: rgba(255,255,255,0.1);
}

    #win_track_tabs a {
        display: inline-block;
        height: 22px;
        line-height: 22px;
        padding: 0 20px;
        float: left;
    }

        #win_track_tabs a:hover {
            background: rgba(255,255,255,0.2);
        }

        #win_track_tabs a.on {
            background: #0089b4;
        }


.tbox {
    width: 580px;
    margin-left: 10px;
}

    .tbox .top {
        height: 30px;
        position: relative;
    }

        .tbox .top input {
            position: absolute;
            bottom: -1px;
            height: 20px;
            width: 200px;
            padding: 0 5px;
            border: 1px solid #47cedb;
            background: #0089b4;
            z-index: 1;
            outline: none;
            border-radius: 0;
        }

        .tbox .top .l, .tbox .top .r {
            position: absolute;
            bottom: 2px;
            left: 227px;
            color: #5c8b9e;
        }

        .tbox .top .r {
            left: auto;
            right: 227px;
        }

        .tbox .top .lselect {
            left: 141px;
            width: 128px;
            position: absolute;
            border-radius: 0;
            bottom: -1px;
            height: 22px;
        }

    .tbox .lst {
        height: 380px;
        position: relative;
    }

    .tbox .lt,
    .tbox .rt {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 267px;
        border: 1px solid #47cedb;
        overflow: auto;
    }

    .tbox .lt {
        left: 0;
    }

    .tbox .rt {
        right: 0;
    }

        .tbox .lt a,
        .tbox .rt a {
            display: block;
            height: 21px;
            line-height: 21px;
            overflow: hidden;
            padding: 0 5px;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

            .tbox .lt a:hover,
            .tbox .rt a:hover {
                background: rgba(255, 255, 255, 0.2);
            }

            .tbox .lt a.on,
            .tbox .rt a.on {
                background: #06c;
                color: white;
            }

    .tbox .ct {
        position: absolute;
        left: 50%;
        top: 50%;
    }

        .tbox .ct div {
            text-align: center;
            position: relative;
            left: -15px;
            top: -25px;
            width: 30px;
            height: 50px;
        }

            .tbox .ct div a {
                display: block;
                height: 21px;
                line-height: 18px;
                overflow: hidden;
                background: #0089b4;
                color: #fff;
                font-size: 22px;
                margin: 5px auto;
                border-radius: 4px;
                border: 1px solid #00c3ff;
            }

                .tbox .ct div a.on {
                    color: #f60;
                    font-weight: bold;
                }

                .tbox .ct div a:hover {
                    background: #30a9d4;
                    cursor: pointer;
                }

.tbox_type {
    position: relative;
    color: green;
    left: 103px;
}

.right_search {
    text-align: left;
    padding: 5px 10px;
}

    .right_search > li {
        padding: 3px 0;
        position: relative;
        width: 100%;
        overflow: hidden;
    }

        .right_search > li > label {
            display: inline-block;
            float: left;
        }

        .right_search > li > span {
            display: inline-block;
            float: left;
            width: 387px;
        }

            .right_search > li > span > label {
                margin-right: 3px;
            }

            .right_search > li > span.col2 > label {
                display: inline-block;
                width: 190px;
            }

            .right_search > li > span.col3 > label {
                display: inline-block;
                width: 126px;
            }

            .right_search > li > span > label > b {
                display: inline-block;
                width: 10px;
                height: 10px;
                border: 1px solid #fff;
                background: #ffcc66;
                position: relative;
                left: 0;
                top: 1px;
                margin-right: 3px;
            }

            .right_search > li > span > label > span {
                margin-right: 3px;
                color: #57d7ff;
            }

            .right_search > li > span > label > i {
                font-size: 12px;
                color: #bbb;
            }

            .right_search > li > span > input[type=text] {
                width: 223px;
            }

.tship_filter label i {
    font-size: 12px;
    color: #bbb;
    margin-left: 2px;
}

.xwin_title_link {
    font-size: 12px;
    color: lime;
}

.rlist_box {
    position: absolute;
    overflow: auto;
    left: 0;
    right: 0;
    bottom: 0;
    top: 107px;
}

.right_pan table {
    width: 100%;
}

.right_pan tr td {
    text-align: center;
    padding: 3px 0;
    font-size: 13px;
}

.right_pan tr:hover {
    background: rgba(255,255,255,.1);
}

.right_pan tr.th,
.right_pan tr.th:hover {
    background: #0089b4;
}

.right_pan tr.on {
    background: rgba(255,255,255,.2);
}

.right_pan td.l {
    text-align: left;
}

.right_pan td a {
    color: #57d7ff;
}

.vtable {
    width: 100%;
}

    .vtable tr td {
        text-align: center;
        padding: 3px 0;
        font-size: 13px;
    }

    .vtable tr:hover {
        background: rgba(255,255,255,.1);
    }

    .vtable tr.th,
    .vtable tr.th:hover {
        background: #0089b4;
    }

    .vtable tr.on {
        background: rgba(255,255,255,.2);
    }

    .vtable td.l {
        text-align: left;
    }

    .vtable .dark {
        color: #ccc;
    }

.pbuttons {
    padding: 10px;
}

    .pbuttons a {
        display: block;
        padding: 10px;
        text-align: center;
        border: 1px solid rgba(255,255,255,.3);
        border-radius: 20px;
        margin: 10px;
    }

        .pbuttons a:hover {
            background: rgba(255,255,255,.1);
        }

#drawShape {
    display: none;
    width: 180px;
    height: 36px;
    background: rgb(255, 255, 255);
    position: absolute;
    z-index: 1000;
    right: 42px;
    top: 23px;
    border-radius: 4px;
    text-align: center;
    text-decoration: none;
    color: rgb(0, 0, 0);
}

    #drawShape span {
        display: inline-block;
        width: 60px;
        height: 36px;
        line-height: 36px;
        border-radius: 4px;
        cursor: pointer;
    }

        #drawShape span.select {
            background: #0089b4;
            color: #fff;
        }

    #drawShape i {
        position: absolute;
        right: -10px;
        top: -10px;
        background: #f00;
        color: #fff;
        width: 18px;
        height: 18px;
        border-radius: 18px;
        background: #f00 url(/Content/xwin/img/close.png) no-repeat center;
        background-size: 9px auto;
        cursor: pointer;
    }

.leaflet_label_orange {
    background: rgba(0,0,0,0.3);
    margin: -3px 22px;
    line-height: 1em;
    padding: 3px;
    color: #fff;
}

.tab {
    color: black;
}

.menu_click_info_child h2 {
    line-height: 45px;
    border-bottom: 1px solid #ddd;
    font-weight: 400;
    color: #666;
    font-size: 14px;
}

.bg_grey {
    background: #f6f6f6;
}

#fs_box tr:hover {
    background: #f6f6f6;
}

table .th td s {
    background-repeat: no-repeat;
    background-position-x: 0;
    display: inline-block;
    width: 14px;
    height: 14px;
    vertical-align: middle;
    margin: 0 5px 0 10px;
}

    table .th td s.desc {
        background-image: url(/Content/images/arrive_warn_icos.png);
        background-position-y: -42px;
        margin: 0 10px 0 5px;
    }

    table .th td s.asc {
        background-image: url(/Content/images/arrive_warn_icos.png);
        background-position-y: -42px;
        background-position-x: -14px;
        margin: 0 10px 0 5px;
    }

.tddashed {
    padding-right:8px;
    width:178px;
}

.tdedit {
   width:65px;  
}

.r {
    text-align: right;
}

.task tr {
    height: 45px;
}

.borderspan {
  height:15px;border-right: 1px;border-right-style: dashed;margin-top: 6px;float:right;
}

.xtable tr {
  border-bottom: 1px solid #ddd;
  height:30px;
}

    .xtable tr:hover {
      background:hsla(0,0%,79.2%,.3)
    }