/*reset*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}


/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

    blockquote:before,
    blockquote:after,
    q:before,
    q:after {
        content: '';
        content: none;
    }

table {
    border-collapse: collapse;
    border-spacing: 0;
}

html {
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    font-size: 16px;
    color: var(--grayText);
    transition: 0.3s;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 1rem;
    font-weight: 700; /*400;*/
    line-height: 1.5;
    color: var(--blackText);
    text-align: left;
    background-color: #fff;
}

.height-maximize.height-primary {
    background-color: #fff;
}

a {
    color: var(--blackText);
    font-weight: bold;
}


    /*滑鼠提示*/

    a:hover {
        cursor: pointer;
    }

* {
    box-sizing: border-box;
}


/* 內建更新按鈕 - 一般作業資料查詢不適用 Grid 右下方內建更新按鈕(Refresh)方式因此隱藏 */

.k-grid-pager .k-pager-refresh {
    display: none;
}

.hide {
    display: none !important;
}

.display-flex {
    display: flex;
}


/*label*/

label,
.k-input-label,
.rangerText_1 label {
    font-weight: bold;
    font-size: 1.125rem;
    margin-bottom: 0;
    vertical-align: middle;
    color: var(--blackText);
    word-break: break-all;
    text-align: right;
}

.form-inline label {
    width: 6rem;
    margin-right: 0.5rem;
    vertical-align: middle;
    display: inline-block;
}

.form-inline.label_6 label {
    width: 7rem;
}

.form-inline.rangerText_1 label:not(:first-of-type),
.form-inline.label_6.rangerText_1 label:not(:first-of-type) {
    width: 20px;
    text-align: center;
    margin-right: 0;
}

.rangerText_1 > span {
    text-align: left;
}

@media (max-width: 891px),(min-width: 1024px) and (max-width: 1139px) {
    label, .k-input-label, .rangerText_1 label {
        text-align: left;
    }
}

/*標題*/

h1,
h2,
h3,
h4,
h5 {
    font-weight: bold;
}

h1 {
    font-size: 1.75rem;
}

h2 {
    font-size: 1.33rem;
}

h3 {
    font-size: 1.125rem;
}

h4 {
    font-size: 1rem;
}

h5 {
    font-size: 0.875rem;
}


/* 滑鼠指標 */

.k-grid input.k-checkbox,
.grid-checkAll,
.grid-cell-check,
.grid-row-check,
.grid-row-select .k-grid-content > table > tbody > tr,
.grid-row-redirect .k-grid-content > table > tbody > tr,
.grid-cell-select,
.grid-cell-rediret {
    cursor: pointer;
}


/* 內建更新按鈕 - 一般作業資料查詢不適用 Grid 右下方內建更新按鈕(Refresh)方式因此隱藏 */

.k-grid-pager .k-pager-refresh {
    display: none;
}

/*修正.k-checkbox*/

.k-checkbox {
    border-radius: 0;
}

/*字放大*/

.k-list .k-item {
    font-size: 1.125rem;
}

/*目前選擇的項目*/
/*.k-list .k-item.k-state-selected{
    font-size: 1.25rem;

}*/
.containerWrap {
    width: 100%;
}

    .containerWrap > .row {
        margin-left: 0;
        margin-right: 0;
    }

.height-maximize {
    max-height: none !important;
}

.k-select-overlay {
    display: none;
}


/*upload*/
.k-upload-async, .k-upload-sync {
    background: var(--inputBg);
    border-radius: var(--borderR);
    text-align: center;
    font-size: 1.125rem;
    font-weight: bold;
    border: unset;
}


.k-dropzone:before {
    font-family: 'Font Awesome 5 Free';
    content: "\f574";
    display: block;
    font-size: 56px;
    color: var(--colorText);
    margin-bottom: 16px;
}

.k-dropzone {
    display: block;
    padding: 40px;
}

.k-upload-async .k-upload-button {
    border-radius: 8px;
}

.k-upload .k-upload-button,
.k-upload .k-dropzone-hint {
    margin: 0 0 8px 0;
}

.k-dropzone .k-dropzone-hint, .k-dropzone .k-upload-status {
    display: block;
    color: var(--colorText);
}

.k-dropzone-active, .k-dropzone-hover {
    background: var(--lightColor);
    border-radius: 8px;
}

.k-file .k-file-invalid-group-wrapper, .k-file .k-file-group-wrapper, .k-file .k-file-size {
    color: var(--colorText);
}



/*TextBox,Textarea*/
.k-textbox {
    border: unset;
    background: unset;
    border-radius: var(--borderR)
}

label[class*="d-none"] + .k-textbox,
label[class*="d-none"] + .k-textarea,
label[class*="d-none"] + .k-multiselect {
    width: 100%;
}

label + .k-textbox, label + .k-textarea, label + .k-multiselect {
    width: var(--datepickerW);
}

.label_6 label + .k-textbox, .label_6 label + .k-textarea, .label_6 label + .k-dropdown {
    width: calc(100% - 7.5rem - 5px);
    width: calc(var(--datepickerW) - 1rem);
}


.k-colorpicker .k-picker-wrap.k-state-default {
    padding: var(--btnHPadding) var(--inputWPadding);
}

@media (max-width: 891px),(min-width: 1024px) and (max-width: 1139px) {
    label + .k-textbox,
    .k-textarea,
    label + .k-textarea,
    label + .k-multiselect {
        width: 100%;
    }

    .form-inline.need label, .form-inline.need.label_6 label {
        width: calc(100% - 1rem);
    }
}



.k-textarea > .k-input,
.k-textbox > .k-input {
    color: var(--colorText);
    background: var(--inputBg);
    font-size: 1.125rem;
    border: 1px var(--inputBg) solid;
    display: inline-block;
    vertical-align: middle;
    height: var(--inputHeight);
    border-radius: var(--borderR);
    padding: 0 var(--inputWPadding);
    text-indent: 0;
}

.k-state-disabled .k-input {
    border: var(--disableBg);
}

.k-textarea > .k-input {
    height: auto;
}

.k-textarea {
    border: var(--inputBg);
}

    .k-textarea > .k-input {
        padding: 12px 20px;
    }


    .k-input::placeholder,
    .k-textarea .k-input::placeholder {
        color: var(--colorText);
    }

    .k-textarea > .k-input:hover,
    .k-textarea > .k-input:focus,
    .k-textbox > .k-input:hover,
    .k-textbox > .k-input:focus {
        border-color: var(--mainColor);
        background: var(--inputHoverBg);
    }

/*.inputGroup*/

.inputGroup > div > span[class*="k-"] {
    width: 200px;
}

.inputGroup > div > span.k-numerictextbox {
    width: 166px;
    margin-right: 56px;
}

.inputGroup > div > span[class*="k-"]:not(:last-of-type) {
    margin-bottom: 10px;
}


.inputGroup2 > div > span[class*="k-"],
.inputGroup2 label[class*="d-none"] div > span[class*="k-"] {
    width: calc(50% - 14px);
    display: inline-block;
}


.inputGroup3 > div > span[class*="k-"],
.inputGroup3 label[class*="d-none"] div > span[class*="k-"] {
    width: calc((100% - 49px) / 3);
}

    .inputGroup2 > div > span[class*="k-"]:nth-of-type(2n+1),
    .inputGroup3 > div > span[class*="k-"]:not(:nth-of-type(3n)) {
        margin-right: 20px;
    }

.form-inline[class*="inputGroup"] > div {
    display: inline-block;
    width: var(--datepickerW);
    vertical-align: middle;
}

@media (max-width: 891px),(min-width: 1024px) and (max-width: 1139px) {
    .form-inline[class*="inputGroup"] > div,
    .form-inline[class*="inputGroup"] > div > span[class*="k-"],
    .form-inline[class*="inputGroup"] label[class*="d-none"] div > span[class*="k-"] {
        width: 100%;
    }

    .inputGroup2 .k-textbox:not(:last-of-type),
    .inputGroup3 .k-textbox:not(:last-of-type),
    .inputGroup2 .k-dropdown:not(:last-of-type),
    .inputGroup3 .k-dropdown:not(:last-of-type) {
        margin-right: 0px;
    }

    .form-inline[class*="inputGroup"] > div > span.k-numerictextbox {
        width: calc(100% - 34px);
    }

    .form-inline[class*="inputGroup"] > div > span:not(:last-of-type) {
        margin-bottom: 10px;
    }
}


@media(min-width:1140px) {
    .inputGroup > div > span[class*="k-"]:not(:last-of-type) {
        margin-right: 20px;
    }

    .inputGroup > div > span.k-numerictextbox {
        margin-right: 56px !important;
    }

    .inputGroup2 > div > span.k-numerictextbox {
        width: calc(50% - 48px);
        display: inline-block;
        margin-right: 56px !important;
    }

    .inputGroup2 .k-numerictextbox:nth-child(4n+3) {
        margin-right: 0px !important;
    }

    .inputGroup3 > div > span.k-numerictextbox {
        width: calc((100% - 146px) / 3);
        display: inline-block;
        margin-right: 52px !important;
    }

    .inputGroup3 .k-numerictextbox:nth-child(6n+5) {
        margin-right: 0px !important;
    }

    .inputGroup2 > div > span[class*="k-"]:nth-of-type(n+3),
    .inputGroup3 > div > span[class*="k-"]:nth-of-type(n+4) {
        margin-top: 10px;
    }

    .inputGroup .k-textbox {
        width: calc((100% - 14px) / 4);
        margin-bottom: 10px;
    }


    .form-inline[class*="inputGroup"] {
        width: var(--line2);
    }


    .form-inline.inputGroup {
        vertical-align: top;
    }



        .form-inline.inputGroup div {
            display: inline-block;
            width: calc(var(--textboxW) - 6px);
            vertical-align: top;
        }

    .inputGroup2 .k-checkbox, .inputGroup2 .k-radio {
        margin-left: 20px;
    }

    .form-inline.label_6[class*="inputGroup"] > div {
        width: calc(var(--datepickerW) - 1rem);
    }
}

/*forms.scss*/


.k-edit-form-container .container {
    max-width: none;
    padding: 0px;
}

.k-edit-form-container {
    width: auto;
}

    .k-edit-form-container .windowContent {
        padding: 20px;
        margin-bottom: 40px;
    }





/*.need(必填)*/

.need:before {
    content: '*';
    color: var(--importantColor);
    display: contents;
    font-size: 16px;
}

.need label {
    width: calc(6rem - 11px);
}

.needClose label:first-of-type::before {
    content: '*';
    color: var(--importantColor);
    display: contents;
    font-size: 16px;
}

@media (max-width: 891px),(min-width: 1024px) and (max-width: 1139px) {
    .need .k-input-label {
        width: calc(100% - 1rem);
    }
}


/*日曆與時間*/
.k-datepicker,
.k-datetimepicker {
    background: unset;
    width: var(--datepickerW);
    border-radius: var(--borderR);
}


*[class*="picker"] .k-state-default {
    background: var(--inputBg);
    border: var(--inputBg) 1px solid;
    border-radius: var(--borderR);
    padding: 0 var(--inputWPadding);
    color: var(--colorText);
}




*[class*="picker"] .k-input {
    background: var(--inputBg);
    box-sizing: border-box;
    color: var(--colorText);
    text-indent: 0;
    padding: 0;
    font-size: 1.125rem;
    vertical-align: middle;
    height: calc(var(--inputHeight) - 2px);
    border: 1px solid var(--inputBg);
}


.k-state-active .k-input {
    border: 1px solid var(--inputHoverBg);
}

.k-icon.k-i-calendar,
.k-icon.k-i-clock {
    color: var(--colorText);
    font-size: 20px;
}

.k-datepicker .k-select,
.k-datetimepicker .k-select {
    border: unset;
    padding: 0 8px;
}
/*移入效果*/
*[class*="picker"] .k-state-default.k-state-focused,
*[class*="picker"] .k-state-default.k-state-hover {
    border: 1px solid var(--mainColor);
    background: var(--inputHoverBg);
    box-sizing: border-box;
    color: var(--colorText);
}

    *[class*="picker"] .k-state-default.k-state-focused .k-input,
    *[class*="picker"] .k-state-default.k-state-hover .k-input {
        background: var(--inputHoverBg);
        border: unset;
    }

*[class*="picker"] .k-state-border-down .k-picker-wrap.k-state-border-down,
*[class*="picker"] .k-state-border-down .k-input,
*[class*="picker"] .k-state-border-up .k-picker-wrap.k-state-border-up,
*[class*="picker"] .k-state-border-up .k-input {
    color: var(--colorText);
    background: var(--inputHoverBg);
    box-shadow: 0 0 0 0;
    border: unset;
}

*[class*="picker"] .k-state-default.k-state-active {
    background: var(--inputHoverBg);
    border-radius: var(--borderR);
    padding: 0 var(--inputWPadding);
    box-shadow: unset;
    color: var(--colorText);
}

.k-editor-toolbar-wrap *[class*="picker"] .k-state-default.k-state-active {
    padding: var(--btnHPadding) var(--inputWPadding);
}


*[class*="picker"] .k-state-border-down .k-picker-wrap.k-state-border-down,
*[class*="picker"] .k-state-active.k-state-border-down,
*[class*="picker"] .k-state-border-up .k-picker-wrap.k-state-border-up,
*[class*="picker"] .k-state-active.k-state-border-up {
    border: 1px var(--mainColor) solid;
}

/*日曆與時間-disable*/
*[class*="picker"] .k-state-disabled {
    border-radius: var(--borderR);
    padding: 0 var(--inputWPadding);
    border: unset;
}

    *[class*="picker"] .k-state-disabled .k-input {
        background-color: unset;
        color: var(--disableText);
        font-size: 1.125rem;
    }

    *[class*="picker"] .k-state-disabled .k-select .k-icon {
        color: var(--disableText);
    }



    *[class*="picker"] .k-state-disabled .k-input,
    .k-picker-wrap .k-state-disabled .k-input,
    *[class*="picker"] .k-state-disabled .k-select {
        border: unset;
    }

/*數字範圍*/
.rangerText_1 .k-numerictextbox {
    width: 100%;
}

    .rangerText_1 .k-numerictextbox .k-numeric-wrap {
        width: auto;
    }

.rangerText_1 > .k-numerictextbox ~ label:last-of-type {
    width: 100%;
    margin: 0;
}


.rangerText_1.label_6 .k-numerictextbox {
    width: 100%;
}

    .rangerText_1.label_6 .k-numerictextbox .k-numeric-wrap {
        width: auto;
    }

.rangerText_1.label_6 > .k-numerictextbox ~ label:last-of-type {
    width: 100%;
    margin: 0;
}



@media (min-width: 768px),(min-width: 1024px) and (max-width: 1139px) {
    .rangerText_1 > .k-datetimepicker,
    .rangerText_1 > .k-textbox,
    .rangerText_1 > .k-dropdown {
        width: calc(50% - 15px);
        text-align: left;
    }


    /*數字範圍*/
    .rangerText_1 .k-numerictextbox {
        width: calc(50% - 19px);
    }

        .rangerText_1 .k-numerictextbox .k-numeric-wrap {
            width: calc(100% - 30px);
        }

    .rangerText_1 > .k-numerictextbox ~ label:last-of-type {
        margin: 0px 4px 0 4px;
        width: 20px;
    }




    .label_6.rangerText_1 > .k-datepicker,
    .label_6.rangerText_1 > .k-textbox,
    .label_6.rangerText_1 > .k-dropdown,
    .label_6.rangerText_1 > .k-datetimepicker {
        width: calc(50% - 15px);
    }

    .rangerText_1.label_6 .k-numerictextbox {
        width: calc((100% - var(--labelW)) / 2 - 2rem + 68px);
    }

    .rangerText_1.label_6 > .k-numerictextbox ~ label:last-of-type {
        width: 20px;
    }
}

@media (min-width: 892px) and (max-width: 1023px),(min-width: 1140px) {
    .label_6 .k-datepicker,
    .label_6 .k-datetimepicker {
        width: calc(var(--datepickerW) - 1rem);
    }

    .rangerText_1 > .k-datepicker,
    .rangerText_1 > .k-datetimepicker,
    .rangerText_1 > .k-textbox,
    .rangerText_1 > .k-dropdown {
        width: calc((100% - var(--labelW)) / 2 - 17px);
    }
    /*數字範圍*/
    .rangerText_1 .k-numerictextbox {
        width: calc((100% - var(--labelW)) / 2 - 34px);
    }

        .rangerText_1 .k-numerictextbox .k-numeric-wrap {
            width: calc(100% - 16px);
        }

    .rangerText_1 > .k-numerictextbox ~ label:last-of-type {
        margin: 0 0px 0 18px;
        width: 20px;
    }



    .label_6.rangerText_1 > .k-datepicker,
    .label_6.rangerText_1 > .k-textbox,
    .label_6.rangerText_1 > .k-dropdown,
    .label_6.rangerText_1 > .k-datetimepicker {
        width: calc((100% - var(--labelW)) / 2 - 25px);
    }

    .need.label_6 label + .k-textbox, .need.label_6 label + .k-textarea {
        width: calc(var(--datepickerW) - 2rem);
    }

    .need.label_6 label + .k-numerictextbox {
        width: calc(var(--datepickerW) - 2rem - 28px);
    }

    .label_6 label + .k-numerictextbox {
        width: calc(var(--datepickerW) - 2rem - 18px);
    }

    .label_6.need .k-datepicker {
        width: calc(var(--datepickerW) - 1rem - 15px);
    }

    /*數字範圍*/
    .rangerText_1.label_6 .k-numerictextbox {
        width: calc((100% - var(--labelW)) / 2 - 2rem + 7px);
    }

    .rangerText_1.label_6 > .k-numerictextbox ~ label:last-of-type {
        width: 20px;
    }
}

@media (max-width: 891px),(min-width: 1024px) and (max-width: 1139px) {
    .k-datepicker, .k-datetimepicker {
        width: 100%;
    }

    .rangerText_1 {
        text-align: center;
    }

    .label_6 label + .k-textbox, .label_6 label + .k-textarea {
        width: 100%;
    }
}

@media(max-width: 596px) {
    .k-grid .k-grid-search {
        width: 100%;
    }
}

/*dropdown/k-autocomplete*/
.k-dropdown, label[class="d-none"] + .k-dropdown {
    width: calc(100% - 109px);
}


.k-autocomplete .k-input {
    background: unset;
    line-height: calc(var(--inputHeight) - 9px);
    text-indent: 0;
    padding-left: var(--inputWPadding);
    width: calc(100% - (3 * var(--inputWPadding)) - 16px);
    color: var(--colorText);
    font-size: 1.125rem;
}

.k-dropdown-wrap.k-state-default, label + .k-autocomplete {
    height: calc(var(--inputHeight) - 2px);
    font-size: 1.125rem;
    vertical-align: middle;
    background: var(--inputBg);
    border: 1px var(--inputBg) solid;
    border-radius: var(--borderR);
    line-height: calc(var(--inputHeight) - 3px);
    padding-right: 0;
    color: var(--colorText);
}

.k-autocomplete.k-state-hover, .k-autocomplete.k-state-focused {
    background: var(--inputHoverBg);
    border-color: var(--mainColor);
}

.k-dropdown-wrap.k-state-default .k-input {
    display: inline-block;
    vertical-align: middle;
    text-indent: 0;
    padding: 0 var(--inputWPadding);
    color: var(--colorText);
}

.k-dropdown .k-state-default.k-state-focused .k-input,
.k-dropdown .k-state-default.k-state-hover .k-input {
    border: unset;
}

.k-dropdown .k-icon {
    color: var(--colorText);
}

.k-dropdown-wrap.k-state-default.k-state-hover,
.k-dropdown-wrap.k-state-default.k-state-focused {
    background: var(--inputHoverBg);
    border-color: var(--mainColor);
}
/*dropdown-disable*/
.k-dropdown-wrap.k-state-disabled .k-input {
    padding: 0 var(--inputWPadding);
    text-indent: 0;
    line-height: calc(var(--inputHeight) - 2px);
    font-size: 1.125rem;
    color: var(----disableText);
}

.k-dropdown-wrap.k-state-disabled {
    border-radius: var(--borderR);
    color: var(--disableText);
    background: var(--disableBg);
}

    .k-dropdown-wrap.k-state-disabled .k-select .k-icon {
        color: var(--disableText);
    }

/*選擇第一個後，第二個才會出現*/
.hideDisable span[aria-disabled="true"] {
    display: none;
}

@media (max-width: 891px),(min-width: 1024px) and (max-width: 1139px) {
    .k-dropdown {
        width: calc(100% - 2px);
    }
}

@media (min-width: 1140px) {
    label + .k-dropdown, label + .k-autocomplete {
        width: var(--datepickerW);
    }
}

/*numeric*/
.k-numerictextbox {
    width: var(--numericW);
}

.k-numeric-wrap.k-state-default,
.k-numeric-wrap.k-state-disabled {
    line-height: calc(48px - 2px);
    vertical-align: middle;
    width: 100%;
    background: var(--inputBg);
    border: 1px var(--inputBg) solid;
    border-radius: var(--borderR);
    line-height: calc(var(--inputHeight) - 2px);
    color: var(--colorText);
}

    .k-numeric-wrap.k-state-default .k-input,
    .k-numeric-wrap.k-state-disabled .k-input {
        background: unset;
        padding: 0px var(--inputWPadding);
        text-indent: 0px;
        color: var(--colorText);
    }

    .k-numeric-wrap.k-state-default .k-select,
    .k-numeric-wrap.k-state-disabled .k-select {
        border: unset;
    }

    .k-numeric-wrap.k-state-default.k-state-focused,
    .k-numeric-wrap.k-state-default.k-state-hover {
        background: var(--inputHoverBg);
        border: 1px solid var(--mainColor);
    }

.k-numeric-wrap .k-link.k-state-selected {
    background: unset;
    color: #2fb2aa;
}

.k-numeric-wrap .k-select {
    padding: 4px 0;
    height: auto;
}

/*k-numeric-disable*/
.k-numeric-wrap.k-state-disabled {
    color: var(--disableText);
    background: var(--disableBg);
}

    .k-numeric-wrap.k-state-disabled .k-input {
        color: var(--disableText);
        background: unset;
    }

    .k-numeric-wrap.k-state-disabled .k-icon {
        color: var(--disableText);
    }

@media (max-width: 891px),(min-width: 1024px) and (max-width: 1139px) {
    .k-numerictextbox {
        width: calc(100% - 38px);
    }
}
/*phoneInput*/
.phoneInput .k-textbox:first-of-type {
    width: 6rem;
}

.phoneInput .k-textbox:last-of-type {
    width: calc(100% - 6.5rem - 8px);
}

@media (min-width: 1140px) {
    .phoneInput .k-textbox:last-of-type {
        width: calc(100% - 12.5rem - 20px );
    }
}

/*addressInput、addressArea(簡寫地址)*/

.addressInput > div > div + div {
    margin-top: 10px;
}

.addressInput > div > div:first-of-type > span, .addressArea > div > div:first-of-type > span,
.addressArea > div > div:last-of-type .k-textbox:not(:last-of-type) {
    margin-bottom: 10px;
}

    .addressInput > div > div:first-of-type > span[aria-disabled="true"] {
        display: none;
    }

.addressInput > div > div:nth-last-of-type(2) .k-textbox {
    width: 5.5rem;
    margin-bottom: 10px;
    vertical-align: middle;
}

.addressInput > div > div:nth-last-of-type(2) label {
    width: auto;
    vertical-align: middle;
}

.addressInput div .k-dropdown, .addressInput > div > div:last-of-type span,
.addressArea > div > div:last-of-type span {
    width: 100%;
}

.addressArea > label {
    vertical-align: top;
}

.addressArea > div > div:first-of-type > span:last-of-type {
    width: calc(100% - 2rem - 5px);
}


.addressArea > div > div > label {
    width: 2rem;
    margin-right: 0;
    font-size: 1.125rem;
}

@media (min-width: 1140px) {
    .addressInput {
        vertical-align: top;
    }

        .addressInput > div {
            width: calc(var(--textboxW) - 6px);
            display: inline-block;
            vertical-align: top;
        }

            .addressInput > div > div:first-of-type > span {
                width: calc((100% - var(--labelW) - 55px) / 4);
            }

                .addressInput > div > div:first-of-type > span:not(:nth-of-type(3n+3)) {
                    margin-right: 20px;
                }
}

@media (min-width: 992px) {

    .addressArea > div {
        width: calc(var(--textboxW) - 6px);
        display: inline-block;
        vertical-align: top;
    }

        .addressArea > div > div:first-of-type > span, .addressArea > div > div:first-of-type > span:last-of-type {
            width: calc((100% - 78px - 2rem) / 4);
        }



        .addressArea > div > div:nth-of-type(2) span {
            width: calc((100% - 26px) / 2);
        }

            .addressArea > div > div:nth-of-type(2) span:nth-of-type(odd), .addressArea > div > div:first-of-type > span:not(:last-of-type) {
                margin-right: 20px;
            }
}

/*searchInput*/
.searchInput .k-textbox {
    width: var(--searchInputW);
}

.searchInput .btn {
    margin-left: 10px;
}

@media (min-width: 1140px) {
    .searchInput.inputGroup .k-textbox {
        width: calc(50% - 13px);
        margin-bottom: 10px;
    }

        .searchInput.inputGroup .k-textbox:nth-of-type(odd) {
            margin-right: 20px;
        }

        .searchInput.inputGroup .k-textbox:last-of-type {
            width: calc(50% - 88px);
            margin-right: 0px;
        }

    .searchInput.inputGroup .btn {
        margin-bottom: 10px;
    }
}

/*disable*/

.k-textbox.k-state-disabled > .k-input,
.k-textbox.k-state-disabled > .k-input::placeholder,
.k-datepicker .k-state-disabled,
.k-datetimepicker .k-state-disabled,
.k-textbox.k-no-click .k-input,
.k-textbox.k-no-click .k-input::placeholder {
    color: var(--disableText);
    background: var(--disableBg);
}

.k-datetimepicker .k-state-disabled {
    line-height: var(--inputHeight)
}

.k-textbox.k-no-click .k-input {
    opacity: 0.6;
}

@media (max-width: 891px),(min-width: 1024px) and (max-width: 1139px) {
    .searchInput .k-textbox, .searchInput.inputGroup label[class*="d-none"] + .k-textbox {
        width: calc(100% - 78px);
    }
}

/*qryInput*/
.qryInput .k-textbox {
    width: var(--qryInputW);
}

.qryInput .btn {
    margin-left: 10px;
}

.qryInput label + .k-textbox {
    width: calc(var(--qryInputW) - var(--labelW) - 5px);
}



@media (max-width: 891px),(min-width: 1024px) and (max-width: 1139px) {
    .qryInput label + .k-textbox {
        width: calc(100% - 93px);
    }
}

@media (min-width: 1140px) {
    .qryInput.inputGroup .k-textbox {
        width: calc(50% - 13px);
        margin-bottom: 10px;
    }

        .qryInput.inputGroup .k-textbox:nth-of-type(odd) {
            margin-right: 20px;
        }

        .qryInput.inputGroup .k-textbox:last-of-type {
            width: calc(50% - 104px);
            margin-right: 0px;
        }

    .qryInput.inputGroup .btn {
        margin-bottom: 10px;
    }
}

/*tBTGroup*/
.tBTGroup > div {
    width: var(--datepickerW);
    display: inline-block;
}

.tBTGroup .k-textbox {
    width: calc((100% - 108px) / 2);
}

.tBTGroup .btn {
    margin: 0 10px;
}



@media (max-width: 891px), (min-width: 1024px) and (max-width: 1139px) {
    .tBTGroup > div, .tBTGroup .k-textbox {
        width: 100%;
    }


        .tBTGroup .k-textbox:first-of-type {
            width: calc(100% - 94px);
            margin-bottom: 10px;
        }

    .tBTGroup .btn {
        margin-right: 0;
        margin-bottom: 10px;
    }
}

@media(min-width: 1024px) {
    .form-inline.tBTGroup {
        width: var(--line2);
    }
}

@media (min-width: 1140px) {
    .tBTGroup.label_6 > div {
        width: calc(var(--datepickerW) - 1rem);
    }
}




/*MultiSelect*/
.k-multiselect {
    background: var(--inputBg);
    font-size: 1.125rem;
    border: 1px var(--inputBg) solid;
    display: inline-block;
    vertical-align: middle;
    border-radius: var(--borderR);
    padding: 4px calc(var(--inputWPadding) - 4px);
    text-indent: 0;
    width: 100%;
    box-sizing: border-box;
}

.k-multiselect-wrap.k-state-hover, .k-state-hover > .k-multiselect-wrap {
    background: unset;
}

.k-multiselect.k-state-focused, .k-multiselect.k-state-hover {
    border-color: var(--mainColor);
    background: var(--inputHoverBg);
    border-radius: var(--borderR);
    box-shadow: none;
}

.k-multiselect .k-clear-value .k-icon {
    color: var(--colorText);
}

.k-multiselect .k-multiselect-wrap {
    padding-right: 20px;
}

.k-multiselect-wrap {
    border: unset;
    background: unset;
}

    .k-multiselect-wrap li {
        border-radius: var(--borderR);
        border: unset;
        background: var(--mainColor);
        color: white;
        margin: 4px;
    }

        .k-multiselect-wrap li span, .k-multiselect-wrap .k-select {
            padding: 4px;
            font-weight: bold;
        }

.k-multiselect .k-input {
    color: var(--colorText);
    opacity: 1;
    text-indent: 0;
}

@media (min-width: 1140px) {
    label + .k-multiselect {
        width: var(--datepickerW);
    }
}


/*radio*/
.k-radio + .k-radio-label, .k-radio-label + .k-radio,
.k-checkbox + .k-checkbox-label, .k-checkbox-label + .k-checkbox {
    margin-left: 10px;
}

/*radioGroup*/
.radioGroup > div > span {
    display: inline-block;
    margin-bottom: 10px;
}


@media (max-width: 891px),(min-width: 1024px) and (max-width: 1139px) {
    .radioGroup > div > span {
        display: block;
    }
}


/*radioGroupFull,radioMultGroup*/

.radioGroupFull > div > span,
.radioMultGroup > div > span {
    display: block;
    margin-bottom: 10px;
}

.radioMultGroup > div > span {
    display: flex;
}

    .radioMultGroup > div > span > span {
        display: inline-block;
        width: calc(100% - 26px);
        margin-left: 10px;
    }

        .radioMultGroup > div > span > span > span:not(:last-of-type) {
            margin-bottom: 10px;
        }

@media (min-width: 1140px) {
    .radioGroup, .radioGroupFull, .radioMultGroup {
        vertical-align: top;
    }

        .radioGroup > div,
        .radioGroupFull > div,
        .radioMultGroup > div {
            display: inline-block;
            width: var(--datepickerW);
            vertical-align: top;
        }

            .radioMultGroup > div > span label {
                width: 100%;
                text-align: left;
            }

            .radioMultGroup > div > span {
                margin-bottom: 20px;
            }
}
/*k-tabstrip-wrapper*/
.k-tabstrip-items .k-item {
    background: unset;
    opacity: 0.8;
}

.k-tabstrip-items .k-state-active.k-item {
    background: white;
    opacity: 1;
}

.k-tabstrip-items .k-state-default .k-link {
    color: white;
}

.k-tabstrip-items .k-state-active.k-state-default .k-link {
    color: var(--grayText);
}

/*步驟指示*/

.progressStep {
    display: flex;
    /*position: fixed;*/
    /*固定*/
    background: white;
    padding: 12px 0 0px;
    z-index: 2;
    font-weight: bold;
    width: 100%;
}

    .progressStep .tag.act {
        border-bottom: 4px solid var(--mainColor);
    }

    .progressStep .tag {
        padding-bottom: 6px;
    }

        .progressStep .tag.act:before {
            background: var(--mainColor);
            color: white;
        }

        .progressStep .tag:before {
            content: '1';
            display: inline-block;
            background: var(--grayBg);
            color: var(--grayText);
            width: 28px;
            line-height: 28px;
            border-radius: 50%;
            text-align: center;
            margin-right: 10px;
        }

        .progressStep .tag:nth-of-type(2):before {
            content: '2';
        }

        .progressStep .tag:nth-of-type(3):before {
            content: '3';
        }

    .progressStep p {
        font-size: 1.125rem;
        display: inline-block;
    }

    .progressStep i {
        margin: 10px 40px;
        color: var(--lightGrayText);
    }

@media (max-width: 891px),(min-width: 1024px) and (max-width: 1139px) {
    .progressStep .tag:before {
        display: none;
    }
}


/*頁腳操作*/
.bottomNav {
    background: white;
    /*position: fixed;*/
    /*固定*/
    bottom: 0;
    padding: 10px 40px;
    z-index: 3;
    width: 100%;
    left: 0px;
    text-align: right;
    box-shadow: 0px -3px 6px rgb(0 0 0 / 16%);
}

    .bottomNav span + span {
        margin-left: 20px;
    }


/*Modal*/
.infoArea {
    padding: 20px;
    border-radius: var(--borderR);
    width: 230px;
    background: #fff;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}

/*彈框*/
.dialog-content {
    background: white;
}

div.k-window-content {
    background: unset;
    background-color: white;
}

.windowContent {
    margin-bottom: 60px;
    background: white;
    vertical-align: top;
}

.windowfooter {
    width: 100%;
    padding: 12px 12px 0;
    position: absolute;
    bottom: 0;
    background-color: white;
    border-top: 1px solid var(--lightGrayBg);
    text-align: right;
    right: 0;
}

    .windowfooter .btn:not(:first-of-type) {
        margin-left: 8px;
    }

.form-inline {
    margin: 0 10px var(--marginY) 10px;
    display: inline-block;
    width: var(--line1);
    vertical-align: top;
}

    .form-inline.btnGroup {
        width: 100%;
    }

.row + .form-inline.btnGroup, .row + .form-inline.btnGroup + .form-inline.w-100 {
    width: calc(100% + 30px) !important;
}

.form-inline.btnGroup > .btn {
    margin: 4px 4px 4px 0;
}


@media (max-width: 891px),(min-width: 1024px) and (max-width: 1139px) {
    form-inline, .form-inline[class*="col-"], .form-inline > .row {
        width: 100%;
        margin: 0 0 var(--marginY) 0;
        padding-left: 0;
        padding-right: 0;
    }


    .form-inline label, .form-inline.label_6 label {
        width: 100%;
        margin: 0 0 4px 0;
        display: inline-block;
    }
}


@media (min-width: 1024px) and (max-width: 1139px) {
    .form-inline {
        padding-left: 10px;
        padding-right: 10px;
    }

        .form-inline[class*="col-"] {
            padding-left: 15px;
            padding-right: 15px;
        }
}


.form-inline[class*="Ranger"] {
    width: 100%;
}


@media(min-width: 992px) {
    .windowContent label + .k-dropdown {
        width: var(--datepickerW);
    }

    .windowContent .radioGroup > div,
    .windowContent .radioGroupFull > div,
    .windowContent .radioMultGroup > div {
        display: inline-block;
        width: var(--datepickerW);
        vertical-align: top;
    }

    .windowContent .form-inline[class*="inputGroup"] {
        width: var(--line2);
    }

    .windowContent .form-inline.inputGroup2 .k-dropdown {
        width: calc((100% - var(--labelW) - 30px) / 2);
    }

    .windowContent .label_6 label + .k-dropdown {
        width: calc(100% - 126px);
    }
}

@media (min-width: 1140px) {
    .form-inline[class*="rangerText"] {
        width: var(--line2);
    }

    .addressInput {
        width: 100%;
    }
}



/*colorArea1*/
[class*="colorArea"] {
    padding: 20px 20px 8px 20px;
    margin-bottom: 20px;
    background: var(--lightGrayBg);
}

.colorArea2 {
    background: var(--greenBg);
}

.colorArea3 {
    background: var(--greenblueBg);
}

.colorArea4 {
    background: var(--blueBg);
}

.colorArea5 {
    background: var(--orangeBg);
}

.colorArea6 {
    background: #f3e9e3;
}

.colorArea7 {
    background: #f6eaea;
}

.colorArea8 {
    background: #f6eaf1;
}

.colorArea9 {
    background: #f7edf7;
}

.colorArea10 {
    background: #efeef7;
}

*[class*="colorArea"] .k-input {
    background: white;
}

    *[class*="colorArea"] .k-input::placeholder {
        color: var(--grayText);
    }


*[class*="colorArea"] .k-state-focused,
*[class*="colorArea"] .k-state-hover {
    background: var(--inputHoverBg);
    border-radius: var(--borderR);
}

    *[class*="colorArea"] .k-state-focused .k-input::placeholder,
    *[class*="colorArea"] .k-state-hover .k-input::placeholder {
        color: var(--colorText);
    }



*[class*="colorArea"] *[class*="picker"],
*[class*="colorArea"] .k-dropdown-wrap {
    background: white;
    border-radius: var(--borderR);
}

*[class*="colorArea"] .k-dropdown {
    border-radius: var(--borderR);
}

*[class*="colorArea"] *[class*="picker"] .k-input,
*[class*="colorArea"] *[class*="picker"] .k-icon {
    border: unset;
    color: var(--grayText);
}

*[class*="colorArea"] .k-dropdown .k-input,
*[class*="colorArea"] .k-dropdown .k-icon {
    background: unset;
    color: var(--grayText);
}

*[class*="colorArea"] .k-dropdown-wrap.k-state-active {
    border-color: var(--mainColor);
    background: var(--inputHoverBg);
}

*[class*="colorArea"] .k-state-focused .k-input,
*[class*="colorArea"] .k-state-hover .k-input,
*[class*="colorArea"] .k-state-focused .k-icon,
*[class*="colorArea"] .k-state-hover .k-icon,
*[class*="colorArea"] .k-state-active .k-input,
*[class*="colorArea"] .k-state-active .k-icon,
*[class*="colorArea"] .k-numeric-wrap .k-select {
    color: var(--colorText);
}

*[class*="colorArea"] .k-numeric-wrap {
    background: white;
}



@media(min-width:1440px) {
    *[class*="colorArea"] {
        padding: 20px 20px 8px 20px;
    }
}




/*Table*/
.k-gantt-toolbar .k-state-default, .k-grid .k-grouping-header, .k-grid-header, .k-grid-header-wrap, .k-grouping-header .k-group-indicator, .k-header {
    border-color: white;
}

    .k-header, .k-grid-header .k-header > .k-link, .k-header, .k-treemap-title {
        background: var(--mainColor);
        font-size: 1.125rem;
        color: white;
        font-weight: bold;
    }

.k-grid-header {
    background: var(--mainColor);
}


    .k-grid-header th.k-header .k-checkbox {
        vertical-align: middle;
    }

.k-grid .k-checkbox {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: calc(var(--borderR) / 2);
    vertical-align: middle;
}

.k-grid td {
    padding: 4px;
}

@media (max-width: 891px),(min-width: 1024px) and (max-width: 1139px) {
    .k-filter-row th, .k-grid-header th.k-header, .k-grid td {
        padding: 8px;
    }
}

td, .k-grid td, .k-grid td.k-state-selected, .k-grid-header, .k-grid-header-wrap, .k-group, .k-group-footer td, .k-grouping-header, .k-grouping-header .k-group-indicator, .k-header {
    border-color: white;
    font-weight: bold;
}

td {
    font-weight: normal;
}


.k-block, .k-content, .k-popup, .k-toolbar, .k-widget {
    color: var(--blackText);
}

.k-dropdown .k-input, .k-dropdown .k-state-hover .k-input, .k-dropdown .k-state-focused .k-input {
    color: var(--colorText);
}


.gridTitle {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    align-items: center;
}

#main {
    height: calc(100vh - 112px) !important;
    scroll-behavior: smooth;
}


/*頁碼*/
.k-pager-nav, .k-pager-numbers .k-link {
    border-radius: var(--borderR);
    width: 42px;
    height: 42px;
}

.k-pager-nav {
    color: var(--blackText);
}

.k-pager-wrap .k-link,
.k-pager-wrap .k-link.k-state-disabled {
    border-color: white;
}

/*小尺寸頁碼*/
.k-pager-sm .k-dropdown {
    background: var(--inputBg);
    border: unset;
    border-radius: var(--borderR);
}

.k-pager-sm .k-pager-numbers-wrap select.k-dropdown {
    height: var(--inputHeight);
    border: var(--inputBg) 1px solid;
}

    .k-pager-sm .k-pager-numbers-wrap select.k-dropdown:hover,
    .k-pager-sm .k-pager-numbers-wrap select.k-dropdown:focus {
        background: var(--inputHoverBg);
        border-color: var(--mainColor);
    }

.k-pager-sm .k-dropdown option {
    background: white;
}


/*公告欄*/
.k-toolbar.k-editor-toolbar .k-dropdown-wrap.k-state-default .k-input {
    background: unset;
}

.k-state-default > .k-select, *[class*="picker"] .k-state-disabled .k-select, .k-dropdown-wrap .k-select {
    border: none;
    line-height: var(--inputHeight);
}

.k-grid tr:hover, .k-grid td.k-state-selected:hover {
    /*20220908 改為淺色系*/
    /*background-color: var(--colorText);*/
    background-color: var(--lightColor);
}

.k-grid tbody a.k-button {
    min-width: 50px;
}

.k-toolbar .btn + .k-grid-search {
    margin-left: var(--marginX);
}

/*無障礙修正*/
.boardContent p.h1 {
    font-size: 1.75rem;
    font-weight: bold;
}

/*button*/
.k-toolbar .k-button-icontext {
    padding-right: var(--btnWPadding);
}

/*password*/
.password label + .k-textbox {
    width: var(--numericW);
    margin-right: 8px;
}


.password .nac-passwordMsgText {
    display: block;
    text-align: right;
    color: var(--grayText);
}

.form-inline[class*="col-"] {
    width: 100%;
    margin: 0 0px var(--marginY) 0px;
}


.k-floating-label-container, .k-textbox-container {
    width: 100%;
}

.GridScroll {
    width: 100%;
    overflow-x: auto;
}



/*fix wac*/
.k-colorpicker .k-picker-wrap {
    line-height: 1.65em;
}

.k-grid-edit-row > td > .k-widget.k-numerictextbox {
    width: calc(100% - 34px);
}
/*row form-inline*/
.windowContent .form-inline + .row {
    width: 100%;
    margin: 0 10px var(--marginY) 10px;
}

.windowContent .row .form-inline + .row {
    margin: 0 0px var(--marginY) 0px;
    padding: 0 15px;
}


.windowContent .form-inline + .row .form-inline[class*="col-"] {
    padding: 0;
}

.row > .form-inline.w-auto, .row + .form-inline.btnGroup, .row + .form-inline.btnGroup + .form-inline {
    padding-right: 15px;
    padding-left: 15px;
}

    .row + .form-inline.btnGroup, .row + .form-inline.btnGroup + .form-inline {
        margin: 0 -15px var(--marginY) -15px;
    }

@media (max-width: 891px),(min-width: 1024px) and (max-width: 1139px) {
    .windowContent .form-inline + .row {
        margin: var(--marginY) 0 0 0;
    }
}



/*fix-grid*/
.fix-grid {
    width: 100%;
}

    .fix-grid .btn {
        box-sizing: border-box;
        margin: 4px;
    }

.k-grid tbody td:first-child {
    text-align: center;
}

.k-grid tbody .k-grouping-row td:first-child {
    text-align: left;
}

.k-grid tr:hover .k-state-focused {
    box-shadow: unset;
}


@media(max-width:767px) {


    .fix-grid .k-grid table {
        overflow-x: auto;
        display: inline-block;
    }
}

/*input小圖示*/
.btn-export .k-i-excel, .k-toolbar .k-input-icon {
    display: none;
}

.k-picker-wrap .k-select {
    top: -2px;
}


.k-master-row.k-state-selected {
    /*20220908 改為淺色系*/
    /*background-color:var(--colorText);*/
    color: #000000;
    background-color: var(--lightColor);
}


/*topFunction*/
.typeSwitch {
    margin: 0 8px var(--marginY) 0;
}

.topfunction, .search, .typeSwitch, .search img {
    display: inline-block;
}

    .typeSwitch, .search img {
        background: #E6E6E6;
        border-radius: 4px;
        padding: 4px;
    }

        .typeSwitch > div {
            background-color: unset;
            padding: 0px 6px;
            display: inline-block;
            vertical-align: middle;
            cursor: pointer;
        }

            .typeSwitch > div + div:before {
                content: '';
                width: 2px;
                height: 20px;
                border-radius: 50%;
                background: #B1B1B1;
                display: inline-block;
                top: 29px;
                position: absolute;
                left: 71px;
            }


            .typeSwitch > div:hover .b, .typeSwitch > div.act .b {
                fill: var(--mainColor);
            }

    .search img {
        vertical-align: middle;
    }



/*card*/
.itemsTitle > div {
    display: inline-block;
}

.itemsTitle {
    display: flex;
    justify-content: space-between;
    color: white;
    padding: 2px var(--marginX);
    border-radius: var(--borderR) var(--borderR) 0 0;
    align-items: center;
    background: var(--grayText);
}

.empty .itemsTitle {
    background: var(--grayText);
}

.man .itemsTitle {
    background: var(--manColor);
}

.woman .itemsTitle {
    background: var(--womanColor);
}

/*風險評估*/
.itemRightContent > div {
    position: relative;
}

.evaluate {
    position: absolute;
    font-size: 10px;
    right: 0;
    top: 3px;
}

    .evaluate > div {
        display: inline-block;
        background: #B1B1B1;
        width: 20px;
        height: 20px;
        color: white;
        border-radius: 50%;
        border: 1px solid white;
        position: relative;
        margin-left: 2px;
        text-align: center;
        vertical-align: middle;
    }

        .evaluate > div:after {
            content: '';
            width: 22px;
            height: 22px;
            border: 1px #B1B1B1 solid;
            border-radius: 50%;
            position: absolute;
            top: -2px;
            left: -2px;
        }

    .evaluate .degree_A {
        background: var(--manColor);
    }

        .evaluate .degree_A:after {
            border-color: var(--manColor);
        }

    .evaluate .degree_B {
        background: var(--yellowColor);
    }

        .evaluate .degree_B:after {
            border-color: var(--yellowColor);
        }

    .evaluate .degree_Yes, .evaluate .degree_C {
        background: var(--womanColor);
    }

        .evaluate .degree_Yes:after, .evaluate .degree_C:after {
            border-color: var(--womanColor);
        }

.itemCard {
    width: 100%;
}

    .itemCard > .row {
        align-self: stretch;
    }

    .itemCard .photo {
        display: inline-block;
        width: 80px;
        height: 80px;
        background-repeat: no-repeat;
        background-size: cover;
    }


.itemRightContent {
    display: inline-block;
    width: calc(100% - 100px);
    margin-left: var(--marginX);
    vertical-align: top;
    color: var(--grayText);
}

.roomNum {
    font-size: 1.3rem;
}

.itemName {
    font-size: 1.25rem;
    font-weight: bold;
}

.itemContent {
    padding: 8px var(--marginX);
    background: white;
    border-radius: 0 0 var(--borderR) var(--borderR);
}

.itemCard .col > div {
    background: white;
    box-shadow: 0 0 6px 3px #0000001c;
    border-radius: var(--borderR);
    height: 100%;
}

.itemCard .col {
    padding-bottom: 15px;
}



.state {
    color: var(--mainColor);
}

    .state.leave {
        color: var(--redColor);
    }

.detail {
    background: var(--inputBg);
    padding: 4px 8px;
    font-size: 0.85rem;
    height: var(--inputHeight);
    margin: 2px 0;
}

.itemLink {
    padding: 8px 0 4px 0;
}

    .itemLink div {
        display: inline-block;
        width: 24px;
        height: 24px;
        text-align: center;
        background: #CCCCCC;
        color: white;
        vertical-align: middle;
        border-radius: 50%;
        position: relative;
        margin: 2px;
    }

        .itemLink div::after {
            content: '';
            width: 28px;
            height: 28px;
            border: 1px #B1B1B1 solid;
            border-radius: 50%;
            position: absolute;
            top: -2px;
            left: -2px;
        }

        .itemLink div:hover {
            text-decoration: none;
            background: var(--mainChromaColor);
        }

            .itemLink div:hover::after {
                border-color: var(--mainChromaColor);
            }

.empty .state {
    display: block;
    color: var(--lightGrayText);
    font-size: 2rem;
    vertical-align: middle;
    font-weight: bold;
}

.empty .photo {
    display: none;
}

.empty .itemRightContent {
    height: 86px;
    width: calc(100% - var(--marginX));
}

.empty .detail, .empty .itemLink {
    visibility: hidden;
}

.itemRightContent > div:last-child {
    color: var(--importantColor);
}



.task span {
    display: inline-block;
    padding: 2px 4px;
    background: var(--lightGrayText);
    border-radius: 4px;
    color: white;
    margin-bottom: 4px;
    font-size: 0.85rem;
}

    .task span.needDo {
        background: var(--redColor);
    }

.btncontainer {
    text-align: right;
}

.empty .task span {
    visibility: hidden;
}

.item .btncontainer {
    margin: 2px 0;
    min-height: var(--inputHeight);
}

.btncontainer .btn {
    margin-left: 4px;
}

/*表格*/
.itemTable {
    padding: 12px;
    background: white;
    box-shadow: 0 0 6px 3px rgb(0 0 0 / 11%);
    border-radius: var(--borderR);
    overflow: auto;
    margin-bottom: 50px;
}

    .itemTable .content {
        height: 550px;
        overflow: auto;
        width: 100%;
    }

    .itemTable .k-grid {
        width: fit-content;
    }

/*itemCard footer*/
.itemCard.footer > div {
    display: inline-block;
    vertical-align: bottom;
    margin-bottom: 4px;
}

    .itemCard.footer > div > span:first-child {
        display: inline-block;
        width: 20px;
        height: 20px;
        text-align: center;
        background: white;
        color: var(--colorText);
        border-radius: 50%;
        position: relative;
        line-height: 20px;
        font-weight: bold;
        margin-right: 6px;
        font-size: 14px;
    }

        .itemCard.footer > div > span:first-child:after {
            content: '';
            width: 24px;
            height: 24px;
            border: 1px white solid;
            border-radius: 50%;
            position: absolute;
            top: -2px;
            left: -2px;
            margin-bottom: 8px;
        }

    .itemCard.footer > div > span:nth-child(2) {
        vertical-align: bottom;
        margin-right: 8px;
    }

@media screen and (max-width: 1023px) {
    .itemCard.footer > div > span {
        font-size: 14px;
    }

        .itemCard.footer > div > span:first-child {
            width: 12px;
            font-size: 10px;
            height: 12px;
            line-height: 12px;
            vertical-align: middle;
        }

            .itemCard.footer > div > span:first-child:after {
                width: 16px;
                height: 16px;
            }
}

/*footer*/
.footer {
    background: var(--colorText);
    color: white;
    padding: 8px 20px;
}

.footer, .content.active .footer {
    position: fixed;
    vertical-align: bottom;
    padding: 8px 20px 4px 20px;
    width: 100%;
    left: 0px;
    bottom: 0;
}

@media (min-width: 768px) {
    .footer {
        left: 280px;
        width: calc(100% - 280px);
    }
}

/*資訊卡*/
/*personalInofo*/
.personalInofo, .infoCard {
    background: white;
    border-radius: var(--borderR);
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
    text-align: center;
}

    .personalInofo .photo {
        display: inline-block;
        width: 100px;
        height: 100px;
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: 50%;
        margin: 20px 0 4px 0;
    }


.personalName {
    font-weight: bold;
    font-size: 1.25rem;
}

.roomState > span:first-child {
    color: var(--grayText);
}

.roomState > span:nth-child(2) {
    color: #679B5B;
}

.info {
    margin-top: 16px;
    text-align: left;
}

    .info > div:nth-child(odd) {
        background: #E1EFCF;
    }

    .info > div {
        padding: 4px 20px;
    }

        .info > div > div:first-child {
            width: 45%;
            font-weight: bold;
        }

        .info > div > div:nth-child(2) {
            width: 50%;
        }

        .info > div > div {
            display: inline-block;
        }

.moreFunction {
    right: var(--marginX);
    font-size: 1.25rem;
    position: absolute;
    top: var(--marginY);
    cursor: pointer;
    display: inline-block;
}

    .moreFunction .goto::after, .moreFunction .add::after {
        padding: 8px 4px;
        font-weight: 900;
        font-weight: 900;
    }

    .moreFunction .goto {
        transform: rotate(270deg);
    }

    .moreFunction .goto, .moreFunction .add {
        display: inline-block;
    }

        .moreFunction .add::after {
            font-family: WebComponentsIcons;
            content: "\e11e";
        }


        .moreFunction .goto::after {
            font-family: 'icomoon' !important;
            content: "\e900";
        }


/*一般資訊卡*/
.infoCard {
    height: 100%;
    padding: 8px 12px;
    text-align: left;
    font-weight: bold;
}

    .infoCard .title {
        font-weight: bold;
        margin-bottom: 4px;
    }

    .infoCard .content {
        height: 300px;
        width: 100%;
        background: #F5F7FB;
        padding: var(--marginY) var(--marginX);
    }

        .infoCard .content .k-grid {
            width: fit-content;
        }

    .infoCard.main .content {
        height: 340px;
    }

.tableContent {
    width: 100%;
    overflow: auto;
    height: 100%;
}


.infoCard .content:before {
    content: '';
    display: inline-block;
    background: url(../../Images/emptyData.svg) no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0;
    background-position: center;
}


/*baseCard*/

[class*="baseCard"] {
    box-shadow: 0 3px 5px #cacaca;
    border-radius: 8px;
    margin-bottom: 20px;
    width: 100%;
}

    [class*="baseCard"] > .title {
        margin: 0;
        background: #c2e2e0;
        padding: 8px;
        border-radius: 8px 8px 0 0;
        font-size: 1.25rem;
        font-weight: bold;
    }

    [class*="baseCard"] > .content {
        padding: 10px 8px 20px 8px;
        background: white;
        border-radius: 0 0 8px 8px;
        width: 100%;
    }



    [class*="baseCard"] > .title .btn:not(:last-of-type) {
        margin-right: 4px;
    }

.baseCard2 > .title {
    background: #c2e2c9;
}

.baseCard3 > .title {
    background: #d6e2c2;
}

.baseCard4 > .title {
    background: #ebe5d0;
}

.baseCard5 > .title {
    background: #f1e5dc;
}

.baseCard6 > .title {
    background: #f1dcdc;
}

.baseCard7 > .title {
    background: #f3d5df;
}

.baseCard8 > .title {
    background: #f0dcf1;
}

.baseCard9 > .title {
    background: #e1dbfb;
}

.baseCard10 > .title {
    background: #d2e4f9;
}



/*新增xxl樣式(1680以上*/
.col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12, .col-xxl-auto {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

.k-list-filter > .k-textbox {
    background: var(--inputBg);
    box-sizing: border-box;
    color: var(--colorText);
    height: var(--inputHeight);
    margin-bottom: 4px;
    border: 1px solid var(--lightColorText);
}

    .k-list-filter > .k-textbox + .k-icon {
        color: var(--colorText);
    }

@media (min-width: 1680px) {
    .col-xxl {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%;
    }

    .row-cols-xxl-1 > * {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .row-cols-xxl-2 > * {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .row-cols-xxl-3 > * {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .row-cols-xxl-4 > * {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .row-cols-xxl-5 > * {
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }

    .row-cols-xxl-6 > * {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    .col-xxl-auto {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }

    .col-xxl-1 {
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }

    .col-xxl-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    .col-xxl-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-xxl-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .col-xxl-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }

    .col-xxl-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-xxl-7 {
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }

    .col-xxl-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }

    .col-xxl-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }

    .col-xxl-10 {
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }

    .col-xxl-11 {
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }

    .col-xxl-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .order-xxl-first {
        -ms-flex-order: -1;
        order: -1;
    }

    .order-xxl-last {
        -ms-flex-order: 13;
        order: 13;
    }

    .order-xxl-0 {
        -ms-flex-order: 0;
        order: 0;
    }

    .order-xxl-1 {
        -ms-flex-order: 1;
        order: 1;
    }

    .order-xxl-2 {
        -ms-flex-order: 2;
        order: 2;
    }

    .order-xxl-3 {
        -ms-flex-order: 3;
        order: 3;
    }

    .order-xxl-4 {
        -ms-flex-order: 4;
        order: 4;
    }

    .order-xxl-5 {
        -ms-flex-order: 5;
        order: 5;
    }

    .order-xxl-6 {
        -ms-flex-order: 6;
        order: 6;
    }

    .order-xxl-7 {
        -ms-flex-order: 7;
        order: 7;
    }

    .order-xxl-8 {
        -ms-flex-order: 8;
        order: 8;
    }

    .order-xxl-9 {
        -ms-flex-order: 9;
        order: 9;
    }

    .order-xxl-10 {
        -ms-flex-order: 10;
        order: 10;
    }

    .order-xxl-11 {
        -ms-flex-order: 11;
        order: 11;
    }

    .order-xxl-12 {
        -ms-flex-order: 12;
        order: 12;
    }

    .offset-xxl-0 {
        margin-left: 0;
    }

    .offset-xxl-1 {
        margin-left: 8.333333%;
    }

    .offset-xxl-2 {
        margin-left: 16.666667%;
    }

    .offset-xxl-3 {
        margin-left: 25%;
    }

    .offset-xxl-4 {
        margin-left: 33.333333%;
    }

    .offset-xxl-5 {
        margin-left: 41.666667%;
    }

    .offset-xxl-6 {
        margin-left: 50%;
    }

    .offset-xxl-7 {
        margin-left: 58.333333%;
    }

    .offset-xxl-8 {
        margin-left: 66.666667%;
    }

    .offset-xxl-9 {
        margin-left: 75%;
    }

    .offset-xxl-10 {
        margin-left: 83.333333%;
    }

    .offset-xxl-11 {
        margin-left: 91.666667%;
    }

    .xxl-100 {
        max-width: 100% !important;
    }
}

body.large-font {
    font-size: 1.25rem !important;
}

    body.large-font label,
    body.large-font p,
    body.large-font a,
    body.large-font span,
    body.large-font button,
    body.large-font input,
    body.large-font .sidebar-menu p,
    body.large-font .name p,
    body.large-font .infoTitle,
    body.large-font .infoContent,
    body.large-font .login-bullet button,
    body.large-font .k-header,
    body.large-font .k-grid-header .k-header > .k-link,
    body.large-font .k-header,
    body.large-font .k-treemap-title {
        font-size: 1.25rem;
        /* font-size: 1.125rem; */
        /* font-size: 1rem; */
    }

body.middle-font {
    font-size: 1.125rem !important;
}

    body.middle-font label,
    body.middle-font p,
    body.middle-font a,
    body.middle-font span,
    body.middle-font button,
    body.middle-font input,
    body.middle-font .sidebar-menu p,
    body.middle-font .name p,
    body.middle-font .infoTitle,
    body.middle-font .infoContent,
    body.middle-font .login-bullet button,
    body.middle-font .k-header,
    body.middle-font .k-grid-header .k-header > .k-link,
    body.middle-font .k-header,
    body.middle-font .k-treemap-title {
        font-size: 1.125rem;
    }

body.small-font {
    font-size: 1rem !important;
}

    body.small-font label,
    body.small-font p,
    body.small-font a,
    body.small-font span,
    body.small-font button,
    body.small-font input,
    body.small-font .sidebar-menu p,
    body.small-font .name p,
    body.small-font .infoTitle,
    body.small-font .infoContent,
    body.small-font .login-bullet button,
    body.small-font .k-header,
    body.small-font .k-grid-header .k-header > .k-link,
    body.small-font .k-header,
    body.small-font .k-treemap-title {
        font-size: 1rem;
    }

    body.small-font .task span {
        font-size: 0.7rem;
    }