#tpdialog .bg{width:100%;height:100%;background: #222;opacity: .4;position: fixed;left:0;top:0;z-index: 10000;}
#tpdialog .cbx{width:500px;height:200px;overflow: hidden;position: fixed;z-index:10001;left:50%;top:50%;
    margin-left:-250px;margin-top:-100px;
	-webkit-animation-duration:.8s;
	animation-duration:.8s;
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both;
    -webkit-animation-name:bounceIn;
	animation-name:bounceIn;
    background: #fff;
    box-shadow: 0 12px 20px 18px rgba(200,200,200,.2);
}
#tpdialog .cbx h2{height:50px;padding:0 0 0 15px;background: #f5f5f5;line-height: 50px;border-bottom: solid 1px #eee;}
#tpdialog .cbx h2 span{float:left;font-size:14px;color:#333;font-weight: bold;}
#tpdialog .cbx h2 i{float:right;width:50px;height:50px;display: block;background: url("../images/icon_close_g.png") no-repeat center;background-size:12px;transition: all .5s;}
#tpdialog .cbx h2 i:hover{cursor: pointer;transform: rotate(180deg)}
#tpdialog .cbx .text{padding:20px;text-align: center;min-height:50px;line-height: 45px;font-size:15px;color:#666;overflow: hidden;}
#tpdialog .cbx .text b{color:#c52d2a;}
#tpdialog .cbx .text p{line-height: 20px;font-size:12px;color:#f36a6a;}
#tpdialog .cbx .btn{text-align: center;}
#tpdialog .cbx .btn a{color:#e00c0c;display: inline-block;margin-left:20px;vertical-align: 1px;}
#tpdialog .cbx .btn button{width:100px;height:32px;font-size:13px;text-align: center;background: #eee;color: #999;margin:0 8px;display: inline-block;border:0;transition: all .3s;}
#tpdialog .cbx .btn button.sure{background: #c52d2a;color:#fff;}
#tpdialog .cbx .btn button:hover{opacity: .8;cursor: pointer;}
#tpdialog .cbx2 .txt{font-size:16px;line-height: 50px;}
#tpdialog .toast{width:300px;height:80px;line-height: 80px;text-align: center;background: rgba(89,70,38, 0.8);margin-left:-150px;margin-top:-40px;color:#fff;font-size:14px;}

#tpdialog .lingbg,#tpdialog .lingbx{width:150px;height:150px;margin-left:-75px;margin-top:-75px;
  position: fixed;z-index:10001;left:50%;top:50%;background:#594626;opacity: .8;}
#tpdialog .lingbx{z-index: 10002;background: none;opacity: 1;}
#tpdialog .lingbx .loadok{width:72px;height:72px;border-radius: 50%;margin: 25px auto 5px auto;overflow: hidden;border:solid 0px #09f;
  background:url("../img/icon_success.png") no-repeat center;background-size: 100%}
#tpdialog .lingbx .loaderror{width:72px;height:72px;border-radius: 50%;margin: 25px auto 5px auto;overflow: hidden;border:solid 0px #09f;
  background:url("../img/icon_fair.png") no-repeat center;background-size: 56px;}
#tpdialog .lingbx .loadnum{background:none;color:#fff;font-size:46px;line-height: 70px;text-align: center;border:solid 1px #fff;margin-bottom: 15px;}
#tpdialog .lingbx .text{text-align: center;font-size:14px;color:#fff;}
#tpdialog .lingbx .text b{color:#c00;font-weight: normal;}
#tpdialog .lingbx .loader {
  position: relative;
  margin: 20px auto 10px auto;
  width: 80px;
}
#tpdialog .lingbx .loader:before {
  content: '';
  display: block;
  padding-top: 100%;
}
#tpdialog .lingbx .circular {
  -webkit-animation: rotate 2s linear infinite;
          animation: rotate 2s linear infinite;
  height: 100%;
  -webkit-transform-origin: center center;
          transform-origin: center center;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
#tpdialog .lingbx .path {
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  -webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
          animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
  stroke-linecap: round;
}
@-ms-keyframes  rotate {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@-ms-keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px;
  }
}
@-webkit-keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px;
  }
}
@keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px;
  }
}

@-ms-keyframes color {
  100%,
  0% {
    stroke: #fff;
  }
  40% {
    stroke: #fff;
  }
  66% {
    stroke: #fff;
  }
  80%,
  90% {
    stroke: #fff;
  }
}
@-webkit-keyframes color {
  100%,
  0% {
    stroke: #fff;
  }
  40% {
    stroke: #fff;
  }
  66% {
    stroke: #fff;
  }
  80%,
  90% {
    stroke: #fff;
  }
}
@keyframes color {
  100%,
  0% {
    stroke: #fff;
  }
  40% {
    stroke: #fff;
  }
  66% {
    stroke: #fff;
  }
  80%,
  90% {
    stroke: #fff;
  }
}

@-ms-keyframes bounceIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(.3);
        -ms-transform: scale(.3);
        transform: scale(.3)
    }
    50% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
    70% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
}
@-webkit-keyframes bounceIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(.3);
        -ms-transform: scale(.3);
        transform: scale(.3)
    }
    50% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
    70% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
}
@keyframes bounceIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(.3);
        -ms-transform: scale(.3);
        transform: scale(.3)
    }
    50% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
    70% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
}



#loader-wrap{
    display: none;
}
#loader-container {
  width: 100px;
  height: 100px;
  color: white;
  margin: 0 auto;
  position: fixed;
  z-index: 10000;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  border: 3px solid #ff5151;
  border-radius: 50%;
    overflow: hidden;
    background: #fff;
  -webkit-animation: borderScale 1.5s infinite ease-in-out;
  animation: borderScale 1.5s infinite ease-in-out;
}

#loadingText {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: fixed;
  z-index: 10001;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
    background: #fff;
}
@-ms-keyframes borderScale {
  0% {
    border: 3px solid white;
  }
  50% {
    border: 15px solid #ff5151;
  }
  100% {
    border: 3px solid white;
  }
}
@-webkit-keyframes borderScale {
  0% {
    border: 3px solid white;
  }
  50% {
    border: 15px solid #ff5151;
  }
  100% {
    border: 3px solid white;
  }
}
@keyframes borderScale {
  0% {
    border: 3px solid white;
  }
  50% {
    border: 15px solid #ff5151;
  }
  100% {
    border: 3px solid white;
  }
}

#tpdialog .match-cbx{
width: 600px;
    height: 250px;
    margin-left: -300px;
    margin-top: -125px;
}
#tpdialog .match-cbx .m-title{
    display: flex;
    align-items: center;
    padding: 20px 20px;
}
#tpdialog .match-cbx .tn{
  margin-right: 30px;
}
#tpdialog .match-cbx .tn span{
    padding-right: 10px;
}
#tpdialog .match-cbx .tn b{
    font-weight: normal;
    padding-left: 8px;
}
#tpdialog .match-cbx .text{
    color: #444444;
}
#tpdialog .match-cbx .zd{
    font-size: 17px;
}
#tpdialog .match-cbx .vs{
    /* font: 26px/0 Arial;*/
    /*color: #c52d2a;*/
    /*padding: 0 30px;*/
    display: inline-block;
    background: url("/static/icon/icon_vs.png")no-repeat center;
    width: 33px;
    height: 13px;
    background-size: 100%;
    margin: 0 20px;
}
#tpdialog .match-cbx .sp{}
#tpdialog .match-cbx .xp{}
#tpdialog .match-cbx .amt{
    font: 20px/0 Arial;
    color: #c52d2a;
    padding: 0 4px 0 6px;
}
#tpdialog .match-cbx .sl{
    color: #c52d2a;
}