*{
    font-family: "微軟正黑體";
}
:root {
    --maincolor--: #377A7D;
    --secondarycolor--:#BC2D6A;
}
html{ height:100%; }
body{
    position:relative;
    min-height:100vh;
    font-size:1.1em;
    display: flex;
    flex-direction: column;
    background-color: #EFEFEF;
}
main {
    flex:1;/* 配合body flex 讓footer自動置底*/
    width: 95%;
    margin:0 auto;
}
a{
   color:#2270c5; 
}
.red{
    color:#F84949;
}
header {
    width: 100%;
    z-index: 1044;
    top: 0;
    box-shadow: 0 0 6px rgba(0,0,0,0.25);
}
    header img {
        height: 24px;
        padding-right: 10px;
    }

.bg-light {
    background-color: #fcfcfc !important;
}

.navbar {
    padding: 0.5em 1em;
}
.form-group{
    margin-bottom:0.5rem;
}
.form-group label{
    text-align: right;
    padding-right: 0;
}

/*** nav  ***/
nav .navbar-collapse ul:nth-child(1){
    font-size:1.2em;
}
nav .navbar-collapse ul:nth-child(1) li a{
    color:#333;
}
nav .navbar-collapse ul:nth-child(1) li a:hover{
    color:#1E7B82;
}
nav .navbar-brand {
    line-height: 1.2;
    color: #456473 !important;
}
nav .navbar-brand h1{
    font-size:1.2em !important;
    margin-bottom: 0;
}
nav .navbar-brand span{color: var(--maincolor--);}
nav .navbar-brand img{
/*    height:2.5em;*/
}
nav .navbar-nav li a i{
    color:var(--maincolor--);
}

/*** content ***/
#RENT_CONTENT .main_content{
  border:1px solid var(--secondarycolor--);
  border-radius: 2em;
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}
.main_content .search-content h3,.main_content .result-content h3{
    font-size:1.7em;
    color:var(--maincolor--);
    font-weight: bold;
    margin: 0;
}
.main_content .search-content:first-child{
  border-right: 1px solid var(--secondarycolor--);
}
.main_content .wraper{
  display: flex;
}
.search-content,.result-content{
  flex: 1;
  min-height: 70vh;
 }
.result-content h3{
  color:var(--secondarycolor--) !important;
}
.result-content .result-wraper .box{
  min-height: 180px;
}
.result-content .result-wraper .box h4{
  color:#444;
  font-size:1.3em;
}
.result-content .result-wraper .box .h5{
  color:#444;
  font-size:1em;
}
.result-content .result-wraper .box > div{
  background-color:#EFF4F7;
  border:1px solid #cacaca;
}
.result-content .result-wraper .box:nth-child(2) > div{background-color:#F0F3F2;}
.result-content .result-wraper .box:nth-child(3) > div{background-color:#F5F3F9;}
.result-content .result-wraper .box .number,.result-content .result-wraper .box .text{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.7em;
  color:#1B559B;
  font-weight: bold;
}

footer{
    padding: 8px;
    width: 100%;
}
/******* tabs***********/
.nav-pills .nav-link{
  position: relative;
  background:#EEEEEE;
  color:#000;
  z-index: 2;
}
.nav-pills .nav-link h4{
  font-size:1.3em;
}
.nav-pills .nav-link span{
  display: block;
  line-height: 1.3;
}
.nav-pills .nav-link >div h4,.nav-pills .nav-link span{
  position: relative;
  z-index: 2;
}
.nav-pills .nav-link img{
  width: 60px;
  height:60px;
}
.nav-pills .nav-link:hover{
  background-color:#dbdbdb; 
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link{
  background-color:var(--maincolor--);
  color:#fff !important;
}
.nav-pills .nav-link::before{
  position:absolute;
  content:"";
  bottom:-16px;
  left:calc(50% - 16px);
  width: 0px;
   height: 0px;
   border-style: solid;
   border-width: 16px 16px 0 16px;
   border-color: #EEEEEE transparent transparent transparent;
   transform: rotate(0deg) translateY(-16px);
    z-index: 0;
    transition: .15s ease-in-out;
}
.nav-pills .nav-link:hover::before{
  border-color: #dbdbdb transparent transparent transparent;
}
.nav-pills .nav-link.active::before{
  transform:rotate(0deg) translateY(0);
  border-color: var(--maincolor--) transparent transparent transparent;
}
/************ btn custom**********/
.btn-custom {
    color:#fff;
    background-color:#177980;
    border-color:#177980
  }
  .btn-custom:hover {
    color:#fff;
    background-color:#055a57;
    border-color:#0c4c4a
  }
  .btn-custom.focus,
  .btn-custom:focus {
    color:#fff;
    background-color:#055a57;
    border-color:#0c4c4a;
    box-shadow:0 0 0 .2rem rgba(23, 158, 168, 0.5)
  }
  .btn-custom.disabled,
  .btn-custom:disabled {
    color:#fff;
    background-color:#177980;
    border-color:#177980
  }
  .btn-custom:not(:disabled):not(.disabled).active,
  .btn-custom:not(:disabled):not(.disabled):active,
  .show>.btn-custom.dropdown-toggle {
    color:#fff;
    background-color:#0c4c4a;
    border-color:#005cbf
  }
  
/******* form ********/
.element-wraper{
  background-color: #F6F6F6;
  border: 1px solid #e3e3e3;
  font-size: 20px;
}
.hidden-td{
    padding:0 !important;
}
/***loading***/
.loading {
  position: fixed;
  top:0;
  left:0;
  bottom:0;
  right:0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color:rgba(0,0,0,0.65);
  z-index:99999;
}

.spinner-border {
  width: 3rem;
  height: 3rem;
}
@media (max-width:1199.98px){
  .main_content .wraper{
    flex-direction: column;
  }
  .main_content .search-content:first-child{
    border-right: none;
    border-bottom:1px solid var(--secondarycolor--);
  }

}
@media (max-width:991.98px){
  main{
    width:99%;
  }
}

@media (max-width: 767.98px) { 
    nav .navbar-brand h1{
        font-size: 1em !important;
    }
    nav .navbar-brand img {
        height: 2em;
    }
 }
 @media (min-width:992px){

}