/*--Dashboard--*/
/*side nav*/
.pagelayout{ padding: 26px 0 0 }
nav { min-height: 500px; position: relative; z-index: 9999; width: 263px; display: table-cell;}
.user{position: relative; display: block;}
.user:after{ content: ""; position: absolute; bottom: 0; width: 100%; height: 46%; background: linear-gradient(to bottom, rgba(41,53,59,0) 0%, rgba(41,53,59,0.7) 50%, rgba(41,53,59,1) 100%); transition: 0.3s ease-in-out; z-index: 9}
.user img{ display: block; max-width: 100%; height: 263px;}
.user .username{ display: block; position: absolute; color: #fff; bottom: 0; width: 100%; box-sizing: border-box; padding: 30px 24px 12px; color: #fff; z-index: 99}
.name{ display: block; font-size: 20px; font-family: 'hindbold'; }
.userstatus, .userlocation{ display: block; font-size: 13px; margin: 5px 0; letter-spacing: 0.3px}
nav .card{ border-bottom: 1px solid }

/*Recently Game*/
.recentlygames h2{ font-size:18px; font-family: 'hindsemibold'; letter-spacing: 0.1px; margin-bottom: 13px;}
.recentlygames{ padding: 16px; text-align: center; }
.recentlygames li{  border-bottom: 1px solid transparent; text-align: left; }
.recentlygames li a, .navview #statis li a{padding: 7px 0; display: block;}
.recentlygames li:last-child, .navview #statis li:last-child, .navview #graph li:last-child{ border-bottom: 0 }
.recentlygames .datebox{ display: inline-block; width: 122px; vertical-align: -14px }
.recentlygames .scorebox{ width:57px;display: inline-block; vertical-align: top }
.dark{ font-size: 16px; }
.recentlygames .scorebox .dark{ letter-spacing: 0.75px; }
.viewall{  font-size: 12px; padding: 6px 25px 6px 17px; position: relative; border:1px solid; border-radius: 14px; display: inline-block; margin-top: 5px;}
.viewall:after{ content: ""; position: absolute; right: 15px; top: 0; bottom: 0; width: 7px; height: 7px; border-width: 1px 1px 0 0; border-style: solid; transform: rotate(45deg); margin: auto; transition: 0.3s ease-in-out}

/*Statis View*/
.navview #statis, .navview #graph{padding:17px;}
.navview #statis li{border-bottom: 1px solid transparent; text-align: left;}
.viewtext{ display: inline-block; vertical-align: middle; width: 145px; font-size: 16px }
.viewcount{ display: inline-block; vertical-align: middle; width: 30px; font-size: 16px; letter-spacing: 0.75px; font-family: 'hindmedium'; line-height: 1}
.navview .sprite{ width: 25px; height: 26px; margin-right:10px }
.sec{ font-size: 12px; margin-top: -2px}
.tabbing{box-shadow: 0 2px 6px rgba(0,0,0,0.12) }
.tabbing li{  font-family: 'hindsemibold';width: 50%; float: left; height: 57px; line-height: 57px; font-size: 16px; border-bottom: 3px solid transparent; text-align: center; transition: 0.3s ease-in-out; cursor: pointer;}
.tab-content { display: none;}
.tab-content.active { display: block;}

/*Play with*/
.playwith a{ display: block; padding:20px 25px; position: relative; }
.playwith a:after{ content: ""; position: absolute; right: 35px; height: 26px; width: 26px; border-radius: 23px;margin: auto; top: 0; bottom: 0;z-index: 99; transition: 0.3s ease-in-out}
.playwith a:before{ content: ""; position: absolute; right: 46px; height:8px; width:8px; border-width: 1px 1px 0 0; border-style: solid; transform: rotate(45deg); z-index: 999; margin: auto; top: 0; bottom: 0; transition: .3s ease-in-out;}
.playtext{ display: inline-block;vertical-align: -9px; font-family: 'hindmedium';}
.playtext span{ display: block; font-size: 18px; letter-spacing: 2px; text-transform: uppercase; margin-top: 2px;}

/*Social Sharing*/
.socialicon{ text-align: center; padding: 13px 0 }
.socialicon a{ height: 41px; width:40px; margin: 7px; }

@media screen and ( min-width:1000px){
  .user:hover:after{height: 100%; background: linear-gradient(to bottom, rgba(41,53,59,0.7) 0%, rgba(41,53,59,0.7) 50%, rgba(41,53,59,0.9) 100%)}
  .viewall:hover:after{ right: 12px; }
  .playwith a:hover:after{ right: 30px; }
  .playwith a:hover:before{ right: 40px; }
  .socialicon a:hover{ opacity: 0.8 }
}
@media (min-width: 1200px){
  nav .card{ margin-bottom: 14px; border-bottom: 0;  box-shadow: 0 2px 6px rgba(0,0,0,0.12);}
}
@media screen and ( max-width:1024px){
  nav { position: absolute; top: 15px; z-index: 99999; box-shadow: 0 0 0 100em rgba(0, 0, 0, 0); transform: translate3d(-263px, 0, 0); transition: all 0.3s ease-in-out;}
  nav .smartphone-menu-trigger {width: 40px; cursor: pointer; height: 40px; position: absolute; left: 100%;}
  nav .smartphone-menu-trigger span { content: ''; width: 50%; height: 2px; border-radius: 10px; position: absolute; left: 50%; transform: translate3d(-50%, -50%, 0);}
  nav .smartphone-menu-trigger span:first-child { top: 35%;}
  nav .smartphone-menu-trigger span:first-child { top: 35%; }
  nav .smartphone-menu-trigger span:nth-child(2) { top: 48%; }
  nav .smartphone-menu-trigger span:last-child { top: 61%; }
  nav:focus .smartphone-menu-trigger span:nth-child(1) { top: 18px; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); background: #fff; }
  nav:focus .smartphone-menu-trigger span:nth-child(2) { opacity: 0; left: -60px; }
  nav:focus .smartphone-menu-trigger span:nth-child(3) { top: 18px; -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -o-transform: rotate(-135deg); transform: rotate(-135deg); background: #fff; }
  nav ul li { margin-left: -200px; }
  nav:focus ul li { margin-left: 0; }
  nav:focus .smartphone-menu-trigger span { left: 30%; }
  nav .smartphone-menu-trigger:after { transform: translate3d(-50%, -50%, 0); }
  nav:focus { transform: translate3d(0, 0, 0); box-shadow: 0 0 0 100em rgba(0, 0, 0, 0.8); }
  nav:focus .smartphone-menu-trigger { pointer-events: none; }
}
/*side nav End*/
/*Main Contant*/
/*Heading*/
.pageheading + .align-right{ margin-bottom: 10px; }
.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%} 
.sunicon{  height: 35px; width:35px;  margin-right: 10px; animation-name: spin; animation-duration: 20000ms; animation-iteration-count: infinite; animation-timing-function: linear;}
#curentactive { text-align: center; }
@media (min-width: 767px){
  .startgame{ padding: 0 15px; width: auto;}
  .h1block {padding: 0 30px 20px;}
  .sunicon{vertical-align: -4px; }
}
/*Heading End*/
/*Currentgame*/
#currentgame{ text-align: left; margin-top: 30px;}
#currentgame li .innerli{ border:1px solid; border-radius: 4px; padding: 15px; display: block; }
.T-tagging{ font-size: 14px; text-transform: uppercase; letter-spacing: 1px}
#currentgame .T-tagging{ margin-bottom: 15px;}
#currentgame li .innerli .yourimg{ width: 94%; max-width: 70px; border-radius: 50%; height: auto; /*box-shadow: 0 3px 7px rgba(0,0,0,0.25);*/ margin-bottom: 16px; border:1px solid; padding: 2px}
#currentgame li .textcenter.clearfix .yourimg{ margin: 0 auto 16px }
#currentgame li .yourimg img{ display: block; width: 100%; height: auto; border-radius: 50% }
.vs:after{ content: "Vs"; position: absolute; right: -10px; top: 25px; font-size: 18px; font-family: 'hindmedium';}
#currentgame .light{font-family: 'hindmedium';}
#currentgame .owl-item .col-md-3{ width: 100% }
.playnow{  margin-top: 18px; display: block !important; padding: 5px 0; line-height: 1.2}
.playnow span{ display: block; font-size: 12px; font-family: 'hindregular'}
.opponent{ line-height: 43px; height: 43px; margin-top: 18px;  text-align: center;}
hr{height:15px; visibility: hidden; margin: 0;}
.viewallbtn{     background: #f0f0f0;  height: 100px; width: 100px; display: inline-block; border-radius: 50%;font-size: 29px; line-height: 1.2; padding: 19px; margin: 94px 0; color: #3b5998 }

#currentgame li{ display:none; padding: 15px}
@media screen and ( min-width:1000px){  
#currentgame{ margin-top: 70px }
}
/*Currentgame End*/

/*Invitation to play games*/
main h2 span{ font-size: 14px; font-family: 'hindregular';}
.invitationlist{ margin-top: 16px; }
.invitationlist li{ padding: 15px 30px; margin:0 10px; display: none;}
.invitationlist li .dark{ width: 66.66666667%; float: left;}
.invitationlist li .light{ width: 33.33333333%; float: left; padding-left:20px;}
.invitationlist  .usreimg{ text-align: center; margin-bottom: 20px }
.invitationlist img, .categorybox img{ border-radius: 50%; width: 50%; max-width:70px;  display: inline-block; /*box-shadow: 0 3px 7px rgba(0,0,0,0.25);*/ border:1px solid; padding: 2px }
.invitationleft{ text-align: center;}
.invitationlist .btn{ margin: 10px 0 }
.clinton{ font-size: 16px; }
.invitationlist .viewallbtn{  margin: 75px 0}
@media screen and ( min-width:767px){
  main h2 span{ display: inline-block; padding-left: 15px; }
  #currentgame .owl-item li{ width: 100% }
}
@media screen and ( min-width:1000px){
  main h2 span{ display: block;}
  main .pageinner h2 span{ display: inline-block;}
  .invitationlist li{ margin: 0 }
  .invitationlist li .dark, .invitationlist li .light{ width:100%; float: none; padding-left:0;}
  .invitationlist  .usreimg{ margin-bottom: 0 }
  .invitationlist img { width: 44px;max-width: inherit; }
  .invitationlist .btn{ margin: 0 ; padding: 10px 18px}
  .clinton, .invitationlist .T-tagging{ line-height: 45px; }
  .invitationlist img, .categorybox img{ padding: 1px }
  .invitationleft{ text-align: left; }
}
@media screen and ( max-width:989px){
  .invitationlist li{ width: 32%; margin: 10px .50%; float: left; }
}
@media screen and ( max-width:680px){
  .invitationlist li{ width: 100%; margin: 10px 0; float: none; }
}

/*Category*/
.card h3{ font-family: 'hindmedium'; font-size: 16px;}
.card h3:before{ height: 11px; width:11px; border-radius: 50%; border:1px solid; content: ""; display: inline-block; margin-right: 10px}
.categorybox{ border-right: 1px solid transparent; margin-top:40px; display: none; }
.categorybox:last-child{ border-right: 0 }
.categorybox li{padding: 15px 0}
.categorybox li:last-child{ padding-bottom: 0 }
.has { line-height: 40px; height: 40px; font-size: 16px; font-family: 'hindmedium'}
.categorybox img{ width: 120%; max-width: 50px }
@media screen and ( min-width:767px){
  .has { line-height: 50px;; height: 50px; }
}
@media screen and ( min-width:1000px){
.categorybox{ margin: 16px 0}
.categorybox img{ width: 44px }  
}
@media screen and ( min-width:1000px) and ( max-width:1160px){
  .invitationlist  .usreimg{ padding: 0 }
  .clinton, .invitationlist .T-tagging{ line-height: 1.7; }
  .categorybox img{ width: 36px }
  .categorybox .dark{ font-size: 13px }
  .categorybox .light{ font-size: 12px; }
}
/*Category End*/
/*Question of the day*/
.question-list{ margin:21px 0 10px; }
.question-list li{ margin-bottom: 12px; }
.question-list li input[type="radio"], .optionbox input[type="radio"]{ display: none; }
.question-list li label{ cursor: pointer; font-family: 'hindmedium'; font-size: 16px; padding: 6px 13px; border-radius: 17px; transition: 0.3s ease-in-out; position: relative; display: inline-block;}
.question-list li label:before{ content: "";position: absolute; height: 17px; width: 8px; border-width:0 2px 2px 0; border-style: solid; transform: rotate(45deg); left: 22px; display: none;}
.question-list li input:checked ~ label{ padding-left: 40px; }
.question-list li input:checked ~ label:before{ display: block; }
@media screen and ( min-width:767px){
  .rocateicon{margin:0 16px 0 0; }
  .question-cont{ float: left; width: calc(100% - 65px) ;}
  .question-list li{ width: 48%; margin-right: 4%; float: left; }
  .question-list li:nth-child(2n +2){ margin-right: 0 }
}
/*Question of the day End*/
/*Subscrib*/
.subscrib-cont p{ font-family: 'hindmedium'; margin-bottom: 12px; }
input[type="text"], input[type="email"]{ border:1px solid; border-radius: 3px; padding: 8px 12px; font-size: 16px; width: 100%}
.subscrib-cont form{ margin-bottom: 25px }
.subs-bottom{ line-height: 1.3 }
.subscrib-a, .subscrib-thx .subscrib-b{ display: none; }
.subscrib-thx .subscrib-a{ display: block; }
.subscrib-thx h3:before{ display: none; }
.subscrib-thx p:last-child{ margin-bottom: 0 }
@media screen and ( min-width:1000px){
  .subscrib-cont{ min-height: 232px } 
}
@media screen and ( max-width:768px){
  .subscrib-cont .btn{ margin-top: 15px; width: 100% }
}
/*Subscrib End*/
/*blog*/
.blog .card{ padding: 0; margin: 0 20px 30px 0}
.blog-cont{ padding: 25px 30px 0; cursor: pointer; min-height: 200px}
.blogimg{ display: block; transition: 0.3s ease-in-out}
.blogimg img{ height: 220px; width: 100% }
.blog h2{margin: 15px 0 10px; line-height: 1}
.blog h2 a{ font-family:'hindmedium'; font-size: 16px; transition: 0.3s ease-in-out;}
.blog .more{ display: none; }
.blog-social{line-height: 50px; height: 50px; border-top: 1px solid;}
.sharepop .cd-popup-container{ width: 300px; padding: 20px 0; text-align: center; }
.sharepop .cd-popup-container a.sprite{ height: 41px; width: 40px; margin: 7px; }
@media screen and ( min-width:1000px){
  .blog .card{margin:0 0 30px }
  .blog .card:hover .blogimg{ opacity: 0.7 }
}
/*blog End*/
/*Real-time System Stats*/
.time-stats{border-right: 0px solid; font-size: 16px; font-family: 'hindmedium'; padding: 15px 0; letter-spacing: 0.1px }
.timestats-icon + h2{ line-height: 1.3; margin-bottom: 15px}
.time-count{ margin-top: 7px }
@media screen and ( min-width:767px){
  .time-stats{ border-width: 1px; float: left; padding: 8px 17px; width: 48%}
}
@media screen and ( min-width:1000px){
  .timestats-icon{margin-top: 9px}
  .timestats-icon + h2{ margin-bottom: 0 }
}
@media (min-width: 1200px){
  .time-stats{ border-width: 1px; width: auto;}
  .time-stats:last-child{ border-right:0; padding-right: 0}
  .time-stats:first-child{ padding-left: 0}
}

@media screen and ( min-width:1000px) and ( max-width:1160px){
  .timestats-icon{ float: none; }
}
/*Real-time System Stats End*/
/*--Dashboard End--*/