.treiningroommodal{z-index:1000 !important;top:50px !important;}
.coinsIcon{display:inline-block;background:url(../imgs/trainingroom/coins20.png) no-repeat bottom center;width:23px;height:12px;}
.coinsIconMed{display:inline-block;background:url(../imgs/trainingroom/coins40.png) no-repeat center 12px;width:55px;height:32px;}
.backHeaderLink{color:#fff !important;text-decoration:none;margin-left:5px;}
.backHeaderLink:hover{color:#eee !important;text-decoration:none;}
.backHeaderLink span{font-size:15px;line-height:15px;padding:0 3px;}
.templatePrice{position:absolute;right:0px;bottom:0px;}
.templateBox{position:relative;}
.trainingRooms hr{margin:5px !important;}
   .trainingRooms{
	background-color: rgba(250, 191, 72,0.8) !important;/*url(../imgs/trainingroom/roomsBG.png) no-repeat center center;
	background-size:cover; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;*/
  }
  .trainingRooms .modal-header .row{width:100%;}
  .trainingRooms .modal-header{color:#fff;font-size:15px;font-weight:bold;background:#28a6d4;}
  .trainingRooms .modal-title, .trainingRooms .modal-title a span{font-size:13px !important;}
  .rooms{
  background: url(../imgs/trainingroom/rooms.png) no-repeat -100px -150px; 
  width:600px;
  height:500px;
  position:relative;
  }
  @media only screen and (max-width: 600px) {
  .backHeaderLink{margin-left:5px;}
  .modal-title{font-size:14px;}
  .circled{padding-left:10px !important;}
  .alert{padding:3px !important;}
   .rooms{
	  left: -13%;
	  top:-50px;
	  transform: scale(.8);
	  }
  }
  @media only screen and (max-width: 500px) {
  
   .rooms{
	  left: -23%;
	  top:-50px;
	  transform: scale(.8);
	  }
  }
  
   @media only screen and (max-width: 400px) {
   .rooms{
	  left: -40%;
	  top:-50px;
	  transform: scale(.6);
	  }
  } 
  @media only screen and (max-width: 350px) {  
   .rooms{
	  left: -50%;
	  top:-50px;
	  transform: scale(.6);
	  }
  } 
   @media only screen and (max-width: 300px) {
   .rooms{
	  left: -100%;
	  top:-50px;
	  transform: scale(.45);
	  }
  }  
  .saveTestsForm input{ padding:0px; font-size:12px;width:50px;}
  .saveTestsForm input[type=submit]{ width:auto;}
	.saveTestsForm .ggmmss{width:30px;}
	.pill{width:160px;margin-left:2px;border-radius:5px;background:#28a6d4;color:#fff;display:inline-block;
	text-align:center;padding:5px;}
	.pill a{color:#fff;}
	.pill.greenBg{background:#449d44;}
	.orangeDarkBg, .orangeDarkBg a {background:orange !important;color:#fff !important;}
	.pill.grayBg{background:#aaa;color:#ccc;}
	.pill.redBg{background:red;color:#ccc;}
	grayBg{background:#aaa !important;color:#ccc;}
	.pill:hover{cursor:pointer;color:#efefef;}
	.pill.bigger{width:160px;}
	.pill.plans{margin-top:10px;display:inline-block;}
	.circled{border:2px solid #85ab15;display:inner-block; border-radius:30px;width:120px;padding-left:30px;padding-bottom:40px;}
	.circled .arrow{position:absolute;color:#85ab15;font-size:20px;}
	.circled .arrow-1{transform: rotate(270deg);left:12px;top:80px;}
	.circled .arrow-2{transform: rotate(270deg);left:12px;top:250px;}
	.circled .arrow-3{transform: rotate(0deg);left:60px;top:-10px;}
	.circled .arrow-4{transform: rotate(180deg);left:60px;top:95%;}
	.circled .arrow-5{transform: rotate(90deg);left:132px;top:92%;}
	.arrow-main{font-size:60px !important;position:absolute;right:50px;top:20%;color:#fff;}
  .roomLink {color:#fff;font-size:13px;position:absolute;text-shadow: 1px 1px 1px rgba(150, 150, 150, 1);
  display:block;text-align:center;border-radius:50%;}/*background:red;opacity:0.5;*/
  .roomLink .fa{position:absolute;bottom:10%;left:49%}
  .roomLink.trainings .fa{position:absolute;bottom:25%;left:49%}
  .roomLink.trainings{
  top:140px;transform: rotate(0deg);
  left:20px;line-height:100px;width:200px;}
  .roomLink:hover{color:#fff;text-decoration:none;}
  .roomLink.calendars{
	top: 230px;
	transform: rotate(0deg);
	left: 230px;
	line-height: 70px;
	width: 110px;}
 .roomLink.stats{
	top: 200px;
	transform: rotate(0deg);
	left: 150px;
	line-height: 70px;
	width: 120px;}
  .roomLink.races{top: 110px;
	transform: rotate(0deg);
	left: 150px;
	line-height: 70px;
	width: 110px;}
	.roomLink.tests{
	top: 195px;
	transform: rotate(0deg);
	left: 320px;
	line-height: 70px;
	width: 110px;}
	.roomLink.chats{
	top: 140px;
	transform: rotate(0deg);
	left: 400px;
	line-height: 20px;
	padding:20px 0px;
	width: 110px;}
	.roomLink.learning{
	top: 70px;
	transform: rotate(0deg);
	left: 220px;
	line-height: 20px;
	padding:20px 0px;
	width: 110px;}
  
    /* Form Progress */
    .vprogress {
      width: 100%;
      margin: 0px;
      text-align: center;
    }
    .vprogress .bar {
      display: block;
     
    }
    .vprogress .circle{
      display: block;
      margin-bottom: 0px;
       background: #fff;
      width: 40px; height: 40px;
      border-radius: 40px;
      border: 1px solid #d5d5da;
      float:none !important;
    }
    .vprogress .circle.small{
      display: block;
      margin-left:5px;
      margin-bottom: 0px;
       background: #fff;
      width: 30px !important; height: 30px !important;
      border-radius: 30px !important;
      border: 1px solid #d5d5da;
    }
    .vprogress .circle-sep{width: 40px; height: 5px;background:none;}
    .vprogress .separator{display:block;margin:0 auto;width: 3px; height: 5px;background:#ccc;}
    .vprogress .bar {
      position: relative;
      width: 6px;
      height: 52px;
      top: 0px;
      margin-left: 17px;
      margin-right: -5px;
      border-left: none;
      border-right: none;
      border-radius: 0;
    }
    .vprogress .circle .label {
      display: inline-block;
      width: 32px;
      height: 32px;
      line-height: 32px;
      border-radius: 32px;
      margin-top: 3px;
      color: #b5b5ba;
      font-size: 17px;
    }
    .vprogress .circle.small .label {
      display: inline-block;
      width: 24px;
      height: 24px;
      line-height: 24px;
      border-radius: 24px;
      margin-top: 1px;
      color: #b5b5ba;
      font-size: 10px;
    }
    .vprogress .circle .title {
      color: #b5b5ba;
      font-size: 13px;
      line-height: 30px;
      margin-left: 45px;
      position: relative;
      top: -28px;
    }
    /* Done / Active */
    .vprogress .bar.done,
    .vprogress .circle.done {
      background: #85ab15;
    }
    .vprogress .bar.failed,
    .vprogress .circle.failed {
      background: red;
    }
    .vprogress .bar.active {
      background: linear-gradient(to right, #EEE 40%, #FFF 60%);
    }
    .vprogress .circle.done .label {
      color: #FFF;
      background: none;
      /*box-shadow: inset 0 0 2px rgba(0,0,0,.2);*/
    }
    .vprogress .circle.done .title {
      color: #444;
    }
    .vprogress .circle.active .label {
      color: #FFF;
      background: none;
      /*box-shadow: inset 0 0 2px rgba(0,0,0,.2);*/
    }
    .vprogress .circle.active .title {
      color: #0c95be;
    }
    .popover-content{font-size:11px;}
    
    
/*acordion*/
.card-header{background:#efefef;border:1px solid #ddd;margin-top:1px;border-radius:2px 2px 0px 0px;
}
 .card-header button{width:100%;border:none ;text-align:left;outline:0px !important;
 color:#28a6d4;font-weight:bold;text-decoration:none !important;}  
 .card-body{background:#fff;padding:10px;} 
 .card-header {
  position: relative;
}
  
.card-header button::after {
	content: "\f107";
	color: orange;
	top: 3px;
	right: 5px;
	position: absolute;
    font-family: "FontAwesome"
}

.card-header button[aria-expanded="true"]::after {
	content: "\f106";
}