@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

:root {
	font-size: 12px;
    /*
    13 => 1.1rem
    14 => 1.16rem
    15 => 1.25rem
    16 => 1.33rem
    18 => 1.5rem
    20 => 1.66rem
    22 => 1.83rem
    24 => 2rem
    */

    --focusBackgroundColor: #9fd2ef;

    --focusOutLine: 1px dashed #ff8484;
}

html, body, div, object, iframe, form, table, input, select, textarea { margin: 0; padding: 0; font-size: 100%; border: 0; }
* { font-family: 'Noto Sans','Noto Sans TC', 'Microsoft JhengHei', '微軟正黑體', sans-serif; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
div		{ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
body	{ position: relative; margin: 0px; width: 100%; height: 100%; color: #333333; background-color: transparent; }
a		{ text-decoration: none; color: #066bbd; }
a:hover	{ text-decoration: none; }

input:-webkit-autofill	{ -webkit-box-shadow: 0 0 0px 1000px white inset; -webkit-text-fill-color: #000000; }
button { height: 42px; outline: 0px; background-color: transparent; border: none; border-radius: 3px; padding: 2px 8px; vertical-align: middle; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }
button span { font-size: 1.1rem; vertical-align: middle; line-height: 30px; color: #555555; }
input, button, select, textarea { outline: 0px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

input[type="password"] { font-family: arial; }

input[type="text"], 
input[type="password"], 
input[type="url"], 
input[type="number"], 
input[type="email"], 
textarea, 
div.InputText { border-radius: 3px; padding: 8px; width: 100%; border: solid 1px #c7c7c7; font-size: 1.33rem; }

div.InputText { min-height: 42px; background-color: #f9f9f9; }

input[type="text"], 
input[type="password"], 
input[type="url"], 
input[type="number"], 
input[type="email"] { height: 42px; }
input[type="file"] { display: none; }
input:disabled, select:disabled, textarea:disabled { background-color: rgb( 245, 245, 245 ); }
textarea { height: 80px; }
select { background-color: #FFFFFF; border-radius: 3px; padding: 5px; width: 100%; height: 42px; border: solid 1px #c7c7c7; font-size: 1.33rem; }
option {  }

a:focus { outline: var( --focusOutLine ); box-shadow: 2px 2px 2px 0px rgba( 0, 0, 0, .08 ) inset; }

input[type="text"]:focus, 
input[type="password"]:focus, 
input[type="url"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="checkbox"]:focus + label,
input[type="radio"]:focus + label,
textarea:focus, select:focus, 
label:focus, 
.Focus:focus { outline: var( --focusOutLine ); box-shadow: 2px 2px 2px 0px rgba( 0, 0, 0, .08 ) inset; }

div:focus,
button:focus,
input[type="button"]:focus,
input[type="submit"]:focus,
input[type="reset"]:focus { outline: var( --focusOutLine ); color: #555555; box-shadow: 2px 2px 2px 0px rgba( 0, 0, 0, .08 ) inset; }

input[type="text"].NoSytle, 
input[type="password"].NoSytle, 
input[type="url"].NoSytle, 
input[type="number"].NoSytle, 
input[type="email"].NoSytle { outline: none; }

input[type="text"].NoSytle:focus, 
input[type="password"].NoSytle:focus, 
input[type="url"].NoSytle:focus,
input[type="number"].NoSytle:focus, 
input[type="email"].NoSytle:focus, 
textarea.NoSytle:focus, 
select.NoSytle:focus,
.Focus.NoSytle:focus { outline: none; background: transparent; box-shadow: none; }

ul { margin: 0px; padding: 0px; list-style-type: none; }

/* 捲軸 Firefox或IE / Edge 不支持自定義滾動條。 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f8f8f8; border-left: solid 1px #d9d9d9; }
::-webkit-scrollbar-track:hover { background: #f2f2f2; border-left: solid 1px #d9d9d9; }
::-webkit-scrollbar-thumb { background: #cccccc; border-left: solid 1px #b7b7b7; }
::-webkit-scrollbar-thumb:hover { background: #919191; border-left: solid 1px #656565; }
::-webkit-scrollbar-corner { background: #f8f8f8; }

span.material-symbols-outlined { font-size: 2rem; vertical-align: middle; color: #555555; line-height: 0px; }
span.material-symbols-outlined.Hover {  }
span.material-symbols-outlined.Hover:hover { color: #0b5f67; cursor: pointer; }

#ui-datepicker-div { width: 100%; }
#ui-datepicker-div select { width: 44%; margin: 0px 1%; height: 25px; padding: 3px; }


/*系統預設*/
button.SystemBtn { display: flex; align-items: center; height: 34px; transition: all .1s; background-color: #DDDDDD; color: #777777; }
button.SystemBtn:hover { background-color: var( --focusBackgroundColor ); }
button.SystemBtn span.material-symbols-outlined { margin-right: 5px; }

button.SystemBtn span.BtnTitle {  }

button.SystemStyle { display: flex; align-items: center; justify-content: center; transition: all .1s; }

.CheckBoxDiv { display: flex; flex-wrap: wrap; }
.CheckBoxDiv .Checkbox { position: relative; margin-right: 8px; margin-bottom: 8px; }
.CheckBoxDiv .Checkbox input[type="checkbox"] { position: absolute; left: -2000px; width: 0px; height: 0px; }
.CheckBoxDiv .Checkbox input[type="checkbox"]:checked + label { background-color: var( --focusBackgroundColor ); }
.CheckBoxDiv .Checkbox label { display: flex; align-items: center; padding: 5px 7px 5px 5px; border-radius: 3px; color: #333333; }
.CheckBoxDiv .Checkbox label:hover { background-color: #EEEEEE; cursor: pointer; }
.CheckBoxDiv .Checkbox label span.material-symbols-outlined { font-size: 1.83rem; }
.CheckBoxDiv .Checkbox label span.material-symbols-outlined::after { content: 'check_box_outline_blank'; }
.CheckBoxDiv .Checkbox input[type="checkbox"]:checked + label span.material-symbols-outlined::after { content: 'check_box'; }
.CheckBoxDiv .Checkbox label span.ShowTitle { padding-left: 3px; vertical-align: middle; font-size: 1.16rem; }

.RadioDiv { display: flex; flex-wrap: wrap; }
.RadioDiv .Radio { position: relative; margin-right: 8px; margin-bottom: 8px; }
.RadioDiv .Radio input[type="radio"] { position: absolute; left: -2000px; width: 0px; height: 0px; }
.RadioDiv .Radio input[type="radio"]:checked + label { background-color: var( --focusBackgroundColor ); }
.RadioDiv .Radio label { display: flex; align-items: center; padding: 5px 7px 5px 5px; border-radius: 3px; color: #333333; }
.RadioDiv .Radio label:hover { background-color: #EEEEEE; cursor: pointer; }
.RadioDiv .Radio label span.material-symbols-outlined { font-size: 1.83rem; }
.RadioDiv .Radio label span.material-symbols-outlined::after { content: 'radio_button_unchecked'; }
.RadioDiv .Radio input[type="radio"]:checked + label span.material-symbols-outlined::after { content: 'radio_button_checked'; }
.RadioDiv .Radio label span.ShowTitle { padding-left: 3px; vertical-align: middle; font-size: 1.16rem; }



div.SystemSelect { border-radius: 3px; padding: 5px; width: 100%; height: 38px; border: solid 1px #AAAAAA; font-size: 1.16rem; background-color: #FFFFFF; }

/*LightBox*/
.SysOverlayBody { overflow: hidden; }
.SysOverlay { display: none; position: fixed; z-index: 9999; top: 0px; left: 0px; width: 100%; overflow: hidden; background-color: rgba( 0, 0, 0, 0.85 ); }
.SysOverlay.ViewFile { z-index: 10001; }
.SysOverlay.Open { display: flex; justify-content: center; align-items: center; }
.SysLightboxMain { display: none; position: fixed; z-index: 10000; top: 50%; left: 50%; align-items: center; justify-content: center; }
.SysLightboxMain.ViewFile { z-index: 10002; }
.SysLightboxMain.Open { display: flex; }
.SysLightbox { display: block; position: fixed; max-width: calc( 100% - 40px ); height: 100%; max-height: calc( 100% - 40px ); overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8); border-radius: 5px; }
.SysLightbox iframe { width: 100%; height: 100%; border: none; background-color: #FFFFFF }

.SysLightbox.ViewFileLightBox { background-color: #FFFFFF; }
.SysLightbox.ViewFileLightBox .ShowFileDiv { padding: 18px 10px; width: 100%; text-align: center; }
.SysLightbox.ViewFileLightBox .ShowFileDiv .Icon {  }
.SysLightbox.ViewFileLightBox .ShowFileDiv .Title { margin: 17px 0px; font-size: 1.5rem; line-height: 25px; }

.ShowFileTitleDiv { display: flex; position: fixed; z-index: 10; top: 0px; left: 0px; width: 100%; height: 50px; }
.ShowFileTitleDiv:after { float: none; clear: both; content: ''; display: block; height: 0; overflow: hidden; }
.ShowFileTitleDiv .ShowFileTitleLeft { flex-grow: 1; flex-basis: 0px; padding-left: 14px; font-size: 1.25rem; color: #FFFFFF; line-height: 50px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ShowFileTitleDiv .ShowFileTitleRight { display: flex; align-items: center; padding: 5px 14px 5px 0px; width: 101px; }
.ShowFileTitleDiv .ShowFileTitleRight:after { float: none; clear: both; content: ''; display: block; height: 0; overflow: hidden; }
.ShowFileTitleDiv .ShowFileTitleRight .ShowFileTitleBtn { float: left; margin-left: 8px; }
.ShowFileTitleDiv .ShowFileTitleRight .ShowFileTitleBtn i { color: #FFFFFF; }
.ShowFileTitleDiv .ShowFileTitleRight .ShowFileTitleBtn:hover { background-color: #5a5a5a; }

.ShowFilePrevBtn { position: fixed; z-index: 10; top: calc( 50% - 20px ); left: 20px; width: 40px; height: 40px; background-color: rgba( 0, 0, 0, 0.8 ); border-radius: 50%; }
button.SystemStyle[s="circle"].Circle40.ShowFilePrevBtn:hover { background-color: #5a5a5a; }
.ShowFilePrevBtn i { color: #FFFFFF; }
.ShowFileNextBtn { position: fixed; z-index: 10; top: calc( 50% - 20px ); right: 20px; width: 40px; height: 40px; background-color: rgba( 0, 0, 0, 0.8 ); border-radius: 50%; }
button.SystemStyle[s="circle"].Circle40.ShowFileNextBtn:hover { background-color: #5a5a5a; }
.ShowFileNextBtn i { color: #FFFFFF; }

.sys_lightbox_view    { display: none; position: fixed; top: 50%; left: 50%; }

/*FloatDiv*/
.Sys_GcdFloatDiv { position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; z-index: 10; overflow-y: auto; overflow-x: hidden; width: 200px; height: 200px; background-color: #FFF; border-radius: 3px; }

.LoadingMain { display: flex; margin: 0 auto; padding: 10px 0px; align-items: center; justify-content: center; line-height: 0px; }
.LoadingMain img.S1 { width: 40px; }
.LoadingMain img.S2 { width: 40px; }

@media screen and (max-width: 1024px) {

input[type="text"], 
input[type="password"], 
input[type="url"], 
input[type="number"], 
input[type="email"], 
textarea { border-radius: 3px; padding: 8px; width: 100%; border: solid 1px #c7c7c7; font-size: 1.33rem; }

select { font-size: 1.33rem; }

}


@media screen and (max-width: 786px) {

::-webkit-scrollbar { display: none; }

button:has(span.material-symbols-outlined) { padding-left: 5px; padding-right: 5px; }
button span.BtnTitle { display: none; }
button span.BtnTitle.Open { display: inline; }
button.SystemBtn span.material-symbols-outlined { margin-right: 0px; }

.ShowFileTitleDiv .ShowFileTitleLeft { padding-left: 14px; width: calc( 100% - 110px ); }
.ShowFileTitleDiv .ShowFileTitleRight { padding: 5px 5px 5px 0px; width: 101px; }

.Sys_GcdFloatDiv { position: fixed; }

.SysLightbox { max-width: calc( 100% - 15px ); height: 100%; max-height: calc( 100% - 15px ); }
}