/*#region application*/

body {
    background-color: var(--root-back-color);
    font-family: var(--root-font-name);
    font-size: var(--root-font-size);
}

a {
    word-spacing: 0;
    color: var(--root-hyperlink-color);
}

    a:hover {
        color: var(--root-hyperlink-color);
    }

    a:visited,
    a:visited:hover {
        color: var(--root-hyperlink-visited-color);
    }

/*#region 自訂樣式*/

/*指定方塊 style, 目前用在登入區塊、TreeView*/
.box {
    background-color: var(--root-box-back-color);
    box-shadow: var(--root-box-shadow-large);
    border: var(--root-box-border);
    border-radius: var(--root-border-radius-large);
    padding: var(--root-length-large);
}

/*首頁 系統版本、更新日期、瀏覽器種類版本 等訊息*/
.infor {
    width: 100%;
    margin-top: 0.25rem;
    padding: 0.5rem;
    font-weight: 100;
    letter-spacing: 0.05rem;
    line-height: 1;
    background-color: transparent;
    border-radius: .375rem;
    display: block;
    font-size: var(--root-font-size-small);
}

.block {
    display: block;
    width: 100%;
}

.uppercase {
    text-transform: uppercase;
}

.lowercase {
    text-transform: lowercase;
}

.right,
.number,
.special-number {
    text-align: right;
}

    .number.left {
        text-align: left;
    }

/*#endregion*/

/*#region 系統訊息區 */

/*系統訊息區*/
.system-zone {
    flex-wrap: wrap;
    width: 100%;
    border-radius: 0;
    padding: var(--root-length);
    /*padding-top: var(--root-length);
    padding-bottom: var(--root-length);
    padding-right: var(--root-length-medium);
    padding-left: var(--root-length-medium);*/
    word-spacing: var(--root-word-spacing);
    letter-spacing: var(--root-letter-spacing-medium);
}
    /*系統 名稱 基礎樣式*/
    .system-zone .system-name {
        font-family: var(--root-system-font-name);
        font-size: var(--root-font-size-large);
        font-weight: var(--root-title-font-weight);
        text-shadow: var(--root-text-shadow-medium);
        /*letter-spacing: 3px;*/
    }

    /*系統 icon 基礎樣式*/
    .system-zone .system-icon {
        background-color: var(--root-icon-back-color);
        margin: 0;
        padding: 0;
    }

    /*系統標題區 水平置中*/
    .system-zone .system-title-center {
        display: inline-block;
        /*padding: var(--root-length);*/
    }
        /*系統名稱區*/
        .system-zone .system-title-center .system-name {
            display: block;
            margin-top: 10px;
        }
        /*系統 icon 區*/
        .system-zone .system-title-center .icon-container {
            padding: 0.5rem 1rem;
            background-color: rgb(255,255,255);
            border-radius: var(--root-border-radius);
        }

        .system-zone .system-title-center .icon-container-inline {
            padding: 0.5rem 1rem;
            background-color: rgb(255,255,255);
            border-radius: var(--root-border-radius);
            display: inline-flex;
            align-items: center;
            box-shadow: var(--root-box-shadow-large);
        }

            .system-zone .system-title-center .icon-container-inline .system-name {
                margin-left: 1rem;
                color: var(--root-badge-back-color);
                margin-top: 0;
                text-shadow: none;
                /*letter-spacing: 5px;*/
                font-weight: var(--root-system-font-weight);
                font-size: var(--root-font-size-largest);
            }

        .system-zone .system-title-center .system-icon {
            display: block;
            /*content: var(--root-main-icon-url); */
            width: auto;
            height: auto;
        }

    /*系統標題區 水平靠左*/
    .system-zone .system-title-left {
        display: inline-flex;
        float: left;
    }

        /*系統名稱區*/
        .system-zone .system-title-left .system-name {
            padding-left: var(--root-length);
        }

        /*系統 icon 區*/
        .system-zone .system-title-left .system-icon {
            /*content: var(--root-icon-url);                */
            width: var(--root-icon-side-length);
            height: var(--root-icon-side-length);
        }

    /*使用功能名稱區*/
    .system-zone .program-name {
        float: left;
        font-family: var(--root-appname-font-name);
        font-size: var(--root-font-size-larger);
        font-weight: var(--root-font-weight);
        text-shadow: var(--root-text-shadow-medium);
        color: var(--root-program-text-color);
        word-spacing: var(--root-word-spacing);
        letter-spacing: var(--root-letter-spacing);
        margin-left: var(--root-length-large);
        margin-top: 0.5rem;
    }
    /*使用者資料區*/
    .system-zone .user-info {
        float: right;
        font-family: var(--root-font-name);
        font-size: var(--root-font-size);
        font-weight: var(--root-font-weight);
        text-shadow: var(--root-text-shadow);
        color: var(--root-user-info-text-color);
        margin-top: 1rem;
        word-spacing: 0;
        letter-spacing: 0;
        padding-right: var(--root-length);
    }

/*#endregion */

/*#region 控項標題的背景色*/

/*警告訊息 style*/
.warning {
    display: inline-block;
    width: 100%;
    flex-wrap: wrap;
    color: var(--root-warn-text-color);
    overflow: visible;
}

/*必須輸入的背景色*/
.must-input {
    background-color: var(--root-must-input-back-color);
}

/*必須輸入其一的背景色*/
.must-condition {
    background-color: var(--root-must-input-one-back-color);
}

/*必須選擇其一輸入的 背景色*/
.must-input-one {
    background-color: var(--root-must-input-one-back-color);
}

/*備註*/
.remark {
    background-color: var(--root-remark-back-color);
    letter-spacing: var(--root-data-letter-spacing);
    word-spacing: var(--root-data-word-spacing);
    height: auto;
    min-height: 2rem;
}

/*#endregion */

/*#region master-page*/

body.master-page {
    line-height: 0.9;
}

#pnlMenu {
    margin-bottom: var(--root-length-large);
}

/*#endregion */

/*#region control*/

/*文字 區塊*/
textarea,
textarea.form-control {
    height: var(--root-textarea-height);
}

    textarea.form-control.large-font {
        height: var(--root-textarea-height-large);
        font-size: var(--root-font-size-larger);
    }

/*按鈕*/
input[type="submit"],
input[type="button"],
button.btn {
    padding: var(--root-btn-padding);
    font-size: var(--root-font-size);
    font-family: var(--root-btn-font-name);
    font-weight: var(--root-btn-font-weight);
    line-height: var(--root-btn-line-height);
    min-width: var(--root-btn-width);
    letter-spacing: var(--root-letter-spacing);
    word-spacing: var(--root-word-spacing);
    border-width: var(--root-btn-border-width);
    border-style: outset;
    border-radius: 0;
    text-shadow: var(--root-text-shadow);
    box-shadow: var(--root-box-shadow);
    background-color: var(--root-btn-back-color);
    /*background-image: var(--root-btn-back-img);*/
    color: white;
    border-left-color: var(--root-btn-border-color);
    border-top-color: var(--root-btn-border-color);
}

    input[type="submit"]:not(:disabled):not(.disabled):hover,
    input[type="button"]:not(:disabled):not(.disabled):hover,
    button.btn:not(:disabled):not(.disabled):hover {
        /* background-color: var(--root-btn-hover-back-color);*/
        color: var(--root-btn-hover-text-color);
        background-image: var(--root-btn-hover-back-img);
    }

    input[type="submit"]:not(:disabled):not(.disabled):active,
    input[type="button"]:not(:disabled):not(.disabled):active,
    button.btn:not(:disabled):not(.disabled):active {
        background-image: var(--root-btn-active-back-img);
        border-style: inset;
        box-shadow: none;
    }

input[type="file"]:not(:disabled) {
    cursor: pointer;
}

/*checkbox*/
input[type=checkbox] {
    width: 100%;
    height: var(--root-checkbox-side-length);
    vertical-align: middle;
    cursor: pointer;
}

    input[type=checkbox]:not(:disabled) {
        cursor: pointer;
    }

/*唯讀屬性*/
input[readonly="readonly"] {
    background-color: var(--root-disabled-back-color);
    color: var(--root-disabled-text-color);
}
/*日期輸入*/
.date input[readonly="readonly"] {
    background-color: antiquewhite;
    color: var(--root-disabled-text-color);
}

/*下拉選單*/
select,
select option {
    background-color: var(--root-enabled-back-color);
    color: var(--root-enabled-text-color);
    cursor: pointer;
}

/*不可使用*/
:disabled,
.disabled {
    background-color: var(--root-disabled-back-color);
    color: var(--root-disabled-text-color);
    cursor: default;
}

/*自動填滿*/
/*input:-internal-autofill-selected,*/
input:-webkit-autofill {
    -webkit-text-fill-color: var(--root-enabled-text-color);
}
/*#endregion */

/*#region fpspread*/

div[fpspread="Spread"] {
    box-shadow: var(--root-box-shadow);
    letter-spacing: var(--root-data-letter-spacing);
    word-spacing: var(--root-data-word-spacing);
    font-family:sans-serif;
}

    div[fpspread="Spread"] td[fpcelltype="readonly"] .text-cell,
    div[fpspread="Spread"] td[fpcelltype="readonly"][celltype2="HyperLinkCellType"] {
        border: none;
        padding: 0.25rem !important;
        font-size: 0.875rem;
        line-height: 1.5rem;
    }

        div[fpspread="Spread"] td[fpcelltype="readonly"] .text-cell.text-cell-multiline {
            line-height: 1.25rem;
        }

        div[fpspread="Spread"] td[fpcelltype="readonly"] .text-cell.text-cell-singleline {
            white-space: nowrap;
            text-overflow: ellipsis;
        }

    /*div[fpspread="Spread"].big-font {
        letter-spacing: 0;
        font-size: 1rem;
    }*/

    div[fpspread="Spread"].big-font td[fpcelltype="readonly"] .text-cell,
    div[fpspread="Spread"].big-font td[fpcelltype="readonly"][celltype2="HyperLinkCellType"] {
        letter-spacing: 0;
        font-size: 1rem;
    }

    div[fpspread="Spread"] input[type="submit"],
    div[fpspread="Spread"] input[type="button"] {
        min-width: initial;
    }

    div[fpspread="Spread"] img[title="Page Next"]:not(.aspNetDisabled):hover,
    div[fpspread="Spread"] img[title="Page Previous"]:not(.aspNetDisabled):hover,
    div[fpspread="Spread"] img[title="Go to first page"]:not(.aspNetDisabled):hover,
    div[fpspread="Spread"] img[title="Go to last page"]:not(.aspNetDisabled):hover {
        cursor: pointer;
        background-color: yellow;
    }

    div[fpspread="Spread"] div[extenders="CalendarExtender"] input[type="text"] {
        height: 100%;
        border-width: 0;
        color: blue;
        margin-left: var(--root-length);
    }

/*#endregion */

/*#region bootstrap 擴充屬性*/

/*#region form-control*/

.form-control,
.form-control:focus,
.form-control > input {
    padding: var(--root-length-smaller);
    background-color: var(--root-enabled-back-color);
}

/*#endregion*/

/*#region badge*/

.badge {
    background-color: var(--root-badge-back-color);
    color: white;
}

    .badge.query-zone {
        font-size: var(--root-font-size);
        font-family: var(--root-font-name);
        background-color: var(--root-badge-query-back-color);
        font-weight: normal;
        text-align: left;
        letter-spacing: var(--root-letter-spacing);
        padding: var(--root-length);
        width: 100%;
        /*border-style: inset;*/
        /*border-radius:0.5em;*/
    }

        .badge.query-zone label {
            margin: 0rem;
            padding-left: var(--root-length-small);
            padding-right: var(--root-length-small);
            padding-top: 0rem;
            padding-bottom: var(--root-length-small);
            display: block;
        }

    .badge.infor {
        border-style: inset;
        border-radius: 0.5em;
    }

/*#endregion*/

/*#region input-group*/

.input-group {
    background-color: transparent;
    margin-top: var(--root-length-small);
    margin-right: var(--root-length-small);
    border-radius: var(--root-border-radius);
    box-shadow: var(--root-box-shadow);
}

    .input-group.tab-style,
    .input-group.tab-style .input-group-text,
    .input-group.tab-style .form-control {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border-bottom-width: 0;
    }

        .input-group.tab-style span.form-control.remark,
        .input-group.tab-style .input-group-text {
            font-size: var(--root-font-size-small);
        }

    .input-group span.form-control.remark {
        background-color: var(--root-remark-back-color);
        word-spacing: var(--root-word-spacing);
    }

    .input-group .input-group-text {
        border: var(--root-border);
        min-width: var(--root-control-title-width);
        letter-spacing: var(--root-letter-spacing);
        word-spacing: var(--root-word-spacing);
        font-family: var(--root-title-font-name);
        font-size: var(--root-font-size);
        color: var(--root-label-text-color);
        padding: var(--root-length-smaller);
    }

    .input-group > .input-group-text.unit {
        min-width: 2em;
        width: 2em;
        text-align: center;
        border-radius: 0;
    }

    .input-group > .input-group-append > .input-group-text.unit {
        min-width: 2em;
        width: 2em;
        text-align: center;
    }  

    .input-group .custom-file > .custom-file-label {
        border: var(--root-border);
        color: var(--root-text-color);
        padding: .375rem .375rem;
    }

        /*FileUpload 的 Browser 按鈕*/
        .input-group .custom-file > .custom-file-label::after {
            font-size: var(--root-font-size);
            font-family: var(--root-btn-font-name);
            font-weight: var(--root-btn-font-weight);
            min-width: var(--root-btn-width);
            letter-spacing: var(--root-letter-spacing);
            word-spacing: var(--root-word-spacing);
            border-width: var(--root-btn-border-width);
            text-shadow: var(--root-text-shadow);
            box-shadow: var(--root-box-shadow);
            background-color: var(--root-btn-back-color);
            color: white;
            border-left-color: var(--root-btn-border-color);
        }

    /*FileUpload 的 Browser 按鈕 Hover 時*/
    .input-group .custom-file:hover > .custom-file-label::after {
        background-color: var(--root-btn-hover-back-color);
        color: var(--root-btn-hover-text-color);
        text-shadow: var(--root-box-shadow);
    }

    .input-group > .custom-select:not(:first-child),
    .input-group > .form-control:not(:first-child),
    .input-group > .custom-radio:not(:first-child) {
        border: var(--root-border);
    }

    .input-group .form-control {
        min-width: var(--root-control-width);
        width: var(--root-control-width);
        color: var(--root-enabled-text-color);
    }

        .input-group .form-control:disabled,
        .input-group .form-control.date:disabled {
            background-color: var(--root-disabled-back-color);
            color: var(--root-disabled-text-color);
        }

        .input-group .form-control.date {
            background-color: var(--root-date-back-color);
            color: var(--root-enabled-text-color);
        }

        .input-group .form-control.form-control-large {
            min-width: var(--root-control-width-large);
            width: var(--root-control-width-large);
        }

        .input-group .form-control.form-control-small {
            min-width: var(--root-control-width-small);
            width: var(--root-control-width-small);
        }

    /*.input-group select[disabled="disabled"].form-control,*/
    .input-group span.form-control.label {
        background-color: var(--root-disabled-back-color);
        color: var(--root-disabled-text-color);
    }

    .input-group .form-control.form-control-smallest {
        min-width: var(--root-control-width-smallest);
        width: var(--root-control-width-smallest);
    }

/*#endregion */

/*#region btn*/

.btn {
    background-color: var(--root-btn-back-color);
    color: white;
    border-left-color: var(--root-btn-border-color);
    border-top-color: var(--root-btn-border-color);
}

    .btn:disabled,
    .btn.disabled {
        cursor: not-allowed;
    }

    .btn:hover {
        background-color: var(--root-btn-hover-back-color);
        color: var(--root-btn-hover-text-color);
        text-shadow: var(--root-box-shadow);
    }

    .btn:disabled:hover,
    .btn.disabled:hover {
        color: white;
    }

    .btn.btn-large {
        padding: var(--root-btn-padding-large);
    }

/*#endregion */

/*#region bootstrap-select*/

.input-group .bootstrap-select > select {
    left: 0;
}

.dropdown.bootstrap-select .btn.dropdown-toggle.btn-light,
.dropdown.bootstrap-select .btn.dropdown-toggle.btn-light,
.input-group .bootstrap-select.show > .btn.dropdown-toggle.btn-light.dropdown-toggle {
    color: var(--root-enabled-text-color);
    text-shadow: none;
    background-color: transparent;
    background-image: none;
    font-weight: 400;
    font-family: inherit;
    padding: var(--root-length-smaller);
    height: 100%;
    border-width: 0;
    box-shadow: none;
}

.dropdown.bootstrap-select .btn.dropdown-toggle.disabled.btn-light,
.dropdown.bootstrap-select .btn.dropdown-toggle.disabled.btn-light,
.dropdown.bootstrap-select.disabled {
    background-color: var(--root-disabled-back-color);
    color: var(--root-disabled-text-color);
}

.dropdown.bootstrap-select .btn.dropdown-toggle.btn-light:not(:disabled):not(.disabled):hover,
.dropdown.bootstrap-select .btn.dropdown-toggle.btn-light:not(:disabled):not(.disabled):hover,
.input-group .bootstrap-select.show > .btn.dropdown-toggle.btn-light.dropdown-toggle:hover {
    color: var(--root-enabled-text-color);
}

.dropdown.bootstrap-select .btn.dropdown-toggle.btn-light:not(:disabled):not(.disabled).active,
.dropdown.bootstrap-select .btn.dropdown-toggle.btn-light:not(:disabled):not(.disabled):active,
.input-group .bootstrap-select.show > .btn.dropdown-toggle.btn-light.dropdown-toggle {
    color: var(--root-enabled-text-color);
}

.dropdown.bootstrap-select .btn.dropdown-toggle.btn-light:not(:disabled):not(.disabled):focus,
.dropdown.bootstrap-select > select.mobile-device:not(:disabled):not(.disabled):focus + .dropdown-toggle {
    outline: thin solid #333 !important;
    outline: 0px auto -webkit-focus-ring-color !important;
    outline-offset: -2px;
}

.dropdown.bootstrap-select .btn.dropdown-toggle.btn-light:not(:disabled):not(.disabled).focus,
.dropdown.bootstrap-select .btn.dropdown-toggle.btn-light:not(:disabled):not(.disabled):focus {
    color: var(--root-enabled-text-color);
}

.dropdown.bootstrap-select .btn.dropdown-toggle.btn-light .filter-option {
    height: auto;
}

.dropdown-menu.show {
    background-color: var(--root-enabled-back-color);
}

.dropdown-menu .dropdown-item {
    /*padding: .1rem 1rem;*/
    padding: 0 var(--root-length-smaller);
    border: 0;
    color: var(--root-enabled-text-color);
}

    .dropdown-menu .dropdown-item:active,
    .dropdown-menu .dropdown-item.active {
        color: white;
        text-decoration: none;
        background-color: #007bff;
    }

    .dropdown-menu .dropdown-item:focus,
    .dropdown-menu .dropdown-item:hover {
        color: var(--root-enabled-text-color);
        background-color: yellow;
        /*font-weight:bold;*/
    }

.bs-searchbox input[type=search] {
    background-color: white;
}

/*#endregion */

.form-group.form-group-latest {
    margin-bottom: 0px;
}

/*#region btn-toolbar*/

.btn-toolbar[role="toolbar"] {
    margin-bottom: var(--root-length);
    width: 100%;
    margin-left: 0em;
}

    .btn-toolbar[role="toolbar"] .btn-group[role="group"] {
        width: 100%;
        flex-wrap: wrap !important;
        float: none;
    }

    .btn-toolbar[role='toolbar'] > .btn-group > .btn {
        width: auto;
    }

/*#endregion */

/*#region modal-dialog*/

.modal-dialog .modal-content {
    border-radius: var(--root-border-radius-large);
}

.modal-dialog .modal-header {
    padding: var(--root-length);
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border-top-left-radius: var(--root-border-radius-large);
    border-top-right-radius: var(--root-border-radius-large);
    display: block;
}

    .modal-dialog .modal-header button.close {
        color: white;
        font-size: 28pt;
        width: 2rem;
        height: 2rem;
        padding: 0;
        margin: 0;
        background-color: transparent;
        outline-width: 0;
    }

        .modal-dialog .modal-header button.close:hover {
            text-shadow: var(--root-text-shadow);
            color: var(--root-btn-hover-text-color);
        }

        .modal-dialog .modal-header button.close:focus {
            color: #fff;
            box-shadow: 0 0 0 0.2rem rgba(38,143,255,.8);
        }

    .modal-dialog .modal-header .modal-title {
        font-size: var(--root-font-size-large);
        font-family: var(--root-title-font-name);
        font-weight: var(--root-title-font-weight);
        text-shadow: var(--root-text-shadow);
        letter-spacing: var(--root-letter-spacing);
        word-spacing: var(--root-word-spacing);
    }

.modal-dialog .modal-body {
    padding: var(--root-length);
}

.modal-dialog .modal-footer {
    padding: var(--root-length);
    margin: 0;
}

    .modal-dialog .modal-footer .btn-toolbar {
        margin: 0;
    }

/*#endregion */

/*#region custom-control*/

.custom-radio.custom-control-inline .custom-control {
    padding-right: 1rem;
    min-width: 5rem;
    height: var(--root-checkbox-side-length);
}

    .custom-radio.custom-control-inline .custom-control .custom-control-label {
        padding-top: 0.2rem;
    }

/*#endregion */

/*#region bootstrap-toggle*/

.toggle-group {
    font-size: var(--root-font-size);
    font-family: var(--root-btn-font-name);
    font-weight: var(--root-btn-font-weight);
    letter-spacing: var(--root-letter-spacing);
    word-spacing: var(--root-word-spacing);
    /* text-shadow: var(--root-text-shadow);*/
}

    .toggle-group .toggle-on {
        background-color: #28a745;
    }

    .toggle-group .toggle-off {
        background-color: darkgray;
    }

.toggle[data-toggle=toggle][role=button] {
    margin-bottom: 5px;
}

/*#endregion */

/*#endregion */