.bg-it,
       .fc-agenda .bg-it .fc-event-time,
      .bg-it div,
      .bg-it span {
      background-color: #093;     /* border color */
      color: white;           /* text color */
      padding-top: 2px;
      padding-bottom: 2px;
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      font-size: 14px;
      padding:2px;
      }
      .bg-plan,
      .fc-agenda .bg-plan .fc-event-time,
      .bg-plan div,
      .bg-plan span {
      background-color: #09F;     /* border color */
      color: white;           /* text color */
      padding-top: 2px;
      padding-bottom: 2px;
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      font-size: 14px;
      padding:2px;
      }
      .bg-production,
      .fc-agenda .bg-production .fc-event-time,
      .bg-production div,
      .bg-production span {
      background-color: #666;     /* border color */
      color: white;           /* text color */
      padding-top: 2px;
      padding-bottom: 2px;
      padding:2px;
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      font-size: 14px;
      }
      .bg-manage,
      .fc-agenda .bg-manage .fc-event-time,
      .bg-manage div,
      .bg-manage span {
      background-color: #F60;     /* border color */
      color: white;           /* text color */
      padding-top: 2px;
      padding-bottom: 2px;
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      font-size: 14px;
      padding:2px;
      }
      .bg-money,
      .fc-agenda .bg-money .fc-event-time,
      .bg-money div,
      .bg-money span {
      background-color: #FF0080;     /* border color */
      color: white;           /* text color */
      padding-top: 2px;
      padding-bottom: 2px;
      padding:2px;
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      font-size: 14px;
      }
      .bg-distribution,
      .fc-agenda .bg-distribution .fc-event-time,
      .bg-distribution div,
      .bg-distribution span {
      background-color: #F03;     /* border color */
      color: white;           /* text color */
      padding-top: 2px;
      padding-bottom: 2px;
      padding:2px;
      border-bottom-left-radius:4px;
      border-bottom-right-radius:4px;
      border-top-left-radius:4px;
      border-top-right-radius:4px;
      font-size: 14px;
      }

      .bg-holiday,
       .fc-agenda .bg-holiday .fc-event-time,
      .bg-holiday div,
      .bg-holiday span {
      /*background-color: #ff9f89;     /* border color */
      color: white;           /* text color */
      font-size: 10px;

      }

      .wizard_horizontal ul.wizard_steps {
        display: table;
        list-style: none;
        position: relative;
        width: 100%;
        margin: auto;
      }
      .wizard_horizontal ul.wizard_steps li {
        display: table-cell;
        text-align: center;
      }
      .wizard_horizontal ul.wizard_steps li a, .wizard_horizontal ul.wizard_steps li:hover {
        display: block;
        position: relative;
        -moz-opacity: 1;
        filter: alpha(opacity: 100);
        opacity: 1;
        color: #666;
      }
      .wizard_horizontal ul.wizard_steps li a:before {
        content: "";
        position: absolute;
        height: 4px;
        background: #ccc;
        top: 20px;
        width: 100%;
        z-index: 4;
        left: 0;
      }
      .wizard_horizontal ul.wizard_steps li a.disabled .step_no {
        background: #ccc;
      }
      .wizard_horizontal ul.wizard_steps li a .step_no {
        width: 40px;
        height: 40px;
        line-height: 40px;
        border-radius: 100px;
        display: block;
        margin: 0 auto 5px;
        font-size: 16px;
        text-align: center;
        position: relative;
        z-index: 5;
      }
      .wizard_horizontal ul.wizard_steps li a.selected:before, .step_no {
        background: #34495E;
        color: #fff;
      }
      .wizard_horizontal ul.wizard_steps li a.done:before, .wizard_horizontal ul.wizard_steps li a.done .step_no {
        background: #1ABB9C;
        color: #fff;
      }
      .wizard_horizontal ul.wizard_steps li:first-child a:before {
        left: 50%;
      }
      .wizard_horizontal ul.wizard_steps li:last-child a:before {
        right: 50%;
        width: 50%;
        left: auto;
      }
      /* แสดงสีห้องประชุมในปฏิทิน */
      .bg-room1,
      .fc-agenda .bg-room1 .fc-event-time,
      .bg-room1 div,
      .bg-room1 span {
      background-color: #42d29d;     /* border color */
      color: white;           /* text color */
      padding-top: 2px;
      padding-bottom: 2px;
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      font-size: 14px;
      padding:2px;
      }
      .bg-room2,
      .fc-agenda .bg-room2 .fc-event-time,
      .bg-room2 div,
      .bg-room2 span {
      background-color:#fa6767;     /* border color */
      color: white;           /* text color */
      padding-top: 2px;
      padding-bottom: 2px;
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      font-size: 14px;
      padding:2px;
      }
      .bg-room3,
      .fc-agenda .bg-room3 .fc-event-time,
      .bg-room3 div,
      .bg-room3 span {
      background-color:#F9BC14;     /* border color */
      color: white;           /* text color */
      padding-top: 2px;
      padding-bottom: 2px;
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      font-size: 14px;
      padding:2px;
      }
      .bg-room4,
      .fc-agenda .bg-room4 .fc-event-time,
      .bg-room4 div,
      .bg-room4 span {
      background-color:#919CAB;     /* border color */
      color: white;           /* text color */
      padding-top: 2px;
      padding-bottom: 2px;
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      font-size: 14px;
      padding:2px;
      }
      .bg-room5,
      .fc-agenda .bg-room5 .fc-event-time,
      .bg-room5 div,
      .bg-room5 span {
      background-color:#474d56;     /* border color */
      color: white;           /* text color */
      padding-top: 2px;
      padding-bottom: 2px;
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      font-size: 14px;
      padding:2px;
      }
      .bg-room6,
      .fc-agenda .bg-room6 .fc-event-time,
      .bg-room6 div,
      .bg-room6 span {
      background-color:#44badc;     /* border color */
      color: white;           /* text color */
      padding-top: 2px;
      padding-bottom: 2px;
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      font-size: 14px;
      padding:2px;
      }
      .selectgroup {
  display: -ms-inline-flexbox;
  display: inline-flex;
}

.selectgroup-vertical {
  -ms-flex-direction: column;
  flex-direction: column;
}

.selectgroup-item {
  -ms-flex-positive: 1;
  flex-grow: 1;
  position: relative;
}

.selectgroup:not(.selectgroup-vertical) > .selectgroup-item + .selectgroup-item {
  margin-left: -1px;
}

.selectgroup:not(.selectgroup-vertical) > .selectgroup-item:not(:first-child) .selectgroup-button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.selectgroup:not(.selectgroup-vertical) > .selectgroup-item:not(:last-child) .selectgroup-button {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.selectgroup-vertical > .selectgroup-item:not(:last-child) {
  margin-bottom: 0;
}

.selectgroup-vertical > .selectgroup-item + .selectgroup-item {
  margin-top: -1px;
  margin-left: 0;
}

.selectgroup-vertical > .selectgroup-item:not(:first-child) .selectgroup-button {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.selectgroup-vertical > .selectgroup-item:not(:last-child) .selectgroup-button {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.selectgroup-input {
  opacity: 0;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
}

.selectgroup-button {
  display: block;
  border: 1px solid rgba(0, 40, 100, 0.12);
  text-align: center;
  padding: 0.375rem 1rem;
  position: relative;
  cursor: pointer;
  border-radius: 3px;
  color: #9aa0ac;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-size: 0.9375rem;
  line-height: 1.5rem;
  min-width: 2.375rem;
}

.selectgroup-button-icon {
  padding-left: .5rem;
  padding-right: .5rem;
  font-size: 1rem;
}

.selectgroup-input:checked + .selectgroup-button {
  border-color: #467fcf;
  z-index: 1;
  color: #467fcf;
  background: #edf2fa;
}

.selectgroup-input:focus + .selectgroup-button {
  border-color: #467fcf;
  z-index: 2;
  color: #467fcf;
  box-shadow: 0 0 0 2px rgba(70, 127, 207, 0.25);
}

.selectgroup-pills {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: start;
  align-items: flex-start;
}

.selectgroup-pills .selectgroup-item {
  margin-right: .5rem;
  -ms-flex-positive: 0;
  flex-grow: 0;
}

.selectgroup-pills .selectgroup-button {
  border-radius: 50px !important;
}

.custom-switch {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
  align-items: center;
  margin: 0;
}

.custom-switch-input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

.custom-switches-stacked {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
}

.custom-switches-stacked .custom-switch {
  margin-bottom: .5rem;
}

.custom-switch-indicator {
  display: inline-block;
  height: 1.25rem;
  width: 2.25rem;
  background: #e9ecef;
  border-radius: 50px;
  position: relative;
  vertical-align: bottom;
  border: 1px solid rgba(0, 40, 100, 0.12);
  transition: .3s border-color, .3s background-color;
}

.custom-switch-indicator:before {
  content: '';
  position: absolute;
  height: calc(1.25rem - 4px);
  width: calc(1.25rem - 4px);
  top: 1px;
  left: 1px;
  background: #fff;
  border-radius: 50%;
  transition: .3s left;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
}

.custom-switch-input:checked ~ .custom-switch-indicator {
  background: #467fcf;
}

.custom-switch-input:checked ~ .custom-switch-indicator:before {
  left: calc(1rem + 1px);
}

.custom-switch-input:focus ~ .custom-switch-indicator {
  box-shadow: 0 0 0 2px rgba(70, 127, 207, 0.25);
  border-color: #467fcf;
}

.custom-switch-description {
  margin-left: .5rem;
  color: #6e7687;
  transition: .3s color;
}

.custom-switch-input:checked ~ .custom-switch-description {
  color: #495057;
}
.hr-line{
  border-bottom-style: solid;
  padding:4px;
  border-width: 1px;
  border-color: #eee;

}
.fw-msgbox{

  background-color: #FFF;
  height: calc(1.8725rem + 2px);
    padding: 0.28rem 0.8rem;
    font-size: 0.875rem;
    line-height: 1.8;
    border-radius: 0.2rem;
    width: 90%;
    margin-left: 30px;
}
.space-bar{
  margin-top:2px;
  border-style:solid;
  border-color: #FFF;
}
.cm-box-white{
  padding:10px;
  background-color: #FFF;
  border-radius:5px;
  width: 100%;
}
.coin-text{
  font-size: 22px;
color: #ffc107;
font-family: Arial Black, Gadget, sans-serif;
text-shadow: 0px 0px 0 rgb(169,107,0),
            1px 1px 0 rgb(82,20,0),
            2px 2px  0 rgb(-4,-66,0),
            3px 3px 2px rgba(0,0,0,0.26),
            3px 3px 1px rgba(0,0,0,0.5),
            0px 0px 2px rgba(0,0,0,.2);
}
.heart-text {
  font-size: 22px;
   color: #00a6ff;
   font-family: Arial Black, Gadget, sans-serif;
   text-shadow: 0px 0px 0 rgb(-86,80,169),
                1px 1px 0 rgb(-173,-7,82),
                2px 2px  0 rgb(-259,-93,0),
                3px 3px 2px rgba(0,0,0,0.26),
                3px 3px 1px rgba(0,0,0,0.5),
                0px 0px 2px rgba(0,0,0,.2);
 }
.img-market{
  width: 100%;
  text-align: center;
  margin-top:40px;
  margin-left: auto;
  margin-right: auto;

}
.img-35px{
  min-height: 50px;
}
.box-title-course{
  min-height: 100px;
}
p.stat-course{
  position:absolute;
  vertical-align: bottom;
}
.comment-content{
  max-height: 100px;
  min-width: 200px;
  margin-top: 10px;
  margin-left:2px;
  overflow-wrap:break-word;
}
.comment-avatar{
  text-align: center;
  width: 170px;
  /*border-radius: 4px;*/
  border-color: #eee;
  /*border-width: thin;*/

  border-right-style: solid;
  height: auto;
  min-height: 100px;

  margin-right: 5px;
  background-color: #E5EDF2;
}
.comment-name{
  font-size: 14px;
  font-weight: bold;
  margin-top:5px;

}
.comment_level{
  margin-top: 5px;
  list-style: none;
  text-align: left;
  float: left;
  display: inline-flex;
  padding-inline-start: 15px;
  font-size: 14px;
}
.img-item{
  margin-top: 5px;
  margin-bottom: 5px;
}

.media-comment{
  border-radius: 4px;
  border-color: #eee;
  border-width: thin;
  border-style: solid;
  /*padding:20px;*/
  background-color: #fff;
  border-top-width: 5px;


}
.head-action{
border-bottom: 1px dashed #CDCDCD;
  padding-bottom: 0px;
  text-align: left;
  margin-right: 5px;

}
.name-avatar{
  border-bottom: 1px dashed #CDCDCD;
    padding-bottom: 5px;
    margin-bottom: 5px;
    text-align: center;
    font-size:14px;
    font-weight: bold;
    padding:5px;
}
.title-avatar{
    color:#343a40;
}
#clockdiv{
    font-family: sans-serif;
    color: #fff;
    display: inline-block;
    font-weight: 100;
    text-align: center;
    font-size: 30px;
}

#clockdiv > div{
    padding: 10px;
    border-radius: 3px;
    background: #00BF96;
    display: inline-block;
}

#clockdiv div > span{
    padding: 15px;
    border-radius: 3px;
    background: #00816A;
    display: inline-block;
}

.smalltext{
    padding-top: 5px;
    font-size: 16px;
}
.point_bg_score1{
  background-color: #64dd17;
  padding:4px;
  color:#fff;
  font-weight: bold;
}
.point_bg_score2{
  background-color: #ccff90;
  padding:4px;
  color:#fff;
  font-weight: bold;
}
.point_bg_score4{
  background-color: #80d8ff;
  padding:4px;
  color:#fff;
  font-weight: bold;
}
.point_bg_score3{
  background-color: #01579b;
  padding:4px;
  color:#fff;
  font-weight: bold;
}
.point_bg_score5{
  background-color: #fb8c00;
  padding:4px;
  color:#fff;
  font-weight: bold;
}
.point_bg_score6{
  background-color: #ffb300;
  padding:4px;
  color:#fff;
  font-weight: bold;
}
.point_bg_score7{
  background-color: #4a148c;
  padding:4px;
  color:#fff;
  font-weight: bold;
}
.point_bg_score8{
  background-color: #ea80fc;
  padding:4px;
  color:#fff;
  font-weight: bold;
}
.point_bg_score8{
  background-color: #b71c1c;
  padding:4px;
  color:#fff;
  font-weight: bold;
}
.point_bg_score8{
  background-color: #ff8a80 ;
  padding:4px;
  color:#fff;
  font-weight: bold;
}
.point_bg_score_d{
  background-color: #cfd8dc ;
  padding:4px;
  color:#CCC;
  font-weight: bold;
}
/* wheel css กงล้อมหาสนุก*/
.the_wheel{
  background-image: url(../../asset/img/wheel/wheel_back.png);
    background-position: center;
    background-repeat: none;

  }
  .leader-coin{
    padding:6px;
    border-radius: 5px;
    background-color: #004c92;
    color:#FFF;
    width: 150px;
    font-size:20px;
    font-weight: 600;
    margin-right: 10px;

  }
.leader-box{
  background-color: #006edd;
  padding:5px;
  color:#FFF;
  border-radius: 4px;
  margin-top:3px;
  font-weight: 600;
  font-size: 20px;
}
h4.leader-header{
  font-size:24px;
  background-color: #db26c1;
  color:#FFF;
  padding:10px;
  width: auto;
  margin-left: auto;
  margin-right: auto;
  border-radius: 4px;
  border-color: #a10072;
  border-width: 5px;
  border-style: solid;
}
.top-leaderboard-box{
  background-color: #2f93c7;
  border-radius: 4px;
  border-color: #FFF;
  border-style:solid;
  border-width: 5px;
}
.top-box{
    background-color: #2892c4;
    font-weight: 600;
    font-size: 30px;
    color:#FFF;
}
.leader-box-arcade{
  background-color: #012a68;
  padding:5px;
  color:#FFF;
  border-radius: 4px;
  margin-top:3px;
  font-weight: 600;
  font-size: 20px;
}
.name-top-leader{
  font-size: 14px;
  color:#FFF;
  background-color: #0360ec;
  padding:5px;
  margin-left:110px;
  border-radius: 8px;
}
.leader-coin-arcade{
  padding:6px;
  color:#FFF;
  width: 150px;
  font-size:16px;
  font-weight: 600;
  margin-right: 10px;

}
.title-topleader{
  font-size:28px;
  color:#FFF;
  font-weight: 600;
}
.inner-leaderboard{
  padding:25px;
  background-color: #51b3da;
  border-radius: 4px;
}
.bank-card{
  padding:30px;

}
.transaction-menu{
  padding: 10px;

  border-radius: 4px;
  background-color: #FFF;
}
.bank-box{
  background-color:#f7f8fa;
  border-radius: 4px;
  padding:10px;
}
.outsite-bank-box{
  background-color: #FFF;
  padding:8px;
  border-radius: 8px;
}
.menu-bank-icon{
  margin-left: auto;
  margin-right: auto;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  background-color: #f7f8fa;
}
.cur-icon-list{
  border-radius: 50%;
  width: 16px;
  height: 16px;
  background-color:#3688fc;
  padding:5px;
  color:#FFF;
}
.arcade-icon{
/*  border-radius: 20%;*/
  padding:6px;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
}
.header-leaderboardA{
  background-color:#847ad1;
}
.header-leaderboard{
  background-color:#7ad18a;
}
.btn-purple{
  background-color:#847ad1;
  color:#FFF;
  padding:10px;
}
.btn-green{
  background-color:#7ad18a;
  color:#FFF;
  padding:10px;
}
/* game */
.bg-village{
  background-image: url(../../asset/img/games/grass.jpg);
  background-repeat: repeat;
  height: 504px;
  z-index: -1000;
}
.water-across{
/*  background-image: url(../../asset/img/games/resource/Tiles/liquidWater.png);
  background-repeat: repeat;
  z-index: -100;
  height: 70px;
  */
}
.useronline-box{
  /*
  background-color: #FFF;
  padding:10px;
  float: left;
  width: 100%;
  */
}
.useronline-text{
  font-size: 12px;
  font-weight: bold;
  color:#333;
  margin-top: 5px;
}
/*card new */
.card-annouce{
  padding:20px;
  border-radius: 10px;
  background-color: #f18973;
  color:#FFF;
  margin-bottom: 10px;

}
/*card*/
.deck {
	width: 100%;
	background: #716F71;
	padding: 1rem;
	border-radius: 4px;
	box-shadow: 8px 9px 26px 0 rgba(46, 61, 73, 0.5);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
	/*margin: 0 0 3em;*/
  margin-left: auto;
  margin-right: auto;
}

.deck .card {
	height: 3.7rem;
	width: 3.7rem;
	margin: 0.2rem 0.2rem;
	background: #141214;;
	font-size: 0;
	color: #ffffff;
	border-radius: 5px;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 5px 2px 20px 0 rgba(46, 61, 73, 0.5);
}

.deck .card.open {
	transform: rotateY(0);
	background: #02b3e4;
	cursor: default;
	animation-name: flipInY;
	-webkit-backface-visibility: visible !important;
	backface-visibility: visible !important;
	animation-duration: .75s;
}

.deck .card.show {
	font-size: 33px;
}

.deck .card.match {
	cursor: default;
	background: #E5F720;
	font-size: 33px;
	animation-name: rubberBand;
	-webkit-backface-visibility: visible !important;
	backface-visibility: visible !important;
	animation-duration: .75s;
}

.deck .card.unmatched {
	animation-name: pulse;
	-webkit-backface-visibility: visible !important;
	backface-visibility: visible !important;
	animation-duration: .75s;
	background: #e2043b;
}

.deck .card.disabled {
	pointer-events: none;
	opacity: 0.9;
}


/*
 * Styles for the Score Panel
 */


.score-panel {
	text-align: left;
	margin-bottom: 10px;
}

.score-panel .stars {
	margin: 0;
	padding: 0;
	display: inline-block;
	margin: 0 5px 0 0;
}

.score-panel .stars li {
	list-style: none;
	display: inline-block;
}

.score-panel .restart {
	float: right;
	cursor: pointer;
}

.fa-star {
	color: #FFD700;
}

.timer {
	display: inline-block;
	margin: 0 1rem;
}


/*
 * Styles for congratulations modal
 */


.overlay {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.7);
	transition: opacity 500ms;
	visibility: hidden;
	opacity: 0;
}

.overlay:target {
	visibility: visible;
	opacity: 1;
}

.popup {
	margin: 70px auto;
	padding: 20px;
	background: #ffffff;
	border-radius: 5px;
	width: 85%;
	position: relative;
	transition: all 5s ease-in-out;
	font-family: 'Sarabun', cursive;
}

.popup h2 {
	margin-top: 0;
	color: #333;
	font-family: 'Sarabun',Tahoma, Arial, sans-serif;
}

.popup .close {
	position: absolute;
	top: 20px;
	right: 30px;
	transition: all 200ms;
	font-size: 30px;
	font-weight: bold;
	text-decoration: none;
	color: #333;
}

.popup .close:hover {
	color: #E5F720;
}

.popup .content-1,
.content-2 {
	max-height: 30%;
	overflow: auto;
	text-align: center;
}

.show {
	visibility: visible !important;
	opacity: 100 !important;
}

#starRating li {
	display: inline-block;
}

#play-again {
	background-color: #141214;
	padding: 0.7rem 1rem;
	font-size: 1.1rem;
	display: block;
	margin: 0 auto;
	width: 50%;
	font-family: 'Sarabun', cursive;
	color: #ffffff;
	border-radius: 5px;
}

/* animations */
@keyframes flipInY {
	from {
		transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
		animation-timing-function: ease-in;
		opacity: 0;
	}

	40% {
		transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
		animation-timing-function: ease-in;
	}

	60% {
		transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
		opacity: 1;
	}

	80% {
		transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
	}

	to {
		transform: perspective(400px);
	}
}

@keyframes rubberBand {
	from {
		transform: scale3d(1, 1, 1);
	}

	30% {
		transform: scale3d(1.25, 0.75, 1);
	}

	40% {
		transform: scale3d(0.75, 1.25, 1);
	}

	50% {
		transform: scale3d(1.15, 0.85, 1);
	}

	65% {
		transform: scale3d(.95, 1.05, 1);
	}

	75% {
		transform: scale3d(1.05, .95, 1);
	}

	to {
		transform: scale3d(1, 1, 1);
	}
}

@keyframes pulse {
	from {
		transform: scale3d(1, 1, 1);
	}

	50% {
		transform: scale3d(1.2, 1.2, 1.2);
	}

	to {
		transform: scale3d(1, 1, 1);
	}
}


/****** Media queries
***************************/


@media (max-width: 320px) {
	.deck {
		width: 85%;
	}

	.deck .card {
		height: 4.7rem;
		width: 4.7rem;
	}
}


/* For Tablets and larger screens
****************/

@media (min-width: 768px) {
	.container {
		font-size: 22px;
	}

	.deck {
		width: 660px;
		height: 680px;
	}

	.deck .card {
		height: 125px;
		width: 125px;
	}

	.popup {
		width: 60%;
	}
}
.top-rank{
  padding:10px;
  border-radius: 4px;
  height: 480px;
  /*background-color: #380629;*/
  /*background-image: url('../../asset/img/bg-top-leader.jpg');*/
  background-repeat:no-repeat;
  width: 100%;
}
h4.header-topscore{
  background-color: #7fb837;
  padding:1px;
  width: 300px;
  color:#FFF;
  margin-left: auto;
  margin-right: auto;
  border-radius: 10px;
}
h6.header-topscore{
  background-color: #7fb837;
  padding:2px;
  width: 150px;
  color:#FFF;
  margin-left: auto;
  margin-right: auto;
  border-radius: 10px;
}
.rank-badge{
  position: relative;
    background-color: #fed33c;
    height:24px;
    top:1rem;
    right:1.5rem;
    width:24px;
    padding:3px;
    text-align: center;
    line-height: 2rem;;
    font-size: 16px;
    font-weight: bold;
    border-radius: 50%;
    color:#d69902;
    border:1px solid;
    border-color:#feb500;
}
.img-rank{
  position:relative;
   display:inline-block;
}
.area{
    background: #4e54c8;
    background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8);
    width: 100%;
    height:480px;


}

.circles{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.circles li{
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    animation: animate 25s linear infinite;
    bottom: -150px;

}

.circles li:nth-child(1){
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}


.circles li:nth-child(2){
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s;
}

.circles li:nth-child(3){
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
}

.circles li:nth-child(4){
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}

.circles li:nth-child(5){
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}

.circles li:nth-child(6){
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}

.circles li:nth-child(7){
    left: 35%;
    width: 150px;
    height: 150px;
    animation-delay: 7s;
}

.circles li:nth-child(8){
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}

.circles li:nth-child(9){
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
}

.circles li:nth-child(10){
    left: 85%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 11s;
}



@keyframes animate {

    0%{
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }

    100%{
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }

}
/*pattern*/
.pt4 {

    background-size: 50px 50px;
    background-color: #ac0;
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
    background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
    background-image: -ms-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
}


.pt1 {
    z-index: -9999;
    border-radius: 6px;
    height: auto;
    padding: 5px;
    background-size: 50px 50px;
    background-color: #0ae;
    background-image: -webkit-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
    background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
    background-image: -ms-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
    background-image: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
    background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
}
.bounder-outside{

  margin-left: 10px;
  margin-right: 10px;
  margin-top: 10px;
  margin-bottom:10px;
    border-radius: 20px;
  border-width:11px;
  border-style: solid;
  border-color: #cb8c49;
  background-color: #fdce76;
}
.topscore{
  margin-left: auto;
  margin-right: auto;
  padding:10px;
  background-color: #b5130e;
  color: #FFF;
  width: 70%;
  text-align: center;
  border-radius: 6px;
}
.simple {
  background: #91877b;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

.otto {
  background: #0e8dbc;
  color: white;
  text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}

.relief {
  background-color: #3a50d9;
  color: #e0eff2;
  font: italic bold 100px Georgia, Serif;
  text-shadow: -4px 3px 0 #3a50d9, -14px 7px 0 #0a0e27;
}

.close {
  background-color: #fff;
  color: #202c2d;
  text-shadow:
    0 1px #808d93,
    -1px 0 #cdd2d5,
    -1px 2px #808d93,
    -2px 1px #cdd2d5,
    -2px 3px #808d93,
    -3px 2px #cdd2d5,
    -3px 4px #808d93,
    -4px 3px #cdd2d5,
    -4px 5px #808d93,
    -5px 4px #cdd2d5,
    -5px 6px #808d93,
    -6px 5px #cdd2d5,
    -6px 7px #808d93,
    -7px 6px #cdd2d5,
    -7px 8px #808d93,
    -8px 7px #cdd2d5;
}

.printers {
  background-color: #edde9c;
  color: #bc2e1e;
  text-shadow:
    0 1px 0px #378ab4,
    1px 0 0px #5dabcd,
    1px 2px 1px #378ab4,
    2px 1px 1px #5dabcd,
    2px 3px 2px #378ab4,
    3px 2px 2px #5dabcd,
    3px 4px 2px #378ab4,
    4px 3px 3px #5dabcd,
    4px 5px 3px #378ab4,
    5px 4px 2px #5dabcd,
    5px 6px 2px #378ab4,
    6px 5px 2px #5dabcd,
    6px 7px 1px #378ab4,
    7px 6px 1px #5dabcd,
    7px 8px 0px #378ab4,
    8px 7px 0px #5dabcd;
}

.glow {
  color: #444;
  text-shadow:
    1px 0px 1px #ccc, 0px 1px 1px #eee,
    2px 1px 1px #ccc, 1px 2px 1px #eee,
    3px 2px 1px #ccc, 2px 3px 1px #eee,
    4px 3px 1px #ccc, 3px 4px 1px #eee,
    5px 4px 1px #ccc, 4px 5px 1px #eee,
    6px 5px 1px #ccc, 5px 6px 1px #eee,
    7px 6px 1px #ccc;
}

.vamp {
  color: #92a5de;
  background: red;
  text-shadow:0px 0px 0 rgb(137,156,213),1px 1px 0 rgb(129,148,205),2px 2px 0 rgb(120,139,196),3px 3px 0 rgb(111,130,187),4px 4px 0 rgb(103,122,179),5px 5px 0 rgb(94,113,170),6px 6px 0 rgb(85,104,161),7px 7px 0 rgb(76,95,152),8px 8px 0 rgb(68,87,144),9px 9px 0 rgb(59,78,135),10px 10px 0 rgb(50,69,126),11px 11px 0 rgb(42,61,118),12px 12px 0 rgb(33,52,109),13px 13px 0 rgb(24,43,100),14px 14px 0 rgb(15,34,91),15px 15px 0 rgb(7,26,83),16px 16px 0 rgb(-2,17,74),17px 17px 0 rgb(-11,8,65),18px 18px 0 rgb(-19,0,57),19px 19px 0 rgb(-28,-9,48), 20px 20px 0 rgb(-37,-18,39),21px 21px 20px rgba(0,0,0,1),21px 21px 1px rgba(0,0,0,0.5),0px 0px 20px rgba(0,0,0,.2);
}
.salary{
  color: rgba(255, 255, 255, 1);
  text-shadow: 2px 2px 0px rgba(64, 116, 181, 1),
               2px -2px 0px rgba(64, 116, 181, 1),
			   -2px 2px 0px rgba(64, 116, 181, 1),
			   -2px -2px 0px rgba(64, 116, 181, 1),
			   2px 0px 0px rgba(64, 116, 181, 1),
			   0px 2px 0px rgba(64, 116, 181, 1),
			   -2px 0px 0px rgba(64, 116, 181, 1),
			   0px -2px 0px rgba(64, 116, 181, 1);
}