/**BUTTON EFFECT**/
@-webkit-keyframes clickeffect {
  from {
    opacity: 0.7;
    transform: scale(0);
  }
  to {
    opacity: 0;
    transform: scale(2);
  }
}

.btn{padding: 10px 15px 10px 15px; border: 0px; position: relative; background: transparent; cursor: pointer; overflow: hidden; display: inline-block; border-radius: 50px; background: var(--bg_white); text-decoration: none; -webkit-tap-highlight-color: transparent; color: var(--text_white); white-space: nowrap;}
.btn.full_btn{width: 100%;}
.btn.txtleft{text-align: left;}
.btn.basic{background: var(--bg_blue);}
.btn.silver{background: var(--bg_silver);}
.btn.white{background: var(--bg_white); box-shadow: 0px 0px 0px 1px var(--bg_silver); color: var(--text_silver);}
.btn.whiteBlue{background: var(--bg_white); box-shadow: 0px 0px 0px 1px var(--bg_blue); color: var(--text_blue);}
.btn.orange{background: var(--bg_orange);}
.btn.red{background: var(--bg_red);}
.btn.yellow{background: #FFDF00; color: var(--text_black);}
.btn span.icon{float: left; width: 14px; height: 14px;}
.btn:focus {outline: -webkit-focus-ring-color auto 0px;}
.btn:disabled{background: #dfdfdf;}
.btn span.il{float: right;}
.btn_effect{margin: -100px; width: 200px; height: 200px; border-radius: 100px; position: absolute; background: var(--bg_white); transform: scale(0); pointer-events: none; animation: clickeffect 1s ease; -webkit-animation: clickeffect 1s ease;}

/**STATUS LOADING EFFECT**/
@keyframes animate {
    from {transition:none;}
    to {background-color:#f6f7f8;transition: all 0.3s ease-out;}
}

.status_loading{position: relative; height: 165px;}
.status_loading .sl_effect{position:absolute; background-color: #CCC; height: 6px; animation-name: animate; animation-duration: 2s; animation-iteration-count: infinite; animation-timing-function: linear;}
.status_loading .sl_photo{left: 15px; top: 15px; height: 25px; width: 25px;}
.status_loading .sl_title{left: 55px; top: 21px; height: 10px; width: 140px;}
.status_loading .sl_time{right: 15px; top: 21px; height: 10px; width: 70px;}
.status_loading .sl_content{left: 15px; height: 10px;}
.status_loading .sl_content.slt1{top: 55px; width: 520px;}
.status_loading .sl_content.slt2{top: 75px; width: 420px;}
.status_loading .sl_content.slt3{top: 95px; width: 320px;}
.status_loading .sl_content.slt4{top: 115px; width: 400px;}
.status_loading .sl_content.slt5{top: 135px; width: 470px;}