/* ========== tag ========== */
* {
    /* 定義容器「width、height」含邊寬，避免100%時溢出視窗 */
    box-sizing: border-box;
}

body {
}

img {
    vertical-align: text-bottom;
}

a, [onclick] {
    cursor: pointer;
}

a {
    text-decoration: none;
    color: #00F;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
}

table {
    border-collapse: collapse;
    margin: 1px;
}

tr {
    vertical-align: top;
}

th {
    text-align: center;
}

th, td {
    padding: 1px;
}

label {
    margin-right: .3em;
}


hr {
    margin: 5px 0;
    border: 0;
    border-top: .1px #DD0B43 dashed;
    height: 1px;
}

/* 用單引號(')是為了方便複製到 JStool _Format，請勿改成雙引號(") */
input[type='text'], input[type='password'], textarea, select, button:not(.btn), input[type='button']:not(.btn) {
    vertical-align: top;
    margin-right: 1px;
    border: .1px #A9A9A9 solid;
    border-radius: 2px;
}

input[type='text'], input[type='password'], select, button:not(.btn), input[type='button']:not(.btn) {
    height: 22px;
}

    select[size], [multiple] {
        height: auto;
    }

input[type='text'], input[type='password'], input[type='file'], textarea {
    width: 150px;
}

select, button:not(.btn), input[type="button"]:not(.btn) {
    font-size: 12px;
}

textarea {
    height: 100px;
    overflow-y: auto;
}

td > input[type='text']:not([data-date]):not(.not100),
td > input[type='password']:not(.not100),
/*td > input[type='file']:not(.not100),*/
td > textarea:not(.not100) {
    width: 100%;
}

/* ========== class ========== */
.nowrap {
    /* 強制不換行 */
    white-space: nowrap;
}

.break {
    /* 強制換行 */
    white-space: normal;
    word-break: break-all;
}

table.Solid tr, table.SolidFull tr {
    vertical-align: top;
}

.Solid {
    border-radius: 10px;
    padding: .5em;
    margin: .25em;
    border: #D1AC7F 3px solid;
}

.SolidFull th, .SolidFull td {
    border: .1px #D1AC7F solid;
}

.NoSolid, .NoSolid th, .NoSolid td {
    border-style: none;
}

/* 下述三個 針對 tr:hover 的設定，順序不得調整，會影響覆蓋先後 */
tr:hover {
    background-color: #D1AC7F40;
}

form tr:hover, .no-hover tr:hover {
    /* 忽略 form 內的 tr */
    background-color: unset;
}

.hover tr:hover {
    /* set table class = 'hover' 讓 form 內的 tr 擁有滑過變色效果 */
    background-color: #D1AC7F40;
}

.SmallFont {
    font-size: x-small;
}

.Button {
    text-align: center;
    border-radius: 4px;
    display: inline-block;
    padding: 5px 10px;
    margin: 1px;
    background-color: #D1AC7F;
    color: #ffffff;
    /* 強制不換行 */
    white-space: nowrap;
}

.Anim {
    animation: ATzoom 0.2s ease-out infinite alternate;
}

.tableMenu {
    border-collapse: separate;
}

    .tableMenu td {
        background-color: #D1AC7F;
        color: #ffffff;
        text-align: center;
        border-radius: 4px;
        padding: 5px 10px;
    }

.PageMenu span {
    line-height: 28px;
    padding: 0 8px;
    border: 1px solid #CCC;
    border-radius: 4px;
    margin: 0 3px;
}

    .PageMenu span.pagenow, .PageMenu span:hover {
        background-color: #148aa4;
        color: #FFFFFF;
    }

#NotCopy {
    display: none;
}

/* ========== Animation ========== */
/* AT=Animation(縮寫) */
@keyframes ATzoom {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.05);
    }
}

/* ========== JStool ========== */
input[data-date] {
    /* JStool特製時間按鈕 */
    width: 6em;
}

input[onchange*='hideUpload('] {
    /* JStool特製上傳按鈕 */
    display: none;
    width: .1px;
    height: .1px;
}

.Message {
    color: #ff0000;
}

    .Message > div {
        display: flex;
        align-items: flex-start;
    }

.Dialog {
    visibility: hidden;
    position: absolute;
    background-color: #FFFFFF;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
}

    .Dialog > .Title {
        text-align: right;
        padding-right: 4px;
    }

        .Dialog > .Title a {
            color: black;
        }

    .Dialog .Scroll {
        /*flex-grow: 1;*/
    }

    .Dialog .Content {
        /*width: fit-content;*/
        /*margin: 0 auto;*/
        /*padding-bottom: 4px;*/
    }

.DialogModal {
    background: rgba(0, 0, 0, .5);
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
}

.ui-effects-transfer {
    /* jquery-ui 轉移特效 */
    background: rgba(0, 0, 0, .25);
}

.ui-sortable-handle {
    /* jquery-ui 排序特效 */
    cursor: pointer;
}

.Order {
    padding: 0px;
    margin: 0;
}

    .Order > li {
        list-style: none;
        margin: 2px;
        border: .1px #D1AC7F dashed;
    }

    .Order .Button {
        font-size: 12px;
        padding: 2.9px 7px 0 7px;
        height: 20px;
        border-radius: 2px;
        /* vertical-align: top; */
    }

.FreezePanes {
    position: relative;
    margin: 2px;
}

    .FreezePanes table {
        margin: 0;
    }

    .FreezePanes > div {
        position: absolute;
        overflow: hidden;
    }

    .FreezePanes .Content {
        overflow: auto;
    }

    .FreezePanes .bottomMenu {
        text-align: center;
    }

.toolOption {
    border-style: none;
    display: flex;
}

    .toolOption > div {
        position: relative;
    }

        .toolOption > div > div:first-child {
            position: absolute;
            top: 2px;
            left: 2px;
            display: flex;
            justify-content: space-between;
            width: calc(100% - 20px);
            background-color: #fff7d7;
        }

        .toolOption > div > div:last-child {
            min-width: 200px;
            height: 100px;
            overflow-y: scroll;
            background-color: white;
            border: .1px #DBDBDB solid;
            padding: 1.5em .2em 0 0;
        }

.videobox {
    /* video iframe自適應 */
    /* 主要用於嵌入youtube、facebook影片 */
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}

    .videobox iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

/* ========== jquery-ui ========== */
.ui-widget, .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
    font-family: inherit;
}

.ui-datepicker .ui-datepicker-title select {
    font-size: 13.3px;
    margin-top: 3.8px;
}

.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
    top: 3.3px;
}

.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover {
    border: none;
}

.no-close .ui-dialog-titlebar-close {
    display: none;
}

/* ========== ckeditor ========== */
.ckeditorLink {
    text-decoration: underline;
    color: #0000FF;
}

input.cke_dialog_ui_input_text {
    height: 25px;
}

select.cke_dialog_ui_input_select {
    margin-top: 1px;
}

/* ========== 外掛特效 ========== */
/* 跑馬燈特效 Start */
.marquee {
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
}

    .marquee span {
        display: inline-block;
        padding-left: 100%;
        animation: marquee 15s linear infinite;
        -webkit-animation: marquee 15s linear infinite;
        /* animation-duration: 15s; */
    }

        .marquee span:hover {
            /* 滑鼠移入暫停 */
            animation-play-state: paused;
            -webkit-animation-play-state: paused;
        }

@keyframes marquee {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(-100%, 0);
    }
}

@-webkit-keyframes marquee {
    0% {
        -webkit-transform: translate(0, 0);
    }

    100% {
        -webkit-transform: translate(-100%, 0);
    }
}
/* 跑馬燈特效  End  */

kbd {
    /* 模擬鍵盤按鈕樣式 */
    /* 使用範例：<kbd>Enter</kbd> */
    background: linear-gradient( 180deg,#f4f4f4,#d5d5d5);
    background-color: #f4f4f4;
    border: 1px solid #d5d5d5;
    border-radius: 6px;
    box-shadow: 0 1px 2px 1px #d5d5d5;
    font-size: .9rem;
    font-weight: 700;
    line-height: 1;
    margin: 3px;
    padding: 4px 6px;
    white-space: nowrap;
}

.參考語法 {
    font-size: x-small;
    position: relative;
}

    .參考語法 input[type="button"] {
        position: absolute;
        top: 17px;
        right: 1px;
    }

    .參考語法 > div {
        color: #DD0B43;
        font-weight: bold;
    }

    .參考語法 > pre {
        overflow: auto;
        width: 601px;
        max-height: 150px;
        margin: 0 0 2px 0;
        border: #DD0B43 .1px solid;
    }

.HtmlLabel {
    border-radius: 4px;
    display: inline-block;
    color: #ffffff;
    padding: 4px 8px 4px 3px;
    margin: 3px;
    background-color: #D1AC7F;
}

    .HtmlLabel::before {
        content: "🏷️";
    }