/* Global Styles */
html {
    font-size: 1rem;
}
body {
    font-size: 1rem;
    font-family: sans-serif, 微軟正黑體; "Microsoft JhengHei";
    margin-top: 6.25rem;
    background-color: #FFF;
}

@media(min-width:768px) {
    body {
        margin-top: 3.125rem;
    }
}

a {
    cursor: pointer;
}
span.selfAnchor, span.prevAnchor, span.nextAnchor, span.listAnchor {
    color: #EEE;
    font-size: 0.9375rem;
    margin-right: 0.3125rem;
    display: none;
}

.img_manual {
    color: MediumSlateBlue;
    text-decoration: underline;
    cursor: pointer;
}

select,
select option {
    text-align: center;
    text-align-last: center;
}
textarea {
    font-size: 0.9375rem;
    font-family: sans-serif, 微軟正黑體; "Microsoft JhengHei";
    line-height: 1.875rem;
    resize: vertical;
}

hr.hr-header {
    padding: 0;
    border: none;
    border-top: solid 0.0625rem #cee3ce;
    text-align: center;
    max-width: 250px;
    margin: 1.5625rem auto 1.875rem;
}
hr.hr-subHeader {
    padding: 0;
    border: none;
    border-top: solid 0.0625rem #deedde;
    text-align: center;
    max-width: 100%;
    margin: 1.5625rem auto 1.875rem;
}
hr.hr-page {
    padding: 0;
    border: none;
    border-top: solid 0.0625rem #deedde;
    text-align: center;
    max-width: 90%;
    margin: 1.5625rem auto 1.875rem;
}
li.divider {
    padding: 0;
    margin: 0;
    border-top: solid 0.0625rem #cee3ce;
}
::-webkit-scrollbar {
    width: 0.5rem;
}
::-webkit-scrollbar-track {
    background-color: #EEE;
}
::-webkit-scrollbar-thumb {
    background-color: #DDD;
}
::-webkit-scrollbar-thumb:hover {
    background-color: #CCC;
}
mark {
    background: #FF0;
}


#wrapper {
    padding-left: 0;
}
.navbar-brand {
    font-weight: bold;
    font-size: x-large;
}

#topNav_messageCount, #topNav_noticeCount {
    display: none;
    line-height: 0.75rem;
    padding: 0.125rem 0.3125rem;
    position: absolute;
    top: 0.75rem;
}
#topMenu ul li.topMenu_blog,
#topMenu ul li.topMenu_application,
#topMenu ul li.topMenu_game,
#topMenu ul li.topMenu_msg,
#topMenu ul li.topMenu_msg ul {
    background-color: #FFF;
}
#topMenu ul li.topMenu_blog .dropdown-menu div:not(:first-child) .row div,
#topMenu ul li.topMenu_application .dropdown-menu div:not(:first-child) .row div,
#topMenu ul li.topMenu_game .dropdown-menu div:not(:first-child) .row div {
    padding-left: 0.9375rem;
    padding-right: 0;
}
#topMenu ul li.topMenu_blog .dropdown-menu div:not(:first-child) .row div:not(:first-child),
#topMenu ul li.topMenu_application .dropdown-menu div:not(:first-child) .row div:not(:first-child),
#topMenu ul li.topMenu_game .dropdown-menu div:not(:first-child) .row div:not(:first-child) {
    padding-left: 0;
    padding-right: 0;
}
#topMenu ul li.topMenu_blog .dropdown-menu div:not(:first-child) .row div:last-child,
#topMenu ul li.topMenu_application .dropdown-menu div:not(:first-child) .row div:last-child,
#topMenu ul li.topMenu_game .dropdown-menu div:not(:first-child) .row div:last-child {
    padding-left: 0;
    padding-right: 0.9375rem;
}
#topMenu ul li.topMenu_blog .dropdown-menu,
#topMenu ul li.topMenu_application .dropdown-menu,
#topMenu ul li.topMenu_game .dropdown-menu {
    font-size: 0.9375rem;
}
#topMenu ul li.topMenu_blog .dropdown-menu ul,
#topMenu ul li.topMenu_application .dropdown-menu ul,
#topMenu ul li.topMenu_game .dropdown-menu ul {
    list-style: none;
    background-color: #FFF;
    padding: 0 0.625rem;
    margin-bottom: 0.625rem;
}
#topMenu ul li.topMenu_blog .dropdown-menu ul li,
#topMenu ul li.topMenu_application .dropdown-menu ul li,
#topMenu ul li.topMenu_game .dropdown-menu ul li {
    margin: 0;
    padding: 0.3125rem;
}
    @media (max-width: 767px) {
        #topMenu ul li.topMenu_blog .dropdown-menu ul li,
        #topMenu ul li.topMenu_application .dropdown-menu ul li,
        #topMenu ul li.topMenu_game .dropdown-menu ul li {
            margin: 0;
            padding-left: 0.9375rem;
        }
        #topMenu ul li.topMenu_blog .dropdown-menu ul li:nth-child(1),
        #topMenu ul li.topMenu_application .dropdown-menu ul li:nth-child(1),
        #topMenu ul li.topMenu_game .dropdown-menu ul li:nth-child(1) {
            color: #777;
            margin: 0;
            padding: 0.3125rem;
        }
    }
#topMenu .dropdown-menu a, #topMenu .dropdown-menu a:link, #topMenu .dropdown-menu a:visited {
    text-decoration: none;
    color: #000;
    background-color: #FFF;
    padding: 0.3125rem;
}
#topMenu .dropdown-menu a, #topMenu .dropdown-menu a:hover, #topMenu .dropdown-menu a:focus {
    background-color: #FFC;
}
#topMenu ul li.topMenu_blog .dropdown-menu ul li:nth-child(1),
#topMenu ul li.topMenu_application .dropdown-menu ul li:nth-child(1) ,
#topMenu ul li.topMenu_game .dropdown-menu ul li:nth-child(1) {
    color: #777;
    margin-bottom: 0.3125rem;
    border-bottom: 1px solid green;
}
#topMenu ul li.topMenu_blog .dropdown-menu ul li:nth-child(1) a,
#topMenu ul li.topMenu_blog .dropdown-menu ul li:nth-child(1) a:link,
#topMenu ul li.topMenu_blog .dropdown-menu ul li:nth-child(1) a:visited,
#topMenu ul li.topMenu_application .dropdown-menu ul li:nth-child(1) a,
#topMenu ul li.topMenu_application .dropdown-menu ul li:nth-child(1) a:link,
#topMenu ul li.topMenu_application .dropdown-menu ul li:nth-child(1) a:visited,
#topMenu ul li.topMenu_game .dropdown-menu ul li:nth-child(1) a,
#topMenu ul li.topMenu_game .dropdown-menu ul li:nth-child(1) a:link,
#topMenu ul li.topMenu_game .dropdown-menu ul li:nth-child(1) a:visited {
    color: #777;
}
#topMenu ul li.topMenu_blog .dropdown-menu,
#topMenu ul li.topMenu_application .dropdown-menu,
#topMenu ul li.topMenu_game .dropdown-menu {
    padding: 0 0 1.25rem 0;
    overflow-x: hidden;
    overflow-y: auto;
    display: none;
    margin: 0;
}
#topMenu ul.message-dropdown {
    padding: 0.3125rem;
    max-height: 420px;
    overflow-x: hidden;
    overflow-y: auto;
    display: none;
    margin: 0;
}
    @media (max-width: 767px) {
        #topMenu div.dropdown-menu,
        #topMenu ul.dropdown-menu {
            position: fixed;
            top: 6.25rem;
            left: 0;
            width: 100%;
        }
    }
    @media (min-width: 768px) {
        #topMenu ul li.topMenu_blog .dropdown-menu {
            width: 700px;
        }
        #topMenu ul li.topMenu_application .dropdown-menu {
            width: 150px;
        }
        #topMenu ul li.topMenu_game .dropdown-menu {
            width: 400px;
        }
        #topMenu ul.message-dropdown {
            width: 400px;
        }
    }
#topMenu li.message-preview {
    border-bottom: 1px solid rgba(0,0,0,.15);
}
#topMenu li.message-preview img {
    z-index: 99;
}
#topMenu ul li.topMenu_blog .dropdown-menu header {
    padding: 0.3125rem;
}
#topMenu ul li.topMenu_application .dropdown-menu header,
#topMenu ul li.topMenu_game .dropdown-menu header {
    padding: 0.3125rem 0.625rem;
}
#topMenu li.message-preview a,
#topMenu li.message-preview a:link,
#topMenu li.message-preview a:visited {
    color: #000;
    padding: 0.3125rem;
}
#topMenu li.message-preview a:hover, #topMenu li.message-preview a:focus {
    background-color: #FFC;
}
#topMenu li.message-preview a.new {
    background: #FFE;
}

#topMenu li.message-footer {
    text-align: center;
}
#topMenu li.message-footer a,
#topMenu li.message-footer a:link,
#topMenu li.message-footer a:visited {
    padding: 0.3125rem;
    background-color: #FFF;
}
#topMenu li.message-footer a:hover, #topMenu li.message-footer a:focus {
    background-color: #FFC;
}
#topMenu ul.alert-dropdown {
    width: 200px;
}



#slider_left {
    position: fixed;
    top: 3.125rem;
    left: 14.0625rem;
    bottom: 0;
    width: 14.0625rem;
    background-color: #eff6ef;
    border: none;
    border-radius: 0;
    box-shadow: 0.125rem 0.125rem 0.0625rem #EEE;
    overflow-x: hidden;
    overflow-y: auto;
    margin-left: -14.1875rem;
    padding-top: 0.625rem;
    padding-left: 0.625rem;
    padding-bottom: 0.625rem;
    z-index: 4;
}
    @media (max-width: 767px) {
        #slider_left {
            top: -0.625rem;
            padding-top: 7.5rem;
            transform: translateX(-100%);
            -webkit-transform: translateX(-100%);
            -webkit-overflow-scrolling: touch;
        }
        #slider_left.slide-left-in {
            animation: slide-left-in 0.5s forwards;
            -webkit-animation: slide-left-in 0.5s forwards;
        }
        
        #slider_left.slide-left-out {
            animation: slide-left-out 0.5s forwards;
            -webkit-animation: slide-left-out 0.5s forwards;
        }
            
        @keyframes slide-left-in {
            100% { transform: translateX(0%); }
        }
        
        @-webkit-keyframes slide-left-in {
            100% { -webkit-transform: translateX(0%); }
        }
            
        @keyframes slide-left-out {
            0% { transform: translateX(0%); }
            100% { transform: translateX(-100%); }
        }
        
        @-webkit-keyframes slide-left-out {
            0% { -webkit-transform: translateX(0%); }
            100% { -webkit-transform: translateX(-100%); }
        }
    }
    @media (max-width: 767px) {
        #blog_default_body .page_left {
            position: fixed;
            top: -0.625rem;
            left: 21.875rem;
            bottom: 0;
            width: 21.875rem;
            background-color: #FFF;
            border: none;
            border-radius: 0;
            box-shadow: 0.125rem 0.125rem 0.0625rem #EEE;
            overflow-x: hidden;
            overflow-y: auto;
            margin-left: -350px;
            padding: 7.5rem 0.625rem 0.625rem 0.625rem;
            z-index: 4;
            transform: translateX(-100%);
            -webkit-transform: translateX(-100%);
            -webkit-overflow-scrolling: touch;
        }
        .page_left.slide-left-in {
            animation: slide-left-in 0.5s forwards;
            -webkit-animation: slide-left-in 0.5s forwards;
        }
        
        .page_left.slide-left-out {
            animation: slide-left-out 0.5s forwards;
            -webkit-animation: slide-left-out 0.5s forwards;
        }
            
        @keyframes slide-left-in {
            100% { transform: translateX(0%); }
        }
        
        @-webkit-keyframes slide-left-in {
            100% { -webkit-transform: translateX(0%); }
        }
            
        @keyframes slide-left-out {
            0% { transform: translateX(0%); }
            100% { transform: translateX(-100%); }
        }
        
        @-webkit-keyframes slide-left-out {
            0% { -webkit-transform: translateX(0%); }
            100% { -webkit-transform: translateX(-100%); }
        }
    }
#slider_right {
    position: fixed;
    top: 3.125rem;
    right: 0;
    bottom: 0;
    width: 21.25rem;
    color: #000;
    background-color: #eff6ef;
    border: none;
    border-radius: 0;
    overflow-x: hidden;
    overflow-y: auto;
    transform: translateX(100%);
    -webkit-transform: translateX(100%);
    -webkit-overflow-scrolling: touch;
    z-index: 10;
}
    @media (max-width: 767px) {
        #slider_right {
            top: -0.625rem;
            padding-top: 7.5rem;
            transform: translateX(100%);
            -webkit-transform: translateX(100%);
            -webkit-overflow-scrolling: touch;
        }
    }
#slider_right.slide-right-in {
    box-shadow: -0.125rem 0.125rem 0.0625rem #EEE;
    animation: slide-right-in 0.5s forwards;
    -webkit-animation: slide-right-in 0.5s forwards;
}

#slider_right.slide-right-out {
    animation: slide-right-out 0.5s forwards;
    -webkit-animation: slide-right-out 0.5s forwards;
}
    
@keyframes slide-right-in {
    100% { transform: translateX(0%); }
}

@-webkit-keyframes slide-right-in {
    100% { -webkit-transform: translateX(0%); }
}
    
@keyframes slide-right-out {
    0% { transform: translateX(0%); }
    100% { transform: translateX(100%); }
}

@-webkit-keyframes slide-right-out {
    0% { -webkit-transform: translateX(0%); }
    100% { -webkit-transform: translateX(100%); }
}
#slider_right .board_photo {
    text-align: center;
    padding; 0.625rem 0;
    margin-top: 0.625rem;
}
#slider_right .board_name {
    text-align: center;
    font-weight: bold;
    padding; 0.625rem 0;
    margin-top: 0.625rem;
    margin-bottom: 1.25rem;
}
#slider_right a {
    display: block;
    color: #666;
    padding: 0.9375rem;
    text-decoration: none;
}
#slider_right a:hover {
    color: #000;
    background: #cee3ce;
}
#slider_right ul {
    list-style: none;
    padding-left: 0.9375rem;
}
#slider_right ul li:first-child {
    border-top: 1px solid #FFF;
}
#slider_right ul li {
    border-bottom: 1px solid #FFF;
    padding: 0;
}
#slider_right ul ul {
    display: none;
}



.showProfile {
    text-align: center;
    padding: 0.1875rem;
}
.showProfile img {
    cursor: pointer;
    z-index: 2;
}

#system_info {
    font-size: larger;
    line-height: 24px;
    margin: 0;
    z-index: 20;
}
#system_info .close {
    margin-right: 1.25rem;
}
    @media (max-width: 767px) {
        #system_info .close {
            margin-right: 0;
        }
    }

#notifyArea {
    width: 400px;
    position: fixed;
    left: 1.25rem; bottom: 1.875rem;
    word-break:break-all;
    border: 0.0625rem #EEE solid;
    z-index: 20;
    display: none;

    _position: absolute; /* position fixed for IE6 */
    _top:expression(documentElement.scrollTop+(documentElement.clientHeight-this.clientHeight)/2);
    _margin-top: 0;
}
    @media (max-width: 767px) {
        #notifyArea {
            width: 18.75rem;
        }
    }
#notifyArea a,
#notifyArea a:link,
#notifyArea a:visited {
    color: #000;
    padding: 0.625rem;
    background-color: #EBFCFF;
}
#notifyArea a:hover,
#notifyArea a:focus {
    color: #000;
    background-color: #EBFCFD;
}
#rollBtn {
    width: 1.875rem;
    position: fixed;
    right: 0; bottom: 0.625rem;
    padding: 0;
    margin: 0;
    text-align: center;
    word-break:break-all;
    z-index: 99;

    _position: absolute; /* position fixed for IE6 */
    _top:expression(documentElement.scrollTop+(documentElement.clientHeight-this.clientHeight)/2);
    _margin-top: 0;
}
#rollBtn div {
    padding: 0;
    margin: 0;
    cursor: pointer;
    
    filter:alpha(opacity=15); opacity:0.15; zoom:1;
}
#rollBtn div:hover, #rollBtn div:focus {
    border-radius: 50%;
    background: #FF0;

    filter:alpha(opacity=50); opacity:0.5; zoom:1;
}
#rollBtn div:active {
    background: #F00;
}
#rollBtn div i {
    font-size: x-large;
    padding: 0;
    margin: 0;
}

#footer {
    padding: 3.125rem 3.125rem 3.125rem 3.125rem;
    background-color: #eff6ef;
    color: #333;
}
    @media (max-width: 767px) {
        #footer {
            padding: 1.25rem;
        }
    }



.confirm-modal {
  text-align: center;
  padding: 0!important;
}

.confirm-modal:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -4px;
}

.confirm-modal .modal-dialog {
  display: inline-block;
  text-align: left;
  margin: 0 auto; 
}



.header {
    padding-top: 5rem;
}
.page {
    padding: 3.125rem 0;
    margin: 0 auto;
    min-height: 900px;
}
    @media (max-width: 767px) {
        .page {
            min-height: 550px;
        }
    }
.page > .container > .row,
.page > .container-fluid > .row {
    margin-bottom: 1.875rem;
}






.space_xs { padding: 0 0.125rem; }
.space_md { padding: 0 0.3125rem; }
.space_lg { padding: 0 0.625rem; }
@media (max-width: 767px) {
    .space_xs { padding: 0 0.0625rem; }
    .space_md { padding: 0 0.1875rem; }
    .space_lg { padding: 0 0.3125rem; }
}
@media (max-width: 767px) {
    .pull-right-md { float: right; }
}

.table-hover tbody tr:hover th,
.table-hover tbody tr:hover td:not(.priceUp):not(.priceDown) {
    background-color: #F0F8FF;
}
.page-header {
    background: #FFF;
    margin: 0;
    padding: 0.625rem;
    z-index: 2;

    border-radius: 0.625rem; /* IE 6+  */
    -moz-border-radius: 0.625rem;
    -webkit-border-radius: 0.625rem;
}



.breadcrumb {
    padding: 0.625rem;
    z-index: 3;
}
.breadcrumb.sticky { top: 3.125rem; position: -webkit-sticky; position: sticky; }
.breadcrumb.fixed { top: 3.125rem; position: fixed; }
@media (max-width: 767px) {
.breadcrumb.sticky { top: 6.25rem; position: -webkit-sticky; position: sticky; }
.breadcrumb.fixed { top: 6.25rem; position: fixed; }
}
#list table thead.fixed { top: 90px; position: fixed; border-bottom: 0.125rem #CCC solid; }
#list table thead.fixed tr th { border-bottom: none; }
@media (max-width: 767px) {
#list table thead.fixed { top: 90px; position: fixed; border-bottom: 0.125rem #CCC solid; }
#list table thead.fixed tr th { border-bottom: none; }
}



#tablist li a:hover {
    background: #eff6ef;
}
#tablist li.active a {
    background: #deedde;
}
.tab-pane {
    padding: 0.625rem 0;
}
    @media (min-width: 768px) {
        .tab-pane {
            padding: 1.25rem;
        }
    }

.form-group {
    width: 100%;
}
.input-group {
    margin: 0;
}
.input-group span { background-color: #eff6ef; }
.input-group span.btn:hover { background-color: #deedde; }

#policy ul {
    margin-bottom: 1.25rem;
}
#policy li {
    margin-top: 0.3125rem;
    margin-bottom: 0.3125rem;
}

#pageBar {
    text-align: center;
}


#list table:nth-child(1).sticky { top: 90px; position: fixed; }
#list table:nth-child(1) {
    margin: 0;
    border-bottom: 1px solid #CCC;
}
#list table thead {
    background-color: #FFF;
}
#list table tbody {
    
}
#list table .sample, #flag {
    display: none;
}

.date {
    text-align: center;
}
time {
    padding: 0 0.3125rem;
    cursor: default;
}
@media (max-width: 767px) {
    time {
        padding: 0.1875rem;
    }
}

.consoleBtn {
    margin: 0;
    padding: 0 0.125rem 0 0.125rem;
}
i.edit_icon {
    color: #AAA;
    cursor: pointer;
}

.positive {
    color: green;
}
.negative {
    color: red;
}
.working {
    color: red;
}


.select2-dropdown {
    z-index: 1;
}
.select2-results__option[aria-selected=true] {
    display: none;
}