body .container {
    width: 92% !important;
}
.body-content .panel {
    margin: 0 0 20px 0 !important;
}
.total .panel-body label span {
    font-size: 2rem;
}

body {    
    /* background-color: #005772; */
    /* background-color: #1A2344; */
     /*background-image: url(../img/background.png);
    background-size: cover;
    background-repeat: no-repeat; */
}
.body-content {
    margin: 5.25rem auto;
}
.navbar-inverse {
    background-color: #1A2344;
    background-image: linear-gradient(to right, #005772, #00b2a9);
    background-image: linear-gradient(to right, #B44C97, #01479C);
    border: none;
}
.navbar-inverse .navbar-brand {
    color: white;
    font-weight: 600;
}
.navbar-inverse .navbar-nav>li>a {
    color: white;
    font-size: 1.5rem;
}
.navbar-brand {
    float: initial;
    line-height: 7.5rem;
    font-size: 1.75rem;
    /* margin-right: 2rem; */
}
.navbar-header {
    height: 70px;
}
.navbar-header img {
    height: 6rem;
    float: left;
    margin-right: 10px;
    margin-top: 0.5rem;
}
.navbar-nav>li>a {
    line-height: 4.5rem;
}
.badge {
    background-color: rgb(245, 41, 41);
    font-size: 1.3rem;
    padding: 4px 7px;
    vertical-align: initial;
}
footer {
    text-align: center;
}
footer p {
    color: hotpink;
}
hr {
    border-top: none;
}

/* 登入 */
.loginRt h2 {
    font-size: 2.5rem;
    /* text-align: center; */
    margin-bottom: 2.5rem !important;
    margin-top: 0 !important;
    font-weight: 600 !important;
    color: white !important;
    text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87;
}
.loginRt .form-control {
    width: 300px;
    height: 38px;
    font-size: 16px;
    color: rgb(16, 6, 32) !important;
}
.loginRt .form-check-label {
    color: white;
}
.loginBtn {
    width: 300px;
    background-color: hotpink;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 24px !important;
}

/* 全區地圖 */
.section1 {
    background-color: rgba(136, 43, 111, 0.4);
    padding: 0 0.3rem 1.5rem 2rem;
}
.section2 {
    background-color: rgba(70, 53, 131, 0.4);
    padding: 1rem 0.3rem 0 2rem;
}
.section3 {
    /* background-color: #07489c73; */
    padding: 0 0.3rem 4rem 0.3rem;
}
.info {
    background-color: rgba(17, 25, 41, 0.8);
    width: 25%;
    position: absolute;
    right: 0;
    height: 100%;
    padding: 0.75rem 1rem 7.5rem 1rem;
    color: white;
    overflow: auto;
}
.info {
    text-align: center;
}
.info label {
    font-weight: unset;
    margin-bottom: 0;
    font-size: 13px;
}
.info p {
    font-size: 10.5px;
}
.infoLb {
    font-size: 1.8rem !important;
    margin-top: 1rem;
    margin-bottom: 1rem !important;
    /* background-color: #6a8846; */
    /* background-image: linear-gradient(to top, rgba(136, 70, 114, 0.75), rgba(136, 70, 114, 0.082)); */
    padding: 5px 30px 3px 30px;
    width: 100%;
    font-weight: 600 !important;
}
.infoTitle {
    color: lightgrey;
}
.infoData {
    font-size: 28px;
    font-weight: 600;
}
#showData {
    position: absolute;
    top: 120px;
}
.dataBtn {
    /* background-color: #95e670; */
    color: #ffeaa6;
    font-size: 1.6rem;
    /* font-weight: 600; */
    height: 4.2rem;
    width: 16vw;
    border: none;
    /* box-shadow: 0px 2px 2px 1px rgb(0 0 0 / 30%); */
    border-radius: 5px;
    /* box-shadow: 0px 5px 0px 0px #65a547; */
    line-height: 3rem;
    margin-top: 0.8rem;    
    background-color: rgba(107, 80, 7, 0.4);
    border: solid 2px #ffc70e;
    /* box-shadow: 5px 5px 0px 0px #e48d0a; */
}
.dataBtn:hover {
    color: white;
}
.detailData {
    text-align: left;
}
.detailData label {
    color: lightgrey !important;
}
.detail {
    color: white !important;
    font-weight: 600 !important;
}
.infoGreen, .infoYellow, .infoRed {
    padding: 0 6.5px;
    border-radius: 14px;
    margin-right: 0.5rem;
}
.infoGreen {
    background-color: rgb(30, 255, 30);
    color: rgb(30, 255, 30);
}
.infoYellow {
    background-color: yellow;
    color: yellow;
}
.infoRed {
    background-color: rgb(255, 88, 37);
    color: rgb(255, 88, 37);
}
.greenBG {
    background-color: rgb(30, 255, 30);
}
.redBG {
    background-color: rgb(255, 88, 37);
}
.yellowBG {
    background-color: yellow;
}
.fanBtn {
    position: absolute;
    background-color: transparent;
    border: none;
}
.fanNum {
    /* border-radius: 20px; */
    font-weight: 600;
    font-size: 1.5rem;
    padding: 2px 5px;
}
.fan {
    width: 6.5rem;
}
#fanBtn01 {
    top: 8vh;
    left: 23vw;
}
#fanBtn02 {
    top: 21vh;
    left: 18vw;
}
#fanBtn03 {
    top: 34vh;
    left: 13vw;
}
#fanBtn04 {
    top: 47vh;
    left: 8vw;
}
#fanBtn05 {
    top: 60vh;
    left: 3vw;
}
#fanBtn06 {
    top: 10vh;
    left: 35vw;
}
#fanBtn07 {
    top: 23vh;
    left: 30vw;
}
#fanBtn08 {
    top: 36vh;
    left: 25vw;
}
#fanBtn09 {
    top: 49vh;
    left: 20vw;
}
#fanBtn10 {
    top: 62vh;
    left: 15vw;
}
#fanBtn11 {
    top: 12vh;
    left: 47vw;
}
#fanBtn12 {
    top: 25vh;
    left: 42vw;
}
#fanBtn13 {
    top: 38vh;
    left: 37vw;
}
#fanBtn14 {
    top: 51vh;
    left: 32vw;
}
#fanBtn15 {
    top: 74vh;
    left: 22vw;
}
#fanBtn16 {
    top: 14vh;
    left: 59vw;
}
#fanBtn17 {
    top: 27vh;
    left: 54vw;
}
#fanBtn18 {
    top: 40vh;
    left: 49vw;
}
#fanBtn19 {
    top: 53vh;
    left: 44vw;
}
#fanBtn20 {
    top: 66vh;
    left: 39vw;
}
#fanBtn21 {
    top: 76vh;
    left: 34vw;
}

/* total數據 */
.total .panel-body {
    padding: 1rem;
}
.total .panel-body label {
    font-size: 1.75rem;
    margin-bottom: 0.25rem;
    font-weight: unset;
    color: white;
    width: 100%;
}
.pdetail {
    color: #ceffb1;
}
.redAlert {
    background-color: #af0000;
    padding: 3px;
}
/* .BDstyle .panel-heading {
    background-color: #113144 !important;
    color: lightgrey !important;
}
.BDstyle .panel-body {
    background-color: #2a517e !important;
} */

/* 模型 */
.modelLf {
    background-color: #1748727e;
    border: solid 2px #44AEE0;
    color: white;
    padding: 1.5rem 2rem;
    height: unset;
    width: 22.5rem;
    position: absolute;
    right: 2.5rem;
    top: 10rem;
}
.modelRt {
    padding-left: 0;
    position: absolute;
    left: 1rem;
    top: 10rem;
}
.modelLf label {
    font-size: 2.5rem;
}
#fanNum {
    font-size: 4.6rem;
    font-weight: 700;
    color: #95e670;
}
.modelInfo {
    font-size: 1.8rem;
}
.modelInfo p {
    font-size: 1.6rem;
    color: rgb(204, 204, 204);
}
.modelData {
    font-weight: 700;
    color: white;
}
.modelRt select {
    font-size: 1.6rem;
    margin-bottom: 2rem;
    height: 4rem;
    width: 18rem;
}
.partial {    
    font-size: 1.8rem;
    font-weight: 600;
    height: 4.25rem;
    width: 18rem;
    border: none;
    box-shadow: 0px 2px 2px 1px rgb(0 0 0 / 30%);
    border-radius: 5px;
    background-color: #ffa010;
    box-shadow: 0px 5px 0px 0px #CD6509;
    margin-top: 1.5rem;
    line-height: 3rem;
}

/* 警示訊息 */
thead {
    background-color: #674B97;
    color: white;
}
tbody {
    color: white;
}
.bd-example {
    background-color: white;
}
.bd-example thead th {
    font-size: 2rem;
}
.bd-example tbody th {
    font-size: 2rem;
}
.bd-example td {
    font-size: 1.6rem;
    vertical-align: baseline !important;

}
.bd-example button {
    background: #95e670;
    color: #010B48;
    font-weight: 600;
}
.table-striped>tbody>tr:nth-of-type(odd) {
    background-color: #2c335f;
    border-top: solid 2px #44AEE0;
}
.table-striped>tbody>tr:nth-of-type(even) {
    background-color: #174772;
    border-top: solid 2px #44AEE0;
}

/* 風機數據 */
.red {
    color: #ff3a3a !important;
}
.nav-tabs {
    border-bottom: none;
}
.nav-tabs>li {
    width: 16.6%;
}
.nav-tabs>li>a {
    font-size: 1.85rem;
    font-weight: 600;
    text-align: center;
    padding: 10px 0 !important;
    color: #88C06E;
}
.nav-tabs>li.active>a {
    color: #4eee03 !important;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
    background-color: rgba(255, 255, 255, 0.35);
    border: none;
    border-bottom: none;
}
.tab-content {
    border: 1px solid transparent;
    background-color: rgba(255, 255, 255, 0.35);
}
.tab-content>.active {
    margin: 2vh 3vh;
}
.tab-content label {
    font-size: 2.5vh;
    margin-bottom: 1vh;
}
.panel-info {
    border-color: #007599;
}
.panel-info>.panel-heading {
    color: white;
    background-color: #013e39;
    border: solid 2px #dde9e7;
}
.panel-heading {
    padding: 7.5px 15px;
    font-size: 2rem;
    font-weight: 600;
}
.panel-body {
    padding: 2rem 0;
    background-color: #35756b;
    border: solid 2px #dde9e7;
    border-top: unset;
}
.panel-body p {
    margin-bottom: 0;
    text-align: center;
    color: white;
}
.panel-body p span {
    margin-bottom: 0;
    font-size: 2.5rem;
    font-weight: 600;
    color: #b0f6ff;
}

.infoL {
    position: absolute;
    left: 0;
    height: unset;
    width: 12%;
    /* background: none; */
    overflow: unset;
    border: solid 2px #ffa010;
    padding: 0;
    margin: 1rem;
    top: 70px;
}
.infoL .fas, .infoL .fa-solid, .infoL .fa-regular {
    padding: 0;
}
.infoL .col-sm-8 .col-md-8 {
    text-align: left;
}
.infoL .section3 {
    padding: 0;
}
.infoL .row .row .col-sm-9, .infoL .row .row .col-sm-8 {
    text-align: left;
}


/* 直式 */
@media (min-width: 768px) {
    .mainT {
        display: none;
    }
    .subT {
        display: block;
    }
    .loginRt .form-control {
        margin: auto;
    }
    .loginRt {
        margin: auto;
        text-align: center;
    }
    .navbar-nav>li>a {
        line-height: unset;
    }
    .info {
        top: 110px;
    }
    .infoL {
        top: 170px !important;
        width: 25% !important;
    }
    .body-content {
        margin: 9rem auto 0 auto;
    }
    .horizontal {
        display: none;
    }
    .straight {
        display: block;
    }    
    #showData2 {
        display: none;
    }
}
@media (max-width: 1000px) {
    .modelLf {
        top: 13rem;
        right: 2rem;
        width: 99vw;
        height: 13.25rem;
    }
    .modelRt {
        top: 29rem;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .navbar-inverse {
        height: 115px;
    }
    .navbar-header {
        width: 100%;
    }
    .navbar-brand {
        font-size: 1.75rem !important;
    }
    .navbar-nav {
        margin-left: 5.5rem;
    }
    .info {
        width: 31%;
        display: none;
    }
.infoL {
	width: 19% !important;
}
    .infoLb {
        margin-top: 1rem;
        margin-bottom: 1rem !important;
    }    
    .info .col-sm-12, .info .col-sm-6 {
        margin-bottom: 1rem;
    }
    .infoData {
        font-size: 2.6vw;
    }
    .section1 {
        padding: 0 0.3rem 0 2rem;
    }
}
.infoL .row {
	margin-right: -20px;
	margin-left: -8px;	
}
#showData2 {
    display: none;
}

/* 橫式 */
@media (min-width: 992px) {
    .container {
        width: 1100px;
    }
    .navbar-header {
        width: 35vw;
    }
    .mainT {
        display: block;
    }
    .subT {
        display: none;
    }
    .loginRt {
        text-align: left;
        padding: 3rem 5rem !important;
        height: 34vh;
        margin-left: 40vw;
    }
    .loginRt .form-control {
        margin: 0;
    }
    .navbar-nav>li>a {
        line-height: 4.5rem;
    }
    .info {
        top: 7vh;        
        width: 31%;
    }
    .body-content {
        margin: 5.25rem auto;
    }
    .horizontal {
        display: block;
    }
    .straight {
        display: none;
    }
    .modelLf .col-md-12 {
        padding: 0;
    }
    .navbar-inverse {
        height: 70px;
    }
    #showData, #showData2 {
        display: none;
    }
    .infoL {
        top: 70px !important;
        width: 15% !important;
    }
}
.infoL .row {
	margin-right: -15px;
	margin-left: -8px;	
}

/* 電腦 */
@media (min-width: 1280px) {
    .info {
        width: 28%;
        top: 60px !important;
    }
    .navbar-header {
        width: unset;
    }
    .loginRt {
        margin-left: 50vw;
    }
	#myVideo {
		position: absolute;
		top: 0;
        left: 0;
        width: 100%;
        height: auto;
	}
    .infoLb {
        margin-top: 5px;
        margin-bottom: 10px !important;
        font-size: 20px !important;
    }
    .info .col-sm-12, .info .col-sm-6 {
        margin-bottom: 15px;
    }
    .detailData label, .info label {
        font-size: 1.5vh;
    }
    .infoData {
        font-size: 36px;
    }
    .fan {
        width: 7rem;
    }
    .section1 {
        padding: 0 0.3rem 2rem 2rem;
    }
    .infoL {
    	width: 12% !important;
        top: 70px !important;
    }
.infoL .row {
	margin-right: -15px;
	margin-left: -15px;	
}
}

/* 手機 */
@media (max-width: 767px) {
    .container-fluid>.navbar-collapse, .container-fluid>.navbar-header, .container>.navbar-collapse, .container>.navbar-header {
        margin-left: unset;
    }
    .navbar-toggle {
        height: 50px;
        margin-right: 0;
    }
    .navbar-inverse {
        height: unset;
    }
    .navbar-brand {
        font-size: 1.6rem !important;
        padding: 5px;
    }
    .showNavbar {
        display: none;
    }
    .disNavbar {
        display: block !important;
        font-size: 4.5vw !important;
        line-height: 2.5rem;
        margin-top: 0.5rem
    }
    .navbar-inverse .navbar-toggle {
        border-color: transparent;
    }
    .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
        border-color: transparent;
    }
    .navbar-nav>li>a {
        line-height: 20px;
        text-align: center;
    }
    .navbar-nav {
        margin-left: 0;
    }
    #registerLink {
        display: none;
    }
    #showData {
        top: 66px;
    }
    .dataBtn {
        width: unset !important;
    }
    .notCell {
        display: none !important;
    }
    .cell {
        display: block !important;
    }
    .info {
        width: 60% !important;
    }
    #fanBtn01 {
        top: 72px;
        left: 23vw;
    }
    #fanBtn02 {
        top: 189px;
        left: 18vw;
    }
    #fanBtn03 {
        top: 306px;
        left: 13vw;
    }
    #fanBtn04 {
        top: 423px;
        left: 8vw;
    }
    #fanBtn05 {
        top: 540px;
        left: 3vw;
    }
    #fanBtn06 {
        top: 90px;
        left: 41vw;
    }
    #fanBtn07 {
        top: 207px;
        left: 36vw;
    }
    #fanBtn08 {
        top: 324px;
        left: 31vw;
    }
    #fanBtn09 {
        top: 441px;
        left: 26vw;
    }
    #fanBtn10 {
        top: 558px;
        left: 21vw;
    }
    #fanBtn11 {
        top: 108px;
        left: 59vw;
    }
    #fanBtn12 {
        top: 225px;
        left: 54vw;
    }
    #fanBtn13 {
        top: 342px;
        left: 49vw;
    }
    #fanBtn14 {
        top: 459px;
        left: 44vw;
    }
    #fanBtn15 {
        top: 684px;
        left: 29vw;
    }
    #fanBtn16 {
        top: 126px;
        left: 77vw;
    }
    #fanBtn17 {
        top: 243px;
        left: 72vw;
    }
    #fanBtn18 {
        top: 360px;
        left: 67vw;
    }
    #fanBtn19 {
        top: 477px;
        left: 62vw;
    }
    #fanBtn20 {
        top: 594px;
        left: 55vw;
    }
    #fanBtn21 {
        top: 711px;
        left: 47vw;
    }
    .fanNum span {
        font-size: 0.9rem;
    }
    .fanNum {
        padding: 0px 5px;
        font-size: 1.3rem;
        line-height: 1.4rem;
    }
    .fan {
        width: 4.5rem;
    }
    .progress {
        height: 6px !important;
        width: 45px !important;
        margin-left: 9px !important;
        margin-top: 10px !important;
        margin-bottom: 20px !important;
    }
    .dataBtn {
        font-size: 1.5rem;
        line-height: 2rem;
        height: 4rem;
        padding: 8px;
    }
    .infoData {
        font-size: 6vw;
    }
    .section3 {
        padding: 0 0 0.5rem 0;
    }
    .info p {
        margin-bottom: 0;
    }
    .info {
        background-color: rgba(17, 25, 41, 0.92);
    }
    .infoLb {
        margin-bottom: 0 !important;
    }
    .body-content {
        overflow: auto;
    }

    .modelLf {
        top: 7rem;
        left: 1.5rem;
        width: 100vw;
        height: unset;
        padding: 1.5rem 2rem 0 2rem;
    }
    .modelLf label {
        font-size: 1.8rem;
        margin-bottom: 0;
    }
    #fanNum {
        font-size: 3.4rem;
    }
    .straight {
        display: none;
    }
    .chooseBtn {
        display: flex;
    }
    .modelRt {
        top: 18rem !important;
    }
    .modelRt select {
        margin-bottom: 10px;
        font-size: 14px;
        height: 34px;
    }
    .partial {
        width: unset;
        height: unset;
        font-size: 3.65vw;
        padding: 0 6px;
        margin-top: 0;
        margin-right: 3px;
    }
    .horizontal {
        display: none;
    }
    #showData2 {
        position: absolute;
        top: 0px;
        right: 5px;
        box-shadow: none;
        margin-top: 0;
        display: block;
    }
    .modelInfo p {
        font-size: 16px;
    }
    .navbar-toggle {
        margin-top: 11px;
    }
    .navbar-header img {
        height: 5rem;
        margin-top: 1rem;
        margin-right: 20px;
    }
    .loginRt h2 {
        font-size: 5.5vw !important;
    }
    .loginRt .form-control {
        width: 63vw !important;
        height: 7.5vw !important;
        font-size: 3.5vw !important;
    }
    .loginRt .form-check-label {
        font-size: 3vw !important;
    }
    input[type="radio"], input[type="checkbox"] {
        width: 35px !important;
        height: 35px !important;
    }
}