@charset "utf-8";

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    /*font-family:'Poppins',sans-serif;*/
    /*font-family: 'Noto Sans TC','sans-serif','微軟正黑體','Microsoft JhengHei','Helvetica';*/
}

:root{
    --weightfont: 'Noto Sans TC','sans-serif','微軟正黑體','Microsoft JhengHei','Helvetica';
    --englishfont: 'Noto Serif TC', serif,'微軟正黑體','Microsoft JhengHei','Helvetica';
    --warpperfooter: 250px;
    --footerheight: 25px;
    /*--topBlock:135px;*/
    --topBlock:calc(var(--tipset) * 1 + var(--tipset) * 0.95);
    
    --writeBoxpadding: 30px;
    --offset: 1em;
    --diameter: 2em;
    --tipset: 3em;
    --BlockPadding:calc(8% - var(--tipset) * 1);
    --CoverPadding:calc(10% - var(--tipset)* 1);
}
html, body, form {
    min-width: auto;
    min-height: 100%;
    /*height: 100%;*/
    margin: 0;
    padding: 0;
}
html{
    font-size: 125%;/*20 ÷ 16 × 100% = 125%*/
    scroll-behavior: smooth;
}
body {
    font-family: 'Noto Sans TC','sans-serif','微軟正黑體','Microsoft JhengHei','Helvetica';
    font-size: 1em;
    line-height: 1.2;
    margin: 0;
    min-width: 1050px;
}
a{
	cursor:pointer;
}
a, a:hover, a:link, a:visited, a:active {
	text-decoration:none;
}
p{
    font-size: 1rem;
    line-height: 1.2;
	color:#000;
}
img{
	border:none;
}
ul,li{
	list-style:none;
	margin:0;
	padding:0;
}
h1, h2, h3{
    font-weight: bolder;
}
.container {
    min-height: 100%;
    max-width: 90%;
}
@media screen and (max-width: 1650px){
    html{
        font-size: 120%;
    }    
}
@media screen and (max-width: 1400px){
    html{
        font-size: 110%;
    }    
}
@media screen and (max-width: 1200px){
    html{
        font-size: 105%;
    }    
}
@media screen and (max-width: 1050px){
    html{
        font-size: 100%;
    }    
} 


.TopBlock{}

/*--3球球--*/
.menuBallBlock{
    padding-top: 10px;
}
.menuBallClass{
    display: inline-flex;
    padding-right: 15px;
    padding-left: 15px;
}    
.menuBall{
    background-color: #ffffff;
    text-align: center;
    border-radius: 50px;
    width: 36px;
    height: 36px;
    margin-right: 15px;
    border: 1px solid #C69C6D;
    color: #8C6239;
    font-size: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.menuBall:last-child{
    margin-right: 0;
}
.menuBall img{
    vertical-align: middle;
    padding: 2px;
    text-align: center;
}
.menuBall:hover{
    background-color: #8C6239;
    color: #ffffff;
}
.menuUserloginfo{
    color: #8C6239;
    font-size: 1rem;
}
/*--3球球--*/


/*----內頁通用樣式-----*/

.TopTitleBlock{
    border-bottom: 1px solid #A7A29E;
    padding: 0 2.5rem 0.8rem 2.5rem;
    padding-left: var(--BlockPadding);
    padding-right: var(--BlockPadding);
}
.PageTitle {
    font-size: 1.625rem;
    line-height: 1.1;
    font-weight: bold;
    color: #352415;
    display: inline-flex;
    align-items: flex-end;
    padding-top: 15px;
    padding-bottom: 5px;
}
.ColorTitleTags{
    width: 60px;
    height: 30px;
    line-height: 1.2;
    margin-right: 10px;
    font-size: 1.1rem;/*18px*/
    font-weight: bold;
    background-color: #5247BA;
    border-radius: 5px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
}

/*頁籤*/
.breadcrumb{
    font-size: 0.7rem;/*14px*/
    background: none;
    padding: 5px 0;
    padding-left: calc(var(--tipset) * 0.3);
    margin-bottom: 0;
}
.breadcrumb-item a{
    color: #adadad;
}
.breadcrumb-item a:hover{
    color: #6c757d;
}
/*頁籤*/


.infoBlock{
    font-family: '微軟正黑體','Microsoft JhengHei','Helvetica';
}
.infoLightBlock{
    padding: 1rem 2.5rem;
    padding-left: var(--BlockPadding);
    padding-right: var(--BlockPadding);
    background: #FBF6F1;
}
.infoDarkBLock{
    padding: 1rem 2.5rem 2.5rem 2.5rem;
    padding-left: var(--BlockPadding);
    padding-right: var(--BlockPadding);
    background-color: #EBE3DC;
    min-height: 500px;
}

.write_Box {
    font-size: 1rem;
    border-radius: 15px;
    background: #fff;
    margin-bottom: 35px;
    /*padding: 20px 25px;*/
    padding: 0.8rem 1.25rem;
    overflow: hidden;
}
.write_Title {
    margin-top: 10px;
    margin-bottom: 10px;
    position: relative;
}
.write_Title h5 {
    font-weight: bold;
    font-size: 1.2rem;
    color: #085F75;
    margin: 0;
    display: inline-block;
}
.write_textBox{
    padding: 20px 0;
    /*padding-top: calc(var(--writeBoxpadding));
    padding-bottom: calc(var(--writeBoxpadding));*/
    margin: 0 20px;
    margin-left: calc(var(--writeBoxpadding));
    margin-right: calc(var(--writeBoxpadding));
    border-top: 1px solid #e0e0e0;
}
.write_Box hr {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}
.write_BoxGaryBg{
    background-color: #F2F2F2;
    padding: 15px 20px;
    border-top: none;
}


.Coffee_Title_S {
    margin-top: 10px;
    margin-bottom: 10px;
    position: relative;
    font-weight: bold;
    font-size: 1rem;
    color: #633C17;
    margin: 0;
    display: inline-block;
}

.Black_Title_S{
    font-weight: bold;
    font-size: 0.9rem;
    color: #000000;
}


.CoverWrite_Block {
    padding-left: var(--CoverPadding);
    padding-right: var(--CoverPadding);
    display: flex;
}
.CoverWrite_Box {
    font-size: 1em;
    border-radius: 15px;
    background: #fff;
    margin-bottom: 15px;
    box-shadow: 0px 2px 6px #00000029;
    margin-right: 25px;
    border:none;
    overflow: hidden;
}
.CoverWrite_Box:last-child{
    margin-right: 0;
}
.CoverWrite_Box .card-header{
    font-size: 1.4rem;
    font-weight: bold;
    color: #352415;
    background-color: #CFBBFF;
}

.write_shadowBox{
    font-size: 1rem;
    border-radius: 15px;
    background: #fff;
    margin-bottom: 20px;
    padding: 0.5rem 1.2rem;
    overflow: hidden;
    box-shadow: 0px 2px 6px #00000029;
}

@media screen and (max-width: 1200px){
    .CoverWrite_Box .card-header{
        display: block !important;
    }
}
/* ~~~~~~~~~~~~~~~ 大頁籤 ~~~~~~~~~~~~~~~~ */

.tab_box{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    bottom: -0.865rem;
    position: relative;
    /*margin-top: 0.5rem;*/
    /*padding-left: calc(10% - var(--tipset) * 1);*/
}

.tab_box .tabBt{
    display:none
}
.tabBt{
    
}
.tab_block{
    
}
.BigTab{
    margin: 0 10px 0px 0;
    padding: 0.35rem 0.75rem;
    cursor: pointer;
    border-radius: 10px 10px 0 0;
    color: #6D6D6D;
    background: #FBF6F1;
    opacity: 0.8;
    font-size: 1.1rem;
}
.tab_box label{

}
.tab_content{
    order:1;
    display: none; 
    width:100%;/* 
    border-bottom: 3px solid #ddd; 
    line-height: 1.6; 
    font-size: .9em; 
    padding: 15px; 
    border: 1px solid #ddd; 
    border-radius: 5px;*/
}
.tab_box input:checked + label{
    background: #FBF6F1;
    border: 1px solid #A7A29E;
    border-bottom: none;
    font-weight: bold;
    color: #506285;
    opacity: 1;
}
.tab_box label:hover{
    background: #ebdfd2;
    color: #506285;
    opacity: 1;
}
.tab_box input:checked + label + .tab_content{
    display: initial;
}
/* ~~~~~~~~~~~~~~~ 大頁籤 ~~~~~~~~~~~~~~~~ */

/*統計表單*/
.StatisticalFormBlack{
    padding-left: calc(7% - var(--tipset)* 1);
    padding-right: calc(7% - var(--tipset)* 1);
    position: relative;
}
.StatisticalFormBlack .table{
    table-layout: fixed;
}
.StatisticalFormBlack .table-topbar, .StatisticalFormBlack .table-topbar > th, .StatisticalFormBlack .table-topbar > td{
    background-color: #D5D1AC !important;
}
.StatisticalFormBlack .table th,.StatisticalFormBlack .table td {
    padding: 0.1rem 0.2rem;
}
.StatisticalFormBlack .table-bordered th,.StatisticalFormBlack .table-bordered td {
    border: 2px solid #D5D1AC;
    vertical-align: top;
}
.StatisticalFormBlack i{
    font-size: 1.7rem;
    padding-top: 2px;
}
.StatisticalTable{
    
}
.StatisticalDataBox{
    padding-top: 2px;
    font-size: 0.725rem;
    color: #4D4C4B;    
}
.StatisticalDataBox span{
    display: block;
    margin-bottom: 2px;
}
.StatisticalDataBox span:last-child{
    margin-bottom: 0;
}
.firstmoontable{
    margin-left: calc(10% - var(--tipset)* 1.65) !important;
}
.TableOK .StatisticalDataBox{
    text-align: left;
}
.TableNO .StatisticalDataBox{
    text-align: center;
}
.FormOK{
    color: #8AC149;
}
.FormNO{
    color: #CC334A;
}
.StatisticalFormTipBox{
    display: flex;
    margin-right: 0;
    float: right;
    font-size: 0.725rem;
}
.StatisticalFormTipText{
    margin-right: 10px;
}
.StatisticalFormTipText:last-child{
    margin-right: 0px;
}
.StatisticalFormTipBox i{
    font-size: 0.8rem;
    margin-right: 1px;
}
.StatisticalFormBtBox{
    display: flex;
    margin-right: 0;
    font-size: 0.8rem;
    position: absolute;
    top: -38px;
    right: 0;
    padding-right: calc(6% - var(--tipset) * 1);
    
}
.StatisticalFormBtBox i{
    font-size: 0.8rem;
    margin-right: 1px;
}
@media screen and (max-width: 1600px){
    .firstmoontable{
        margin-left: 30px !important;
    }
}
/*統計表單*/

.CoverWrite_Box_Title{
    display: flex;
    align-items: center;
}
.CoverWrite_Box .card-footer{
    background-color: #ffffff;
}
.CoverWrite_Box .card-body{
    padding: 0.7rem 1.25rem;
}
.CoverWrite_Box .card-footer{
    padding: 0.5rem 1.25rem;
}
/*----跟隨標籤顏色頁面樣式-----*/
/*請放在home-section旁邊，便可以整頁改色*/

/*B1*//*套上PageColorB1Green*/
.PageColorB1Green .ColorTitleTags{
    background-color:#619E12;
}
.PageColorB1Green .CoverWrite_Box .card-header{
    background-color:#D4FF92;
}
.PageColorB1Green .table-topbar, .PageColorB1Green .table-topbar > th, .PageColorB1Green .table-topbar > td{
    background-color:#D4FF92;
}

/*B2*//*套上PageColorB2Blue*/
.PageColorB2Blue .ColorTitleTags{
    background-color:#4778BA;
}
.PageColorB2Blue .CoverWrite_Box .card-header{
    background-color:#ABDDFF;
}
.PageColorB2Blue .table-topbar, .PageColorB2Blue .table-topbar > th, .PageColorB2Blue .table-topbar > td{
    background-color:#ABDDFF;
}

/*B5*//*套上PageColorB5Greenblue*/
.PageColorB3Greenblue .ColorTitleTags{
    background-color:#269D84;
}
.PageColorB3Greenblue .CoverWrite_Box .card-header{
    background-color:#8BEED9;
}
.PageColorB3Greenblue .table-topbar, .PageColorB3Greenblue .table-topbar > th, .PageColorB3Greenblue .table-topbar > td{
    background-color:#8BEED9;
}

/*B6*//*套上PageColorB6Pink*/
.PageColorB4Pink .ColorTitleTags{
    background-color:#BA47B6;
}
.PageColorB4Pink .CoverWrite_Box .card-header{
    background-color:#F3C0F2;
}
.PageColorB4Pink .table-topbar, .PageColorB4Pink .table-topbar > th, .PageColorB4Pink .table-topbar > td{
    background-color:#F3C0F2;
}

/*B3*//*套上PageColorB3Orange*/
.PageColorB3Orange .ColorTitleTags{
    background-color:#D4661D;
}
.PageColorB3Orange .CoverWrite_Box .card-header{
    background-color:#FFBB8E;
}
.PageColorB3Orange .table-topbar, .PageColorB3Orange .table-topbar > th, .PageColorB3Orange .table-topbar > td{
    background-color:#FFBB8E;
}

/*B4*//*套上PageColorB4RedPink*/
.PageColorB4RedPink .ColorTitleTags{
    background-color:#DE4962;
}
.PageColorB4RedPink .CoverWrite_Box .card-header{
    background-color:#FFB7C3;
}
.PageColorB4RedPink .table-topbar, .PageColorB4RedPink .table-topbar > th, .PageColorB4RedPink .table-topbar > td{
    background-color:#FFB7C3;
}

/*----上傳----*/
.file-upload {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    
    /*width: 540px;*/
}
.file-upload label {
    flex: 1;
}
.file-upload input[type="file"] {
    display: none;
}
.file-upload .filename {
    background-color: #f1f1f1; /* 灰色背景 */
    padding: 5px;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    border-radius: 5px; /* 圆角 */
    width: 100%; /* 设置容器宽度 */
    box-sizing: border-box; /* 包括内边距在内计算宽度 */
    overflow: hidden;
    /*margin-left: 35px;
    margin-right: 35px;*/
}
.file-upload .btn{
    padding: 0.15rem 0.5rem;
}
.note {
    color: gray;
    font-size: 0.9em;
    text-align: center;
    padding-left: 20px;  
}
.upload-button {
    padding: 1px 5px;
    background-color: #18B29F;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
    margin-right:10px;
    font-size: 0.9rem;
    float: left;
}
.upload-button:hover {
    background-color: #069d8a;
}
.fit-picture {
    margin: 0;
    margin-bottom: 5px;
    float: left;
    border: none;
}
.upload {
    border-width: 1px; 
    border-style:solid ; 
    width:60px; height: 30px; 
    border-color: #004B97; 
    padding:5px; 
    text-align: right;
    background-color:#fff;
    border-radius:5px;
    margin-left: 160px;
    margin-bottom: 5px;
    margin-right: 5px;
}    
.icon_delete_Sm {
    border:1px solid #004B97; 
    background-image:url('image/04PM/icon_delete_Sm.png');
    padding:3px; 
    border-radius:5px;
    width: 22px;
    height:22px;
    position: absolute;
    left: 465px;
}
.file_grey {
    background-color:#B2B2B2 !important;
    border:none !important;
}

/*--------步驟--------*/
.StepBox{
    display: flex;
    color: #352415;
    font-size: 1rem;
    align-items: center;
}
.StepNumBox{
    width: calc(var(--offset)* 0.75 + var(--offset)* 0.75);
    height: calc(var(--offset)* 0.75 + var(--offset)* 0.75);
    border-radius: 50px;
    background-color: #fff;
    border: 2px solid #8C6239;
    color: #8C6239;
    font-size: 1.2rem;
    font-family: sans-serif;
    text-align: center;
    display: flex;
    margin: 0 5px;
    justify-content: center;
    align-items: center;
}

/*--------提醒--------*/
.STip {
    font-size: 0.7rem;
    display: inline-flex;
    font-weight: normal;
    color: #333333;
    text-align: left;
}
.STipBox{
    display: flex;
    align-items: center;
    width: 55%;
    justify-content: flex-end;
}
.STipGray {
    font-size: 0.7rem;
    font-weight: normal;
    color: #6B6B6B;
    text-align: left;
}
.STipBlue {
    color: #002775;
}
.TipPoint{
    padding-left: 1rem;
}
.TipPoint li{
    list-style: disc;
}
.STipHdisappear{
    display: block;
    /*height: 0;*/
}
@media screen and (max-width: 1440px){
    .STipBox{
        width: 45%;
    }
}
@media screen and (max-width: 1200px){
    .STipBox{
        width: 100%;
    }
}
/*-------------------------------*/
/*             表單             */
/*-------------------------------*/

.table{
    margin-top: 20px;
    margin-bottom: 10px;
    text-align: center;
    font-size: 0.9rem;
    background-color: #ffffff;
}
.table th, .table td {
    padding: 0.3rem 0.3rem;
    vertical-align:middle;
}
.table-topbar, .table-topbar > th, .table-topbar > td{
    background-color: #CFBBFF;
    line-height: 1.2;
    color: #333333;
    text-align: center;
    vertical-align: middle !important;
}
.table-topbar a{
    /*color: #fff;*/
    line-height: 1.2;
    color: #333333;
}
.table-topbar .fa{
    font-size: 1.2em;
    margin-left: 3px;
}
.form-control{
    height: calc(1.2em + 0.75rem + 2px);
    padding: 0.1rem 0.3rem;
    font-size: 0.9rem;
}
.formItem {
    display: flex;
    align-items: center;
    position: relative;
    padding-top: 5px;
    padding-bottom: 5px;
    margin: 0;
    margin-left: 50px;
    min-height: 38px;
}
.formItemXS{
    padding: 0;
}

.formItemXS .form-control{
    height: calc(1em + 0.5rem + 2px);
    padding: 0.1rem 0.3rem;
    font-size: 0.9rem;
}
.formItem:first-child {
    margin-left: 0;
}
.ItemTitle {
    font-weight: bold;
    position: absolute;
    width: 5em;
}
.formItemGroup {
    padding-top: 3px;
    padding-bottom: 3px;
    font-size: 1em;
}
.ItemContent {
    padding-left: 5em;
    margin: 0;
    width: 100%;
}
.ItemContent input {
    display: inline-block;
}
/*標題多長就套多少*/
.title2 .ItemTitle {
    width: calc(var(--diameter)*1.2 + 5px);
}
.title2 .ItemContent {
    padding-left: calc(var(--diameter)*1.2 + 5px);
}
.title3 .ItemTitle {
    width: calc(var(--diameter)*1.8 + 5px);
}
.title3 .ItemContent {
    padding-left: calc(var(--diameter)*1.8 + 5px);
}
.title4 .ItemTitle {
    /*width: 5.5em;*/
    width: calc(var(--diameter)*2.4 + 5px);
}
.title4 .ItemContent {
    /*padding-left: 5.5em;*/
    padding-left: calc(var(--diameter)*2.4 + 5px);
}
.title5 .ItemTitle {
    /*width: 6.5em;*/
    width: calc(var(--diameter)*2.9 + 5px);
}
.title5 .ItemContent {
    /*padding-left: 6.5em;*/
    padding-left: calc(var(--diameter)*2.9 + 5px);
}
.title6 .ItemTitle {
    /*width: 7.5em;*/
    width: calc(var(--diameter)*3.4 + 5px);
}
.title6 .ItemContent {
    /*padding-left: 7.5em;*/
    padding-left: calc(var(--diameter)*3.4 + 5px);
}
.title7 .ItemTitle {
    /*width: 8.5em;*/
    width: calc(var(--diameter)*3.9 + 5px);
}
.title7 .ItemContent {
    /*padding-left: 8.5em;*/
    padding-left: calc(var(--diameter)*3.9 + 5px);
}
.title8 .ItemTitle {
    /*width: 9.5em;*/
    width: calc(var(--diameter)*4.4 + 5px);
}
.title8 .ItemContent {
    /*padding-left: 9.5em;*/
    padding-left: calc(var(--diameter)*4.4 + 5px);
}
/*.title9 .ItemTitle {
    width: 10.5em;
}
.title9 .ItemContent {
    padding-left: 10.5em;
}*/
.ItemTitle {
    font-weight: bold;
    position: absolute;
    width: 5em;
}
.dataBox{
    margin-bottom: 5px;
}
.dataBox .formItem {
    padding-top: 3px;
    padding-bottom: 3px;
}
.dataBox .formItem:first-child {
    margin-left: 0;
}
.dataBox .formItem {
    margin-left: 35px;
}
.ItemContent .form-check-inline{
    margin-right: 0.5rem;
}

.FireLight{
    box-shadow: 0 0 10px 0 #ffad59;
    border: 1px solid #fdb160;
}

.Title-blue {
    color: #072441;
}
@media screen and (max-width: 1400px){
    .table th, .table td {
        padding: 0.2rem 0.2rem;
        vertical-align: middle;
    }  
}



/*--上一頁下一頁--*/
.pageAll {
    justify-content: flex-end;
    font-size: 0.9em;
    margin-bottom: 25px;
    line-height: 1.2;
}
.pageNumber {
    margin: 0;
    display: flex;
    align-items: center;
}
.NumberOfPages {
    margin: 0 5px;
    display: inline;
}
.pageNumBlue {
    color: #328DC9;
}
.pageAll select {
    width: auto;
    display: inline;
    height: auto;
    padding: 0px 10px;
}
.pageAll .form-control {
    font-size: 0.9em;
}
.aspNetDisabled {
    cursor: no-drop;
}
/*--上一頁下一頁--*/

/*----較單獨樣式-----*/
.NowBlockBox{
    /*width: calc(50% + 10px);*/
}
.NowBlock{
    border: 5px solid #D9DBB3;
    padding: 15px;
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
}
.NowBlockNum{
    font-size: 1.6rem;
    font-weight: bold;
    color: #122481;
    margin-left: 20px;
    margin-right: 20px;
}
/*----較單獨樣式-----*/


/*----上傳狀態顯示-----*/
.UploadStatusBolck{
    display: flex; 
}
.UploadStatus_Leftinfo{
    display: flex;
    align-items: center;
}
.UploadStatus_rightinfo{
    
}
.Upload_CircleStatus{
    font-size: 1.4rem;
    line-height: 1;
    font-weight: bold;
    border: 5px solid #000000;
    color: #000000;
    border-radius: 50px;
    margin-left: 20px;
    margin-right: 40px;
    width: calc(var(--diameter)* 0.75 + var(--diameter)* 0.75);
    height: calc(var(--diameter)* 0.75 + var(--diameter)* 0.75);
    display: flex;
    justify-content: center;
    align-items: center;
}
.Upload_CircleSuccess{
    border: 5px solid #58B537;
    color: #1C7B00;
}
.Upload_CircleFail{
    border: 5px solid #FC6666;
    color: #C20000;
}
.UploadStatus_TimeInfo{
    font-size: 0.8rem;
    background-color: #EEF6F8;
    padding: 10px 15px;
    border-radius: 30px;
}
.UploadStatus_rightinfo p{
    font-size: 0.8rem;
    margin-bottom: 10px;
    padding: 0;
    text-align: left;
}


/*上傳樹狀*/
.UploadStatusTree {
  --spacing: 1.5rem;
  --radius: 10px;
    /*font-size: 0.7rem;*/
    text-align: left;
    margin-bottom: 30px;
}
.UploadStatusTree li {
  display: block;
  position: relative;
  padding-left: calc(2 * var(--spacing) - var(--radius) - 2px);
}
.UploadStatusTree ul {
  margin-left: calc(var(--radius) - var(--spacing));
  padding-left: 0;
}
.UploadStatusTree ul li {
  border-left: 2px solid #ddd;
  height: calc(var(--spacing)* 0.5 + var(--spacing)* 0.5);
    padding-left: calc(1* var(--spacing) - var(--radius) - 2px);
}
.UploadStatusTree ul li:last-child {
  border-color: transparent;
}
.UploadStatusTree ul li::before {
    content: '';
    display: block;
    position: absolute;
    top: calc(var(--spacing) / -2);
    left: -2px;
    /*width: calc(var(--spacing) + 2px);*/
    height: calc(var(--spacing) + 12px);
    border: solid #ddd;
    border-width: 0 0 2px 2px;
    color: #111E4A;
}
.UploadStatusTree summary {
    display: block;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.8rem;
    height: calc(var(--spacing)* 0.6 + var(--spacing)* 0.6);
    line-height: calc(var(--spacing)* 0.5 + var(--spacing)* 0.5);
    color: #111E4A;
}
.UploadStatusTree summary::marker,
.UploadStatusTree summary::-webkit-details-marker {
  display: none;
}
.UploadStatusTree summary:focus {
  outline: none;
}
.UploadStatusTree summary:focus-visible {
  outline: 1px dotted #000;
}
.UploadStatusTree li::after,
.UploadStatusTree summary::before {
  content: '';
  display: block;
  position: absolute;
  top: calc(var(--spacing) / 2 - var(--radius));
  left: calc(var(--spacing) - var(--radius) - 1px);
  width: calc(2 * var(--radius));
  height: calc(2 * var(--radius));
  border-radius: 50%;
  background: #ddd;
}
.UploadStatusTree ul li::after{
    content: none;
}
.UploadStatusTree summary::before {
    z-index: 1;
    background: #C20000;
    content: "\f00d";
    font: normal normal normal 14px / 1 FontAwesome;
    font-size: 14px;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.UploadStatusTree details[open] > summary::before {
  background-position: calc(-2 * var(--radius)) 0;
}
.UploadStatusTextBox{
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    height: 100%;
}
.UploadStatusText_rowbox{
    margin-right: 5px;
    background-color: #404A6D;
}
.UploadStatusText_listbox{
    margin-right: 10px;
    background-color: #252D48;
}
.UploadStatusText_textbox{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.UploadStatusText_rowbox,.UploadStatusText_listbox{
    min-width: calc(var(--diameter)* 0.9 + var(--diameter)* 0.9);
    text-align: center;
    font-size: 0.7rem;
    border-radius: 5px;
    padding: 2px 5px;
    color: #ffffff;
}
/*上傳樹狀*/

/*----上傳狀態顯示-----*/


/*-------------------------------*/
/*             按鈕               */
/*-------------------------------*/
.btn {
    color: #fff;
    padding: 0.3rem 0.75rem;
}
.btn:hover {
    color: #fff;
}
.btn-sm {
    padding: 0.1rem 0.35rem;
}
.btnSText{
    font-size: 0.8rem;
}
.imgBT_Box{
    display: inline-flex;
}
.imgBT_Box .btn{
    margin-right: 5px;
}
.imgBT_Box .btn:last-child{
    margin-right: 0px;
}
.BT_orange_deep {
    background-color: #F17415;
}
    .BT_orange_deep:hover {
        background-color: #c3580d;
    }
.BT_orange {
    background-color: #f7941f;
}
    .BT_orange:hover {
        background-color: #e2810e;
    }
.BT_green {
    background-color: #7DC11B;
}
    .BT_green:hover {
        background-color: #61a105;
    }

#ContentPlaceHolder1_NextBtn:hover {
    background-color: #61a105;
}

.BT_green_deep {
    background-color: #48A709;
}
    .BT_green_deep:hover {
        background-color: #3A8F01;
    }
.BT_Greenblueblue{
    background-color: #18B29F;
}
    .BT_Greenblueblue:hover{
        background-color: #068f7e;
    }
.BT_bluegreen {
    background-color: #15BB73;
}
    .BT_bluegreen:hover {
        background-color: #088f54;
    }
.BT_blue {
    background-color: #0958A7;
}
    .BT_blue:hover {
        background-color: #0b3f89;
    }
.BT_blue_light {
    background-color: #37A4C7;
}
    .BT_blue_light:hover {
        background-color: #0088B2;
    }
.BT_blue_dark {
    background-color: #417BA8;
}
    .BT_blue_dark:hover {
        background-color: #2D6B9B;
    }
.BT_gray_light {
    background-color: #BEBEBE;
}
    .BT_gray_light:hover {
        background-color: #8c8c8c;
    }
.BT_gray {
    background-color: #C93300;
}
    .BT_gray:hover {
        background-color: #555;
    }
.BT_red {
    background-color: #C93300;
}
    .BT_red:hover {
        background-color: #972802;
    }
.BT_red_light {
    background-color: #C93300;
}
    .BT_red_light:hover {
        background-color: #af2e02;
    }
.BT_GrayText{
    background-color: #fff;
    color: #707070;
    border-color: #C5C5C5;
}
    .BT_GrayText:hover{
        background-color: #d7d7d7;
        color: #707070;
    }
.BT_purpleText{
    background-color: #fff;
    color: #18117E;
    border-color: #8C6239;
}
    .BT_purpleText:hover{
        background-color: #342c9f;
        color: #fff;
    }
.BT_coffeeText{
    background-color: #fff;
    color: #8C6239;
    border-color: #8C6239;
}
    .BT_coffeeText:hover{
        background-color: #d7d7d7;
        color: #8C6239;
    }
.BT_orangeText{
    background-color: #fff;
    color: #B17E1C;
    border-color: #CBA200;
}
    .BT_orangeText:hover{
        background-color: #d7d7d7;
        color: #8C6239;
    }
.BTorangeAdd{
    background-color: #EE7821;
    color: #ffffff;
    border-color: #3E3E3E;
    font-weight: bold;
    position: relative;
}
    .BTorangeAdd:hover{
        background-color: #CE5700;
    }
.BT_blueText{
    background-color: #fff;
    color: #6C838F;
    border-color: #6C838F;
}
    .BT_blueText:hover{
        background-color: #d7d7d7;
        color: #6C838F;
    }

.BtnolineaddShadow{
    border: none;
    box-shadow:0 3px 0px 0px #cccccc !important;
}
/*-------------------------------*/
/*            Footer             */
/*-------------------------------*/

.footer{
    position: absolute;
    height: auto;
    padding: 5px 25px;
    /*color: #8b7158;*/
    bottom: 0;
    /*color: #6D6D6D;*//*深色版*/
    color: #937d68;/*淺色版*/
    font-size: 0.7rem;
    /*background-color: #EFEFEC;*/
    width: 100%;
    /*white-space: nowrap;*/
}
.footer-text{
    /*margin-right: 15px;*/
}
.IndexPage .footer,.LoginPage .footer{
    background-color: transparent;
}



/*-------------------------------*/
/*           LoginPage           */
/*-------------------------------*/
.LoginPage {
    background-image: url("../image/pic.jpg");
    background-size: cover;
    /*background-position: center;*/
    background-position: -1.938rem;
    background-repeat: no-repeat;
}

.loginBox {
    position: fixed;
    right: 10%;
    transform: translateY(-50%);
    top: 50%;
}

.loginTipBox {
}

.loginBigLogo {
    position: absolute;
    left: 44%;
    transform: translateX(-50%);
    top: 20%;
}

.loginBigPic {
    position: fixed;
    left: 6%;
    bottom: 12%;
}

.user_card {
    height: 444px;
    width: 520px;
    margin-top: auto;
    margin-bottom: auto;
    background: #ffffff;
    position: relative;
    display: flex;
    /*justify-content: center;*/
    flex-direction: column;
    padding: 50px 20px 10px 20px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-radius: 10px;
}

.loginTipBox {
    height: auto;
    padding: 10px 20px;
}

.brand_logo_container {
    position: absolute;
    height: 115px;
    width: 115px;
    top: -75px;
    border-radius: 50%;
    background-color: #8C6238;
    background-image: url("../image/Login_Bigman.png");
    background-position: center;
    background-repeat: no-repeat;
    padding: 10px;
    text-align: center;
}

.loginTitle {
    font-size: 2.25em;
    font-weight: bold;
    color: #000000;
    text-align: center;
    margin-bottom: 20px;
}

.login_btn {
    width: 100%;
    background: #8C6238 !important;
    color: white !important;
    font-size: 1.2em;
    font-weight: bold;
    padding: 0.6rem 0.75rem;
}

    .login_btn:hover {
        background: #B67636 !important;
    }

.loginBox .form-control {
    font-size: 0.9em;
    background-color: #F2F2F2;
    border: 1px solid #ced4da;
    /*border-left: none;*/
    border-right: none;
    height: calc(2em + 0.75rem + 2px);
    padding: 0.375rem 0.5rem;
}

.login_btn:focus {
    box-shadow: none !important;
    outline: 0px !important;
}

.input-group-text {
    background: transparent !important;
    color: white !important;
    border: 0 !important;
    padding: 0.1rem 0.75rem;
}

.loginBox .input-group-append {
    border: 1px solid #ced4da;
    background: #F2F2F2 !important;
    /*border-right: none;*/
    /*border-radius: 0.25rem 0 0 0.25rem !important;*/
    border-radius: 0 0.25rem 0.25rem 0 !important;
}

.input_user,
.input_pass:focus {
    box-shadow: none !important;
    outline: 0px !important;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #c0392b !important;
}

.links {
    font-size: 0.875em;
}

.codePic {
}

    .codePic .form-control {
        border: 1px solid #ced4da;
        border-radius: 0.25rem !important;
        height: calc(1.5em + 0.75rem + 2px);
    }

.loginBox .d-flex {
    flex-direction: column;
}

.user_card .d-flex {
    flex-direction: row;
}