/* Popup */

.cd-popup-container{border-radius:3px;text-align:center;box-shadow:0 0 20px rgba(0, 0, 0, 0.2); padding: 20px 0px 40px 0px;}
.withfriends{border:1px solid; margin-top: 30px; padding:0 45px; overflow: hidden;}
.optionbox .withfriends label{ text-align: center; padding:10px; border:0; display: block; border-radius: 0}
.expertise{ border-top: 1px solid; border-bottom: 1px solid; padding: 5px 0; margin: 5px 0; display: inline-block; }
.optionbox .withfriends label .dark, .optionbox .withfriends label .light{ display: block; }
.withfriends label .labelimg img{ width: 70px; height: 70px; display: inline-block; border-radius: 50%; /*box-shadow: 0 3px 7px rgba(0,0,0,0.25);*/ margin-bottom: 10px; overflow: hidden;border:1px solid; padding: 1px}
.optionbox input:checked + label .light{ opacity: 0.7 }
.withfriends .owl-prev{ left: -35px  }
.withfriends .owl-next{ right: -35px }
.friendsslider .owl-prev,.friendsslider .owl-next{position: absolute;top:0; bottom: 0; margin: auto; height:30px; width: 30px; border-radius: 50%; border:1px solid; transition: 0.3s ease-in-out; font-size: 0}

.pcategories > .col-sm-9{ border-top: 1px solid; padding:46px 0 0; }
.formfield { padding: 8px 15px; }
.formfield input[type="checkbox"],.enterquestion .formfield input[type="radio"]{  position: relative; height: 18px; width: 18px; vertical-align: -4px; margin-right: 8px;}
.formfield input[type="checkbox"]:before,.enterquestion .formfield input[type="radio"]:before{ content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 100%; border-radius: 2px; border:1px solid; transition: 0.3s ease-in-out; cursor: pointer;}
.formfield input[type="checkbox"]:after,.enterquestion .formfield input[type="radio"]:after{ content: ""; position: absolute; top: 3px; right:6px; width: 5px; height: 5px; border-width:0 2px 2px 0; border-style: solid; border-color: transparent;  transition: 0.3s ease-in-out; cursor: pointer;}
.formfield input[type="checkbox"]:checked:after,.enterquestion .formfield input[type="radio"]:checked:after{ height: 10px; transform: rotate(45deg); }
.formfield label{ font-size: 20px; cursor: pointer;}
.chancat{ cursor: pointer; transition: 0.3s ease-in-out; margin-top: 10px}
.chancat span:nth-child(2){ display: inline-block;width: calc(100% - 40px); line-height: 1.1; vertical-align: -2px;}
.preference{ display: none; margin: 9px -15px 0}
.preference .formfield { padding: 17px 15px;}
.chancat.active span:nth-child(2){vertical-align: middle;}
.optionbox > .row > .col-sm-9, .optionbox > .row > .col-sm-3{ padding-left: 0; padding-right: 0 }
.btn.startg{ font-size: 24px; display: block; padding: 15px 0; width: 100% ; max-width: 300px ;line-height: 1.2; margin:0 auto}
#curentactive .btnbox{ background: #fff; }
.btn {color: white;}
/*--Game-Option End--*/

/*Game Play*/
.gameplay h1{ font-size: 24px; font-family: 'hindmedium'; padding: 0}
.gameplay h2{ font-size: 20px; font-family: 'hindregular'; margin: 0 auto; }
.popupbottom{ font-size: 16px; padding: 1% 4%;text-align: left;font-family: 'hindregular';}
.gameplay p a{font-family: 'hindmedium'}
.gameplay li{ margin:30px 20px 0; padding: 15px; font-size: 16px; font-family: 'hindmedium'; border:1px solid ; border-radius: 4px; cursor: pointer; overflow: hidden; position: relative;word-wrap: break-word;}

.timer{width:61px;height:61px;margin:0 auto; position: relative;}
.timer .rotate{width:51px;height:51px;display:block;position:absolute; margin: 5px 0 0 5px;border-radius: 50%;}
.timer .rotate #loader{fill:#ffae0b;}
.timer .dots{width:100%;height:100%;position:absolute;z-index:15;top:0;left:0; border:3px solid; border-radius: 50%; box-sizing: border-box; box-shadow:2px 3px 5px rgba(0,0,0,0.16)}
.timer .dots .time{height:50px;width:5%;display:block;background-image:-moz-linear-gradient(#10383d, #10383d 12%, rgba(0, 0, 0, 0) 12%, rgba(0, 0, 0, 0) 88%, #10383d 88%, #10383d);background-image:-webkit-linear-gradient(#10383d, #10383d 12%, rgba(0, 0, 0, 0) 12%, rgba(0, 0, 0, 0) 88%, #10383d 88%, #10383d);background-image:linear-gradient(#10383d, #10383d 12%, rgba(0, 0, 0, 0) 12%, rgba(0, 0, 0, 0) 88%, #10383d 88%, #10383d);margin-left:-3%;left:50%;position:absolute; top: 2px}
.timer .dots .time.deg45{-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg);}
.timer .dots .time.deg90{-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-webkit-transform:rotate(90deg);transform:rotate(90deg);}
.timer .dots .time.deg135{-moz-transform:rotate(135deg);-ms-transform:rotate(135deg);-webkit-transform:rotate(135deg);transform:rotate(135deg);}


/*Game Play End*/

.gameplay li.right:after, .gameplay li.wrong:after{ height: 13px;transform: rotate(45deg); }


.gameplay li.question-answered {cursor: not-allowed;}
.gameplay li:after{ content: ""; position: absolute; right: 8px; top: 5px; height: 6px; width: 6px; border-right-width: 2px; border-right-style: solid; border-bottom-width: 2px; border-bottom-style: solid; transition: 0.3s ease-in-out; opacity: 0;}

.gameplay li.players-answer.wrong:before{ content: ""; position: absolute; right: 0; top: 0; border-style:solid; border-width: 20px; border-color: transparent; }
.gameplay li.players-answer.wrong:before{ border-right-color: #af3424; border-top-color: #af3424;  }
.gameplay li.players-answer.wrong:after{ height: 13px;transform: rotate(45deg); opacity: 1; }
.gameplay li.players-answer.wrong:after{content: "+"; border: 0; height: auto;width: auto;font-size: 24px; top: 2px; line-height: 1; right: 6px;}

.gameplay li.players-answer.right:before { content: ""; position: absolute; right: 0; top: 0; border-style:solid; border-width: 20px; border-color: transparent;}
.gameplay li.players-answer.right:before { border-right-color: #1f7b2b; border-top-color: #1f7b2b}
.gameplay li.players-answer.right:after{ height: 13px;transform: rotate(45deg); opacity: 1; }



mat-card {
  width: 100%;
  height: 100%;
}
.answer-button {
  text-align: left;
  width: 95%;
}
.answered {
  border: 4px solid red;
}
.correct {
  border: 4px solid green;
}
.answer-status { 
  font-size: 1.5em; 
}
.correct-text {
  color: green;
}
.timeout-text, .incorrect-text {
  color: red;
}
.abouttoexpire {
  color: red;
}
.header
{
  margin-bottom: 14%;
}
.continue-btn
{
  font-family: 'hindbold';
  font-size: 16px;
  margin-left: -10px;
}
.question-tag
{
  padding-top: 1%;
}
.badge-heading
{
  text-align: left;
}
.alignment
{
  text-align: right;
}

.pb-4{
  padding-bottom:4px;
}
 
 .margin-top-6{
  margin-top: 6px;
 }
 .turn-change-reason {
  margin-top: 5px;
  font-size: 18px;
}


.question-answered{
  border-color: #a5a5a5;
  border-width: 1;
  border-radius: 2;
}

.gameplay .right{
  border-color: #71b02f;
  background-color: #71b02f;
  color: #fff;
}

.gameplay .wrong{
  border-color: #d54937;
  background-color: #d54937;
  color: #fff;
}

Progress{
  color: #d54937;
  background-color:#C0C0C0;
  
}

.progressbar {
  height: 30;
  margin: 10;
  border-radius: 10;
  background: #ECEFF1;
}
.progressbar-value {
  background: #51BC6B;
}


.pb-20 {
  padding-bottom: 20px;
}

.pb-40 {
  padding-bottom: 40px;
}

.ptb-10 {
  padding: 12px 0px 19px 0px !important;
}

.mat-progress-spinner circle, .mat-spinner circle {
  stroke: #3fb53f;
}
.md-button[disabled] {
  color : #ffffff;
  background-color: transparent;
}

.single-player-btn-container{
  margin-top: 10px;
  margin-bottom: 10px;
  margin-right: 15px;
}
// .startgame{ font-family:'hindsemibold' ; text-transform: uppercase; box-shadow:0 2px 5px rgba(0,0,0,0.3); height: 42px; line-height: 42px; border-radius: 4px; display: inline-block; text-align: center; letter-spacing: 1px; width: 100%} 
.continue-btn:disabled {
  background: silver;
}

.loader,
.loader:after {
  border-radius: 50%;
  width: 20px;
  height: 20px;
}
.loader {
  margin: 9px auto;
  font-size: 2px;
  position: relative;
  text-indent: -9999em;
  border-top: 2px solid rgba(255, 255, 255, 0.2);
  border-right: 2px solid rgba(255, 255, 255, 0.2);
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  border-left: 2px solid #ffffff;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
  display: -webkit-inline-box;
}

.continue-btn.small{
  margin-left: -35px;
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@media (min-width: 1000px){
  main h2 span{ display: block;}
  .optionbox{width: 765px; margin: 60px auto 0;}  
  .optionbox > .row > .col-sm-3{ padding-left: 15px; padding-right: 15px; }
  .chancat{ margin-top: 0 }
  .chancat span:nth-child(2){ vertical-align: -12px; }
  .optionbox h2{ font-size: 16px; text-transform: uppercase; margin-bottom: 0 }
  .optionbox .pcategories h2{ margin-top: 40px}
  .submitpage .optionbox h2{ margin-bottom: 7px }
  .btn.startg{ width: 216px; margin:0 auto; padding: 20px 0  }  
  .submitpage .optionbox{ margin-top: 0; padding: 0 }
  // .secondbg{ padding-top: 35px;padding-bottom: 6%;}
  .submitpage .enterquestion .optionbox h2{ margin-bottom: 15px }
}

@media screen and ( min-width:1000px){
   .gameplay p a:hover{text-decoration: none;}
  .gameplay h2{ width: 80% }  
}

 @media(max-width: 1000px) {
  .authorPadding{
  padding-top:6px;
  }
 }


@media screen and ( min-width:767px){
  .gameplay ul{ max-width: 576px; margin: 0 auto}
  .gameplay li{ display: inline-block; padding: 15px; width: 219px }
}

@media (min-width: 767px){ 
  main h2 span{ display: inline-block; padding-left: 15px; }
  .optionbox h2{ margin-top: 17px }
  .optionbox h2 span{ font-size: 22px }
  .optionbox .radiobtn label { width: calc(50% - 17px); margin-right:30px }
  .optionbox .radiobtn label:nth-child(4),.optionbox .radiobtn .towplayer label:nth-child(6) { margin-right:0; }

  .optionbox .radiobtn .towplayer label{ width: calc(33.33% - 10px); margin-right: 10px; }
  .optionbox .towplayer .withfriends label{ width: 100%; margin-right: 0 }
  .formfield, .mysetting .formfield { display: inline-block;}
}

@media(max-width: 768px) { 
  .header
  {
    margin-bottom: 20%;
  }

.category-div-spacing{
  margin-bottom: 8px;
 }

 .gameplay li{
  margin: 10px;
  padding: 10px;
  }
 }


 @media(max-width: 600px) {
  .cd-popup-container{padding: 0px;}
  .startgame, .continue-btn-div { width: 100%; margin-top:6px; }
  .question-tag-space{ width: 100%; }
  .popupbottom{ display: inline-block; width:100%; padding:1% 1%}
 }



 @media screen and (max-width: 320px) { 
  .gameplay li{
    margin: 5px;
     padding: 5px;
   }
  .gameplay h1{
    font-size: 20px;
   }
  .gameplay h2{
    font-size: 18px;
   }
  .answer-status{
    font-size: 1.2em;
   }
   .secondbg { 
    padding: 10px 0px 40px 0px; 
   }
 }
 
 .m-b-70{
  margin-bottom:70;
 }
 Button{
   border-radius:1; 
 }

 .btn-transparent {
  background: white;
  color: #3b5998;
  font-size: 20;
  padding: 15;
  border-width: 1;
  border-color: #e2e2e2;
}