a{
    color: #733600;
}
#page-loading{
    height: 100vh;
    width: 100%;
    top:0;
    left:0;
    transition :0.3s;
    background-color: #fff;
    position: fixed!important;
    overflow: auto;
    z-index: -1;
    opacity:0;
    display: flex;
    align-items: center;
    justify-content: center;
}
#page-loading.active{
    opacity: .7;
    z-index: 999999;
}

.title{
    color: #733600;
    font-size: 20px;
    border-bottom: 1px solid #733600; 
}
.title:before {
    content: "";
    display: block;
    background: url("/static/media/images/icon-star.webp") no-repeat;
    width: 20px;
    height: 20px;
    float: left;
    margin: 6px 4px 0 0;
}

.caption{
    color: gray;
    font-size: 14px;
}

/*mobile layout btn*/
.mp-btn{
    border: none;
    display: inline-block;
    outline: 0;
    padding: 8px 10px 4px;
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    color: inherit;
    background-color: inherit;

}

.no-scroll {
   overflow-y: hidden;
}

/*錯誤input警示*/
.input-attention{
    border-color:red !important;
}
/*錯誤div警示*/
.div-attention{
    border: 2px red solid;
}

/*滑動式外框*/
.swipe-container{
    /*white-space: nowrap;*/
    overflow-y: hidden;
    overflow-x: auto;
}
/*滑動式項目*/
.swipe-item{
    white-space: initial;
    display: inline-block;
}

/*bootscrap depend*/
/*  btn */
/*buy action*/
.btn-default{
    /*color: #733600;*/
    background-color: #fff;
    border-color: #ccc;
}

.btn-add-product{
    background-color:darkorange; 
    color: white; 
    border: 1px solid orange;
}
.btn-add-product:focus{
    background-color:orange; 
    color: moccasin; 
    border: 1px solid orange;
}
/*流程性的動作 跳到下一步*/
.btn-action{
    background-color:saddlebrown; 
    color: white; 
    border: gray;
}
/*代替radio*/
.select-container{
    display: flex; 
    margin-bottom:10px ;
}
.btn-select{
    font-weight: bold;
    background-color: white;
    border-radius: 0;
    border: 1px solid silver;
    color: gray;
    flex: 1;
}
.btn-select:first-of-type{
    border-top-left-radius: 5px; 
    border-bottom-left-radius: 5px;
}
.btn-select:last-of-type{
    border-top-right-radius: 5px; 
    border-bottom-right-radius: 5px;

}
.btn-select.active{
    /*border-radius: 0;*/
    border: 1px solid #733600;
    /*border-left: 3px solid #733600;*/
    color: #733600;
    background-color: white;
    font-weight:bolder;
    -webkit-box-shadow: initial;
    background:linear-gradient(135deg, #733600 10px,transparent 0)!important;     
}

/**/
.btn-func{
    background-color: cornsilk;
    color: brown;
    border: 1px solid gold;
}
.btn-func.active{
    -webkit-box-shadow: initial;
    box-shadow: initial;
    background-color: ivory;
    border: 3px solid greenyellow;
}


/*bootstrap modal至中*/
.modal.in .modal-dialog{
    transform: translate(0,40%);
}

/*bootstrap modal header背景*/
.modal-header{
    background-image: url(/media/uploads/home/blog/05116.jpg);
    border-radius: 6px 6px 0 0;
}
.modal.fade{
    z-index: 9100;
}
.modal-backdrop{
    z-index: 9000;
}

/* button 樣式 咖啡色 反白*/

.btn-coffee{
  background-color: white;
  color: brown;
  border: 1px solid brown;
}
.btn-coffee:hover{
  //background-color: #BCAAA4;
  background-color: brown;
  color: white;
}