html, body { 
	background-image: url('/onemeter/images/background.png'); 
	background-size:cover;
}

body { 
	margin: 0; 
	font-weight: 300;
	font-family: 'Noto Sans TC', sans-serif;
}

.width12rem{
	width: 12rem;
}

.flex-auto{
	flex: auto;
}

.font-thin {
  font-weight:100; 
}

.font-light {
  font-weight:300; 
}

.font-smaller {
  font-size: smaller;
}
 
.font-regular{
  font-weight:400; 
}

.font-bold {
  font-weight:700; 
}

.stop-scrolling {
  overflow: hidden;
}

.center_div{
    width: 100%;
}

.word_div{
	z-index: 10;
	width: 100%;
    height: 85%;
    position: absolute; 
}

.center_div_bg{
    width: 95%;
    height: 85%;
    position: absolute; 
    z-index: 0; 
    padding-left:0.5rem;
}

.mt_div{
	font-size: 4vmin;
	line-height: 7vmin;
	color:#595757;
	padding-top:1.5rem;
	text-align: left;
    padding-left: 1.5rem;
}

@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) { 
    /* iPhone X */
	.mt_div {
	    padding-left: 5%;
	}
}

@media only screen and (min-width: 768px) {
  	/* For desktop, ipad */
	.mt_div {
	    padding-left: 10%;
	}
}

@media screen and (orientation: landscape) {
   /* For 橫向: */
   	.center_div_bg {
    	height: 150vh;
   	}
	.mt_div {
	    padding-left: 20%;
	}
}

.errorPage_msg{
 	position: absolute;
  	top: 50%;
}


.text-center {
	text-align: center;
	width: 100%;
}

.justify-content{
	justify-content:center!import;
}


.hide{
	display:none;
}

.logo {
	max-width: 100%;
    max-height: 100%;
}

.logoDiv {
	left: 0px; 
	width: 50%;
	top: 0px; 
	height: calc(60px);
}

.mat-grid-list {
    display: block;
    position: relative;
}

.mat-grid-tile {
    display: block;
    position: absolute;
    overflow: hidden;
}

.mat-grid-tile .mat-figure {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0;
    margin: 0;
}

.header-mat-grid-list {
	height: calc(60px);
}

.title{
	text-align: center;
	width: 100%;
	justify-content: center;
    align-items: center;
  	padding-top:2rem;
}

.title h3{
	text-align: center;
	width: 100%;
  	font-size: 6vmin;
    line-height: 6vmin;
	color:#231815;
	font-weight: 700;
	letter-spacing: 0.25rem;
}

.titleInfo_subTitle, .title_info_line,  .title_info_line_item, .title_info_line2{
	font-weight: 100;
}

.title_reg{
	text-align: center;
	width: 100%;
	justify-content: center;
    align-items: center;
}

.title_reg h3{
	text-align: center;
	width: 100%;
  	font-size: 7vmin;
    line-height: 7vmin;
	color:#231815;
	font-weight: 700;
	letter-spacing: 0.25rem;
}

.footerHelper {
	height: 5vh; 
	display: flex; 
	flex-direction: column; 
}

.warranty-note{
	color:#8C62FF;
	font-size: 5vmin;
	line-height: 5vmin;
	letter-spacing: 0.2rem;
	text-decoration: none;
    border-bottom: 0.1rem solid;
}

.center_img{
	text-align: center;
	width: 100%;
  	padding-top:1rem;
}

.center_Note{
	font-size: 5vmin;
	line-height: 10vmin;
	color:#595757;
	padding-top:1rem;
	letter-spacing: 0.2rem;
}

.center_Note2{
	font-size: 4.5vmin;
	line-height: 7vmin;
	color:#595757;
	letter-spacing: 0.15rem;
}

.tel_color{
	color:#595757;
	text-decoration:none;
}

.tel_color a:hover, a:active, a:focus {
    outline: none;
    border: 0;
}

.pop_tel_color{
	text-decoration:none;
}

.pop_tel_color a:hover, a:active, a:focus {
    outline: none;
    border: 0;
}


.ui-widget a {
	color:#FFFF;
}

.ui-dialog,.ui-widget, .ui-widget-content, .ui-corner-all, .foo, .ui-draggable, .ui-resizable {
	background:#3E3A39 !important;
	color:#FFFF;
	font-family: 'Noto Sans TC', sans-serif;
	font-weight: 300;
	text-decoration:none;
}

.ui-corner-all {
    border-radius: .75rem;
}

.completer_img_noline{
	text-align: center;
	width: 100%;
  	padding-top:7rem;
}

.completer_img{
	text-align: center;
	width: 100%;
  	padding-top:3rem;
}

.complete_Note{
	font-size: 4.5vmin;
	line-height: 7vmin;
	color:#595757;
	padding-top:1rem;
	letter-spacing: 0.1rem;
}

.line_img{
	text-align: center;
	width: 100%;
  	padding-top:1rem;
}

.titleInfo_title{
	font-size: 5.62vmin;
    line-height: 8vmin;
}

.titleInfo_subTitle{
	font-size: 5vmin;
	line-height: 7vmin;
}

.title_info_line {
    margin-left: 10px;
    text-indent: -10px;
    font-size: 4vmin;
	line-height: 7vmin;
}

.title_info_line2 {
    margin-left: 20px;
    text-indent: -20px;
    font-size: 4vmin;
	line-height: 7vmin;
}


.title_info_line_item {
    margin-left: 30px;
    font-size: 4vmin;
	line-height: 7vmin;
}

.dialogCloseImg{
	right:1rem;
	position: absolute;
}

.dialogCloseDiv{
	 padding-bottom: 1rem;
}


.ui-widget-overlay.custom-overlay
{
    background-color: black;
    opacity: 0.5;
}

.mtNote{
	color:#727171;
	display:inline-block;
	padding-left: 0.2rem;
	cursor: pointer;
	font-size: 2vmin;
	font-weight: 100;
}

.sendSn{
	padding-top: 1rem;
}

.mtPic{
	max-width:100%;
	max-height:100%;
}

.inputSNError{
    text-align: center;
    width: 100%;
    line-height: 2rem;
}

.privacy{
	color:#8C62FF;
	cursor: pointer;
	text-decoration: underline;
	display: inline;
}

.submitBtn{
	text-align: center;
	width: 100%;
}

hr.dash {
  border: 2px dashed #595757;
  width:85%;
}

hr.popupDash {
  border: 2px dashed #FFFF;
}

label{
	padding-right: 0.5rem;
}

.inputGroup{
	padding-bottom:10px;
}

.confirmPop{
	line-height: 5vmin;
}

input{
	font-size: 4vmin;
    padding: .375rem .75rem;
    color: #757575;
    background-color: #EEEEEE;
    background-clip: padding-box;
    border: 1px solid #fff;
    border-radius: .5rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.red{
	color:red;
}

.input_error{
	color:red;
	font-size: 3.5vmin;
}

select {
	font-size: 4vmin;
    padding: .375rem 1rem;
    color: #757575;
    background-color: #EEEEEE;
    background-clip: padding-box;
    border: 1px solid #fff;
    border-radius: .5rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    word-wrap: normal;
    -webkit-appearance: menulist;
    text-align: center;
    text-align-last: center;
    -moz-text-align-last: center;
}

select  *
{
	font-size: 4vmin;
    color: #757575;
    text-align: center;
    text-align-last: center;
    -moz-text-align-last: center;
}

.error {
	border-color: red !important;
	color:red;
}

label[id$="-error"] {
	padding-left: 5px;
    font-size: 3.5vmin;
}

/* Custom checkbox */
.custom-checkbox {
  position: relative;
  display: block;
  margin-top: 10px;
  margin-bottom: 10px;
  line-height: 20px;
}

.custom-checkbox label {
  margin-left: 20px;
  padding-left: 7px;
  line-height: 20px;
  text-align: left;
}

.custom-checkbox label::before {
  content: "";
  display: block;
  position: absolute;
  width: 20px;
  height: 20px;
  top: 0;
  left: 0;
  background: #fdfdfd;
  border: 1px solid #e4e5e7;
  @include vendorize(box-shadow, inset 2px 2px 0px 0px rgba(0, 0, 0, 0.1));
}

.custom-checkbox label::after {
  display: block;
  position: absolute;
  width: 20px;
  height: 20px;
  top: 0;
  left: 0;
  font-size: 18px;
  color: #0087b7;
  line-height: 20px;
  text-align: center;
}

.custom-checkbox input[type="checkbox"] {
  opacity: 0;
  z-index: -1;
  position: absolute;
}

.custom-checkbox input[type="checkbox"]:checked + label::after {
  content: "";
  width: 28px;
  height: 22px;
  background: url('/onemeter/images/check_confirm.png');
}

.query_div{
	display: flex;
	justify-content: center;
	align-items: center;
}

.resultPopInfo{
	text-indent:0px;
}

.color_transparent{
	color:transparent;
}

.color_purple {
	color:#8C62FF;
}

.decoration_underline {
	text-decoration: underline;
}

.inline-block {
	display:inline-block;
}


.width-200 {
	width:220px;
}

.padding-top-10 {
	padding-top:10px;
}

.padding-bottom-50 {
	padding-bottom: 50px;
}

.padding-bottom-12{
	text-align: center;
	padding-bottom: 12px;
}

.padding-bottom-15{
	margin: auto;
	margin-bottom: 15px;
}


.padding-top-5 {
	padding-top: 5px;
}

.padding-top-20 {
	padding-top: 20px;
}

.padding-10 {
	padding: 10px
}

.padding-15{
	text-align: center;
	padding-bottom: 15px;
}

.padding-zero {
	padding: 0;
}

.height-20 {
	height: 20px;
}

.height-30 {
	height: 30px;
}

.white-space-pre{
	white-space: pre;
}