/*以下是自訂的*/
body {
    font-family: 'Microsoft YaHei',"新細明體","全字庫正宋體 Plus","全字庫正楷體 Plus";
    color: black;
}

/*右上角歡迎寬度*/
.user-info {
    max-width: 400px;
}

/*側邊寬度*/
.sidebar + .main-content {
    margin-left: 150px
}

.page-header {
    margin: 0 0 0 0;
    padding-bottom: 0px;
    padding-top: 0px
}

    .page-header h3 {
        padding: 0;
        margin: 0 0 0 0;
        font-size: 18px;
        font-weight: 600;
        font-family: 微軟正黑體;
        color: #2679B5 /*濃藍色*/
    }

.navbar .navbar-brand {
    font-weight: 600;
    font-family: 微軟正黑體;
}

.sidebar {
    /*第一層選單的寬度*/
    width: 150px;
}

/*第一層選單字體*/
.nav-list > li > a {
}

/*第一層背景顏色*/
.no-skin .nav-list > li > a {
    /*background-color: #cce0ff;*/
}

.nav-list > li .submenu > li > a {
    /*調第二層第三層的間距*/
    padding: 2px 0 4px 37px;
}

.nav-list > li > .submenu a > .arrow {
    top: 5px;
}


@media (min-width: 992px) and (max-width:991px) {
    .sidebar.navbar-collapse.compact .nav-list > li > a {
        height: 29px;
    }
}


@media only screen and (min-width: 992px) {
    .nav-list li.hover > .submenu {
        /*第二層選單寬度*/
        width: 250px;
        font-size: 12px;
    }

    /*第二層選單寬度*/
    .nav-list li.hover > .submenu2 {
        width: 400px;
        font-size: 12px;
    }

    .nav-list > li .submenu > li.hover > a {
        padding-left: 10px;
        /*第二層第三層背景顏色*/
        /*background-color: #c9deff*/
    }
}

.breadcrumbs {
    min-height: 21px;
    line-height: 20px;
}


.login-layout {
    background-color: none;
    background: url(images/bg-01.jpg);
    background-size: 100%;
}

.light-login {
    background: none;
    background-color: #c3cfdc;
}

.blur-login {
    background: url(images/bg-01.jpg);
    background-size: 100%;
}

.ui-menu .ui-menu-item {
    padding: 2px 10px 2px;
}


/*jqgrid*/
.ui-jqgrid .ui-jqgrid-title {
    margin: 4px;
    padding: 0 0 0 4px;
}

.ui-jqgrid-view > .ui-jqgrid-titlebar {
    height: 32px;
}

.ui-jqgrid .ui-jqgrid-htable th div {
    padding-top: 0;
    padding-bottom: 0;
    height: auto;
    overflow: hidden;
    position: relative;
    vertical-align: text-top;
    white-space: normal !important;
    text-align: center;
}

.ui-jqgrid tr.ui-row-ltr td, .ui-jqgrid tr.ui-row-rtl td {
    /*padding: 0px 0px;*/
    padding: 1px;
    margin: 0px auto;
    text-align: justify; /*grid文字置中*/
}

.ui-jqgrid .ui-jqgrid-pager {
    /*加上z-index以避免側邊條被遮住*/
    z-index: auto;
    background-color: blanchedalmond !important; /*淺粉黃*/
    padding: 0 0 0 0 !important;
    height: auto !important;
}

.ui-jqgrid .ui-jqgrid-bdiv {
    border-top: 1px solid #E1E1E1; /*淺粉白*/
    /*這行拿掉才會有橫向捲軸*/
    overflow-x: unset;
    /*加上這個以避免側邊條被遮住*/
    z-index: auto;
}

.ui-state-hover {
    color: blue;
}


/*JQGRID中 form編輯的第一列是否顯示*/
.EditTable tr:first-child {
    display: table-row;
}

/*JQGRID中 form編輯的第一列是否顯示*/
.FormGrid .EditTable tr:first-child {
    display: table-row;
}

.no-skin .nav-list > li > a {
    color: black;
}

.no-skin .nav-list > li:hover > a {
    background-color: #4F99C6; /*淺海軍藍*/
    color: white;
}

.no-skin .nav-list > li .submenu > li > a {
    color: black;
}

.no-skin .nav-list > li > .submenu li > .submenu > li a {
    color: black;
}

    .no-skin .nav-list > li > .submenu li > .submenu > li a:hover {
        color: white;
        background-color: #4F99C6; /*淺海軍藍*/
    }


@media only screen and (min-width: 992px) {
    .no-skin .nav-list li.hover > .submenu > li:hover > a {
        background-color: #4F99C6; /*淺海軍藍*/
        color: white;
    }
}



.blur-login {
    width: 100%;
    min-height: 100vh;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 15px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
    z-index: 1;
}

    .blur-login::before {
        content: "";
        display: block;
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: rgba(220,220,220,0.9);
    }

/*凍結窗格*/
#grid-table_frozen {
    background: white;
    filter: alpha(opacity=50);
}

/*jqgrid 內容折行*/
.ui-jqgrid tr.jqgrow td {
    white-space: normal !important;
    height: auto;
    /*vertical-align: text-top;*/
    padding-top: 2px;
    word-break: break-word;
}

/*jqgrid 標題折行*/
th.ui-th-column div {
    white-space: normal !important;
    height: auto !important;
    padding: 0px;
}


/*jqgrid 上面自訂每列的小圖示*/
/*共有copy, print, export, unlocked可選*/
/*content 事實上是font awesome的代碼*/
.ui-jqgrid .ui-icon-copy {
    color: #478FCA /*淺海軍藍*/
}

    .ui-jqgrid .ui-icon-copy:before {
        content: "\f0c5";
    }

.ui-jqgrid .ui-icon-print {
    color: #478FCA /*淺海軍藍*/
}

    .ui-jqgrid .ui-icon-print:before {
        content: "\f02f";
    }

.ui-jqgrid .ui-icon-export {
    color: #478FCA /*淺海軍藍*/
}

    .ui-jqgrid .ui-icon-export:before {
        content: "\f08e";
    }

.ui-jqgrid .ui-icon-unlocked {
    color: #30a90d /*森林綠*/
}

    .ui-jqgrid .ui-icon-unlocked:before {
        content: "\f09c";
    }

.ui-jqgrid .ui-icon-download {
    color: #478FCA /*淺海軍藍*/
}

    .ui-jqgrid .ui-icon-download:before {
        content: "\f019";
    }

.ui-jqgrid .ui-icon-file {
    color: #478FCA /*淺海軍藍*/
}

    .ui-jqgrid .ui-icon-file:before {
        content: "\f15c";
    }

.ui-jqgrid .ui-icon-hand-paper {
    color: red /*紅*/
}

    .ui-jqgrid .ui-icon-hand-paper:before {
        content: "\f256";
    }

.ui-jqgrid .ui-icon-thumbs-up {
    color: red /*紅*/
}

    .ui-jqgrid .ui-icon-thumbs-up:before {
        font-family: "Font Awesome 5 Free";
        content: "\f164";
    }

.ui-jqgrid .ui-icon-times-circle {
    color: red /*紅*/
}

    .ui-jqgrid .ui-icon-times-circle:before {
        content: "\f057";
    }

.ui-jqgrid .ui-icon-history {
    color: red /*淺海軍藍*/
}

    .ui-jqgrid .ui-icon-history:before {
        content: "\f1da";
    }

.ui-jqgrid .ui-icon-mail {
    color: #478FCA /*淺海軍藍*/
}

    .ui-jqgrid .ui-icon-mail:before {
        content: "\f0e0";
    }

.ui-jqgrid .ui-icon-play {
    color: red
}

    .ui-jqgrid .ui-icon-play:before {
        content: "\f144";
    }

.ui-jqgrid .ui-icon-alert {
    color: orangered;
}

    .ui-jqgrid .ui-icon-alert:before {
        content: "\f071";
    }

/*所有蹦窗, bootbox*/
modal-lg {
    width: 800px;
}

.modal-content {
    /*bootbox對話框字體大小*/
    font-size: 150% !important
}

.modal.aside-vc.navbar-offset .modal-dialog .aside-trigger {
    top: 0px;
}

.modal.aside-right .modal-content {
    background-color: #b9e0ea; /*極淺粉藍*/
}

.modal-body {
    background-color: inherit;
    padding: 5px 10px;
    z-index: 20
}

.modal-body, .print-body { /*繼承modal-body樣式*/
    background: #b9e0ea; /*極淺粉藍*/
}

.modal-body, .edit-body { /*繼承modal-body樣式*/
    background: #b9e0ea; /*極淺粉藍*/
}

    .modal-body.white-body { /*繼承modal-body樣式*/
        background: white;
    }

    .modal-body.danger-body { /*繼承modal-body樣式*/
        background: #ffdbdd;
    }

/*.modal-open .modal {
    align-items: center;
    justify-content: center;
}*/

.push-back {
    z-index: 100;
}

td > label, th > label {
    vertical-align: middle;
}

.form-control {
    /*height:25px;*/
}

.form-control, select {
    color: black;
}

/*checkbox*/
input[type=checkbox].ace.input-lg, input[type=radio].ace.input-lg {
    opacity: unset;
    position: relative;
    vertical-align: middle;
}

/*按鈕*/
.fm-button {
    border-radius: 10px;
    outline: none;
}

.btn, .btn-default, .btn-default.focus, .btn-default:focus, .btn.focus, .btn:focus {
    border-radius: 10px;
    outline: none;
}

.btn-primary, .btn-primary.focus, .btn-primary:focus {
    border-radius: 10px;
    outline: none;
}

    .btn-primary, .btn-primary.focus, .btn-primary:focus {
        border-radius: 10px;
        outline: none;
    }

        .btn-primary.focus:hover, .btn-primary:active:hover, .btn-primary:focus:active, .btn-primary:focus:hover, .btn-primary:hover, .open > .btn-primary.dropdown-toggle, .open > .btn-primary.dropdown-toggle.focus, .open > .btn-primary.dropdown-toggle:active, .open > .btn-primary.dropdown-toggle:focus, .open > .btn-primary.dropdown-toggle:hover {
            outline: none;
        }

.btn-success, .btn-success.focus, .btn-success:focus {
    border-radius: 10px;
    outline: none;
}

    .btn-success.focus:hover, .btn-success:active:hover, .btn-success:focus:active, .btn-success:focus:hover, .btn-success:hover, .open > .btn-success.dropdown-toggle, .open > .btn-success.dropdown-toggle.focus, .open > .btn-success.dropdown-toggle:active, .open > .btn-success.dropdown-toggle:focus, .open > .btn-success.dropdown-toggle:hover {
        outline: none;
    }

.btn.btn-app.btn-sm {
    outline: 0;
}

.noradius, .noradius:active, .noradius.focus, .noradius:focus {
    border-radius: 0;
    outline: none;
}

select {
    font-size: 14px;
    font-family: Microsoft YaHei;
}

.ui-inline-custom.ui-state-hover span {
    margin: -1px;
}

/*jquery validation*/
label.error {
    color: #F00;
}

/*ui-pg-div ui-inline-del {
    margin: 0px auto;
    text-align: center;
}*/

.ui-inline-del, .ui-inline-cancel {
    margin: 0px auto;
}


.bootbox-body {
    color: red;
}

.theme-explorer-fas .explorer-frame td {
    padding: 0 2px
}

.file-preview {
    padding: 0px;
}

input[type=checkbox].ace.ace-switch.ace-switch-4 + .lbl::before {
    content: "\a0\a0Y\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0N"
}

input[type=checkbox].ace.ace-switch.ace-switch-5 + .lbl::before {
    content: "是\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0否"
}

input[readonly]:not(.datePicker):not(.dateRange):not(.timePicker):not(.monthPicker), input[readonly]:focus:not(.datePicker):not(.dateRange):not(.timePicker):not(.monthPicker) {
    color: black;
    background: #C0C0C0 !important;
    cursor: default
}

textarea[readonly] {
    color: black;
    background: #C0C0C0 !important;
    cursor: default
}
/*Modal*/
.modal-fullscreen {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
}

.modal-dialog-fullscreen {
    /*position: fixed;*/
    margin: 0;
    width: 100%;
    height: 100%;
    padding: 0 0 0 0 !important;
    overflow: auto;
}

.modal-dialog-fullscreen, .modal-content {
    max-height: 100vh;
    overflow: auto;
}

.modal-content-fullscreen {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 0;
    box-shadow: none;
}

.modal-header-fullscreen {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    border: 0;
}

.modal-body-fullscreen {
    position: absolute;
    top: 50px;
    bottom: 60px;
    width: 95%;
    overflow: auto;
}

.modal-footer-fullscreen {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 60px;
    padding: 10px;
}

.modal-dialog-50 {
    width: 50%;
    margin: 0 auto;
}

.modal-dialog-60 {
    width: 60%;
}

.modal-dialog-65 {
    width: 65%;
}

.modal-dialog-70 {
    width: 70%;
}

.modal-dialog-75 {
    width: 75%;
}

.modal-dialog-80 {
    width: 80%;
}

.modal-dialog-85 {
    width: 85%;
}

.modal-dialog-90 {
    width: 90%;
}

.modal-dialog-95 {
    width: 95%;
}

.modal-dialog-100 {
    width: 100%;
}

/*end of Modal*/
.dropdown-menu > li > a {
    /*background-color:antiquewhite*/
}

.dateRange {
    width: 200px;
    /*目前預設是block, 即區塊模式*/
    /*display: inline;*/
}

.datePicker {
    width: 80px;
    /*display: inline;*/
}

/*目前應該是放在查詢視窗中使用*/
.datePicker-block {
    /*width: 100%;*/
    display: block;
}

.CaptionTD {
    max-width: 400px;
    vertical-align: middle;
}

.DataTD {
    vertical-align: middle;
}

.input-mask-phone {
    display: inline;
    width: 168px
}

/*大塊tab的底色*/
.nav-tabs.background-blue {
    background-color: inherit;
}
/*每個tab*/
.ui-tabs .ui-tabs-nav li.ui-state-default > a {
    background-color: #478FCA;
    color: white;
}

/*被選中的tab*/
.ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor, .ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor, .ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {
    cursor: default;
}

.nav-tabs[class*=tab-color-] > li.active > a, .nav-tabs[class*=tab-color-] > li.active > a:focus, .nav-tabs[class*=tab-color-] > li.active > a:hover {
    background-color: #eff2e3;
    color: #478FCA;
    font-weight: 600;
}

.tab-content {
    border-color: darkgray;
    /*background-color: blanchedalmond;   /*淺粉黃*/
}

.modal.in .modal-dialog {
    /*position: relative;
    top: 80px;
    transform: translateY(-50%);
    margin: 20px auto;*/
}

/*背景顏色*/
.ui-jqgrid tr.ui-row-ltr td, .ui-jqgrid tr.ui-row-rtl td {
    background-color: #c4ebf5;
    border-color: gray;
    border-width: 1px;
    /*border-bottom-style: solid;*/
}
/*被選擇到的列*/
.ui-jqgrid tr.ui-state-highlight.ui-row-ltr td {
    border-right-color: gray;
    background-color:khaki;
}

.ui-jqgrid .ui-jqgrid-labels th {
    background-color: #478FCA; /*淺海軍藍*/
    color: white;
    /*border-color: white !important;
    border-width: 1px !important;*/
    text-align: center !important;
}

.ui-jqgrid-sortable {
    color: white;
}

    .ui-jqgrid-sortable:hover {
        background-color: white;
    }

/*jqgrid中group header的顏色
    .jqg-second-row-header > th {
    background-color: orange!important;
}*/

.modal.fade.in {
    margin: 0 !important;
    padding: 0px !important;
}

li.ui-state-default.ui-state-hidden[role=tab]:not(.ui-tabs-active) {
    display: none;
}

.ui-tabs .ui-tabs-panel {
    padding: 0 0 0 0;
    border: none;
}

td.file-details-cell {
    border-color: black !important;
    border-style: solid !important;
    border-width: 1px !important;
    padding: 0 0 0 8px !important;
}

.absolutehide {
    display: none !important;
}

/*修補在modal中的grid最右邊header會有一小條白色的問題*/
.modal-content .ui-jqgrid-hbox {
    background-color: rgb(185, 224, 234);
}

/*登入*/
.login-box .forgot-password-link {
    font-size: 14px;
    font-weight: 700;
    text-shadow: 1px 0 1px rgba(0,0,0,.25);
}

.login-box .toolbar {
    padding: 9px 18px;
}

.css_table {
    display: table;
}

.css_tr {
    display: table-row;
}

.css_td {
    display: table-cell;
}

/*日曆底色*/
.drp-calendar, .drp-buttons {
    /*background-color:lightblue;*/
}

.daterangepicker .calendar-table th, .daterangepicker .calendar-table td {
    min-width: 28px;
    width: 28px;
    height: 16px;
    line-height: 16px;
}

.daterangepicker select.monthselect {
    margin-right: 2%;
    width: 40%;
}

.daterangepicker select.yearselect {
    width: 50%;
}

.tab-pane.fade {
    min-width: 400px;
}

.chosen-container {
    width: 90% !important;
}

input[readonly].datePicker, input[readonly].dateRange, input[readonly].timePicker, input[readonly]:focus.datePicker, input[readonly].dateRange, input[readonly]:focus.timePicker {
    pointer-events: none;
    color: black;
    background: #C0C0C0 !important;
}

/*阻止日曆顯示*/
/*.disabled-picker {
    opacity: 0.7;
    pointer-events: none;
}*/

.ui-jqgrid .ui-jqgrid-pager .ui-paging-pager {
    table-layout: auto;
    height: 50%;
}

.chosen-select[readonly] {
    color: black;
    background: #C0C0C0 !important;
}

/*chosen-select readonly時的行為*/
.chosen-disabled.chosen-container-single .chosen-single span {
    font-weight: bold;
    color: black
}

.hyperlink:hover {
    text-decoration: underline;
    /*color: #009ceb !important;*/
    cursor: pointer;
}

.file-drop-zone-title {
    color: blue;
    padding: 20px 10px !important;
    background-color: silver;
}

/*在長時間匯入時做完ajax時會導致padding right急遽暴增, 疑似是bootstrap的bug*/
body:not(.modal-open) {
    padding-right: 0px !important;
}

.text-align-right {
    text-align: right
}

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

.nav-search .nav-search-input {
    height: 18px !important
}

/*列印時不希望出現超連結URL*/
@media print {
    a[href]:after {
        content: none !important;
    }
}

::placeholder { /* CSS 3 標準 */

    color: lightgray;
}

@media print {
    .modal,
    .modal * {
        overflow: visible !important;
    }

    .modal {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
    }

    .modal-dialog {
        width: 100% !important;
        margin: 0;
    }

    .modal-backdrop {
        background-color: white;
        opacity: 1 !important;
    }

    .no-print {
        display: none;
    }
}

/*checkbox及radio在disabled狀態下時的顏色*/
input[type=checkbox].ace.disabled + .lbl::before, input[type=checkbox].ace:disabled + .lbl::before, input[type=checkbox].ace[disabled] + .lbl::before, input[type=radio].ace.disabled + .lbl::before, input[type=radio].ace:disabled + .lbl::before, input[type=radio].ace[disabled] + .lbl::before {
    color:darkslategray;
}

label[for]:hover{
    cursor: pointer;
}

.width_60 {
    width: 60px
}

.width_80 {
    width: 80px
}

.width_100 {
    width: 100px
}

.width_180 {
    width: 180px
}

.width_200 {
    width: 200px
}

.width_250 {
    width: 250px
}

/*duallistbox 的label與下面篩選框要同一列*/
.bootstrap-duallistbox-container label {
    display: inline!important;
}

select {
    padding: 5px 4px 6px;
}

/*修正chosen select有data-placeholder時顯示被截斷的問題*/
.chosen-container .chosen-choices .search-field:only-child,
.chosen-container .chosen-choices .search-field:only-child input {
    width: 100% !important;
}

.multiselect-container > li > a > label {
    padding: 7px 10px 7px 35px;
}

.multiselect-container > li.multiselect-group label {
    padding: 3px 15px;
}

.monthPicker {
    max-width:160px;
    /*display: inline;*/
}

.TrueBlue {
    color: blue !important;
}

.TrueRed {
    color: red !important;
}