* {
  font-family: -apple-system, "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;
}

textarea {
  resize: none;
}

a:hover {
  text-decoration: none;
}

.bg-primary-color {
  background-color: #2088ba !important;
}
.btn.bg-primary-color {color:#fff;}
.bg-light-grey {
  background-color: #e9ecef !important;
}

.btn-primary-color {
  background-color: #2088ba !important;
  color: #FFFFFF;
}

footer.sticky-footer {
  width: 100%;
}

/* Form - Custom Fields */
.required {
	display: inline-block;
	color: #d2322d;
	font-size: 1em;
	font-weight: bold;
	position: relative;
	top: -0.2em;
}

.mobile-nav {
  background-color: #191818ed;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 999;
}

.mobile-nav>.navbar-nav>.nav-item {
  padding: .6rem 0;
}

.mobile-nav>.navbar-nav>.nav-item>a {
  color: #FFF;
}

.export-link {
  color: #FFF;
}

.export-link:hover {
  color: #FFF;
  text-decoration: none;
}

.nav-closed {
  display: none;
}

.login-page {
  height: 100vh;
  display: flex;
  align-items: center;
}

.login-btn, .submit-btn {
  background-color: #2088ba !important;
  color: #FFFFFF;
}

.login-btn:hover, .submit-btn:hover {
  color: #FFFFFF;
  box-shadow: 2px 2px 10px 2px #cccccc;
}

.about-title {
  border-left: 5px #3d96c0 solid;
  padding: 0 0.5em;
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  background: #ecf2f6;
}

.about-title h2 {
  margin: 0 0.5em 0 0;
  display: inline-block;
  color: #3d96c0;
  font-size: 28px;
}

.about-title span {
  color: #aaa;
  display: inline-block;
  margin: 0;
}

.about-subtitle {
  color: #3d96c0;
}

.table-container {
  padding: 1rem;
  margin-top: 1rem;
}

#add-icon {
  position: fixed;
  z-index: 999;
  bottom: 10%;
  right: 0;
  font-size: 4rem;
}

#add-icon>a {
  color: #2088ba;
}

.search-container {
  width: 490px;
  display: block;
  margin: 0 auto;
}

input#search-bar {
  margin: 0 auto;
  width: 100%;
  height: 45px;
  padding: 0 20px;
  font-size: 1rem;
  border: 1px solid #d0cfce;
  outline: none;
}

input#search-bar:focus {
  border: 1px solid #008abf;
  transition: 0.35s ease;
  color: #008abf;
}

input#search-bar:focus::-webkit-input-placeholder {
  transition: opacity 0.45s ease;
  opacity: 0;
}

input#search-bar:focus::-moz-placeholder {
  transition: opacity 0.45s ease;
  opacity: 0;
}

input#search-bar:focus:-ms-placeholder {
  transition: opacity 0.45s ease;
  opacity: 0;
}

.search-icon {
  position: relative;
  float: right;
  width: 75px;
  height: 75px;
  top: -62px;
  right: -45px;
}

.technician-photo {
  width: 100%;
  /* height: auto; */
  top: 50%;
  height: 100%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  position: relative;
}

.technician-photo-block {
  width: 200px;
  height: 250px;
}

.technician-license-block {
  width: 250px;
  height: 200px;
}

.switch {
  font-size: 1rem;
  position: relative;
}

.switch input {
  position: absolute;
  height: 1px;
  width: 1px;
  background: none;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  padding: 0;
}

.switch input+label {
  position: relative;
  min-width: calc(calc(2.375rem * .8) * 2);
  border-radius: calc(2.375rem * .8);
  height: calc(2.375rem * .8);
  line-height: calc(2.375rem * .8);
  display: inline-block;
  cursor: pointer;
  outline: none;
  user-select: none;
  vertical-align: middle;
  text-indent: 0.25rem;
}

.switch input+label::before,
.switch input+label::after {
  content: '';
  position: absolute;
  top: 0;
  left: 120px;
  width: calc(calc(2.375rem * .8) * 2);
  bottom: 0;
  display: block;
}

.switch input+label::before {
  right: 0;
  background-color: #dee2e6;
  border-radius: calc(2.375rem * .8);
  transition: 0.2s all;
}

.switch input+label::after {
  top: 2px;
  left: 120px;
  width: calc(calc(2.375rem * .8) - calc(2px * 2));
  height: calc(calc(2.375rem * .8) - calc(2px * 2));
  border-radius: 50%;
  background-color: white;
  transition: 0.2s all;
}

.switch input:checked+label::before {
  background-color: #08d;
}

.switch input:checked+label::after {
  margin-left: calc(2.375rem * .8);
}

.switch input:focus+label::before {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(0, 136, 221, 0.25);
}

.switch input:disabled+label {
  color: #868e96;
  cursor: not-allowed;
}

.switch input:disabled+label::before {
  background-color: #e9ecef;
}

.switch+.switch {
  margin-left: 1rem;
}

.form-shadow {
 box-shadow: 0 0 20px 0 rgb(0 0 0 / 9%), 0 5px 25px 0 rgb(0 0 0 / 1%);
  border-radius: 8px;
}

.signature-block {
  background-color: #f5f5dc;
  height: 15rem;
}

.input-unit {
  position: absolute;
  top: 8%;
  right: 6%;
  display: table-cell;
  background-color: #0d8ddb;
  white-space: nowrap;
  padding: 7px 10px;
}

input[type=checkbox] {
  /* Double-sized Checkboxes */
  -ms-transform: scale(2);
  /* IE */
  -moz-transform: scale(2);
  /* FF */
  -webkit-transform: scale(2);
  /* Safari and Chrome */
  -o-transform: scale(2);
  /* Opera */
  padding: 10px;
  margin: 5px 10px;
}

.unit {
  display: inline-block;
  position: relative;
}

/* position the unit to the right of the wrapper */
.unit::after {
  color: #0d8ddb;
  position: absolute;
  top: 5px;
  right: .5em;
  transition: all .05s ease-in-out;
}

/* move unit more to the left on hover or focus within
   for arrow buttons will appear to the right of number inputs */
.unit:hover::after,
.unit:focus-within::after {
  right: 1.5em;
}

/* handle Firefox (arrows always shown) */
@supports (-moz-appearance:none) {
  div::after {
    right: 1.5em;
  }
}

/* set the unit abbreviation for each unit class */
.unit-unit::after {
  content: '台';
}

.unit-square::after {
  content: '坪';
}

.unit-time::after {
  content: '次';
}

.unit-nt::after {
  content: '元';
}

table.dataTable thead .sorting:after,
table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_asc_disabled:before,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_desc_disabled:after,
table.dataTable thead .sorting_desc_disabled:before {
bottom: .5em;
}
/* ---- ESME ---- */
.cover{
    background-position: center;
    background-size: cover;
}
.cover.totop{
    background-position:center 10%;
}
.contain{
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.h40{padding-bottom: 40%;}
.h50{padding-bottom: 50%;}
.h60{padding-bottom: 60%;}
.h70{padding-bottom: 70%;}
.h80{padding-bottom: 80%;}
.h100{padding-bottom: 100%;}
.h120{padding-bottom: 120%;}
.w25{width: 25px;}
.w30{width: 30px;}
.w40{width: 40px;}
.w50{width: 50px;}
.w60{width: 60px;}
.w80{width: 80px;}
.w100{width: 100px;}
.w150{width: 150px;}
.w200{width: 200px;}
.img-responsive{
    display: block;
    max-width: 100%;
    height: auto;
}
.f18{font-size: 18px}
.f20{font-size: 20px}
.f24{font-size: 24px}
.table{min-width: 720px}

/* 1016 */
.stamp{
  position: relative;
  margin: 8px;
  width: 80px;
  padding-bottom: 80px;
  background-size: contain;
  background-repeat: no-repeat 
}
.stamp.large{
  width: 180px;
  padding-bottom: 180px;
}
.stamp:before{
  content: '';
  position: absolute;
  width: 110%;
  height: 110%;
  border: 2px dashed #bababa;
  left: -5%;
  top: -5%;
}
.border .stamp{margin: 0 auto;}
.border .stamp:before{content: none}