/*調整修改用CSS*/
html {
    overflow-x: hidden;
    /*overflow-y:overlay;*/
    overflow-inline: hidden;
}

/*文字*/
/*字體都加在這*/
.h1,
.h2,
.h3,
.h4,
#menu,
.div_column,
#file,
#text,
.btn,
.button,
.form-control,
.wrapper h1,
.wrapper h2,
.wrapper h3,
.wrapper h4,
.wrapper h5,
a,
p,
#loading-body2-btn,
.btn-back a::after,
.label-right,
.label-center,
.label-left,
.card-header h6,
table tbody,
.table>tbody>tr>th,
input[type="checkbox"]+label,
.text-green,
#footer .copyright,
.title {
    font-family: "微軟正黑體", -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
        "Segoe UI Emoji", "Segoe UI Symbol";
    color: #006666;
}

/*大標題*/
.h1,
h1,
h1.h4,
#banner h1 {
    font-size: 30px;
    font-weight: bold;
    color: #193939;

}

h1.title {
    font-size: 72px !important;
    color: #FFFFFF !important;
    text-shadow: 0 0 6px rgba(26, 23, 23, 0.60);
}

.jumbotron-heading {
    margin-bottom: 58PX;
}

.h3,
.h4 {
    margin: 0 auto;
    font-weight: bold;
    text-align: center;
}

h1.h3,
span.h5 {
    text-align: center;
}

h4 {
    font-size: 21px;
    font-weight: 600;

}

.card-header {
    background-color: #006666;
}

.card-header h6 {
    color: #FFF;
    font-size: 21px;
}

/*負值餘額名單提示文字*/
.alert-orange {
    color: #FF8367;
    background-color: #FFF4F1;
    border-color: #FF8367;
}

/*學生電力使用紀錄房號顯示*/
.alert-green {
    background-color: #F0F7F7;
    border: 2px solid;
    border-color: #006666;
}


/*label邊框調整*/
.p-5 {
    padding: 3rem 3rem 0px !important;
}

/*label文字*/
.label-font {
    text-align: center;
    font-weight: 900;
    font-size: 16px;
}

#adminlogin,
#adminlogin2 {
    margin-top: 70px;
}

.user,
.lock {
    position: relative;
    display: inline-block;
    margin: 9px 0;
}

.user:before,
.lock:before {
    font-family: "Font Awesome 5 Free";
    color: #193939;
    font-weight: 900;
    content: "\f007";
    font-size: 21px;
    position: absolute;
    left: 7%;
    top: 45%;
    transform: translateY(-50%);
}

.user input,
.lock input {
    text-indent: 20px;
}

.lock:before {
    content: "\f13e";
}

/*BTN文字*/
.btn-loginfont,
.btn-loginfont2 {
    font-size: 30px;
    color: #fff;
    height: 80%;
}

.btn-loginfont2:hover {
    color: black;
}

.btn-primary2 {
    background-color: #006666;
    border-color: none;
}

.btn-h-auto {
    height: auto;
    padding-left: 0;
    /*確認更新文字爆版處理*/
    padding-right: 0;
}

/*LOGO 大小*/
.school_image {
    width: 100%;
    height: auto;
}

/*ICON 大小*/

@media (min-width: 768px) {
    .sidebar .nav-item .nav-link i {
        font-size: 1rem;
    }

    .sidebar .nav-item .nav-link span {
        font-size: 1rem;
        color: white;
        font-weight: bolder;
    }

    .sidebar.toggled .nav-item .nav-link span {
        font-size: unset;
    }
}

.chart-size {
    font-size: 9rem;
    color: #58B2DC;
}

/*color*/
.bg-gray {
    background-color: #f8f9fc;
}




/*Login背景*/
/*.bg-gradient-primary{
    background-image:linear-gradient(180deg,#36b9cc 10%,#4e73df 100%)
}*/
.footer-bg {
    background-color: none;

}

.copyright span {
    color: #3a3b45;
    font-size: 14px;
}

.modal-footer {
    border-top: unset;
}

/*每頁header color*/
#header {
    background-color: #F6F6F6;
    position: fixed;
    height: auto;
    margin: 0 auto;
}

#header nav a[href="#menu"] {
    color: #006666;
}

.button.alt,
.button.alt2 {
    background-color: #006666;
    color: #FFFFFF;
    box-shadow: none;
    font-weight: bolder;
}

.button.alt:hover,
.button.alt2:hover {
    background-color: #006666;
}
.btn-del{ width: 50px; height: 40px;}
.btn-font2{color: #FFFFFF; background-color: #006666; font-size: 1.07em; border-radius: 5px; }
.btn-font3{color: #FFFFFF; background-color: #339999 ; font-size: 1.07em; border-radius: 5px; }
.btn-font4{color: #FFFFFF; background-color: rgb(105, 134, 176) ; font-size: 1.07em; border-radius: 5px; }
.btn-font5{color: #FFFFFF; background-color: #73ab6a  ; font-size: 1.07em; border-radius: 5px; }
#menu {
    background: #FFFFFF;
    font-size: 21px;
}

#menu>ul.links>li>a:not(.button) {
    color: #006666;
    font-weight: bold;
    height: auto;
    line-height: 1.25;
    padding: 1rem 1em;
}
.main-icon{ font-size: 1.3em; font-weight: bold; text-align: center;}

/*每頁id="main"*/
.wrapper {
    padding-top: 3em;
    padding-bottom: 5em;
}

/*查詢切換頁BTN*/
.nav-martop {
    margin-top: -49px;
}

.nav-tabs .nav-link {
    background-color: #F0F7F7;
    border: 2px solid #006666;
    border-bottom: none;
}

.nav-tabs .nav-link.active {
    background-color: #FFF;
    border: 2px solid #006666;
    border-bottom: 3px solid #FFF;
}

.nav-tabs .nav-link2.active {
    background-color: rgba(247, 147, 30, 0.7);
}

.nav-tabs .nav-link:hover {
    border: 2px solid #006666;
    background-color: #F0F7F7;
}

hr.view {
    margin-top: -0.1rem;
    margin-bottom: 1rem;
    border-top: 3px solid #006666;
}

a:hover {
    text-decoration: none;
    color: #fff;
    color: #006666;
}

/*icon 超連結文字底線取消*/
a:focus {
    text-decoration: none;
}

.csv-download {
    text-decoration: underline;
    margin-top: 50px;
}

.csv-download a:hover {
    color: #006666;
}

/*查詢切換頁BTN END*/
.border-left-primary {
    border-left: none !important;
}

.password-border {
    border: 6px double #36b9cc;
}

.form-control2 {
    border: 1.75px solid rgb(150, 150, 150);
}

/*MENU color*/
.bg-menu {
    background-color: #85c8f3;
}

.sidebar-dark hr.sidebar-divider {
    border-top: 1px solid #00458aa1;
}

.sidebar-dark .nav-item .nav-link i {
    color: #00458aa1;

}

.sidebar .nav-item .nav-link span,
.sidebar-dark .nav-item .nav-link {
    color: #00458a;
}

.sidebar-dark #sidebarToggle::after,
.sidebar-dark.toggled #sidebarToggle::after {
    color: #00458a;

}

/*MENU ICON 滑入顏色*/
.sidebar-dark .nav-item .nav-link:active i,
.sidebar-dark .nav-item .nav-link:focus i,
.sidebar-dark .nav-item .nav-link:hover i {
    color: #00458aa1;

}

#menu .close,
#menu .close:hover {
    color: #006666;
}

.hr-style {
    border-bottom: 2px solid #F0F7F7;
    margin: 0;
}

.dropdown-item:active,
.dropdown-item:hover {
    background-color: #ffffff;
    color: #2e2f37;
}

.list-group-item {
    border: 2px solid #AEDADA;
}

/*排版*/
.icon-mar,
.table-mar,
.span-mar,
.h1-mar {
    margin-top: 50px;
}

#menu>ul {
    margin: 50px 0 1rem 0;
}

.table-mar,
.mar-bot50 {
    margin-bottom: 50px;
}

.mar-center2 {
    margin-left: auto;
    margin-right: auto;
}

.btn-mar {
    margin-top: 100px;

}

.btn-mar2 {
    margin-right: 20px;

}

.btn-martop20 {
    margin-top: 20px;

}

.mar-top25 {
    margin-top: 25px;
}

.btn-martop30,
.mar-top30 {
    margin-top: 30px;

}

.btn-martop216 {
    margin-top: 216px;

}

.btn-marbot20 {
    margin-bottom: 20px;
}

.btn-marbot10 {
    margin-bottom: 10px;
}

.btn-marbot51 {
    margin-bottom: 51px;
}

.marbot-208 {
    margin-bottom: 208px;

}

/*住宿中心滿版設定*/
.mar-center {
    margin: 1em 0 4.55em;
}

/*右上BTN設定*/

.mar-nav {
    margin: -6px auto;
}

.dropdown-divider {
    border-top: 2px solid #F0F7F7;
}

/*.mar-left-right60{
    margin: 0 60px;
}*/

.icon-center {
    text-align: center;
    line-height: 2.5;
}

.form-center {
    margin: 0 auto;
    color: black;
    line-height: 3;
}

.select-mar,
.label-mar {
    margin-top: 40px;

}

/*調整input、select間距*/
.select-mar2 {
    /*input vs select*/
    margin-top: -10px;
}

.select-mar3 {
    /*select vs input*/
    margin-top: 30px;
}

.select-mar4 {
    /*select vs select*/
    margin-top: 23px;
}

/*多餘的倒三角透明*/
.caret {
    opacity: 0;
}

/*會影響下拉查詢、選擇全部的功能
.btn-block{
    margin: 50px 0;
}
*/
.menu-mar {
    margin-top: -10px;
}

.card-border {
    border-radius: 0;
    padding: 1.25rem;
}

.card-green {
    background-color: #F0F7F7;
    border: 2px solid #006666;
}

.card-green-input {
    border: 2px solid #006666;
    height: 50px;
}

.nav-border,
.nav-border a,
.nav-link.active span {
    border-bottom: none;
    text-align: center;
    color: #006666;

}

/*Login Page*/
.custom-control-label::after,
.custom-control-label::before {
    top: .75rem;
}


/*查詢紀錄*/
.form-a,
.form-a2 {
    margin: 0 auto;
    background-color: rgba(41, 171, 272, 0.9);
    border: none;
    color: black;
    font-weight: bolder;
}

/*報表查詢匯出BTN*/
.form-a2 {
    background-color: rgba(247, 147, 30, 0.9);
}

.btn:hover,
.text-black {
    color: black;

}

.btn:focus {
    color: #fff;
}

.btn2:hover {
    color: white;
}

.text-orange {
    color: #FF8367;
    font-weight: bold;
    font-size: 21px !important;
}

.text-orange:focus,
.text-orange2:focus {
    color: #FF8367;
}

.search-mar {
    margin: 0 100px;
}

.text_in_use,
.orange {
    color: #FF8367;
}

.text_negative {
    color: #FF8367;
}

.text_normal {
    color: #193939;
}

@media (max-width: 768px) {
    .d-sm-inline-block {
        display: none !important;
    }

    h1.title {
        font-size: 60px !important;
    }
}


/*弘光版面*/
#header nav .button {
    height: 56px;
    padding: 0 2rem;
    text-transform: capitalize;
}

#banner {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom 0px center;
    background-attachment: fixed;
    width: 100%;
    opacity: 1;
    height: 85vh;
    background-image: url(../../img/bk.jpg);
}

@media(max-width:980px) {
    #banner {
        background-position: top 90px center;
        max-width: 100%;
        height: 120vh;
    }
}


.footer {
    background: #006666;
    text-align: center;
    color: #FFFFFF;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 40px;
    padding-top: 10px;

}



/*login*/
#identity,
#identity2 {
    display: none;
    position: absolute;
    top: 31vh;
    left: 47vw;
    width: 460px;
    /*height : 527px;*/
    height: auto;
    margin: -200px 0 0 -170px;
    background: #fff;
    border-radius: 5px;
}

@media screen and (max-width: 768px) and (min-width:576px) {

    #identity,
    #identity2 {
        left: 42vw;
    }
}

@media screen and (max-width: 575px) {

    #identity,
    #identity2 {
        left: 9.5px;
        max-width: 95vw;
        height: auto;
        margin: 0 auto;
        top: 80px;
    }
}

.login.form {

    /* height      : 70px;
	line-height : 70px;  */
    text-align: center;
    vertical-align: middle;
    margin: 40px auto 0px;
}

.login.form.title {

    height: 100px;
    line-height: 100px;

    background: #006666;

    font-weight: bold;
    font-family: Microsoft JhengHei;
    font-size: 21px;
    color: #fff;

    border-radius: 5px;
}

.login.form.notice {
    color: red;
    height: 20px;
    line-height: 20px;
}

.g-recaptcha {
    margin: 0 auto;
}

.total-meter {
    color: rgb(255, 132, 0);
    font-size: 1.25rem;
    margin-bottom: 10px;
}

.px-1 li:first-child {
    margin-top: 10px;
}

.div_column {
    display: inline-block;
    color: #193939;
    font-size: 21PX;
    font-weight: bold;
}

.glyphicon {

    font-size: 16px;
}

.button.alt {
    padding: 0;
}

.button.alt.login {
    width: 85%;
}

/*名單匯入樣式*/


#file::after {
    background-color: #fff;
    border-color: 2px solid #006666;
    content: ' ';
}

.inputbtn-style1 {

    background: none;
    background-image: linear-gradient(#F7FFFF 50%, #EBFFFF 100%);
    border: 2px solid #006666 !important;
    position: absolute;
    left: 32px;
    top: 137px;
    margin: 0;
    padding: 0 5px !important;
    width: 83px;
    font-weight: bold;

}

/*.inputbtn-style2{ 
    position: absolute; 
    left: 20px; 
    top: 80px;
}*/
.btn-green {
    color: #006666;
    background-color: #F0F7F7;
    border: 3px solid #006666;
    font-weight: bold;
}

.btn-green:hover {
    border: 3px solid #FF8367;
    color: #FF8367;
    background-color: #FFF;
}

/*返回BTN*/
/*.btn-back{
   /* margin: 0px 50px 10px;

}*/
.btn-back a {
    /* color:#FFBC00; */
    color: #006666;
    font-weight: bold;
    cursor: pointer;
    padding-left: 5px;

}

.btn-back a:not(i) {
    font-size: 30px;

}

.btn-back a i {
    color: #FFBC00;
    font-size: 40px;
}

/*.btn-back a::after{
    font-size: 40px;
    font-weight: bold;
    content: "返回";
    cursor: pointer;
    padding-left: 5px;
}*/
/*right menu*/
.dropdown-item {
    padding: 0px 1.5rem;

}

.btnfont-21 {
    font-size: 21px;
}

.btnfont-30 {
    font-size: 30px;
}

.button:hover {
    background: #FF8367;
}

.btn-orange,
.btn-orange span {
    color: #FFFFFF;
    font-weight: bold;
    font-size: 21px;
    background: #FF8367;
}

.text-green {
    color: #006666;
    font-weight: bold;
    font-size: 21px;
}


.text-gray {
    color: #7C7B7B;
}

/*單筆新增*/
.label-right,
.label-center,
.label-left,
input[type="checkbox"]+label,
table tbody,
.text-darkgreen {
    /*text-align: right;*/
    font-size: 21px;
    font-weight: 600;
    color: #193939;

}

input[type="checkbox"]+label {
    font-size: 21px;
}


input[type="checkbox"]:checked + label:before, input[type="radio"]:checked + label:before {
    background: #193939;
    border-color: #193939;
    color: #ffffff;
    content: '';
    font-size: 0.85em;
}
/* 未選擇時的樣式 */
input[type="checkbox"] + label:before,
input[type="radio"] + label:before {
    font-size: 0.85em;
}


.form-check2{ padding:3px;  }
.form-check2 .form-check-label{ font-size: 1em; color: #193939;  font-weight: bold;}
.form-check2 .form-check-input{ font-size: 0.8em;}
.set-title {font-size: 1.2em;color: #008888;  font-weight: bold; }
.label-right  {
    text-align: right;
    padding: 15px 0 0;
}

.label-center {
    text-align: center;
}

.label-left {
    text-align: left;

}

/*pd內距樣式*/
.pd-top25 {
    padding: 25px 0 0 0;
}

.pd-10 {
    padding: 10px 0;
}

.pd-content_us {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 3.75rem !important;

}

/*複選修改*/
select.form-control[multiple],
select.form-control[size] {
    border: solid 1px #dee1e3;
    background: rgba(144, 144, 144, 0.075);

}

.bootstrap-select>.dropdown-toggle.bs-placeholder,
.bootstrap-select>.dropdown-toggle.bs-placeholder:hover,
.bootstrap-select>.dropdown-toggle.bs-placeholder:focus,
.bootstrap-select>.dropdown-toggle.bs-placeholder:active {
    border: solid 1px #dee1e3;
    box-shadow: none;
}

/*bootstrap-select-選項預設提示字換色*/
.bootstrap-select>.dropdown-toggle[title],
.bootstrap-select>.dropdown-toggle[title]:hover,
.bootstrap-select>.dropdown-toggle[title]:focus,
.bootstrap-select>.dropdown-toggle[title]:active,
.dropdown-menu>li>a,
.btn-default {
    color: #006666;
    font-size: 18px;
    font-weight: 600;
    border-color: #dee1e3;
    padding-left: 1em;
    padding-right: 1em;

}

/*bootstrap-select置中
.bootstrap-select .dropdown-toggle .filter-option{
    text-align: center;
}*/
.cur-select,
.cur-select2 {
    width: 100px;
    margin: 0 auto;
}

.cur-select {
    padding: 0px 30px;
}

.btn-default {
    background-color: #e6e6e6;
    background: rgba(144, 144, 144, 0.075);

}

.form-mar {
    margin-bottom: 1.85rem;
}

/*全選/取消全選樣式*/
.bs-actionsbox .btn-group button {
    width: 100%;
}

/*input 修改輸入文字樣式*/
.form-control:focus {
    color: #006666;
}

input[type="text"],
input[type="text"]:hover,
input[type="text"]:focus,
input[type="text"]:active,
input[type="date"],
input[type="password"],
input[type="email"],
input[type="time"] {
    color: #006666;
    font-weight: 600;
    font-size: 18px;
    /*text-align: center;*/

}

/*input placeholder修改*/
.form-control::-webkit-input-placeholder {
    color: #006666 !important;
}

.form-control:-ms-input-placeholder {
    color: #006666 !important;
}

.form-control::-ms-input-placeholder {
    color: #006666 !important;
}

.form-control::placeholder {
    color: #006666 !important;
}

/*input 客服其他說明 placeholder修改*/
.form-control.orange::-webkit-input-placeholder {
    color: #f6755e !important;
}

.form-control.orange:-ms-input-placeholder {
    color: #f6755e !important;
}

.form-control.orange::-ms-input-placeholder {
    color: #f6755e !important;
}

.form-control.orange::placeholder {
    color: #f6755e !important;
}


/*input placeholder focus修改*/
.form-control:focus::-webkit-input-placeholder {
    color: #a8a8a8 !important;
}

.form-control:focus:-ms-input-placeholder {
    color: #a8a8a8 !important;
}

.form-contro:focus::-ms-input-placeholder {
    color: #a8a8a8 !important;
}

.form-control:focus::placeholder {
    color: #a8a8a8 !important;
}

/*input 尺寸修改*/
input[type="text"],
input[type="date"],
input[type="password"],
input[type="email"],
select,
.time-height,
input[type="time"].time-style {
    height: 3.5em;
    line-height: 3.5em;
}

/*input time新增門禁排程尺寸修改*/
.time-height2 {
    height: 3.5em;
    line-height: 3.5em;
    /*padding: 15px;*/
    padding: .5rem 15px;
    background: rgba(144, 144, 144, 0.075);

}

input[type="text"],
input[type="date"],
input[type="password"],
input[type="email"],
input[type="tel"],
select,
textarea,
input[type="time"].time-style {
    -moz-appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    appearance: none;
    background: rgba(144, 144, 144, 0.075);
    border-radius: 4px;
    border: none;
    border: solid 1px #dee1e3;
    color: #006666;
    display: block;
    outline: 0;
    padding: 0 1em;
    text-decoration: none;
    width: 100%;
}

input[type="date"],
input[type="time"].time-style {
    padding: .85rem .75rem;
}


/*智慧電力管理設定 */
select.input-lg2 {
    line-height: 34px;
}

/*input type=search修改樣式*/

input[type="search"],
input[type="number"] {
    height: 3em;
}


/*checkbox*/
.card {
    border: 2px solid #006666;
}

/*報表匯出邊框設定*/
.border-report {
    border-left: none;
    border-right: none;
    border-bottom: none;
    border-radius: 0;
}

input[type="checkbox"]+label:before {
    background: #FFF;
    border: solid 3px #006666;
    left: 15px;
    top: 5px;
}

input[type="checkbox"]:checked+label:before {
    background: #006666;
    border: solid 2px #006666;
    color: #ffffff;
    content: '\f00c';
}

.checkbox-mar {
    margin-left: 10px;
    margin-right: 10px;

}

/*修改名單資料*/
.panel-noshadow {
    -webkit-box-shadow: unset;
    box-shadow: unset;
}

/*TABLE CSS*/
table {
    white-space: nowrap;
}

.table .thead-green th {
    background-color: #006666;
    color: #F0F7F7;
    text-align: center;
    font-family: "微軟正黑體", -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
        "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: large;
}

.table tbody tr {
    border-bottom: solid 2px #006666;
    font-size: 18px;
}

.table>tbody>tr>th {
    text-align: center;
}

.table>tbody>tr>td {
    vertical-align: middle;
}

.inner2 {
    max-width: 80em;
}

.inner3 {
    max-width: 100em;
    margin: 0 auto;
}

/*新增指定時段用*/
.inner4 {
    margin: 0 auto;
    max-width: 45em;
}

.inner5 {
    max-width: 110em;
    margin: 0 auto;
}

/*學生登入介面用*/
.inner6 {
    margin: 0 auto;
    max-width: 30em;
}

/*文字編輯器樣式*/
.cke_1 .cke_top {
    background-color: rgb(224, 242, 244);
    border-bottom-color: rgb(179, 193, 195);
}

.cke_1 .cke_bottom {
    background-color: rgb(224, 242, 244);
    border-top-color: rgb(179, 193, 195);
}

/*文字編輯器-隱藏關於ckeditor4彈窗*/
#cke_91 {
    display: none;
}

/*系統使用現況*/
.fz-18 {
    font-size: 18px;
}

.nowsystem ul li,
.study-rate ul li {
    display: block;
}

.b-align {
    white-space: normal;
    text-align: left;
}

.b-label {
    background: #006666;
    color: #FFF;
    padding: 4px;
    border-radius: 3px;
    line-height: 2.25;
}

.nowsystem ul li .b-left {
    float: left;
}

.study-rate ul {
    list-style-type: none;
}

.study-rate ul li {
    padding: 0;
}

/*table 表頭水平置中*/
.table>thead>tr>th {
    vertical-align: middle;
}

/*table 所有中文斷行文字*/
.editgroup {
    word-break: keep-all;
    white-space: normal;

}

.editgroup :nth-child(6),
.editgroup :nth-child(8),
.editgroup :nth-child(10) {
    width: 10%;
}

/*table 所有列文字樣式一致*/
table .refund-period tr :nth-child(n) {
    font-size: 18px;
    font-weight: 600;
}

/*table 背景顏色一致*/
table tbody tr:nth-child(2n + 1) {
    background-color: #F0F7F7;
}

/*table 非前7列背景色為無*/
table .refund-period tr:nth-child(n) {
    background-color: unset;
}

/*table 指定前7列背景色一致*/
table .refund-period tr:nth-child(n+1):nth-child(-n+7) {
    background-color: #F0F7F7;
}

/*table 指定第二欄全部靠左*/
table .refund-period tr td:nth-child(2)

/*table .refund-period tr th:nth-child(2)*/
    {
    text-align: left;
}

table .record-poweruser tr td:nth-child(2)

/*table .refund-period tr th:nth-child(2)*/
    {
    text-align: left;
    width: 450px;
}

/*icon 無權限的樣式*/
.lockicon {
    width: 150px !important;
    height: 150px;
    background: rgba(11, 45, 45, 0.9);
    color: #FFF;
    border-radius: 8px;
    line-height: 1.75;
    z-index: 100;
    font-size: 5em;
    padding: 2rem;
}

.check-table-position {
    left: -10px;
    top: -12px;
}

/*下拉選單選項跑版*/
.bootstrap-select .dropdown-toggle .filter-option {
    padding: 16px 18px 
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {background-color: #F0F7F7;}
/*下拉選單選項寬度*/
.form-inline .bootstrap-select {
    width: inherit;
}

/*客服中心*/
#loading-body2-btn {
    color: #FFFFFF;
    font-weight: bold;
    font-size: 21px;
    background: #FF8367;
    margin-bottom: 3rem;
}

#loading-body2-btn:focus {
    background-color: #f6755e;
}
.big-number {
  font-size: 28px;
  font-weight: bold;
  color:#006666
}
.small-label {
  color: #777;
  font-size: 14px;
   color:#006666
}
.bg-green{ background: #F0F7F7;}

/* powercontrol START */

.selection-section {
        width: 100%;
        margin-bottom: 30px;
        padding: 20px;
        background: #f8f9fa;
        border-radius: 10px;
    }

    .section-title {
        font-size: 18px;
        font-weight: bold;
        color: #2c3e50;
        margin-bottom: 15px;
    }

    .btn-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .selection-btn {
        min-width: 100px;
        height: 50px;
        border-radius: 5px;
        font-weight: bold;
        transition: all 0.3s ease;
        overflow: hidden;
    }

    .selection-btn:before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        transition: left 0.5s;
    }

    .selection-btn:hover:before {
        left: 100%;
    }

    .building-btn, .floor-btn, .room-btn, .classroom-btn {
        /* background: linear-gradient(135deg, #f39c12, #e67e22); */
        background: linear-gradient(180deg, #339999, #206565);
        color: white;
    }

    .building-btn:hover,
    .building-btn.active,.floor-btn:hover,
    .floor-btn.active, .room-btn:hover,
    .room-btn.active, .classroom-btn:hover,
    .classroom-btn.active {
         background: linear-gradient(180deg, #339999, #206565);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgb(132, 132, 132);    
    }

    .building-btn.active,.floor-btn.active,  .room-btn.active, .classroom-btn.active {
        background: linear-gradient(180deg, #f39c12, #e67e22) !important;
        transform: translateY(-5px) scale(1.0) !important;
        box-shadow: 0 5px 15px rgb(132, 132, 132);
    } 

    .all-btn {
        background: linear-gradient(to bottom, #3E863E, #2F6E2F);
        color: white;
        font-weight: bold;
    }

    .all-btn:hover,
    .all-btn.active {
        background: linear-gradient(to bottom, #3E863E, #2F6E2F);
        transform: translateY(-2px);
        color: white;
        box-shadow: 0 5px 15px rgba(130, 129, 130, 0.4);
    }

    .selection-btn.active {
        transform: translateY(-5px) scale(1.1);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
        position: relative;
        z-index: 10;
    }

    .selection-btn.active:after {
        content: '✓';
        position: absolute;
        top: -8px;
        right: -8px;
        background: #fff;
        color: #27ae60;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 16px;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    }

    .control-panel {
        background: #f8f9fa;
    
        width: 100%;
    }

    .current-selection {
        background: rgba(255, 255, 255, 0.1);
        padding: 15px;
        border-radius: 8px;
        margin-bottom: 20px;
    }

    .power-off-btn {
        background: linear-gradient(135deg, #e74c3c, #c0392b);
        border: none;
        font-size: 18px;
        font-weight: bold;
        padding: 15px 40px;
        border-radius: 5px;
        transition: all 0.3s ease;
        box-shadow: 0 5px 15px rgba(231, 76, 60, 0.3);
        color: #FFF
    }

    .power-off-btn:hover {
        background: linear-gradient(135deg, #c0392b, #a93226);
        transform: translateY(-3px);
        box-shadow: 0 10px 25px rgba(231, 76, 60, 0.4);
    }

    .power-off-btn:active {
        transform: translateY(-1px);
    }

    .status-message {
        margin-top: 15px;
        padding: 10px;
        border-radius: 5px;
        display: none;
    }

    .fade-in {
        animation: fadeIn 0.5s ease-in;
    }
/* powercontrol END */
/*PAD*/
@media screen and (min-width:320px) and (max-width:768px) {
    .school_image {
        width: 80%;
    }

    .inner6 {
        max-width: 85%;
    }

    .inner2 {
        max-width: 92%;
    }
}

@media screen and (max-width: 1024px) {
    #header nav .button {
        padding: 0 1rem;
    }

    #banner {
        background-position: top 20px center;
    }
}

@media screen and (max-width: 980px) {
    #header nav.left {
        left: 1em;
        z-index: 9999;
        top: 1em;
    }
}

/*school_image*/
@media screen and (max-width: 950px) {
    .school_image {
        margin: 2vh auto;
        mix-blend-mode: multiply;
        filter: brightness(99%);
    }
}

/*PAD 名單匯入*/
@media screen and (max-width: 991px) {
    .btn-mar {
        margin-top: 0px;
    }

    .btn-mar button {
        margin-top: 15px;
    }
}

/*手機版*/
@media screen and (max-width: 360px) {

    /*名單匯入*/
    .csv-download {
        text-align: center !important;
    }

    .span-mar {
        margin-top: 20px;
    }

    #input-csv h1 {
        font-size: 28px;
    }

    .btn-mar button {
        font-size: 25px;
    }
}

@media screen and (max-width: 359px) {

    .btnfont-30,
    .btn-loginfont,
    .btn-loginfont2 {
        font-size: 24px;
    }
}

@media screen and (max-width: 575px) {

    .label-right,
    .label-left {
        text-align: center;
    }

    .btn-back a::after {
        font-size: 30px;
        font-weight: bold;
        padding-left: 5px;
    }

    .fa-chevron-circle-left:before {
        font-size: 35px;
    }

    .login.form {
        height: 90px;
        line-height: inherit;
    }

    .user-pwd-width {
        max-width: 300px;
    }
}

@media screen and (max-width: 450px) {
    .login.form.notice {
        margin-block-start: inherit;
    }
}

@media screen and (max-width: 480px) {
    #footer {
        display: block;
    }

    ul.actions li>* {
        text-transform: capitalize;
    }
}

@media screen and (max-width: 425px) {
    #header {
        background-color: #F6F6F6;
        /* height: 12%;
        /*手機不支援background-attachment 方法1 ok 
        padding-bottom: 6%;*/
    }

    #header nav.left {
        left: 0.5em;
        top: .5rem;
        z-index: 9999;
    }

    #banner {
        background-position: top 20px center;
        /*手機不支援background-attachment 方法2 ok */
        background-color: #F6F6F6;
    }

    h1.title {
        font-size: 32px !important;
    }

    .btn {
        padding-left: 6px;
        padding-right: 6px;
    }


}


@media screen and (max-width: 768px) {

    /*報表匯出邊框設定*/
    .border-report {
        border: unset;
    }

    .nav-tabs .nav-link.active {
        background-color: #006666;
        /*border-bottom:unset; 解除白底邊間隔線*/
    }

    .nav-tabs .nav-link:hover {
        background-color: #006666;
        color: #FFF;
    }

    .nav-link.active span {
        color: #FFF;
    }

    .mtb-1 {
        margin: 1rem 0;
    }

    .mb-1 {
        margin-bottom: 1rem !important;
    }

    .pd-0 {
        padding: 0;
    }
}