/*--Game-Option--*/
.optionbox input[type="radio"]{ display: none; }

.optionbox{ margin-top: 30px; text-align: left;}
// .optionbox h2{ font-size: 20px; letter-spacing: 0.75px; line-height: 1.2; margin: 0 0 10px }
.optionbox h2 span{ font-size: 20px; text-transform: none; letter-spacing: .10px; padding-left: 0; font-family: 'hindmedium' }
.optionbox .radiobtn{ padding:0 0 46px   }
.optionbox .radiobtn label{ font-size: 20px; display: inline-block; width: 100%; border-width:1px; border-style: solid; border-radius: 4px; padding: 9px 0; text-align: center; cursor: pointer; transition: 0.3s ease-in-out; position: relative; overflow: hidden;}
.optionbox .radiobtn label .sprite{ border-radius: 50% }
.optionbox .radiobtn label:before, .gameplay li.right:before, .gameplay li.wrong:before{ content: ""; position: absolute; right: 0; top: 0; border-style:solid; border-width: 20px; border-color: transparent;}
.optionbox .radiobtn label:after, .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;
  }
.optionbox input:checked + label{ box-shadow: 0 2px 5px rgba(0,0,0,0.3) }
.optionbox input:checked + label:after, .gameplay li.right:after, .gameplay li.wrong:after{ height: 13px;transform: rotate(45deg); opacity: 1;}
.optionbox .radiobtn label .sprite{ vertical-align:-20px }
.optionbox input:checked + label:before, .gameplay li.right:before{border-top-color:#1f7b2b;}
.optionbox input:checked + label:before, .gameplay li.right:before{border-right-color:#1f7b2b;}
.gameplay li.wrong:after{content: "+"; border: 0; height: auto;width: auto;font-size: 24px; top: 2px; line-height: 1; right: 6px;}

//.optionbox .radiobtn label:after{border-color: #fff;}

.twoplayer,.withfriends{ display: none;}
#p-radio2:checked ~ .twoplayer, #tp-radio2:checked ~ .withfriends{ display: block !important; }
.twoplayer{ padding: 22px 0 0}
.optionbox .twoplayer label{font-size: 15px; }
.optionbox .twoplayer label .sprite{ vertical-align:-16px }

.withfriends{border-width:1px; border-style: solid; margin-top: 30px; padding:0 45px; overflow: hidden;position:relative;}
.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-width:1px; border-style: solid; padding: 1px}
.optionbox input:checked + label .light{ opacity: 0.7 }
.withfriends .owl-prev{ left: 10px  }
  // .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-width:1px; border-style: solid; transition: 0.3s ease-in-out; font-size: 0}

.pcategories > .col-sm-9{ 
  border-top-width: 1px;
  border-top-style: solid; 
  padding:46px 0 0; 
}
.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; color: #fff}
.no-frd-msg{ color: #1f7b2b;  font-size: 1rem;}
.frd-err-msg{ color: red;  font-size: 1rem;padding-top:30px;}
//#curentactive .btnbox{ background: #fff; }

.hide {display: none !important;}
.withfriends .owl-prev, .withfriends .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; border-color: #dfe0e1; }
.withfriends .owl-prev:after, .withfriends .owl-next:after { background-position: -181px -73px; width: 5px; height: 12px; position: absolute;
  left: 0; right: 0; bottom: 0; top: 0; margin: auto; content: ""; border-color: #dfe0e1; }
.sprite, .withfriends .owl-prev:after, .withfriends .owl-next:after {  display: inline-block; vertical-align: middle; }
.withfriends .owl-next:after { background-position: -192px -73px; }
.withfriends .owl-next:hover:after { background-position: -192px -91px; }
.withfriends .owl-prev:hover:after { background-position: -181px -91px; }
.dark{ line-height: 1.5; }


.loaderimage{
  width:30px;
}

.loaderCenter{
  text-align: center !important;
  margin-top: 20px;
}

.checkbox-group{
  display: inline-block;
  padding: 8px 15px;
}

.action-container,
.content-container {
  position: relative;
  overflow: auto;
  height: 100px;
  min-height: 0;
  border-radius: 4px;
  background-color: #fff;
  width: 100%;
  min-height: 171px;
  margin-left: 0px;
  margin-right: 0px;
}

.action-container {
  padding: 16px;
}

.vertical-container,
.horizontal-container {
  min-height: 0 !important;
}

.swiper-container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.swiper-button-next, .swiper-button-prev{
  background-size: 0 0;
  width: 24px; 
  height: 24px; 
  margin-top: 0px;
}

.optionbox .twoplayer .withfriends label{
  height: 170px;
}

.arrow-img{
  position: absolute;
  top: 42%;
}

.left{
  left: 2%;
}

.right{
  right: 2%;
}

.pt-5{
  padding-top: 6px;
}

/*--Game-Option End--*/
@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 .twoplayer label:nth-child(6) { margin-right:0; }

  .optionbox .radiobtn .twoplayer label{ width: calc(50% - 10px); margin-right: 10px; }
  .optionbox .twoplayer .withfriends label{ width: 100%; margin-right: 0 }
  .formfield, .mysetting .formfield { display: inline-block;}
}
@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 }
  .submitpage .enterquestion .optionbox h2{ margin-bottom: 15px }
  .withfriends .owl-prev:hover, .withfriends .owl-next:hover, .viewbublic:hover {
    border-color: #71b02f;
  }
}
