@charset "utf-8";
@font-face {
  font-family: 'Paciencia';
  src: url('../Typographias - Paciencia.otf') format('opentype');
}  
@font-face {
  font-family: 'Andron';
  src: url('../Andron Freefont LAT Reg.ttf') format('truetype');
}  
:root {
	--top-height: 80px;
  --ariadne: 
}
.section-wrapper {
	padding: 0;
    padding-top:1em;
	padding-bottom:1em;
}
.section-wrapper-sm {
	padding: 0;
    padding-top: 0.2em;
	padding-bottom: 0.2em;
}
.section-wrapper-lg {
	padding: 0;
    padding-top:2em;
	padding-bottom:3em;
}
.section-btmpad{
	margin-bottom:0.75em;
}
.section-light {
    background-color: #fff;
}
.section-transparent {
    background-color: transparent !important;
}
.section-dark {
    background-color: #455073;
	color: #fff;
}
	.section-dark > p{
		color:#343a40;
	}
.section-gradient-blue {
    background-image: linear-gradient(120deg, #6981c9, #004c97 100%);
	color: #efefef;
}
	.section-gradient-blue > p{
		color:#343a40;
	}
.section-gradient-blue-lit {
    background-image: linear-gradient(120deg, #ffffff, #e7f3ff 100%);
	color: #444;
}
.section-gradient-green {
    background-image: linear-gradient(120deg, #cae2cb, #82bd84 100%);
	color: #444;
}

.section-gradient-green-lit {
    background-image: linear-gradient(120deg, #ffffff, #f0fbf1 100%);
	color: #444;
}
.section-green-lit {
    background-color: #fafbf9;
	color: #333;
}
	.section-green-lit .table thead th{
		border-bottom: 1px solid #cdcfd2;
		background-color:#efefef;
	}

.title{
	font-size: 2.2em;
    border-left: 0.5em solid #bed3bf;
    padding-left: 0.5em;
}
.title_sub{
	position: absolute;
	right: 1.0em;
	bottom: 0;
	opacity: 0.6;
	font-size: 0.85em;
}
.tr_gridlock td{
	padding:0px !important;
	border-top: none;
	border-bottom: none;
}
.grey-text{
	color: #5f6973;
	text-align:justify;
	font-size:0.95em;
	letter-spacing:0.025em;
}
.grey-text-sm{
	color: #5f6973;
	text-align:justify;
	font-size:0.85em;
	letter-spacing:0.025em;
}
.grey-text-xsm{
	color: #959ea7;
	text-align:justify;
	font-size:0.70em;
	letter-spacing:0.025em;
}
.homeimg {
	margin-bottom: 0.8em;
	margin-top: 1.2em;
}
.heightened{
	line-height: 1.75em;
}
.hl{
	font-weight:bold;
	text-decoration:underline;
}
.table{
	margin-bottom: 0em;
	page-break-inside:auto;
}
.table tr{
	page-break-inside:avoid;
	page-break-after:auto;
}
.table thead th{
	border-bottom: 1px solid #cdcfd2;
	background-color:#fafafa;
}
.table thead th,.table thead td, .table tbody th, .table tbody td{
	vertical-align: middle;
	padding: 0.75em;
}
	.table-tight thead th, .table-tight thead td{
		padding-top:0.25em;
		padding-bottom:0.25em;
	}
	.table-tight tbody th, .table-tight tbody td{
		padding-top:0.2em;
		padding-bottom:0.2em;
	}
.tbl_ccc{
	width:100%;
	height:100%;
	border-collapse: collapse;
	vertical-align:middle;
	border:none;
}
	.tbl_ccc td{
		border:none;
		padding:0px !important;
	}
.err_msg{
	font-size:0.85em;
	color:#cc0033;
	margin-left: 0.25em;
	margin-right: 0.25em;
	margin-bottom: 0.25em;
}
.row{
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}
.row-borded-hdr{
	border-bottom: 0.05em solid rgba(255,255,255, 0.50);
}
.row-borded-btm{
	border-bottom:1px solid #999;
}
	.row-borded-btm-lit{
		 border-bottom:1px solid #ddd;
	}
.row-tight{
	padding-top: 0em;
	padding-bottom: 0em;
}
.modal-dialog{
	font-size:0.95em;
}
.modal-dialog.modal-dialog-70p{
	min-width: 70% !important;
}
.modal-dialog.modal-dialog-60p{
	min-width: 60% !important;
}
.modal-dialog.modal-dialog-50p{
	min-width: 50% !important;
}
.modal-dialog.modal-dialog-40p{
	min-width: 40% !important;
}
	.modal-dialog .modal-header{
		background-color: #666;
		color:white;
		text-align:center;
		border-radius:0;
		font-size: 1.2em;
	}
.modal-dialog .hdrform{
	font-size: 1.1em;
	padding: 0.75em;
	background-color: #666;
	color: #fff;
	position:relative;
}
.modal-dialog .sepa{
	height: 0.5em;
}
.modal-dialog .ctrl {
	text-align: center;
	margin-top: 1em;
	border-top: 1px solid #efefef;
	padding-top: 1em;
}
#ptn_nav{
	
}
	#ptn_nav td{
		text-align:right;
	}
	#ptn_nav .navi{
		background-color: #aaa;
		color: #fff;
		
		padding-top:0.3em;
		padding-bottom:0.3em;
		padding-right:1.0em;
		padding-left: 0.8em;
		
		margin-left: 0.0em;
		margin-right: 0.0em;
		margin-top: 0.1em;
		margin-bottom: 0.1em;
		cursor: pointer;
		border-radius: 0.25em;
		
		min-width: 5em;
		text-align:center;
		opacity:0.7;
		display:inline-block;
		
	}
	#ptn_nav .navi:hover{
		opacity:1.0;
	}
	#ptn_nav .navi.act{
		background-color: #4b4e4b;
		color: #fff;
		opacity:1.0;
	}
	#ptn_nav .navi.app{
		background-color: #d7748f;
		color: #fff;
	}
	#ptn_nav .navi.app.act{
		color: #fff;
		opacity:1.0;
	}
	
	#ptn_nav .navi.comm{
		background-color: #3c8b32;
		color: #fff;
	}
	#ptn_nav .navi.comm.act{
		color: #fff;
		opacity:1.0;
	}
	#ptn_nav .navi.navi-home{
		background-color:#70758d;
	}	
a,i,button{
	-webkit-appearance: none !important;	
	color:inherit !important;
}
.enfont{
	font-family: Paciencia;	
}
.highlight{
	color:rgb(25, 150, 199);
	font-weight:bold;
}
.notice{
	margin:30px 0px;
	background-color: #c6c6c6;
	padding:10px;
	width:25% !important;
}
.tdimg{
	height:100px;
}
.tdc{
	text-align:center;
}
.pending{
	color:gainsboro !important;
}
.filter{
	border-radius: 5px;
	padding-left: 5px;
	border: #444 1px solid;
}
select option[value=""]{
	color:grey !important;
}
.tbl_subtitle{
	background-color: rgb(91, 91, 91) !important;
	color: whitesmoke;
}
.bannerOption{
	width:40%;
}
.modalImageOption{
	width:80%;
}
#login_wrap{
	background-color:#f6f6f6;
	border-radius: 0.5em;
	padding: 2em;
	padding-bottom: 1em;
}
#tbl_login{
	width: 100%;
	table-layout: fixed;
}
	#tbl_login th{
		border:none;
		background-color: #5d795f;
		color: #efefef;
		
		text-align: center;
		letter-spacing: 0.2em;
		padding-top: 0.75em;
		padding-bottom: 0.75em;
	}
	#tbl_login td{
		border:none;
	}
	#tbl_login input{
		font-size:1em;
	}
	#tbl_login #msg{
		color:#ff2222;
		font-size:0.8em;
		text-align:center;
	}
	#tbl_login button{
		min-width: 100px;
		width: 80%;
		color: white !important;
	}

/* utils */
.mg-20{
	margin-top:20px;
	margin-bottom:20px;
}
.required{
	color:red;
}

/* LI JIE */
.company_name_c{
	color:rgb(66, 152, 250);
	font-weight: bold;
}
.companyTitle-2{
	font-weight: bold;
}
.tel, .fax{
	float:right;
}
.quotation-title, .quotation-title-e{
	text-align: center;
	font-weight: bold;
}
.atn_phone_span, .quotation_datetime_span{
	float:right;
}
.user_id_div,.mobile_div{
	color:rgb(66, 152, 250);	
	font-weight: bold;

}
.company-stamp{
	width: 70%;
	/* height: 50%; */
}
select[name="productDropdown"]{
	width:100%;
}
/* custom styling */
nav{
	background-color: #2f2f2f;
	color:rgb(240, 240, 240);
	padding:1rem 1rem !important;
}
.tr_head{
	background-color: rgb(148, 148, 148);
	color:rgb(240, 240, 240);
}
.modalinput,.modalselect{
	width:100%;
	height:30px;
}
.tablediv{
	overflow-x:auto;
}
.smallBtn{
	margin-left:10px;
	padding:2px 5px;
	font-size:9px;
	margin-bottom: 4px;
}
.qnotion{
	font-size: 9px;
	color: grey;
	font-weight: lighter;
}
.bannerdiv{
	width:100%;
	height:50vh;
	position: relative;
}
.profilediv{
	width:100%;
	height:50vh;
}
.bannerimg{
	width:100%;
	height: 100%;
	object-fit: cover;
}
.banner_main_text{
	position: absolute;
	top: 12%;
	left: 4%;	
	font-size: 2em;
	font-weight: bold;
}
.banner_sub_text{
	position: absolute;
	top: 36%;
	left: 4%;	
	font-size: 1.5em;
	/* font-weight: bold; */
}
.banner_btn_div{
	position: absolute;
	top: 54%;
	left: 4%;	
	font-size: 1.5em;
}
.profileimg{
	width:30vh;
	height: 30vh;
	border-radius: 100%;
	object-fit: cover;
}
.profile_main_text{
	font-size: 2em;
	font-weight: bold;
}
.profile_sub_text{
	font-size: 1.5em;
}
.profile_btn_div{
	font-size: 1.5em;
}
.text-white{
	color: whitesmoke;
}
.fwidth{
	width: 100% !important;
}
.width-80{
	width: 80% !important;
}
.regular-height{
	height: 36px;
}
.font-color-grey{
	color: lightgrey;
}

/* global */
.pageTitle{
	margin-top: 25px;
	margin-bottom: 15px;
}
.td-center{
	/* text-align:center; */
}
.td-right{
	/* text-align:right; */
}

/* dasdhboard */
#dashboard{
	background-color: #f9f9f9 !important;
}
.card{
	padding-top: 10px;
	padding-bottom: 10px;
	border-radius: 5px;
	box-shadow: 5px 5px 5px #c4c4c4;
}
.border-left-blue{
	border-left: 5px solid lightblue;
}
.border-left-green{
	border-left: 5px solid lightgreen;
}
.border-left-yellow{
	border-left: 5px solid rgb(255, 234, 0);
}
.card-title{
	font-weight: bold;
	color: #004c97;
}
.card-content{
	text-align: center;
	padding-bottom: 20px;
}
.indexContent{
	font-weight: bold;
	font-size: 30px;
}
.vh-50{
	height: 50vh;
}
.vh-25{
	height: 25vh;
}
.vh-15{
	height: 15vh;
}
.dashboard_select{
	/* background-color: #007bff; */
	width: 100%;
	height: 36px;
	padding-left: 5px;
	border-radius: 5px;
	border: 1px solid rgb(189, 189, 189);
	box-shadow: 3px 3px 3px #c4c4c4;
	/* color: white; */
}
.dasdboard_select:focus{
	outline: 0;
	text-decoration: none;
}
.dasdboard_select option{
	background-color: DodgerBlue;
	color: white;
}
.add-shadow{
	border: 1px solid rgb(189, 189, 189);	
	box-shadow: 3px 3px 3px #c4c4c4;
}
.rm-border-top{
	border-top: none !important;
}

#eos_visit{
	background-color: transparent !important;
	border: none !important;
	text-decoration: underline !important;
}
#eos_visit:hover{
	color:blue !important;
}
#eos_visit:focus, #eos_visit:active {
	outline: 0 !important;
	box-shadow: none !important;
}

.red-dot {
	position: relative;
}
.red-dot::after {
	content: '';
	position: absolute;
	top: -12%;
	right: -12%;
	width: 12px;
	height: 12px;
	background-color: red;
	border-radius: 50%;
}

.warningInput {
	border-color: red;
}
.warningCheckbox {
  appearance: none; /* 移除預設樣式 */
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid red; /* 邊框顏色 */
  border-radius: 4px;
  cursor: pointer;
  position: relative;
}

.warningCheckbox:checked {
  background-color: red; /* 勾選背景色 */
}

.warningCheckbox:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 0px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.warningRadio {
  appearance: none;      /* 隱藏預設樣式 */
  -webkit-appearance: none;
  -moz-appearance: none;
  
  width: 15px;
  height: 15px;
  border: 2px solid red;   /* 邊框顏色 */
  border-radius: 50%;       /* 變成圓形 */
  background-color: white;  /* 背景色 */
  cursor: pointer;
}

.warningRadio:checked {
  background-color: red; /* 勾選後的背景色 */
}

/* media quwery */
@media screen and (max-width: 468px) {

}

/* media query */
@media screen and (max-width: 768px) {
	.brand-a{
		display:block !important;
	}
	.brand-li{
		display:none;
	}
}