body{
  background-color: #fcfcfc;
}


.mgR25-{margin-right: -25px !important}
.mgR15-{margin-right: -15px !important}
.mgR10-{margin-right: -10px !important}
.mgR5-{margin-right: -5px !important}
.mgR0{margin-right: 0px !important}
.mgR2{margin-right: 2px !important;}
.mgR3{margin-right: 3px !important;}
.mgR5{margin-right: 5px !important;}
.mgR10{margin-right: 10px !important;}
.mgR15{margin-right: 15px !important;}
.mgR20{margin-right: 20px !important;}
.mgR30{margin-right: 30px !important;}
.mgR50{margin-right: 50px !important;}
.mgL25-{margin-left: -25px !important}
.mgL10-{margin-left: -10px !important}
.mgL5-{margin-left: -5px !important}
.mgL0{margin-left: 0px !important}
.mgL2{margin-left: 2px !important;}
.mgL3{margin-left: 3px !important;}
.mgL5{margin-left: 5px !important;}
.mgL10{margin-left: 10px !important;}
.mgL15{margin-left: 15px !important;}
.mgL20{margin-left: 20px !important;}
.mgL50{margin-left: 50px !important;}
.mgT15-{margin-top: -15px !important;}
.mgT10-{margin-top: -10px !important;}
.mgT0{margin-top: 0px !important;}
.mgT3{margin-top: 5px !important;}
.mgT5{margin-top: 5px !important;}
.mgT8{margin-top: 8px !important;}
.mgT10{margin-top: 10px !important;}
.mgT15{margin-top: 15px !important;}
.mgT20{margin-top: 20px !important;}
.mgT25{margin-top: 20px !important;}
.mgT30{margin-top: 30px !important;}
.mgT40{margin-top: 40px !important;}
.mgT50{margin-top: 50px !important;}
.mgT70{margin-top: 70px !important;}
.mgT100{margin-top: 100px !important;}
.mgT200{margin-top: 200px !important;}
.mgB15-{margin-bottom: -15px !important;}
.mgB10-{margin-bottom: -10px !important;}
.mgB0{margin-bottom: 0px !important;}
.mgB3{margin-bottom: 3px !important;}
.mgB5{margin-bottom: 5px !important;}
.mgB8{margin-bottom: 8px !important;}
.mgB10{margin-bottom: 10px !important;}
.mgB15{margin-bottom: 15px !important;}
.mgB20{margin-bottom: 20px !important;}
.mgB25{margin-bottom: 25px !important;}
.mgB30{margin-bottom: 30px !important;}
.mgB40{margin-bottom: 40px !important;}
.mgB50{margin-bottom: 50px !important;}
.mgB100{margin-bottom: 100px !important;}


.pdAll0{padding: 0px !important;}
.pdT0{padding-top: 0px !important;}
.pdT3{padding-top: 3px !important;}
.pdT5{padding-top: 5px !important;}
.pdT15{padding-top: 10px !important;}
.pdT10{padding-top: 15px !important;}
.pdT20{padding-top: 20px !important;}
.pdT25{padding-top: 25px !important;}
.pdT30{padding-top: 30px !important;}
.pdT50{padding-top: 50px !important;}
.pdT60{padding-top: 60px !important;}
.pdT85{padding-top: 85px !important;}
.pdT100{padding-top: 100px !important;}
.pdB0{padding-bottom: 0px !important;}
.pdB10{padding-bottom: 10px !important;}
.pdB20{padding-bottom: 20px !important;}
.pdB25{padding-bottom: 25px !important;}
.pdB35{padding-bottom: 35px !important;}
.pdB50{padding-bottom: 50px !important;}
.pdB60{padding-bottom: 60px !important;}
.pdB80{padding-bottom: 80px !important;}
.pdB100{padding-bottom: 100px !important;}
.pdR0{padding-right: 0px !important;}
.pdR3{padding-right: 3px !important;}
.pdR5{padding-right: 5px !important;}
.pdR10{padding-right: 10px !important;}
.pdR15{padding-right: 15px !important;}
.pdR20{padding-right: 20px !important;}
.pdR25{padding-right: 25px !important;}
.pdR30{padding-right: 30px !important;}
.pdR40{padding-right: 40px !important;}
.pdL0{padding-left: 0px !important;}
.pdL3{padding-left: 3px !important;}
.pdL5{padding-left: 5px !important;}
.pdL10{padding-left: 10px !important;}
.pdL15{padding-left: 15px !important;}
.pdL20{padding-left: 20px !important;}
.pdL25{padding-left: 25px !important;}
.pdL30{padding-left: 30px !important;}
.pdL35{padding-left: 35px !important;}
.pdL40{padding-left: 40px !important;}
.pdL50{padding-left: 50px !important;}
.pdL60{padding-left: 60px !important;}
.pdL90{padding-left: 90px !important;}

.f14{font-size: 0.875rem;}
.f18{font-size: 1.125rem;}

.text-link{color: #007bff !important;}
.text-link:hover{color: #5ca8f9 !important;}
.text-white{color: #fff;}
.font-weight-normal{font-weight: normal;}
.font-weight-500{font-weight: 500 !important;}
.font-weight-bold{font-weight: bold !important;}

.table-valine-middle td{
  vertical-align: middle;
}

.row-noMargin{
  margin-left: 0px;
  margin-right: 0px;
}
.col-noPadding{
  padding-left: 0px;
  padding-right: 0px;
}

.header-ns{
  height: 52px;
}

.header-ns .navbar-nav{
  justify-content: end;
}

.role{
  color: #fff;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 9px !important;
  padding-left: 9px !important;
  /* color: #B3ABBC !important; */
  font-size: 17px;
  font-weight: 600;
  box-sizing: border-box;
  letter-spacing: 1px;
}
.role img{
  height: 25px;
}

.navbar-toggler-SL{
  padding: 0rem 0.25rem;
}


.pageImgBar {
  background-repeat: no-repeat;
  background-size: cover;
  height: 300px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.indexImgBar {
  /* position: absolute; */
  top: 48px;
  background-image: url("../images/image_CoreTechBC@2x.png");
  background-position: 0% 83%%;
}
.HQImgBar {
  /* position: absolute; */
  top: 48px;
  background-image: url("../images/HQ-background.jpg");
  background-position: 0% 170%;
}
.bootstrapImgBar {
  /* position: absolute; */
  top: 48px;
  background-image: url("../images/Bootstrap-background.png");
  background-position: 0% 170%;
  opacity: 0.8;
}
.userImgBar {
  /* position: absolute;s */
  top: 48px;
  background-image: url("../images/user-background.jpg");
  background-position: 0% 170%;
  opacity: 0.8;
}
@media screen and (min-width: 1200px) {
  .HQImgBar, .userImgBar{
    background-position: 0% 20%;
  }
}




.form-icon{
  width: 150px;
  height: auto;
  margin-top: 20px;
  margin-bottom: 50px;
}

.form-block{
  border-radius: 8px;
  -webkit-box-shadow: 0 10px 24px 0 rgba(217, 220, 224, 0.41);
          box-shadow: 0 10px 24px 0 rgba(217, 220, 224, 0.41);
  background-color: #fff !important;
  padding: 30px 60px 40px 60px;
}

.SLForm label{
  font-weight: 600;
}


.footer-SL{
  padding: 30px 20px !important;
}


.col-btnGenerate{
    padding-left: 0px;
}

@media screen and (max-width: 575px) {
  .col-btnGenerate{
    padding-left: 15px;
    margin-top: 5px;
  }
}


.APIServerTBL th{
  background-color: #212529;
  color: #fff;
  width: 15%;
}
.APIServerTBL td{
  background-color: #f2f2f2;
}

.copiedAlreadyText{
	display: none;
	position: absolute;
	bottom: 38px;
	right: 17px;
	color: #28a745;
	font-size: 18px;
  font-weight: 600;
}



.action button{
  margin-top: 2px;
  margin-bottom: 2px;
}
.action a{
  margin-top: 2px;
  margin-bottom: 2px;
}



.logListTBL th, .logListTBL td{
  padding: 0.313rem 0.75rem 0.4rem;
  font-size: 0.875rem;
}
.logListTBL td{
  font-weight: normal;
}
.thead-dark-sub th{
  background-color: #777e84;
  color: #fff;
}


.logTBL th{
  background-color: #777e84;
  color: #fff;
  width: 15%;
}
.logTBL td{
  background-color: #f2f2f2;
}



.backarrow {
  display: inline-block;
  width: 16px;
  height: 2px;
  margin-bottom: 2px;
  background-color: #01a0d9;
  border-radius: 2px;
  position: relative;
}

.backarrow:before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 2px;
  background-color: #01a0d9;
  border-radius: 2px;
  position: absolute;
  left: 0;
  top: -3px;
  transform: rotate(-45deg);
}

.backarrow:after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 2px;
  background-color: #01a0d9;
  border-radius: 2px;
  position: absolute;
  left: 0;
  top: 3px;
  transform: rotate(45deg);
}

.backLink{
  font-size: 18px;
  color: #01a0d9 !important;
  font-weight: 600;
  padding-left: 10px;
  transition: 0.2s;
}
.backLink:hover{
  padding-left: 0px;
}
.backLinkText{
  color: #01a0d9 !important;
  font-size: 18px;
  font-weight: 600;
}



#copyTarget{
  word-break: break-all;
}





/* button 樣式
--------------------------------------------------*/
.btn-close{
  background-color: transparent;
  border: 0px;
  right: 5px;
}
.btn-close img{
  width: 40px;
}


.btnArea{
  padding-top: 20px;
  padding-bottom: 30px;
}

.btnBlock{
  /* border: 4px solid #adadad; */
  border-radius: 10px;
  box-shadow: 0px 3px 10px rgba(100, 100, 100, 0.3);
  padding: 20px;
  margin: 10px 10px 10px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: 0.2s;
  background-color: #fff;
}
.btnBlock:hover{
  opacity: 0.7;
}
.btnBlock img{
  max-width: 70%;
}
.btnTitle{
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -1px;
  margin-top: 20px;
}

.btn-info2{
  color: #fff;
  background-color: #1ab6ce;
  border-color: #1ab6ce;
}
.btn-info2:hover{
  color: #fff;
  background-color: #1697aa;
  border-color: #1697aa;
}

.btn-tiny{
  padding: 0.2rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1;
  border-radius: 0.2rem;
}

.btnBlock-HQ{
  padding-top: 50px;
  padding-bottom: 50px;
  margin-bottom: 60px;
}

.btn-protal{
  color: #fff;
  background-color: #1ab6ce;
  border-color: #1ab6ce;
  opacity: 0.7;
}
.btn-protal:hover{
  opacity: 1;
}
.btn-protal.active{
  opacity: 1;
}

.btn-search{
  /* background-color: #1ab6ce; */
  background-color: #007bff;
  color: #fff;
}
.btn-search:hover{
  opacity: 0.8;
}



/* Modal 樣式
--------------------------------------------------*/



/*.modal-eID .modal-title{
	font-weight: bold;
}

.modal-eID button.close{
	font-size: 2.5em;
	font-weight: normal;
}



.full-body .modal-body{
	padding: 0px;
}
*/






.modal-SL{
	border-radius: 0px;
}

.modal-SL.modal-dialog{
	margin-top: 6rem;
}
@media screen and (max-width:575px){
	.modal-SL .modal-dialog{
		margin-top: 1.75rem;
	}
}

.modal-SL label{
	/* font-weight: bold; */
}

.modal-SL .modal-header{
	border-radius: 0px;
	background-color: #464646;
	padding: 6px;
}

.modalTitle{
	color: #555;
	font-size: 1.25rem;
	text-align: center;
	padding-bottom: 20px;
}


.modal-SL .modal-body{
	padding-top: 40px !important;
	padding-left: 50px;
	padding-right: 50px;
	/* font-size: 20px; */
	font-weight: 500;
	color: #2e2e2e;
	background-color: #fff;

}

.modal-message .modal-body{
	padding-top: 60px !important;
	padding-left: 50px;
	padding-right: 50px;
	padding-bottom: 20px !important;
}

.modal-input .modal-body{
	padding-top: 60px !important;
	padding-left: 50px;
	padding-right: 50px;
	padding-bottom: 20px !important;
}
@media screen and (max-width: 575px){
	.modal-input .modal-body{
		padding-left: 20px;
		padding-right: 20px;
	}
}

.modal-SL .modal-footer{
	border-radius: 0px;
	background-color: #fff;
	border: 0px;
}

.modal-SL .modal-title img{
	height: 32px;
	vertical-align: middle;
	margin-right: 0px;
}

.modal-SL .modal-title i{
	color: #f9bc24;
}

.modal-SL{
	padding-right: 0px !important;
}

.modal-SL .addon-tnc{
	padding: 6px 5px !important;
	font-size: 0.8em !important;
}

.modal-SL .submitBlock{
	text-align: center;
	margin-top: 60px;
	margin-bottom: 10px;
}

.modal-SL .form-group label{
	/* margin-bottom: 15px; */
}

.text-muted{
  color: #6c757d !important;
  font-size: 14px !important;
  font-weight: normal;
}


@media (min-width: 1200px){
  .modal-xl {
      max-width: 1140px;
  }
}

@media (min-width: 992px){
  .modal-lg, .modal-xl {
      max-width: 800px;
  }
}





/*---------------------------------------
代碼化版本新增
-----------------------------------------*/

main{
  margin-top: 52px;
}

.typeArea{
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  padding-right: 20px;
  border-right: 1px solid #b9bcbf ;
}
.typeArea:last-child{
  border-right: 0px;
}

.typeName{
font-size: 1.250rem;
}

.typeName img{
  width: 50px
}

.typeContent{
  padding-top: 50px;;
}

.dbTBL thead tr th{
  font-weight: 500;
}

.logDiv{
  /* padding: 5px 10px; */
  border: 1px solid #ced4da;
  min-height: 200px;
  /* font-weight: 500 !important; */
}
.logDivTitle{
  background-color: rgba(0, 0, 0, 0.075);
  padding: 5px 15px;
  font-weight: 500;
}
.logDivContent{
  padding: 10px 15px;
}

.encryptDiv{
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #ced4da;
  background-color: rgba(0, 0, 0, 0.13);
  min-height: 200px;
}
.encryptDiv img{
  width: 50px;;
}

.UserInfo{
  /* padding-bottom: 5px; */
  border-bottom: 1px solid #ced4da;
}

.form-userInfo{
  border: 1px solid #ced4da;
  padding: 5px 10px 10px 10px;
  /* border-radius: 4px; */
  margin-top: 20px;
}

.actions{
  font-size: 0.875rem;
  /* color: #1ab6ce; */
  color: #007bff;
  font-weight: bold;
  text-align: right;
  margin-top: 25px;
  
}
.actions a{
  margin-left: 8px;
}
.actions a:hover{
  text-decoration: underline;
  transition: 0.2s;
}

.newUserBolck{
  text-align: right;
  padding: 20px 0px;
}

.newUserBolck a{
  border-radius: 4px;
  padding: 7px 9px;
  color: #fff;
  /* background-color: #1ab6ce; */
  background-color: #007bff;
  font-size: 0.875rem;
}
.newUserBolck a:hover{
  opacity: 0.8;
  transition: 0.2s;
}
.newUserBolck a i{
 margin-right: 5px;
}

.serialNumber{
  background-color: rgba(0, 0, 0, 0.075);
  margin-left: -10px;
  margin-right: -10px;
  margin-top: -5px;
  margin-bottom: 15px;
  padding-left: 10px;
  font-weight: bold;
}