/*
* @ PROJECT F3
* @ AUTNOR ZoomWell Team
* @ LINK WWW.ZWLBS.COM
*/
.button-group .button {
    height: 27px;
    line-height: 25px;
    color: #1f1f20;
    border: 0;
    outline: 0;
    padding: 0 10px;
    border-radius: 3px;
    margin-bottom: 4px;
    cursor: pointer;
    font-size: 15px;
    background-color: #ccc;
    padding-right: 10px\9\0 !important;
    padding-left: 9px\9\0 !important
}

.button-group .inputtext {
    height: 26px;
    line-height: 26px;
    border: 1px;
    outline: 0;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 3px;
    margin-bottom: 4px;
    cursor: pointer
}

.button-group {
    position: absolute;
    bottom: 20px;
    right: 20px;
    font-size: 18px;
    padding: 10px;
    top: 53px
}

.fenceTc {
    text-align: center;
    padding: 0
}

.treeArea {
    width: 100%;
    height: 600px;
    border: 1px solid #ccc;
    overflow: auto
}

.add-button {
    width: 35px;
    height: 35px;
    background-color: #6dcff6;
    color: #fff;
    border-radius: 25px;
    margin-bottom: 5px;
    cursor: pointer
}

.add-left {
    padding-left: 11px;
    padding-top: 10px
}

.btn-cancel {
    border: 1px solid #ccc
}

.add-right {
    padding-left: 10px;
    padding-top: 11px
}

.bindCar,
.bindFence {
    border: 1px solid #ccc
}

.addArea {
    margin-top: 153px;
    padding-left: 7.05%
}

.addAreaFance {
    margin-top: 153px;
    padding-left: 3.05%
}

.dataTables_scrollHead {
    height: 39px
}

table.dataTable thead>tr>th {
    text-align: center
}

.dataTables_scrollBody {
    overflow-x: auto !important
}

.setup-btn {
    margin-top: 20px
}

.mapArea {
    height: 600px
}

.btn-primary,
a.btn-primary:link,
a.btn-primary:visited {
    color: #fff;
    background-color: #6dcff6 !important
}

#bindTableByCar,
#bindTableByFence {
    height: 600px;
    overflow-y: scroll;
    overflow-x: scroll
}

.table>tbody>tr>td,
.table>tbody>tr>th,
.table>tfoot>tr>td,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>thead>tr>th {
    line-height: 24px;
    overflow: hidden;
    padding: 8px;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap
}

.button-group .button {
    color: #080808;
    background-color: #ccc
}

.button-group .map-active {
    color: #fff;
    background-color: #6dcff6
}

@media screen and (max-width:970px) {
    .dataTables_scrollBody {
        overflow-x: auto !important
    }

    .addArea {
        margin-top: 190px;
        padding-left: 2pc;
        margin-bottom: -2in;
        transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        -o-transform: rotate(90deg)
    }
}

@media screen and (max-width:768px) {
    .addArea {
        margin-top: 106px;
        padding-left: 2pc;
        margin-bottom: -135px;
        transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        -o-transform: rotate(90deg)
    }

    .mapArea {
        height: 25pc
    }

    .dataTables_scrollHead {
        height: 40px
    }

    .addArea {
        margin-top: 2in;
        padding-left: 2pc;
        margin-bottom: -195px;
        transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        -o-transform: rotate(90deg)
    }
}

@media screen and (max-width:414px) {
    .addArea {
        margin-top: 127px;
        padding-left: 2pc;
        margin-bottom: -143px;
        transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        -o-transform: rotate(90deg)
    }
}

@media screen and (max-width:375px) {
    .addArea {
        margin-top: 75pt;
        padding-left: 2pc;
        margin-bottom: -125px;
        transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        -o-transform: rotate(90deg)
    }
}

@media screen and (max-width:320px) {
    .addArea {
        margin-top: 87px;
        padding-left: 2pc;
        margin-bottom: -97px;
        transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        -o-transform: rotate(90deg)
    }
}

/* 表格样式 */
.stationTable {
    margin: 10px 0;
}

.station-title-line {
    display: flex;
}

.station-title-line .station-title {
    flex: 1;
    background: #CCCCCC;
    padding: 5px 0;
    text-align: center;
}

.station-body {
    display: flex;
    font-weight: normal;
}

.station-body .station-line {
    flex: 1;
    padding: 5px 0;
    text-align: center;
    border-left: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    height: 47px;
    line-height: 35px;
}

.add-station-line {
    color: #0066FF;
    margin-right: 13px;
    cursor: pointer;
}

.delete-station-line {
    color: #0066FF;
    cursor: pointer;
}

.station-body :nth-child(6) {
    border-right: 1px solid #ccc;
}