#usersettings-section {
  display: none ;
  padding: 80px ;
  position:absolute ;
  top: 0 ;
  bottom: 0 ;
  left: 0 ;
  right: 0 ;
  overflow: auto ;
}

.usersettings-page {
  padding: 40px ;
}

#usersettings-menu div i {
  margin-left: 10px ;
}

body.standalone #usersettings-menu-settings, body.standalone #usersettings-menu-profile {
  display: none ;
}

#usersetting-change-password-view {
  transition-property: height ;
  transition-duration: .5s ;
  height: 0px ;
  overflow: hidden ;
}

#usersetting-password-error {
  color: hsl(0,50%,70%) ;
}


#usersettings {
  max-width: 800px ;
}

.usersetting {
  margin-bottom: 40px ;
}

.usersettings textarea {
  border: none ;
  border-radius: 3px ;
  font-size: 16px ;
  padding: 5px ;
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.8);
  margin: 5px 10px 5px 0px ;
  font-family: "Source Sans Pro",Verdana ;
  width: 80% ;
  height: 200px ;
}

.usersettings textarea:focus {
  outline: none ;
  background: rgba(255,255,255,.2);
}

.usersettings input {
  border: none ;
  border-radius: 3px ;
  font-size: 16px ;
  padding: 5px ;
  background: rgba(255,255,255,.2);
  color: rgba(255,255,255,.8);
  margin: 5px 10px 5px 0px ;
  font-family: "Source Sans Pro",Verdana ;
  width: 200px ;
}
.usersettings input::placeholder {
  color: rgba(255,255,255,.2) ;
  font-style:italic ;
}
.usersettings input[type="checkbox"] {
  width: initial ;
}

.usersettings input:focus {
  outline: none ;
  background: rgba(255,255,255,.3);
}

.usersettings h3 {
  margin: 0px 0px 4px 0px ;
}

.usersettings .tip {
  font-size: 12px ;
  color: rgba(255,255,255,.5);
}

.usersettings h1 {
  margin-bottom: 40px ;
}

.usersettings .validate-button-container {
  display: inline-block ;
  width: 200px ;
  transition-duration: .5s ;
  transition-property: width ;
  overflow: hidden ;
  height: 30px ;
  vertical-align: middle ;
}

.usersettings .validate-button {
  display: inline-block ;
  padding: 5px 10px ;
  font-size: 15px ;
  border-radius: 5px ;
  background: hsl(160,50%,40%);
  color: #FFF ;
  cursor: pointer ;
  white-space: nowrap;
}

.usersettings .error {
  color: hsl(30,100%,70%);
  white-space: nowrap;
  transition-duration: .5s ;
  transition-property: width ;
  width: 500px ;
  overflow: hidden ;
  display: inline-block ;
}


.usersetting .button {
  display: inline-block ;
  padding: 10px 20px ;
  border-radius: 5px ;
  background: hsl(160,50%,40%);
  color: #FFF ;
  cursor: pointer ;
}
.usersetting .button i {
  margin-right: 5px ;
}
.usersettings a {
  color: hsl(200,100%,80%);
  text-decoration: none ;
  padding: 10px 0 ;
  /*background: rgba(255,255,255,.1);
  border-radius: 15px ;*/
}
.usersettings a:visited {
  color: hsl(200,50%,80%);
  text-decoration: none ;
}
.usersettings a i {
  margin-left: 10px ;
}

#translation-app {
  display: none ;
}

#translation-app-back-button {
  display: inline-block ;
  border-radius: 5px ;
  background: hsl(0,50%,40%);
  padding: 4px 10px ;
  font-size: 14px;
  cursor: pointer ;
  margin: 2px 40px 40px 20px ;
}

#open-translation-app {
  display: none ;
}

#translation-app {
  display: none ;
}

#translation-app input {
  width: 46% ;
  margin: 10px 1% ;
}


.usersettings table {
  border-radius: 3px ;
  margin-bottom: 20px ;
}

.usersettings table,.usersettings tr,.usersettings td {
  color: rgba(255,255,255,.8);
  font-size: 20px ;
  border-spacing: 3px ;
}

.usersettings tr,.usersettings td,.usersettings th {
  border: solid 1px rgba(0,0,0,.1);
  padding: 10px ;
  background: rgba(255,255,255,.1);
  border-radius: 3px ;
}
.usersettings th {
  font-weight: bold ;
  background: rgba(0,0,0,.05);
}

#usersettings-profile-image {
  position: relative ;
  width: 128px ;
  height: 128px ;
  margin: 10px 0 ;
  cursor: pointer ;
}

#usersettings-profile-image .fa-times-circle {
  position: absolute ;
  top: -10px ;
  right: -10px ;
  font-size: 20px ;
  color: hsl(0,50%,70%) ;
  cursor: pointer ;
}
#usersettings-profile-image .fa-user-circle {
  position: absolute ;
  top: 0 ;
  bottom: 0 ;
  left: 0 ;
  right: 0 ;
  font-size: 64px ;
  padding: 32px ;
  background: rgba(255,255,255,.1) ;
  border-radius: 10px ;
  color: rgba(255,255,255,.2) ;
}
#usersettings-profile-image img {
  position: absolute ;
  top: 0 ;
  bottom: 0 ;
  left: 0 ;
  right: 0 ;
  width: 128px ;
  height: 128px ;
  border-radius: 64px ;
  transition-property: border-radius ;
  transition-duration: .2s ;
}
#usersettings-profile-image img:hover {
  border-radius: 10px ;
}

#usersettings-progress h2 {
  text-align: center ;
}

.usersetting#delete-account {
  margin-top: 100px ;
  padding: 20px;
  border-radius: 10px;
  background: hsl(300,20%,30%) ;
}
.usersetting#delete-account .button {
  background: hsl(0,50%,50%);
}

.usersetting .button#delete-account-button {
  background: hsl(300,20%,10%) ;
  color: rgba(255,255,255,.2) ;
  cursor: default ;
}

.usersetting .button#delete-account-button.enabled {
  background: hsl(0,50%,50%);
  color: rgba(255,255,255,.9) ;
  cursor: pointer ;
}

#user-progress-statistics, #user-progress-level {
  text-align: center ;
  padding: 20px 0 ;
  margin-bottom: 40px ;
}

.user-progress-stat {
  display: inline-block ;
  padding: 20px 40px ;
  text-align: center ;
}
.user-progress-stat .unit {
  font-size: 10px ;
  color: rgba(255,255,255,.5);
  position: absolute ;
  margin-left: 5px ;
  top: 29px ;
}

#user-progress-level .user-progress-stat {
  background: hsl(160,50%,40%) ;
  border-radius: 5px ;
  margin: 5px 20px ;
  width: 200px ;
}

.user-progress-stat-value {
  font-size: 40px ;
  position: relative ;
  display: inline-block ;
}
.user-progress-stat-label {
  font-size: 16px ;
  font-weight: bold ;
  color: rgba(255,255,255,.5) ;
}

#number-of-achievements {
  margin-left: 10px ;
  color: rgba(255,255,255,.5);
  font-size: 16px ;
}

.user-progress-achievement {
  background: rgba(255,255,255,.1) ;
  padding: 20px 20px 0 20px ;
  margin: 2px 10px 0 0 ;
}
.user-progress-achievement img {
  float: left ;
  width: 96px ;
  -ms-interpolation-mode: nearest-neighbor;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-pixelated;
  image-rendering: pixelated;
  margin: 0 20px 20px 0 ;
}
.user-progress-achievement .story {
  font-style: italic ;
  color: rgba(255,255,255,.5) ;
}
.user-progress-achievement .bonus {
  float: right ;
  background: hsl(300,30%,40%) ;
  font-size: 16px ;
  padding: 4px 15px ;
  border-radius: 30px ;
  color: rgba(255,255,255,.75);
}
.user-progress-achievement .date {
  float: right ;
  font-size: 16px ;
  padding: 4px 15px ;
  border-radius: 30px ;
  font-weight: bold ;
  color: hsla(200,100%,80%,.5);
}

#user-progress-notifications {
  position: fixed ;
  bottom: 100px ;
  right: 20px ;
  padding: 20px ;
  z-index: 20 ;
}

.user-progress-notification {
  margin-bottom: 20px ;
  padding: 10px ;
  width: 250px ;
  background: hsl(30,70%,70%) ;
  font-size: 16px ;
  font-weight: bold ;
  color: rgba(0,0,0,.9);
  border-radius: 5px ;
  box-shadow: 0 0 5px #000 ;
  cursor: pointer ;
  position: relative ;
  transition-duration: .5s ;
  transition-property: left ;
  left: 400px ;
}

.user-progress-notification img {
  width: 32px ;
  float: left ;
  margin: 0px 10px 0 0 ;
}

.user-progress-notification .close {
  border-radius: 30px ;
  padding: 5px 8px ;
  color: #FFF ;
  background: hsl(0,30%,50%);
  font-size: 20px ;
  cursor: pointer ;
  position: absolute ;
  right: -15px ;
  top: -15px ;
}