.container{
  max-width: 1400px;
  padding: 20px;
  margin: 0 auto;
}
.overflow-hidden{
  overflow: hidden;
}
.hide{
  display:none;
}
.no-scroll{
  overflow:hidden;
}
.clearfix{
  &:before,
  &:after {
    content: " "; /* 1 */
    display: table; /* 2 */
  }
  &:after {
    clear: both;
  }
}
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.pull-right {
  float: right !important;
}
.pull-left {
  float: left !important;
}
.text-left{text-align: left;}
.text-center{text-align: center;}
.text-right{text-align: right;}
.gf-card{
  background-color: #fff;
  border-radius: 3px;
  box-shadow: rgba(0,0,0,0.05) 0 2px 3px 0;
  // border:solid 1px rgba(0, 0, 0, 0.12);  
}
// ------------------------
ul{
  padding:0;
  list-style: none;
}
a{
  color: #333;
  transition: color 0.3s ease;
  margin-left:5px;
  margin-right:5px;
  text-decoration: none;
  &:hover,&:focus,&.active{
    outline: none;
    // border:none;
    color: map-get($color-green,'500');
  }
}
// ------------flex box---------
.flex-conainer{
  display: flex;
  &.flex-row{
    flex-direction: row;
  }
  &.flex-column{
    flex-direction: column;
  }
}
.flex{
  // flex:1 1 auto;
  // flex-grow:auto;
  flex:1;
  // 用下面参数指定自己的位置
  // align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
// older version, what i used before, put it here 以防万一
.flex-grid {
  /*  As of August 2012, only supported in Chrome 21+ */
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;
  display: flex;
  min-height: 200px;
}
.flex-grid .fluid {
  -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 1;         /* OLD - Firefox 19- */
  -webkit-flex: 1;          /* Chrome */
  -ms-flex: 1; 
  flex: 1;
}
// -----------------
// -======================================= center an div =============
  /* This parent can be any width and height */
  .gf-centered-wraper {
    text-align: center;
  }
  /* The ghost, nudged to maintain perfect centering */
  .gf-centered-wraper:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em; /* Adjusts for spacing */
  }

  /* The element to be centered, can
     also be of any width and height */ 
  .gf-centered {
    display: inline-block;
    vertical-align: middle;
    max-width: 95%;
  }

// ------------flex box---------
.flex-conainer{
  display: flex;
  &.flex-row{
    flex-direction: row;
  }
  &.flex-column{
    flex-direction: column;
  }
}
.flex{
  // flex:1 1 auto;
  // flex-grow:auto;
  flex:1;
  // 用下面参数指定自己的位置
  // align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
// older version, what i used before, put it here 以防万一
.flex-grid {
  display: flex;
  min-height: 200px;
}
.fluid {
  flex: 1;
}

// ----------- scroll bar style ------------
// ----chrome---------
// ::-webkit-scrollbar
// {
//   width: 10px;  /* for vertical scrollbars */
//   height: 12px; /* for horizontal scrollbars */
// }

// ::-webkit-scrollbar-track
// {
//   background: rgba(0, 0, 0, 0.06);
// }

// ::-webkit-scrollbar-thumb
// {
//   background: rgba(0, 0, 0, 0.1);
// }

// -------------
.avatar{
  img,svg{
    width:100%;
  }
}
.close-btn{
  width:60px;
  height:60px;
  display: block;
  cursor: pointer;
  background: url('../img/icons/ios7-close-outline-light.svg') center center no-repeat;
  transition:transform .5s cubic-bezier(.27,1.64,.32,.95);
  &:hover{
      transform:rotate(90deg);
  }
}
.cover-mat{
  width:100%;
  height:100%;
  // background-color: rgba(42,46,57,0.7);
  background:rgba(42,46,57,0.1) url(../img/pattern.png);
  position:absolute;
  top: 0;
  left:0;
  z-index: 2;
}
// ======================
.overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(40,49,56,0.95);
  z-index: 10000;
}

.no-js .overlay, 
.overlay.hide {
  -webkit-transition: opacity 0.3s, visibility 0.3s;
  transition: opacity 0.3s, visibility 0.3s;
  visibility: hidden;
}



// --------------------------
.ua-line-loadin{
  position: relative;
  &::after{
    content:'';
    display: block;
    position: absolute;
    top: 50%;
    // left: 0;
    width:0;
    // right: 0;
    height: 4px;
    background: map-get($color-green, '300');
    animation: uac-line-load-in 1s 0.3s ease-out;
  }
}

@keyframes uac-line-load-in {
  0% {
    // left: 0;
    width:0;
  }
  30%{
    // left:0;
    width: 100%;
  }
  35%{
    // left:0;
    width: 100%;
  }
  50%{
    // right: 0;
    width: 100%;
  }
  100% {
    right: 0;
    width: 0;
  }
}
// --------------------------
.uac-toggle-barcircle {
  float: left;
  cursor: pointer;
  position: relative;
  display: block;
  width: 68px;
  height: 68px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin: 10px;
  /*--- make the size fit you need ---*/ 
  transform:scale(0.8);
  .uac-bottom,.uac-top{
     background: #fff;
      position: absolute;
      display: block;
      height: 2px;
      width: 36px;
      border-radius: 1px;

     transform-origin: 34px 2px;
     transform: rotate(0deg);
     transition: all 500ms cubic-bezier(0.8, -1.1, 0.5, 1.9);
  }
  .uac-top{
    top: 20px;
    left: 14px;
  }
  .uac-bottom{
    top: 43px;
    left: 14px;
  }
  path,line{ 
    stroke: white;
    stroke-linecap: round;
  }
  .uac-circle {
    display: inline-block;
    border-radius: 50px;
    vertical-align: middle;
    margin: 0 5px;

    stroke-dasharray: 1 100 32 300;
    stroke-dashoffset: 101;
    transition: all 750ms ease;
  }
  	&.uac-close{
		.uac-top{
		transform: translateX(-4.5px) rotate(-45deg);
		}
		.uac-bottom{
		transform: translateX(-4.5px) rotate(45deg);
		}
		.uac-circle {
			stroke-dasharray: 1 100 190 300;
			stroke-dashoffset: 1;
		}
	}
	&.uac-dark{
		.uac-bottom,.uac-top{
     		background: #333;
     	}
     	path,line{ 
   			 stroke: #333;
   		}
	}
}
// ------------------------------------
.uac-words{
  display: inline-block;
  position: relative;
  text-align: left;
  b {
    display: inline-block;
    position: absolute;
    white-space: nowrap;

    left: 0;
    top: 0;

    &.uac-visible {
      position: relative;
    }
    i,em{
      // font-style: normal;
      font-weight: bold;
    }
  }
}
.uac-words.uac-letter-type{
  vertical-align: top;
  overflow: hidden;
  padding-right: 0.1em;
  &::after {
    /* vertical bar */
    content: '';
    position: absolute;
    right: 0;
    bottom:0 ;
    height: 90%;
    width: 2px;
    background-color: rgba(255,255,255,0.9);
  }
  &.uac-waiting::after {
    animation:uac-pulse 1s infinite;
  } 

  &.uac-selected {
    background-color: map-get($color-blue,'200');//rgba(0,88,180,0.5)
    &::after {
      visibility: hidden;
    }

    b {
      color: #fff;
    }
  }
  b {
    visibility: hidden;
    &.uac-visible {
      visibility: visible;
    }
    &.uac-hidden {
      visibility: hidden;
    }
  }
  i {
    position: absolute;
    visibility: hidden;
    &.uac-in {
      position: relative;
      visibility: visible;
    }
  }

}
@keyframes uac-pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  40% {
    transform: scale(0.9);
    opacity: 0;
  }

  100% {
    transform: scale(0);
    opacity: 0;
  }
}

// ---------------------