/*!**********************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./src/styles.css?ngGlobalStyle ***!
  \**********************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/* =============================================================================
       ____    __  __  __  _____
    /\  _ _`\/\ \/\ \/\ \/ ____/
    \ \ \  \ \ \ \ \ \ \ \ \_____
     \ \ \  \ \ \ \ \ \ \ \_____ \
      \ \ \__\ \ \ \/  \/ / ____\ \
       \ \_____/\ \______/ /\_____/
        \/____/  \/_____/  \/____/

        Don't Worry Never Crash
========================================================================== */
/* =============================================================================
BASIC
========================================================================== */
/*---root---*/
:root {
	--royal_blue-color: #1855BE;
    --royal_blue-color-80: #4677CB;
    --royal_blue-color-60: #7499D8;
    --royal_blue-color-40: #A3BBE5;
	--turquoise-color: #07B5D3;
    --turquoise-color-80: #39C4DC;
    --turquoise-color-60: #6AD2E5;
    --turquoise-color-40: #9CE1EE;
	--azure-color: #0098F0;
    --azure-color-80: #33ADF3;
    --azure-color-60: #66C1F6;
    --azure-color-40: #99D6F9;
    --persimmon-color: #FF6959;
    --persimmon-color-80: #FF877A;
    --persimmon-color-60: #FFA59B;
    --persimmon-color-40: #FFC3BC;
	--chrome_yellow-color: #F6BF41;
    --chrome_yellow-color-80: #F7CC67;
    --chrome_yellow-color-60: #F9D98D;
    --chrome_yellow-color-40: #FBE6B3;
	--tropical_orange-color: #F09000;
    --tropical_orange-color-80: #F3A633;
    --tropical_orange-color-60: #F6BC66;
    --tropical_orange-color-40: #F9D399;
}
/*---DEFAULT---*/
html, body { min-height: 100%; -webkit-text-size-adjust: none; text-size-adjust: none;}
body { background: linear-gradient(var(--azure-color) 0%, var(--turquoise-color-40) 100%), var(--azure-color); font-family: "Roboto", "Noto Sans TC", sans-serif; color: #666;}
body, td, input { font-size: 14px; color: #666;}
a { text-decoration: none; }
p { font-size: 1em; line-height: 1.4em; margin-bottom: 1em; color: #666; font-weight: 400;}
li { font-size: 1em; line-height: 1.4em; color: #666; font-weight: 400;}
::selection { background: #222; color: #FFF;}
    /*SCROLL BAR*/
    .pc::-webkit-scrollbar{ width:8px; }
    .pc::-webkit-scrollbar-track{ background:#f1f1f1;}
    .pc::-webkit-scrollbar-thumb{ background:var(--royal_blue-color); }
    .pc::-webkit-scrollbar-thumb:hover{ background:var(--azure-color); }
@media only screen and (max-width: 992px) {
    p,li { font-size: 15px; }
}
/*------*/

/*---loading_box---*/
.loading_box{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; z-index: 9999;}
.loading_box::before{ display: block; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background: linear-gradient(var(--azure-color) 0%, var(--turquoise-color-40) 100%), var(--azure-color);}
.loading_box::after{display:block;content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;background:url('loading.gif') no-repeat center center;background-size:60px;}
/*------*/

/* =============================================================================
BASIC END
========================================================================== */


/* =============================================================================
MODULE
========================================================================== */

/*---page width---*/
.inner-width { position: relative; max-width:1200px; margin: 0 auto;}
@media only screen and (max-width: 1280px) {
	.inner-width { max-width: calc(100% - 80px); margin: 0 40px;}
}
@media only screen and (max-width: 576px) {
	.inner-width { max-width: calc(100% - 40px); margin: 0 20px;}
}
/*------*/

/*---btn---*/
.btns{ display: flex;}
.btns>.btn+.btn{ margin-left: 10px;}
.btn{
    display: flex; justify-content: space-between; line-height: 26px; font-size: 14px; font-weight: 700; min-width: 35px; border-radius: 10px;
    --bs-btn-disabled-opacity: 0.30;
}
.btn i{ font-size: 16px; line-height: 26px; margin-right: 5px;}
.btn.wd-120{ width: 120px;}
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--royal_blue-color);
    --bs-btn-border-color: var(--royal_blue-color);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--royal_blue-color-80);
    --bs-btn-hover-border-color: var(--royal_blue-color-80);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--royal_blue-color-80);
    --bs-btn-active-border-color: var(--royal_blue-color-80);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--royal_blue-color);
    --bs-btn-disabled-border-color: var(--royal_blue-color);
}
.btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--turquoise-color);
    --bs-btn-border-color: var(--turquoise-color);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--turquoise-color-80);
    --bs-btn-hover-border-color: var(--turquoise-color-80);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--turquoise-color-80);
    --bs-btn-active-border-color: var(--turquoise-color-80);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--turquoise-color);
    --bs-btn-disabled-border-color: var(--turquoise-color);
}
.btn-info {
    --bs-btn-color:var(--turquoise-color);
    --bs-btn-bg: #FFF;
    --bs-btn-border-color: var(--turquoise-color);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--turquoise-color-80);
    --bs-btn-hover-border-color: var(--turquoise-color-80);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--turquoise-color-80);
    --bs-btn-active-border-color: var(--turquoise-color-80);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--turquoise-color);
    --bs-btn-disabled-border-color: var(--turquoise-color);
}
.btn-back {
    --bs-btn-color:var(--turquoise-color);
    --bs-btn-bg: #FFF;
    --bs-btn-border-color: var(--turquoise-color);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--turquoise-color-80);
    --bs-btn-hover-border-color: var(--turquoise-color-80);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--turquoise-color-80);
    --bs-btn-active-border-color: var(--turquoise-color-80);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--turquoise-color);
    --bs-btn-disabled-border-color: var(--turquoise-color);
}
.btn-stop {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--persimmon-color);
    --bs-btn-border-color: var(--persimmon-color);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--persimmon-color-80);
    --bs-btn-hover-border-color: var(--persimmon-color-80);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--persimmon-color-80);
    --bs-btn-active-border-color: var(--persimmon-color-80);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--persimmon-color);
    --bs-btn-disabled-border-color: var(--persimmon-color);
}
.btn.disabled, .btn:disabled, fieldset:disabled .btn {
    opacity: var(--bs-btn-disabled-opacity);
}
@media only screen and (max-width: 992px) {
    .btn.wd-120 { width: auto;}
}
/*------*/

/* =============================================================================
MODULE END
========================================================================== */

/* =============================================================================
BLOCK
========================================================================== */
#wrapper { position: relative; z-index: 1; width: 100%; min-width: 800px; margin:auto; top:0; overflow:hidden;}
#header { position:relative; z-index: 100; width: 100%; height: 60px;}
#header>.inner-width{ display: flex; justify-content: space-between;}
#content { position: relative;}
#footer{ padding: 20px; text-align: center; color: #FFF;}
/* =============================================================================
BLOCK END
========================================================================== */

/*---logo---*/
/* .logo{ position: relative; height: 60px; color: #FFF; display: flex; flex-direction: column; justify-content: center;}
.logo span{ display: block; font-size: 14px; line-height: 14px; font-weight: 700;}
.logo b{ display: block; font-size: 24px; line-height: 24px; font-weight: 700;}
.logo img{ width: 119px; height: 32px;} */
.logo {  display: flex;  align-items: center; height: 60px;  color: #FFF;}
.logo img {  width: 119px;  height: 32px;}
.logo-text {  display: flex;  flex-direction: column; margin-left: 8px;}
.logo-text b {  font-size: 24px;  line-height: 24px;  font-weight: 700;}
.logo-text span {  font-size: 14px;  line-height: 14px;  font-weight: 700;}
/*------*/
/*---logo---*/
.login{ color: #FFF;}
/*------*/
.nav{ color: #FFF; font-size: 16px; font-weight: 700; display: flex; flex-direction: column; justify-content: center;}
.small-btn{ color: #FFF; font-size: 16px; font-weight: 700; display: flex; flex-direction: column; justify-content: center;height: 30px;margin-top: 20px;}

/*---appVersion---*/
.version-number {font-size: 12px; color: #888; margin-left: 10px; /* 可視需求加點間距 */}
/*---inndex_box---*/
.inndex_box{ background: #FFF; border-radius: 20px; padding: 20px; }
.inndex_box.is_done {background-color: #DFF4E5;}
.inndex_box.is_done_border {border: none; border-left: 8px solid #4CAF50; border-right: 8px solid #4CAF50;}
.inndex_box .upload_text{ position: relative; display: flex; align-items: center;  max-width: 300px; overflow: hidden; white-space: nowrap;}
.inndex_box .upload_text::before{ display: block; content: ''; position: absolute; top: 0; right: 0; width: 20px; height: 100%; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);}
.inndex_box .upload_text.done{ margin: 0 10px;}
/* .inndex_box .upload_bar{ position: relative; margin-bottom: 20px;}
.inndex_box .upload_bar .name{ font-size: 14px; color: #666; width: 100%; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; line-clamp:1; overflow: hidden;}
.inndex_box .upload_bar .info{ font-size: 12px; color: #666;}
.inndex_box .upload_bar .bar{ height: 20px; border-radius: 10px; background: linear-gradient(90deg, var(--royal_blue-color) 0%, var(--turquoise-color) 100%), var(--royal_blue-color); padding: 0 5px; font-size: 12px; color: #FFF; text-align: right; line-height: 20px;}
.inndex_box .upload_bar .bar.error{ background: var(--persimmon-color);}
.inndex_box .upload_bar .bar.done{ background: var(--turquoise-color);} */
.inndex_box .schedule_bar{ position: relative; margin-bottom: 10px;}
.inndex_box .schedule_bar{ display: flex; justify-content: space-between;}
.inndex_box .schedule_bar .bar_box{ flex: 1 1 100%; padding: 0 10px;}
.inndex_box .schedule_bar .bar_box .bar{ height: 20px; border-radius: 10px; background: linear-gradient(90deg, var(--royal_blue-color) 0%, var(--turquoise-color) 100%), var(--royal_blue-color);  padding: 0 5px; font-size: 12px; color: #FFF; text-align: right; line-height: 20px;}
.inndex_box .schedule_bar .bar_box .bar.error{ background: var(--persimmon-color);}
.inndex_box .schedule_bar .bar_box .bar.done{ background: var(--turquoise-color);}
.inndex_box .schedule_bar .name{ white-space: nowrap; font-size: 16px; font-weight: 700; color: var(--royal_blue-color);}
.inndex_box .schedule_bar .name.take{ color: var(--turquoise-color);}
.inndex_box input[type="file"]{position:absolute;width:0;height:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;}
.inndex_box .table-striped>tbody>tr:nth-of-type(odd)>* {
    --bs-table-accent-bg: #FFF;
    color: #333;
}
.inndex_box .table-striped>tbody>tr:nth-of-type(2n)>* {
    --bs-table-accent-bg: #F5F5F5;
    color: #333;
}
.inndex_box .table_title{ font-size: 16px; font-weight: 600; color: #CCC; border-bottom: solid 2px #CCC; text-align: center; }
.inndex_box .table_title.act{ color: var(--royal_blue-color); border-bottom: solid 2px var(--royal_blue-color);}
.inndex_box .table_title.done{ color: var(--turquoise-color); border-bottom: solid 2px var(--turquoise-color);}
.inndex_box .table_title.error{ color: var(--persimmon-color); border-bottom: solid 2px var(--persimmon-color);}
.inndex_box .table .icon{ background: #CCC; height: 20px; border-radius: 10px; padding: 0 2px; text-align: right; color: #FFF;}
.inndex_box .table .icon i{ width: 20px; text-align: center;}
.inndex_box .table .icon.act{background: linear-gradient(90deg, var(--royal_blue-color) 0%, var(--turquoise-color) 100%), var(--royal_blue-color);}
.inndex_box .table .icon.done{ background: var(--turquoise-color);}
.inndex_box .table .icon.all_done{ opacity: 0.5;}
.inndex_box .table .icon.error{ background: var(--persimmon-color);}

.inndex_box .project_list{ position: relative; }
.inndex_box .project_list .title{ flex: 0 0 100%; font-size: 16px; line-height: 20px; font-weight: 500; color: var(--royal_blue-color);}
.inndex_box .project_list .file_name{ font-size: 16px; font-weight: 500; color: #111; width: 100%; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; line-clamp:1; overflow: hidden;}
.inndex_box .project_list .date_inner{ position: relative; display: flex; flex-direction: column; font-size: 14px; font-weight: 400; color: #666;}
.inndex_box .project_list .date{ position: relative; display: flex; font-weight: 400; color: #666;}
.inndex_box .project_list .date .name{ margin-right: 5px;}

.inndex_box .analyze_bar{ position: relative; }
.inndex_box .analyze_bar .info{ font-size: 14px; font-weight: 500; color: var(--royal_blue-color);}
.inndex_box .analyze_bar .info span{ color: var(--turquoise-color);}
.inndex_box .analyze_bar .info .info-error{ color: var(--persimmon-color);}
.inndex_box .analyze_bar .bar{ height: 16px; line-height: 16px; border-radius: 8px; margin-bottom: 4px; background: linear-gradient(90deg, var(--royal_blue-color) 0%, var(--turquoise-color) 100%), var(--royal_blue-color); padding: 0 5px; font-size: 12px; color: #FFF; text-align: right;}
.inndex_box .analyze_bar .bar.error{ background: var(--persimmon-color);}
.inndex_box .analyze_bar .bar.done{ background: var(--turquoise-color);}
/*------*/

/*---pager_bar---*/
.pager_bar { padding: 20px 0; text-align: center; }
.pager_bar.right { text-align: right; }
.pager_bar.left { text-align: left; }
.pager_bar a { display: inline-block; line-height: 32px; width: 32px; text-align: center; margin: 0 4px 0 0; color: #333; font-size: 1em; border-radius: 15px; background: #FFF; vertical-align: text-top;
	transition: 300ms ease;
}
.pager_bar select { display: inline-block; line-height: 30px; vertical-align: text-top; padding: 0 30px; margin: 0 4px 0 0; border-radius: 15px;
	transition: 300ms ease;
}
.pager_bar a.arr { background: #FFF; font-size: 1.4em;}
.pager_bar a:hover { color: #FFF; background: #666;}
.pager_bar a.cur { color: #FFF; background: var(--royal_blue-color);}
.pager_bar p{ text-align: center; color: #CCC; font-size: 0.9em; margin: 0 0 10px 0;}
.pager_bar p strong{ color:#333}
/*------*/

/*---pager_bar---*/
.server-status-box {
  position: fixed;
  top: 60px;
  right: 20px;
  width: 260px;
  z-index: 1000;
  padding: 10px 15px;
  border-radius: 8px;
  background-color: #d9edf7;
  color: #31708f;
  border: 1px solid #bce8f1;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.server-status-box.ok {
  background-color: #d9edf7;
  color: #31708f;
  border: 1px solid #bce8f1;
}
.server-status-box.error {
  background-color: #f2dede;
  color: #a94442;
  border: 1px solid #ebccd1;
}
/*------*/
/*---eye_icon---*/
.eye-btn {
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}
.eye-btn:focus {
  outline: none;
}
.eye-icon {
  width: 20px;
  height: 20px;
}

/*# sourceMappingURL=styles.css.map*/