.error{
  color: red !important;
}

.success{
	color: #008004;
}
.view-profile{
  background-color: #e50051;
}

.view-profile:hover{
  background: #e50051;
}

.pt-20{
  padding-top: 20px;
}

.margin-top-10{
  margin-top:10px;
}
.startgame {
  min-width: 190px;

  font-family: "hindsemibold";
  text-transform: uppercase;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  line-height: 34px;
  border-radius: 4px;
  display: inline-block;
  text-align: center;
  letter-spacing: 1px;
  width: 100%;
  font-size: 14px;
}

.startgame:disabled {
  background: silver;
}

.min-startgame {
  min-width: 230px;
  text-align: left !important;
  padding-left: 24px !important;
}
.new-game-btn-container{
  display: flex;
  align-items: center;
  justify-content: center;
}
.enterquestion{ margin-top: 25px; background-color: #f1f2f2; }
.upload-avatar-container{position: relative; min-height: 250px;}
.file-upload-container{display: flex;justify-content: center}
.profile-save-btn{margin: 0 auto; margin-top: 15px;max-width: 83px;}
.mat-tab-group{border: 1px solid black}
.m-b-55{margin-bottom: 55px;}
.m-b-10{margin-bottom: 10px;}
.profile-container{ display: flex; align-items: flex-end;}
.submitpage .card{ padding: 0px 0 0 }
.m-25{margin: 25px;}
#nameLableField{text-align: right; padding-right: 20px;}
.pcategories > .col-sm-9{ border-top: 1px solid; padding:46px 15px 0; }
#curentactive { text-align: center;  background-color: #f1f2f2;}
.submitpage .optionbox{ padding: 0 10px }
.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' }
.card .enterquestion h3{ font-size: 18px; margin: 16px 0 16px}
.card .enterquestion h3:before{ display: none;  }

.enterquestion .formfield > input, .formfield select{padding: 10px 25px; font-size: 18px; display: inline-block; width: calc(100% - 34px)}
.enterquestion .formfield > label{ width: 30px; display: inline-block; vertical-align: -4px}

.viewbublic{ border:1px solid; border-radius: 4px; font-size: 18px; font-family: 'hindmedium'; box-shadow: 0 1px 1px rgba(0,0,0,0.63); padding:10px 0;  display: block; text-align: center; margin-top: 20px;}
.avatarinput p{ margin-top: 15px; }
.mysetting .formfield{ padding:0px 30px 0px 0; margin-bottom: 20px}
.mysetting .formfield > label{ width: auto; }
.saccount .formfield{ padding:0;}
.saccount .formfield > input{ font-size: 14px; padding: 13px 17px; }
.saccount .formfield select{ font-size: 14px; }
.saccount .formfield label{ font-size: 18px; font-family: 'hindmedium'; width: 90px}
.saccount .formfield label:nth-child(2){ width: auto; font-family: 'hindregular'; font-size: 16px; }
.saccount .formfield label + p{margin-top: 13px }
.savebox{ padding: 20px 0px; display: flex;}
.savebox button{ width: 100%;    padding-left: 10px; padding-right: 10px;}
.savebox a:nth-child(2){ font-size: 18px; font-family: 'hindmedium'; margin-top: 30px; display: inline-block; }
.btn-sticky{position: fixed;bottom: 0;left:0;}
.m-t-0{margin-top: 0px;}
.profile-display-label{text-align: right !important; padding-right: 20px;}
.profile-display-field{display: inline-block; width: 75%;}
.text-center{text-align: center;}
.show-more-div{text-align: center; margin-bottom: 20px;}

#file-name{ border:1px solid; border-radius: 4px; padding: 7px 10px; font-size: 16px; min-width:100%; display: inline-block; }
.custom-file-upload { border: 1px solid ; display: block; border-radius: 4px; overflow: hidden; cursor: pointer; transition: .3s ease-in-out; width: 151px; margin: 0 auto 20px; position: relative;}
label.custom-file-upload-image:after {content: ""; position: absolute; right: 7px; bottom: 7px; width: 28px; height: 28px; background: url(/assets/images/editicon.png) no-repeat; opacity: 0.3; transition: 0.3s ease-in-out}
label.custom-file-upload-image:hover:after{ opacity: 0.5 }
.expand-width { width : 100% !important; max-width : 100% !important}
.other-profile-img-container { width: 150px; margin: 0 auto;} 
/*Custom File Upload*/
.custom-file-upload img{ display: block; }
.namefield{ margin-top: 30px }
.namefield .formfield{display: block !important; text-align: left;}
.namefield .formfield > label{ text-align: left; font-size: 18px; font-family: 'hindmedium' }
.namefield .formfield > p{ margin-top: 5px }

.displayfield { margin-top: 30px }
.text-left{text-align: left}
.displayfield .formfield{display: block !important; text-align: left;}
.displayfield .formfield > label{ text-align: right; font-size: 18px; font-family: 'hindmedium'; padding-right: 25px; }
.displayfield .formfield > p{ margin-top: 5px }
.hide{ display: none !important; }
.tagging input { line-height: 24px;padding: 7px 17px;border-radius: 3px;display: block;width: 61%;box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.06); }
.add-space{padding-top:48px;}
form .tags{padding-top:5px;}
.user-info-div{margin-bottom: 18px;}
.user-info-div label{ text-align: right; font-size: 20px;padding-right: 25px; line-height: 40px;}
.table-div{display: table;width:100%}
.flex-info-div{display: flex;text-align: center}
.margin-auto{margin: 0 auto}
.flex-sub-div{display: flex;}
.input-edit{position: relative;width: 35%;display: inline-block;}
.field-edit-icon{right: 8px;content: ""; position: absolute; right: 7px; bottom: 7px; width: 28px; height: 28px; background: url(/assets/images/editicon.png) no-repeat; opacity: 0.3; transition: 0.3s ease-in-out}
.input-edit input:hover::before{ opacity: 0.5 }
.field-save-icon{right: 8px;content: ""; position: absolute; right: 7px; bottom: 7px; width: 28px; height: 28px; background: url(/assets/images/check.png) no-repeat; background-size: 28px 28px; transition: 0.3s ease-in-out}

.input-edit > input { font-size: 18px; display: inline-block; width: calc(100% - 34px);
  box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.06);
  border-color: #9a9a9a;
  width: 116%;width: 100%;padding-right: 45px;
}
.statsview #stats, .statsview #graph{padding:17px;}
.statsview #stats li{border-bottom: 1px solid transparent; text-align: left;}
.statsview #stats li{border-color: rgba(204,204,204,0.44);}
.statsview #stats li {padding: 7px 0; display: block;}
.statsview #stats li:last-child, .statsview #graph li:last-child{ border-bottom: 0 }
.statsview .sprite{ width: 25px; height: 26px; margin-right:10px }
.viewtext{ display: inline-block; vertical-align: middle; width: 50%; font-size: 16px;  }
.viewcount{ display: inline-block; vertical-align: middle; width: 30%; font-size: 16px; letter-spacing: 0.75px; font-family: 'hindmedium'; line-height: 1;text-align: right; }
.profile-img-container{display: flex; flex-direction: column}
input:disabled { background-color: #fff; }
.other-user-avatar-container {position: relative; min-height: 140px; }
.displayfield .formfield{display: table !important}
.displayfield .formfield .cell{display: table-cell;text-align: center}
.p-r-10{padding-right: 10px}
.p-r-15{padding-right: 15px}
.save{ max-width:  200px;}
.recommend-text{padding-left: 15px;padding-right: 15px;}
.displayfield .formfield {width: 100%;}
.display-name-error{padding-left: 12px;padding-top: 5px;}
.m-r-51{margin-right: 51px;}
.location-info{padding-left: 22px; padding-top: 10px;}
.location-error{margin-left: -15px;}
.text-display{
    font-size: 20px;
    line-height: 20px;
    text-align: left;
}

.social-profile-link{
  vertical-align: -4px;
  a {
    color: #3b5998;
  }
}
.friends-div{
  display: flex;
  flex-direction: column;
  margin-top: -13px;
  cursor: pointer;
  div{
    img{
      width: 62px;
      height: 62px;
    }
  }
}


.is-friend-span{
  margin-top: -13px;
  color: #71b02f;
}
.send-friend-request-span{
  margin-top: -13px;  
  color: #f50057;
}
.viewtext{ width:63%; }
.mt-0{ margin-top: 0px !important;}
@media screen and (max-width:767px){
  .tagging input{ line-height: 24px;padding: 4px 10px;border-radius: 3px;display: block; width: calc(100% - 34px);}
  .get-location{
    position: absolute !important;
    right: 55px !important;
    padding: 5px 15px !important;
    width: auto !important;
    margin-top: 5px !important;
  }

}
/*Custom File Upload End*/
@media screen and ( min-width:767px){
  .optionbox h2{ margin-top: 17px }
  .optionbox h2 span{ font-size: 22px }
  .savebox a:nth-child(2){ display: inline; margin-top: 0 }

  .viewbublic{ padding: 10px 20px; display: inline-block; margin-top: 30px;}
  .saccount .formfield select{ width: calc(100% - 94px) }
  .mysetting .formfield{ padding:0 30px 0 0;} 
  .saccount .col-xs-12  { margin-top: 30px }
  .card .saccount .col-xs-12 h3{ margin-top: 16px; }
  .saccount .col-xs-12 .col-sm-9{ padding: 10px 0;}
  .saccount .formfield label + p{ padding-left:90px; }
  .savebox a.btn.startg{ display: inline-block; margin-right: 70px}
  #file-name{min-width: 280px;}
  .card .enterquestion h3{margin-top: 0px}
  .card .saccount h3{ margin-top: 53px }
  // .custom-file-upload { display: inline-block;}
  .namefield .formfield > label{ width: 25% }
  .namefield .formfield > input{ width: 55% }
  .namefield .formfield > p{ margin-left: calc(25% + 4px ) } 
  .displayfield .formfield > label{ width: 54% }
  .displayfield .formfield > input{ width: 35% }
  .displayfield .formfield > p{ margin-left: calc(55% + 4px ) }   

}
@media screen and ( min-width:1000px){
  .optionbox > .row > .col-sm-9, .optionbox > .row > .col-sm-3{ padding-left: 0; padding-right: 0 }
  .optionbox > .row > .col-sm-3{ padding-left: 15px; padding-right: 15px; }
  .pcategories > .col-sm-9{padding:46px 0 0; }
  .optionbox{width: 85%; margin: 60px auto 0;}  
  .submitpage .optionbox{ margin-top: 0; padding: 0 }
  .optionbox h2{ font-size: 16px; text-transform: uppercase; margin-bottom: 0 }
  .optionbox .pcategories h2{ margin-top: 40px}
  .submitpage .optionbox h2{ margin-bottom: 7px }

  .avatarimg{ margin: 0}
  .mysetting .formfield{ width: auto; }
  .saccount .formfield{ width: 100% }
  .saccount .formfield > input{ width: 100% }
  .saccount .formfield:nth-child(2n + 2), .namefield .formfield:nth-child(2n + 2){ text-align: left; }
  .saccount .formfield:nth-child(2n + 2), .displayfield .formfield:nth-child(2n + 2){ text-align: left; }
  .namefield .formfield{ width: 100% }
  .namefield .formfield > input{ width: 55% }
  .displayfield .formfield{ width: 100% }
  .displayfield .formfield > input{ width: 35% }
  .custom-file-upload:hover{ box-shadow: 0 2px 5px rgba(0,0,0,.30)}
  
  .social-profile{
    font-size: 16px;
    padding: 5px 5px 5px 0;
    border-radius: 4px;
    width: 100%
  }
  .social-url{
    font-size: 16px;
    color: #888888;
  }
  .social-profile-name{
    margin: 0 !important;
    font-size: 18px !important;
    font-family: 'hindmedium';
  }
  .social-input-field{
    display: flex;
    background-color: #FFFFFF;
    border-radius:4px;
  }
  .social-url-contain{
    padding: 10px 0 10px 10px;
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px;
  }
  .social-profile-error{
    color: #ff0000;
    margin-top: 10px;
  }
  .show-more{
    cursor: pointer;
  }

}


@media screen and ( max-width:1280px){
  .display-name-error{
    margin-left:  13%;
  }

  .location-info{
    padding-left: 15% ;
  }

  .location-error {
    margin-left: 8%;
  }

}
.sec{display: inline-block;}

@media screen and ( max-width:1024px){
  .viewtext{
    width: 50%;
  }

  .flex-sub-div{
    label{
      font-size: 16px;
    }
  }
}

@media screen and ( max-width:1000px){
  .profile-container{
    flex-direction: column;
  }

  .cell{
    display: block !important;
    text-align: left !important;
  }
  .cell label{
    font-size: 18px;
  }
  .cell .input-edit{
    position: relative;
    width: 100%;
    display: block;
  }

  .location-info{
    padding-left: 0px;
  }

  .display-name-error{
    margin-left: 0px;
    padding-left: 0px;
  }
  .location-error {
    margin-left: 0px;
  }
  .get-location{
    position: absolute !important;
    right: 55px !important;
    padding: 5px 15px !important;
    width: auto !important;
    margin-top: 5px !important;
  }

}

.lives {
  border: 2px solid #fff;
  background: #71b02f;
  border-radius: 50%;
  height: 35px;
  position: absolute;
  top: -15px;
  right: 4px;
  color: #FFF;
  font-size: 16px;
  font-weight: 700;
  width: 35px;
  text-align: center;
}

.lives-text{
  text-align: center;
  line-height: 32px;
}

@media screen and ( max-width:767px) {
  .min-startgame {
    padding-left: calc( 50% - 90px) !important;
  }
  .profile-display-field{
    width: 100%;
  }

  .social-profile{
    width: 100%;
  }

  .social-url{
    font-size: 14px !important;
    width: calc(100% - 280px);
    float: left;
  }

  .profile-display-label{
    display: block;
    width: 100% !important;
    text-align: left !important
  }

  .social-input-field{
    width: 100%;
  }

  .social-url-contain{
    width: 280px;
  }
}

@media (min-width: 1355px) {
  .mainpage {
      max-width: 100%;
  }
}

.save
{
  width: 20%;
  margin: 0 auto;
}
.btn
{
  padding: 10px 25px;
  font-size: 16px;
}

.social-profile{
  font-size: 16px;
  padding: 5px 5px 5px 0;
  border-radius: 4px;
}
.social-url{
  font-size: 16px;
  color: #888888;
}
.social-profile-name{
  margin: 0;
  font-size: 20px;
  font-family: 'hindmedium';
  text-transform: none !important;
}
.social-input-field{
  display: flex;
  background-color: #FFF;
  border-radius:4px;
}
.social-url-contain{
  padding: 10px 0 10px 10px;
  border-bottom-left-radius: 3px;
  border-top-left-radius: 3px;
}
.social-profile-error{
  color: #ff0000;
  margin-top: 10px;
}
.show-more{
  cursor: pointer;
}
@media(max-width: 600px) {
  .btn
  {
    width: 100%;
  }
}


.bulk-upload-request label p  {
  margin-top: 8px;
  color: #7c7c7c;
}

.mat-tab-group{
  border: 1px solid rgba(0, 0, 0, 0.12)
}


.get-location{
  position: absolute;
  margin-left: 15px;
}