@charset "utf-8";
/* CSS Document */
<style>
body
{
  background-color:var(--body-color);
  color:var(--normal-font-color);
}
:root {
  /* :root is a clever way of saying "the outer-most element" 
  --lock-color:none;*/
  --body-color: #FFF;
  /*--font-color: #000;*/

  --pagename-color: hsl(30.34,58.94%,70.39%);/*#E0B487;*/
  --company-color: hsl(300,51.65%,82.16%);/*#E9BAE9;*/
  --user-color: hsl(300,51.65%,82.16%);/*#E9BAE9;*/
  --redirect-color: hsl(300,51.65%,82.16%);/*#E9BAE9;*/ 
  --delete-color: hsl(0,100%,65%);/*#E35356;*/
  --new-color: hsl(120,60%,50%);/*#3C3;*/ 
  --Tbl_stock_btn-color: hsl(155,27.69%,74.51%);/*#ACD0C1;*/
  --Tbl_stock-color: hsl(48.33,56.25%,74.9%);/*#E3D59B;*/
  --Sum-color: hsl(144,26.79%,78.04%);/*#B8D6C4;*/
  --deduct_method-color: hsl(14.06,59.26%,78.82%);/*#E9B8A9;*/
  --Deduct-color: hsl(0,28.3%,79.22%);/*#D9BBBB;*/
  --Tax_i-color: hsl(48.33,56.25%,74.9%);/*#E3D59B;*/
  --Total_btn-color: hsl(144,26.79%,78.04%);/*#B8D6C4;*/
  --Total-color: hsl(232,23.08%,74.51%);/*#AFB3CD;*/
  --sub-color: hsl(42.11,61.29%,81.76%);/*#EDDCB4;*/
  --footer-color: hsl(293.68,41.3%,81.96%);/*#E0BEE4;*/
  --lock-color:none;/*none表無色，所以會出現body之backgroung-color*/
  /*--long_select-font-size:24px;*/


  --normal-font-color: #000;
  --white-font-color: #FFF;
  --input-background-color: #FFF;
  --title-font-size: 1.2vw;
  --cate-font-size: 1.25vw;
  --input-height:5vh;
  --1row_input-height:3.56vh;
  --1row_button-height:4.2vh;
  --select-height:5vh;
  --search-type-height:3.56vh;
  --normal-font-size: 1.5em;
  --bnormal-font-size: 2em;
  --cnormal-font-size: 1.5em;
  --dnormal-font-size: 1em;
  --1row-font-size: 1vw;
  --button-color-blue: hsl(200,100%,70%);/*#6CF;*/
  --button-height-normal: 6vh;
  --border-radius-normal: 3px;
  --margin-right-normal: 0;
  --border-green:1px solid green;
  --border-brown:1px solid #600;
  --padding-normal: 0;
  --page-background: hsl(293.68,41.3%,81.96%);/*#E0BEE4;*/
  --permission-a-background: hsl(297.95,64.71%,73.33%);/*#E48FE7;*/
  --permission-c-background:hsl(120,100%,25.1%);/*#008000;*/
  --grey-color:hsl(0,0%,40%);/*#666;*/
  --add-height:8vh;
  --close-font-size: 1.46vw;
  --file-close-color: hsl(0,0%,93.33%);/*#EEE;*/
  --Start-btn-height: 8.4vh;
  --border-red: 1px solid red;
  --border-yellow: 1px solid yellow;
  --other-btn-color: hsl(297.95,64.71%,73.33%);/*#E48FE7;*/
  --redirect-c-btn-color: hsl(120,33.33%,70%);/*#9C9;hsl(150,100%,60%);#3F9;*/
  --modal-content-color: #FEFEFE;
  --modal-header-color: #5CB85C;
  --index-company-font-size: 2vw;
  --index-employee-font-size: 1vw;
  --index-btn=font-size: 1vw;	
  --instructions-color: hsl(30,100%,80%);/*#FC9;*/ 
  --search-color: #ff4545;
}
p {
  font-size:var(--cnormal-font-size);
  background-color:var(--body-color);
  color:var(--normal-font-color);
}
div {
  color:var(--normal-font-color);
}
input{
	/*background:#FFF;
	color::var(--font-color);*/
	
	background:var(--input-background-color);
	color:var(--normal-font-color);
	height:var(--input-height);
    margin-right:0;/*var(--margin-right-normal);*/
    border-radius:var(--border-radius-normal);
    /*border:1px solid green;*/
	border:var(--border-green);
    padding:0;/*var(--padding-normal);*/
    font-size:var(--normal-font-size);
	}
input[type=button], input[type=submit], input[type=reset] {
	background:var(--button-color-blue);
	color:var(--normal-font-color);
    border:none;
	height:var(--button-height-normal);
    font-size:var(--normal-font-size);
    padding:0;
	margin:0;
    /*border-radius:var(--border-radius-normal);*/
    /*font-size:var(--cnormal-font-size);*/
}
select{
	background:var(--input-background-color);
	color:var(--normal-font-color);
    height:var(--select-height);
    margin-right:var(--margin-right-normal);
    border-radius:var(--border-radius-normal);
	border:var(--border-green);
    padding:var(--padding-normal);
    font-size:var(--normal-font-size);
	}
input[class="company_name"]
{
	background-color:var(--lock-color);
    text-align: center;
    width:99vw;
    height:10vh;
    margin-right:2px;
    border-radius:3px;
    border:1px solid green;
    padding:5px;
    font-size:var(--bnormal-font-size);
    color:var(--normal-font-color);
}
input[class="mobile_func_btn"]
{ width:15vw;}
input[class="employee_name"]
{
	background-color:var(--lock-color);
    text-align: right;
	border:0;
	width:99vw;
    height:5vh;
    font-size:var(--cnormal-font-size);
    color:var(--normal-font-color);
}
table label[class="btn btn-info"]
{
  	
  background:var(--button-color-blue);/*#6CF;*/
  /*color:white;*/
  border:1;
  width:8vw;
  height:4.5vh;/*45px;*/
  border-radius:3px;
  font-size:var(--cnormal-font-size);/*20px;*/
  color:var(--normal-font-color);
}

input[class="download_file_btn"]
{
	font-size:var(--cnormal-font-size);
    border:none;
    width:20vw;
	height:7vh;
  /*height:35px;
  border-radius:3px;
  font-size:16px;*/
}
input[class="redirect_btn"]
{
  background:var(--button-color-blue);/*#6CF;*/
  color:var(--normal-font-color);
  border:1;
  width:33vw;
  height:8vh;
  border-radius:0.25vw;
  font-size:var(--bnormal-font-size);
}
input[class="redirect_c_btn"]
{
  background:var(--redirect-c-btn-color);/*#3F9;*/
  color:var(--normal-font-color);
  border:1;
  width:33vw;
  height:8vh;;
  border-radius:0.25vw;
  font-size:var(--bnormal-font-size);
}
input[class="redirect_d_btn"]
{
  background:var(--instructions-color);/*#3F9;*/
  color:var(--normal-font-color);
  border:1;
  width:33vw;
  height:8vh;;
  border-radius:0.25vw;
  font-size:var(--bnormal-font-size);
}

select[class="upload_select"] {
  width: 100vw;
  margin: 0px;
  font-size: var(--bnormal-font-size);
  height:inherit;
}
input[class="password"]
{
  width:55vw;
  font-size: var(--bnomal-font-size);
}
input[class="password1"]
{
  width:55vw;
  font-size: var(--bnomal-font-size);
}

 select[class="data"]
{
  width:60vw;
} 
input[class="confirm_btn"]
{
  border:1px solid #600;
  width:20vw;
  height:6vh;
  font-size: var(--cnormal-font-size);
}

input[class="other_btn"]
{
  background:var(--other-btn-color);/*#E48FE7;*/
  color:var(--normal-font-color);
  border:1;
  width:33vw;
  height:8vh;
  border-radius:0.25vw;
  font-size:var(--bnormal-font-size);
}
input[class="password_btn"]
{
  border:1px solid #600;
  width:20vw;
  height:6vh;
  font-size: var(--normal-font-size);
}
input[class="register_btn"]
{
  border:1px solid #600;
  width:32vw;
  height:6vh;
  font-size: var(--normal-font-size);
}
input[class="query_btn"]
{
  border:1px solid #600;
  width:11vw;
  height:6vh;
  font-size: var(--normal-font-size);
}
/* upload*/
input[class="upload_btn"]
{
  width:4vw;
}
/* basic */
select[class="basic_select"] {
  width: 98vw;
  margin: 0px;
  font-size: var(--cnormal-font-size);
  height:inherit;
  }

input[class="company_type_btn"]
{
  width:98vw;
  font-size:var(--cnormal-font-size);
  height:5vh;
}
select[class="cmp_select"]
{
	width:16vw;
	background:var(--body-color);
	color:var(--normal-font-color);
    height:4.15vh;
    /*font-size:0.8vw;*/
}
input[class="cmp"]
{  
	width:100vw;
	background:var(--button-color-blue);/*#6CF;*/
	color:var(--normal-font-color);
    font-size: var(--bnormal-font-size);
    border:none;
    height:8vh;
    /*border-radius:0.25vw;
    font-size:0.9vw;*/
}
/*.left_image {
  width: 20vw;
  height: 35vh;
  background-color: #D6D6D6;
  display:flex;
  justify-content:center;
}
.myimage img {
    width: 20vw;
    height: 100%;
    object-fit:cover;	}*/
input[class="message_input_btn"]{
/*.message_input_btn{*/  
	width:20vw;
	background:var(--button-color-blue);/*#6CF;*/
	color:var(--normal-font-color);
    font-size:var(--bnormal-font-size);
	padding:0;
	margin:0;
    height:8vh;
}
input[class="myaccount_btn"]
{
	width:100vw;
	font-size:var(--bnormal-font-size);
	height:7vh;
}
input[class="message"]
{  
	width:80vw;
	background-color:var(--body-color);
	font-size:var(--cnormal-font-size);
	height:7vh;
}
textarea[class="message"]
{
  width:100vw;
  background-color:var(--body-color);
  font-size:var(--cnormal-font-size);
  color:var(--normal-font-color);
}   
select[class="message_select"]
{
  width:100vw;
  background-color:var(--body-color);
  font-size:var(--bnormal-font-size);
  height:7vh;
}
select[class="file_select"]
{
  width:95vw;
  height:inherit;
    font-size: var(--cnormal-font-size);
}   
select[class="basic_stock"] {
  width:75vw;
  font-size: var(--cnormal-font-size);
}
/* new_prod */
textarea[class="new_prod"]
{
  width:50vw;
  background-color:var(--body-color);
  font-size:var(--bnormal-font-size);
  color:var(--normal-font-color);
}   
/* promote */
input[class="promote_btn"]
{  
	width:100vw;
	background:var(--button-color-blue);/*#6CF;*/
	color:var(--normal-font-color);
    height:8vh;
	font-size:var(--bnormal-font-size);
}

/* account */

input[class="Account_bank_code_btn"]
{
  width:15vw;
}
input[class="Account_btn"]
{
  width:32vw;
}
input[class="Account_bank_code"]
{
  width:15vw;
}
input[class="Account"]
{
  width:32vw;
}
input[class="Account_type_btn"]
{
  width:22vw;
}
select[class="Account_type"]
{
  width:22vw;
}
input[class="Account_name_btn"]
{
  width:32vw;
}
input[class="Account_name"]
{
  width:32vw;
}
input[class="Account_balance_btn"]
{
  width:30vw;
}
input[class="Account_balance"]
{
	/*background-color:var(--lock-color);*/
  width:30vw;
}
input[class="Account_currency_btn"]
{
  width:25vw;
}
select[class="Account_currency"] {
	/*background-color:var(--lock-color);*/
  width:25vw;
}  
input[class="add_col"]
{
  background:var(--grey-color);
  color:var(--white-font-color);
  border:none;
  width:17vw;
    font-size: var(--cnormal-font-size);
	height:5vh;
}

/*----- type ------------------------------------*/
input[class="type_btn"]
{
    font-size: var(--dnormal-font-size);
	height:5vh;
    width:30vw;
}
input[class="write_type"]
{
  width:30vw;
	height:5vh;
  font-size: var(--dnormal-font-size);
}
select[class="type_r"]
{
	/*background:none ;*/
  width:30vw;
  /*font-size: var(--dnormal-font-size);
  height:inherit;*/
}
input[class="cate"]
{
  width:17vw;
  height:5vh;
  font-size: var(--dnormal-font-size);
}
select[class="revise_item_select"] {
  width: 30vw;
  margin: 0px;
  font-size: var(--normal-font-size);
  height:inherit;
  }
select[class="cateselect"] {
  width: 70vw;
  margin: 0px;
  font-size: var(--normal-font-size);
  height:inherit;

  }

input[class="add"]
{
  background:var(--grey-color);
  color:var(--white-font-color);
  border:none;
  width:10vw;
  height:12vh;
}
select[class="type"]
{
	/*background-color:var(--lock-color);*/
  width:30vw;
}
/*----- type ------------------------------------*/
input[class="basic_btn"]
{
	font-size:var(--dnormal-font-size);
	height:5vh;
	width:20vw;
} 
input[class="basic_input"]
{
	font-size:var(--cnormal-font-size);
	height:5vh;
	width:75vw;
}
input[class="basic_c_btn"]
{
  width:12vw;
} 
input[class="basic_c_input"]
{
  width:25vw;
}
input[class="logo_choose_btn"]
{
	font-size:var(--dnormal-font-size);
	height:5vh;
    width:80vw;
}
input[class="basic_img"]
{
	font-size:var(--dnormal-font-size);
	height:5vh;
  width:95vw;
}
input[class="basic_img_s"]
{
  font-size:var(--cnormal-font-size);
  height:5vh;
  width:20vw;
}
select[class="speak_lang"]
{
  width:20vw;
}
input[class="pitch"]
{
	/*background-color:var(--lock-color);*/
  width:6vw;
}
input[class="rate"]
{
	/*background-color:var(--lock-color);*/
  width:6vw;
}
#search_type{
	border:1px solid black;
	width:98vw;
	height:33vh;
}

/*
.upload_cover {
position: relative;
width: 100px;
height: 100px;
text-align: center;
cursor: pointer;
background: #efefef;
border: 1px solid #595656;
}
#upload_input {
display: none;
}
.upload_icon {
font-weight: bold;
font-size: 180%;
position: absolute;
left: 0;
width: 100%;
top: 20%;
}
.delAvatar {
position: absolute;
right: 2px;
top: 2px;
}
*/



/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: var(--modal-content-color);/*#fefefe;*/
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 100%;/* 80 */
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

/* The Close Button */
.close {
  color: var(--input-background-color);/*white;*/
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: var(--normal-font-color);/*#000;*/
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  padding: 2px 16px;
  background-color: var(--modal-header-color);/*#5cb85c;*/
  color: var(--input-background-color);/*white;*/
}

.modal-body {padding: 2px 16px;}

.modal-footer {
  padding: 2px 16px;
  background-color: var(--modal-header-color);/*#5cb85c;*/
  color: var(--input-background-color);/*white;*/
}
/*#all1{width:100%;}
#right1{margin:0;padding:0;}
#left1{margin:0;padding:0;margin:0;}
#center1{margin:0 autp;padding:0;}*/
/* 行動版面: 480px 以下。 */
body
{font-size:var(--dnormal-font-size);}
#main{width:100%;}
#right{margin:0;padding:0;}
#left{margin:0;padding:0;margin:0;}
#center{margin:0;padding:0;}
.img_new{
	width:50vw;
	height:50vw;
}
#file_image{
	width:80vw;
	height:80vw;}
#file_logo_image{
	width:95vw;
	height:95vw;}
#logo_image{
	width:95vw;
	height:95vw;}
.upload_f{
	display:block;
}
.basic_item{
	vertical-align:text-top;
	display:block;
}
.photo_logo{
	vertical-align:text-top;
	display:block;
}


/* 表格版面: 481px 到 768px。樣式繼承自: 行動版面。 */

@media only screen and (min-width: 481px) {
body
{font-size:var(--cnormal-font-size);}
#main{width:100%;}
#left{float:left;;padding:0;margin:0;}
#right{float:right;;padding:0;margin:0;}
#center{margin:0;padding:0;}
:root {
  --input-height:3.2vh;
  --button-height-normal: 1.8vw;
  --normal-font-size: 0.9vw;
}
}
/* 桌面版面: 769px 到最大 1232px。樣式繼承自: 行動版面和表格版面。 */

@media only screen and (min-width: 769px) {
#main{width:100%;}
#left{float:left;;padding:0;margin:0;}
#right{float:right;;padding:0;margin:0;}
#center{margin:0 auto;;padding:0;}
/*#all{width:100%;}
#left0{float:left;padding:0;margin:0;}
#right0{float:right;padding:0;margin:0;}
#center0{margin:0 auto;padding:0;}*/
:root {
  --input-height:3.2vh;
  --button-height-normal: 1.8vw;
  --normal-font-size: 0.9vw;
}
input{
    font-size:var(--normal-font-size);
}
select{
    font-size:var(--normal-font-size);
}
input[class="redirect_btn"]
{
    width:16vw;
    height:8vh;
    font-size:var(--index-company-font-size);
}
input[class="redirect_c_btn"]
{
    width:16vw;
    height:8vh;;
    font-size:var(--index-company-font-size);
}
input[class="redirect_d_btn"]
{
    width:16vw;
    height:8vh;;
    font-size:var(--index-company-font-size);
}
input[class="other_btn"]
{
    width:16vw;
    height:8vh;
    font-size:var(--index-company-font-size);
}

input[class="message_input_btn"]{
/*.message_input_btn{ */ 
    font-size:var(--normal-font-size);
	width:4vw;
    height:3.5vh;
}
input[class="message"]
{
	width:15.5vw;
	height:3vh;
}
textarea[class="message"]
{
  width:20vw;
  font-size:var(--normal-font-size);
}   
select[class="message_select"]
{
  width:20vw;
  font-size:var(--normal-font-size);
  height:inherit;
}
input[class="cmp"]
{  
	width:20vw;
    height:3.5vh;
	font-size:var(--normal-font-size);
}
input[class="promote_btn"]
{  
	width:20vw;
    height:3.5vh;
	font-size:var(--normal-font-size);
}
textarea[class="new_prod"]
{
  width:9.3vw;
  font-size:var(--normal-font-size);
}   
.img_new{
	width:9.3vw;
	height:9.3vw;}
#file_image{
	width:9.3vw;
	height:9.3vw;}
#file_logo_image{
	width:13vw;
	height:13vw;}
#logo_image{
	width:12vw;
	height:12vw;}
input[class="company_name"]
{
    width:48vw;
    height:10vh;
    font-size:var(--index-company-font-size);
}
input[class="employee_name"]
{
  width:48vw;
  height:3.5vh;
  font-size:var(--index-employee-font-size);
}
.modal-content {
  width: 50%;/* 80 */
}
.upload_f{
	display:inline-block;
}
.photo_logo{
	display:inline-block;
}

select[class="upload_select"] {
  width: 10vw;
  font-size: var(--cate-font-size);
  height:inherit;
}
body
{
	font-size:var(--normal-font-size);
}
p {
	font-size:var(--normal-font-size);
}
table label[class="btn btn-info"]
{
  width:8vw;
  height:4.5vh;/*45px;*/
  font-size:var(--1row-font-size);/*20px;*/
}
input[class="download_file_btn"]
{
	font-size:var(--normal-font-size);
    width:4vw;
	height:3.5vh;
}
input[class="password_btn"]
{
    width:7vw;
	height:var(--button-height-normal);
    font-size: var(--cate-font-size);
}
input[class="password"]
{
  width:16vw;
  font-size: var(--cate-font-size);
}
input[class="password1"]
{
  width:20vw;
  font-size: var(--cate-font-size);
}

input[class="confirm_btn"]
{
    width:4vw;
    font-size: var(--cate-font-size);
	height:var(--button-height-normal);
}
.basic_item{
	display:inline-block;
}
input[class="basic_btn"]
{
	font-size:var(--normal-font-size);
	height:var(--button-height-normal);
	width:4vw;
} 
input[class="basic_input"]
{
	font-size:var(--normal-font-size);
	height:var(--input-height);
	width:15vw;
}
select[class="basic_select"] {
  width: 10vw;
  font-size: var(--cate-font-size);
  height:inherit;
  }
input[class="company_type_btn"]
{
	font-size:var(--normal-font-size);
	height:var(--button-height-normal);
	width:10vw;
}
input[class="logo_choose_btn"]
{
	font-size:var(--normal-font-size);
	height:var(--button-height-normal);
    width:12vw;
}
input[class="cate"]
{
    width:4.5vw;
    font-size: var(--cate-font-size);
	height:var(--button-height-normal);
}
input[class="type_btn"]
{
    width:8vw;
    font-size: var(--cate-font-size);
	height:var(--button-height-normal);
}
#search_type{
	width:47.5vw;
	height:41vh;
}
input[class="add_col"]
{
    width:3vw;
    font-size: var(--cate-font-size);
	height:var(--button-height-normal);
}
input[class="write_type"]
{
  width:8vw;
  height:var(--input-height);
  font-size: var(--cate-font-size);
}
select[class="type"]
{
  font-size:var(--normal-font-size);
  width:8vw;
}
select[class="type_r"]
{
	/*background:none ;*/
  font-size:var(--normal-font-size);
  width:8vw;
  height:inherit;
}
select[class="file_select"]
{
  font-size: var(--cate-font-size);
  width:13vw;
  height:inherit;
}   
input[class="basic_img"]
{
  font-size:var(--normal-font-size);
  width:12vw;
  height:var(--input-height);
}
input[class="basic_img_s"]
{
  font-size:var(--cnormal-font-size);
  height:var(--input-height);
  width:6vw;
}
select[class="basic_stock"] {
  width:15.5vw;
  font-size: var(--cate-font-size);
}
 select[class="data"]
{
  font-size:var(--normal-font-size);
  width:10.5vw;
} 
input[class="add"]
{
  width:2vw;
  height:var(--add-height);
}
input[class="Account_bank_code_btn"]
{
  width:4vw;
}
input[class="Account_btn"]
{
  width:8.6vw;
}
input[class="Account_bank_code"]
{
  width:4vw;
}
input[class="Account"]
{
  width:8.6vw;
}
input[class="Account_type_btn"]
{
  width:6vw;
}
select[class="Account_type"]
{
  width:6vw;
}
input[class="Account_name_btn"]
{
  width:9vw;
}
input[class="Account_name"]
{
  width:9vw;
}
input[class="Account_balance_btn"]
{
  width:5vw;
}
input[class="Account_balance"]
{
  width:5vw;
}
input[class="Account_currency_btn"]
{
  width:4vw;
}
select[class="Account_currency"] {
  width:4vw;
}  
input[class="register_btn"]
{
    width:7vw;
	height:var(--button-height-normal);
    font-size: var(--cate-font-size);
}
input[class="query_btn"]
{
    width:1.75vw;
	height:var(--button-height-normal);
    font-size: var(--cate-font-size);
}
input[class="myaccount_btn"]
{
	width:20vw;
    font-size: var(--cate-font-size);
}
select[class="revise_item_select"] {
  width: 10vw;
  font-size: var(--cate-font-size);
  height:inherit;
  }
select[class="cateselect"] {
  width: 36vw;
  font-size: var(--cate-font-size);
  height:inherit;

  }

}


</style>