a,
.pseudoLink {
  color: #49ccff;
  text-decoration: none;
  border: none;
}
a:hover,
.pseudoLink:hover {
  color: #ea5800;
  text-decoration: none;
}
table {
  font-size: 12px;
  color: #333333;
  border-collapse: collapse;
  width: 100%;
}
table td,
table tr {
  border: none;
}
textarea {
  font-size: 12px;
}
body {
  text-align: center;
  margin: 0;
  padding: 0;
  line-height: 1;
  font-size: 12px;
  color: #333333;
  background: #e5e5e5;
  padding-bottom: 50px;
}
.noselect {
  -moz-user-select: none;
}
select {
  font-family: "Roboto", "Arial Nova", sans-serif-light, "Open Sans", Arial, sans-serif;
  font-size: 12px;
}
input {
  font-family: "Roboto", "Arial Nova", sans-serif-light, "Open Sans", Arial, sans-serif;
  font-size: 12px;
  color: #333333;
}
h1,
h2,
h3,
h4,
h5 {
  margin: 0;
  padding: 0;
  font-weight: normal;
  font-size: 12px;
}
dl,
dt,
dd,
p {
  margin: 0;
  padding: 0;
}
em {
  font-style: normal;
}
:hover,
:focus,
:active {
  outline: 0;
}
img {
  border: 0;
  margin: 0;
  padding: 0;
  max-width: 100%;
  height: auto;
  box-sizing: border-box;
  vertical-align: middle;
}
form {
  margin: 0;
}
div {
  padding: 0;
  margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
.ovH {
  overflow: hidden;
}
.fl {
  float: left;
}
.fr {
  float: right;
}
.cp {
  cursor: pointer;
}
.ch {
  cursor: help;
}
.cm {
  cursor: move;
}
.dn {
  display: none;
}
.db,
.db a {
  display: block;
}
.di {
  display: inline;
}
button {
  margin: 0;
  padding: 0;
}
body,
table,
textarea,
button {
  font-family: "Roboto", "Arial Nova", sans-serif-light, "Open Sans", Arial, sans-serif;
}
.defaultList {
  margin: 0;
  padding: 0;
}
.defaultList dl,
.defaultList dt,
.defaultList dd {
  margin: 0;
  padding: 0;
}
.defaultList li {
  list-style: none;
  width: 90%;
  margin: 0;
  padding: 10px 10px;
  border-bottom: 1px solid #d5d5d5;
  font-size: 110%;
  font-weight: 500;
}
.defaultList li a {
  display: block;
}
.defaultTextBox {
  line-height: 140%;
  padding: 10px 0;
}
a.buttonDefault,
.buttonDefault {
  color: #ffffff !important;
  font-weight: 700;
  background: #ffa225;
  border: 1px solid #fa9e23;
  border-radius: 25px;
  padding: 10px 15px;
}
a:hover.buttonDefault {
  background: #fa9e23;
}
.stampOnline {
  background: #D0F099;
  color: #000000;
  border-radius: 3px;
  padding: 1px;
}
.stampOffline {
  color: #333333;
  border-radius: 3px;
  padding: 1px;
}
.stampAway {
  background: #f3f3f3;
  color: #999999;
}
.stampBlocked {
  background: #dfdfdf;
  color: #b2b2b2;
  font-style: italic;
}
.stream .preStamp,
.mailConversation .preStamp,
.headerConversation .preStamp {
  display: none;
}
.tsShortTimeAgo {
  background: #dafffc;
  border-radius: 4px;
  color: #212121 !important;
}
.tsRecently {
  background: #FFFDC0;
  border-radius: 4px;
  color: #565656 !important;
}
.tsBygone {
  color: #939393;
}
h2 {
  font-size: 120%;
  font-weight: 700;
  padding: 20px 10px;
}
h3 {
  font-size: 150%;
  font-weight: 400;
  padding: 10px;
}
h4 {
  font-size: 100%;
  color: #999999;
  text-align: center;
  padding: 10px 10px;
  font-weight: 300;
}
h5 {
  font-size: 110%;
  color: #a4a4a4;
  font-weight: 400;
  padding: 10px;
}
.defaultButton.inactive {
  cursor: default;
}
* html input.defaultButton {
  overflow: visible;
  padding: 2px 5px 2px 5px;
}
.defaultButton {
  color: #585858;
  cursor: pointer;
  font-size: 100%;
  border-radius: 3px;
  padding: 7px 13px;
  margin: 0;
  margin-right: 3px;
  background: #ffffff;
  border: 1px solid #cfcfcf;
}
.defaultButton img {
  vertical-align: text-bottom;
}
a.defaultButton,
.defaultButton {
  line-height: 17px;
  text-decoration: none;
  overflow: hidden;
  padding: 5px 10px;
  cursor: pointer;
}
input.defaultButton {
  line-height: 17px;
  margin: 0;
  padding: 0;
  font-size: 12px;
  padding: 4px 6px 4px 6px !important;
  text-align: center;
}
input:hover.defaultButton {
  border: 1px solid #9dcbff;
  color: #316a9b;
}
a:hover.defaultButton {
  border: 1px solid #9dcbff;
  color: #316a9b;
  text-decoration: none;
}
/* Actionbar */
.actionSelector {
  width: 100%;
  padding: 10px 0;
  font-size: 110%;
}
.actionSelector .button,
.actionSelector button,
.actionSelector input,
.buttonActionSelector {
  float: left;
  text-align: center;
  display: block;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  color: #585858;
  cursor: pointer;
  font-size: 90%;
  padding: 10px 15px;
  margin: 0 3px 3px 0;
  border-radius: 3px;
}
.actionSelector input {
  padding: 10px 15px 8px 15px !important;
}
.actionSelector img,
.buttonActionSelector img {
  vertical-align: text-bottom;
}
.actionSelector .button.blue,
.buttonActionSelector.blue {
  color: #ffffff;
  background: #3ca2fe;
  border: 1px solid #3ca2fe;
  cursor: pointer;
}
.actionSelector .button:hover,
.actionSelector button:hover,
.actionSelector input:hover,
.actionSelector a:hover,
.buttonActionSelector {
  background: #ffedb0;
  color: #333333;
}
.actionSelector .button.blue:hover,
.actionSelector input.blue:hover {
  background: #64b5ff;
}
.actionSelector .button.orange {
  background: #FF9933;
  color: #ffffff;
  border: 1px solid #f08f2d;
}
.actionSelector .button.clear {
  background: none;
  border: none;
}
.actionSelector .clear:hover {
  border: none;
  background: #ffffff;
}
.actionSelector .subOption {
  float: left;
  padding: 10px;
}
.actionSelector .bold {
  color: #000000;
  font-weight: bold;
}
.actionSelector .disabled {
  color: #757575;
  text-decoration: line-through;
}
.actionSelector .none {
  float: left;
  background: none;
  color: #417bc4;
  border: none;
}
.actionSelector .button.green {
  background: #97c224;
  color: #ffffff;
  border: 1px solid #97c224;
}
.actionSelector.small {
  font-size: 90%;
}
.actionSelector .button:first-child {
  margin-left: 10px;
}
.singleAction {
  width: 90%;
  margin: 5px 5% 5px 5%;
}
.singleAction a,
.singleAction button {
  width: 60%;
  margin: auto;
  text-transform: uppercase;
  font-weight: 700;
  text-align: center;
  display: block;
  padding: 15px;
  background: #62b5ff;
  color: #ffffff;
  border: none;
  border-radius: 3px;
}
.singleAction.floating {
  position: fixed;
  height: 50px;
  bottom: 0;
  left: 0;
  background: #ffffff;
  margin: 0;
  padding-top: 5px;
  border-top: 1px solid #dcdcdc;
  padding-left: 5%;
  padding-right: 5%;
}
.imageExtern {
  max-width: 618px;
}
.imageBlacklisted {
  color: #000;
  font-size: 0.7em;
}
.bannerTop {
  width: 100%;
}
.bannerTop .adslot.billboard90 {
  display: none;
}
.bannerTop .adslot.billboard250 {
  display: none;
}
.bannerTop .adslot.mobileBillboard {
  display: block;
  height: 50px;
}
.adSlot.inFeed {
  margin-bottom: 10px;
}
/* Wenn Zeit noch raus */
.advertRight {
  width: 0;
  margin-top: 5px;
  min-height: 400px;
}
/* Basisframes */
.jpy {
  width: 100%;
  text-align: left;
}
.jpyPopup {
  width: 845px;
  text-align: left;
  background: #e5e5e5;
}
/* #header box-shadow:1px 1px 2px #c6c6c6 */
.header {
  text-align: center;
  background: #333333;
  background: linear-gradient(90deg, #484848 0%, #333333 100%);
  top: 0px;
  left: 0px;
  z-index: 1000000;
  width: 100%;
  max-height: 50px;
}
body.fixedAvailable .header {
  position: fixed;
}
body.fixedAvailable #jappy {
  padding-top: 50px;
}
.header .wrapper {
  width: 100%;
  height: 50px;
  margin: auto;
  text-align: left;
}
.header .logoFrame {
  float: left;
  height: 43px;
  padding-top: 3px;
  padding-bottom: 3px;
  overflow: hidden;
  text-align: left;
  margin-left: 5px;
}
.header .logoFrame img {
  margin-left: 0;
  width: 130px;
}
.header .logoFrame.open img {
  margin-left: 10px;
}
.header .logoFrame a {
  border-radius: 20px;
  display: block;
}
.header .logoFrame a:hover {
  transition: 0.5s;
  animation: intoFocusSoft 0.3s forwards;
  cursor: pointer;
}
.header .logoFrame.burgerLogo img {
  width: auto;
  height: 40px;
  margin-left: 10px;
}
.header .logoFrame.burgerLogo img.burgerIcon {
  margin-left: 0;
  display: none;
}
.header .logoFrame.burgerLogo img.burgerLogo {
  margin-right: 10px;
}
.header .logoFrame.burgerLogo.open img.burgerLogo {
  margin-left: 0px;
}
.header .logoFrame.burgerLogo.open img.burgerIcon {
  margin-left: 10px;
}
.header .headNotifications {
  float: right;
  display: none;
}
.header .headNotifications a.bellFeed {
  float: right;
  display: block;
  padding: 5px 10px 5px 10px;
  margin-top: 5px;
  margin-right: 10px;
}
.header .headNotifications a.bellFeed .counter {
  position: absolute;
  margin-top: -27px;
  margin-left: 17px;
  font-weight: bold;
  border-radius: 5px;
  text-align: center;
  padding: 2px 4px;
  background: #ffffff;
  color: #000000;
  font-size: 80%;
}
.header .headNotifications a:hover.bellFeed {
  background: #484848;
  border-radius: 5px;
}
.header .headNotifications a.bellFeed img {
  width: 25px;
}
.header .headNotifications .headNotificationSection {
  float: right;
  display: block;
  margin-top: 5px;
  margin-right: 10px;
}
.header .headNotifications .headNotificationSection a {
  display: block;
  padding: 5px 10px 5px 10px;
}
.header .headNotifications .headNotificationSection a:hover {
  background: #000000;
  border-radius: 10px;
}
.header .headNotifications .headNotificationSection a .counter {
  position: absolute;
  margin-top: -27px;
  margin-left: 17px;
  font-weight: bold;
  border-radius: 5px;
  text-align: center;
  padding: 2px 4px;
  background: #ffffff;
  color: #000000;
  font-size: 80%;
}
.header .headNotifications .headNotificationSection a img {
  height: 25px;
  width: 25px;
}
.header .headNotifications .headNotificationSection a img.hasContent {
  animation: wobble-horizontal 10s infinite;
}
.header .contextMenue {
  float: right;
  position: relative;
  z-index: 2;
  display: none;
  cursor: pointer;
  padding-top: 5px;
  margin-right: 10px;
}
.header .contextMenue a {
  display: block;
  margin-left: 10px;
}
.header .contextMenue a:hover {
  background: #000000;
  border-radius: 5px;
}
.header .headSearch {
  float: right;
  display: none;
  margin-right: 10px;
}
.header .headSearch input {
  background: #484848;
  font-weight: 300;
  border: 1px solid #484848;
  width: 80px;
  color: #9A9A9A;
  padding: 7px 10px;
  font-size: 100%;
  margin-top: 8px;
  border-radius: 25px;
  font-family: Roboto, Arial;
}
.header .headSearch input::-webkit-input-placeholder {
  color: #9A9A9A;
  font-weight: 300;
}
.header .headSearch input:focus {
  background: #ffffff;
}
.header .headSearch input:hover {
  background: #ffcd46;
}
.header .tickerFrame {
  float: right;
  padding-top: 4px;
  width: 230px;
}
.header .burger {
  width: 25px;
}
.header .tickerStatusButton {
  float: left;
  margin-left: 10px;
  padding-left: 20px;
  margin-top: 2px;
  border-left: 1px dashed #484848;
}
.header .tickerStatusButton a.createTicker {
  display: block;
  float: left;
  background: #ffa225;
  border: 1px solid #242424;
  margin-right: 10px;
  padding: 10px;
  color: #ffffff;
  font-size: 100%;
  margin-top: 5px;
  border-radius: 25px;
  font-weight: 600;
}
.header .tickerStatusButton a:hover.createTicker {
  background: #ffb756;
}
.header .tickerStatusButton .statusIcon {
  float: left;
  padding-top: 5px;
  padding-bottom: 5px;
  cursor: pointer;
}
.header .tickerStatusButton .statusIcon:hover {
  background: #484848;
  border-radius: 5px;
}
.header .tickerStatusButton .statusIcon img {
  width: 35px;
}
.bellOn {
  animation: wobble-horizontal 10s infinite;
}
.header .userAccount {
  float: right;
  padding: 7px;
  margin: 5px 5px 5px 10px;
  min-width: 100px;
  display: flex;
}
.header .userAccount.active,
.header .userAccount:hover {
  background: #000000;
  border-radius: 10px;
}
.header .userAccount .image img {
  width: 25px;
  border-radius: 50%;
}
.header .userAccount .nickname {
  padding: 5px 10px 5px 10px;
  font-size: 120%;
  font-weight: 600;
  color: #ffffff;
  max-width: 100px;
  text-overflow: ellipsis;
  display: block;
  white-space: nowrap;
  overflow: hidden;
}
.header .userAccount .down img {
  width: 10px;
  margin-top: 7px;
}
.userMenu {
  border-radius: 10px;
  border: 1px solid #333333;
  z-index: 99999999;
  background: #ffffff;
  position: absolute;
  right: 5px;
  top: 55px;
  width: 320px;
  padding-top: 0;
  box-shadow: 5px 5px 30px #868686;
  max-height: calc(100vh - 65px);
  overflow-y: auto;
}
.userMenu::-webkit-scrollbar {
  width: 5px;
}
.userMenu::-webkit-scrollbar-track {
  color: #333333;
  background: #e1e1e1;
}
.userMenu::-webkit-scrollbar-button {
  color: #333333;
}
.userMenu::-webkit-scrollbar-thumb {
  color: #333333;
  background: #d3d3d3;
}
.userMenu .theme {
  text-align: center;
  height: 130px;
}
.userMenu .theme .background {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  height: 130px;
  background-size: 100%;
}
.userMenu .theme .background img {
  width: 80px;
  border-radius: 50%;
  margin-top: 15px;
  border-width: 3px;
}
.userMenu .theme:hover .background img {
  border-color: #ffa225 !important;
}
.userMenu .settings {
  display: block;
  padding-bottom: 20px;
  border-top: 1px solid #f1f1f1;
}
.userMenu .settings a.entry {
  display: block;
  padding: 7px;
}
.userMenu .settings a.entry:hover {
  background: #f1f1f1;
}
.userMenu .settings a.entry .text {
  text-transform: none;
  float: left;
  color: #474747;
  padding: 7px 15px;
  font-weight: 600;
}
.userMenu .settings a.entry .icon {
  float: left;
  width: 25px;
  margin-left: 10px;
}
.userMenu .settings a.entry .icon img {
  width: 100%;
}
.userMenu img.profileImageOnline {
  border-width: 5px;
}
.userMenu .loginForm {
  padding: 13px;
  width: calc(100% - 26px);
  text-align: center;
}
.userMenu .loginForm button,
.userMenu .loginForm a {
  text-align: center;
  width: auto;
}
.userMenu .loginForm input[type="text"],
.userMenu .loginForm input[type="password"] {
  width: calc(100% - 30px);
}
.userMenu .about {
  padding: 20px 20px;
  text-align: center;
  line-height: 140%;
  font-size: 90%;
  color: #9d9d9d;
  margin-top: 20px;
  font-weight: 300;
  border-top: 1px solid #f1f1f1;
}
.userMenu .about a {
  color: #9d9d9d;
}
.userMenu .about a:hover {
  text-decoration: underline;
}
.userMenu .quickSettings {
  position: absolute;
  width: 100px;
  top: 80px;
  right: 5px;
}
.userMenu .quickSettings a {
  float: right;
  opacity: 0.7;
  padding: 5px;
}
.userMenu .quickSettings a img {
  width: 20px;
}
.userMenu .tooltip {
  text-align: center;
  min-width: 40px;
  margin-top: 65px;
  z-index: 10;
  position: absolute;
  padding: 5px 10px;
  color: #333333;
  font-weight: 800;
  background: #f1f1f1;
  border-radius: 15px;
}
.userMenu .textInfo {
  color: #666666;
  text-align: center;
  width: 50px;
  margin-top: 65px;
  z-index: 10;
  position: absolute;
  padding: 5px;
  font-weight: 300;
}
.userMenu .headerMenue:hover .tooltip {
  display: block;
}
.userMenu .headerMenue:hover .textInfo {
  color: #000000;
}
.userMenu .rankData .tooltip {
  margin-top: 45px;
}
.userMenu .theme:hover .tooltip {
  display: block !important;
}
.userMenu .theme .tooltip {
  margin-top: -30px;
  margin-left: 120px;
  opacity: 0.8;
}
.userMenu .features {
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 40px;
}
.userMenu .creditsData {
  float: right;
  display: block;
  padding: 5px;
  border-radius: 10px;
  margin-right: 5px;
}
.userMenu .creditsData .image {
  float: left;
  padding: 10px;
}
.userMenu .creditsData .image img {
  width: 45px;
  animation: overshotIn 0.5s ease-in forwards;
  animation-delay: 0.1s;
}
.userMenu .creditsData .counter {
  position: absolute;
  margin-top: 48px;
  width: 50px;
  text-align: center;
  color: #0a0a0a;
  padding: 5px;
  font-weight: 600;
  font-size: 100%;
  border-radius: 10px;
}
.userMenu .cardData {
  float: right;
  display: block;
  padding: 5px;
  border-radius: 10px;
  margin-right: 5px;
}
.userMenu .cardData .image {
  float: left;
  padding: 5px;
}
.userMenu .cardData .image img {
  width: 55px;
}
.userMenu .stickerData {
  float: right;
  display: block;
  padding: 5px;
  border-radius: 10px;
  margin-right: 5px;
}
.userMenu .stickerData .image {
  float: left;
  padding: 10px;
}
.userMenu .stickerData .image img {
  width: 45px;
  animation: overshotInDelay 0.8s ease-in forwards;
  animation-delay: 0.2s;
}
.userMenu .rankData {
  float: right;
  display: block;
  padding: 10px;
  border-radius: 10px;
  height: 50px !important;
  width: 50px !important;
  margin-right: 5px;
}
.userMenu .rankData .image {
  position: absolute;
  z-index: 3;
  padding: 7px 5px;
  animation: overshotIn 0.5s ease-in forwards;
  animation-delay: 0s;
}
.userMenu .rankData .progressBar {
  position: absolute;
  margin-top: 32px;
  margin-left: 0px;
  z-index: 5;
  padding: 2px;
  background: #e5e5e5;
  border-radius: 10px;
  opacity: 0.9;
  width: 50px;
  height: 12px;
  animation: overshotIn 0.5s ease-in forwards;
  animation-delay: 0s;
}
.userMenu .rankData .progressBar:hover {
  opacity: 1;
}
.userMenu .rankData .progressInPercent {
  background: #333333;
  background: linear-gradient(60deg, #b6ff41 0%, #8dc700 100%);
  height: 100%;
  border-radius: 10px;
  max-width: 100%;
}
.userMenu .rankData .image img {
  width: 40px;
}
.userMenu .rankData .counter {
  position: absolute;
  animation: overshotIn 0.5s ease-in forwards;
  animation-delay: 0.0s;
  z-index: 4;
  margin-top: 16px;
  width: 50px;
  text-align: center;
  color: #ffffff;
  font-weight: 900;
  font-size: 100%;
  border-radius: 10px;
}
.userMenu .rankData .textInfo {
  margin-top: 60px;
}
.userMenu .inventory small {
  position: absolute;
  margin-top: 21px;
  margin-left: -35px;
  background: #ff9b22;
  border: 1px solid #ff941f;
  color: #ffffff;
  padding: 5px;
  font-weight: 500;
  border-radius: 10px;
}
.userMenu .userStatusIcon {
  float: right;
  padding: 5px;
  margin: 5px;
  display: block;
  max-width: 30px;
}
.userMenu .userStatusIcon img {
  width: 25px;
}
.userMenu .headerMenue {
  cursor: pointer;
  height: 60px;
  width: 60px;
  text-align: center;
}
.userMenu .headerMenue:hover {
  background: #f1f1f1;
}
/* linear-gradient(#14ffe9, #ffeb3b, #ff00e0); */
.userMenu .rankInfo {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  position: absolute;
  /* Hide half of the progress bar */
}
/* Set the sizes of the elements that make up the progress bar */
.rankCircle {
  width: 40px;
  height: 40px;
  border: 5px solid #ffa225;
  border-radius: 50%;
  position: absolute;
  clip: rect(0px, 25px, 50px, 0px);
}
.rankCircleColor11 {
  border-color: #e80000;
}
.rankCircleColor10 {
  border-color: #00d3e8;
}
.rankCircleColor9 {
  border-color: #000000;
}
.rankCircleColor8 {
  border-color: #545454;
}
.rankCircleColor7 {
  border-color: #00499a;
}
.rankCircleColor5 {
  border-color: #91cd00;
}
.rankCircleColor4 {
  border-color: #26a7d4;
}
.rankCircleColor3 {
  border-color: #fa4092;
}
.rankCircleColor2 {
  border-color: #b30698;
}
.rankCircleColor1 {
  border-color: #e1cf04;
}
.rankCircleColor0 {
  border-color: #e5e5e5;
}
/* Using the data attributes for the animation selectors.

.userMenu div[data-anim~=base] { -webkit-animation-iteration-count: 1;  -webkit-animation-fill-mode: forwards; -webkit-animation-timing-function:linear;}
.rankInfo[data-anim~=rankInfo] { -webkit-animation-duration: 0.01s;  -webkit-animation-delay: 0.02s;   -webkit-animation-name: close-wrapper; }
.rankCircle[data-anim~=left] {-webkit-animation-duration: 0.05s; -webkit-animation-name: left-spin;-webkit-animation-delay: 0.02s}
.rankCircle[data-anim~=right] {-webkit-animation-duration: 0.02s;  -webkit-animation-name: right-spin;}
*/
/* Profil ist noch nicht aktiviert */
.profileActivationNotice {
  background: #ffe08d;
  font-size: 100%;
  width: 100%;
  line-height: 150%;
  text-align: center;
  position: fixed;
  top: 50px;
  border-bottom: 1px solid #ffcf4f;
}
.profileActivationNotice a {
  padding: 15px;
  color: #333333;
  display: block;
  font-weight: 700;
}
.profileActivationNotice a:hover {
  background: #ffd34e;
}
/*.floatingFoot {position: fixed; bottom: 0;left:0;right:0;height: 57px;z-index:1000000;display:none}
.floatingFoot .wrapper {text-align:center;padding:0px 0 5px 0;background:#181818;min-height:55px}
.floatingFoot .entry {float:left;padding-bottom:3px;width:20%;margin:0 0;text-align:center;padding-top:7px}
.floatingFoot .entry.active {}
.floatingFoot .counter {display:block;padding:3px 3px;font-weight:800;border-radius:5px;background:#ee000b;color:#ffffff;text-align:center;position:absolute;margin-left:40px;margin-top:15px;vertical-align: middle}
.floatingFoot .counter.bell {background:#ee000b}
.floatingFoot .counter.chat {background:#ee000b}
.floatingFoot .text {color:#f1f1f1;font-size:75%;font-weight:200;text-align:center;padding-top:3px}
.floatingFoot .entry.active .text {color:#ffffff;font-weight:600}
.floatingFoot img {width:30px}
.floatingFoot .entry.profile img {border-radius:50%;border:1px solid #000000 !important}
.floatingFoot .guestLogin {text-align:center}


@media (max-height: 300px) {

	.floatingFoot {display:none}
}
*/
.floatingFoot2 {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 57px;
  z-index: 1000000;
}
.floatingFoot2 .wrapper {
  text-align: center;
  padding: 0px 0 5px 0;
  background: #181818;
  min-height: 55px;
  background: linear-gradient(270deg, #ff9933 0, #ffd237 100%);
  border-top: 1px solid #ff7134;
}
.floatingFoot2 .entry {
  float: left;
  padding-bottom: 3px;
  width: 33%;
  margin: 0 0;
  text-align: center;
  padding-top: 10px;
}
.floatingFoot2 .counter {
  display: block;
  padding: 5px;
  font-weight: 800;
  border-radius: 10px;
  background: #ff5200;
  color: #ffffff;
  text-align: center;
  position: absolute;
  margin-left: 40px;
  margin-top: 15px;
  vertical-align: middle;
}
.floatingFoot2 .counter.bell {
  background: #ff5200;
}
.floatingFoot2 .counter.chat {
  background: #ff5200;
}
.floatingFoot2 .text {
  color: #f1f1f1;
  font-size: 75%;
  font-weight: 200;
  text-align: center;
  padding-top: 3px;
  display: none;
}
.floatingFoot2 .entry.active .text {
  color: #ffffff;
  font-weight: 600;
}
.floatingFoot2 img {
  width: 35px;
}
.floatingFoot2 .entry.profile img {
  border-radius: 50%;
  border: 1px solid #000000 !important;
}
.floatingFoot2 .guestLogin {
  text-align: center;
}
/* Seite */
.site {
  width: 100%;
  text-align: left;
  padding: 0;
}
.site .siteLeft {
  display: none;
  background: #ffffff;
  min-height: 1000px;
}
.site .siteRight {
  width: 100%;
  overflow: hidden;
}
.site .third {
  display: none;
}
.siteLeft .about,
.userSidebar .about {
  padding: 20px 20px;
  text-align: center;
  line-height: 130%;
  font-size: 90%;
  color: #9d9d9d;
  margin-top: 60px;
  font-weight: 300;
}
.siteLeft .about a,
.userSidebar .about a {
  color: #9d9d9d;
}
.siteLeft .about a:hover,
.userSidebar a:hover {
  text-decoration: underline;
}
.userSidebar {
  width: 300px;
  background: #ffffff;
  padding-left: 0px !important;
  border-radius: 0;
  animation: navigatorSlideIn 0.3s;
}
.userSidebarContent .spacer {
  margin-bottom: 20px;
}
.navigationSection.collapsed .userSidebarContent {
  display: none;
}
.userSidebarContent .navigationSectionPlainLink {
  display: block;
  color: #00b8fe;
  padding: 3px 0 3px 0;
}
.userSidebarContent .navigationSectionPlainLink:last-child {
  margin-bottom: 15px;
}
.userSidebarContent .navigationSectionPlainLink .icon {
  float: left;
  width: 30px;
  margin-left: 20px;
  padding-top: 3px;
}
.userSidebarContent .navigationSectionPlainLink .icon img {
  width: 25px;
  height: 25px;
}
.userSidebarContent .navigationSectionPlainLink .text {
  float: left;
  padding: 10px 5px 10px 10px;
  text-align: left;
  font-weight: 500;
}
.userSidebarContent .navigationSectionPlainLink:hover {
  background: #ffedb0;
  color: #000;
}
.userSidebarContent .navigationSectionPlainLink.active {
  background: #efefef;
  font-weight: 900;
  color: #000;
}
.userSidebarContent .navigationSectionPlainLink .unreadCounter {
  position: absolute;
  margin-left: 10px;
}
.userSidebarEntry {
  display: block;
  padding-top: 5px;
  padding-bottom: 5px;
  border-left: 5px solid #ff9e33;
}
.userSidebarEntry .icon {
  float: left;
  width: 40px;
  padding-left: 5px;
  text-align: center;
  margin-right: 10px;
  height: 41px;
  padding-top: 1px;
}
.userSidebarEntry .icon img {
  width: 30px;
  margin-top: 5px;
}
.userSidebarEntry .counter {
  position: absolute;
  background: #f60039;
  background: linear-gradient(30deg, #ff8833 0%, #f60039 100%);
  border: 1px solid #f71538;
  font-weight: 900;
  padding: 3px 5px;
  border-radius: 10px;
  color: #ffffff;
  margin-top: -15px;
}
.userSidebarEntry .text {
  float: left;
  font-size: 100%;
  font-weight: 800;
  color: #666666;
  padding-top: 15px;
}
.userSidebarEntry .sectionToggle {
  float: right;
  width: 30px;
  padding-right: 7px;
  text-align: center;
  margin-left: 10px;
  height: 31px;
  padding-top: 7px;
}
.userSidebarEntry .sectionToggle span {
  width: 15px;
  height: 15px;
  margin-top: 5px;
  opacity: 0.3;
  background-size: 15px 15px;
  background-repeat: no-repeat;
  display: inline-block;
}
.userSidebarEntry .sectionToggle.highlight {
  background: #ffedb0;
  border-radius: 10px;
  animation: overshotIn 0.3s forwards;
  width: 25px;
  margin-right: 5px;
}
.userSidebarEntry .sectionToggle.highlight span {
  opacity: 1;
}
.userSidebarEntry:hover .sectionToggle span {
  opacity: 0.5;
}
.userSidebarEntry .sectionToggle span:hover {
  opacity: 0.7;
}
.navigationSection.expanded .sectionToggle span {
  background-image: url("//s.jappy.com/i/header/sidebarMinus.png");
}
.navigationSection.collapsed .sectionToggle span {
  background-image: url("//s.jappy.com/i/header/sidebarPlus.png");
}
.userSidebarEntry.active .text {
  color: #000000;
}
.userSidebarEntry:hover {
  background: #ffedb0;
}
.navigationSectionBrick {
  display: block;
  padding-left: 10px;
  padding-top: 3px;
  height: 37px;
}
.navigationSectionBrick:hover {
  background: #ffedb0;
}
.navigationSectionBrick .icon {
  float: left;
  width: 35px;
  padding-left: 5px;
  text-align: right;
  margin-right: 10px;
  height: 31px;
  padding-top: 1px;
}
.navigationSectionBrick .icon.right {
  float: right;
}
.navigationSectionBrick .icon img {
  width: 25px;
  margin-top: 5px;
}
.navigationSectionBrick .icon.right img {
  margin-top: 0px;
}
.navigationSectionBrick .profileImage img {
  border-radius: 50%;
}
.navigationSectionBrick .counter {
  position: absolute;
  background: #f60039;
  background: linear-gradient(30deg, #ff8833 0%, #f60039 100%);
  border: 1px solid #f71538;
  font-weight: 900;
  padding: 3px 5px;
  border-radius: 10px;
  color: #ffffff;
  margin-top: -15px;
}
.navigationSectionBrick .text {
  float: left;
  font-size: 100%;
  font-weight: 400;
  color: #666666;
  padding-top: 12px;
  padding-bottom: 5px;
  display: block;
  min-width: 80px;
}
.navigationSectionBrick .text .title {
  margin-top: 0px;
  font-size: 110%;
  font-weight: 500;
  color: #00b8fe;
}
.navigationSectionBrick .text .subtitle {
  font-size: 80%;
  color: #a4a4a4;
  font-weight: 300;
  display: none;
}
.navigationSectionBrick:hover .text {
  color: #000;
}
.navigationSectionBrick.active {
  background: #f8f8f8;
}
.navigationSectionBrick.active .text {
  font-weight: 900;
  color: #000;
}
.userSidebar .headlineLeft a {
  text-transform: none !important;
}
.userCenterHeader {
  display: none;
}
.userCenterOff {
  display: none !important;
}
.userCenter a.entry {
  display: block;
  padding-top: 5px;
  padding-bottom: 5px;
}
.userCenter a.entry.additional {
  display: none;
}
.userCenter .icon {
  float: left;
  width: 40px;
  margin-left: 10px;
  padding-left: 10px;
  text-align: center;
  margin-right: 10px;
  height: 41px;
  padding-top: 1px;
}
.userCenter .icon img {
  width: 30px;
  margin-top: 5px;
}
.userCenter a.entry.profile .icon img {
  border-radius: 50%;
  width: 37px;
  border: none;
}
.userCenter a.entry .text {
  float: left;
  font-size: 100%;
  font-weight: 800;
  color: #ffffff;
  text-transform: uppercase;
  padding-top: 15px;
}
.userCenter a.entry.active .text {
  color: #ffffff;
  font-weight: 800;
}
.userCenter .changes {
  float: right;
  width: 20px;
  margin-right: 9px;
  margin-top: 10px;
}
.userCenter .newEntries {
  width: 12px;
}
.userCenter a:hover {
  background: #666666 !important;
}
.userCenter .mailboxPreview .conversation .sender .picture img {
  width: 25px;
  margin-left: 5px;
}
.userCenter .headlineLeft a {
  color: #585858;
  font-weight: 800;
}
.userCenter .showAdditional {
  text-align: center;
  cursor: pointer;
  padding-top: 3px;
}
.userCenter .showAdditional:hover {
  background: #FDD978;
}
.userCenter .showAdditional img {
  height: 20px;
}
.noBuddiesOnline,
.noChats {
  padding: 20px 20px;
  text-align: center;
  font-weight: 300;
  color: #999999;
}
.userCenter.showAll .showAdditional {
  display: none;
}
.userCenter.showAll .entry.additional {
  display: block;
}
.userCenter a.entry small {
  position: absolute;
  margin-top: 3px;
  font-weight: 900;
  margin-left: -5px;
  background: #ff890a;
  border-radius: 5px;
  color: #ffffff;
  padding: 2px;
  font-size: 80%;
}
.userCenter a.entry.shop small {
  margin-left: 35px;
  background: #ff890a;
  color: #ffffff;
  font-weight: 500;
}
.userCenter a.entry.home small {
  padding: 3px 3px;
  font-weight: 800;
  border-radius: 5px;
  background: #ffffff;
  color: #333333;
  text-align: center;
}
.userCenter a.entry.guestbookEntry small {
  background: #9eca28;
  color: #ffffff;
  border: 1px solid #484848;
  color: #000000;
}
.userCenterHeader a.entry {
  display: none;
}
.userCenter a.entry {
  float: left;
  padding: 3px 20px 3px 5px;
}
.userCenter a.entry .icon {
  padding-left: 0;
}
.userCenter a.entry .icon img {
  width: 25px;
  margin-top: 8px;
}
.userCenter a.entry:hover {
  background: #484848;
  text-decoration: none;
}
.userCenter a.entry.profile .icon img {
  width: 25px;
}
.userCenter .icon {
  margin-right: 5px;
}
.userCenter .changes {
  position: absolute;
}
.userCenterHeader a.rank {
  display: none;
}
.userCenter .settings {
  display: block;
  bottom: 70px;
  position: absolute;
}
.userCenter .settings a.entry .text {
  text-transform: none;
}
.userCenter .settings a.about {
  padding: 5px;
  text-indent: 10px;
  font-size: 90%;
}
.userCenter .settings a.about .text {
  padding: 0;
  margin-top: 10px;
  font-weight: 300;
}
/* Navigatior */
.navigatorBackground {
  animation: backgroundFade 0.5s;
  background: #484848;
  opacity: 0.3;
  width: 100%;
  height: 100%;
  margin-top: 50px;
}
.navigator {
  width: 200px;
  background: #484848 !important;
  padding-left: 0px !important;
  height: 100%;
  border-radius: 0;
  animation: navigatorSlideIn 0.3s;
}
.navigator .showAdditional {
  display: none;
}
.navigator a.entry.additional {
  display: block;
}
.navigator a.entry {
  width: 160px;
}
.contactsOnline {
  background: #ffffff;
}
.contactsOnline .entry {
  width: 100%;
  padding: 5px 0 5px 0;
  height: 45px;
  cursor: pointer;
  display: block;
}
.contactsOnline .entry:first-child {
  border-top: none !important;
}
.contactsOnline .entry:last-child {
  padding-bottom: 7px;
}
.contactsOnline .entry:hover {
  background: #ffedb0;
}
.contactsOnline .entry a.picture {
  float: left;
  width: 60px;
  min-height: 45px;
  text-align: center;
}
.contactsOnline .entry a.picture img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.contactsOnline .entry.hover {
  background: #ffedb0;
}
.contactsOnline .entry a.picture img:hover {
  border: 1px solid #000000;
}
.contactsOnline .entry.fadeIn {
  background: #e2fa97;
}
.contactsOnline .entry.fadeOut {
  background: #f1f1f1;
}
.contactsOnline .entry a.plain {
  float: left;
  display: block;
  width: 100px;
  overflow: hidden;
  padding-top: 7px;
  min-height: 40px;
  color: #333333;
  font-size: 100%;
}
.contactsOnline .entry a.plain .realname {
  color: #a4a4a4;
  font-weight: 300;
  width: 85px;
  overflow: hidden;
  padding-top: 2px;
}
.contactsOnline .entry a.plain .options {
  padding-top: 1px;
  padding-left: 1px;
  position: relative;
  z-index: 2;
  margin-left: 20px;
}
.contactsOnline .entry a.plain a,
.contactsOnline .entry .plain .link {
  text-decoration: none;
  color: #333333;
  font-weight: 500;
  font-size: 110%;
}
.contactsOnline .entry .onlineStatus {
  float: right;
  width: 30px;
  padding-top: 5px;
  min-height: 17px;
}
.contactsOnline .entry .onlineStatus img {
  width: 80%;
  margin-right: 20%;
}
/* Mailvorschau */
.mailboxPreview {
  width: 100%;
  text-align: left;
  background: #ffffff;
}
.mailboxPreview .conversation {
  cursor: pointer;
}
.mailboxPreview .conversation:hover {
  background: #ffedb0;
  color: #333333;
}
.mailboxPreview .conversation.unread {
  background: #ffd237;
}
.mailboxPreview .conversation.mention {
  background: #49ccff;
}
.mailboxPreview .conversation.active {
  background: #78C3FD;
}
.mailboxPreview .conversation .sender {
  float: left;
  width: 55px;
  text-align: center;
}
.mailboxPreview .conversation .sender .picture img {
  border-radius: 50%;
  width: 25px;
  border-width: 2px;
}
.mailboxPreview .conversation .sender .picture img.profileImageOffline {
  border-color: #e5e5e5;
}
.mailboxPreview .conversation .subject {
  float: left;
  max-width: 130px;
  width: 130px;
  line-height: 130%;
}
.mailboxPreview .conversation a {
  display: block;
  padding-top: 10px;
  padding-bottom: 10px;
  border-left: 5px solid #ffffff;
}
.mailboxPreview .conversation a.pinned {
  border-left: 5px solid #ffda69;
}
.mailboxPreview .conversation .messagePreview {
  color: #a4a4a4;
  font-weight: 300;
  max-width: 95%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  padding-top: 5px;
}
.mailboxPreview .conversation.mention .messagePreview {
  color: #000000;
  font-weight: 700;
}
.mailboxPreview .conversation.unread .messagePreview {
  color: #333333;
}
.mailboxPreview .conversation .unreadCounter {
  position: absolute;
  z-index: 2;
  margin-top: 20px;
  margin-left: 10px;
}
.mailboxPreview .messageTopic {
  font-weight: 500;
  color: #333333;
  font-size: 110%;
  max-width: 95%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.mailboxPreview .conversation .statusIconMail {
  float: right;
  width: 35px;
  margin-right: 20px;
  padding-top: 5px;
  display: none;
}
.mailboxPreview .conversation .statusIconMail img {
  width: 35px;
  margin-top: 5px;
}
.openMailbox {
  display: block;
  text-indent: 55px;
  font-size: 90%;
  padding: 10px;
  background: #e5e5e5;
}
.headlineLeft {
  background: #ffffff;
  margin-top: 0px;
}
.headlineLeft a {
  display: block;
  float: left;
  padding: 10px 10px 8px 20px;
  color: #585858;
  font-weight: 800;
}
.headlineLeft a img {
  width: 30px;
  margin-right: 15px;
}
.headlineLeft a:hover {
  text-decoration: underline;
}
.siteDouble {
  width: 100%;
}
.siteDouble.startpage .left {
  width: 100%;
}
.siteDouble.startpage .right {
  display: none;
}
.siteDouble.shopDouble .left {
  width: 360px;
}
.siteDouble.shopDouble .right {
  width: 360px;
}
.generalRight {
  font-size: 11px;
}
.generalRight img {
  vertical-align: text-bottom;
}
.generalRight a.entry {
  display: block;
  padding: 12px 11px;
  color: #333333;
  border-bottom: 1px solid #ececec;
}
.generalRight a.subEntry {
  text-indent: 15px;
  font-size: 11px;
}
.generalRight a.entry:hover {
  color: #ff9613;
}
.generalRight a.active {
  font-weight: bold;
  color: #ff9613;
}
.generalRight a.button.active {
  background: #75c0ff;
}
.generalRight a.subEntry.active {
  background: #71d0ff;
  font-weight: normal;
}
.generalRight .headline {
  padding: 10px 12px 11px 12px;
  color: #333333;
  margin-top: 15px;
  line-height: 130%;
  font-size: 120%;
  color: #676767;
}
.generalRight .headline:first-child {
  margin-top: 0;
}
.generalRight .options {
  background: #A6E5FC;
  border: 1px solid #A7D6FF;
}
.generalRight .options input.button {
  border: none;
  background: transparent;
}
.generalRight .options a.button,
.generalRight .options input.button {
  color: #333333;
  display: block;
  cursor: pointer;
  margin: 0;
  border-bottom: 1px solid #a4d5ff;
  padding: 12px 11px;
}
.generalRight .options input:hover {
  text-decoration: underline;
}
.generalRight .options a.button:last-child {
  border-bottom: none !important;
}
.generalRight .options a.button:hover {
  color: #000000;
  background: #c2ebff;
  border-bottom: 1px solid #99d7ff;
}
.generalRight .options .small {
  font-size: 95%;
  padding-right: 2px;
}
.generalRight .label {
  background: #b1e6ff;
  border: 1px solid #8bc4e9;
}
.generalRight .searchBar {
  background: #ffffff;
  border: none;
  padding: 0;
  margin-top: 20px;
}
.generalRight .searchBar input {
  margin-left: 0;
  padding-left: 10px;
}
.generalRight .chat:hover {
  background: #f1f1f1;
}
.generalRight .setOfOptions {
  max-width: 300px;
}
.generalRight .setOfOptions .entry {
  background: transparent;
  border-bottom: 1px solid #dbdbdb;
}
.generalRight .importantOptions a.entry {
  background: #FFF4AC;
  color: #000;
}
.generalRight .info {
  padding: 12px 11px;
  color: #777777;
  font-style: italic;
  background: #ffffff;
}
.generalRight .msInfo {
  margin-top: 10px;
}
.generalRight .subInfo {
  padding: 12px 11px;
  color: #777777;
  font-style: italic;
}
.generalRight.settings a.entry.active {
  background: #FF9933;
  color: #ffffff;
}
.generalRight .options a.disabled {
  text-decoration: line-through;
}
/* Footer */
#footer {
  color: #6e6e6e;
  padding-top: 20px;
  width: 100%;
}
#footer a:hover {
  text-decoration: underline;
  color: #306cb8;
}
#footer a {
  cursor: pointer;
}
#footer .mid {
  color: #9d9d9d;
  width: 100%;
  line-height: 180%;
}
#footer .mid a {
  margin: 0 7px 0 6px;
  color: #aaaaaa;
}
#footer .mid a.fade {
  color: #6e6e6e;
}
.userSearchLeft {
  width: 220px;
  margin-bottom: 10px;
  float: left;
}
.userSearchLeft form {
  padding-bottom: 15px;
  display: block;
}
.userSearchLeft .text {
  float: left;
  display: block;
  background: #ffffff;
  text-indent: 5px;
  border: 1px solid #c7c7c7;
  width: 183px;
  font-size: 11px;
  padding: 3px;
  height: 20px;
}
.userSearchLeft .send {
  float: left;
  display: block;
  background: url(//s.jappy.com/i/icon/bg/userSearch.png) no-repeat 50% -2px #bcbdbd;
  border: 1px solid #a9a9a9;
  border-top: 1px solid #a9a9a9;
  border-left: 1px solid #a9a9a9;
  padding: 3px;
  width: 29px;
}
/* Suche Gruppen, Result User Search.html */
.searchSuggest {
  background: #ffffff;
  text-align: left;
  border: 1px solid #cccccc;
  box-shadow: 1px 1px 2px #9c9c9c;
  width: 240px;
  padding: 15px;
  border-radius: 15px;
  margin-top: 10px;
}
.searchSuggest .entry {
  width: 100%;
  cursor: pointer;
  border-radius: 15px;
  margin-bottom: 3px;
}
.searchSuggest .entry.suggest {
  width: 100%;
}
.searchSuggest .entry .realname {
  color: #696969;
  font-size: 90%;
  padding-top: 3px;
}
.searchSuggest .entry .picture {
  float: left;
  padding: 5px 0 5px 10px;
  width: 40px;
  text-align: center;
}
.searchSuggest .entry .picture img {
  border-width: 2px;
  border-radius: 50%;
  width: 40px;
  height: 40px;
}
.searchSuggest .entry .picture.buddy {
  width: 40px;
  height: 40px;
  border-left: 3px solid #9ed1ff;
}
.searchSuggest .entry .plain {
  float: left;
  padding: 15px 0 5px 15px;
  width: 128px;
  overflow: hidden;
  font-size: 120%;
  font-weight: 600;
}
.searchSuggest .entry .plain .preStamp {
  display: none;
}
.searchSuggest .entry .plain a {
  text-decoration: none;
}
.searchSuggest .entry .options {
  float: right;
}
.searchSuggest .entry:hover {
  background: #ffedb0;
}
.searchSuggest .active {
  background: #656565 !important;
  color: #ffffff;
}
.searchSuggest .active .realname {
  color: #ffffff !important;
}
.searchSuggest .active .picture img {
  border: 1px solid #ffffff;
}
.searchSuggest .active a.ni {
  background: none;
  color: #ffffff;
}
.searchSuggest .options {
  float: right;
  padding-top: 3px;
}
.searchSuggest .highlight {
  background: #ffda69;
  border-radius: 15px;
}
.searchSuggest .more {
  padding: 10px;
  font-style: italic;
}
.newEntries {
  display: block;
  background: #ec6449;
  border: 1px solid #c7452b;
  text-align: center;
  border-radius: 50%;
  height: 12px;
  width: 12px;
  font-size: 12px;
  color: #ffffff !important;
  padding: 3px;
  font-weight: normal;
}
.draftLayer {
  background: #424242;
  border: 1px solid #333;
  font-weight: 600;
  border-radius: 15px;
  box-shadow: 0 2px 2px #cacaca;
  width: 270px;
}
.draftList dl,
.draftList dt,
.draftList dd {
  margin: 0;
  padding: 0;
}
.draftList dl {
  padding: 10px;
}
.draftList dt {
  padding: 10px;
  cursor: pointer;
  color: #ffffff;
}
.draftList dt:hover {
  background: #494949;
  border-radius: 10px;
  transform: scale(1.1);
  transition: 0.3s;
}
.draftList dd {
  margin-left: 20px;
  padding: 5px;
}
.draftList li {
  list-style: none;
  margin: 0;
  padding: 5px;
}
/* Freundesliste erstellen */
.userSelector .entry {
  width: 100%;
  border-bottom: 1px solid #f1f1f1;
}
.userSelector .entry label {
  display: block;
}
.userSelector .entry.user label {
  height: 40px;
  width: 140px;
}
.userSelector .entry:hover {
  background: #e1e1e1;
}
.userSelector .entry .plain {
  float: left;
  width: 70%;
  padding: 2px 1%;
}
.userSelector .entry .option {
  float: left;
  width: 20px;
  padding: 2px 0;
  margin-left: 15px;
}
.userSelector .headline {
  padding: 5px 15px;
  font-weight: bold;
}
.userSelector .entry.user {
  width: 240px;
  padding-top: 2px;
  padding-bottom: 2px;
}
.userSelector .entry.user .plain {
  width: 200px;
  padding: 0;
}
.userSelector .entry .picture {
  float: left;
  width: 50px;
}
.userSelector .entry .picture img {
  width: 40px;
}
.userSelector .entry .username {
  float: left;
  width: 150px;
}
#userSelection .entry .selection img,
#usSearchResult .entry .selection img {
  display: none;
}
#userSelection .entry.selected .selection img,
#usSearchResult .entry.selected .selection img {
  display: block;
}
#userSelection .entry.selected,
#usSearchResult .entry.selected {
  opacity: 1;
}
img.no {
  border-bottom: 3px solid #9cdc31;
}
img.ni {
  border-bottom: 3px solid #f1f1f1;
}
img.na {
  border-bottom: 3px solid #999999;
}
img.nx {
  border-bottom: 3px solid #b2b2b2;
}
img.profileImageOnline {
  border: 2px solid #90cc00;
}
img.profileImageOffline {
  border: 1px solid #ffffff;
}
img.profileImageBlocked {
  border: 1px solid #333333;
}
img.profileImagePush {
  border: 1px solid #33b5e5;
}
/* Scrollbars Blättern*/
.nvG {
  padding: 7px 0 4px 0;
  margin-top: 10px;
  width: 100%;
  line-height: 120%;
}
.nvG select {
  border: 1px solid #cecdce;
  padding: 10px 7px;
  line-height: 22px;
  float: left;
  margin: 0 5px 0 5px;
}
.nvG .numberOfEntries {
  float: left;
  display: none;
  overflow: hidden;
  text-indent: 42px;
  width: 150px;
  font-size: 12px;
  color: #666666;
  text-align: left;
  text-indent: 15px;
  padding: 0;
  padding-top: 7px;
  border: none;
}
.nvG .pages {
  float: left;
  width: auto;
}
.nvG .firstPage {
  float: right;
  width: 110px;
  text-align: center;
  font-size: 90%;
  padding-top: 5px;
  display: none;
}
.nvG .buttonDefault {
  float: left;
}
.nvG.reduced .numberOfEntries,
.nvG.reduced .firstPage {
  display: none;
}
.nvG.reduced .pages {
  width: 100%;
  text-align: center;
}
.nvG .spacer {
  width: 68px;
  float: left;
}
.hlG1,
.hlG3 {
  font-size: 120%;
  line-height: 130%;
  margin-bottom: 8px;
  padding: 10px 0 7px 15px;
  color: #676767;
}
.hlG3 {
  margin-left: 15px;
  padding-bottom: 2px;
}
.hlG2 {
  padding: 10px;
  font-weight: bold;
  padding-left: 0;
  font-size: 120%;
}
.hlG4 {
  padding: 5px;
  padding-top: 10px;
  padding-left: 0;
  background: #dbdbdb;
  font-size: 14px;
}
.hlM1 {
  text-transform: uppercase;
  font-size: 11px;
  color: #555555;
  padding: 10px 0 7px 0;
}
/* quote */
.defaultQuote {
  width: 100%;
  border-left: 3px solid #61a3ff;
}
.defaultQuote .quoteHeadline {
  font-weight: 800;
  color: #61a3ff;
  padding: 5px 10px;
  text-align: left;
}
.defaultQuote .quoteText {
  padding: 15px 10px;
}
.fuQh {
  width: 100%;
  text-indent: 10px;
  background: #3682c3;
  color: #FFFFFF;
}
/* Einstellungen ...*/
.settingsFull {
  padding: 15px;
  background: #ffffff;
  display: block;
  box-shadow: 0 2px 2px #cacaca;
  border-radius: 2px;
}
.settingsFull .headline {
  font-size: 140%;
  padding: 5px 0 6px 0;
  color: #666666;
}
.settingsFull .headline.big {
  font-size: 130%;
  padding-top: 10px;
}
.settingsFull .inputFull,
.settingsFull select {
  width: 90%;
  border: 1px solid #e1e1e1;
  border-top: 1px solid #bebebe;
  border-left: 1px solid #bebebe;
  padding: 3px 5px;
}
.textareaDefault {
  width: 80%;
  padding: 5px;
  border: 1px solid #a3a3a3;
}
.settingsFull .line {
  padding: 3px 0 12px 0;
  margin-bottom: 10px;
}
.settingsFull .inputFull.blue {
  border: 1px solid #1579ce;
}
.settingsFull .line.dark .inputFull {
  border: 1px solid #333333;
  border-top: 1px solid #000000;
  border-left: 1px solid #000000;
}
.settingsFull .line.multi,
.settingsFull .headline.multi {
  padding-bottom: 5px;
  margin-bottom: 0;
}
.settingsFull .subtext {
  padding-top: 5px;
  font-size: 90%;
  color: #666666;
  margin-left: 3px;
}
.settingsFull .nvG select {
  width: auto;
}
.settingsFull .password {
  border: 1px dotted #ff8888;
  width: 300px;
  background: #FFFFFF;
}
.settingsFull.dark {
  background: #CDCDCD;
  margin-bottom: 9px;
  padding-bottom: 3px;
  padding-top: 4px;
  border: 1px solid #A9A9A9;
}
.settingsFull.dark .inputFull {
  width: 516px;
  border: 1px solid #A9A9A9;
}
.settingsFull.dark .line,
.settingsFull.dark .headline {
  padding-left: 10px;
}
.settingsFull.dark .button {
  border: 1px solid #A9A9A9 !important;
}
.settingsFull.dark .actionSelector .button:first-child {
  margin-left: 10px;
  margin-right: 10px;
}
.settingsFull.dark .actionSelector .blue {
  border: 1px solid #1a7bd7 !important;
}
/* Editor */
.editor {
  padding-bottom: 5px;
}
.editor .features {
  float: left;
}
.editor .features.additionalHidden a.additional {
  display: none;
}
.editor .features a {
  text-decoration: none;
  padding: 1px 0 1px 5px;
  cursor: pointer;
  display: block;
  float: left;
}
.editor .features a img {
  max-width: 25px;
}
.editor .features a:hover {
  background: #ffda69;
  border-radius: 5px;
}
.editor .features a.active {
  background: #ffffff;
  border-radius: 5px;
}
.editor .settingsFull {
  padding-top: 10px;
}
.editor .settingsFull .inputFull {
  width: 450px;
  border: 1px solid #A9A9A9;
}
.editor .settingsFull .headline {
  padding-left: 10px;
  font-size: 80%;
}
.editor .settingsFull .line {
  padding-left: 10px;
  padding-bottom: 2px;
  margin: 0;
}
.editor .settingsFull .actionSelector {
  padding-left: 10px;
  width: 600px;
}
.editor .settingsFull .subtext {
  padding-left: 10px;
  text-align: right;
}
.editor .smilies .more {
  float: left;
  height: 27px;
  width: 25px;
  padding: 2px 0;
  cursor: pointer;
  text-align: center;
  border-radius: 5px;
  opacity: 0.7;
}
.editor .smilies .more:hover {
  background: #ffffff;
  opacity: 1.0;
  transform: scale(1.1);
  transition: 0.3s;
}
.editor .smilies .more img {
  margin-top: 0px;
  width: 22px;
  opacity: 0.7;
}
.mailboxCompose .editor .smilies .more img {
  margin-top: 3px;
}
.editor .smilies a:hover {
  border-bottom: 2px solid #bfbfbf;
}
.textOptionsLedge {
  display: block;
  float: left;
  padding: 5px;
}
.textOptionsLedge a {
  padding: 7px 5px;
  opacity: 0.3;
  float: left;
  border-radius: 5px;
  text-align: center;
  margin-right: 2px;
}
.textOptionsLedge a:hover {
  background: #ffd237;
  transition: 0.3s;
  opacity: 1.0;
  transform: scale(1.1);
}
.textOptionsLedge a img {
  width: 22px;
  height: 22px;
}
.smoothFadeIn {
  display: block;
  animation: overshotFadeIn 0.2s ease-in forwards;
}
.ledgeToggle {
  float: left;
  display: none;
  padding: 2px;
  margin: 3px;
  margin-top: 5px;
  border-radius: 10px;
  margin-left: 10px;
  opacity: 0.7;
  background: #808080;
}
.ledgeToggle img {
  width: 24px;
  height: 24px;
}
.editorLayer {
  text-align: left;
  background: #6ad6ff;
  border: 3px solid #52cdfc;
  box-shadow: 1px 1px 2px #55cdfb;
  line-height: normal;
  border-radius: 5px;
  padding: 3px;
}
.editorColorSelection {
  width: 170px;
}
.editorColorSelection a {
  display: block;
  width: 20px;
  height: 20px;
  margin: 1px;
  float: left;
  border: 1px solid #ffffff;
  border-radius: 50%;
}
.editorColorSelection a:hover {
  border: 1px solid #52cdfc;
}
.editorLayer.list a {
  display: block;
  padding: 10px;
  font-weight: 700;
  border-radius: 5px;
  margin-bottom: 3px;
  text-decoration: none;
  color: #ffffff;
  background: #2095c1;
}
.editorLayer.list a:hover {
  background: #ffda69;
  color: #000000;
}
/* Message */
.msInfo,
.msInfoSmall {
  margin: 0 0 15px 0;
  max-width: 700px;
  background: #ffe178;
  border-top: 4px solid #ffc119;
  color: #96770c;
  line-height: 140%;
  padding: 25px;
  font-size: 110%;
}
.msInfo .headline {
  color: #000000;
  font-weight: 500;
  font-size: 120%;
  padding: 0 !important;
  padding-bottom: 7px !important;
  margin: 0 !important;
}
.msInfo hr {
  color: #ffc119;
  border: 0px;
  background: #ffc119;
  height: 1px;
}
.msInfo.white {
  background: #ffffff;
  border-top: none;
  border-right: none;
  color: #333333;
}
.msInfo .blockLink {
  display: block;
  padding: 6px 0;
}
.msInfo.first {
  margin-top: 3px;
}
.msInfo.marginTop {
  margin-top: 5px;
}
.msInfo a {
  color: #00b1d0;
}
.msLayerInfo {
  width: 100%;
  bottom: 100px;
  position: fixed;
  z-index: 200;
  margin: auto;
  left: 0;
}
.msLayerInfo .wrapper {
  background: #ffffff;
  border-radius: 10px;
}
.selectionRadio {
  border-radius: 5px;
  margin-bottom: 10px;
  padding-top: 5px;
  line-height: 120%;
}
.selectionRadio div {
  padding: 5px;
}
.selectionRadio input {
  vertical-align: text-bottom;
}
.selectionRadio div:last-child {
  border: none;
}
.selectionRadio label {
  margin-left: 5px;
  color: #686868;
  font-weight: 300;
  cursor: pointer !important;
}
.selectionRadio .subinfo {
  font-size: 90%;
  color: #666666;
}
table {
  border-collapse: collapse;
  width: 100%;
  line-height: 140%;
}
table.boW1 {
  margin-bottom: 10px;
}
table td {
  padding: 10px 10px 10px 15px;
  vertical-align: top;
}
table td {
  border: none;
}
table th {
  text-align: left;
  color: #666666;
  line-height: 30px;
  padding: 10px 10px 10px 15px;
  font-weight: 700;
  text-transform: uppercase;
}
table.setting td {
  padding: 14px 3px 12px 10px;
}
table.setting {
  margin-top: 10px;
}
table caption {
  text-align: left;
  padding: 5px 0 5px 15px;
  font-size: 14px;
  color: #333333;
}
table tr {
  border-bottom: none;
}
.boW1 tr:hover {
  background: #f1f1f1;
}
/* Content melden*/
.pageFooterLinks {
  padding: 15px;
  padding-left: 0;
  margin-top: 15px;
  margin-left: 0px;
  line-height: 130%;
  padding-bottom: 70px;
}
.pageFooterLinks h1 {
  color: #aaaaaa;
  font-size: 100%;
}
.pageFooterLinks img {
  vertical-align: middle;
  margin-left: 0;
}
.pageFooterLinks a {
  display: block;
  padding-top: 6px;
  padding-bottom: 5px;
  font-size: 110%;
  font-weight: 600;
  color: #00b7cc;
}
/* Stream - pictureLayer */
.pictureLayer {
  width: 100%;
  height: 100%;
  text-align: center;
}
.pictureLayer .picture {
  margin-top: 60px;
}
.pictureLayerBackground {
  background: #333333;
  width: 100%;
}
/* Tickerbearbeiten, alte Mailbox, GB */
.composeMedium {
  width: 360px;
}
.composeMedium .textareaCompose {
  width: 340px;
  height: 82px;
  color: #000000;
  border: 1px solid #28AADA;
  padding: 10px 10px;
  font-size: 110%;
}
.composeMedium .searchRecipient {
  width: 538px;
  height: 45px;
  background: #cdcdcd;
  padding: 15px 5px 5px 5px;
  border: 1px solid #BCBCBC;
  margin-bottom: 10px;
  border-bottom: 1px solid #ACACAC;
  border-right: 1px solid #ACACAC;
}
.composeMedium .searchRecipient .headline {
  padding: 5px;
  padding-top: 13px;
  color: #5e5e5e;
  text-align: right;
  float: left;
  width: 55px;
}
.composeMedium .searchRecipient .form {
  padding: 5px;
  float: left;
  width: 458px;
  height: 40px;
}
.composeMedium .searchRecipient .assume {
  position: relative;
  left: 300px;
  top: -53px;
  font-style: italic;
  width: 100px;
  color: #ababab;
  font-size: 11px;
  cursor: pointer;
}
.composeMedium .searchRecipient .inFake {
  background: #ffffff;
  width: 448px;
  padding: 2px 5px;
  height: 25px;
  border: 1px solid #b8b8b8;
  border-top: 1px solid #929292;
}
.composeMedium .editor {
  border-bottom: none;
}
.composeMedium .wrapperEditor {
  border-bottom: 1px solid #BCBCBC;
  background: #cdcdcd;
}
.composeMedium .features {
  display: none;
}
/* Gästebuch, ModTools, Mail melden */
.listOfActions {
  padding: 5px 0 5px 15px;
}
.listOfActions .button,
.listOfActions button,
.listOfActions input {
  float: right;
  color: #585858;
  cursor: pointer;
  font-size: 100%;
  padding: 7px 13px;
  margin: 0;
  border-radius: 3px;
  margin-right: 3px;
  display: block;
  background: #f1f1f1;
  border: 1px solid #cfcfcf;
  border-right: 1px solid #c2c2c2;
  border-bottom: 1px solid #c2c2c2;
}
.listOfActions img {
  vertical-align: text-bottom;
}
.listOfActions .button.blue {
  background: #b0dbff;
  border: 1px solid #90c4f1;
  color: #333;
  font-weight: bold;
}
.listOfActions .button:hover,
.listOfStreamActions button:hover,
.listOfActions input:hover,
.listOfActions a:hover {
  border: 1px solid #333333;
  border-left: 1px solid #676767;
  border-top: 1px solid #676767;
}
.listOfActions .icIcon {
  margin: 0;
}
.listOfActions .button.side {
  float: right;
  border: none;
  background: none;
  padding: 7px 10px;
}
.listOfActions .button.details {
  border: none;
  background: none;
}
.listOfActions .button.side:hover,
.listOfActions .button.details:hover {
  background: #CDCDCD;
}
.listOfActions .button.side img {
  margin: 0;
  width: 12px !important;
}
.listOfActions .button.buttonComment {
  background: url(//s.jappy.com/i/bg/bgStreamBlue.png) repeat-x #4a95dd;
  border: 1px solid #3373b0;
  border-top: 1px solid #448cd1;
  border-left: 1px solid #448cd1;
  color: #ffffff;
  padding: 8px 15px;
  font-weight: bold;
  font-size: 110%;
}
.listOfActions a.buttonComment:hover {
  background: #55a1eb;
  border: 1px solid #24639f;
}
.listOfActions .button.red {
  background: #D64E4E;
  border: 1px solid #D64E4E;
  color: #f1f1f1;
  float: right;
  font-size: 11px;
  padding-left: 9px;
  box-shadow: 1px 1px 2px 0 #D0D0D0;
}
.listOfActions .disabled {
  color: #757575;
  text-decoration: line-through;
}
.listOfActions .button.red .icCheckbox {
  background-position: -850px -650px;
}
.listOfActions .button.red:hover {
  background: #ac3535;
  border: 1px solid #333333;
  border-left: 1px solid #676767;
  border-top: 1px solid #676767;
}
.listOfActions .disabled {
  color: #757575;
  text-decoration: line-through;
}
/* Ticker Follower */
.listOfFollowers {
  margin-left: 15px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e1e1e1;
}
.listOfFollowers .entry {
  float: left;
  width: 200px;
  margin-top: 5px;
}
.listOfFollowers .entry .picture {
  float: left;
  width: 50px;
}
.listOfFollowers .entry .picture img {
  width: 45px;
  height: 45px;
  vertical-align: text-bottom;
}
.listOfFollowers .entry .stamp {
  float: left;
  width: 150px;
  padding-top: 10px;
}
/* Mainstream Kommentierung */
.commentToggle {
  float: right;
}
.commentToggle img {
  cursor: pointer;
}
/* locationDp */
.locationRegistrationDp,
.locationSettingsDp {
  width: 248px;
  background: #ffffff;
  border-left: 1px solid #999999;
  border-right: 1px solid #e1e1e1;
  border-bottom: 1px solid #999999;
}
.locationRegistrationDp .entry,
.locationSettingsDp .entry {
  padding: 5px;
  border-bottom: 1px solid #ffffff;
}
.locationRegistrationDp .entry.hover,
.locationSettingsDp .entry.hover {
  background: #444444;
  color: #ffffff;
  border-bottom: 1px solid #242424;
  cursor: pointer;
}
.locationRegistrationDp {
  width: 400px;
  border-right: 1px solid #c1c1c1;
  border-top: 1px solid #e1e1e1;
}
/* Regelverstoß melden */
.reportedContent {
  margin: 0 0 10px 0;
  background: #fffee0;
  border: 1px solid #efefef;
  padding: 10px;
}
.suggestFeatures {
  float: right;
  margin-right: 10px;
  margin-top: 5px;
  z-index: 2;
}
.suggestFeatures .feature {
  float: left;
  margin-left: 10px;
}
.suggestFeatures .feature img {
  width: 35px;
  filter: grayscale(100%);
  opacity: 0.7;
  cursor: pointer;
}
.suggestFeatures .feature:hover img {
  filter: none;
  opacity: 1;
  transform: scale(1.05);
  transition: 0.3s;
}
.staticIcon {
  min-width: 15px;
  min-height: 15px;
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 5px;
}
.chatHeads {
  text-align: center;
}
.chatHeads img {
  width: 25px;
  height: 25px;
  border-radius: 50%;
}
.giftsSection .stream {
  width: 100%;
}
.giftsSection .stream .entry {
  float: left;
}
/* Layerhintergründe iE */
.defaultLayerBackground {
  position: fixed;
  top: 0;
  left: 0;
  background: #333333;
  width: 100%;
  opacity: 0.9;
  -moz-opacity: 0.9;
  -khtml-opacity: 0.9;
  height: 100%;
}
.tickerLayerBackground {
  position: fixed;
  animation: zoomIn 0.5s forwards;
  top: 0;
  left: 0;
  background: #4e4e4e;
  width: 100%;
  touch-action: none;
  width: 100vw;
}
.emotionLayerBackground {
  position: fixed;
  top: 0;
  left: 0;
  background: #333333;
  width: 100%;
  opacity: 0.6;
  -moz-opacity: 0.6;
  -khtml-opacity: 0.6;
}
.comLayerBackground {
  position: fixed;
  top: 0;
  left: 0;
  background: #333333;
  width: 100%;
  opacity: 0.6;
  -moz-opacity: 0.6;
  -khtml-opacity: 0.6;
}
.imageViewerBackground {
  position: fixed;
  top: 0;
  left: 0;
  background: #333333;
  width: 100%;
}
.teamNotice {
  background: #ffa3a3;
}
.teamNotice .text {
  padding: 10px;
}
/* AGBs */
.infosTerms {
  padding: 15px;
  font-size: 130%;
  line-height: 160%;
  text-align: justify;
  font-weight: 300;
}
.infosTerms .headline {
  font-size: 130%;
  padding-top: 10px;
  padding-bottom: 5px;
  margin: 20px 0 10px 0;
  font-weight: 700;
}
.infosTerms .subHeadline {
  font-size: 110%;
  padding-top: 20px;
  padding-bottom: 5px;
  margin: 20px 0 10px 0;
  font-weight: 400;
}
.infosTerms .listOfCompanies .title {
  font-size: 120%;
  font-weight: 700;
}
.infosTerms .listOfCompanies .entry {
  margin-bottom: 20px;
  margin-top: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid #dddddd;
}
.layerEmoji {
  position: fixed !important;
  left: auto !important;
  right: 10px !important;
  bottom: 20px !important;
  top: auto !important;
}
.emojiLayer {
  background: #ffffff;
  border: 2px solid #f9c925;
  clear: both;
  box-shadow: 0 5px 10px #cccccc;
  width: 360px;
  border-radius: 10px;
  animation: overshotFadeIn 0.3s ease-in forwards;
}
.emojiLayer .categories {
  text-align: center;
  padding: 5px;
}
.emojiLayer .categories img {
  width: 28px;
  padding: 4px;
  margin: 1px 3px;
  border-bottom: 3px solid #e5e5e5;
}
.emojiLayer .categories img:hover {
  background: #ffffff;
  cursor: pointer;
  border-radius: 5px;
}
.emojiLayer .categories img.active {
  border-bottom: 3px solid #ffb756;
}
.emojiLayer .categoryTitle {
  font-size: 120%;
  font-weight: 700;
  padding: 5px 0;
  padding-top: 15px;
}
.emojiLayer .listOfEmojis {
  background: #ffffff;
  padding-left: 15px;
  height: 230px;
  overflow-y: scroll;
}
.emojiLayer .listOfEmojis .emoji {
  padding: 2%;
  height: 3em;
  width: 3em;
  cursor: pointer;
}
.emojiLayer .listOfEmojis .emoji:hover {
  background: #ffedb0;
  border-radius: 5px;
  transition: 0.3s;
  transform: scale(1.1);
}
.emojiLayer .search {
  background: #ffffff;
  padding: 5px 15px;
  padding-bottom: 0;
}
.emojiLayer .search input {
  width: 92%;
  border-radius: 15px;
  border: 1px solid #f1f1f1;
  padding: 7px 10px;
}
.emojiLayer .toneSelector {
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 15px;
  background: #333333;
  display: none;
}
.emojiLayer .toneSelector .tone {
  border-radius: 10px;
  width: 3em;
  height: 3em;
  padding: 2%;
  cursor: pointer;
  display: inline-block;
}
.emojiLayer .toneSelector .tone:hover {
  background: #ffffff;
}
.emojiLayer .toneSelector .tone span {
  background: #ffcc4d;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  margin: 6px;
  border-radius: 5px;
  border: none;
  display: inline-block;
  min-width: 20px;
}
.emojiLayer .toneSelector .tone span#st1f3fb {
  background: #f7dece;
}
.emojiLayer .toneSelector .tone span#st1f3fc {
  background: #f3d2a2;
}
.emojiLayer .toneSelector .tone span#st1f3fd {
  background: #d5ab88;
}
.emojiLayer .toneSelector .tone span#st1f3fe {
  background: #af7e57;
}
.emojiLayer .toneSelector .tone span#st1f3ff {
  background: #7c533e;
}
.emojiLayer .emojiFooter {
  width: 100%;
  padding-bottom: 5px;
}
.emojiLayer .emojiFooter .actions {
  float: left;
  padding-left: 15px;
  padding-bottom: 5px;
  margin-top: 15px;
}
.emojiLayer .emojiFooter .actions img {
  padding: 2%;
  height: 3em;
  width: 3em;
  cursor: pointer;
}
.emojiLayer .emojiFooter .actions img:hover {
  background: #a79387;
  border-radius: 50%;
}
.emojiLayer .emojiFooter .close {
  float: right;
  margin-right: 15px;
  margin-top: 20px;
  cursor: pointer;
}
.emojiLayer .emojiFooter .close img {
  width: 20px;
}
.emojiLayer .emojiFooter .close:hover {
  transition: 0.3s;
  transform: scale(1.1);
}
.emoji {
  height: 1.5em;
  line-height: 1.5em;
  width: 1.5em;
  margin-left: 1px;
  margin-right: 1px;
}
.emojiSelector {
  background: #e5e5e5;
  border: 1px solid #a6a6a6;
  clear: both;
  box-shadow: 0 5px 10px #cccccc;
  width: 360px;
  border-radius: 10px;
}
.emojiSelector .emoji {
  height: auto;
}
.emojiSelector.emojiOffset30 {
  margin-top: 30px;
}
.emojiSelector .categorySelector {
  height: 2em;
  text-align: center;
}
.emojiSelector .categorySelector div {
  display: inline-block;
  text-align: center;
  width: 35px !important;
  overflow: hidden;
  padding: 12px 0px;
  font-weight: 300;
  float: left;
}
.emojiSelector .categorySelector div:first-child {
  margin-left: 10px;
}
.emojiSelector .categorySelector div:hover {
  background: #FDD978;
  cursor: pointer;
}
.emojiSelector .categorySelector div.active {
  border-bottom: 3px solid #ffa225;
}
.emojiSelector .emojiPager {
  clear: left;
  background: #ffffff;
  height: 15em;
  font-size: 1.5em;
  padding: 10px;
  overflow-x: hidden;
  overflow-y: scroll;
}
.emojiSelector .emojiPager .emojiPage {
  display: none;
}
.emojiSelector .emojiPager .emojiPage.active {
  display: block;
}
.emojiSelector .emojiSelect {
  cursor: pointer;
  text-align: center;
  width: 20px;
  height: 20px;
  border: 1px solid #ffffff;
  padding: 9px;
  border-radius: 5px;
  display: block;
  float: left;
}
.emojiSelector .emojiSelect:hover {
  background: #ffedb0;
  border: 1px solid #fde9a7;
  border-radius: 5px;
}
.emojiSelector .category {
  width: 20px;
}
.emojiSelector .info .emojiTag {
  float: right;
  padding: 5px;
  margin-right: 10px;
}
.emojiSelector .info .emojiTag .icon {
  float: left;
  padding: 0 10px;
  min-height: 30px;
  margin-top: 5px;
}
.emojiSelector .info .emojiTag .icon .emoji {
  height: 35px;
  width: 35px;
}
.emojiSelector .info .emojiTag .tag {
  float: left;
  padding: 15px 10px;
  font-weight: 600;
  color: #9a9a9a;
  font-size: 110%;
}
.layerSmilies.layerEmojis {
  margin-top: -402px;
}
.layerEmojis .emojiSelector {
  margin-top: 0px;
}
.emojiSelect {
  display: block;
  float: left;
  padding: 4px 2px;
}
.emojiSelect:hover {
  background: #ffffff;
  cursor: pointer;
  border-radius: 5px;
  transform: scale(1.1);
  transition: 0.3s;
}
.emojiLayerBackground {
  width: 100%;
  height: 100%;
  background: #000000;
  opacity: 0.1;
}
.emojiSelectorLayer {
  text-align: center;
}
.fixedAvailable .emojiSelectorLayer {
  position: fixed !important;
  left: auto !important;
  top: auto !important;
  right: 20px;
  bottom: 50px;
}
/* #profile */
.profileMobileActions,
a.profileMobileActions {
  display: block;
  animation: showMobileActionButton 0.6s;
  transition: 0.5s;
  animation-timing-function: ease-in;
  position: fixed;
  z-index: 6000;
  bottom: 70px;
  right: 10px;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: #ffa225;
  text-align: center;
  padding: 10px;
  border: 1px solid #f59a20;
}
.profileMobileActions img {
  width: 35px;
  height: 35px;
  vertical-align: text-bottom;
}
.profileBox {
  width: 100%;
  background: #333333;
}
.profileBox .profileImageBackground {
  width: 100%;
  float: left;
}
.profileImageFrame.female2 {
  background: #ff6ed7;
}
.profileImageFrame.female2 .profileImageBackground {
  background: #ff49ce;
}
.profileSubActions {
  padding-left: 11px;
  display: none;
}
.profileTopActions button {
  background: transparent;
  text-align: left;
  font-size: 12px;
  font-weight: 300;
  line-height: 1em;
}
.profileMobileOptions .profileTopActions {
  display: block;
  animation: showMobileActions 0.5s;
  position: fixed;
  width: 100%;
  margin-top: 100px;
  background: transparent;
}
.profileMobileOptions .profileTopActions a .icon,
.profileMobileOptions .profileTopActions button .icon {
  background: #ffa225;
  padding: 5px;
  width: 50px;
  margin-left: 10px;
}
.profileMobileOptions .profileTopActions a .text,
.profileMobileOptions .profileTopActions button .text {
  padding: 20px 0 15px 20px;
  font-size: 150%;
  font-weight: 600;
}
.profileMobileOptions .profileTopActions a,
.profileMobileOptions .profileTopActions button {
  margin-top: 15px;
}
.profileSubActions a.entry,
.profileSubActions .entry {
  display: block;
  float: right;
  margin-top: 20px;
  padding: 2px;
  border-radius: 50%;
  cursor: pointer;
  margin-left: 4px;
}
.profileSubActions a.entry.addGuestbookEntry {
  background: #97c224;
}
.profileSubActions a:hover,
.profileSubActions .entry:hover {
  background: #000000 !important;
}
.profileSubActions .statsFollower {
  position: absolute;
  font-size: 90%;
  color: #ffffff;
  background: #FF9613;
  padding: 2px;
  margin-left: 9px;
  border-radius: 5px;
  margin-top: -10px;
}
.profileActions {
  float: left;
}
.profileImageRound {
  text-align: center;
  z-index: 2;
  position: relative;
}
.profileImageRound img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 4px solid #ffffff;
}
.profileImageRound img.protection {
  border: none;
}
.profileImageRound.online img {
  border-color: #90cc00;
}
.profileImageRound.appUser img {
  border-color: #33b5e5;
}
.profileImageRound .imagePending {
  position: absolute;
  z-index: 11;
  margin-left: 53px;
  top: 120px;
  color: #ffffff;
  font-size: 70%;
}
.profileImageRound:hover img {
  border-color: #e17c00 !important;
}
.profileStartFrame {
  text-align: center;
  width: 100%;
  padding-top: 20px;
}
.profileStart {
  margin: auto;
}
.profileStart .profileImageRound img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 4px solid #ffffff;
}
.profileStart .profileImageRound img.protection {
  border: none;
}
.profileStartFrame .profileImageRound img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 4px solid #ffffff;
}
.profileStartFrame .profileImageRound img.protection {
  border: none;
}
.profileStartpage {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-gap: 10px 30px;
  max-width: 720px;
}
.profileTicker {
  max-width: 750px;
  margin-left: 20px;
}
.profileTickerEcho {
  max-width: 750px;
  margin-left: 20px;
}
.profileStartpage .pinArea {
  grid-column: 1 / span 1;
  grid-row: 1 / span 5;
}
.profileStartpage .giftPreview {
  grid-column: 2 / span 1;
  grid-row: 1 / span 1;
}
.profileStartpage .emotionPreview {
  grid-column: 2 / span 1;
  grid-row: 2 / span 1;
}
.profileStartpage .achievementPreview {
  grid-column: 2 / span 1;
  grid-row: 3 / span 1;
}
.profileStartpage.emptyPinBox .pinArea {
  grid-column: 1 / span 1;
  grid-row: 1 / span 1;
}
.profileStartpage.emptyPinBox .giftPreview {
  grid-column: 2 / span 1;
  grid-row: 1 / span 1;
}
.profileStartpage.emptyPinBox .emotionPreview {
  grid-column: 1 / span 1;
  grid-row: 2 / span 1;
}
.profileStartpage.emptyPinBox .achievementPreview {
  grid-column: 2 / span 1;
  grid-row: 2 / span 1;
}
@media screen and (max-width: 770px) {
  .profileStartpage {
    grid-template-columns: 100%;
  }
  .profileStartpage .pinArea {
    grid-column: 1 / span 1;
    grid-row: 1 / span 1;
  }
  .profileStartpage .giftPreview {
    grid-column: 1 / span 1;
    grid-row: 2 / span 1;
  }
  .profileStartpage .emotionPreview {
    grid-column: 1 / span 1;
    grid-row: 3 / span 1;
  }
  .profileStartpage .achievementPreview {
    grid-column: 1 / span 1;
    grid-row: 4 / span 1;
  }
  .profileStartpage.emptyPinBox {
    grid-template-columns: 100%;
  }
  .profileStartpage.emptyPinBox .pinArea {
    grid-column: 1 / span 1;
    grid-row: 1 / span 1;
  }
  .profileStartpage.emptyPinBox .giftPreview {
    grid-column: 1 / span 1;
    grid-row: 2 / span 1;
  }
  .profileStartpage.emptyPinBox .emotionPreview {
    grid-column: 1 / span 1;
    grid-row: 3 / span 1;
  }
  .profileStartpage.emptyPinBox .achievementPreview {
    grid-column: 1 / span 1;
    grid-row: 4 / span 1;
  }
}
.profileTopActions {
  display: flex;
  width: auto !important;
  margin: 0 20px 0 20px;
  background: linear-gradient(90deg, #3c3c3c 0%, #151515 100%) !important;
  padding: 10px 0 10px 10px;
  border-radius: 0 !important;
  border-bottom-left-radius: 15px !important;
  border-bottom-right-radius: 15px !important;
}
.profileTopActions .entry {
  display: block;
  color: #ffffff;
  margin-left: 10px;
  cursor: pointer;
}
.profileTopActions .entry .icon {
  margin-top: 5px;
  float: left;
  width: 40px;
  filter: grayscale(0%);
}
.profileTopActions .entry .icon img {
  width: 60%;
  margin: 20%;
}
.profileTopActions .entry .text {
  padding: 10px 0 10px 5px;
  font-weight: 400;
  font-size: 105%;
  float: left;
}
.profileTopActions .entry.mailTo {
  background: #ffdb38;
  border-radius: 15px;
  border: 3px solid #eac840;
  padding: 5px 15px 0 10px;
  color: #000000;
}
.profileTopActions .entry.mailTo .text {
  font-weight: 900;
  font-size: 110%;
  padding: 12px 5px 10px 10px;
}
.profileTopActions .entry.mailTo:hover {
  border: 3px solid #cfaf30;
  transition: 0.3s;
  color: #000000;
}
.profileTopActions .entry.mailTo.disabled {
  background: #3c3c3c;
  border: 3px solid #505050;
  color: #949494;
}
.profileTopActions .entry.button {
  border: 3px solid #505050;
  border-radius: 15px;
  padding-right: 20px;
  padding-left: 5px;
}
.profileTopActions .entry.button:hover {
  border: 3px solid #d8c172;
  transition: 0.3s;
}
.profileTopActions .entry .sub {
  font-size: 80%;
  color: #818181;
  padding-top: 5px;
  font-weight: 300;
}
.profileTopActions .entry.disabled {
  border: 3px solid #1b1b1b;
  opacity: 0.7;
}
.profileTopActions .entry.single .text {
  padding: 17px 0 10px 5px;
}
.profileTopActions .entry.disabled:hover {
  border: 3px solid #1b1b1b;
}
.profileTopActions .showMore {
  text-align: center;
  padding-top: 5px;
  padding-bottom: 5px;
}
.profileTopActions .showMeMore {
  margin-left: 10px;
  padding: 7px 10px 7px 10px;
  border-radius: 15px;
  cursor: pointer;
}
.profileTopActions .showMeMore.active {
  background: #434343;
}
.profileTopActions .showMeMore:hover {
  background: #000000;
  transition: 0.3s;
}
.profileTopActions .showMeMore img {
  width: 25px;
  margin-top: 5px;
}
.profileTopActions .showMore img {
  width: 25px;
}
.profileTopActions .justInMobile {
  display: none;
}
.profileDropDownActions .justInMobile {
  display: none;
}
.profileDropDownActions {
  display: block;
  position: absolute;
  margin: 0 20px 0 20px;
  width: 240px !important;
  box-shadow: 0 2px 2px #171717;
  background: linear-gradient(90deg, #202020 0%, #151515 100%) !important;
  padding: 10px 10px 10px 10px;
  border-radius: 15px;
}
.profileDropDownActions > * {
  display: block;
  color: #ffffff;
  background: transparent;
  border: none;
  font-size: 12px;
  cursor: pointer;
}
.profileDropDownActions .icon {
  margin-top: 5px;
  float: left;
  width: 40px;
  filter: grayscale(0%);
}
.profileDropDownActions .icon img {
  width: 60%;
  margin: 20%;
}
.profileDropDownActions .text {
  padding: 20px 0 10px 5px;
  font-weight: 400;
  font-size: 105%;
  float: left;
}
.profileDropDownActions > *:hover {
  background: #434343;
  border-radius: 15px;
}
@media screen and (max-width: 770px) {
  .profileTopActions {
    margin: 0 !important;
    padding-left: 5px;
  }
  .profileTopActions .justInMobile,
  .profileTopActions .justInMobile > * {
    display: block !important;
  }
  .profileTopActions .noneMobile,
  .profileTopActions .noneMobile > * {
    display: none !important;
  }
  .profileTopActions .icon {
    display: none;
  }
  .profileDropDownActions.justInMobile,
  .profileDropDownActions .justInMobile {
    display: block !important;
  }
  .profileTopActions .justImageIfNecessary {
    padding: 0 10px 0 10px !important;
  }
  .profileTopActions .justImageIfNecessary .icon {
    display: block !important;
  }
  .profileTopActions .justImageIfNecessary .text {
    display: none !important;
  }
  #profileExtraOptions {
    right: 280px;
    left: auto !important;
  }
}
.profileFrame .msInfo {
  margin-left: 20px;
  margin-bottom: 0;
}
.profileNumberOfImages {
  text-align: right;
  position: absolute;
  margin-left: 260px;
  padding-top: 5px;
}
a.profileOwnerNumberOfImages {
  float: right;
  display: block;
  width: 45px;
  vertical-align: text-top;
  color: #fff;
  font-size: 80%;
}
a.profileOwnerNumberOfImages img {
  width: 20px;
  height: 20px;
  vertical-align: text-bottom;
  margin-bottom: -4px;
  margin-right: 2px;
}
.profileFollow {
  background: #ffffff;
  border-radius: 10px;
  margin-right: 80px;
  margin-left: 80px;
  margin-top: 2px;
}
.profileFollow a {
  color: #a4a4a4;
  float: left;
  padding: 12px 0;
  display: block;
  width: 75px;
  text-align: right;
}
.profileFollow .numberOfFollowers {
  float: right;
  padding: 4px 5px;
  margin: 8px 4px;
  font-size: 100%;
  border-radius: 5px;
  background: #FF7B35;
  color: #ffffff;
  font-weight: bold;
}
.profileFollow:hover {
  background: #FDD978;
}
.profileSummary {
  width: 100%;
  text-align: center;
  z-index: 10;
  position: relative;
  z-index: 3;
  margin-top: 7px;
}
.profileSummary .nickname {
  font-size: 220%;
  font-weight: 900;
}
.profileSummary .nickname .preStamp {
  display: none;
}
.profileSummary .basicData {
  color: #ffffff;
  font-weight: 300;
  padding-top: 5px;
  padding-bottom: 5px;
  line-height: 1.5;
}
.profileSummary .basicData a {
  color: #ffffff;
}
.profileSummary .basicData a:hover {
  text-decoration: underline;
}
.profileSummary .stampOnline {
  color: #ffffff;
  padding: 0;
  background: none;
}
.profileSummary .stampOffline {
  color: #ffffff;
}
.profileSummary .stampBlocked {
  background: #dfdfdf;
  color: #b2b2b2;
  font-style: italic;
}
.profileSections {
  text-align: center;
  margin-left: 10px;
  margin-top: 0px;
  width: 350px;
  overflow: scroll;
}
.profileSections .wrap {
  width: 730px;
}
.profileSections a {
  float: left;
  display: block;
  width: 70px;
  height: 25px;
  margin: 5px;
  padding: 5px 0;
  text-align: center;
}
.profileSections a.active {
  border-bottom: 5px solid #54a8f3;
}
.profileSections a span {
  font-weight: 400;
}
.profileSections img {
  width: 30px;
}
.profileSections a .text {
  font-size: 90%;
  padding-top: 10px;
  color: #ffffff;
  font-weight: bold;
}
.profileSections a .rankInfo {
  position: relative;
  margin-top: -45px;
  color: #ffffff;
  width: 70px;
  font-weight: 400;
  text-align: center;
}
/* Theme */
.selectTheme {
  margin: auto;
}
.selectTheme label {
  float: left;
  width: 220px;
  display: block;
  padding: 10px;
  margin: 5px;
  border-radius: 3px;
  font-size: 110%;
  font-weight: 700;
}
.selectTheme .preview .background {
  width: 120px;
  cursor: pointer;
  padding: 20px;
  height: 90px;
  font-weight: 500;
  float: left;
  margin-right: 10px;
  border-radius: 10px;
  background-size: auto 100%;
  margin-bottom: 10px;
  font-size: 110%;
  border: 2px solid #e5e5e5;
}
.selectTheme .preview .background .text {
  padding: 10px;
  opacity: 0.8;
  border-radius: 5px;
  color: #ffffff;
}
.selectTheme .preview .background:hover {
  border: 2px solid #62b5ff;
}
.selectTheme .selected .background {
  border: 2px solid #333333 !important;
}
.themePreviewLayer {
  width: 100%;
}
.themePreviewLayer .wrapper {
  width: 750px;
  margin: auto;
  background: #ffffff;
  padding: 20px;
  border-radius: 10px;
  border: 1px solid #b6b6b6;
}
.themePreviewLayer .button {
  background: #ffa225;
  border: 1px solid #ffa225;
  margin: auto;
  padding: 10px;
  border-radius: 10px;
  color: #ffffff;
  font-weight: 600;
  cursor: pointer;
}
.themePreviewLayer .button:hover {
  border: 1px solid #62b5ff;
}
.themePreviewLayer .activate {
  padding-top: 10px;
  text-align: center;
}
.sectionTabs {
  text-align: center;
  background: #62b5ff;
  width: 100%;
  overflow: scroll;
  font-weight: 400;
  padding-top: 5px;
}
.sectionTabs .icon img {
  width: 25px;
}
.sectionTabs .wrap {
  width: 700px;
}
.sectionTabs a:first-child {
  margin-left: 15px;
}
.sectionTabs a {
  float: left;
  display: block;
  width: 70px;
  height: 55px;
  margin: 5px;
  border-bottom: none;
  padding: 5px 0;
  text-align: center;
}
.sectionTabs a:hover {
  background: #54a8f3;
}
.sectionTabs .text {
  font-size: 90%;
  padding-top: 10px;
  color: #ffffff;
  max-width: 70px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sectionTabs .active {
  border-bottom: 5px solid #54a8f3;
  font-weight: 700;
}
.sectionTabs span {
  font-weight: 400;
}
.themePreviewBackground {
  animation: backgroundFade 0.5s;
  position: fixed !important;
  background: #333333;
  opacity: 0.3;
  width: 100%;
  height: 100%;
}
.sectionTabs.contacts {
  background: #ffcd4c;
}
.sectionTabs.contacts a .text {
  color: #b0810a;
}
.sectionTabs.contacts a.active {
  border-bottom: 5px solid #b0810a;
}
.sectionTabs.contacts a:hover {
  background: #eebf45;
}
.sectionTabs.shop {
  background: #ffa949;
}
.sectionTabs.shop a .text {
  color: #ffffff;
}
.sectionTabs.shop a.active {
  border-bottom: 5px solid #dd8f38;
}
.sectionTabs.shop a:hover {
  background: #dd8f38;
}
.sectionTabs a.rightEntry {
  float: left;
}
.sectionTabs.chat {
  background: #9bc727;
}
.sectionTabs.chat a.active {
  border-bottom: 5px solid #ffffff;
}
.sectionTabs.chat a:hover {
  background: #b2db43;
}
.profileStartpage {
  width: 100%;
}
.profileStartpage .right {
  display: block;
  width: 360px;
}
.profileStartpage .welcome {
  background: #ffffff;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 100%;
  overflow: hidden;
  line-height: 1.3;
  border-radius: 10px;
}
.profileStartpage .welcome .wrapper {
  padding: 15px;
}
.profileStartpage .welcome img {
  max-width: 330px;
}
.profileStartpage .welcome .options {
  margin-left: 310px;
  width: 30px;
  position: absolute;
  z-index: 2;
  margin-top: -5px;
}
.profileStartpage .welcome .options a {
  display: block;
  width: 30px;
  height: 30px;
  text-align: center;
}
.profileStartpage .welcome .options a:hover {
  background: #FDD978;
  border-radius: 50%;
}
.profileStartpage .welcome .options img {
  width: 20px;
  height: 20px;
  margin-top: 5px;
}
.profileStartpage .iconBox {
  background: #ffffff;
  margin-top: 10px;
  overflow: hidden;
  padding-bottom: 10px;
  border-radius: 10px;
}
.profileStartpage .iconBox .headline {
  font-size: 100%;
  font-weight: 800;
  color: #000000;
  display: block;
  padding: 20px 0 10px 15px;
}
.profileStartpage .iconBox .headline span {
  font-weight: 300;
}
.profileStartpage .iconBox .iconEntry {
  float: left;
  margin-right: 2px;
  margin-bottom: 2px;
}
.profileStartpage .iconBox .iconEntry.pinned img {
  filter: drop-shadow(0 0 5px rgba(253, 217, 120, 0.5));
}
.profileStartpage .iconBox .iconEntry:hover {
  animation: intoFocusLight 0.5s forwards;
  transition: 0.7s;
  border-radius: 10px;
}
.profileStartpage .iconBox .iconEntry img {
  width: 65px;
  height: 50px;
  background-size: auto 100%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
.profileStartpage .iconBox .iconEntry.gift img {
  background-size: auto 90%;
}
.profileStartpage .iconBox .moreEntries {
  display: block;
  border-radius: 5px;
  padding: 18px 0 13px 0;
  background: #e5e5e5;
  font-weight: 700;
  width: 65px;
  height: 19px;
  color: #888888;
  text-align: center;
}
.profileStartpage .iconBox .wrapper,
.profileStartpage .iconBox a.wrapper {
  display: block;
  width: 340px;
  overflow: hidden;
  margin-left: 15px;
}
.profileStartpage .iconBox a.calendar {
  display: block;
  color: #49ccff;
  padding: 3px 0;
}
.profileStartpage .iconBox a.calendar .icon {
  float: left;
  width: 30px;
  margin-left: 20px;
  padding-top: 3px;
}
.profileStartpage .iconBox a.calendar .text {
  float: left;
  padding: 10px 5px 10px 10px;
  text-align: left;
  font-weight: 500;
}
.profileStartpage .more {
  padding: 0 40px 5px 15px;
  text-align: right;
}
.profileStartpage .more a {
  color: #62b5ff;
}
.profileDetails a.entry.todo {
  background: #ffe08d;
  color: #333333;
  display: block;
}
.profileHeadline {
  padding: 2% 3%;
  font-weight: 500;
  font-size: 110%;
  margin-top: 10px;
  color: #333333;
}
.startData .emptyState {
  padding-top: 30px;
  background: #ffffff;
  border-radius: 10px;
  margin-top: 5px;
}
.startData .infosRankProfile {
  padding: 10px;
}
.profileDetails .entry {
  background: #ffffff;
  overflow: hidden;
  border-radius: 3px;
  width: 94%;
  margin: 3% 3%;
}
.profileDetails .entry .headline {
  font-size: 110%;
  width: 80%;
  font-weight: 600;
  padding: 4% 3% 2% 3%;
}
.profileDetails .entry .text {
  font-size: 100%;
  width: 94%;
  padding: 0 3% 4% 3%;
}
.profileDetails .entry .options {
  right: 30px;
  width: 20px;
  position: absolute;
  z-index: 2;
  margin-top: -30px;
  text-align: center;
}
.profileDetails .entry .options a {
  display: block;
  width: 30px;
  height: 30px;
}
.profileDetails .entry .options a:hover {
  background: #FDD978;
  border-radius: 50%;
}
.profileDetails .entry .options img {
  width: 20px;
  height: 20px;
  margin-top: 5px;
}
.teamIcon {
  background: #C7C7C7;
  margin-left: 15px;
  margin-top: 10px;
  border-radius: 3px;
}
.teamIcon a {
  display: block;
  padding: 10px;
  font-size: 120%;
  color: #ffffff;
  font-weight: 300;
}
.teamIcon img {
  border-radius: 50%;
  width: 15px;
  height: 15px;
  vertical-align: text-bottom;
  border: 1px solid #ffffff;
}
.teamIcon img.smaragd {
  background: #34AC9F;
}
.teamIcon img.thistle {
  background: #f0d7f0;
}
.teamIcon img.silver {
  background: #EAEAEA;
}
.teamIcon.userMod {
  background: #9bc123;
  border: 1px solid #8DB01D;
}
.teamIcon.vjp {
  background: #FF9613;
  border: 1px solid #E3830A;
}
.teamIcon.youth {
  background: #b544d3;
  border: 1px solid #A129C0;
}
.teamIcon.games {
  background: #df4c5e;
  border: 1px solid #C93A4B;
}
.teamIcon .leader {
  font-size: 80%;
}
.moderationInfoBox {
  margin-top: 10px;
  margin-right: 5px;
  border: 1px solid #d3d3d3;
  overflow: hidden;
  border-bottom: 1px solid #cacaca;
  line-height: 17px;
  background: #ecf6ff;
  border: 1px solid #a8c0d4;
  margin-bottom: 5px;
  box-shadow: 0 2px 2px #cacaca;
  border-radius: 3px;
}
.moderationInfoBox .wrapper {
  padding: 15px;
}
.moderationInfoBox .wrapper img {
  max-width: 520px;
}
.fadeOutPlaceholder {
  text-align: center;
}
.fadeOutPlaceholder div {
  height: 2px;
  background: #59ffee;
  margin: auto;
  border-radius: 3px;
  width: 100%;
  animation-duration: 1s;
  animation-name: fadeOutBellFeed;
  animation-fill-mode: forwards;
}
.entryFrame .function {
  float: right;
  width: 20px;
  padding-top: 25px;
  text-align: center;
}
.entryFrame .function img {
  opacity: 0.7;
}
.entryFrame .function:hover img {
  cursor: pointer;
  opacity: 1;
}
.profileBookmark {
  margin-bottom: 15px;
  margin-right: 20px;
  padding: 10px 0;
  background: #ffe077;
  background: linear-gradient(120deg, #ffe46a 0, #ffdb38 100%);
  border-radius: 15px;
  border: 3px solid #edcc33;
}
.profileBookmark .textareaBookmark {
  margin-left: 10px;
}
.profileBookmark .textareaBookmark textarea {
  padding: 10px;
  height: 30px;
  margin-right: 10px;
  resize: vertical;
  width: 90%;
  border-radius: 15px;
}
.profileBookmark .button {
  margin-left: 2px;
  margin-right: 2px;
}
/* ?? */
.right .noEntries {
  padding: 10px 20px;
  text-align: center;
  font-weight: 300;
  color: #999999;
}
/* Sofortfunktionen Profil */
.layerAddThis {
  width: 100%;
  padding-top: 30px;
  background: #ffffff;
}
.layerAddThis .head .text {
  float: left;
  padding: 20px 30px;
  font-size: 180%;
  font-weight: 300;
  color: #333333;
}
.layerAddThis .head .close {
  float: right;
  padding-right: 30px;
}
.layerAddThis .head .close img {
  cursor: pointer;
}
.layerAddThis .actionSelector {
  margin-left: 30px;
}
/* Headline für Shops mit Credits */
.shopSelectorHeadline {
  padding: 10px 0 10px 0;
}
.shopSelectorHeadline .text {
  float: left;
  font-size: 130%;
  padding: 10px;
  font-weight: 600;
  color: #333333;
  max-width: 240px;
}
.shopSelectorHeadline .userImage {
  float: left;
}
.shopSelectorHeadline .userImage img {
  width: 40px;
  border-radius: 50%;
}
.shopSelectorHeadline .nickname {
  float: left;
  font-size: 130%;
  font-weight: 500;
  padding: 10px;
}
.shopSelectorHeadline .myAccount {
  float: right;
  font-size: 160%;
  font-weight: 700;
  color: #484848;
}
.shopSelectorHeadline .myAccount a {
  color: #4ecdff;
}
.shopSelectorHeadline .myAccount img {
  width: 40px;
  vertical-align: middle;
  margin-left: 5px;
}
.fixedAvailable .statusIconConfirm {
  position: fixed !important;
  top: 100px !important;
}
.confirmStatusIcon {
  width: 340px;
  background: #ffffff;
  margin: auto;
  border-radius: 10px;
  padding: 10px;
  margin-top: 5px;
  text-align: left;
}
.confirmStatusIcon .headline {
  padding: 10px;
  font-weight: 800;
  font-size: 120%;
}
.confirmStatusIcon .actions {
  padding: 10px;
}
.confirmStatusIcon .actions .abort {
  float: left;
  padding: 10px;
  color: #cccccc;
}
.confirmStatusIcon .actions .confirm {
  float: left;
  padding: 10px;
  background: #ffa225;
  color: #ffffff;
  font-weight: 700;
  margin-left: 5px;
  border-radius: 10px;
  cursor: pointer;
}
.confirmStatusIcon .actions .confirm:hover {
  background: #ffb44f;
}
.confirmStatusIcon .echoIcon {
  width: 15px;
}
.socketClosed,
.getUrlMessage {
  padding: 20px;
  line-height: 140%;
  font-size: 120%;
  background: #ffffff;
  border: 5px solid #bcbcbc;
  border-radius: 3px;
  box-shadow: 5px 5px 10px #b3b3b3;
}
/* Systemmeldungen a4d944 animation:fadeNotificationOut 5.0s forwards ease-in-out*/
.notificationTop {
  z-index: 9999999;
  animation: fadeNotificationOut 5s forwards ease-in-out;
  position: fixed;
  bottom: 20px;
  right: 10px;
  width: 280px;
  text-align: center;
  font-size: 120%;
  padding: 10px 15px;
  font-weight: 800;
  border-radius: 15px;
}
.notificationSuccess {
  background: #90cc00;
  color: #ffffff;
  background: linear-gradient(30deg, #ffc336 0, #ff9933 100%);
  line-height: 150%;
  border: 3px solid #ffa828;
  font-weight: 800;
}
.notificationSuccess:hover {
  opacity: 0.9;
}
.notificationSuccess .text {
  padding: 5px;
  text-align: center;
}
.notificationError {
  background: #90cc00;
  color: #ffffff;
  background: linear-gradient(30deg, #d9446c 0, #ff0044 100%);
  line-height: 150%;
  border: 3px solid #dd4e65;
  font-weight: 800;
}
.notificationError {
  background: #d9446c;
  color: #ffffff;
}
.notificationError .text {
  padding: 5px;
  text-align: center;
}
/* Layer */
#ly {
  text-align: left;
}
#ly .layerDragable.standard {
  box-shadow: 5px 5px 10px #b3b3b3;
  border-radius: 5px;
  background: #d1d1d1;
  text-align: left;
  border: 1px solid #e1e1e1;
  border-left: none;
  width: 618px;
  border-left: 1px solid #9e9e9e;
  border-top: 1px solid #aeaeae;
  border-bottom: 2px solid #adadad;
  border-right: 2px solid #adadad;
  padding: 5px;
}
#ly .layerDragable .dragHead {
  background: url(//s.jappy.com/i/icon/fbg.gif) repeat-x #e2e2e2;
  border-bottom: 1px solid #e2e2e2;
  border-top: 1px solid #e1e2e3;
  text-align: right;
  padding: 5px 0;
  cursor: move;
}
#ly .layerDragable .dragHead .title {
  float: left;
  padding: 0 3px 0 10px;
  font-weight: bold;
}
#ly .layerDragable .dragHead .title .fwI {
  font-weight: normal;
}
#ly .layerDragable .dragHead .close {
  float: right;
}
#ly .layerDragable .dragHead .close img {
  vertical-align: text-bottom;
}
#ly .layerDragable .dragHead .close .text {
  margin-right: 10px;
  font-size: 90%;
  cursor: pointer;
}
#ly .layerDragable .dragHead .close:hover img {
  background-position: -200px -500px;
}
s #ly .layerDragable .dragHead .close:hover {
  color: #000000;
}
#ly .layerDragable .dragHead .close img {
  height: 12px !important;
}
#ly .layerDragable .dragBox {
  background: #ffffff;
}
#ly .loading {
  background: #bcbdbd;
  border-radius: 50%;
  padding: 7px;
  opacity: 0.8;
  margin-top: 5px;
  margin-left: 5px;
  position: fixed;
}
#ly .loading img {
  width: 23px;
}
#ly .browserPermission {
  background: #ffed76;
  color: #555555;
  font-weight: bold;
  padding: 6px 15px;
  border: 1px solid #ffed76;
  border-top: none;
  border-left: 1px solid #d1d1d1;
  font-size: 16px;
}
#ly .browserPermission.chrome:after {
  content: "";
  position: absolute;
  top: -20px;
  right: 40px;
  border-bottom: 20px solid black;
  border-bottom-color: inherit;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
}
#ly .browserPermission.firefox:after {
  content: "";
  position: absolute;
  top: -1px;
  left: -16px;
  border-right: 16px solid black;
  border-right-color: inherit;
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
}
/* Layer oben Rechts */
.headerOptions {
  background: #ffffff;
  width: 170px;
  border: 1px solid #e1e1e1;
  position: fixed !important;
  box-shadow: 0 2px 2px #cacaca;
}
.headerOptions div {
  display: block;
  cursor: pointer;
  padding: 15px 25px;
  color: #009ee0;
}
.headerOptions div:hover {
  background: #fdd978;
}
.layerConfirm {
  background: rgba(0, 0, 0, 0.15);
  top: 0 !important;
  left: 0 !important;
  position: fixed !important;
  width: 100%;
  height: 100%;
}
.layerConfirm .wrapper {
  border: 1px solid #e2d759;
  background: #fff473;
  border-radius: 25px;
  width: 320px;
  margin: auto;
  margin-top: 100px;
}
.layerConfirm .message {
  padding: 20px 30px 10px 30px;
  font-size: 120%;
  font-weight: 900;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
}
.layerConfirm .actionSelector {
  padding-left: 20px;
}
.layerConfirm .actionSelector .button {
  border-radius: 25px;
  padding: 15px 20px;
}
.layerConfirm .actionSelector .button.blue {
  background: #00bee8;
  border: 1px solid #00b6d4;
  font-weight: 900;
  margin-right: 5px;
}
.bringMeBack {
  padding-bottom: 5px;
  padding-top: 5px;
  text-align: right;
}
.bringMeBack img {
  width: 15px;
  vertical-align: text-bottom;
}
.bringMeBack a {
  padding: 7px 15px;
  background: #e5e5e5;
  margin: 10px;
  font-weight: 600;
  font-size: 120%;
  border-radius: 10px;
}
/* Einstellungsübersicht */
.setup {
  border: 1px solid #d1d1d1;
  border-radius: 5px;
  padding: 10px;
  background: #ffffff;
  margin-bottom: 20px;
  margin-right: 20px;
}
.setup .profileImage {
  text-align: center;
  padding: 15px 0;
  padding-top: 0px;
  border-radius: 5px;
  margin-bottom: 10px;
  background-size: 100%;
  background-position: 50% 50%;
}
.setup .profileImage .pic img {
  width: 100px;
  border-radius: 50%;
  border: 2px solid #404040 !important;
}
.setup .profileImage .button {
  padding: 7px 15px;
  background: #404040;
  border-radius: 15px;
  font-weight: 500;
  color: #ffffff;
  margin-left: 5px;
  font-size: 90%;
  border: 2px solid #404040;
}
.setup .profileImage .button:hover {
  background: #000000;
  transition: 0.5s;
}
.setup .profileImage .button img {
  width: 15px;
  vertical-align: text-bottom;
}
.setup .profileImage .settings {
  font-size: 120%;
  padding: 10px;
  margin-top: 5px;
}
.setup .dataLine {
  font-size: 120%;
  border-bottom: 1px solid #f1f1f1;
  display: flex;
  padding: 10px;
}
.setup .dataLine:last-child {
  border-bottom: none;
}
.setup .dataLine .title {
  width: 200px;
  font-weight: 300;
  font-size: 90%;
}
.setup .dataLine .title.full {
  padding: 13px 0;
}
.setup .dataLine .data {
  font-weight: 600;
  font-size: 110%;
  line-height: 120%;
}
.setup .dataLine .data img {
  width: 15px;
  vertical-align: text-bottom;
}
.setup .dataLine .active {
  color: #32d296;
  padding: 5px 0;
  font-size: 80%;
  font-weight: 400;
}
.setup .dataLine .button {
  padding: 5px 15px;
  background: #e1e1e1;
  border-radius: 15px;
  font-weight: 300;
  color: #333333;
  margin-left: 5px;
  font-size: 80%;
}
.setup .dataLine:hover {
  background: #f1f1f1;
  border-radius: 5px;
}
.setup .button.highlighted {
  background: #ffc704;
  color: #000000;
  font-weight: 600;
  background: linear-gradient(270deg, #ffc704 0, #ffd237 100%);
}
.setup .logout {
  text-align: right;
  padding-top: 15px;
}
.setup .logout a {
  margin-right: 10px;
  padding: 5px 10px;
  background: #e1e1e1;
  border-radius: 15px;
  border: 2px solid #404040;
}
.setup .logout a:hover {
  background: #ffffff;
}
.setup .logout img {
  width: 15px;
}
.setup .headline {
  font-size: 120%;
  color: #000000;
  font-weight: 700;
  margin-left: 10px;
  padding-bottom: 5px;
}
.setup .inputDefault {
  padding: 7px 10px;
  border-radius: 10px;
  border: 2px solid #e5e5e5;
  font-size: 120%;
}
.setup .inputDefault:focus {
  border: 2px solid #ffa225;
}
.setup .actions {
  padding: 10px 10px;
}
.setup .actions.small a.button {
  font-size: 12px !important;
}
.setup input.button,
.setup button.button,
.setup a.button {
  padding: 10px 15px;
  font-size: 120%;
  border: 1px solid #3a3a3a;
  border-radius: 10px;
  background: #ffc704;
  color: #000000;
  font-weight: 600;
  background: linear-gradient(270deg, #ffc704 0, #ffd237 100%);
}
.setup input.button:hover,
.setup button.button:hover {
  cursor: pointer;
  background: #ffc704;
  transition: 0.5s;
}
.setup input.button.confirm {
  background: #9bfd75;
  border: 1px solid #5dd62e;
  color: #000000;
}
.setup hr {
  border: none;
  border-top: 1px solid #e1e1e1;
  margin: 25px 50px;
}
@media screen and (max-width: 800px) {
  .setup {
    margin-right: 0;
  }
  .setup .dataLine {
    display: block;
  }
  .setup .dataLine .title {
    padding-bottom: 5px;
  }
}
#settingsSection .top {
  width: 100%;
  margin-bottom: 15px;
}
#settingsSection .top .settings {
  padding-bottom: 10px;
  width: 100%;
  background: #333333;
  background: linear-gradient(90deg, #484848 0%, #333333 100%);
}
#settingsSection .top .settings .row {
  width: 100%;
  padding: 4px 0 4px 10px;
  margin-top: 5px;
}
#settingsSection .top .settings .row .title {
  width: 237px;
  padding: 5px 10px;
  color: #e6e6e6;
  padding-top: 12px;
  font-weight: 500;
}
#settingsSection .top .settings .row .value {
  width: 90%;
}
#settingsSection .top .settings .row a {
  display: block;
  color: #333333;
  background: #ffffff;
  font-weight: 300;
  border: 1px solid #000000;
  border-radius: 5px;
  padding: 5px 5px;
}
#settingsSection .top .settings .row a:hover {
  background: #ffe8aa;
  border: 1px solid #ff9200;
}
#settingsSection .top .settings .row a.withIcon span {
  display: block;
  float: left;
  padding: 7px;
}
#settingsSection .top .settings .row a.withIcon img {
  float: right;
  width: 20px;
  margin: 3px;
}
#settingsSection .top .settings .row .value.image img {
  width: 50px;
  border-radius: 50%;
}
#settingsSection img {
  vertical-align: text-bottom;
}
#settingsSection .topic {
  color: #78b1e3;
  margin: 20px 15px 5px 15px;
  padding-bottom: 5px;
  border-bottom: 1px solid #78b1e3;
  font-size: 140%;
}
#settingsSection .links {
  padding-top: 5px;
}
#settingsSection .links .entry a {
  display: block;
  padding: 13px 0 8px 0;
  padding-left: 15px;
  color: #525252;
}
#settingsSection .links .entry .subinfo {
  color: #999999;
  padding-bottom: 5px;
  font-size: 90%;
  padding-left: 17px;
}
#settingsSection .links .entry a:hover {
  background: #d5e9f1;
  color: #417bc4;
}
#settingsSection .links .entry a:hover .info {
  color: #000000;
}
.settingsBlock {
  margin-bottom: 15px;
  float: left;
  background: #ffffff;
  width: 100%;
  padding-bottom: 5px;
  margin-right: 15px;
}
.settingsBlock .headline {
  width: 100%;
  margin-bottom: 5px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.settingsBlock .headline .icon {
  float: left;
  width: 20px;
  margin-left: 20px;
  height: 20px;
  padding: 10px;
  background: #333333;
  border-radius: 50%;
}
.settingsBlock .headline .text {
  float: left;
  font-size: 130%;
  font-weight: 300;
  padding: 12px 15px;
  padding-right: 0;
  color: #727272;
}
.settingsBlock .options a {
  display: block;
  padding: 8px 15px;
  font-size: 100%;
  font-weight: 600;
  color: #49ccff;
  margin-left: 10px;
  margin-right: 10px;
}
.settingsBlock .options a:hover {
  background: #ffedb0;
  color: #333333;
  border-radius: 5px;
}
.profileImagePreview {
  margin-top: 30px;
  position: absolute;
  right: 20px;
  z-index: 999999999999;
}
.profileImagePreview .imageEntry canvas {
  border: 1px solid #b9b9b9;
  border-bottom: 1px solid #959595;
  border-right: 1px solid #959595;
}
.profileImagePreview .headline {
  background: #ffda69;
  border: 1px solid #eac451;
  border-right: 1px solid #d5b144;
  border-bottom: none;
  padding: 10px;
}
.profileImagePreview .large {
  display: none;
}
.profileImagePreview .xsmall {
  margin-top: -35px;
  margin-left: 10px;
  position: absolute;
  z-index: 2;
}
/* #search */
#searchSection .actionSelector {
  padding-top: 10px;
  padding-bottom: 7px;
}
#searchSection {
  width: 100%;
}
#searchSection .nvG {
  margin-left: 20%;
}
#searchSection .rectangle {
  display: block;
  text-align: center;
  padding-bottom: 5px;
}
#searchSection .half {
  display: none;
}
.searchFilterActive {
  width: 100%;
  line-height: 20px;
  margin-bottom: 5px;
}
.searchFilterActive .entry {
  margin-left: 5px;
  padding: 10px;
  display: block;
  float: left;
}
.searchFilterActive a {
  margin-left: 10px;
}
.searchFilterActive .change,
.searchFilterActive .info {
  display: block;
  float: left;
  padding: 10px;
}
.searchFilterActive .info {
  font-weight: bold;
  margin-left: 5px;
  padding: 10px;
}
.searchFilterActive a.change {
  color: #545454;
  text-decoration: underline;
}
.setSearchOptions {
  background: #f1f1f1;
  border: 1px solid #a3a3a3;
  border-right: 1px solid #bbbbbb;
  border-left: 1px solid #a3a3a3;
}
.setSearchOptions .entry {
  cursor: pointer;
  padding: 5px 8px;
}
.setSearchOptions .entry span {
  margin-right: 2px;
}
.setSearchOptions .entry:hover {
  background: #d5e9f1;
  color: #417bc4;
}
/* 840, 870, 970 */
.searchUserResults {
  margin-left: -7px;
  position: relative;
  z-index: 2;
}
.searchUserResults a.entry {
  display: block;
  width: 160px;
  background: #ffffff;
  float: left;
  cursor: pointer;
  margin-left: 10px;
  margin-bottom: 10px;
  border-radius: 15px;
  padding: 3px;
}
.searchUserResults a.entry .profileImage img {
  width: 100%;
  border: none;
  border-radius: 15px;
}
.searchUserResults a.entry .zipcode {
  padding: 7px;
  background: #000000ba;
  font-size: 90%;
  color: #ffffff;
  position: absolute;
  z-index: 2;
  margin-top: -30px;
  border-radius: 10px;
  margin-left: 6px;
}
.searchUserResults a.entry .stamp {
  font-size: 11px;
  margin-left: 5px;
  text-align: center;
  position: absolute;
  margin-top: -150px;
  font-weight: 700;
}
.searchUserResults a.entry .stamp span.stampOnline {
  display: block;
  border-radius: 10px;
  background: #80cb00;
  padding: 7px;
  color: #ffffff;
}
.searchUserResults a.entry .stamp span.stampOffline {
  display: block;
  border-radius: 10px;
  background: #ff9933;
  padding: 7px;
  color: #ffffff;
}
.searchUserResults a.entry .stamp span.stampBlocked {
  display: block;
  border-radius: 10px;
  background: #333333;
  padding: 7px;
  text-decoration: line-through;
  color: #ffffff;
}
.searchUserResults a:hover {
  color: #333333;
}
.searchUserResults a.entry.highlight {
  background: #d5e9f1;
  border: 1px solid #8bcaff;
}
.searchUserResults a.entry:hover {
  background: #ffa225;
}
.searchUserResults .searchLeaderboard {
  padding-top: 5px;
  padding-bottom: 10px;
  margin-left: 5px;
}
.searchUserResults .stamp img {
  vertical-align: text-bottom;
}
/* User Attached */
.userAttached {
  width: 100%;
  padding-top: 5px;
}
.userAttached a.userEntry {
  display: block;
  width: 150px;
  padding: 15px;
  height: 180px;
  text-align: center;
  background: #333333;
  border-radius: 5px;
  float: left;
  cursor: pointer;
  margin-left: 15px;
  margin-bottom: 7px;
}
.userAttached a.userEntry .userProfileImage img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
}
.userAttached a.userEntry .stamp {
  padding: 5px;
  padding-top: 10px;
  font-size: 11px;
  margin-left: 5px;
}
.userAttached a.userEntry .stampOffline {
  color: #ffffff;
}
.userAttached a.userEntry .stampOnline {
  background: none;
  color: #89C003;
}
/* searchSettings */
.searchSettings .side {
  float: left;
  width: 325px;
}
.searchSettings .container {
  padding: 20px 3px 5px 15px;
  width: 300px;
}
.searchSettings .container .selectionRadio {
  margin-top: 5px;
  margin-left: 0;
}
.searchSettings .category {
  text-transform: uppercase;
  color: #78b1e3;
  margin: 20px 15px 5px 15px;
  border-bottom: 1px solid #78b1e3;
  font-size: 16px;
}
.searchSettings .type {
  color: #525252;
  font-size: 130%;
}
.searchSettings .selection {
  padding: 10px 5px 5px 0;
}
.searchSettings input {
  padding-left: 3px;
}
.searchSettings select {
  width: 70%;
  padding: 2px 5px;
  border: 1px solid #e1e1e1;
  border-top: 1px solid #bfbfbf;
  border-left: 1px solid #bfbfbf;
}
.searchSettingsBar {
  background: #fff4ac;
  padding: 10px 3px 10px 10px;
}
.searchSettings .highlight {
  background: #fff4ac;
  border-top: 1px solid #EDECC6;
  width: 250px;
  margin-top: 5px;
  padding: 10px;
}
.searchSettings .highlight input {
  width: 90%;
}
.searchSettings .headline {
  font-size: 110%;
  padding-top: 6px;
  padding-bottom: 3px;
}
.searchNavigation {
  width: 100%;
}
.searchNavigation a.entry {
  float: left;
  width: 33%;
  display: block;
}
.searchNavigation a.entry .wrapper {
  padding: 5px 15px;
  display: block;
  height: 35px;
  text-align: center;
  border-bottom: 5px solid #c6c6c6;
}
.searchNavigation a.entry:hover .wrapper {
  border-bottom: 5px solid #629400;
}
.searchNavigation a.entry.highlight .wrapper {
  border-bottom: 5px solid #629400;
  font-weight: bold;
}
.searchNavigation a.entry img {
  float: left;
}
.searchNavigation a.entry .text {
  font-size: 120%;
  color: #555555;
  float: left;
  padding-top: 15px;
  margin-left: 7px;
}
/* Allg. Sortierung */
.grading {
  padding: 0;
  width: 100%;
  margin-left: 10px;
  font-size: 90%;
  font-weight: 300;
}
.grading .sortBy {
  float: left;
  padding: 10px 8px;
  color: #999999;
}
.grading .active {
  color: #f96700;
  font-weight: 800;
}
.grading > * {
  cursor: pointer;
}
.grading > *.sortBy:hover {
  color: #ec6449;
}
.grading .headline {
  float: left;
  padding-top: 15px;
  font-size: 120%;
}
.grading .breadCrumb {
  float: left;
  width: 300px;
}
.grading .inputSearch {
  float: right;
  margin: 5px 10px 2px 0;
  border: 1px solid #e5e5e5;
  color: #999999;
  padding: 5px 10px;
  border-bottom: 3px solid #ffaa34;
  background: #e5e5e5;
  font-size: 100%;
}
.grading .folder {
  float: right;
  cursor: pointer;
  padding: 8px;
  color: #999999;
}
.grading .folder:hover {
  text-decoration: underline;
}
.grading .folder img {
  vertical-align: text-bottom;
}
/* Allg. Brotkrümel */
.breadCrumb {
  padding: 5px 5px 5px 0;
  font-size: 90%;
  line-height: 140%;
}
.breadCrumb .crumb,
.breadCrumb a.crumb {
  background: url(//s.jappy.com/i/icon/pointer/crumb.png) 100% 50% no-repeat;
  margin-right: 5px;
  padding: 10px 15px;
  display: block;
  line-height: 140%;
  color: #333333;
  font-weight: 700;
  cursor: pointer;
  padding-right: 30px;
  float: left;
}
.breadCrumb a.crumb:hover {
  text-decoration: underline;
}
.breadCrumb .locationCrumb,
.breadCrumb a.locationCrumb {
  display: block;
  float: left;
  font-size: 100%;
  margin-left: 10px;
  color: #676767;
  margin-right: 5px;
  padding: 10px 7px;
  padding-left: 0;
}
.breadCrumb .locationCrumb .info {
  color: #888888;
  font-style: italic;
}
.breadCrumb.profile {
  display: none;
}
.breadCrumb.profile .crumb {
  padding: 10px 20px 10px 10px;
  font-size: 120%;
  font-weight: 500;
}
.breadCrumb.profile .crumb.profileImage {
  padding: 7px 25px 7px 15px;
}
.breadCrumb.profile .crumb img {
  width: 22px;
  border-radius: 50%;
  vertical-align: text-bottom;
  margin-right: 5px;
}
.breadCrumb.profile .locationCrumb {
  font-size: 120%;
  font-weight: 300;
  line-height: 140%;
}
.statusInfo {
  font-family: "Roboto", sans-serif-light;
  background: #ffffff;
  border: 1px solid #d3d3d3;
  border-bottom: 1px solid #cacaca;
  border-right: 1px solid #cacaca;
  box-shadow: 0 2px 2px #cacaca;
  border-radius: 3px;
  padding-bottom: 10px;
}
.statusInfo .icon {
  float: left;
  padding: 20px 10px;
  width: 30%;
}
.statusInfo .info {
  float: left;
  padding: 20px 10px;
  width: 55%;
}
.statusInfo .info .name {
  font-size: 130%;
  font-weight: bold;
  padding-bottom: 4%;
}
.statusInfo .info .cost {
  background: #ff9933;
  color: #ffffff;
  min-width: 55px;
  max-width: 100px;
  text-align: center;
  padding: 3%;
  border-radius: 2px;
  font-weight: bold;
  font-size: 90%;
}
.statusInfo a.button {
  padding: 15px 20px;
  font-size: 110%;
  font-weight: 600;
  border-radius: 5px;
  display: block;
  color: #ffffff;
  background: #8ec200;
  text-align: center;
}
.statusInfo a.button.blue {
  background: #4983ec;
}
.statusInfo a.button:hover {
  text-decoration: underline;
}
.statusInfo .actions {
  padding: 3%;
}
.statusDependency {
  font-family: "Roboto", sans-serif-light;
}
.statusDependency .entry,
.statusDependency a.entry {
  display: block;
  margin-bottom: 1%;
  padding: 10px;
  font-size: 110%;
  font-weight: 300;
  background: #ffffff;
  border: 1px solid #d3d3d3;
  border-bottom: 1px solid #cacaca;
  border-right: 1px solid #cacaca;
  box-shadow: 0 2px 2px #cacaca;
  border-radius: 3px;
  width: 50%;
}
.statusDependency .entry:hover {
  background: #ffde78;
}
.statusDependency .text {
  float: left;
  padding: 1%;
  color: #333333;
}
.statusDependency .icon {
  float: left;
  padding: 1px;
  margin-right: 5px;
}
.statusDependency .icon img {
  width: 20px;
  height: 20px;
}
.statusDependency .available {
  float: right;
}
.statusDependency .available img {
  width: 15px;
  height: 15px;
}
/* emptyState */
.emptyState {
  line-height: 180%;
  text-align: center;
}
.emptyState .wrapper {
  width: 300px;
  margin: auto;
  padding: 10px;
}
.emptyState .text {
  padding: 10px 15px 15px 15px;
  font-size: 110%;
  font-weight: 300;
}
.emptyState .icon img {
  width: 150px;
}
.emptyState .headline {
  font-size: 140%;
  font-weight: bold;
}
.emptyState .button a,
.emptyState .button button {
  padding: 15px 20px;
  margin: auto;
  border: none;
  font-size: 100%;
  font-weight: 800;
  border-radius: 10px;
  display: block;
  color: #ffffff;
  background: #ffa225;
  text-align: center;
}
.emptyState .button a:hover,
.emptyState .button button:hover {
  text-decoration: underline;
}
.emptyState .smallInfo {
  padding: 15px;
  color: #b2b2b2;
  font-size: 90%;
}
.emptyState .smallInfo.highlighted {
  font-size: 110%;
  font-weight: 300;
  color: #333333;
}
/* Freunde */
.friendSection .left {
  width: 100%;
}
.friendSection .right {
  display: none;
}
.listOfContacts .list {
  margin-top: 5px;
}
.listOfContacts .list .entry {
  display: block;
  background: #ffffff;
  border-bottom: 1px solid #cacaca;
  padding: 0 0;
  margin-bottom: 7px;
  border-radius: 20px;
}
.listOfContacts .list .entry a.main {
  float: left;
  display: block;
  width: 320px;
}
.listOfContacts .list .entry .profileImage {
  display: block;
  padding: 10px;
  padding-left: 15px;
  text-align: center;
  float: left;
}
.listOfContacts .list .entry .profileImage img {
  width: 50px;
  border-radius: 50%;
}
.listOfContacts .list .entry .data {
  float: left;
}
.listOfContacts .list .entry:hover {
  background: #ffd767;
}
.listOfContacts .list .entry .stamp {
  padding: 10px;
  padding-top: 15px;
  font-size: 130%;
  padding-right: 0;
}
.listOfContacts .list .entry .stamp .preStamp {
  display: none;
}
.listOfContacts .list .entry .stamp .zipcode {
  font-size: 80%;
  color: #999999;
  font-weight: 250;
}
.listOfContacts .list .entry .loginInfo {
  padding: 10px;
  padding-top: 0;
  font-size: 90%;
  font-weight: 300;
  color: #999999;
}
.listOfContacts .list .settings {
  float: right;
  text-align: right;
  padding: 10px 20px;
  margin-top: 10px;
}
.listOfContacts .list .settings img {
  width: 35px;
}
.listOfContacts .list .settings > * {
  display: block;
  float: right;
  margin-left: 10px;
  padding: 3px;
  filter: grayscale(100%);
  opacity: 0.5;
  border: none;
  background: transparent;
  cursor: pointer;
}
.listOfContacts .list .settings > *:hover {
  filter: grayscale(0%);
  opacity: 1;
}
.listOfContacts .list .checkbox {
  float: left;
  width: 50px;
  display: block;
}
.listOfContacts .list .checkbox img {
  width: 30px;
}
.listOfContacts .textareaFull {
  padding: 5px;
  height: 30px;
  width: 440px;
}
.listOfContacts .list .option .sub {
  margin-top: 5px;
}
.friendShipRequest {
  margin-bottom: 10px;
  background: #ffe178;
  border-top: 4px solid #ffc119;
  box-shadow: 0 2px 2px #cacaca;
}
.friendShipRequest .profileImage {
  float: left;
  width: 130px;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
}
.friendShipRequest .profileImage img {
  border-radius: 50%;
  width: 100px;
  height: 100px;
}
.friendShipRequest .plain {
  float: left;
  padding: 15px;
}
.friendShipRequest .actionSelector a.button {
  margin: 0;
}
.showFriendOnline {
  display: none;
}
#listOfFolders {
  display: none;
}
.listOfFolders {
  background: #ffffff;
  border: 1px solid #e1e1e1;
}
.listOfFolders a {
  display: block;
  padding: 10px 15px;
  font-size: 110%;
  font-weight: 300;
}
/* Abolist */
.aboList {
  width: 100%;
  background: #ffffff;
}
.aboList .entry {
  display: block;
  cursor: pointer;
  border-bottom: 1px solid #f1f1f1;
  padding: 5px 0;
}
.aboList .entry .profileImage {
  display: block;
  padding: 10px;
  text-align: center;
  float: left;
}
.aboList .entry .profileImage img {
  width: 60px;
  border-radius: 50%;
}
.aboList .entry .stamp {
  font-size: 110%;
  padding-right: 0;
  float: left;
  padding: 10px;
}
.aboList .entry .loginInfo {
  padding: 10px;
  padding-top: 0;
  font-size: 90%;
  font-weight: 300;
  color: #999999;
}
.aboList .entry .zipcode {
  margin-top: -20px;
  position: absolute;
  border-radius: 5px;
  background: #000000;
  opacity: 0.8;
  padding: 4px;
  color: #ffffff;
  margin-left: 10px;
}
.aboList .entry .actions {
  float: right;
  padding: 15px;
}
.aboList .entry a.main {
  float: left;
  display: block;
}
/* Freundesliste erstellen und bearbeiten */
.userSelectionArea {
  width: 100%;
  height: 300px;
  overflow-y: scroll;
  margin-bottom: 10px;
}
.userSelectionArea .profileImage img {
  display: block;
  width: 100px !important;
  height: 100px;
  opacity: 0.8;
}
.userSelectionArea .entry {
  cursor: pointer;
  box-shadow: 1px 1px 2px #9c9c9c;
  border-top: 4px solid #e5e5e5;
  background: #ffffff;
  width: 100px;
  height: 125px;
  overflow: hidden;
  float: left;
  margin: 4px 4px 0 0;
}
.userSelectionArea .entry .nickname {
  padding: 10px;
  font-size: 11px;
}
.userSelectionArea .entry.highlight {
  border-top: 4px solid #3399ff;
  background: #3399ff;
}
.userSelectionArea .entry:hover {
  border-top: 4px solid #3399ff;
}
.userSelectionArea input {
  visibility: hidden;
  position: absolute;
}
.defaultImageLayer .imageFrame.imageFadeIn img {
  animation-duration: 1s;
  animation-name: imageFadeIn;
}
.defaultImageLayer .imageFrame.imageFadeOut img {
  animation-duration: 1s;
  animation-name: imageFadeOut;
  animation-fill-mode: forwards;
}
.defaultImageLayer .title {
  padding: 10px;
  height: 30px;
  overflow: hidden;
  font-size: 200%;
  color: #f1f1f1;
  background: #333333;
}
/* emptyState no Profile Image animation-fill-mode: forwards */
.errorNoProfileImage {
  padding: 10px;
  line-height: 180%;
  text-align: center;
  font-family: "Roboto", sans-serif-light;
}
.errorNoProfileImage .wrapper {
  width: 300px;
  margin: auto;
}
.errorNoProfileImage .text {
  padding: 10px;
  font-size: 120%;
  font-weight: 300;
}
.errorNoProfileImage .headline {
  font-size: 160%;
  font-weight: bold;
}
.errorNoProfileImage .button a {
  padding: 15px 20px;
  font-size: 110%;
  display: block;
  color: #ffffff;
  background: #8ec200;
  text-align: center;
}
.errorNoProfileImage .button a:hover {
  text-decoration: underline;
}
a.tickerAboInfo {
  display: block;
  background: #33B5E5;
  width: 450px;
  padding: 10px 15px;
  color: #ffffff;
  font-weight: 300;
  border-radius: 2px;
  margin-bottom: 10px;
  border: 1px solid #28AADA;
}
/* Tickereintrag erstellen */
.tickerCompose {
  background: #e5e5e5;
  padding-top: 3%;
}
.tickerCompose .editor {
  border: none;
  background: transparent;
  padding-bottom: 0;
}
.tickerCompose .editor .features {
  display: none;
}
.tickerCompose .editor .smilies .entries {
  width: 250px;
}
.tickerCompose .textareaCompose {
  padding: 18px 3%;
  width: 88%;
  margin: 0 3%;
  border: 1px solid #cdcdcd;
  border-radius: 3px;
  max-height: 360px;
}
.tickerCompose .stream {
  padding: 0 !important;
  border-top: none !important;
  border-bottom: none !important;
}
.tickerCompose .selectFile {
  padding: 10px;
}
.tickerCompose .headline {
  padding: 10px;
  font-weight: 500;
}
.tickerCompose .line {
  padding: 10px;
}
.tickerCompose .line input {
  width: 320px;
  padding: 5px;
}
.tickerCompose .editor .emoji {
  width: 1.7em;
  height: 1.7em;
}
.tickerCompose .editor .smilies {
  width: 330px;
}
#tickerComposeStartpage.mask .masked {
  display: none;
}
#tickerComposeStartpage.unmask .masked {
  display: block;
}
#tickerComposeStartpage.mask .stream {
  display: none;
}
#tickerComposeStartpage.unmask .stream {
  display: block;
}
.tickerCompose .progress {
  padding: 5px 10px;
}
.tickerCompose .progress .progressInfo {
  padding: 5px 0;
  font-weight: 500;
}
.imageToolbar .rotate {
  padding: 5px;
  margin-left: 10px;
  cursor: pointer;
}
.imageToolbar .rotate:hover {
  background: #ffffff;
  border-radius: 10px;
}
/* Ticker Upload */
.progressUpload .status {
  position: absolute;
  margin-left: 10px;
  margin-top: 7px;
  font-weight: bold;
}
.progressUpload {
  padding: 5px 10px;
  height: 30px;
}
.progressUpload .progress {
  background: #ff8b04;
  height: 32px;
  border-radius: 3px;
}
.uploadFile .button {
  text-align: center;
  font-weight: bold;
  padding: 15px 10px;
  color: #ffffff;
  margin: 5px 10px;
  border-radius: 15px;
  margin-top: 0;
  background: #3ca2fe;
  max-width: 320px;
}
.uploadFile .button:hover {
  text-decoration: underline;
  cursor: pointer;
}
.imageUpload {
  width: 330px;
  padding: 15px;
  background: #cacaca;
  margin: auto;
  border-radius: 25px;
}
.imageUpload .uploadSelector {
  padding: 10px;
}
.imageUpload .placeholder {
  width: 330px;
  overflow: hidden;
  height: 250px;
  background: #ffffff;
  border: 1px dotted #3ca2fe;
}
.imageUpload .placeholder:hover {
  background: #ffedb0;
  cursor: pointer;
}
.imageUpload .placeholder img {
  width: 100%;
}
.imageUpload .placeholder .content {
  background: url(//s.jappy.com/i/s.gif) no-repeat;
  background-size: 100%;
  background-position: 50% 50%;
  height: 250px;
  width: 360px;
}
.imageUpload .placeholder .content .text {
  position: relative;
  z-index: 2;
  margin-top: -60px;
  text-align: center;
  font-weight: 800;
  font-size: 110%;
}
.imageUpload .placeholder.disabled {
  opacity: 0.5;
}
.imageUpload .description {
  padding: 10px 0 10px 0;
  margin-left: 10px;
}
.imageUpload .description input {
  padding: 10px;
  width: 90%;
  border: 1px solid #c1c1c1;
  border-radius: 10px;
}
.toolbarEditor {
  padding: 5px 10px;
  line-height: 12px;
}
.toolbarEditor a.toolbarEntry {
  float: left;
  width: 50px;
  height: 50px;
  display: block;
  text-align: center;
  margin-right: 5px;
}
.toolbarEditor a.toolbarEntry img {
  width: 25px;
  margin-top: 13px;
}
.toolbarEditor a.toolbarEntry:last-child {
  border: none;
}
.toolbarEditor a.toolbarEntry:hover {
  background: #ffda69;
}
.toolbarEditor a.toolbarEntry.active {
  border-bottom: 4px solid #3ca2fe;
}
.toolbarEditor a.toolbarEntry.disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.tickerCompose .masked {
  border-bottom: none;
  padding-bottom: 20px;
}
.statusIconSelected {
  position: absolute;
  margin-top: -52px;
  right: 15px;
}
.statusIconSelected .statusIcon {
  border-radius: 50%;
  height: 50px;
  width: 50px;
  text-align: center;
}
.statusIconSelected .statusIcon:hover {
  background: #ffd237;
}
.statusIconSelected .statusIcon img {
  width: 40px;
  margin-top: 5px;
}
.statusIconSelected .statusName {
  position: absolute;
  margin-left: -85px;
  margin-top: -20px;
  background: #ffa225;
  padding: 5px;
  border-radius: 7px;
  color: #ffffff;
  font-weight: 500;
  width: 80px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#tickerComposeStartpage.unmask .statusIconSelected .statusIcon {
  background: #ffffff;
  border: 1px solid #ffa225;
}
#tickerComposeStartpage.mask .statusName {
  display: none;
}
#tickerComposeStartpage.unmask .statusIconSelected {
  margin-top: 5px;
}
/* Startseite User */
.homepage {
  width: 100%;
}
.homepage .discoverStream {
  width: 100%;
}
.homepage .aboStream {
  width: 100%;
  display: none;
}
.homepage .attend {
  width: 100%;
}
.homepage.showAbosEntries .aboStream {
  display: block;
}
.homepage.showAbosEntries .discoverStream {
  display: none;
}
.homepage .adslot {
  margin-bottom: 10px;
  padding: 0;
  text-align: center;
}
.homepage .discoverStream .adslot {
  display: block;
}
.homepage.showAbosEntries .discoverStream .adslot {
  display: none;
}
.homepage .aboStream .adslot {
  display: none;
}
.homepage.showAbosEntries .aboStream .adslot {
  display: block;
}
.postSite {
  display: none;
}
/* Adslot Profile Startpage */
.profileStartpage .stream .adslot {
  text-align: center;
  margin-bottom: 10px;
}
.profileStartpage .stream .adslot.mobile {
  display: block;
}
.profileStartpage .stream .adslot.desktop {
  display: none;
}
.homepage .top {
  padding-top: 3%;
}
.streamFilter {
  width: 100%;
  height: 75px;
  margin-bottom: 5px;
  overflow: scroll;
}
.streamFilter .wrapper {
  width: 800px;
}
.streamFilter a.entry {
  display: block;
  float: left;
  width: 70px;
  text-align: center;
  background: #e5e5e5;
  padding: 5px 5px;
  padding-top: 10px;
}
.streamFilter a.entry.active {
  border-bottom: 4px solid #3ca2fe;
}
.streamFilter a.entry .icon {
  padding: 5px;
}
.streamFilter a.entry .icon img {
  width: 30px;
}
.streamFilter a.entry .text {
  text-align: center;
  font-weight: 300;
  font-size: 70%;
  letter-spacing: 0;
  color: #929292;
  padding-bottom: 5px;
  padding-top: 3px;
}
.streamFilter a:hover.entry {
  background: #FDD978;
}
.homepage.showAbosEntries a.discover.active {
  border-color: #e5e5e5;
}
.homepage.showAbosEntries a.aboLink.active {
  border-color: #3ca2fe;
}
.headlineDiscover {
  padding: 0 15px 10px 15px;
}
.headlineDiscover .icon {
  float: left;
}
.headlineDiscover .icon img {
  width: 30px;
}
.headlineDiscover .text {
  float: left;
  font-size: 130%;
  padding: 7px 15px;
  font-weight: 200;
}
/* #stream */
.stream {
  width: 360px;
  overflow: hidden;
}
.stream.detail {
  background: #ffffff;
}
.stream .entry {
  width: 100%;
  max-width: 360px;
  margin-bottom: 10px;
  background: #ffffff;
  border-bottom: 1px solid #dcdcdc;
  border-top: 1px solid #cccccc;
}
.stream a.entry {
  display: block;
}
.stream.detail .actionSelector .button:first-child {
  margin-left: 0;
}
.stream.detail .entry {
  border-bottom: none;
}
.stream .entry.entryGift {
  width: 100%;
  min-height: 350px;
}
.stream .entry.entryGift .name {
  padding: 10px;
  font-weight: 500;
  max-height: 17px;
}
.stream .gift .text {
  padding: 10px;
}
.stream .firstPage {
  display: none;
}
.stream .entry.setReadRecently {
  box-shadow: 0 2px 2px #9BE4FF;
}
.stream .timestamp {
  color: #a4a4a4;
  font-size: 85%;
}
.stream .timestamp em {
  margin-right: 5px;
}
.stream .entry:hover .name {
  display: block;
}
.stream .head .profileImage {
  float: left;
  width: 65px;
  padding-top: 10px;
  padding-bottom: 2px;
}
.stream .head .profileImage img {
  border-radius: 50%;
  width: 40px;
  margin-left: 15px;
}
.stream .head .basics {
  float: left;
  padding-top: 15px;
}
.stream .head .basics .stamp {
  font-size: 110%;
  font-weight: 500;
  padding-bottom: 5px;
}
.stream .head .status {
  float: right;
  padding: 5px;
  margin-right: 5px;
  padding-bottom: 2px;
}
.stream .head .status a {
  display: block;
  border-radius: 50%;
  padding: 5px;
}
.stream .head .status a:hover {
  background: #ffda69;
}
.stream .head .status img {
  width: 35px;
  margin: 2px;
}
.stream .emotion {
  text-align: left;
  background: #3ca2fe;
  min-height: 128px;
}
.stream .emotion img {
  width: 180px;
}
.stream .emotion .name {
  position: absolute;
  padding: 10px;
  margin-top: -80px;
  color: #ffffff;
  font-weight: 400;
  margin-left: 190px;
  font-size: 120%;
  z-index: 2;
}
.stream .emotion .playEmotion img {
  width: 40px;
  height: 40px;
  position: absolute;
  margin-top: -80px;
  margin-left: 72px;
  border-radius: 50%;
  opacity: 0.8;
}
.playEmotionLayer {
  text-align: center;
  width: 100%;
}
.stream .actionsStream .button {
  padding: 5px 10px;
  font-size: 90%;
}
.closeIconLayer {
  position: absolute;
  right: 20px;
  top: -50px;
  width: 30px;
}
.stream .nvG .spacer,
.stream .nvG .buttonDefault:first-child {
  margin-left: 60px;
}
.stream .changed {
  font-style: italic;
  padding: 10px 15px;
  color: #afafaf;
}
.stream .defaultText {
  padding: 0 15px 5px 15px;
  font-size: 100%;
  line-height: 18px;
}
.stream .defaultText .headline {
  font-size: 120%;
  font-weight: 300;
  margin-top: 10px;
}
.stream .subtext.important {
  padding: 10px;
  font-size: 100%;
  font-weight: 600;
  text-align: center;
}
.stream .galleryImageEntry {
  height: auto;
  min-height: 220px;
  overflow: hidden;
}
.stream .galleryImageEntry img {
  width: 100%;
}
.stream .galleryImageEntry .multi a {
  display: block;
  width: 50%;
  float: left;
  height: 110px;
}
.stream .galleryImageEntry .foot {
  position: absolute;
  margin-top: -65px;
  width: 340px;
}
.stream .galleryImageEntry .foot a.removeButton {
  background: #ffffff;
}
.stream .galleryImageEntry a.title,
.stream .galleryImageEntry .title {
  padding: 8px 15px;
  background: #61b2fa;
  color: #ffffff;
  border-radius: 5px;
  font-size: 120%;
  opacity: 0.8;
  z-index: 2;
  float: left;
}
.stream .showMoreEntries a {
  color: #ffffff;
  background: #ffa225;
  display: block;
  border-radius: 3px;
  cursor: pointer;
  padding: 12px 3px;
  margin-bottom: 20px;
  font-size: 110%;
  text-align: center;
  min-height: 20px;
  line-height: 20px;
}
.stream .foot {
  padding-bottom: 10px;
  padding-left: 15px;
  padding-top: 5px;
}
.stream .foot .button {
  float: left;
  padding: 10px 20px;
  color: #ffffff;
  border: 1px solid #339eff;
  border-radius: 25px;
  background: #3ca2fe;
  font-weight: 600;
}
.stream .foot .button.small {
  padding: 8px 10px;
  color: #333333;
  background: #f1f1f1;
  border: 1px solid #d3d3d3;
  font-size: 100%;
}
.stream .foot .button:hover {
  background: #FDD978;
  color: #333333;
}
.stream .foot .removeButton {
  float: right;
  cursor: pointer;
  width: 20px;
  height: 20px;
  padding: 4px;
  border-radius: 50%;
  opacity: 0.2;
  margin-right: 10px;
  margin-top: 5px;
}
.stream .foot .removeButton:hover {
  opacity: 1;
  background: #ffda69;
}
.stream .entry:hover .tickerFoot {
  visibility: visible;
}
.stream .tickerFoot a.button,
.stream .tickerFoot div {
  float: left;
  display: block;
  float: right;
  cursor: pointer;
  width: 20px;
  height: 20px;
  padding: 5px;
  border-radius: 3px;
  opacity: 0.2;
  margin-right: 5px;
}
.stream .tickerFoot a.button img {
  width: 20px;
  height: 20px;
}
.stream .tickerFoot a:hover.button,
.stream .tickerFoot div:hover {
  background: #ffda69;
}
.tickerFoot {
  padding-bottom: 5px;
  padding-right: 15px;
  text-align: right;
}
.tickerFoot a {
  display: block;
  float: right;
}
.tickerFoot:hover div,
.tickerFoot:hover a.button {
  opacity: 1;
}
.tickerFoot a.commentCounter {
  display: block;
  float: left;
  font-weight: 500;
  color: #c5c5c5;
  font-size: 100%;
  padding-top: 8px;
  margin-left: 20px;
}
.tickerFoot a:hover.commentCounter {
  color: #ea5800;
}
.stream .profileImageEntry {
  overflow: hidden;
}
.stream .profileImageEntry img {
  width: 100%;
}
.stream .profileImageEntry .foot {
  position: absolute;
  margin-top: -45px;
  width: 340px;
}
.stream .profileImageEntry .foot a.removeButton {
  background: #ffffff;
}
.stream .profileImageEntry .title {
  padding: 8px 15px;
  background: #333333;
  color: #ffffff;
  border-radius: 5px;
  font-size: 120%;
  opacity: 0.8;
  z-index: 2;
  float: left;
}
.stream .addEntry {
  width: 220px;
  float: left;
  height: 210px;
  border: 1px solid #e5e5e5;
}
.stream .addEntry a {
  border-radius: 50%;
  height: 150px;
  width: 150px;
  margin-left: 30px;
  margin-top: 30px;
  display: block;
  background: #e96116;
  text-align: center;
}
.stream .addEntry a img {
  width: 60%;
  margin-top: 40px;
}
.stream .addEntry a:hover {
  background: #ff9613;
}
.stream .ticker {
  padding: 0 15px 0 15px;
  font-size: 110%;
  line-height: 18px;
}
.stream .ticker img {
  vertical-align: text-bottom;
  margin-top: 3px;
}
.stream .ticker .tickerFull {
  display: block;
}
.stream .ticker .tickerTruncated {
  display: none;
}
.stream .ticker .text {
  padding-bottom: 10px;
  width: 100%;
  word-wrap: break-word;
}
.stream.discover .ticker .text {
  overflow: hidden;
}
.stream .ticker.truncated .tickerFull {
  display: none !important;
}
.stream .ticker.truncated .tickerTruncated {
  display: block !important;
}
.stream .comments {
  width: 100%;
}
.stream .comments .commentEntry {
  clear: both;
  padding-bottom: 6px;
  padding-top: 5px;
}
.stream .comments .commentEntry:last-child {
  border: none;
}
.stream .comments .headline .options {
  float: left;
  color: #999999;
}
.stream .comments .picture {
  float: left;
  width: 75px;
  padding-top: 5px;
  text-align: right;
}
.stream .comments .picture img {
  width: 35px;
  margin-right: 18px;
  min-height: 35px;
  border-radius: 50%;
}
.stream .comments .plain {
  float: left;
  width: 260px;
}
.stream .comments .plain .text {
  color: #000000;
  padding-right: 5px;
  padding-top: 5px;
  line-height: 140%;
  font-size: 100%;
  width: 220px;
}
.stream .comments .plain img {
  vertical-align: text-bottom;
}
.stream .comments .plain .headline {
  padding-bottom: 0px;
  font-size: 11px;
  padding-top: 5px;
}
.stream .comments .plain .headline em {
  margin-left: 4px;
}
.stream .suggestComment {
  width: 240px;
  padding: 5px 10px;
  border-radius: 3px;
  padding-top: 8px;
  line-height: 130%;
  height: 18px;
  border: 1px solid #DCDCDC;
  color: #888888;
  font-size: 100%;
}
.stream .suggestComment:hover {
  border: 1px solid #3ca2fe;
  cursor: text;
}
.stream .atUser {
  font-size: 120%;
  padding: 0 5px;
  color: #3CA2FE;
  font-weight: 900;
  cursor: pointer;
}
.stream .atUser:hover {
  color: #ea5800;
}
.stream .commentBox {
  width: 100%;
  padding-top: 7px;
  padding-bottom: 0;
}
.stream .commentBox .profileImage {
  float: left;
  width: 75px;
  text-align: right;
}
.stream .commentBox .profileImage img {
  width: 35px;
  margin-right: 18px;
  min-height: 35px;
  border-radius: 50%;
}
.stream .commentBox .plain {
  float: left;
}
.stream .commentBox .inputComment {
  width: 240px;
  padding: 5px 10px;
  border-radius: 3px;
  padding-top: 8px;
  line-height: 140%;
  min-height: 52px;
  border: 1px solid #c8c8c8;
  font-size: 100%;
}
.stream .commentBox .inputComment.small {
  min-height: 20px;
}
.stream .commentBox .emojiSelector {
  width: 275px;
}
.stream .commentBox .inputComment:focus {
  color: #000000;
  border: 1px solid #b6b6b6;
  background: #ffffff;
}
.stream .commentBox .buttonSend:hover {
  border: 1px solid #000000;
  color: #000000;
}
.stream .commentBox .features {
  position: absolute;
  z-index: 2;
  width: 150px;
  padding-top: 3px;
  height: 25px;
  display: none;
}
.stream .commentBox .editor {
  border: none;
  background: transparent;
}
.stream .commentBox .editor .smilies .entry {
  border-bottom: none;
}
.stream .commentBox .editor .smilies .entries {
  border: none;
}
.stream .commentBox .resizeFrame {
  background: none;
}
.stream .actionSelector {
  padding: 0;
  padding-top: 5px;
}
.stream .commentOptions {
  position: absolute;
  margin-top: -35px;
  width: 70px;
  right: 20px;
}
.stream .commentOptions a {
  width: 16px;
  height: 16px;
  padding: 6px;
  margin-left: 3px;
  border-radius: 50%;
  background: #efefef;
  float: right;
}
.stream .commentOptions a:hover {
  background: #ffda69;
}
.stream .orphan {
  width: 233px;
  height: 288px;
  background: #33b5e5;
  border: 1px solid #28aada;
  text-align: center;
}
.stream .orphan a {
  display: block;
  padding: 70px 10px;
  color: #ffffff;
}
.stream .orphan .headline {
  padding: 15px;
  font-size: 140%;
  font-weight: 200;
}
.stream .orphan.green {
  background: #97c224;
  border-color: #89b020;
}
.stream .editor .smilies {
  width: 270px;
}
.stream .editor .smilies .entries {
  width: 245px;
}
.stream .emoji {
  margin: 0px;
}
.stream .entryHeader {
  padding: 10px;
  text-align: center;
  font-size: 110%;
}
.stream .entryHeader img {
  width: 50px;
  background: #ffffff;
  padding: 5px;
  border: 4px solid #d9d9d9;
  border-radius: 50%;
}
.stream .entryHeader em {
  margin-left: 5px;
  color: #919191;
}
/* Metarecord */
a.metaRecord {
  color: #333333;
}
a.metaRecord .domain,
.metaRecordCompact .domain {
  text-transform: uppercase;
  margin: 10px 15px;
  font-size: 90%;
  color: #b3b3b3;
}
a.metaRecord .metaBox,
.metaRecordCompact .metaBox {
  border-left: #ffa225 solid 3px;
  max-width: 360px;
}
a.metaRecord .metaTitle,
.metaRecordCompact .metaTitle {
  margin: 10px 15px 0px 15px;
  font-weight: 800;
  font-size: 100%;
  line-height: 130%;
  color: #333333;
}
a.metaRecord .metaText {
  margin: 10px 15px;
  line-height: 130%;
  font-weight: 300;
}
/*Tickerdetailansicht */
.tickerDetails .left {
  float: left;
  width: 360px;
}
.tickerDetails .right {
  float: left;
  width: 360px;
  margin-left: 40px;
}
/* Streamüberarbeitung #stream*/
a.streamVideoPreview,
a.streamMusicPreview {
  display: block;
  width: 100%;
  overflow: hidden;
  margin: auto;
  position: relative;
}
a.streamVideoPreview img {
  width: 100%;
  height: auto;
}
a.streamVideoPreview .playButton,
a.streamMusicPreview .playButton {
  position: relative;
  background: url(//s.jappy.com/i/icon/stream/videoStart.png) no-repeat 50% 50%;
  z-index: 2;
  height: 50px;
  top: -200px;
  opacity: 0.8;
  width: 100%;
}
a:hover.streamVideoPreview .playButton,
a:hover.streamMusicPreview .playButton {
  background: url(//s.jappy.com/i/icon/stream/videoStartHover.png) no-repeat 50% 50%;
  opacity: 1;
}
a.streamVideoPreview,
a.streamMusicPreview img {
  width: 100%;
}
a.streamGifPreview {
  display: block;
  width: 100%;
  max-height: 250px;
  min-height: 200px;
  overflow: hidden;
}
a.streamGifPreview .playButton {
  position: relative;
  background: url(//s.jappy.com/i/icon/stream/gifStart.png) no-repeat;
  z-index: 2;
  height: 50px;
  margin-left: 150px;
  margin-top: -178px;
  opacity: 0.8;
  width: 70px;
}
a:hover.streamGifPreview .playButton {
  background: url(//s.jappy.com/i/icon/stream/gifStartHover.png);
  opacity: 1;
}
a.streamGifPreview.animated .playButton {
  display: none;
}
a.streamGifPreview .loading {
  display: none;
  position: relative;
  background: url(//s.jappy.com/i/icon/loadingTop.gif) no-repeat 20px 10px #bcbcbc;
  z-index: 2;
  height: 50px;
  margin-left: 150px;
  margin-top: -178px;
  opacity: 0.8;
  width: 70px;
}
a.streamGifPreview.loading .loading {
  display: block;
  border-radius: 5px;
}
a.streamGifPreview img {
  width: 100%;
  max-height: 250px;
  min-height: 200px;
}
.videoPlayButton {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
img.videoPlayButton {
  width: 70px !important;
  border: 1px solid #333333;
  border-radius: 10px;
  background: #333333;
}
img:hover.videoPlayButton {
  border: 1px solid #e5e5e5;
  border-radius: 10px;
}
/* Kommentierung in der Ticker Detailansicht */
.addCommentLine {
  width: 480px;
  padding-bottom: 5px;
  padding-top: 5px;
}
.addCommentLine .inputComment {
  width: 450px;
  padding: 5px 10px;
  line-height: 130%;
  min-height: 52px;
  border: 1px solid #c8c8c8;
  color: #555555;
  border-radius: 3px;
}
.addCommentLine .inputComment:focus {
  color: #000000;
  border: 1px solid #3373b0;
  background: #ffffff;
}
.addCommentLine .editor {
  border: none;
}
.addCommentLine .editor .smilies .entry {
  border-bottom: none;
}
.addCommentLine .resizeFrame {
  background: none;
}
.addCommentLine .features {
  position: absolute;
  z-index: 2;
  width: 150px;
  padding-top: 3px;
  height: 25px;
  display: none;
}
.addCommentLine .editor {
  border: none;
  background: #e5e5e5;
}
.addCommentLine .editor .smilies .entry {
  border-bottom: none;
}
.addCommentLine .editor .smilies .entries {
  border: none;
}
.addCommentLine .actionSelector .button {
  float: right;
}
/*Attachments - pictures */
.shareImageLayer {
  background: #b0dbff;
  border: 1px solid #90c4f1;
  box-shadow: 1px 1px 2px #c6c6c6;
}
.shareImageLayer a.entry {
  display: block;
  color: #333333;
  cursor: pointer;
  border-bottom: 1px solid #a4d5ff;
  padding: 12px 11px;
}
.shareImageLayer a:hover.entry {
  color: #000000;
  background: #c2ebff;
  border-bottom: 1px solid #99d7ff;
}
.attachedUserLink:hover {
  background: #f1f1f1;
}
.attachedUserLink .linkIcon {
  float: left;
  width: 20px;
  text-align: left;
}
.attachedUserLink .linkIcon img {
  vertical-align: text-bottom;
  margin: 0;
}
.attachedUserLink .linkPicture {
  float: left;
  width: 45px;
  padding-top: 3px;
  padding-bottom: 2px;
}
.attachedUserLink .linkPicture img {
  width: 35px;
  min-height: 35px;
}
.attachedUserLink .linkNick {
  float: left;
  width: 250px;
  padding-top: 5px;
  padding-bottom: 2px;
}
.attachedUserLink .linkOption {
  float: left;
  width: 30px;
}
/* Links */
.attachmentLinkEntry {
  font-size: 14px;
  line-height: 130%;
  min-height: 30px;
  padding-bottom: 1px;
  padding-top: 2px;
  width: 100%;
}
.attachmentLinkEntry img {
  vertical-align: text-bottom;
  margin-right: 3px;
}
.attachmentLinkEntry .link {
  float: left;
  padding-top: 3px;
  max-width: 350px;
  text-indent: 15px;
}
.attachmentLinkEntry .link img {
  margin: 0 !important;
}
.attachmentLinkEntry .options {
  float: right;
  margin-left: 5px;
  margin-right: 10px;
  max-height: 30px;
}
.attachmentLinkEntry .options a:hover {
  background: #ff9613;
  color: #000000;
  opacity: 1;
}
.attachmentLinkEntry .numberOfShares {
  margin-top: 3px;
  color: #747474;
  background: #e5e5e5;
  padding: 2px;
  border-radius: 3px;
  margin-left: 10px;
  float: left;
  font-size: 11px;
  position: relative;
  margin-top: -3px;
}
.attachmentLinkEntry a.tickerStatusButton {
  float: right;
  display: block;
  width: 16px;
  height: 16px;
  padding: 5px;
  border-radius: 50%;
}
.attachmentLinkEntry a:hover.tickerStatusButton {
  background: #ffda69;
}
.tickerCompose .stream .links {
  background: #d9d9d9;
  padding-top: 10px;
}
.tickerCompose .stream .links .option {
  position: absolute;
  margin-left: 328px;
  margin-top: -25px;
}
.tickerCompose .stream .entry {
  border: none;
}
/* Bild Ticker */
.imageAttachedDefault {
  text-align: center;
}
.imageAttachedDefault img {
  height: 200px;
  width: 100%;
  max-width: 330px;
  margin: auto;
}
.videoSubbar {
  width: 100%;
  padding-bottom: 5px;
}
.videoSubbar a.tickerStatusButton {
  float: right;
  display: block;
  width: 16px;
  height: 16px;
  padding: 5px;
  border-radius: 50%;
}
.videoSubbar a.button {
  float: right;
  background: #ffffff;
  border-radius: 3px;
  padding: 5px;
  color: #333333;
}
.videoSubbar a:hover.tickerStatusButton {
  background: #ffda69;
}
.videoSubbar .typeInfo {
  font-size: 110%;
  font-weight: 500;
  color: #616161;
  padding: 10px 0;
  float: left;
  margin-left: 15px;
}
.videoSubbar .numberOfShares {
  margin-top: 3px;
  color: #747474;
  background: #e5e5e5;
  padding: 2px;
  border-radius: 3px;
  margin-left: 10px;
  float: left;
  font-size: 11px;
  position: relative;
  margin-top: -3px;
}
.videoSubbar:hover a.tickerStatusButton {
  display: block;
}
.stream .headlineBlog {
  font-size: 120%;
  font-weight: 500;
  display: block;
  line-height: 120%;
  padding-top: 12px;
  padding-bottom: 5px;
}
.stream .textBlog {
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 110%;
  font-weight: 400;
}
/* #echo */
.echoActionbar {
  padding-top: 5px;
  margin-right: 23px;
  padding-bottom: 3px;
}
.echoActionbar .setEcho {
  float: right;
  margin-left: 5px;
  color: #ffffff;
  background: #3ca2fe;
  border-radius: 3px;
  cursor: pointer;
  padding: 6px 0;
  width: 100px;
  font-size: 110%;
  text-align: center;
  min-height: 25px;
  line-height: 25px;
}
.echoActionbar .setEcho:hover {
  background: #e5e5e5;
}
.echoActionbar .setEcho.set {
  background: #ffffff;
  border: 1px solid #e1e1e1;
  opacity: 0.5;
  width: 55px;
}
.echoActionbar .setEcho.suggested {
  background: #ffffff;
  border: 1px solid #e2e2e2;
  opacity: 1;
  margin-left: 5px;
  padding: 5px 0;
  width: 55px;
}
.echoActionbar .setEcho img {
  margin-left: 16px;
  margin-top: 3px;
}
.echoActionbar .setEcho.set:hover {
  background: #e1e1e1;
}
.echoActionbar .setEcho.suggested:hover {
  background: #e1e1e1;
}
.listOfEchos {
  margin-left: 15px;
  padding-top: 5px;
  margin-right: 15px;
  float: left;
}
.stream .listOfEchos:hover {
  cursor: pointer;
  background: #ffedb0;
}
.listOfEchos .echo {
  float: left;
  padding: 7px 8px;
}
.listOfEchos .echo.add:hover {
  background: #ffedb0;
  border-radius: 10px;
  cursor: pointer;
}
.listOfEchos .echo.super img {
  animation: twistSuper 2.5s infinite;
}
.listOfEchos .echo span {
  color: #939393;
  margin-left: 5px;
  font-size: 80%;
}
.listOfEchos .echo.own {
  background: #f1f1f1;
  border-radius: 10px;
  padding-left: 12px;
  padding-right: 12px;
  margin-right: 10px;
}
.listOfEchos .echo.own img {
  width: 20px;
}
.listOfEchos .echo.suggest {
  border: 1px solid #f0f0f0;
  margin-right: 5px;
  border-radius: 10px;
}
.listOfEchos .echo.suggest span {
  color: #7d7d7d;
}
.listOfEchos .echo.suggest img {
  filter: grayscale(100%) contrast(10%);
  opacity: 0.8;
}
.listOfEchos .echo.suggest:hover {
  background: #ffedb0;
  border: 1px solid #ffedb0;
}
.listOfEchos .echo.suggest:hover img {
  filter: grayscale(0%) contrast(100%);
  opacity: 1;
}
.listOfEchos .echo.addEcho {
  background: #ffd237;
  border-radius: 10px;
  padding-left: 12px;
  padding-right: 12px;
  margin-right: 10px;
}
.listOfEchos .echo.addEcho:hover {
  background: #ffa225;
  animation: hoverAddEcho 1.5s forwards;
}
.listOfEchos .echo.addEcho img {
  width: 20px;
}
.listOfEchos .more {
  float: left;
  margin: 5px 2px;
  margin-left: 5px;
  padding: 3px;
  border-radius: 50%;
}
.listOfEchos .more span {
  color: #b5b5b5;
  position: relative;
  margin-left: 4px;
  font-size: 80%;
}
.echoInfos .numberOfComments {
  float: right;
  padding: 7px 8px;
  margin-right: 0px;
  padding-top: 13px;
}
.echoInfos .numberOfComments img {
  width: 20px;
}
.echoInfos .numberOfComments span {
  color: #939393;
  margin-left: 5px;
  font-size: 80%;
  position: relative;
  top: -4px;
}
.echoSelection {
  width: 360px;
  padding: 15px 0;
  min-height: 500px;
}
.echoSelection .echoPointer {
  margin-left: 285px;
}
.echoSelectionMobile .echoPointer {
  margin-left: 250px;
}
.echoSelection .echoList {
  animation: growEchoBox 0.4s;
}
.echoSelection .echoList {
  width: auto;
  background: #ffffff;
  border-radius: 15px;
  border: 10px solid #ffd237;
}
.echoSelection .echoList .entry {
  float: left;
  width: 55px;
  height: 50px;
  margin: 6px;
  padding: 0px;
  border-radius: 15px;
}
.echoSelection .echoList .entry:hover {
  cursor: pointer;
  background: #fdd978;
  font-weight: 500 !important;
}
.echoSelection .echoList .echoIcon {
  width: 80%;
  padding: 10%;
  padding-bottom: 5%;
  text-align: center;
}
.echoSelection .echoList .echoIcon img {
  width: 70%;
}
.echoSelection .echoList .entry.disable img {
  filter: grayscale(100%);
  opacity: 0.3;
}
.echoSelection .echoList .echoTitle {
  width: 100%;
  text-align: center;
  font-size: 80%;
  font-weight: 500;
}
.echoSelection .echoList .entry a {
  color: #038494;
}
.echoSelection .echoList .entry.disable a {
  color: #cccccc;
}
.echoLayerBackground {
  position: fixed;
  top: 0;
  left: 0;
  background: #8b8b8b;
  width: 100%;
  opacity: 0.3;
  -moz-opacity: 0.3;
  -khtml-opacity: 0.3;
}
.echoHeadline {
  font-weight: bold;
  padding: 10px;
}
.echoListEntryList {
  width: 100%;
  height: 200px;
  overflow-y: scroll;
  overflow-x: hidden;
}
.echoListEntryList .echoText {
  float: left;
  padding: 10px 0;
  text-indent: 10px;
}
.echoListEntryList .echoTimestamp {
  float: left;
  width: 100px;
  text-indent: 10px;
  font-size: 90%;
  font-weight: 300;
  padding: 10px 0;
}
.echoListEntryList .echoText .echoName {
  font-weight: 600;
}
.echoListEntryList .echoIcon {
  float: left;
}
.echoListEntryList .echoIcon img {
  width: 25px;
  vertical-align: text-bottom;
}
/* Stream - Attachments - pictures */
.attachedPictures {
  text-align: center;
  margin: 0 15px;
}
.attachedPictures a.attachedPicture,
.attachedPictures .attachedPicture {
  display: block;
  color: #9e9e9e;
  width: 160px;
  height: 200px;
  margin: 0 5px 5px 0;
  box-shadow: 1px 1px 2px #9c9c9c;
  background: #ffffff;
  border: 1px solid #bbbbbb;
  cursor: pointer;
  overflow: hidden;
  float: left;
}
.attachedPictures .attachedPicture img {
  height: auto;
  margin: 0;
  width: 160px;
}
.attachedPictures a.shareImage {
  display: none;
  width: 100%;
  position: relative;
  z-index: 2;
  float: left;
}
.attachedPictures a.shareImage div {
  background: #000000;
  color: #ffffff;
  opacity: 0.7;
  padding: 5px;
  width: 60px;
  text-align: center;
  margin-top: -43px;
  margin-left: 10px;
  border-radius: 5px;
  margin-bottom: 20px;
}
.attachedPictures a.shareImage:hover div {
  opacity: 1.0;
  background: #ff9613;
}
.attachedPictures .attachedPicture.highlight {
  border: 1px solid #3b89cb;
}
.attachedPictures.large a.attachedPicture {
  display: block;
  color: #9e9e9e;
  width: 480px;
  height: 520px;
  margin: 0 5px 5px 0;
  box-shadow: 1px 1px 2px #9c9c9c;
  background: #ffffff;
  border: 1px solid #bbbbbb;
  cursor: pointer;
  overflow: hidden;
  float: left;
}
.attachedPictures.large .attachedPicture img {
  height: auto;
  margin: 0;
  width: 480px;
}
.attachedPictures a.attachedPictureDynamic {
  display: block;
  padding: 0;
  max-height: 250px;
  overflow: hidden;
}
.attachedPictures a.attachedPictureDynamic img {
  margin: 0;
  max-width: 360px;
}
.attachedPictures a.attachedImage {
  display: block;
  padding: 0;
  max-height: 250px;
  width: 100%;
}
.attachedPictures .info {
  padding: 12px 15px 5px 15px;
  text-align: left;
  font-style: italic;
  background: #ffffff;
  color: #acacac;
}
.attachedPictures .info.commented {
  color: #333333;
}
.attachedPictures .info.large {
  padding-bottom: 15px;
  font-size: 120%;
}
.attachedPictures a:hover {
  color: #555555;
}
.attachedPictures .additionalText {
  float: left;
  display: block;
  margin-top: 25px;
  margin-left: 1px;
  font-weight: bold;
  text-align: center;
  background: #bcbcbc;
  color: #000000;
  padding: 2px;
  border-radius: 3px;
}
.attachedPictures .attachedPicture:hover {
  border: 1px solid #5da7e0;
  box-shadow: 1px 1px 2px #5da7e0;
}
.markAsRead {
  overflow: hidden;
  background: #ffa225;
  padding: 15px;
  text-align: center;
  color: #ffffff;
  font-weight: 600;
}
.fixedAvailable .markAsRead {
  animation: fadeOut 2.0s 2.0s;
  animation-fill-mode: forwards;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  height: 20px;
  z-index: 1000001;
}
/* Rangbereich */
.rankProfileImage {
  position: absolute;
  z-index: 3;
  margin-top: 20px;
}
.rankProfileImage img {
  width: 200px;
  max-height: 200px;
  border-radius: 100px;
  margin-left: 250px;
  box-shadow: inset 0 0 10px #000;
}
.rankCount {
  position: absolute;
  z-index: 5;
  margin-top: 150px;
  margin-left: 280px;
  font-size: 300%;
  color: #ff9933;
  text-shadow: 0 0 2px #000;
}
.rankInfoLink {
  position: absolute;
  z-index: 5;
  margin-top: 200px;
  margin-left: 480px;
}
.rankInfoLink a {
  display: block;
  float: left;
  padding: 10px 15px;
  color: #ffffff;
  background: #ff9933;
  border-radius: 10px;
}
.rankInfoLink a:hover {
  background: #ff7f00;
}
.rankHeadline {
  color: #e77300;
  font-size: 160%;
  margin-top: 15px;
  padding: 10px 10px;
  text-indent: 15px;
  border-bottom: 2px solid #ff9933;
}
.rankHeadline .wrapper img {
  vertical-align: text-bottom;
}
.boxRankInfo {
  line-height: 160%;
  background: #ffffff;
  border-radius: 10px;
}
.boxRankInfo .headline {
  font-size: 120%;
  font-weight: 600;
  padding: 10px;
  padding-top: 10px;
  text-align: center;
}
.boxRankInfo .icon {
  float: left;
  padding: 10px;
  width: 60px;
  text-align: center;
}
.boxRankInfo .name {
  float: left;
  padding: 10px;
  padding-top: 20px;
  font-size: 140%;
  font-weight: 400;
  max-width: 150px;
}
.boxRankInfo .info {
  font-size: 70%;
  color: #666666;
  margin-top: 3px;
  font-weight: 300;
}
.boxRankInfo .info a {
  color: #666666;
  text-decoration: underline;
}
.textBoxRank {
  background: #ffffff;
  border-radius: 10px;
}
.textBoxRank .wrapper {
  padding: 20px;
  line-height: 140%;
}
.textBoxRank .headline {
  font-weight: 600;
  font-size: 120%;
  margin-bottom: 10px;
}
.progressBarRank {
  background: #ffffff;
  border-radius: 10px;
}
.progressBarRank .wrapper {
  padding: 20px;
}
.progressBarRank .headline {
  padding: 10px 0;
  font-size: 120%;
  font-weight: 900;
}
.progressBarRank .progressBackground {
  width: 100%;
  background: #c5c5c5;
  height: 30px;
  border-radius: 15px;
}
/* linear-gradient(#b3ce5d, #c9e967) */
.progressBarRank .progress {
  height: 28px;
  background: #c9e967;
  background: linear-gradient(90deg, #c3ff68 0%, #d8ff7a 100%);
  border: 1px solid #9be226;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
}
.progressBarRank .moreInfos {
  padding: 10px 0;
}
.progressBarRank .rankInPercent {
  position: absolute;
  color: #333333;
  font-weight: 900;
  margin-top: -20px;
  margin-left: 20px;
}
.infosRankSection .floatingBox {
  float: left;
  width: 360px;
  margin: 10px 20px 10px 0;
}
.infosRank {
  width: 100%;
  padding-top: 20px;
  border: 2px solid #ffcd21;
  padding-bottom: 20px;
  background: #ffd237;
  margin-bottom: 10px;
  border-radius: 20px;
}
.infosRank a {
  color: #e36100;
  font-weight: 600;
}
.infosRank a:hover {
  color: #333333;
}
.xpProgressInfo {
  text-align: right;
  padding: 10px;
  font-size: 100%;
}
.xpProgressInfo img {
  vertical-align: text-bottom;
}
.infoAccount {
  padding-bottom: 5px;
  text-indent: 20px;
}
.infoAccount .icon {
  float: left;
  width: 50px;
  text-align: center;
  margin-left: 10px;
}
.infoAccount .value {
  float: left;
  width: 110px;
  padding-top: 10px;
  font-weight: 900;
  font-size: 110%;
}
.infoAccount .text {
  float: left;
  padding-top: 10px;
}
.lineRank {
  padding: 15px;
  margin-right: 20px;
  line-height: 140%;
  font-size: 100%;
}
.lineRank img {
  vertical-align: text-bottom;
}
.profileImageSettingsList .image {
  width: 44%;
  margin: 3%;
  float: left;
  background: #ffffff;
  border-bottom: 4px solid #cacaca;
  box-shadow: 0 2px 2px #cacaca;
  border-radius: 3px;
}
.profileImageSettingsList .image img {
  width: 100%;
}
.profileImageSettingsList .imageOptions .left {
  float: left;
  padding: 7px 10px;
}
.profileImageSettingsList .imageOptions .left img {
  width: 30px;
}
.profileImageSettingsList .imageOptions .right {
  float: right;
  padding: 7px 10px;
}
.profileImageSettingsList .imageOptions .right img {
  width: 30px;
  margin-left: 10px;
}
.profileImageSettingsList .image.default {
  border-bottom: 1px solid #ff9510;
}
.profileImageSettingsList .image.inactive {
  border-bottom: 1px solid #e03b2a;
  opacity: 0.5;
}
.profileImageContainer .imageWrapper {
  padding: 10px 23%;
  background: #333333;
}
.profileImageContainer .left {
  background: #ffffff;
}
.profileImageContainer .right {
  display: none;
}
.profileImageContainer .imageFavorite {
  text-align: center;
  padding: 5px;
  padding-top: 10px;
  background: #333333;
  color: #ffffff;
  font-weight: 500;
  font-size: 110%;
}
.profileImageContainer .imageFavorite img {
  vertical-align: text-bottom;
  width: 20px;
}
.profileImageHidden img {
  border: 2px solid red !important;
  opacity: .5;
}
.profileImageStatusPending {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB98HDg84Bojj8YoAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAtUlEQVRo3u2XMQ7EMAgEYf991T3cV0WyckmgSMFKwwNGlg2LJyPiG0WtFZ9oVGbNepunqQfr8jT5djs8TW+RiieHPn/iyWVY73hySpwrntxi88yTY/bvvFzLdwe0Ftn0l9Dk2219Jaa3SMWTQ58/8eQyrHc8OSXOFU9usXnmyTH7d55cF9jBy0op7ReZ/VcCJ8aJcWKcGCfGiXFinBgnxolxYpwYJ8aJcWKcGCfGiXFinPif9wMFU17SZ0WBPQAAAABJRU5ErkJggg==');
  background-size: cover;
  background-repeat: no-repeat;
  opacity: .5;
}
a.imageHighlight-dropped img {
  border: 2px solid #33b5e5 !important;
}
/* #icons */
.creditsIconSmall,
.xpIconSmall {
  margin-right: 5px;
}
.icIcon {
  background: url(//s.jappy.com/i/icJ2017.png) no-repeat;
  width: 17px !important;
  height: 16px !important;
  padding: 0 !important;
  margin-left: 1px;
  margin-right: 1px;
  vertical-align: text-bottom;
}
.icIcon.noMargin {
  margin: 0;
}
.icSpacer {
  background: url(//s.jappy.com/i/s.gif) no-repeat;
  height: 16px;
  width: 1px;
}
.icJpy {
  background-position: 0 0;
}
.icComment {
  background-position: 0 -100px;
}
.icWiki {
  background-position: 0 -200px;
  padding-left: 20px;
}
.icOk {
  background-position: -50px 0;
}
.icAdd {
  background-position: -50px -50px;
}
.icDelete {
  background-position: -50px -100px;
}
.icReadme {
  background-position: -50px -200px;
}
.icHelp {
  background-position: -50px -250px;
}
.icXp {
  background-position: -50px -300px;
}
.icCredit {
  background-position: -50px -350px;
}
.icMod {
  background-position: -100px 0;
}
.icOfficer {
  background-position: -100px -50px;
}
.icBuddy {
  background-position: -100px -100px;
}
.icBuddyDel {
  background-position: -100px -150px;
}
.icMenuePale {
  background-position: -150px -50px;
}
.icEdit {
  background-position: -150px -150px;
}
.icQuote {
  background-position: -150px -200px;
}
.icStarPale {
  background-position: -150px -350px;
}
.icContentDown {
  background-position: -150px -300px;
}
.icShare {
  background-position: -150px -450px;
}
.icX {
  background-position: -150px -600px;
}
.icPlus {
  background-position: -150px -500px !important;
}
.icLinkTo {
  background-position: -200px 0;
}
.icPoRi {
  background-position: -200px -50px;
}
.icUp {
  background-position: -200px -150px;
  padding: 0 2px 0 13px;
}
.icDown {
  background-position: -200px -200px;
  padding: 0 2px 0 13px;
}
.icGoto {
  background-position: -200px -250px;
}
.icClose {
  background-position: -200px -450px;
}
.icCloseHover {
  background-position: -200px -500px;
}
.icListArrowGrey {
  background-position: -200px -550px;
}
.icListArrow {
  background-position: -200px -600px;
}
.icChatRead {
  background-position: -250px 0;
}
.icChatSent {
  background-position: -250px -100px;
}
.icChatReceived {
  background-position: -250px -50px;
}
.icCheckboxChecked {
  background-position: -300px -400px;
}
.icCheckbox {
  background-position: -300px -450px;
}
.icInteresting {
  background-position: -300px -700px;
}
.icInterestingDisable {
  background-position: -300px -750px;
}
.icUndo {
  background-position: -350px 0;
}
.icFwd {
  background-position: -350px -100px;
}
.icGrowth {
  background-position: -350px -250px;
}
.icShrink {
  background-position: -350px -300px;
}
.icPrivacy {
  background-position: -400px 0px;
}
.icTopicClose,
.icClosed {
  background-position: -400px -250px;
}
.icTopicOpen,
.icOpened {
  background-position: -400px -300px;
}
.icDraft {
  background-position: -450px 0;
}
.icPrint {
  background-position: -450px -50px;
}
.icSave {
  background-position: -450px -100px;
}
.icPic {
  background-position: -450px -150px;
}
.icBold {
  background-position: -450px -200px;
}
.icItalic {
  background-position: -450px -250px;
}
.icUnderline {
  background-position: -450px -300px;
}
.icTxtColor {
  background-position: -450px -350px;
}
.icTxtBg {
  background-position: -450px -400px;
}
.icTxtSize {
  background-position: -450px -450px;
}
.icUrl {
  background-position: -450px -500px;
}
.icTextMore {
  background-position: -450px -550px;
}
.icTextRight {
  background-position: -450px -600px;
}
.icTextCenter {
  background-position: -450px -650px;
}
.icTextList {
  background-position: -450px -700px;
}
.icLink {
  background-position: -450px -750px;
}
.icFld {
  background-position: -500px 0;
}
.icFldAdd {
  background-position: -500px -50px;
}
.icFldDel {
  background-position: -500px -100px;
}
.icFldEdit {
  background-position: -500px -150px;
}
.icStar {
  background-position: -500px -300px;
}
.icSearch,
.icFind {
  background-position: -500px -350px;
}
.icNew {
  background-position: -500px -400px;
}
.icGalPic {
  background-position: -500px -550px;
}
.icGalComment {
  background-position: -500px -600px;
}
.icBirthday {
  background-position: -550px 0;
}
.icGift {
  background-position: -550px -50px;
}
.icEmotion {
  background-position: -550px -100px;
}
.icTicket {
  background-position: -550px -150px;
}
.icTicketPale {
  background-position: -550px -200px;
}
.icLove {
  background-position: -550px -250px;
}
.icImage {
  background-position: -550px -300px;
}
.icForumTopic {
  background-position: -550px -350px;
}
.icEditPale {
  background-position: -600px 0;
}
.icDeletePale {
  background-position: -600px -50px;
}
.icChatPending {
  background: url(//s.jappy.com/i/icV5M2.png) no-repeat;
  width: 17px !important;
  height: 16px !important;
  padding: 0 !important;
  margin-left: 5px;
  margin-right: 5px;
  vertical-align: text-bottom;
  background-position: -150px -150px;
}
/* Toggle */
.swOn {
  background: url(//s.jappy.com/i/icJ2017.png) no-repeat -250px -249px;
  padding: 2px;
  padding-left: 28px;
  font-weight: bold;
  cursor: pointer;
}
.swOff {
  background: url(//s.jappy.com/i/icJ2017.png) no-repeat -250px -299px;
  padding: 2px;
  padding-left: 28px;
  cursor: pointer;
  color: #888888;
}
/* Hintergrundfarben für Mailmarkierungen */
.markBgGreen {
  background: #66cc33;
}
.markBgRed {
  background: #ff0000;
}
.markBgDarkRed {
  background: #990000;
}
.markBgOrange {
  background: #ff6600;
}
.markBgBlack {
  background: #000000;
}
.markBgGray {
  background: #999999;
}
.markBgPurple {
  background: #990099;
}
.markBgPink {
  background: #ff66cc;
}
.markBgBlue {
  background: #3399ff;
}
.markBgBrown {
  background: #663300;
}
/* Anker-Offsets */
.aComBlogComment {
  top: -50px;
  display: block;
  visibility: hidden;
  position: relative;
}
/* Echos */
img.echoIconSmall {
  height: 20px;
  float: left;
}
/* Clearfix */
.cf:before,
.cf:after {
  content: "\002d 0";
  display: block;
  height: 0;
  overflow: hidden;
}
.cf:after {
  clear: both;
}
.cf {
  zoom: 1;
}
/* OF */
.bookmarkList {
  width: 100%;
}
.bookmarkList .entry {
  display: block;
  height: 225px;
  cursor: pointer;
  float: left;
  background: #ffffff;
  border: 1px solid #d3d3d3;
  border-bottom: 1px solid #cacaca;
  border-right: 1px solid #cacaca;
  box-shadow: 0 2px 2px #cacaca;
  border-radius: 3px;
  width: 143px;
  margin-right: 5px;
  margin-bottom: 10px;
}
.bookmarkList .entry:hover {
  background: #ffe7c9;
  border: 1px solid #ff9613;
}
.bookmarkList .entry .profileImage {
  display: block;
  padding: 10px;
  text-align: center;
}
.bookmarkList .entry .profileImage img {
  width: 100%;
  border-radius: 50%;
}
.bookmarkList .entry .stamp {
  padding: 10px;
  font-size: 110%;
  padding-right: 0;
}
.bookmarkList .entry .loginInfo {
  padding: 10px;
  padding-top: 0;
  font-size: 90%;
  font-weight: 300;
  color: #999999;
}
.bookmarkList .entry .zipcode {
  margin-top: -20px;
  position: absolute;
  border-radius: 5px;
  background: #000000;
  opacity: 0.8;
  padding: 4px;
  color: #ffffff;
  margin-left: 10px;
}
.bookmarkList .entry a.delete {
  position: absolute;
  margin-left: 110px;
  margin-top: -15px;
  display: block;
  width: 10px;
  height: 10px;
}
.bookmarkList .entry .actions {
  margin-left: 5px;
  font-size: 80%;
}
.headerGuestLogin {
  display: none;
}
.tmpLayerBackground {
  position: fixed;
  top: 0;
  left: 0;
  background: #8b8b8b;
  width: 100%;
  opacity: 0.3;
  -moz-opacity: 0.3;
  -khtml-opacity: 0.3;
}
/* #TickerLayer */
.tickerLayer .button:hover {
  text-decoration: underline;
}
.tickerLayer {
  width: 100%;
  background: #ffffff;
  min-height: 1300px;
  padding-bottom: 50px;
  text-align: left;
}
.tickerLayer.edit {
  background: #4e4e4e;
}
.tickerLayer.edit .frame .media .image img {
  width: 360px !important;
}
.tickerLayer .left {
  float: left;
  width: 340px;
  padding-bottom: 10px;
  padding-top: 0;
}
.tickerLayer .right {
  float: right;
  width: 360px;
  max-width: 360px;
  margin-right: 20px;
}
.tickerLayer .back {
  padding-top: 5px;
}
.tickerLayer .statusIcon {
  text-align: center;
  float: left;
  font-size: 100%;
  padding-bottom: 10px;
  padding-top: 10px;
  color: #666666;
  font-weight: 500;
  display: block;
}
.tickerLayer .statusIcon .icon {
  float: left;
  margin-left: 40px;
}
.tickerLayer .statusIcon .name {
  float: left;
  padding-top: 10px;
  padding-left: 5px;
}
.tickerLayer .statusIcon .icon img {
  width: 30px;
  margin-right: 7px;
  vertical-align: text-bottom;
}
.tickerLayer .statusIcon .select {
  float: left;
  padding-top: 10px;
}
.tickerLayer .statusIcon .select img {
  width: 15px;
  margin-left: 10px;
  vertical-align: text-bottom;
}
.tickerSuggestions .listOfEchos {
  margin-left: 15px !important;
}
.tickerLayer .feed .editor .smilies .entries {
  width: auto !important;
}
.tickerLayer .feed .editor .smilies {
  width: auto !important;
}
.tickerLayer .textareaCompose {
  height: 4em;
  font-size: 110%;
  border: 1px solid #e8e8e8;
  width: calc(100% - 5px);
  max-width: calc(100% - 5px);
  padding: 17px 15px;
  margin: 0;
  border-radius: 15px;
}
.tickerLayer a.selectStatus {
  border: 1px solid #e6e6e6;
  background: #e5e5e5;
  cursor: pointer;
  padding-right: 20px;
  padding-bottom: 10px !important;
  border-radius: 10px;
  margin-bottom: 5px;
}
.tickerLayer a:hover.selectStatus {
  background: #ffedb0;
}
.tickerLayer .editor .features {
  display: none;
}
.tickerLayer button.positive {
  background: #ffa124;
  border: 1px solid #ffa124;
  font-weight: 600;
  color: #ffffff;
}
.tickerLayer button {
  padding: 15px 15px;
  border-radius: 10px;
  background: #ffffff;
  color: #a5a5a5;
  cursor: pointer;
  border: 1px solid #e5e5e5;
  margin: 5px 5px 0 0;
}
.tickerLayer button:hover {
  border: 1px solid #dddddd;
}
.tickerLayer .media .image {
  min-height: 200px;
  text-align: center;
}
.tickerLayer .media .image img {
  max-width: 340px;
  max-height: 650px;
  border: 1px solid #e5e5e5;
}
.tickerLayer .media .image img:hover {
  border: 1px solid #d0ffff;
}
.tickerLayer .media .noImage {
  padding: 20px;
  padding-top: 50px;
  font-size: 120%;
  height: 50px;
  font-weight: 300;
  vertical-align: middle;
  background: #cacaca;
  margin: 20px;
  margin-top: 35px;
  border-radius: 20px;
}
.tickerLayer .left.full {
  width: 100% !important;
  text-align: center;
}
.tickerLayer .left.full .media .image img {
  width: 100% !important;
  max-height: none !important;
  max-width: 100% !important;
}
.tickerLayer .right.hide {
  display: none;
}
.tickerLayer .ticker {
  padding: 0 20px 0 0;
  font-size: 110%;
  line-height: 18px;
}
.tickerLayer .ticker img {
  vertical-align: text-bottom;
  margin-top: 3px;
}
.tickerLayer .ticker .text {
  padding-bottom: 7px;
  color: #333333;
  width: 100%;
  word-wrap: break-word;
}
.tickerLayer .ticker .text {
  font-size: 110%;
  font-weight: 300;
  line-height: 140%;
}
.tickerLayer.edit .ticker .text {
  padding-left: 10px;
}
.tickerLayer .saveTicker {
  text-align: center;
  margin-top: 10px;
  text-align: right;
  margin-right: 10px;
}
.tickerLayer .saveTicker button {
  color: #ffffff;
  background: #ffa124;
  border: 1px solid #ffa124;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  display: inline-block;
  padding: 15px 15px;
  margin: 0 3px 3px 0;
  border-radius: 15px;
  margin: auto;
}
.tickerLayer .saveTicker button.preview {
  background-color: #ffffff;
  border: 1px solid #eaeaea;
  color: #c8c8c8;
  margin-right: 5px;
}
.tickerLayer .saveTicker button[disabled] {
  background: #ccc;
  border: 1px solid #aaa;
}
.tickerLayer .addTickerHeadline {
  text-align: center;
  color: #ffffff;
  font-weight: 800;
  padding: 10px;
  font-size: 150%;
  position: relative;
  margin-top: -40px;
}
.tickerLayer .statusSelector .top {
  padding-bottom: 0;
}
.tickerLayer .explanation {
  text-align: center;
  color: #9b9b9b;
  font-size: 120%;
  font-weight: 600;
}
.tickerLayer .explanation img {
  width: 100px;
}
.tickerLayer .startCamera {
  padding: 20px 20px 0px 20px;
  margin-top: 20px;
  text-align: center;
}
.tickerLayer .startCamera a {
  color: #999;
  padding: 10px;
  background: #f1f1f1;
  border-radius: 10px;
}
.tickerLayer .startCamera a:hover {
  background: #ffffff;
}
.tickerLayer .fileSelection .headline {
  font-size: 150%;
  font-weight: 300;
  color: #555555;
  text-align: center;
}
.tickerLayer .prepareImage {
  animation: prepareImage 1.0s infinite;
  width: 100px;
  margin: auto;
}
.tickerLayer .imageUploadStatus {
  padding: 0 20px;
  text-align: center;
  color: #999;
  font-weight: bold;
}
.tickerLayer .imageUploadStatus .info {
  font-weight: 300;
  color: #999999;
  margin-top: 20px;
}
.tickerLayer .removeImage {
  text-align: center;
  color: #999;
  padding: 10px;
  background: #e5e5e5;
  margin-top: 10px;
  width: 340px;
  cursor: pointer;
  border-radius: 10px;
}
.tickerLayer .imageUploadStatus .headline {
  font-weight: 300;
  padding: 20px;
  font-size: 150%;
}
.tickerLayer .tickerUserHead .actionRight {
  float: right;
  padding-top: 10px;
}
.tickerLayer .tickerUserHead .actionRight .subscribe {
  float: left;
}
.tickerLayer .tickerUserHead .actionEntry {
  padding: 8px 15px;
  font-weight: 600;
  background: #4ecdff;
  color: #ffffff;
  border-radius: 20px;
  opacity: 1.0;
}
.tickerLayer .tickerUserHead .actionEntry span {
  font-weight: 400;
  margin-left: 5px;
}
.tickerLayer .tickerUserHead .actionEntry.active {
  background: #e4e4e4;
  color: #717171;
}
.tickerLayer .tickerUserHead .actionEntry:hover {
  background: #ffd237;
  opacity: 1.0;
  cursor: pointer;
  border-radius: 20px;
  transition: 0.5s;
}
.tickerLayer .tickerUserHead .actionEntry img {
  width: 20px;
}
.tickerLayer .tickerUserHead .actionButton {
  float: left;
  padding: 8px 15px;
  margin-left: 5px;
  font-weight: 600;
  background: #22d8d8;
  color: #ffffff;
  border-radius: 20px;
  opacity: 1.0;
}
.tickerLayer .tickerUserHead .actionButton span {
  font-weight: 400;
  margin-left: 5px;
}
.tickerLayer .tickerUserHead .actionButton img {
  width: 20px;
  float: left;
}
.tickerLayer .tickerUserHead .actionButton .text {
  float: left;
  padding: 5px;
  margin-left: 5px;
}
.tickerLayer .tickerUserHead .actionButton.boost {
  background: #fd78a9;
}
.tickerLayer .tickerUserHead .actionButton.edit {
  background: #acacac;
}
.tickerLayer .tickerUserHead .actionButton:hover {
  background: #ffd237;
  opacity: 1.0;
  cursor: pointer;
  border-radius: 20px;
}
.tickerLayer .zoom {
  float: left;
  margin-left: 15px;
  padding: 5px;
  padding-right: 10px;
  margin-top: 15px;
  color: #ffffff;
  position: absolute;
  border-radius: 20px;
  background-color: rgba(0, 0, 0, 0.3);
  text-align: center;
  opacity: 0.8;
}
.tickerLayer .zoom img {
  width: 25px;
  float: left;
  border: none;
  margin-left: 5px;
}
.tickerLayer .zoom .text {
  float: left;
  display: none;
  padding: 5px;
  margin-left: 5px;
}
.tickerLayer .media:hover .zoom .text {
  display: block;
}
.tickerLayer .zoom:hover {
  opacity: 1;
  cursor: pointer;
}
.tickerLayer .zoom:hover img {
  border: none;
}
.tickerLayer .feed .editor .smilies {
  padding: 0;
}
.tickerLayer .tickerTopic {
  width: 100%;
  margin-bottom: 10px;
}
.tickerLayer .tickerTopic .listOfOptions {
  padding: 0 0 0 10px;
  float: right;
}
.tickerLayer .tickerTopic .listOfOptions .badFeedback {
  float: left;
}
.tickerLayer .tickerTopic .listOfOptions .share {
  float: left;
}
.tickerLayer .tickerTopic .listOfOptions .stats {
  float: left;
}
.tickerLayer .tickerTopic .listOfOptions img {
  width: 25px;
}
.tickerLayer .tickerTopic .listOfOptions .option {
  width: 25px;
  height: 25px;
  padding: 5px;
  border-radius: 50px;
  opacity: 0.5;
  cursor: pointer;
}
.tickerLayer .tickerTopic .listOfOptions .option:hover {
  background: #f5c934;
  opacity: 1.0;
  transition: 0.5s;
}
.tickerLayer .topicInfo {
  float: left;
}
.tickerLayer .topicInfo .icon {
  float: left;
}
.tickerLayer .topicInfo .icon img {
  width: 30px;
}
.tickerLayer .topicInfo .name {
  float: left;
  padding: 10px;
}
.tickerLayer .topicInfo .infoTopicRemoved {
  float: left;
  padding: 14px 3px;
  color: #9a9a9a;
}
.tickerLayer .topicInfo .infoTopicRemoved:hover {
  text-decoration: underline;
  color: #0078E8;
}
.tickerLayer .referenceUser {
  float: left;
  padding-bottom: 5px;
  padding-top: 5px;
}
.tickerLayer .referenceUser .profileImage {
  float: left;
  width: 60px;
  padding-top: 10px;
  padding-bottom: 2px;
}
.tickerLayer .referenceUser .profileImage img {
  border-radius: 50%;
  width: 35px;
  margin-left: 10px;
}
.tickerLayer .referenceUser .basics {
  float: left;
  padding-top: 10px;
}
.tickerLayer .referenceUser .basics .stamp {
  font-size: 130%;
  font-weight: 400;
  padding-bottom: 3px;
}
.tickerLayer .referenceUser .basics .timestamp {
  color: #939393;
  padding-top: 5px;
}
.tickerLayer .statusAttachment {
  font-size: 12px;
  font-weight: 400;
  margin-left: 5px;
}
.tickerLayer .statusAttachment img {
  vertical-align: bottom;
}
.tickerLayer .editing .media {
  margin-top: 20px;
}
.tickerLayer .editing .solutionText {
  background-image: linear-gradient(to bottom, #f67a67 0, #ff998a 100%);
  padding: 20px 15px;
  text-align: center;
}
.tickerLayer .editing .solutionText input {
  padding: 10px;
  border-radius: 20px;
  border: 1px solid #f88270;
  width: 300px;
}
.tickerLayer .editing .solutionText .solutionInfo {
  padding: 5px;
  font-weight: 300;
  font-size: 90%;
}
.tickerLayer .editing .solutionText .solutionHeadline {
  padding: 5px;
  font-weight: 800;
  font-size: 120%;
}
.tickerLayer .editing .selectionRadio {
  margin-bottom: 5px;
}
.tickerLayer .editing .typeOfSolution {
  background: #f1f1f1;
  border: 1px solid #ffffff;
  padding: 10px;
}
.tickerLayer .send .button {
  background: url('//s.jappy.com/i/icon/send.png') no-repeat 50% 50% #4ecdff;
  width: 33px;
  height: 33px;
  background-size: 25px;
  border-radius: 50%;
  border: 1px solid #42bcec;
  margin-left: 5px;
  cursor: pointer;
}
.tickerLayer .send .button:hover {
  border: 1px solid #00a7b7;
  background: url("//s.jappy.com/i/icon/send.png") no-repeat 50% 50% #78d9ff;
  background-size: 25px;
  color: #ffffff;
  transition: 0.5s;
}
.gameTerms {
  background-image: linear-gradient(to bottom, #f67a67 0, #ff998a 100%);
  padding: 20px 15px;
  font-weight: 300;
  line-height: 150%;
  border-radius: 10px;
}
.gameTerms .title {
  font-size: 110%;
}
.layerTickerDetails .tickerLayer .frame.editing.tickerTopics .editor {
  display: none;
}
.tickerLayer .addons {
  margin-bottom: 13px;
  margin-top: 5px;
}
.tickerLayer .addons .addonEntry {
  float: left;
  cursor: pointer;
  margin-right: 2px;
  margin-bottom: 3px;
  display: inline-block;
  background: #cccccc;
  border-radius: 5px;
  color: #6e6e6e;
  padding: 5px 12px 5px 5px;
  font-weight: 400;
  font-size: 100%;
}
.tickerLayer .addons .addonEntry img {
  width: 30px;
  vertical-align: middle;
  margin-right: 3px;
}
.tickerLayer .addons .additional {
  display: none;
}
.tickerLayer .addons.showAll .additional {
  display: inline-block;
}
.tickerLayer .addons.showAll .more {
  display: none;
}
.tickerLayer .addons .addonEntry:hover {
  background: #ffedb0;
}
.tickerLayer .emojiButton img {
  width: 25px;
  margin-left: 320px;
  position: absolute;
  margin-top: -35px;
  cursor: pointer;
}
.tickerLayer .emojiButton img:hover {
  width: 27px;
  margin-left: 319px;
}
.tickerLayer .clearForm {
  margin: auto;
  width: 360px;
  padding: 10px;
  font-size: 90%;
  font-weight: 300;
}
.tickerLayer .clearForm img {
  width: 20px;
}
.tickerLayer .clearForm a {
  color: #dddddd;
  cursor: pointer;
}
.tickerLayer .clearForm a:hover {
  text-decoration: underline;
}
.tickerLayer .listOfEchos {
  margin: 0;
}
.tickerLayer .feed .actions .icon {
  float: left;
  padding: 5px 0;
  margin-left: 10px;
}
.tickerLayer .feed .actions .icon img {
  width: 35px;
}
.tickerLayer .feed .actions .name {
  float: left;
  color: #dddddd;
  font-weight: 300;
  margin: 5px;
  margin-left: 10px;
}
.hashTagLink {
  color: #ec23cb;
}
.videoEditor {
  width: 360px;
  min-height: 250px;
  position: relative;
}
.liveVideo {
  padding-bottom: 10px;
  position: relative;
}
.iconHelp {
  width: 360px;
  margin: auto;
  margin-top: 50px;
}
.iconHelp .headline {
  width: 100%;
  text-align: center;
  font-weight: 600;
  color: #333333;
  font-size: 120%;
  padding: 10px 0;
}
.iconHelp .entry {
  margin-bottom: 20px;
}
.iconHelp .icon {
  float: left;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #dddddd;
  text-align: center;
  margin-left: 10px;
}
.iconHelp .icon img {
  width: 50px;
  margin: auto;
  margin-top: 10px;
}
.iconHelp .text {
  float: left;
  font-weight: 300;
  color: #cacaca;
  font-size: 110%;
  padding: 0;
  margin-left: 30px;
  margin-top: 5px;
  line-height: 140%;
  max-width: 240px;
}
.iconHelp .text a {
  color: #ffffff;
  text-decoration: underline;
}
.iconHelp.bright .text {
  color: #676767;
}
.tickerLayer .tickerTop {
  background: #ffffff;
  padding-bottom: 5px;
  width: 360px;
}
.tickerLayer.edit .tickerTop {
  border: none;
}
/* background-image: linear-gradient(to bottom, #88c7ff 0%, #78bfff 50%) */
.tickerLayer .topbar {
  width: calc(100% - 10px);
}
.tickerLayer .topbar .actions {
  float: right;
  padding: 5px 0;
}
.tickerLayer .topbar .actions .badFeedback {
  float: left;
}
.tickerLayer .topbar .actions .share {
  float: left;
}
.tickerLayer .topbar .actions .stats {
  float: left;
}
.tickerLayer .topbar .actionEntry {
  padding: 5px;
  opacity: 0.4;
  margin-right: 3px;
  float: right;
  color: #000000;
}
.tickerLayer .topbar .subscribe .actionEntry {
  padding: 8px 15px;
  font-weight: 600;
  background: #62b5ff;
  color: #ffffff;
  border-radius: 20px;
  opacity: 1.0;
}
.tickerLayer .topbar .subscribe .actionEntry span {
  font-weight: 400;
  margin-left: 5px;
}
.tickerLayer .topbar .badFeedback .actionEntry {
  margin-right: 10px;
}
.tickerLayer .topbar .actionEntry:hover {
  background: #ffd237;
  opacity: 1.0;
  cursor: pointer;
  border-radius: 10px;
}
.tickerLayer .topbar .actionEntry.active {
  background: none;
  color: #898989;
}
.tickerLayer .topbar .actionEntry img {
  width: 20px;
}
.tickerLayer .listOfEchos {
  cursor: pointer;
}
.tickerLayer .topbar .numberOfSubscribers {
  padding: 5px;
  margin-right: 10px;
  float: left;
  color: #9a9a9a;
  margin-top: 15px;
}
.tickerLayer .nonMobile {
  display: none;
}
.tickerLayer .attachments {
  width: calc(100% - 20px);
  max-width: 500px;
}
.tickerLayer .info {
  background: #fff;
  border-radius: 15px;
  padding: 10px 0px;
  text-align: left;
}
.tickerLayer .info .headline {
  padding: 15px;
  font-weight: 900;
}
.tickerLayer .info .description {
  padding: 0px 15px 15px 15px;
  line-height: 1.3;
}
.fixedAvailable .layerTickerDetails {
  position: fixed !important;
  height: 100%;
  width: 100%;
  top: 40px !important;
  overflow-y: scroll;
  margin-top: 0 !important;
}
.layerTickerDetails .tickerLayer .frame.editing {
  background: #ffffff;
}
.listOfSuperEchos {
  margin-top: 5px;
}
.listOfSuperEchos a.superEcho {
  display: block;
  float: left;
  padding: 8px 10px;
  font-weight: 300;
  border-radius: 20px;
  margin-right: 3px;
  margin-bottom: 3px;
  background: #fff5d4;
  color: #565656;
  font-weight: 600;
  font-size: 90%;
}
.listOfSuperEchos a:hover.superEcho {
  background: #ffedaf;
  cursor: pointer;
  color: #000000;
}
.listOfSuperEchos a.superEcho img {
  width: 15px;
  margin-right: 5px;
  vertical-align: text-bottom;
}
.listOfSuperEchos.showOnlySome .hidden {
  display: none;
}
/* Ticker-Layer Editor */
.tickerLayer .twoPane {
  width: 360px;
  border-radius: 10px;
  padding: 20px;
  min-height: 480px;
  text-align: left;
  margin: auto;
}
.tickerLayer .twoPane .meta {
  width: 100%;
}
.tickerLayer .twoPane .meta .headline {
  padding: 20px 15px;
  font-size: 120%;
  font-weight: 600;
  color: #333333;
}
.tickerLayer .twoPane .meta .description {
  padding: 0px 15px;
  margin-right: 20px;
  color: #9a9a9a;
  font-weight: 300;
  line-height: 130%;
}
.tickerLayer .twoPane .meta .description div {
  margin-bottom: 1.5em;
}
.tickerLayer .twoPane .content {
  width: 100%;
}
.tickerLayer .twoPane .close {
  float: right;
  padding-right: 30px;
  padding-top: 25px;
}
.tickerLayer .twoPane .close img {
  cursor: pointer;
}
.tickerLayer .back img {
  width: 35px;
  padding: 5px;
  margin-left: 10px;
  cursor: pointer;
}
.tickerLayer .back img:hover {
  border-radius: 50%;
  background: #efefef;
}
/* Ticker-Layer - Themenauswahl */
.topicSelector .topicList {
  padding-top: 15px;
}
.topicSelector .topic {
  display: block;
  min-height: 40px;
  padding: 4px;
  line-height: 120%;
  border: 1px solid #fff;
  border-radius: 10px;
  margin-bottom: 3px;
}
.topicSelector .topic .icon {
  float: left;
  width: 40px;
}
.topicSelector .topic .icon img {
  width: 30px;
  height: 30px;
  margin: 5px;
}
.topicSelector .topic .title {
  margin-left: 40px;
  display: block;
  font-size: 110%;
  font-weight: 600;
  color: #333333;
  padding: 3px 7px;
}
.topicSelector .topic .description {
  margin-left: 40px;
  font-size: 90%;
  display: block;
  color: #999999;
  padding: 3px 7px;
  padding-top: 0;
  font-weight: 300;
}
.topicSelector .topic:hover {
  background: #ffedb0;
  border: 1px solid #ffd237;
}
.topicSelector .topic:active {
  background: #efefef;
  border: 1px solid #efefef;
}
.topicSelector .topic.active {
  background: #efefef;
  border: 1px solid #efefef;
}
/* Ticker-Layer - Ortsauswahl */
.locationSelector .search {
  text-align: left;
}
.locationSelector .search input {
  margin-left: 1px;
  display: block;
  width: 80%;
  border-radius: 3px;
  padding: 8px 15px;
  border: 1px solid #efefef;
  background: #f7f7f7;
  font-size: 100%;
}
.locationSelector .locationList:first-child {
  padding-top: 15px;
}
.locationSelector .location {
  display: block;
  padding: 5px;
  border-radius: 5px;
  border: 1px solid #fff;
  margin-bottom: 3px;
}
.locationSelector .location strong {
  display: block;
  color: #333333;
  padding: 3px;
  font-weight: 700;
}
.locationSelector .location span {
  display: block;
  color: #555555;
  padding: 3px;
  font-weight: 300;
}
.locationSelector .location:hover {
  background: #efefef;
  border: 1px solid #c0c0c0;
}
/* #feed Entdecken und Abos */
.feed {
  padding-top: 5px;
}
.streamLoading {
  padding: 50px 20px;
  text-align: center;
  width: 100%;
}
.streamLoading img {
  width: 150px;
}
.streamLoading .text {
  font-size: 100%;
  font-weight: 700;
  color: #666666;
  padding: 10px;
}
.feed .column {
  float: left;
  width: 360px;
}
.feed .column.two {
  margin-left: 30px;
}
.feed a.statusIcon {
  text-align: center;
  font-size: 100%;
  padding-bottom: 4px;
  padding-top: 4px;
  color: #666666;
  font-weight: 500;
  display: block;
  cursor: pointer;
}
.tickerLayer .feed a.statusIcon {
  padding-top: 10px;
}
.feed a.statusIcon .icon {
  float: left;
  margin-left: 20px;
}
.feed a.statusIcon .name {
  float: left;
  padding-top: 10px;
}
.feed a.statusIcon .name:hover {
  text-decoration: underline;
}
.feed a.statusIcon img {
  width: 30px;
  margin-right: 7px;
  vertical-align: text-bottom;
}
/* Bild Ticker ;transform: scale(0.99)*/
.feed .attachedImage {
  text-align: center;
}
.feed .attachedImage img {
  height: 360px;
  width: 100%;
  max-width: 360px;
  margin: auto;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}
.feed .entry.viewed .attachedImage img {
  height: 100px;
  border-bottom: 3px solid #ffa225;
}
.feed .fragment {
  margin-bottom: 20px;
  max-width: 360px;
}
.feed .hashtagList {
  padding-left: 20px;
  padding-top: 10px;
  line-height: 140%;
}
.feed .hashtagList a {
  margin-right: 5px;
}
.feed .entry {
  cursor: pointer;
  text-align: left;
  max-width: 360px;
  background: #ffffff;
  color: #333333;
  border: 1px solid #dcdcdc;
  border-top: none;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.feed .fragment.hideTicker {
  animation: hideTickerEntry 1s forwards;
}
.feed .fragment.updateTicker {
  animation: updateTickerEntry 1.0s forwards;
  animation-iteration-count: 1;
}
.feed .fragment:hover .entry {
  animation: showBorder 1.0s;
  border: 1px solid #85c4ff;
  border-top: none;
}
.feed .fragment .actions {
  border: 1px solid #e5e5e5;
  border-bottom: none;
}
.feed .fragment:hover .actions {
  background: #dadada;
  animation: showBorder 1.0s;
  border: 1px solid #85c4ff;
  border-bottom: none;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.feed .entry {
  display: block;
}
.feed.detail .actionSelector .button:first-child {
  margin-left: 0;
}
.feed.detail .entry {
  border-bottom: none;
}
.feed .hashtagAbo {
  background: #ff39de;
  color: #ffffff;
  font-weight: 900;
  padding: 0 3px;
  border-radius: 3px;
  margin-left: 3px;
}
.feed .firstPage {
  display: none;
}
.feed .entry.setReadRecently {
  box-shadow: 0 2px 2px #9BE4FF;
}
.feed .timestamp {
  color: #a4a4a4;
  font-size: 85%;
  margin-top: 1px;
}
.feed .timestamp em {
  margin-right: 5px;
}
.feed .timestamp a {
  color: #cccccc;
}
.feed .head {
  padding-bottom: 10px;
}
.feed .head .profileImage {
  float: left;
  width: 55px;
  padding-top: 10px;
  padding-bottom: 2px;
  margin-left: 5px;
}
.feed .head .profileImage img {
  border-radius: 50%;
  width: 30px;
  margin-left: 15px;
}
.feed .head .basics {
  float: left;
  padding-top: 12px;
}
.feed .head .basics .stamp {
  font-size: 100%;
  font-weight: 500;
  padding-bottom: 5px;
}
.feed a.emotionIcon {
  float: left;
}
.feed .actionText {
  float: left;
  padding: 15px 20px;
  min-height: 10px;
  color: #666666;
  font-weight: 500;
}
.feed .emotion a.answer {
  float: left;
  display: block;
  padding: 12px;
  margin-left: 20px;
  font-weight: 700;
  margin-top: 40px;
  color: #ffffff;
  border-radius: 20px;
  border: 1px solid #36daff;
  width: 100px;
  text-align: center;
  background: #17c7ef;
}
.feed .emotion a:hover.answer {
  border-color: #ffffff;
  font-weight: 500;
  transform: scale(1.05);
}
.feed .emotion {
  text-align: left;
  background: #17cdf6;
  min-height: 128px;
}
.feed .emotion img {
  width: 180px;
}
.feed .emotion .name {
  position: absolute;
  padding: 10px;
  margin-top: -80px;
  color: #ffffff;
  font-weight: 400;
  margin-left: 190px;
  font-size: 120%;
  z-index: 2;
}
.feed .emotion .playEmotion img {
  width: 40px;
  height: 40px;
  position: absolute;
  margin-top: -80px;
  margin-left: 72px;
  border-radius: 50%;
  opacity: 0.8;
}
.playEmotionLayer {
  text-align: center;
  width: 100%;
}
.feed .actionsStream .button {
  padding: 5px 10px;
  font-size: 90%;
}
.closeIconLayer {
  position: absolute;
  right: 20px;
  top: -50px;
  width: 30px;
}
.feed .nvG .spacer,
.feed .nvG .buttonDefault:first-child {
  margin-left: 60px;
}
.feed .changed {
  font-style: italic;
  padding: 10px 15px;
  color: #afafaf;
}
.feed .defaultText {
  padding: 0 15px 5px 15px;
  font-size: 100%;
  line-height: 18px;
}
.feed .defaultText .headline {
  font-size: 120%;
  font-weight: 300;
  margin-top: 10px;
}
.feed .subtext.important {
  padding: 10px;
  font-size: 100%;
  font-weight: 600;
  text-align: center;
}
.feed .galleryImageEntry {
  height: auto;
  min-height: 220px;
  overflow: hidden;
}
.feed .galleryImageEntry img {
  width: 100%;
}
.feed .galleryImageEntry .multi a {
  display: block;
  width: 50%;
  float: left;
  height: 110px;
}
.feed .galleryImageEntry .foot {
  position: absolute;
  margin-top: -65px;
  width: 340px;
}
.feed .galleryImageEntry .foot a.removeButton {
  background: #ffffff;
}
.feed .galleryImageEntry a.title,
.feed .galleryImageEntry .title {
  padding: 8px 15px;
  background: #61b2fa;
  color: #ffffff;
  border-radius: 5px;
  font-size: 120%;
  opacity: 0.8;
  z-index: 2;
  float: left;
}
.feed .showMoreEntries a {
  color: #ffffff;
  background: #ffa225;
  display: block;
  border-radius: 3px;
  cursor: pointer;
  padding: 12px 3px;
  margin-bottom: 20px;
  font-size: 110%;
  text-align: center;
  min-height: 20px;
  line-height: 20px;
}
.feed .profileImageEntry {
  overflow: hidden;
}
.feed .profileImageEntry img {
  width: 100%;
}
.feed .profileImageEntry .foot {
  position: absolute;
  margin-top: -45px;
  width: 340px;
}
.feed .profileImageEntry .foot a.removeButton {
  background: #ffffff;
}
.feed .profileImageEntry .title {
  padding: 8px 15px;
  background: #333333;
  color: #ffffff;
  border-radius: 5px;
  font-size: 120%;
  opacity: 0.8;
  z-index: 2;
  float: left;
}
.feed .ticker {
  padding: 0 20px 0 20px;
  font-size: 110%;
  line-height: 18px;
}
.tickerLayer.edit .feed .ticker {
  padding-left: 0;
}
.feed .ticker img {
  vertical-align: text-bottom;
  margin-top: 3px;
}
.feed .ticker .tickerFull {
  display: block;
}
.feed .ticker .tickerTruncated {
  display: none;
}
.feed .ticker .text {
  padding-bottom: 7px;
  color: #333333;
  width: 100%;
  font-size: 110%;
  line-height: 140%;
  padding-top: 10px;
  word-wrap: break-word;
}
.feed.discover .ticker .text {
  overflow: hidden;
}
.feed .ticker.truncated .tickerFull {
  display: none !important;
}
.feed .ticker.truncated .tickerTruncated {
  display: block !important;
}
/* Layoutvariante */
.feed .tickerEntry {
  cursor: pointer;
  text-align: left;
  max-width: 360px;
  background: #ffffff;
  border-radius: 10px;
}
.feed .tickerEntry .picture {
  float: left;
  width: 120px;
  padding: 10px;
}
.feed .tickerEntry .picture img {
  width: 120px;
  height: 120px;
  border-radius: 10px;
}
.feed .tickerEntry .content {
  float: left;
  max-width: 210px;
  padding: 10px;
  padding-top: 0;
  padding-left: 0px;
  font-size: 110%;
  line-height: 140%;
}
.feed .tickerEntry .content.wide {
  float: none;
  max-width: 100%;
  padding-top: 10px;
  padding-left: 20px;
}
.feed .tickerEntry .text {
  padding-top: 10px;
}
.feed .tickerEntry .text2 {
  background: #cccccc;
  padding: 10px;
  border-radius: 10px;
}
.feed .tickerHeader {
  padding-bottom: 5px;
}
.feed .tickerHeader .channelLabel {
  color: #ffffff;
  border-radius: 10px;
  padding: 2px 10px;
  display: block;
  float: left;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  max-width: 100px;
}
.feed .tickerHeader .channelLabel img {
  width: 20px;
  height: 20px;
}
.feed .tickerHeader {
  width: 100%;
}
.feed .tickerFooter {
  padding-top: 5px;
}
.feed .tickerFooter .profileImage {
  float: left;
  width: 30px;
  margin-left: 10px;
}
.feed .tickerFooter .profileImage img {
  border-radius: 50%;
  width: 20px;
}
.feed .tickerFooter .basics {
  float: left;
  padding-bottom: 5px;
  padding-top: 5px;
}
.feed .tickerFooter .basics .stamp {
  font-size: 100%;
  font-weight: 500;
  padding-bottom: 5px;
}
.feed .tickerFooter .basics .more {
  font-size: 90%;
  font-weight: 300;
  color: #939393;
  margin-left: 5px;
}
.feed .tickerHeader .list {
  float: right;
  margin-right: 10px;
  display: none;
}
.feed .tickerHeader .list .action {
  float: right;
  border-radius: 50%;
  padding: 3px;
  cursor: pointer;
  margin-left: 15px;
}
.feed .tickerHeader .list .action:hover {
  transform: scale(1.2);
}
.feed .tickerHeader .list img {
  width: 15px;
}
.feed .tickerEchos {
  padding-bottom: 5px;
  margin-left: 20px;
}
.feed .tickerEchos .echos {
  padding-top: 5px;
  float: left;
}
.feed .tickerEchos .echos img {
  height: 20px;
}
.feed .tickerEchos .echos .echo {
  float: left;
  padding: 5px 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 35px;
  border: none;
  border-radius: 10px;
  margin-right: 3px;
}
.feed .tickerEchos .echos .echo.add {
  border: none;
}
.feed .tickerEchos .echos .echo.add:hover {
  background: #ffedb0;
  border-radius: 10px;
  cursor: pointer;
}
.feed .tickerEchos .echos .echo.super img {
  animation: twistSuper 2.5s infinite;
}
.feed .tickerEchos .echos .echo span {
  color: #939393;
  font-size: 80%;
  position: absolute;
  margin-left: 5px;
}
.feed .tickerEchos .echos .echo.own {
  background: #333333;
  color: #ffffff !important;
}
.feed .tickerEchos .echos .echo.own img {
  width: 20px;
}
.feed .tickerEchos .echos .echo.suggest {
  border: 1px solid #f0f0f0;
}
.feed .tickerEchos .echos .echo.suggest span {
  color: #7d7d7d;
}
.feed .tickerEchos .echos .echo.suggest img {
  filter: grayscale(100%) contrast(10%);
  opacity: 0.8;
}
.feed .tickerEchos .echos .echo.suggest:hover {
  background: #ffedb0;
  border: 1px solid #ffedb0;
}
.feed .tickerEchos .echos .echo.suggest:hover img {
  filter: grayscale(0%) contrast(100%);
  opacity: 1;
}
.feed .tickerEchos .echos .more {
  float: left;
  margin: 5px 2px;
  padding: 3px;
  border-radius: 50%;
}
.feed .tickerEchos .echos .more span {
  color: #b5b5b5;
  position: relative;
  margin-left: 4px;
  font-size: 80%;
}
.feed .tickerEchos img.echoIconSmall {
  float: none;
}
.feed .tickerEchos .echos .echo.super {
  background: #ffd237;
  border: 1px solid #f7ca2e;
}
.feed .tickerEchos .echos .echo.super span {
  color: #000000;
}
.feed .comments {
  width: 100%;
  padding-top: 10px;
}
.feed .comments .commentEntry {
  clear: both;
  padding-bottom: 5px;
  border-bottom: 1px solid #f1f1f1;
  margin-bottom: 5px;
  width: calc(100% - 10px);
}
.feed .comments .commentEntry:last-child {
  border: none;
}
.feed .comments .headline .options {
  float: left;
  color: #999999;
}
.feed .comments .headline a {
  margin-right: 5px;
}
.feed .comments .commentEntry .actions {
  visibility: hidden;
  font-size: 90%;
}
.feed .comments .commentEntry:hover .actions {
  visibility: visible;
}
.feed .comments .picture {
  float: left;
  width: 40px;
  padding-top: 5px;
  text-align: left;
}
.feed .comments .picture img {
  width: 30px;
  min-height: 30px;
  border-radius: 50%;
}
.feed .comments .plain {
  float: left;
  padding-bottom: 5px;
  max-width: 86%;
}
.feed .comments .plain .text {
  color: #000000;
  line-height: 140%;
  font-size: 100%;
}
.feed .comments .plain .text .bubble {
  float: left;
  padding: 5px;
  padding-top: 0;
  font-weight: 400;
  width: 100%;
  word-wrap: break-word;
}
.feed .comments .plain .text .bubble .stamp {
  font-weight: 700;
  margin-right: 5px;
}
.feed .comments .plain img {
  vertical-align: text-bottom;
}
.feed .comments .plain .headline {
  font-size: 90%;
  padding-left: 5px;
}
.feed .suggestComment {
  width: 240px;
  padding: 5px 10px;
  border-radius: 3px;
  padding-top: 8px;
  line-height: 130%;
  height: 18px;
  border: 1px solid #DCDCDC;
  color: #888888;
  font-size: 100%;
}
.feed .suggestComment:hover {
  border: 1px solid #3ca2fe;
  cursor: text;
}
.feed .atUser {
  font-size: 120%;
  padding: 0 5px;
  color: #49ccff;
  font-weight: 900;
  cursor: pointer;
}
.feed .atUser:hover {
  color: #ffd237;
}
.feed .commentBox {
  margin-left: 0px;
  margin-top: 5px;
  width: calc(100% - 10px);
  padding-top: 10px;
  padding-bottom: 5px;
}
.feed .commentBox .profileImage {
  float: left;
  width: 45px;
  text-align: left;
}
.feed .commentBox .profileImage img {
  width: 30px;
  min-height: 30px;
  border-radius: 50%;
  border: none !important;
}
.feed .commentBox .plain {
  float: left;
}
.feed .commentBox .inputComment {
  width: 240px;
  max-width: 240px;
  font-weight: 400;
  padding: 4px 10px;
  border-radius: 5px;
  padding-top: 8px;
  line-height: 140%;
  height: 20px;
  border: 1px solid #e5e5e5;
  background: #ffffff;
  font-size: 100%;
}
.feed .commentBox .inputComment:hover {
  background: #ffffff;
  border: 1px solid #78d9ff;
  transition: 0.5s;
}
.feed .commentBox .inputComment.small {
  min-height: 20px;
}
.feed .commentBox .emojiSelector {
  width: 275px;
}
.feed .commentBox .inputComment:focus {
  color: #000000;
  border: 1px solid #b6b6b6;
  background: #ffffff;
}
.feed .commentBox .buttonSend:hover {
  border: 1px solid #000000;
  color: #000000;
}
.feed .commentBox .features {
  position: absolute;
  z-index: 2;
  width: 150px;
  padding-top: 3px;
  height: 25px;
  display: none;
}
.feed .commentBox .editor {
  border: none;
  background: transparent;
}
.feed .commentBox .editor .smilies .entry {
  border-bottom: none;
}
.feed .commentBox .editor .smilies .entries {
  border: none;
}
.feed .commentBox .resizeFrame {
  background: none;
}
.feed .actionSelector {
  padding: 0;
  padding-top: 5px;
}
.tickerSuggestionsHeadline {
  padding: 15px 30px;
  color: #a5a5a5;
  font-size: 140%;
  font-weight: 600;
  margin-top: 15px;
  text-align: center;
}
.tickerSuggestions.feed {
  width: 100%;
  text-align: center;
}
.tickerSuggestions.feed .column {
  float: left;
  width: 400px;
  min-height: 100px;
  display: none;
}
.tickerSuggestions.feed .fragment {
  width: 360px;
}
#suggestionColumn1 {
  display: block;
}
.feed .loadMoreComments .button {
  float: left;
  cursor: pointer;
  padding: 5px;
  color: #49ccff;
  font-weight: 700;
  margin-left: 40px;
}
.feed .loadMoreComments .button:hover {
  text-decoration: underline;
}
.feed .editor .smilies {
  width: 270px;
  padding: 5px 0;
}
.feed .editor .smilies .entries {
  width: 245px;
}
.feed .emoji {
  margin: 0px;
}
.feed .entryHeader {
  padding: 10px;
  padding-bottom: 0;
  text-align: center;
  font-size: 140%;
}
.feed .entryHeader img {
  width: 40px;
  padding: 5px;
}
.feed .entryHeader em {
  margin-left: 5px;
  color: #919191;
}
.feed .actions .statusIcon {
  float: left;
}
.feed .actions .list {
  float: right;
  margin-right: 10px;
}
.feed .actions .list .action {
  float: right;
  border-radius: 50%;
  padding: 3px;
  margin-top: 10px;
  cursor: pointer;
  margin-left: 15px;
}
.feed .actions .list .action:hover {
  transform: scale(1.2);
}
.feed .actions .list img {
  width: 18px;
}
.feed .actions .topicInfo {
  float: left;
  padding: 5px 0;
}
.feed .actions .topicIcon {
  float: left;
  padding: 0;
  margin-left: 20px;
}
.feed .actions .topicIcon img {
  width: 30px;
}
.feed .actions .topicName {
  float: left;
  color: #c3c3c3;
  font-weight: 400;
  padding: 5px;
  padding-top: 10px;
  margin-left: 2px;
}
.feed a.statusAppendix {
  margin-left: 10px;
}
.feed a.statusAppendix img {
  margin-left: 3px;
  vertical-align: text-bottom;
}
.feed .fragment:hover .list {
  display: block;
}
.topicListHeader {
  padding: 20px;
}
.topicListHeader .topicIcon {
  float: left;
  padding: 5px 0;
}
.topicListHeader .topicIcon img {
  width: 30px;
}
.topicListHeader .topicName {
  float: left;
  color: #c3c3c3;
  font-weight: 400;
  padding: 5px;
  padding-top: 10px;
  margin-left: 2px;
}
.topicListHeader .description {
  padding-top: 3px;
}
.dislikeTicker {
  padding: 10px 15px;
  background: #ffffff;
  border: 1px solid #dcdcdc;
  border-radius: 10px;
  text-align: center;
}
.dislikeTicker .headline {
  padding: 10px 15px;
}
.dislikeTicker .listOfOptions a.option {
  display: block;
  color: #959595;
  font-weight: 300;
  width: 40%;
  min-height: 110px;
  text-align: center;
  float: left;
  padding: 5%;
}
.dislikeTicker .listOfOptions img {
  width: 80px;
}
.dislikeTicker .reported {
  padding: 15px;
  margin-bottom: 10px;
  border-radius: 10px;
  color: #ffffff;
  font-weight: 600;
  background: #acacac;
}
.subNavigation {
  overflow: visible;
  margin-left: 0;
  padding-top: 0;
}
.subNavigation a.navigationEntry {
  float: left;
  font-size: 100%;
  color: #6c6c6c;
  font-weight: 300;
  background: #dddddd;
  display: block;
  padding: 12px 25px 12px 25px;
  margin-right: 5px;
  border-radius: 20px;
  text-align: center;
}
.subNavigation a.navigationEntry.active {
  background: transparent;
  font-weight: 600;
  color: #000000;
}
.subNavigation a.navigationEntry:hover {
  background: #d2d2d2;
}
.uiSectionNavi {
  overflow: visible;
  margin-left: 0;
  padding-top: 0;
  margin-bottom: 10px;
}
.uiSectionNavi a.section {
  float: left;
  font-size: 100%;
  color: #555555;
  background: #ffa031;
  display: block;
  padding: 0 10px 0 10px;
  margin-right: 5px;
  border-radius: 20px;
  text-align: center;
  background: #cecece;
  border: 2px solid #cecece;
}
.uiSectionNavi a.section.highlight {
  background: #f96700;
  background: linear-gradient(30deg, #ffd237 0%, #ff9933 100%);
  border: 2px solid #ff9933;
}
.uiSectionNavi a.section.highlight .text {
  color: #ffffff;
  font-weight: 800;
}
.uiSectionNavi a.section.active {
  background: #9e9e9e;
  border: 2px solid #949494;
}
.uiSectionNavi a.section.active .text {
  color: #ffffff;
  font-weight: 800;
}
.uiSectionNavi a.section:hover {
  background: #000000;
  background: linear-gradient(30deg, #ffd237 0%, #ff9933 100%);
  border: 2px solid #ff9933;
  transition: 0.7s;
}
.uiSectionNavi a.section .text {
  float: left;
  padding: 13px 10px;
}
.uiSectionNavi a.section .icon {
  float: left;
  padding: 7px;
  padding-right: 0;
}
.uiSectionNavi a.section .icon img {
  width: 25px;
}
.getMoreTickerEntries {
  padding: 10px;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: 500;
  text-align: center;
  color: #999999;
}
.getMoreTickerEntries:hover {
  text-decoration: underline;
}
.selectEcho {
  width: calc(100% - 10px);
  border: 2px solid #f5c934;
  background: #ffd237;
  margin-top: 10px;
  border-radius: 10px;
}
.selectEcho .echoPointer {
  margin-left: 25px;
}
.selectEcho .echoList {
  margin: 8px;
  margin-left: 2%;
  min-height: 70px;
}
.selectEcho .echoList {
  min-width: 360px;
}
.selectEcho .echoList .echoEntry {
  float: left;
  width: 60px;
  height: 60px;
  margin: 2px;
  padding: 0px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid #f9c923;
}
.selectEcho .echoList .echoEntry:hover {
  cursor: pointer;
  animation: rotate 0.3s;
  border: 1px solid #3ca2fe;
  font-weight: 500 !important;
}
.selectEcho .echoList .echoEntry.checked {
  background: #ffd237;
  border: none;
}
.selectEcho .echoList .echoIcon {
  width: 80%;
  padding: 10%;
  padding-bottom: 5%;
  text-align: center;
}
.selectEcho .echoList .echoIcon img {
  width: 70%;
}
.selectEcho .echoList .entry.disable img {
  filter: grayscale(100%);
  opacity: 0.3;
}
.selectEcho .echoList .echoTitle {
  width: 100%;
  text-align: center;
  font-size: 70%;
  font-weight: 500;
}
.selectEcho .echoList .echoEntry.disable {
  opacity: 0.9;
  background: #ffd237;
}
.selectEcho .echoList .echoEntry.disable a {
  color: #666666;
}
.selectEcho .echoList .echoEntry.disable img {
  filter: grayscale(40%);
}
.selectEcho .echoList .echoPrice {
  position: absolute;
  font-size: 80%;
  margin-top: 4px;
}
.selectEcho .echoList .echoPrice span {
  border-radius: 5px;
  background: #ffa225;
  color: #ffffff;
  padding: 2px;
}
.selectEcho .echoSetInfo {
  animation: fadeIn 1.0s;
  float: left;
  margin-top: 17px;
}
.selectEcho .echoSetInfo .infoText {
  float: left;
  padding: 10px;
  color: #bd9715;
  font-size: 100%;
  font-weight: 500;
}
.selectEcho .echoSetInfo .infoIcon {
  float: left;
  margin-left: 15px;
}
.selectEcho .echoSetInfo .infoIcon .fakeButton {
  padding: 11px 20px;
  text-transform: uppercase;
  font-weight: 800;
  border-radius: 5px;
  background: #d90077;
  color: #ffffff;
}
.selectEcho .echoSetInfo .infoIcon img {
  width: 30px;
}
.simpleLayer {
  width: 100%;
}
.layerCloseIconBlack {
  padding: 5px;
  margin-left: 10px;
  margin-top: 5px;
  width: 30px;
  height: 30px;
}
.layerCloseIconBlack img {
  width: 30px;
}
.layerCloseIconBlack:hover {
  opacity: 0.9;
  animation: focusIcon 1s;
  cursor: pointer;
}
.layerCloseIcon {
  width: 40px;
  margin-left: 20px;
  margin-top: 5px;
}
.layerCloseIcon:hover {
  opacity: 0.9;
  animation: focusIcon 1s;
  cursor: pointer;
}
.layer_NavigationBar {
  width: 100%;
  position: fixed;
  height: 40px;
  background: #333333;
}
.layer_NavigationBar:hover {
  opacity: 0.9;
}
.fixedAvailable .layer_NavigationBar {
  position: fixed !important;
  top: 0;
  margin-top: 0 !important;
}
.infoLayer {
  background: #ffedb0;
  padding: 20px;
  line-height: 20px;
  position: fixed !important;
  top: 45px !important;
  left: 0 !important;
  text-align: left;
  width: 100% !important;
}
.highlightSubscription {
  animation: fadeIn 0.9s;
}
.wasRemoved {
  padding: 10px;
  border: 1px solid #f5c934;
  background: #ffd237;
  border-radius: 10px;
  text-align: center;
  margin-bottom: 20px;
  color: #bd9715;
  font-weight: 500;
}
.wasRemoved span {
  text-decoration: underline;
  color: #be9815;
  cursor: pointer;
}
.updateInfo {
  color: #999999;
  font-weight: 300;
  font-size: 120%;
}
.updateInfo .entry {
  width: 100%;
}
.updateInfo .entry .icon {
  float: left;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  margin-left: 30px;
}
.updateInfo .entry .icon img {
  width: 80%;
  border-radius: 50%;
}
.updateInfo .entry .text {
  float: left;
  width: calc(100% - 170px);
  padding: 20px;
  line-height: 150%;
  font-size: 100%;
}
.tickerLayerOptions {
  background: #ffffff;
  padding: 10px;
  border: 1px solid #e1e1e1;
  border-radius: 10px;
  width: 300px;
}
.fixedAvailable .tickerLayerOptions {
  position: fixed !important;
}
.tickerLayerOptions a {
  display: block;
  padding: 15px 20px;
  font-size: 100%;
  font-weight: 600;
  cursor: pointer;
  color: #00d2d2;
}
.tickerLayerOptions a:hover {
  text-decoration: underline;
}
.tickerLayerOptions .shareHeadline {
  padding: 15px 20px;
  padding-bottom: 0;
  font-size: 120%;
  font-weight: 600;
}
.tickerLayerOptions .shareInput {
  padding: 0 10px;
  margin-left: 10px;
  margin-bottom: 5px;
  margin-top: 15px;
  padding-top: 0;
  font-size: 100%;
  font-weight: 600;
}
.tickerLayerOptions .shareInput input {
  min-width: 240px;
  padding: 5px 10px;
  border-radius: 20px;
  border: 1px solid #d8d8d8;
}
.tickerLayerOptions .shareInput input:hover {
  border: 1px solid #00ada9;
}
.reMsg .message {
  color: #ffffff;
  background: #444444;
  border: 1px solid #242424;
  width: 290px;
  border-radius: 10px;
  font-weight: 600;
  line-height: 130%;
}
.reMsg .message .frame {
  padding: 20px;
}
.reMsg .message .suggestions {
  margin-top: 20px;
  font-weight: 300;
}
.reMsg .message .headline {
  padding: 5px 0;
  font-size: 120%;
}
.reMsg .message .suggest {
  padding: 5px;
  margin-right: 3px;
  margin-bottom: 3px;
  border-radius: 10px;
  color: #ffffff;
  cursor: pointer;
  color: #ffda69;
  float: left;
  background: #333333;
  border: 1px solid #000000;
}
.reMsg .message .suggest:hover {
  background: #000000;
}
.reMsg .pointer {
  background: url(//s.jappy.com/i/icon/pointer/poToZ.gif) no-repeat;
  width: 20px;
  height: 11px;
  position: absolute;
  z-index: 2;
  margin-top: -9px;
  margin-left: 20px;
}
#reForm input.inputError {
  background: #f7f384;
  font-weight: bold;
}
#reForm input.inputOk {
  background: #e6ffd5;
}
.tickerFeedAd {
  width: 360px;
  min-height: 250px;
  margin-bottom: 10px;
  text-align: center;
}
.overlay-enabled {
  position: relative;
  overflow: hidden;
  height: 100%;
  width: 100%;
}
.cookieNotice {
  position: fixed;
  bottom: 0px;
  left: 0px;
  right: 0;
  font-size: 110%;
  background: #333;
  color: #f1f1f1;
  text-align: center;
  z-index: 9000;
}
.activationInfoLayer {
  text-align: center;
  width: 100%;
}
.fixedAvailable .activationInfoLayer {
  position: fixed !important;
  top: 100px !important;
}
.confirmSuperInfoLayer {
  text-align: center;
  width: 100%;
}
.fixedAvailable .confirmSuperInfoLayer {
  position: fixed !important;
  top: 100px !important;
}
.superConfirmation,
.boostConfirmation {
  width: 360px;
  margin: auto;
  background: #ffffff;
  border-radius: 20px;
}
.homepage .topicDropdown {
  float: left;
  margin-bottom: 7px;
  max-width: 200px;
  position: relative;
}
.homepage .topicDropdown .topicSelector {
  width: 170px;
  padding: 10px;
  clear: both;
  height: 2em;
  background: #dddddd;
  border: 1px solid #dddddd;
  border-radius: 20px;
  transition: 0.5s;
  cursor: pointer;
}
.homepage .topicDropdown .topicSelector:hover {
  border: 1px solid #000000;
  transition: 0.5s;
}
.homepage .topicDropdown .topicSelector .icon {
  float: left;
  width: 2em;
  margin-left: 15px;
}
.homepage .topicDropdown .topicSelector .name {
  float: left;
  height: 2em;
  line-height: 2em;
  margin-left: 13px;
  color: #969696;
  font-weight: 800;
}
.homepage .topicDropdown .topicSelector .dropdownButton {
  float: right;
  height: 1.2em;
  width: 1.2em;
  margin-right: 5px;
  margin-top: 5px;
  filter: alpha(opacity=50);
  opacity: 0.5;
  transition: 0.5s;
}
.homepage .topicDropdown .topicSelector:hover .dropdownButton {
  filter: alpha(opacity=100);
  opacity: 1;
  transition: 0.5s;
}
.channelsHead {
  margin-bottom: 7px;
}
.channelsHead a.entry {
  display: block;
}
.channelsHead .entry {
  margin-right: 5px;
  padding: 7px 10px;
  padding-right: 20px;
  float: left;
  background: #cecece;
  border: 2px solid #cecece;
  border-radius: 20px;
  transition: 0.5s;
  cursor: pointer;
}
.channelsHead .entry:hover {
  border: 2px solid #fe9b37;
  transition: 0.8s;
  background: linear-gradient(30deg, #ffd237 0%, #ffa225 100%);
}
.channelsHead .entry.active {
  background: #9e9e9e;
  border: 2px solid #949494;
}
.channelsHead .entry .icon {
  float: left;
  width: 2em;
  margin-left: 5px;
}
.channelsHead .entry .name {
  float: left;
  height: 2em;
  line-height: 2em;
  margin-left: 13px;
  color: #333333;
  font-weight: 400;
}
.channelsHead .entry.active .name {
  color: #ffffff;
  font-weight: 800;
}
.channelsHead .entry .dropdownButton {
  float: right;
  height: 1.2em;
  width: 1.2em;
  margin-top: 5px;
  filter: alpha(opacity=50);
  opacity: 0.5;
  transition: 0.5s;
}
.channelsHead .entry:hover .dropdownButton {
  filter: alpha(opacity=100);
  opacity: 1;
  transition: 0.5s;
}
.channelsHead .letsDoItButton {
  margin-right: 5px;
  padding: 7px 10px;
  padding-right: 20px;
  float: left;
  background: #cecece;
  background: linear-gradient(45deg, #ff9a33 0%, #ffc636 100%);
  border: 2px solid #f49d2b;
  border-radius: 20px;
  transition: 0.5s;
  cursor: pointer;
}
.channelsHead .letsDoItButton:hover {
  border: 2px solid #fe9b37;
  transition: 0.5s;
  box-shadow: 2px 2px 3px #dcdcdc;
}
.channelsHead .letsDoItButton .icon {
  float: left;
  width: 2em;
  margin-left: 5px;
}
.channelsHead .letsDoItButton .name {
  float: left;
  height: 2em;
  line-height: 2em;
  margin-left: 13px;
  color: #ffffff;
  font-weight: 800;
}
.channelsHead.profile {
  margin-left: 10px;
  padding: 10px;
}
.channelsHead .button {
  margin-right: 5px;
  padding: 12px 20px;
  padding-right: 20px;
  float: left;
  background: #cccccc;
  border: 2px solid #cacaca;
  border-radius: 20px;
  transition: 0.5s;
  cursor: pointer;
  color: #7b7b7b;
}
.channelsHead .button:hover {
  border: 2px solid #B5B5B5;
  transition: 0.5s;
  box-shadow: 2px 2px 3px #dcdcdc;
  background: #B5B5B5;
}
.homepageTopicList {
  position: absolute;
  max-height: 35em;
  overflow-y: scroll;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  overflow-x: hidden;
  z-index: 1020;
  width: 360px;
  background: #fff;
  border: 1px solid #c3c3c3;
  box-shadow: 2px 2px 3px #dcdcdc;
}
.homepageTopicList::-webkit-scrollbar {
  width: 5px;
}
.homepageTopicList::-webkit-scrollbar-button {
  color: #333333;
}
.homepageTopicList::-webkit-scrollbar-thumb {
  color: #333333;
  background: #d3d3d3;
}
.homepageTopicList::-webkit-scrollbar-track {
  color: #333333;
  background: #ffffff;
}
.homepageTopicList .topicListEntry {
  clear: both;
  height: 2em;
  padding: 10px 5px;
  cursor: pointer;
}
.homepageTopicList .topicListEntry.active {
  background: #49ccff;
}
.homepageTopicList .topicListEntry .icon {
  float: left;
  width: 2em;
  margin-left: 15px;
}
.homepageTopicList .topicListEntry .name {
  float: left;
  height: 2em;
  line-height: 2em;
  margin-left: 13px;
  font-weight: 600;
}
.homepageTopicList .topicListEntry .settings {
  float: right;
  border-radius: 15px;
  background: #ffffff;
  height: 2em;
  line-height: 2em;
  padding: 1px;
}
.homepageTopicList .topicListEntry .settings a {
  margin-left: 10px;
  margin-right: 10px;
  font-weight: 600;
  color: #484848;
}
.homepageTopicList .topicListEntry.active .name {
  color: #fff !important;
}
.homepageTopicList .topicListEntry:hover {
  background: #ffedb0;
  transition: 0.25s;
}
.homepage .toolbar {
  clear: both;
  line-height: 2em;
  padding: 3px 8px;
  max-width: 750px;
}
.homepage .toolbar a {
  color: #909090;
  line-height: 2em;
  height: 2em;
}
.homepage .toolbar a img {
  height: 1.5em;
}
.homepage .newTopicsHint {
  background: #bcdca9;
  display: none;
  text-align: center;
  color: #333;
  padding: 7px;
  margin-right: 5px;
  margin-left: 5px;
  border-radius: 7px;
  font-weight: 600;
}
.homepage .refreshButton {
  padding: 10px;
  display: block;
  margin: auto;
  width: 200px;
  background: #ffd237;
  border-radius: 15px;
  color: #333333;
  font-weight: 800;
}
.homepage .refreshButton:hover {
  text-decoration: underline;
  background: #ffd237;
  transition: 0.5s;
}
.homepage .toolbar .buttonList {
  float: left;
}
.homepage .toolbar .buttonList a:hover {
  text-decoration: underline;
}
.homepage .filters {
  float: right;
  position: relative;
  text-align: right;
  cursor: pointer;
  margin-right: 25px;
  padding-bottom: 5px;
}
.homepage .filters .filterOption {
  float: left;
  padding: 5px;
  border-bottom: 3px solid #e5e5e5;
  margin-left: 10px;
  color: #9c9c9c;
  font-weight: 500;
  font-size: 90%;
}
.homepage .filters .filterOption.active {
  border-bottom: 3px solid #ff9933;
  color: #ff9933;
}
.homepage .filters.right {
  float: none;
}
.homepage .filters.right .filterOption {
  float: left;
}
.homepage .filter {
  float: right;
  position: relative;
  text-align: right;
  cursor: pointer;
  margin-right: 25px;
}
.homepage .filter .filterOption {
  float: left;
  padding: 5px;
  border-bottom: 3px solid #e5e5e5;
  margin-left: 10px;
  color: #9c9c9c;
  font-weight: 300;
}
.homepage .filter .filterOption.active {
  border-bottom: 3px solid #49ccff;
  color: #49ccff;
}
.homepage .container {
  min-height: 130px;
  padding-bottom: 13px;
}
.homepage .container .headline {
  line-height: 1.5;
  font-size: 120%;
  padding: 10px 0px;
  color: #555555;
  font-weight: 800;
  margin-left: 10px;
}
.homepage .container .description {
  line-height: 1.7;
  color: #000;
  padding: 10px;
  max-width: 90%;
  font-weight: 300;
  background: #ffda69;
}
.homepage .container .bubble {
  width: 120px;
  height: 120px;
  background: #fff;
  border-radius: 50%;
  text-align: center;
  float: right;
  margin-left: 20px;
  margin-right: 30px;
}
.homepage .container .bubble img {
  width: 90px;
  margin: 10px;
}
.homepage .topicSetting {
  clear: both;
  margin-top: 7px;
  padding: 7px;
  height: 4.5em;
  max-width: 700px;
  border-bottom: 1px solid #dcdcdc;
}
.homepage .topicSetting:last-child {
  border: 0px;
}
.homepage .topicSetting .icon {
  float: left;
}
.homepage .topicSetting .icon img {
  height: 3em;
}
.homepage .topicSetting .name {
  float: left;
  margin-left: 13px;
  line-height: 1.5em;
  max-width: 60%;
}
.homepage .topicSetting .name .title {
  display: block;
  font-weight: 700;
}
.homepage .topicSetting .name .subtitle {
  display: block;
  font-weight: 300;
}
.homepage .topicSetting .setting {
  float: right;
}
.homepage .topicSetting .setting img {
  height: 3em;
  line-height: 3em;
  padding: 5px;
  border-radius: 50%;
  background: #ffffff;
}
.homepage .topicSetting .setting .dislike,
.homepage .topicSetting .setting .like {
  filter: grayscale(100%);
  opacity: 0.3;
  transition: 0.5s;
  cursor: pointer;
}
.homepage .topicSetting .setting .dislike,
.homepage .topicSetting .setting .dislike {
  background: #ffffff;
}
.homepage .topicSetting .setting .dislike.active,
.homepage .topicSetting .setting .like.active {
  opacity: 1.0;
  filter: none;
  transition: 0.5s;
  background: #ffda69;
}
.homepage .topicSetting .setting .dislike:hover,
.homepage .topicSetting .setting .like:hover {
  filter: grayscale(100%);
  opacity: 0.5;
  transition: 0.5s;
}
/* bis eine like-Grafik existiert */
.homepage .topicSetting .setting .like {
  transform: rotate(180deg);
}
.homepage .settingsFoot {
  color: #96770c;
  background: #ffda69;
  border-top: 4px solid #ffd237;
  padding: 15px;
}
.homepage .settingsFoot.fixed {
  position: fixed;
  bottom: 50px;
  height: 100px;
  width: 100%;
}
.homepage .settingsFoot .actionButton {
  float: left;
  padding: 15px;
  background: #ffa225;
  font-weight: 700;
  border: none;
  border-radius: 15px;
  color: #ffffff;
  cursor: pointer;
}
.homepage .settingsFoot .abortButton {
  float: right;
  padding: 5px;
  margin-right: 10px;
}
.homepage .ageRange {
  margin-bottom: 5px;
}
.invisible {
  display: none !important;
}
.lyCancel {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 1;
  opacity: 0.1;
  background: #555;
}
.feed .topicEntry {
  border: 2px solid #D9D9D9;
  border-radius: 13px;
  margin-bottom: 7px;
  cursor: pointer;
  background: #fff;
  transition: 0.5s;
  box-shadow: 1px 1px 3px #ddd;
  overflow: hidden;
}
.feed .topicEntry:hover {
  border: 2px solid #3ca2fe;
  transition: 0.5s;
}
.feed .topicEntry.active {
  border: 2px solid #ffc119;
  transition: 0.5s;
  box-shadow: 1px 1px 7px #ffc119;
}
.feed .topicEntry .topicHeader {
  text-align: left;
}
.feed .topicEntry .topicHeader .headline {
  height: 2em;
  clear: both;
  padding: 7px;
}
.feed .topicEntry.active .headline {
  background: #ffda69;
}
.feed .topicEntry .topicHeader .headline .icon {
  float: left;
}
.feed .topicEntry .topicHeader .headline .icon img {
  width: 2em;
}
.feed .topicEntry .topicHeader .headline .name {
  float: left;
  height: 2em;
  line-height: 2em;
  margin-left: 7px;
}
.feed .topicEntry .topicHeader .description {
  padding: 7px 7px 10px 7px;
}
.feed .topicEntry .topicHeader .example {
  padding: 7px 7px 10px 7px;
  color: #ffffff;
  background: #868686;
}
.feed .topicEntry .visibleIfActive {
  display: inline-block;
  float: right;
  padding: 5px 10px;
  font-weight: 700;
  font-size: 110%;
  border-radius: 15px;
  background: #ffc119;
  opacity: 0;
  color: #333;
  transition: 0.5s;
}
.feed .topicEntry.active .visibleIfActive {
  display: inline-block;
  opacity: 1;
  transition: 0.5s;
}
.tickerStats {
  width: 750px;
  margin: auto;
}
.tickerStats .box {
  padding: 10px;
  border-radius: 5px;
  padding-left: 20px;
  background: #ffffff;
  padding-bottom: 50px;
  overflow-y: auto;
}
.tickerStats * {
  box-sizing: border-box;
}
.tickerStats .graph {
  height: 270px;
  position: relative;
  left: 50px;
  width: 680px;
  padding-top: 20px;
}
.tickerStats .bars {
  padding: 0 5px;
  height: 250px;
  position: absolute;
  width: 100%;
  z-index: 10;
}
.tickerStats .bars .barSet {
  display: block;
  float: left;
  height: 100%;
  position: relative;
  width: 40px;
  margin-right: 6px;
}
.tickerStats .bars .barSet:hover {
  background: #f1f1f1;
}
.tickerStats .bars .bar {
  box-shadow: 1px 0 2px rgba(0, 0, 0, 0.15);
  border-radius: 3px 3px 0 0;
  bottom: 0;
  cursor: pointer;
  height: 0;
  position: absolute;
  text-align: center;
  width: 18%;
  margin-right: 2%;
  animation-duration: 0.5s;
  animation-name: statsFadeIn;
}
.tickerStats .bars .bar:hover {
  opacity: 0.5;
}
.tickerStats .bars .numberOf {
  display: none;
}
.tickerStats .y-axis {
  position: absolute;
  text-align: right;
  width: 100%;
}
.tickerStats ul.y-axis {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tickerStats .y-axis li {
  border-top: 1px solid #f1f1f1;
  display: block;
  height: 50px;
  width: 95%;
}
.tickerStats .y-axis span {
  display: block;
  font-size: 11px;
  margin: -10px 0 0 -60px;
  padding: 0 10px;
  width: 40px;
  color: #adadad;
}
.tickerStats .date {
  font-size: 90%;
  color: #aaaaaa;
  position: relative;
  top: 260px;
}
.tickerStats table th {
  text-align: left;
  background: #72ebff;
  color: #0d7e90;
  line-height: 20px;
  padding: 8px 3px 8px 15px;
  font-weight: 700;
  text-transform: uppercase;
}
.tickerStats .table tr {
  border-bottom: 1px solid #dddddd;
}
.tickerStats table .title {
  color: #888888;
}
.tickerStats ::-webkit-scrollbar {
  width: 5px;
}
.tickerStats h4 {
  text-align: left;
}
.tickerStats ::-webkit-scrollbar-track {
  color: #333333;
  background: #e1e1e1;
}
.tickerStats ::-webkit-scrollbar-button {
  color: #333333;
}
.tickerStats ::-webkit-scrollbar-thumb {
  color: #333333;
  background: #d3d3d3;
}
.tickerStats .record {
  color: #00b9b6;
  font-weight: 900;
}
.tickerStats .views {
  background-image: linear-gradient(to top, #dedede 0%, #cacaca 100%);
}
.tickerStats .clicks {
  background-image: linear-gradient(to top, #3cfe42 0%, #20c3c3 100%);
}
.tickerStats .echoes {
  background-image: linear-gradient(to top, #ffd950 0%, #ff9133 100%);
}
.tickerStats .comments {
  background-image: linear-gradient(to top, #ec0083 0%, #ff64c6 100%);
}
.tickerStats .reach {
  background-image: linear-gradient(to top, #72ffff 0%, #077abd 100%);
}
.getDailyBonus {
  text-align: center;
  padding: 25px 0px;
}
.getDailyBonus .button {
  color: #fff;
  font-weight: 700;
  background: #2eadad;
  border: 1px solid #219898;
  border-radius: 25px;
  padding: 15px 15px;
  cursor: pointer;
}
.dailyBonusEntry .summary {
  padding: 5px 15px;
}
.dailyBonusEntry .summary a {
  display: block;
  background: #f5f5f5;
  color: #333;
  padding: 5px 15px;
  border: 1px solid #e5e5e5;
}
.dailyBonusEntry .summary.active a {
  border-bottom: none;
}
.dailyBonusEntry .summary .factorList {
  display: none;
}
.dailyBonusEntry .summary.active .factorList {
  display: block;
}
/* background-image:linear-gradient(to top, #46ffff 0, #51dede 100%) */
.fixedAvailable .layerLoginBonusLayer {
  position: fixed !important;
  bottom: 0px !important;
  overflow-y: scroll;
  margin: 0 !important;
  height: 100%;
}
.layerLoginBonusLayer {
  padding: 0;
  margin: 0px;
  height: 100%;
}
.layerLoginBonusLayer {
  background: rgba(0, 0, 0, 0.15);
}
.layerLoginBonusLayer .frame {
  padding: 30px;
  margin: auto;
  margin-top: 100px;
  line-height: 150%;
  width: 290px;
  background: #ffffff;
  border-radius: 25px;
  background: linear-gradient(120deg, #BCFFDB 0, #94f5ff 100%);
  border: 5px solid #8ddcdc;
}
.layerLoginBonusLayer .frame:hover {
  border: 5px solid #2cecec;
  transition: 1s;
}
.layerLoginBonusLayer .bonusTitle {
  color: #007582;
  font-weight: 700;
  font-size: 180%;
  margin: 0px;
  font-family: 'Luckiest Guy', cursive;
  padding: 0 0 20px 0px;
  text-align: center;
}
.layerLoginBonusLayer .icon {
  text-align: center;
}
.layerLoginBonusLayer .icon img {
  width: 150px;
}
.layerLoginBonusLayer .description {
  line-height: 1.7;
  margin: 0px 0px 15px 0px;
  font-size: 90%;
  color: #00363f;
  margin-top: 10px;
  font-weight: 300;
}
.layerLoginBonusLayer .startButton .button,
.layerLoginBonusLayer .closeButton .button {
  font-weight: 700;
  border-radius: 25px;
  padding: 15px 15px;
  cursor: pointer;
  border: 5px solid #91e7eb;
}
.layerLoginBonusLayer .startButton,
.layerLoginBonusLayer .closeButton {
  text-align: center;
  margin-top: 25px;
  height: 50px;
}
.layerLoginBonusLayer .startButton .button {
  color: #262626;
  background: #ffa225;
  font-weight: 900;
  font-size: 110%;
  background: linear-gradient(230deg, #ffc51b 0%, #fee540 100%);
}
.layerLoginBonusLayer .startButton .button:hover {
  background: #2cecec;
  transition: 0.5s;
}
.layerLoginBonusLayer .closeButton .button {
  color: #fff;
  background: #24d2ca;
}
.layerLoginBonusLayer .loader {
  text-align: center;
}
.layerLoginBonusLayer .loader img {
  width: 100px;
  height: 100px;
}
.layerLoginBonusLayer .loader .text {
  margin-top: 7px;
}
.layerLoginBonusLayer .loaderHint {
  text-align: center;
}
.layerLoginBonusLayer .loaderHint .text {
  line-height: 1.5em;
  margin-top: 1.5em;
}
.layerLoginBonusLayer .loaderHint .text strong {
  color: #555;
}
.layerLoginBonusLayer .loaderHint .text a {
  font-weight: 700;
  border-radius: 25px;
  padding: 10px 15px;
  cursor: pointer;
  color: #fff;
  background: #ffa225;
  border: 1px solid #fa9e23;
  margin: 13px;
  display: inline-block;
}
.layerLoginBonusLayer .alreadyReceived {
  line-height: 1.5;
  text-align: center;
  font-weight: 900;
  margin-bottom: 10px;
}
.layerLoginBonusLayer .factorList {
  margin-bottom: 20px;
  margin-top: 10px;
}
.layerLoginBonusLayer .factor {
  margin-bottom: 10px;
}
.layerLoginBonusLayer .factor .reason {
  float: left;
  width: 160px;
}
.layerLoginBonusLayer .factor .reason .title {
  font-weight: 700;
  margin-bottom: 5px;
}
.layerLoginBonusLayer .factor .reason .description {
  font-weight: 300;
  font-size: 11px;
  line-height: 1.5;
}
.layerLoginBonusLayer .factor .value {
  float: right;
  width: 100px;
  text-align: right;
}
.layerLoginBonusLayer .factor .details {
  text-decoration: underline;
  font-weight: 300;
  font-style: italic;
  margin-left: 5px;
}
.layerLoginBonusLayer .factor .value .change {
  font-weight: 900;
  font-size: 120%;
}
.layerLoginBonusLayer .factor .value .change.positive {
  color: #109a00;
}
.layerLoginBonusLayer .factor .value .change.negative {
  color: #FF3A25;
}
.layerLoginBonusLayer .factor .value .intermediate {
  font-weight: 300;
  font-size: 11px;
  color: #9a9a9a;
}
.layerLoginBonusLayer .icon {
  animation: wobble-horizontal 5s infinite;
}
.layerLoginBonusLayer .summary {
  text-align: left;
}
.layerLoginBonusLayer a.promote {
  color: #007582;
  font-weight: 300;
  text-decoration: underline;
  font-size: 90%;
}
.layerLoginBonusLayer .summary .headline {
  font-family: 'Luckiest Guy', cursive;
  color: #007582;
  font-weight: 700;
  font-size: 180%;
  margin-bottom: 10px;
}
.layerLoginBonusLayer .summary .entry {
  padding: 2px 0;
  font-size: 140%;
  font-weight: 900;
}
.layerLoginBonusLayer .frame .footer {
  padding: 10px;
}
.layerLoginBonusLayer .frame .footer img {
  width: 25px;
  opacity: 0.6;
}
.layerLoginBonusLayer .frame .footer img:hover {
  opacity: 1.0;
  transform: scale(1.2);
  transition: 0.3s;
  cursor: pointer;
}
.layerReport {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 9000001;
  margin: 0px;
  width: 100%;
  background: rgba(0, 0, 0, 0.15);
  bottom: 0px;
  right: 0px;
  height: 100%;
}
.layerReport .frame {
  padding: 30px;
  margin: auto;
  line-height: 150%;
  width: 290px;
  background: #ffffff;
  border-radius: 25px;
  border: 5px solid #FFA837;
  background-image: linear-gradient(to top, #ffd237 0, #ffdb5d 30%);
  overflow-y: auto;
  max-height: 80vh;
}
.layerReport .frame::-webkit-scrollbar {
  width: 5px;
}
.layerReport .frame::-webkit-scrollbar-button {
  color: #333333;
}
.layerReport .frame::-webkit-scrollbar-thumb {
  color: #333333;
  background: #FFA837;
}
.layerReport .frame::-webkit-scrollbar-track {
  color: #333333;
  background: #FFAF46;
}
.layerReport .frame .title {
  color: #583200;
  font-weight: 700;
  font-size: 180%;
  margin: 0;
  padding: 0 0 20px 0;
  text-align: center;
}
.layerReport .frame p {
  padding: 0 0 13px 0;
  line-height: 1.5;
}
.layerReport .frame p:last-child {
  padding: 0;
}
.layerReport .frame p.hint {
  font-size: 90%;
}
.layerReport .frame .compose textarea {
  background: #fff;
  padding: 13px;
  border-radius: 13px;
  display: block;
  width: calc(100% - 26px);
  margin: 10px 0px;
  border: 1px solid #FFA837;
  min-height: 5em;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  line-height: 1.5;
}
.layerReport .frame .compose textarea:focus,
.layerReport .frame textarea:active {
  box-shadow: #FFA837 0 0 0 0.2rem;
  outline: 0;
}
.layerReport .frame .compose .editor {
  display: none;
}
.layerReport .buttonBay {
  text-align: center;
  margin: 25px 0px;
  height: 50px;
}
.layerReport .buttonBay .button {
  display: inline-block;
  font-weight: 700;
  border-radius: 25px;
  padding: 15px;
  cursor: pointer;
  border: 1px solid #FFA837;
  margin-right: 7px;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background 0.15s ease-in-out;
  font-family: "Roboto", "Arial Nova", sans-serif-light, "Open Sans", Arial, sans-serif;
}
.layerReport .buttonBay .button:last-child {
  margin-right: 0px;
}
.layerReport .buttonBay .button.submit {
  color: #ffffff;
  background: #FFA225;
}
.layerReport .buttonBay .button.abort {
  color: #ffffff;
  background: #ffc600;
}
.layerReport .buttonBay .button.submit:hover {
  color: #ffffff;
  background: #FFAD40;
}
.layerReport .buttonBay .button.abort:hover {
  color: #ffffff;
  background: #ffdf70;
}
.layerReport .buttonBay .button:focus,
.layerReport .buttonBay .button:active {
  box-shadow: #FFA837 0 0 0 0.2rem;
  outline: 0;
}
.layerReport .buttonBay .button[disabled],
.layerReport .buttonBay .button[disabled]:hover,
.layerReport .buttonBay .button[disabled]:focus {
  background: #F0BE7C;
  color: #825D2C;
  cursor: pointer;
}
.desktopOnly {
  display: inline-block;
}
.mobileOnly {
  display: none;
}
.clarification {
  margin-top: 7px;
  padding: 7px;
  background: #f0f0f0;
  font-size: 11px;
  color: #030303;
  line-height: 1.5;
}
.settingsHeader {
  background: #333;
  border-radius: 10px;
  width: 550px;
}
.settingsHeader .headline {
  font-size: 140%;
  padding: 5px 0 6px 0;
  color: #ccc;
  padding: 13px;
  text-align: center;
}
.settingsHeader .row {
  display: block;
  clear: both;
}
.settingsHeader .row .title {
  display: inline-block;
  float: left;
  width: 140px;
  color: #fff;
  text-align: right;
  padding: 5px 10px;
  padding-top: 12px;
  font-weight: 500;
}
.settingsHeader .row .value {
  display: inline-block;
  float: left;
  width: 340px;
  color: #333;
  font-weight: 300;
  border: 1px solid #000;
  border-radius: 5px;
  padding: 10px 10px;
  background: #fff;
  margin-bottom: 5px;
}
.settingsHeader .row .value small {
  margin: 0px;
  padding: 0px;
  margin-top: 3px;
}
.settingsHeader .row .info {
  text-align: center;
  padding: 13px;
}
.settingsHeader .row .info a {
  color: #ccc;
  font-weight: 500;
}
.settingsHeader .row .info a:hover {
  color: #fff;
}
.startpage .tickers {
  cursor: pointer;
  text-align: left;
  max-width: 360px;
  background: #ffffff;
  color: #333333;
  border: 1px solid #dcdcdc;
  border-radius: 10px;
}
.startpage .tickers .picture {
  float: left;
  padding: 15px;
  width: 120px;
  margin-left: 5px;
}
.startpage .tickers .picture img {
  width: 120px;
  border-radius: 5px;
}
.startpage .tickers .content {
  float: left;
  width: 180px;
  padding-top: 15px;
  line-height: 140%;
  font-size: 110%;
}
.startpage .tickers .userInfos {
  padding-top: 5px;
  font-size: 80%;
}
.startpage .tickers .profileImage {
  border-radius: 50%;
  width: 20px;
  margin-right: 5px;
}
.startpage .listOfEchos {
  margin-left: 0;
  padding-top: 5px;
  padding-bottom: 5px;
  width: 100%;
}
.stream .listOfEchos:hover {
  cursor: pointer;
  background: #ffedb0;
}
.startpage .listOfEchos .echo {
  float: left;
  background: #f1f1f1;
  padding: 5px 8px;
  border-radius: 10px;
  margin-right: 3px;
}
.startpage .listOfEchos .more {
  margin: 0;
}
.tutorialWindow {
  margin: 0 0 15px 0;
  text-align: center;
  font-weight: 600;
  font-size: 110%;
}
.tutorialWindow .wrapper {
  max-width: 300px;
  margin: auto;
  background: #333333;
  background: linear-gradient(45deg, #524f4b 0%, #373533 100%);
  border: 5px solid #333333;
  border-radius: 25px;
  color: #ffffff;
  line-height: 160%;
  padding: 15px;
}
.tutorialWindow .setAsRead {
  color: #ffffff;
  background: #ff870e;
  padding: 10px;
  border-radius: 25px;
  display: block;
  margin-top: 10px;
}
.tutorialWindow .setAsRead:hover {
  background: #ffedb0;
  color: #000000;
  transition: 0.5s;
}
.tutorialWindow .headline {
  font-size: 120%;
}
.tutorialWindow .text {
  padding: 10px;
  font-weight: 300;
  padding-bottom: 0;
}
.tutorialWindow .pointerInfo {
  display: none;
}
.tutorialWindow .desktop {
  display: none;
}
.tutorialWindow .mobile {
  display: none;
}
.tutorialWindow:hover .wrapper {
  background: linear-gradient(45deg, #524f4b 50%, #373533 100%);
}
.imageReactionSettings .select a {
  display: block;
  padding: 20px;
  text-align: center;
  width: 180px;
  color: #333333;
  font-family: 'Luckiest Guy', cursive;
  font-size: 130%;
  float: left;
  background: #ffffff;
  border-radius: 20px;
  margin: 20px;
  height: 180px;
}
.imageReactionSettings .select a img {
  width: 150px;
}
.imageReactionSettings .select a.inactive img {
  filter: grayscale(100%);
}
.imageReactionSettings .button {
  padding: 20px;
  text-align: center;
  margin-top: 40px;
}
.imageReactionSettings .button a {
  padding: 10px;
  color: #ffffff;
  border-radius: 20px;
  font-family: 'Luckiest Guy', cursive;
  font-size: 130%;
  background: linear-gradient(0deg, #ff9933 0%, #ffd237 100%);
  border: 3px solid #ffb134;
  box-shadow: 0 0 2px #ff7a17;
}
.genericBackendLayer {
  overflow-y: auto;
  min-height: 100vh;
  max-height: 100vh;
  margin-top: 0 !important;
  position: fixed !important;
}
a.roundButtonPink,
.roundButtonPink {
  color: #ffffff;
  background: #d8489e;
  background: linear-gradient(45deg, #fe559b 0%, #ff4c71 100%);
  border: 2px solid #df1632;
  border-radius: 20px;
  font-weight: 900;
  padding: 10px 15px;
}
#chatReferenceLayer {
  right: 0px;
  bottom: 0px;
  background: rgba(0, 0, 0, 0.65);
  width: 100%;
  padding-top: 10px;
  display: grid;
}
#chatReferenceLayer > .layerWrapper {
  padding-bottom: 100px;
  justify-self: center;
  align-self: center;
}
#chatReferenceLayer .container {
  max-width: 600px;
  background: #fff;
  min-width: 360px;
  border-radius: 10px;
  padding: 5px;
}
#chatReferenceLayer .head {
  display: flex;
  align-items: center;
  color: #484848;
  height: 3.5em;
  max-width: 100%;
  background: #fff;
}
#chatReferenceLayer .head .caption {
  flex-grow: 1;
  margin: .5em 1em;
  font-weight: 700;
  font-size: 1.3em;
  text-overflow: ellipsis;
}
#chatReferenceLayer .head button {
  border: 1px solid #c7c7c7;
  background: #d5d5d5;
  cursor: pointer;
  border-radius: 15px;
  color: #333333;
  display: inline-block;
  height: 2.5em;
  margin: .5em;
  line-height: 2em;
  text-align: center;
  font-weight: 300;
  padding: 2px 10px;
}
.iconButtonList {
  display: grid;
  width: calc(100% - 20px;);
  grid-gap: 3px;
  grid-template-columns: 100%;
  margin: 5px 10px;
}
.iconButtonList button {
  display: grid;
  grid-template-columns: 32px auto;
  grid-gap: 7px;
  align-items: center;
  padding: 7px 10px;
  transition: .3s;
  cursor: pointer;
}
.iconButtonList button[disabled] {
  opacity: .5;
  cursor: default;
}
.iconButtonList button img {
  width: 25px;
  height: 25px;
  justify-self: center;
}
.iconButtonList button span {
  justify-self: left;
}
.iconButtonList button[disabled]:hover {
  background: #fff;
}
.iconButtonList .gap {
  border-bottom: 2px solid #f1f1f1;
  margin-top: 7px;
  margin-bottom: 7px;
}
.layerOptionArea {
  display: grid;
  grid-template-columns: 100%;
  width: calc(100% - 30px);
  margin: 15px;
}
.layerOptionArea.withLabel {
  grid-template-columns: 100px auto;
}
.layerOptionArea.withLabel label {
  text-overflow: ellipsis;
  justify-self: left;
  align-self: start;
  padding: 7px;
  grid-column: 1 / span 1;
}
.layerOptionArea > div {
  padding: 10px;
  justify-self: stretch;
  align-self: stretch;
  background: #fff;
  min-height: 1em;
  line-height: 1.5;
}
.layerTextArea {
  display: grid;
  grid-template-columns: 100%;
  width: calc(100% - 30px);
  margin: 15px;
}
.layerTextArea.withLabel {
  grid-template-columns: 100px auto;
}
.layerTextArea.withLabel label {
  text-overflow: ellipsis;
  justify-self: left;
  align-self: start;
  padding: 7px;
  grid-column: 1 / span 1;
}
.layerTextArea textarea {
  border: 2px solid #f1f1f1;
  border-radius: 15px;
  padding: 10px;
  justify-self: stretch;
  align-self: stretch;
  background: #fff;
  min-height: 5em;
  line-height: 1.5;
  width: calc(100% - 20px);
}
.layerTextArea .features {
  display: none;
}
.layerActionArea {
  display: block;
  text-align: right;
  margin: 10px 5px;
}
.layerActionArea button {
  border: 1px solid #c7c7c7;
  background: #d5d5d5;
  cursor: pointer;
  border-radius: 15px;
  color: #333333;
  display: inline-block;
  height: 3em;
  margin: .5em;
  line-height: 2em;
  text-align: center;
  padding: 5px 15px;
  font-weight: bold;
}
.layerActionArea button.primary {
  background: #1e87f0;
  color: #fff;
}
.layerActionArea button.secondary {
  background: #333;
  color: #fff;
}
.buttonGeneral {
  display: inline-block;
}
.buttonGeneral img {
  height: 1.3em;
}
.buttonPink {
  color: #ffffff;
  cursor: pointer;
  background: #d8489e;
  background: linear-gradient(45deg, #fe559b 0%, #ff4c71 100%);
  border: 2px solid #df1632;
  border-radius: 20px;
  font-weight: 900;
  padding: 10px 15px;
  margin-bottom: 5px;
}
.buttonPink:hover {
  transition: 0.5s;
  opacity: 0.8;
  animation: intoFocusLight 0.5s forwards;
}
.buttonYellow,
a.buttonYellow {
  color: #333333;
  cursor: pointer;
  background: #ff9933;
  background: linear-gradient(45deg, #ffc51b 0%, #fee540 100%);
  border: 2px solid #eec324;
  border-radius: 20px;
  font-weight: 900;
  padding: 10px 15px;
  margin-bottom: 5px;
}
.buttonYellow:hover {
  transition: 0.5s;
  opacity: 0.8;
  animation: intoFocusLight 0.5s forwards;
}
.buttonBlue,
a.buttonBlue {
  color: #333333;
  cursor: pointer;
  background: #00FFBF;
  background: linear-gradient(145deg, #c0ffff 0, #6bffd6 100%);
  border: 2px solid #0c4c41;
  border-radius: 20px;
  font-weight: 900;
  padding: 10px 15px;
  margin-bottom: 5px;
}
.buttonBlue:hover {
  transition: 0.5s;
  opacity: 0.8;
  animation: intoFocusLight 0.5s forwards;
}
.buttonWhite {
  color: #333333;
  cursor: pointer;
  background: #999999;
  background: linear-gradient(45deg, #ffffff 0%, #f9f9f9 100%);
  border: 2px solid #e1e1e1;
  border-radius: 20px;
  font-weight: 900;
  padding: 10px 15px;
  margin-bottom: 5px;
}
.buttonWhite:hover {
  transition: 0.5s;
  opacity: 0.8;
  animation: intoFocusLight 0.5s forwards;
}
.effectIconList {
  display: flex;
  gap: 7px;
  padding: 7px;
  margin: 7px;
  flex-direction: row;
}
.effectIconList .expander {
  flex-grow: 1;
}
.effectIconList .info {
  padding: 5px 15px;
  background: #ffd237;
  border-radius: 15px;
  font-size: 110%;
  font-weight: 300;
}
.effectIconList img {
  max-height: 25px;
}
.logGrid {
  background: #ffffff;
  border-radius: 20px;
}
.logGrid .row {
  display: grid;
  grid-template-columns: 70% 12% 12%;
  grid-gap: 10px;
  line-height: 120%;
}
.logGrid .row:hover {
  background: #ffda69;
}
.logGrid .row .first {
  padding: 10px;
  padding-left: 20px;
}
.logGrid .row .first .title {
  font-size: 140%;
  font-weight: 300;
  padding-top: 10px;
}
.logGrid .row .first .title img {
  width: 30px;
  margin-right: 5px;
}
.logGrid .row .first .timestamp {
  font-size: 85%;
}
.logGrid .row .number {
  font-size: 120%;
  font-weight: 300;
  text-align: right;
  padding-top: 15px;
}
.logGrid .row .number img {
  height: 1.5em;
}
.settingsProfileImageUpload .actionArea {
  padding: 10px 0;
  font-size: 110%;
  display: flex;
  margin: 13px 0;
}
.settingsProfileImageUpload .actionArea .spacer {
  flex-grow: 1;
}
.settingsProfileImageUpload .actionArea .bubble {
  background: #fff;
  color: #333;
  padding: 13px;
  display: inline-block;
  border-radius: 13px;
}
.settingsProfileImageUpload .actionArea .button {
  cursor: pointer;
  text-align: center;
  display: inline-block;
  font-size: 90%;
  padding: 10px 15px;
  margin: 0 3px 3px 0;
  border-radius: 3px;
}
.settingsProfileImageUpload .actionArea .button.blue {
  color: #fff;
  background: #3ca2fe;
  border: 1px solid #3ca2fe;
}
.settingsProfileImageUpload #profileImageUploadContentArea {
  border-radius: 13px;
  background: #fff;
  padding: 13px 13px 30px 13px;
  margin: 0 0 20px;
}
.settingsProfileImageUpload .fileSelection .headline {
  font-size: 150%;
  font-weight: 300;
  color: #555555;
  text-align: center;
}
.settingsProfileImageUpload .prepareImage {
  animation: prepareImage 1.0s infinite;
  width: 100px;
  margin: auto;
}
.settingsProfileImageUpload .imageUploadStatus {
  padding: 0 20px;
  text-align: center;
  color: #999;
  font-weight: bold;
}
.settingsProfileImageUpload .imageUploadStatus .info {
  font-weight: 300;
  color: #999999;
  margin-top: 20px;
}
.settingsProfileImageUpload .removeImage {
  text-align: center;
  color: #999;
  padding: 10px;
  background: #e5e5e5;
  margin-top: 10px;
  width: 340px;
  cursor: pointer;
  border-radius: 10px;
}
.settingsProfileImageUpload .imageUploadStatus .headline {
  font-weight: 300;
  padding: 20px;
  font-size: 150%;
}
.settingsProfileImageUpload .nonMobile {
  display: none;
}
.settingsProfileImageUpload button {
  background: #f0f0f0;
  border: 1px solid #aaa;
  padding: 13px;
  border-radius: 7px;
  cursor: pointer;
  margin: 13px 5px;
  color: #888;
  display: inline-block;
}
.settingsProfileImageUpload button:hover {
  background: #f8f8f8;
  color: #000;
}
.settingsProfileImageUpload button[type="submit"] {
  border-color: #ffa124;
  color: #fff;
  background: #ffa124;
}
.settingsProfileImageUpload button[type="submit"]:disabled {
  border-color: #999;
  color: #999;
  background: #e5e5e5;
  cursor: default;
  opacity: .5;
}
.settingsProfileImageUpload .cameraButton {
  background: #f0f0f0;
  border: 1px solid #aaa;
  padding: 8px;
  border-radius: 7px;
  cursor: pointer;
  margin: 13px 5px;
  color: #aaa;
  display: inline-block;
}
.settingsProfileImageUpload .cameraButton:hover {
  background: #f8f8f8;
}
.settingsProfileImageUpload .media .actionArea {
  display: flex;
  justify-items: center;
  align-items: center;
  justify-content: center;
}
.settingsProfileImageUpload .media .actionArea button {
  background: #f0f0f0;
  border: 1px solid #aaa;
  padding: 13px;
  border-radius: 7px;
  cursor: pointer;
  margin: 13px 5px;
  color: #aaa;
  display: inline-block;
}
.settingsProfileImageUpload .media .actionArea button:hover {
  background: #f8f8f8;
  color: #000;
}
.settingsProfileImageUpload .media .actionArea button.primary {
  border: 1px solid #ffa124;
  color: #fff;
  background: #ffa124;
  cursor: pointer;
}
.settingsProfileImageUpload .media .actionArea button.primary:hover {
  background: #ffb134;
}
.settingsProfileImageUpload .media video {
  width: 100%;
  height: auto;
}
.settingsProfileImageUpload .profileImageRules {
  border-radius: 15px;
  padding: 15px;
  background: #f0f0f0;
  margin-bottom: 20px;
}
.settingsProfileImageUpload .profileImageRules ul {
  line-height: 1.3;
}
.profileImageSettings {
  text-align: center;
}
.profileImageSettings .profileImage {
  border-radius: 13px;
}
.profileImageSettings .caption {
  font-size: 140%;
  line-height: 1.5;
  color: #666;
  margin: 20px 0 10px 0;
}
.profileImageSettings .actionArea {
  display: flex;
  flex-direction: row;
  padding: 9px 13px;
  gap: 13px;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
}
.profileImageSettings .actionArea button {
  background: #f0f0f0;
  border: 1px solid #aaa;
  padding: 13px;
  border-radius: 7px;
  cursor: pointer;
  margin: 13px 5px;
  color: #aaa;
  display: inline-block;
}
.profileImageSettings .actionArea button:hover {
  background: #f8f8f8;
  color: #000;
  opacity: 1;
}
.profileImageSettings .actionArea button.primary {
  border: 1px solid #ffa124;
  color: #fff;
  background: #ffa124;
  cursor: pointer;
}
.profileImageSettings .actionArea button.primary:hover {
  background: #ffb134;
}
.profileImageSettings .actionArea .spacer {
  flex-grow: 1;
}
.settingsProfileImageList {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20px;
}
.settingsProfileImageList .emptyState {
  grid-column: 1 / span 3;
}
.settingsProfileImageList .image {
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 10px #cacaca;
  border-bottom: 4px solid #cacaca;
  border-radius: 3px;
  overflow: hidden;
}
.settingsProfileImageList .image.default {
  border-bottom-color: #ff9510;
}
.settingsProfileImageList .image.inactive {
  border-bottom-color: #e03b2a;
  opacity: .4;
}
.settingsProfileImageList .image .actionArea {
  display: flex;
  flex-direction: row;
  background: #fff;
  padding: 9px 13px;
  gap: 13px;
  flex-wrap: nowrap;
  align-items: center;
}
.settingsProfileImageList .image .actionArea .action {
  display: inline-block;
  max-width: 15%;
  opacity: .7;
  transition: .2s;
}
.settingsProfileImageList .image .actionArea .action:hover {
  opacity: 1;
}
.settingsProfileImageList .image .actionArea .action:active img {
  filter: sepia(100%) saturate(300%) hue-rotate(180deg);
}
.settingsProfileImageList .image .actionArea .action:focus img {
  filter: sepia(100%) saturate(100%) hue-rotate(180deg);
}
.settingsProfileImageList .image .actionArea .spacer {
  flex-grow: 1;
}
.profileImageQuickNavigation {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 7px;
  justify-items: center;
  align-items: center;
  padding: 13px;
}
.profileImageQuickNavigation .profileImageQuickNavigationEntry {
  border-radius: 50% 50%;
  border: 4px solid #fff;
}
.profileImageQuickNavigation .profileImageQuickNavigationEntry.active {
  border-color: #ff9510;
}
#profileImageLayer {
  width: 100vw;
  display: flex;
  align-content: center;
  justify-content: center;
  background: rgba(33, 33, 33, 0.7);
  align-items: center;
}
#profileImageLayer .profileImageLayerContainer {
  background: #fff;
  padding: 13px;
  margin: 20px;
  border-radius: 13px;
  overflow-y: auto;
  text-align: center;
}
#profileImageLayer .profileImage {
  max-height: 60vh;
}
div.serviceInformation {
  display: block;
  margin: 7px 7px 13px 7px;
  padding: 9px;
  border-radius: 7px;
  background: #e03b2a;
  border: 2px solid #e03b2a;
  color: #eee;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.4;
  text-align: left;
  max-width: 658px;
}
div.serviceInformation a,
.serviceInformation a:hover,
.serviceInformation a:active,
.serviceInformation a:focus {
  color: #fff;
  text-decoration: underline;
  font-weight: 900;
}
@media screen and (max-width: 490px) {
  .logGrid {
    border-radius: 0;
    width: 100%;
  }
  .logGrid .row .first {
    grid-column-end: span 3;
  }
  .logGrid .row .two {
    grid-row-start: 2;
    grid-column: 2;
  }
  .logGrid .row .three {
    grid-row-start: 2;
    grid-column: 3;
  }
  .logGrid .row .three img {
    margin-right: 10px;
  }
  .logGrid .row {
    grid-template-columns: auto;
    grid-gap: 0;
  }
  .logGrid .row .number {
    padding-top: 0;
    padding-bottom: 10px;
  }
}
.loginInfo {
  padding: 0 30px;
  text-align: left;
  line-height: 160%;
  font-size: 100%;
  font-weight: 300;
  text-align: center;
  color: #ffffff;
  padding-bottom: 20px;
  font-family: 'Source Sans Pro', sans-serif;
  position: relative;
}
.loginInfo .info {
  margin-bottom: 10px;
}
.loginInfo a.login {
  display: block;
  text-transform: uppercase;
  font-weight: 600;
  background: #ffa225;
  color: #ffffff;
  padding: 10px 15px;
  border-radius: 3px;
}
.loginInfo a:hover.login {
  text-decoration: underline;
  background: #ffb551;
}
.loginInfo .wrapper {
  padding: 5px;
  background: linear-gradient(137deg, #f7ab2c, #f3d240, #9cf5ff);
  max-width: 320px;
  border-radius: 20px;
  margin: auto;
  animation: brandingColor 5s ease infinite;
}
.layerLogin {
  animation: showLogin 0.2s;
  background: #ffffff;
  padding: 30px;
  border-radius: 20px;
  border: 1px solid #5f5f5f;
}
.loginForm {
  padding-top: 0;
  max-width: 320px;
  margin: auto;
  background: #212626;
  background: linear-gradient(137deg, #363e3e, #212626);
  border-radius: 20px;
  padding-top: 20px;
  padding-bottom: 10px;
}
.loginForm .title {
  padding: 10px;
  font-size: 150%;
  color: #ffffff;
  font-weight: 800;
}
.loginForm .input {
  background: #ffffff;
  border-radius: 20px;
  font-size: 16px;
  font-weight: 600;
  text-indent: 10px;
  padding: 15px 15px;
  margin-bottom: 10px;
  border: 2px solid #000000;
  width: 240px;
}
.loginForm .input:focus,
.loginForm .input:hover {
  border: 2px solid #3efff6;
  transition: 0.3s;
}
.loginForm fieldset {
  border: none;
  margin: 5px 0 25px 0;
  padding: 0;
  line-height: 120%;
  color: #ffffff;
}
.loginForm .new {
  padding: 10px;
  color: #ffffff;
}
.loginForm .new a {
  font-weight: 600;
  color: #a5f7ff;
}
.loginForm .button,
.requestPassword .button {
  padding: 12px 15px;
  text-align: left;
  width: 270px;
  margin-top: 10px;
  text-align: center;
  background: #ffa225;
  background: linear-gradient(145deg, #c0ffff 0, #6bffd6 100%);
  border: 2px solid #64f3db;
  color: #000000;
  border-radius: 20px;
  font-weight: 800;
  font-size: 16px;
  cursor: pointer;
}
.loginForm .button:hover,
.requestPassword .button:hover {
  box-shadow: 0 5px 15px #fcaf3b;
}
.loginForm .subline {
  padding: 2px 10px;
  text-align: right;
  margin-bottom: 5px;
  font-size: 90%;
}
.loginForm .autologin {
  padding: 2px 10px;
  text-align: left;
  margin-bottom: 5px;
  font-size: 100%;
  text-indent: 20px;
}
.loginForm a.useful {
  display: block;
  font-weight: 600;
  color: #ffffff;
  padding: 10px 15px;
  padding-right: 0;
  text-align: left;
  text-indent: 20px;
  font-size: 110%;
}
.loginForm a:hover.useful {
  text-decoration: underline;
}
.requestPassword {
  text-align: center;
  font-family: 'Source Sans Pro', sans-serif;
  margin-top: 10px;
}
.requestPassword .legend {
  padding: 10px 20px;
  text-align: left;
  font-weight: 800;
  font-size: 140%;
  line-height: 140%;
  padding-bottom: 5px;
}
.requestPassword .info {
  font-size: 13px;
  padding: 10px 20px;
  line-height: 16px;
  text-align: left;
  margin-bottom: 10px;
}
.requestPassword form {
  width: 320px;
  margin: auto;
  text-align: center;
  background: linear-gradient(137deg, #363e3e 0, #212626 100%);
  border-radius: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #ffffff;
}
.requestPassword .wrapper {
  padding: 5px;
  background: linear-gradient(137deg, #f7e150 0, #9cf5ff 100%);
  max-width: 320px;
  border-radius: 20px;
  margin: auto;
}
.requestPassword .input {
  background: #ffffff !important;
  border-radius: 15px;
  font-size: 100%;
  padding: 12px 15px;
  text-indent: 5px;
  margin-bottom: 10px;
  border: 1px solid #c8c8c8;
  width: 240px;
}
.header a.registration {
  color: #f6feff;
  display: block;
  float: right;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 600;
  padding: 9px 20px;
  background: #101010;
  border: 1px solid #000000;
  border-radius: 15px;
  font-size: 130%;
  margin-top: 7px;
  margin-right: 10px;
}
.header a:hover.registration {
  animation: intoFocusLight 0.6s forwards;
  transition: 0.8s;
}
.header a.loginLink {
  color: #064031;
  display: block;
  float: right;
  font-family: 'Source Sans Pro', sans-serif;
  background: linear-gradient(145deg, #c0ffff 0, #6bffd6 100%);
  letter-spacing: -1px;
  border: 1px solid #0c4c41;
  font-weight: 600;
  padding: 9px 20px;
  border-radius: 15px;
  font-size: 130%;
  margin-top: 7px;
  margin-right: 10px;
}
.header a:hover.loginLink {
  animation: intoFocusLight 0.6s forwards;
  transition: 0.8s;
}
.registrationSite {
  text-align: center;
}
.registrationSite .wrapper {
  margin: 0 auto;
  width: 700px;
  padding-top: 20px;
}
.registrationSite .form {
  width: 350px;
  margin: auto;
  text-align: left;
}
.registrationSite .button {
  padding-top: 10px;
}
.registrationForm {
  font-family: 'Source Sans Pro', sans-serif;
}
.registrationForm .input {
  background: #ffffff !important;
  border-radius: 15px;
  font-size: 120%;
  padding: 10px 10px;
  border: 1px solid #c4c4c4 !important;
  width: 270px;
  text-indent: 5px;
}
.registrationForm .input:focus {
  border: 1px solid #417bc4;
}
.registrationForm fieldset {
  border: none;
  margin: 15px 0 25px 0;
  padding: 0;
  width: 100%;
  line-height: 120%;
}
.registrationForm .legends {
  padding: 10px;
  text-align: left;
  font-weight: 800;
  font-size: 160%;
  line-height: 140%;
}
.registrationForm .line {
  padding: 3px 0 5px 5px;
}
.registrationForm .line .title {
  padding: 5px;
  color: #8d8d8d;
  font-weight: 400;
}
.registrationForm .termsOfUse {
  padding: 3px;
  margin-top: 5px;
  width: 240px;
  line-height: 130%;
}
.registrationForm .termsOfUse:hover {
  background: #ffda1f;
}
.registrationForm .lawText {
  font-size: 100%;
  font-weight: 400;
  color: #767676;
  text-align: center;
  padding: 10px;
  width: 300px;
  line-height: 140%;
}
.registrationForm .send .button {
  padding: 12px 15px;
  font-family: 'Source Sans Pro', sans-serif;
  width: 290px;
  background: #ffa225;
  background: linear-gradient(139deg, #f7e150 0, #f7b92c 100%);
  border: 2px solid #f7c133;
  font-weight: 800;
  color: #332506;
  border-radius: 20px;
  margin-left: 10px;
  font-size: 140%;
  cursor: pointer;
}
.registrationInfo {
  max-width: 100%;
  min-width: 90%;
  background: #ffffff;
  margin-bottom: 30px;
  border: 1px solid #d7d7d7;
  border-radius: 10px;
  margin-top: 5px;
  margin-bottom: 10px;
  padding: 20px 40px;
}
/* Einladung / Registrierung 2024 */
.inviteRegistrationSite {
  display: flex;
  flex-direction: column;
  padding: 7px;
  line-height: 1.3;
  align-content: center;
  align-items: center;
}
.inviteRegistrationAssistant {
  display: flex;
  flex-direction: column;
  gap: 7px;
  height: calc(100vh - 70px);
  max-width: 480px;
  width: 100%;
  background: #fff;
  max-height: 720px;
}
.inviteRegistrationAssistant > .pagerHeader {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-content: center;
  padding: 11px;
  font-size: 1.5em;
  font-weight: 900;
  color: #555;
  background: #f0f0f0;
}
.inviteRegistrationAssistant > .pagerContent {
  flex-grow: 1;
  padding: 7px;
  overflow: hidden;
  max-height: calc(100vh - 70px - 40px - 60px);
  box-sizing: border-box;
}
.inviteRegistrationAssistant > .pagerContent > .pager {
  position: relative;
  width: auto;
  height: 100%;
}
.inviteRegistrationAssistant > .pagerContent > .pager > .page {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  position: absolute;
  transition: .3s;
  transition-timing-function: ease;
  top: 0;
  left: 0;
  max-width: min(calc(100vw - 28px), calc(480px - 28px));
  width: min(calc(100vw - 28px), calc(480px - 28px));
  box-sizing: border-box;
  height: 100%;
  overflow-y: auto;
  opacity: 1.0;
}
.inviteRegistrationAssistant > .pagerContent > .pager > .page.previous {
  left: -480px;
  opacity: 0.0;
}
.inviteRegistrationAssistant > .pagerContent > .pager > .page.upcoming {
  left: 480px;
  opacity: 0.0;
}
.inviteRegistrationAssistant > .pagerContent > .pager > .page > .pageCaption {
  display: none;
}
.inviteRegistrationAssistant > .pagerContent > .pager > .page > *:last-child {
  margin-top: 17px;
}
.inviteRegistrationAssistant > .pagerContent > .pager > .page p {
  padding: 0 13px 11px 13px;
  line-height: 1.5;
  font-size: 1.2em;
}
.inviteRegistrationAssistant > .pagerContent > .pager > .page p .username {
  font-weight: 900;
}
.inviteRegistrationAssistant > .pagerContent .invitationForm {
  display: grid;
  grid-gap: 3px 7px;
  margin-top: 13px;
}
.inviteRegistrationAssistant > .pagerContent .invitationForm label {
  padding: 3px 13px;
  font-weight: bold;
  font-size: 0.9em;
  color: #777;
  line-height: 1.7;
}
.inviteRegistrationAssistant > .pagerContent .invitationForm input[type="text"],
.inviteRegistrationAssistant > .pagerContent .invitationForm input[type="email"],
.inviteRegistrationAssistant > .pagerContent .invitationForm input[type="password"],
.inviteRegistrationAssistant > .pagerContent .invitationForm input[type="number"],
.inviteRegistrationAssistant > .pagerContent .invitationForm select {
  padding: 7px 13px;
  font-size: 1.3em;
  border: 1px solid #a0a0a0;
  background: #fff;
  border-radius: 7px;
  box-sizing: border-box;
  width: 100%;
  line-height: 1.7;
}
.inviteRegistrationAssistant > .pagerContent .invitationFormInput {
  grid-template-rows: auto auto auto;
  grid-template-columns: 1fr;
}
.inviteRegistrationAssistant > .pagerContent .invitationFormInput label {
  grid-row: 1 / span 1;
  grid-column: 1 / span 1;
}
.inviteRegistrationAssistant > .pagerContent .invitationFormInput input {
  grid-row: 2 / span 1;
  grid-column: 1 / span 1;
}
.inviteRegistrationAssistant > .pagerContent .invitationFormInput .hintList {
  grid-row: 3 / span 1;
  grid-column: 1 / span 1;
}
.inviteRegistrationAssistant > .pagerContent .invitationFormOptionList {
  grid-row: 2 / span 1;
  grid-column: 1 / span 3;
  display: flex;
  justify-content: center;
  flex-direction: row;
}
.inviteRegistrationAssistant > .pagerContent .invitationFormOptionList .optionList {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  border: 2px solid #a0a0a0;
  background: #f0f0f0;
  border-radius: 7px;
  box-sizing: border-box;
  justify-content: center;
  align-content: flex-start;
  align-items: flex-start;
  gap: 1px;
  overflow: hidden;
}
.inviteRegistrationAssistant > .pagerContent .invitationFormOptionList .optionList .optionEntry {
  display: grid;
  grid-template-columns: 64px;
  grid-template-rows: auto 64px auto;
  align-content: center;
  justify-content: center;
  align-items: center;
  justify-items: center;
  cursor: pointer;
  grid-gap: 7px;
  padding: 7px;
  color: #555;
  font-weight: bold;
  box-sizing: border-box;
}
.inviteRegistrationAssistant > .pagerContent .invitationFormOptionList .optionList .optionEntry img {
  width: 40px;
  height: 40px;
  grid-column: 1 / span 1;
  grid-row: 2 / span 1;
}
.inviteRegistrationAssistant > .pagerContent .invitationFormOptionList .optionList .optionEntry.selected {
  background: linear-gradient(45deg, #ff9a33 0%, #ffc636 100%);
  color: #fff;
}
.inviteRegistrationAssistant > .pagerContent .invitationFormOptionList .optionList .optionEntry label.optionLabel {
  text-align: center;
  font-size: 0.8em;
  grid-column: 1 / span 1;
  grid-row: 3 / span 1;
}
.inviteRegistrationAssistant > .pagerContent .invitationFormDate {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
}
.inviteRegistrationAssistant > .pagerContent .invitationFormDate #labelBirthday {
  grid-column: 1 / span 1;
  grid-row: 1 / span 1;
}
.inviteRegistrationAssistant > .pagerContent .invitationFormDate #inputBirthday {
  grid-column: 1 / span 1;
  grid-row: 2 / span 1;
}
.inviteRegistrationAssistant > .pagerContent .invitationFormDate #labelBirthmonth {
  grid-column: 2 / span 1;
  grid-row: 1 / span 1;
}
.inviteRegistrationAssistant > .pagerContent .invitationFormDate #inputBirthmonth {
  grid-column: 2 / span 1;
  grid-row: 2 / span 1;
}
.inviteRegistrationAssistant > .pagerContent .invitationFormDate #labelBirthyear {
  grid-column: 3 / span 1;
  grid-row: 1 / span 1;
}
.inviteRegistrationAssistant > .pagerContent .invitationFormDate #inputBirthyear {
  grid-column: 3 / span 1;
  grid-row: 2 / span 1;
}
.inviteRegistrationAssistant > .pagerContent .invitationFormDate .hintList {
  grid-column: 1 / span 3;
  grid-row: 3 / span 1;
}
.inviteRegistrationAssistant > .pagerContent .invitationFormCheckbox {
  grid-template-columns: auto 1fr;
  grid-template-rows: auto;
  align-content: center;
  justify-content: start;
  align-items: center;
  justify-items: start;
}
.inviteRegistrationAssistant > .pagerContent .invitationFormCheckbox input[type="checkbox"] {
  grid-column: 1 / span 1;
  grid-row: 1 / span 1;
}
.inviteRegistrationAssistant > .pagerContent .invitationFormCheckbox label {
  grid-column: 2 / span 1;
  grid-row: 1 / span 1;
  padding-left: 0;
}
.inviteRegistrationAssistant > .pagerContent .hintList {
  display: flex;
  flex-direction: column;
  padding: 7px;
  gap: 11px;
  margin: 17px 0 7px 0;
}
.inviteRegistrationAssistant > .pagerContent .hintList .hintEntry {
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: 32px auto;
  grid-gap: 5px;
  transition: .7s;
  align-items: start;
  justify-items: start;
  align-content: start;
  justify-content: start;
}
.inviteRegistrationAssistant > .pagerContent .hintList .hintEntry .hintIcon {
  grid-row: 1 / span 2;
  grid-column: 1 / span 1;
}
.inviteRegistrationAssistant > .pagerContent .hintList .hintEntry .hintIcon img {
  max-width: 24px;
}
.inviteRegistrationAssistant > .pagerContent .hintList .hintEntry .hintCaption {
  grid-row: 1 / span 1;
  grid-column: 2 / span 1;
  font-weight: bold;
}
.inviteRegistrationAssistant > .pagerContent .hintList .hintEntry .hintDescription {
  grid-row: 2 / span 1;
  grid-column: 2 / span 1;
}
.inviteRegistrationAssistant > .pagerContent .hintList .hintEntry.hintUnknown {
  color: #555;
  opacity: 0;
  display: none;
}
.inviteRegistrationAssistant > .pagerContent .hintList .hintEntry.hintUnknown .hintCheck {
  display: none;
}
.inviteRegistrationAssistant > .pagerContent .hintList .hintEntry.hintUnknown .hintTimes {
  display: none;
}
.inviteRegistrationAssistant > .pagerContent .hintList .hintEntry.hintSuccess {
  color: #84b000;
  opacity: 0;
  display: none;
}
.inviteRegistrationAssistant > .pagerContent .hintList .hintEntry.hintSuccess .hintCheck {
  display: inline;
}
.inviteRegistrationAssistant > .pagerContent .hintList .hintEntry.hintSuccess .hintTimes {
  display: none;
}
.inviteRegistrationAssistant > .pagerContent .hintList .hintEntry.hintFail {
  color: #ca4b36;
}
.inviteRegistrationAssistant > .pagerContent .hintList .hintEntry.hintFail .hintCheck {
  display: none;
}
.inviteRegistrationAssistant > .pagerContent .hintList .hintEntry.hintFail .hintTimes {
  display: inline;
}
.inviteRegistrationAssistant > .pagerContent #pageRegistration {
  align-content: center;
  align-items: center;
}
.inviteRegistrationAssistant > .pagerContent #pageRegistration p {
  text-align: center;
}
.inviteRegistrationAssistant > .pagerContent #pageRegistration img {
  width: 140px;
  height: 140px;
  margin: 40px 0;
}
.inviteRegistrationAssistant > .pagerContent .terms {
  max-height: 240px;
  flex-grow: 1;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #a0a0a0;
  border-radius: 7px;
  grid-row: 2 / span 1;
  grid-column: 1 / span 3;
  font-size: 0.9em;
}
.inviteRegistrationAssistant > .pagerContent .terms .hlG1 {
  padding: 7px !important;
}
.inviteRegistrationAssistant > .pagerContent .terms #infoSection {
  margin: 0 !important;
}
.inviteRegistrationAssistant > .pagerContent .terms .infosTerms {
  padding: 0 7px 0 7px;
  font-size: 1.2em;
}
.inviteRegistrationAssistant > .pagerFooter {
  display: flex;
  flex-direction: row;
  padding: 7px;
  align-items: stretch;
  align-content: center;
  justify-content: space-around;
  height: 96px;
}
.inviteRegistrationAssistant > .pagerFooter > .pagerNavigationButton {
  display: flex;
  flex-direction: column;
  width: 80px;
  padding: 7px;
  box-sizing: border-box;
  border: 2px solid;
  border-radius: 7px;
  justify-items: center;
  align-items: center;
  justify-content: center;
  align-content: center;
  gap: 13px;
  font-size: 1.2em;
  font-weight: 900;
  cursor: pointer;
  height: 96px;
  transition: .7s;
  overflow: hidden;
}
.inviteRegistrationAssistant > .pagerFooter > .pagerNavigationButton.pagerNavigationPrev {
  background: #999999;
  background: linear-gradient(45deg, #999999 0%, #c5c5c5 100%);
  color: #ffffff;
  border-color: #898989;
}
.inviteRegistrationAssistant > .pagerFooter > .pagerNavigationButton.pagerNavigationPrev[disabled] {
  opacity: 0 !important;
}
.inviteRegistrationAssistant > .pagerFooter > .pagerNavigationButton.pagerNavigationPrev:hover {
  background: #cccccc;
  background: linear-gradient(45deg, #cccccc 0%, #f7f7f7 100%);
}
.inviteRegistrationAssistant > .pagerFooter > .pagerNavigationButton.pagerNavigationPrev:active {
  background: #808080;
  background: linear-gradient(45deg, #808080 0%, #a8a8a8 100%);
}
.inviteRegistrationAssistant > .pagerFooter > .pagerNavigationButton.pagerNavigationNext {
  background: #00b8ff;
  background: linear-gradient(30deg, #73d9ff 0, #01b8ff 100%);
  color: #ffffff;
  border-color: #47c6f8;
}
.inviteRegistrationAssistant > .pagerFooter > .pagerNavigationButton.pagerNavigationNext:hover {
  background: #33c9ff;
  background: linear-gradient(30deg, #33c9ff 0, #36c9ff 100%);
}
.inviteRegistrationAssistant > .pagerFooter > .pagerNavigationButton.pagerNavigationNext:active {
  background: #0083b3;
  background: linear-gradient(30deg, #0083b3 0, #0283b3 100%);
}
.inviteRegistrationAssistant > .pagerFooter > .pagerNavigationButton.pagerNavigationSubmit {
  background: #cdff69;
  background: linear-gradient(45deg, #cdff69 0%, #befc42 100%);
  color: #96c223;
  border-color: #abed26;
}
.inviteRegistrationAssistant > .pagerFooter > .pagerNavigationButton.pagerNavigationSubmit:hover {
  background: #d8ff85;
  background: linear-gradient(45deg, #d8ff85 0%, #c8fa5c 100%);
}
.inviteRegistrationAssistant > .pagerFooter > .pagerNavigationButton.pagerNavigationSubmit:active {
  background: #98b35f;
  background: linear-gradient(45deg, #98b35f 0%, #8dad40 100%);
}
.inviteRegistrationAssistant > .pagerFooter > .pagerNavigationButton[disabled] {
  opacity: 0.5;
  cursor: default;
}
.inviteRegistrationAssistant > .pagerFooter > .pagerNavigationButton > img {
  width: 32px;
  height: 32px;
}
.inviteRegistrationAssistant > .pagerFooter > .pagerNavigationButtonList {
  display: flex;
  flex-direction: row;
  list-style: none;
  margin: 0;
  padding: 7px;
  flex-grow: 1;
  justify-content: center;
  align-content: center;
  justify-items: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 11px 3px;
}
.inviteRegistrationAssistant > .pagerFooter > .pagerNavigationButtonList > li {
  margin: 0;
  padding: 0;
}
.inviteRegistrationAssistant > .pagerFooter > .pagerNavigationButtonList > li > .pagerNavigationButton {
  display: inline-block;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  background: none;
  border: 0;
  cursor: pointer;
  transition: .5s;
}
.inviteRegistrationAssistant > .pagerFooter > .pagerNavigationButtonList > li > .pagerNavigationButton[disabled] {
  opacity: 0.5;
  cursor: default;
}
.inviteRegistrationAssistant > .pagerFooter > .pagerNavigationButtonList > li > .pagerNavigationButton > img {
  width: 16px;
  height: 16px;
}
.inviteRegistrationTemplateSection {
  display: none;
}
.about {
  padding: 10px;
  font-size: 12px;
  color: #878787;
  line-height: 20px;
  margin-top: 20px;
}
.about a {
  margin: 5px;
  color: #999999;
  font-weight: 300;
}
.about a:hover {
  text-decoration: underline;
  color: #000000;
}
.guest .helpState {
  width: auto;
}
.guest .siteRight {
  width: 100% !important;
}
.guest .site {
  width: 100% !important;
}
.logoutAd {
  text-align: center;
}
@media screen and (max-width: 600px) {
  .loginInfo {
    padding: 0 5px;
  }
}
@font-face {
  font-family: 'Luckiest Guy';
  font-style: normal;
  font-weight: 400;
  src: local('Luckiest Guy'), url('/font/1/LuckiestGuy-Regular.ttf') format('truetype'), url('/font/1/LuckiestGuy-Regular.woff') format('woff'), url('/font/1/LuckiestGuy-Regular.woff2') format('woff2'), url('/font/1/LuckiestGuy-Regular.otf') format('opentype');
}
/* Roboto */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto'), url('/font/1/Roboto-Light.ttf') format('truetype'), url('/font/1/Roboto-Light.woff') format('woff'), url('/font/1/Roboto-Light.woff2') format('woff2'), url('/font/1/Roboto-Light.otf') format('opentype');
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  src: local('Roboto'), url('/font/1/Roboto-LightItalic.ttf') format('truetype'), url('/font/1/Roboto-LightItalic.woff') format('woff'), url('/font/1/Roboto-LightItalic.woff2') format('woff2'), url('/font/1/Roboto-LightItalic.otf') format('opentype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), url('/font/1/Roboto-Regular.ttf') format('truetype'), url('/font/1/Roboto-Regular.woff') format('woff'), url('/font/1/Roboto-Regular.woff2') format('woff2'), url('/font/1/Roboto-Regular.otf') format('opentype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto'), url('/font/1/Roboto-Medium.ttf') format('truetype'), url('/font/1/Roboto-Medium.woff') format('woff'), url('/font/1/Roboto-Medium.woff2') format('woff2'), url('/font/1/Roboto-Medium.otf') format('opentype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  src: local('Roboto'), url('/font/1/Roboto-MediumItalic.ttf') format('truetype'), url('/font/1/Roboto-MediumItalic.woff') format('woff'), url('/font/1/Roboto-MediumItalic.woff2') format('woff2'), url('/font/1/Roboto-MediumItalic.otf') format('opentype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto'), url('/font/1/Roboto-Bold.ttf') format('truetype'), url('/font/1/Roboto-Bold.woff') format('woff'), url('/font/1/Roboto-Bold.woff2') format('woff2'), url('/font/1/Roboto-Bold.otf') format('opentype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: local('Roboto'), url('/font/1/Roboto-BoldItalic.ttf') format('truetype'), url('/font/1/Roboto-BoldItalic.woff') format('woff'), url('/font/1/Roboto-BoldItalic.woff2') format('woff2'), url('/font/1/Roboto-BoldItalic.otf') format('opentype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  src: local('Roboto'), url('/font/1/Roboto-Black.ttf') format('truetype'), url('/font/1/Roboto-Black.woff') format('woff'), url('/font/1/Roboto-Black.woff2') format('woff2'), url('/font/1/Roboto-Black.otf') format('opentype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 900;
  src: local('Roboto'), url('/font/1/Roboto-BlackItalic.ttf') format('truetype'), url('/font/1/Roboto-BlackItalic.woff') format('woff'), url('/font/1/Roboto-BlackItalic.woff2') format('woff2'), url('/font/1/Roboto-BlackItalic.otf') format('opentype');
}
/* Source Sans Pro */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 200;
  src: local('Source Sans Pro'), url('/font/1/SourceSansPro-ExtraLight.ttf') format('truetype'), url('/font/1/SourceSansPro-ExtraLight.woff') format('woff'), url('/font/1/SourceSansPro-ExtraLight.woff2') format('woff2'), url('/font/1/SourceSansPro-ExtraLight.otf') format('opentype');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 200;
  src: local('Source Sans Pro'), url('/font/1/SourceSansPro-ExtraLightItalic') format('truetype'), url('/font/1/SourceSansPro-ExtraLightItalic.woff') format('woff'), url('/font/1/SourceSansPro-ExtraLightItalic.woff2') format('woff2'), url('/font/1/SourceSansPro-ExtraLightItalic.otf') format('opentype');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 300;
  src: local('Source Sans Pro'), url('/font/1/SourceSansPro-Light.ttf') format('truetype'), url('/font/1/SourceSansPro-Light.woff') format('woff'), url('/font/1/SourceSansPro-Light.woff2') format('woff2'), url('/font/1/SourceSansPro-Light.otf') format('opentype');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 300;
  src: local('Source Sans Pro'), url('/font/1/SourceSansPro-LightItalic.ttf') format('truetype'), url('/font/1/SourceSansPro-LightItalic.woff') format('woff'), url('/font/1/SourceSansPro-LightItalic.woff2') format('woff2'), url('/font/1/SourceSansPro-LightItalic.otf') format('opentype');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: local('Source Sans Pro'), url('/font/1/SourceSansPro-Regular.ttf') format('truetype'), url('/font/1/SourceSansPro-Regular.woff') format('woff'), url('/font/1/SourceSansPro-Regular.woff2') format('woff2'), url('/font/1/SourceSansPro-Regular.otf') format('opentype');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 600;
  src: local('Source Sans Pro'), url('/font/1/SourceSansPro-SemiBold.ttf') format('truetype'), url('/font/1/SourceSansPro-SemiBold.woff') format('woff'), url('/font/1/SourceSansPro-SemiBold.woff2') format('woff2'), url('/font/1/SourceSansPro-SemiBold.otf') format('opentype');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 600;
  src: local('Source Sans Pro'), url('/font/1/SourceSansPro-SemiBoldItalic.ttf') format('truetype'), url('/font/1/SourceSansPro-SemiBoldItalic.woff') format('woff'), url('/font/1/SourceSansPro-SemiBoldItalic.woff2') format('woff2'), url('/font/1/SourceSansPro-SemiBoldItalic.otf') format('opentype');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 700;
  src: local('Source Sans Pro'), url('/font/1/SourceSansPro-Bold.ttf') format('truetype'), url('/font/1/SourceSansPro-Bold.woff') format('woff'), url('/font/1/SourceSansPro-Bold.woff2') format('woff2'), url('/font/1/SourceSansPro-Bold.otf') format('opentype');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 700;
  src: local('Source Sans Pro'), url('/font/1/SourceSansPro-BoldItalic.ttf') format('truetype'), url('/font/1/SourceSansPro-BoldItalic.woff') format('woff'), url('/font/1/SourceSansPro-BoldItalic.woff2') format('woff2'), url('/font/1/SourceSansPro-BoldItalic.otf') format('opentype');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 900;
  src: local('Source Sans Pro'), url('/font/1/SourceSansPro-Black.ttf') format('truetype'), url('/font/1/SourceSansPro-Black.woff') format('woff'), url('/font/1/SourceSansPro-Black.woff2') format('woff2'), url('/font/1/SourceSansPro-Black.otf') format('opentype');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 900;
  src: local('Source Sans Pro'), url('/font/1/SourceSansPro-BlackItalic.ttf') format('truetype'), url('/font/1/SourceSansPro-BlackItalic.woff') format('woff'), url('/font/1/SourceSansPro-BlackItalic.woff2') format('woff2'), url('/font/1/SourceSansPro-BlackItalic.otf') format('opentype');
}
/* Mailbox */
.inbox .left {
  width: 100%;
}
.inbox .right {
  display: none;
}
.mailboxSelectReceiver .title {
  padding: 20px 15px 10px 15px;
  font-weight: 700;
  font-size: 120%;
}
.mailboxSelectReceiver .titleValue input {
  margin-left: 15px;
  padding: 15px;
  border-radius: 5px;
  width: 80%;
  border: 1px solid #d5d5d5;
}
.mailboxSelectReceiver .row {
  padding: 5px 5px;
}
.mailboxSelectReceiver .row .profileImage {
  float: left;
}
.mailboxSelectReceiver .row .profileImage img {
  border-radius: 50%;
  width: 50px;
}
.mailboxSelectReceiver .row .nickname {
  float: left;
  padding: 15px 10px;
  font-weight: 600;
  font-size: 110%;
}
.mailboxSelectReceiver .row .nickname .preStamp {
  display: none;
}
.mailboxSelectReceiver .row .checkbox {
  float: left;
  width: 20px;
  padding: 15px 10px;
}
/* Kommt weg */
.mailboxNavigation {
  overflow: visible;
  margin-left: 0;
  padding-top: 0;
}
.mailboxNavigation a.entry {
  float: left;
  width: 60px;
  border-bottom: 4px solid #cccccc;
  padding-top: 10px;
  display: block;
}
.mailboxNavigation a.entry.active {
  background: transparent;
  border-bottom: 4px solid #a3d845;
  font-weight: 600;
  color: #000000;
}
.mailboxNavigation a.entry {
  background: transparent;
  padding: 12px 5px 11px 5px;
}
.mailboxNavigation a.entry {
  margin-right: 15px;
}
.mailboxNavigation a.entry {
  margin: 0;
  width: 120px;
}
.mailboxNavigation a.entry.simple {
  width: 30px;
}
.mailboxNavigation a.entry .icon {
  float: left;
}
.mailboxNavigation a.entry .icon img {
  width: 30px;
}
.mailboxNavigation a.entry .text {
  float: left;
  text-indent: 5px;
  padding-top: 9px;
  font-size: 100%;
  color: #929292;
}
.mailboxNavigation a.entry.simple .text {
  display: none;
}
.mailboxNavigation a.entry.active {
  border-width: 4px;
}
.mailboxNavigation a.entry.aboLink {
  display: none;
}
.subNavigation a.addChat {
  display: block;
  text-align: center;
  float: right;
  border-radius: 50px;
  width: 35px;
  height: 35px;
  background: #f84538;
  margin-right: 3%;
}
.subNavigation a.addChat .text {
  display: none;
}
.subNavigation a.addChat .icon {
  padding: 5px;
}
.subNavigation a.addChat .icon img {
  width: 30px;
}
.subNavigation a.addGroup {
  display: block;
  text-align: center;
  float: right;
  border-radius: 50px;
  height: 40px;
  background: #ffa225;
  margin-right: 3%;
}
.subNavigation a.addGroup .text {
  float: left;
  color: #ffffff;
  padding: 15px 15px;
  font-weight: 800;
  display: block;
}
.conversationListActions {
  display: none;
}
.conversationListActions .parent {
  display: flex;
  padding-bottom: 5px;
}
.conversationListActions .divider {
  display: inline-block;
  border-left: 1px solid #777;
  margin: 5px;
  margin-right: 10px;
}
.conversationListActions a {
  display: inline-block;
  padding: 12px 15px;
  color: #fff;
  border-radius: 25px;
  background: #ffa225;
  font-size: 100%;
  margin-right: 5px;
}
.conversationListActions a:hover {
  background: #555;
}
.conversationListActions a:active {
  background: #555;
}
.conversationListActions a.danger {
  background: #FF6C62;
}
.conversationListActions a.danger:hover {
  background: #FF8A82;
}
.listOfSuggestedFriends {
  margin-left: 10px;
}
.listOfConversations {
  line-height: 130%;
  background: #ffffff;
  border-radius: 2px;
  min-height: 300px;
}
.listOfConversations .conversation {
  width: 100%;
  border-top: 1px solid #f1f1f1;
  padding-bottom: 5px;
}
.listOfConversations .conversation:first-child {
  border-top: none;
  padding-top: 5px;
}
.listOfConversations .conversation.unread {
  background: #ffd237;
  border-top: 1px solid #f1f1f1;
}
.listOfConversations .conversation.mention {
  background: #7FB5FF;
}
.listOfConversations .conversation:hover {
  background: #FDD978;
}
.listOfConversations .conversation.mention:hover {
  background: #77AFFC;
}
.listOfConversations .conversation .checkbox {
  float: left;
  display: none;
  width: 50px;
  min-height: 30px;
  padding-top: 25px;
  cursor: pointer;
}
.listOfConversations .conversation .checkbox img {
  margin-left: 20px;
}
.listOfConversations .conversation a.box {
  float: left;
  display: block;
  width: 420px;
  padding-top: 5px;
  padding-bottom: 5px;
  cursor: pointer;
  clear: both;
}
.listOfConversations .conversation .sender {
  float: left;
  width: 55px;
  padding-top: 13px;
  margin-left: 3%;
}
.listOfConversations .conversation .sender .picture {
  float: left;
  width: 50px;
  min-height: 35px;
  padding-left: 5px;
}
.listOfConversations .conversation .sender .picture img {
  width: 37px;
  height: 37px;
  border-radius: 50%;
  vertical-align: text-bottom;
}
.listOfConversations .conversation .sender .userStamp {
  float: left;
  display: none;
  width: 145px;
  overflow: hidden;
  font-size: 95%;
  padding-top: 7px;
}
.listOfConversations .conversation .subject {
  float: left;
  line-height: 140%;
  max-width: 200px;
  padding-top: 15px;
  padding-bottom: 10px;
  font-size: 120%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.listOfConversations .conversation .subject.out {
  color: #888888;
  font-style: italic;
}
.listOfConversations .conversation .subject .bookmarkHint {
  color: #888;
  display: inline-block;
}
.listOfConversations .conversation .subject .bookmarkHint img {
  height: 12px;
  display: inline-block;
  padding-left: 5px;
}
.listOfConversations .conversation .subject .bookmarkHint span {
  font-size: 70%;
  display: inline-block;
  padding-left: 2px;
}
.listOfConversations .conversation .subject.out {
  color: #888888;
  font-style: italic;
}
.listOfConversations .conversation .subject .bookmarkHint {
  color: #888;
  display: inline-block;
}
.listOfConversations .conversation .subject .bookmarkHint img {
  height: 12px;
  display: inline-block;
  padding-left: 5px;
}
.listOfConversations .conversation .subject .bookmarkHint span {
  font-size: 70%;
  display: inline-block;
  padding-left: 2px;
}
.listOfConversations .conversation .subject .reminderHint {
  color: #888;
  display: inline-block;
}
.listOfConversations .conversation .subject .reminderHint img {
  height: 12px;
  display: inline-block;
  padding-left: 5px;
}
.listOfConversations .conversation .timestamp {
  float: right;
  width: 100px;
  padding-top: 17px;
  font-size: 90%;
  font-weight: 300;
  color: #999999;
}
.listOfConversations .conversation .statusIconMail {
  float: right;
  width: 35px;
  margin-right: 20px;
  padding-top: 5px;
}
.listOfConversations .conversation .statusIconMail img {
  width: 35px;
  margin-top: 5px;
}
.listOfConversations .conversation .infos {
  float: right;
  width: 55px;
  padding-top: 12px;
}
.listOfConversations .conversation.unread a .subject {
  color: #333333;
  font-weight: bold;
}
.listOfConversations .conversation .messagePreview {
  color: #a4a4a4;
  font-weight: 300;
  font-size: 80%;
}
.listOfConversations .unreadCounter {
  position: absolute;
  z-index: 2;
  margin-top: 20px;
  margin-left: 10px;
}
.listOfConversations .more a {
  display: block;
  padding: 15px 20px;
  text-align: center;
  color: #ffffff;
  background: #62b6ff;
  border-top: 1px dashed #dcdcdc;
}
.listOfConversations .more a:hover {
  background: #3fa6ff;
}
.mailboxListOfMedia {
  background: #ffffff;
  padding: 15px;
}
.mailboxListOfMedia .image {
  width: 160px;
  height: 160px;
  margin: 5px;
}
.headerConversation {
  border-bottom: 2px solid #c5c5c5;
  background: #ffffff;
  min-height: 55px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
  flex-wrap: nowrap;
  max-width: 100vw;
}
.headerConversation .profileImage {
  padding: 10px;
}
.headerConversation .profileImage img {
  width: 50px;
  border-radius: 50%;
}
.headerConversation .status {
  padding: 10px 0 0 0;
  display: inline-flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 4;
  height: 52px;
  max-width: calc(100vw - 140px);
}
.headerConversation .status .onlineInfo {
  font-size: 100%;
  font-weight: 300;
  padding-top: 5px;
  color: #979797;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
}
.headerConversation .status .title {
  font-size: 110%;
  font-weight: 500;
  padding-top: 5px;
  max-width: 100%;
}
.headerConversation .options {
  display: inline-flex;
  flex-direction: row;
  align-content: center;
  align-items: center;
  justify-content: flex-start;
  height: 52px;
  padding: 0 10px;
}
.headerConversation .options img {
  width: 25px;
}
.headerConversation .options .optionEntry {
  display: block;
  padding: 5px;
  margin-left: 5px;
}
.headerConversation .options .optionEntry:hover {
  background: #e5e5e5;
  border-radius: 5px;
  cursor: pointer;
}
.headerConversation .onlineInfo a {
  margin-right: 5px;
}
.headerConversation .close {
  display: inline-flex;
  flex-direction: row;
  align-content: center;
  align-items: center;
  justify-content: flex-start;
  padding: 0 10px;
  height: 52px;
}
.headerConversation .close img {
  width: 25px;
}
.headerConversation .close img:hover {
  opacity: 0.9;
  animation: focusIcon 1s;
  cursor: pointer;
}
/* ;max-height: 100vh;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;	min-width: 0;min-height: 0;	-webkit-box-flex: 1;-ms-flex: 1 1 auto;	flex: 1 1 auto;*/
.conversationSite {
  position: fixed;
  display: grid;
  grid-template-rows: 52px max-content 90px;
  background: #cacaca;
  background: linear-gradient(90deg, #d4d4d4 0, #cecece 100%);
}
.conversationSite.conversationSiteHasLater {
  grid-template-rows: 52px max-content 40px 90px;
}
.conversationSite.conversationSiteHasLater .conversationEditor {
  grid-row: 4;
}
.headerConversation {
  grid-row: 1;
  z-index: 2;
}
.mailConversation {
  grid-row: 2;
}
.conversationEditor {
  grid-row: 3;
  align-self: start;
  justify-content: start;
}
.conversationEditor .wrapper {
  display: block;
  margin-bottom: 10px;
}
.conversationEditor {
  padding-top: 5px;
}
.wrappedAnswerLaterButton {
  display: flex;
  grid-row: 3;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  align-content: center;
  flex-wrap: nowrap;
}
.wrappedAnswerLaterButton button {
  line-height: 1.5;
  background: #c0c0c0;
  border: 1px solid #cdcdcd;
  color: #777;
  padding: 5px;
  border-radius: 7px;
  font-size: 80%;
  font-weight: 400;
  transition: .3s;
  cursor: pointer;
}
.wrappedAnswerLaterButton button.active {
  background: #c0ffc0;
  border: 1px solid #cdffcd;
  color: #64c864;
}
.mailboxTextarea {
  resize: vertical;
  margin-left: 10px;
  height: 20px;
  white-space: pre-wrap;
  word-wrap: break-word;
  max-height: 80%;
  font-weight: 300;
  color: #000000;
  border: 1px solid #dcdcdc;
  padding: 10px 15px;
  padding-top: 12px;
  font-size: 13px;
  border-radius: 10px;
  min-width: 250px;
  min-width: calc(100% - 82px);
  min-height: 20px;
  max-height: 50vh;
}
.mailboxTextarea:active,
.mailboxTextarea:focus {
  border: 1px solid #95cdff;
}
.hiddenTextareaForResize {
  display: none;
  white-space: pre-wrap;
  word-wrap: break-word;
}
/*.hiddenTextareaForResize  {position: fixed;	top: 200px;	z-index: 200;display: block;background:white}*/
.mailboxButtonSend {
  margin-right: 2%;
}
.mailboxButtonSend button {
  border-radius: 50%;
  height: 42px;
  width: 42px;
  padding: 10px;
  cursor: pointer;
  border: 1px solid #009fdd;
  color: #ffffff;
  background: url(//s.jappy.com/i/icon/unity/send.png) no-repeat 50% 50% #00b8ff;
  font-weight: 700;
}
.mailboxButtonSend button:hover {
  background: url(//s.jappy.com/i/icon/unity/send.png) no-repeat 50% 50% #4ccbfc;
  transform: scale(1.05);
  transition: 0.3s;
}
.mailboxCompose .emoji {
  height: 2em;
  line-height: 2em;
  width: 2em;
}
.mailboxCompose .editor .smilies {
  float: left;
  margin-left: 3px;
  width: 280px;
}
.mailboxCompose .editor .smilies .entries {
  width: 240px;
}
.mailboxCompose .editor .smilies .more {
  margin-left: 5px;
}
.mailConversation.mailbox ::-webkit-scrollbar {
  width: 5px;
}
.mailConversation.mailbox ::-webkit-scrollbar-track {
  color: #333333;
  background: #cacaca;
}
.mailConversation.mailbox ::-webkit-scrollbar-button {
  color: #333333;
}
.mailConversation.mailbox ::-webkit-scrollbar-thumb {
  color: #333333;
  background: #a9a9a9;
  border-radius: 5px;
}
.mailConversation.mailbox {
  scrollbar-color: #a9a9a9 #cacaca;
  scrollbar-width: thin;
}
.mailConversation .messageFrame {
  overflow-y: scroll;
  overflow-x: hidden;
  padding-right: 10px;
  padding-bottom: 0px;
}
.mailConversation .messageFrame hr {
  padding: 0;
  margin: 0;
  border: 1px solid transparent;
}
.mailConversation {
  width: 460px;
  overflow-x: hidden;
  overflow-y: scroll;
}
.mailConversation.mailbox {
  width: 100%;
  overflow: visible;
}
.noLayer .mailConversation {
  width: 100%;
  height: auto;
  overflow: visible;
}
.settings .mailConversation .selected {
  width: 118px;
  border: 2px solid #417bc4;
}
.mailConversation .text .forward {
  padding: 10px 0;
}
.mailConversation .date {
  text-align: center;
  color: #333333;
  font-weight: bold;
  font-size: 90%;
  margin: 10px 0 5px 0;
  padding-bottom: 5px;
}
.mailConversation .data span {
  padding: 5px 0 5px;
}
.mailConversation .entry {
  margin: 5px 0 5px 0;
  width: 100%;
  text-align: left;
  line-height: 130%;
  float: right;
}
.mailConversation .entry .text {
  font-size: 13px;
  line-height: 130%;
  max-width: 370px;
  overflow: hidden !important;
  background: #ffe190;
  background: linear-gradient(90deg, #ffe7a6 0, #ffe190 100%);
  float: right;
  z-index: 1;
  position: relative;
  border-radius: 15px;
  color: #333333;
}
.mailConversation .entry .text .textMessage {
  padding: 10px 15px 5px 15px;
}
.mailConversation .entry .text .image {
  padding: 15px;
}
.mailConversation .entry .text .image img {
  width: 160px;
  height: 160px;
}
.mailConversation .entry .text img {
  max-width: 100%;
}
.mailConversation.mailbox .entry .text {
  max-width: 280px;
}
.mailConversation.mailbox .entry .tsBygone {
  color: #333333;
}
.mailConversation .entry .text .emotion img {
  max-width: 300px;
  border: 4px solid #fe2e85;
  border-radius: 10px;
  min-height: 220px;
}
.mailConversation .entry .text .emotion .emotionTitle {
  padding: 10px 15px 10px 15px;
  font-weight: 900;
  color: #333333;
  font-size: 120%;
}
.mailConversation .entry .giftPre {
  text-align: center;
  padding: 5px;
  font-size: 90%;
  text-transform: uppercase;
  padding-bottom: 0;
  color: #999999;
}
.mailConversation .entry .giftName {
  padding: 5px;
  text-align: center;
  color: #333333;
  font-weight: 600;
}
.mailConversation .entry .giftIcon {
  padding: 5px;
  text-align: center;
}
.mailConversation .entry .giftShow {
  padding: 10px;
  text-align: center;
}
.mailConversation .entry .giftSubLink {
  color: #999999;
  padding: 20px;
}
.mailConversation .entry .giftShow span {
  font-weight: 700;
  border-radius: 25px;
  padding: 15px 15px;
  cursor: pointer;
  margin-top: 10px;
  margin-bottom: 15px;
  border: 1px solid #47c6f8;
  color: #fff;
  background: #49ccff;
}
.mailConversation .entry .giftShow span:hover {
  background: #ffa225;
  border: 1px solid #ffa225;
  transition: 0.5s;
}
.mailConversation .entry .messageFooter {
  width: auto;
  min-width: 150px;
  opacity: 0.5;
  padding-right: 5px;
}
.mailConversation .entry .time {
  float: left;
  font-size: 10px;
  font-weight: 300;
  padding: 0 10px 10px 8px;
  color: #9c9c9c;
  text-align: right;
  line-height: 14px;
}
.mailConversation .entry .time img {
  vertical-align: text-bottom;
  opacity: 0.6;
  margin-right: 5px;
  margin-left: 5px;
  width: 12px;
}
.mailConversation .entry .time img:hover {
  transition: 0.3s;
  transform: scale(1.2);
}
.mailConversation .entry .bookmarkHint {
  float: left;
  padding: 0 10px 10px 0;
  line-height: 14px;
}
.mailConversation .entry .bookmarkHint img {
  max-height: 14px;
  padding: 0;
  margin: 0;
  transition: .7s;
  filter: grayscale(1);
}
.mailConversation .entry .bookmarkHint img:hover {
  filter: none;
}
.mailConversation .entry .responseSection {
  float: left;
  padding: 0 10px 10px 0;
  line-height: 14px;
}
.mailConversation .entry .responseSection img {
  max-height: 14px;
  padding: 0;
  margin: 0;
}
.mailConversation .entry:hover .messageFooter {
  opacity: 1;
}
.mailConversation .entry .messageFooter .statusRead {
  float: right;
}
.mailConversation .entry .messageFooter .statusRead img {
  width: 20px;
  opacity: 0.8;
}
.mailConversation .entry .pointerLeft {
  position: relative;
  z-index: 2;
  margin-top: 13px;
  width: 10px;
  height: 19px;
  float: left;
  left: 1px;
}
.mailConversation .entry.foreign {
  margin-left: 5px;
  float: left;
}
.mailConversation .entry.foreign .text {
  float: left;
  background: #ffffff;
  color: #000000;
  border: 1px solid #d3d3d3;
  font-weight: 400;
}
.mailConversation .entry.highlighted {
  background: #cfcfcf;
}
.mailConversation .stamp {
  padding: 10px 15px 0 15px;
  font-size: 80%;
}
.mailConversation .stamp .icIcon {
  margin-right: 0;
}
.mailConversation .profileImage {
  width: 35px;
  margin-left: 3px;
  position: relative;
  z-index: 2;
  float: left;
  margin-right: 3px;
}
.mailConversation .profileImage img {
  width: 35px;
  height: 35px;
  border-radius: 50%;
}
.mailConversation .attachedPictures {
  margin: 1%;
  margin-bottom: 2px;
  min-height: 160px;
}
.mailConversation .attachedPictures .headline {
  font-size: 90%;
  padding: 6px 0 3px 0;
}
.mailConversation .attachedPictures .image {
  width: 120px;
  height: 120px;
  margin: 0;
  float: right;
  margin-right: 1%;
  padding: 3px;
  background: #ffffff;
  border: 1px solid #e1e1e1;
  cursor: pointer;
}
.mailConversation .attachedPictures .image:hover {
  background: #e1e1e1;
}
.mailConversation .attachedPictures .image img {
  width: 120px;
  max-height: 120px;
}
.mailConversation .attachedPictures.foreign a.image {
  float: left;
}
.mailConversation.mailbox .attachmentLinkEntry {
  margin-left: 0;
  margin-right: 10px;
}
.mailConversation.mailbox .attachmentLinkEntry .options {
  display: none;
}
.mailConversation.mailbox .attachmentLinkEntry .numberOfShares {
  background: none;
  font-style: italic;
  margin-top: 0;
}
.mailConversation .forward {
  width: 95%;
  text-align: left;
  padding-bottom: 10px;
  padding-top: 10px;
}
.mailConversation .forward .headline {
  font-size: 100%;
  padding: 5px;
  text-align: center;
}
.mailConversemptyStateation .forward .headline {
  color: #333333;
  font-weight: bold;
  border-top: 1px solid #e1e1e1;
  font-size: 70%;
  padding: 1%;
  text-indent: 15%;
  padding-top: 2%;
}
.mailConversation .forward .text {
  margin-left: 50px;
  font-size: 110%;
  line-height: 120%;
  box-shadow: 1px 1px 2px #dedede;
  max-width: 90%;
  overflow: hidden !important;
  background: #fffee0;
  background: #f6eeaf;
  padding: 10px;
  border-radius: 4px;
  color: #333333;
  border: 1px solid #bbb989;
}
.mailConversation .answer {
  margin: 3% 5% 3% 3%;
  width: 92%;
}
.mailConversation .answer .text {
  box-shadow: 1px 1px 2px #dedede;
  background: #FDD978;
  border-radius: 2px;
  max-width: 75%;
  overflow: hidden !important;
  padding: 7px 8px;
  border-radius: 4px;
}
.mailConversation .answerlistOfUserWithImages.foreign .text {
  background: #ffffff;
  float: left;
  border: 1px solid #999999;
  color: #333333;
}
.mailConversation .answer.own .text {
  background: #ebf3f6;
  float: right;
  border: 1px solid #aac9d8;
  color: #333333;
}
.mailConversation .answer .headline {
  color: #333333;
  font-weight: bold;
  border-top: 1px solid #e1e1e1;
  text-align: center;
  padding: 1%;
}
.mailConversation .answer .text img {
  max-width: 320px !important;
}
.mailConversation .answer .time {
  float: left;
  font-size: 10px;
  color: #bdbdbd;
  padding: 2%;
  width: 20%;
  text-align: right;
}
.mailConversation .answer.own .time {
  float: right;
  text-align: left;
}
.mailConversation .attachedLinks {
  margin: 15px 10px;
  padding-bottom: 10px;
  padding-top: 5px;
}
.mailConversation .attachedLinks .headline {
  padding-bottom: 5px;
  font-style: italic;
  font-size: 90%;
  text-align: left;
}
.mailConversation .attachedLinks a.link,
.attachedLinks .link {
  width: 93%;
  display: block;
  padding: 0;
}
.mailConversation .attachedLinks a.link .text,
.attachedLinks .link .text {
  float: left;
  width: 75%;
  overflow: hidden;
}
.mailConversation .attachedLinks a.link .title,
.attachedLinks .link .title {
  font-size: 110%;
  color: #78b1e3;
}
.mailConversation .attachedLinks .icon {
  float: right;
  width: 12%;
}
.mailConversation .attachedLinks .icon img {
  width: 35px;
  height: 35px;
}
.mailConversation .mailboxActions {
  padding: 5px 5px 10px 5px;
  margin-left: 55px;
  font-size: 80%;
  text-align: right;
}
.mailConversation .mailboxActions img {
  width: 14px;
  vertical-align: text-bottom;
}
.mailConversation .mailboxActions.own {
  text-align: right;
}
.mailConversation .mailboxActions a.action {
  margin-right: 10px;
  width: 16px;
  height: 16px;
  display: block;
  float: right;
  background: #f1f1f1;
  border-radius: 50%;
  padding: 3px;
  border: 1px solid #BCBCBC;
  text-align: center;
}
.mailConversation .mailboxActions a.action:hover {
  background: #ffda3d;
}
.mailConversation .attachmentAddFrame {
  background: #fffee0;
  border-top: 1px solid #e1e1e1;
}
.mailConversation .attachedLinks .stats {
  font-size: 80%;
  color: #888888;
  margin-left: 3%;
}
.mailConversation .attachedLinks .video {
  width: 93%;
}
.mailConversation .attachedLinks .video .content {
  float: left;
  width: 80%;
}
.mailConversation .attachments .stats {
  margin: 5px;
}
.mailConversation .tsShortTimeAgo {
  background: #a6e7ff;
  border: 0;
  color: #cacaca;
}
.mailConversation .tsRecently {
  background: transparent;
  border: 0;
  color: #cacaca;
}
.mailConversation .giftImage {
  width: 240px;
  height: 192px;
}
.mailConversation .gift {
  padding: 10px;
}
.mailConversation .more {
  text-align: center;
  margin: 10px;
}
.mailConversation .more a {
  display: inline-block;
  color: #8d8d8d;
  cursor: pointer;
  padding: 10px;
  font-weight: 700;
  text-align: center;
  min-height: 20px;
  line-height: 20px;
  width: 100%;
  border-bottom: 1px dashed #9e9e9e;
}
.mailConversation .reference {
  background: #ddd;
  padding: 7px 13px;
  border-bottom: 1px solid #777;
  border-radius: 10px;
  margin: 5px;
}
.mailConversation .own .reference {
  background: #fff;
  border-bottom: 1px solid #ccc;
}
.mailConversation .reference .description {
  font-size: 90%;
  font-weight: 400;
}
.mailConversation .reference .icon img {
  max-width: 128px;
}
.mailConversation .reference .referenceText {
  font-weight: bold;
  font-size: 0.9em;
  align-self: center;
  margin-top: 10px;
}
.mailConversation #conversationContainerInner {
  padding-top: 20px;
  padding-bottom: 20px;
}
.mailConversationImageTransfer {
  border-radius: 13px;
  background: #fff;
  padding: 13px 13px 30px 13px;
  margin: 13px;
}
.mailConversationImageTransfer .fileSelection .headline {
  font-size: 150%;
  font-weight: 300;
  color: #555555;
  text-align: center;
}
.mailConversationImageTransfer .prepareImage {
  animation: prepareImage 1.0s infinite;
  width: 100px;
  margin: auto;
}
.mailConversationImageTransfer .imageUploadStatus {
  padding: 0 20px;
  text-align: center;
  color: #999;
  font-weight: bold;
}
.mailConversationImageTransfer .imageUploadStatus .info {
  font-weight: 300;
  color: #999999;
  margin-top: 20px;
}
.mailConversationImageTransfer .removeImage {
  text-align: center;
  color: #999;
  padding: 10px;
  background: #e5e5e5;
  margin-top: 10px;
  width: 340px;
  cursor: pointer;
  border-radius: 10px;
}
.mailConversationImageTransfer .imageUploadStatus .headline {
  font-weight: 300;
  padding: 20px;
  font-size: 150%;
}
.mailConversationImageTransfer .nonMobile {
  display: none;
}
.mailConversationImageTransfer button {
  background: #f0f0f0;
  border: 1px solid #aaa;
  padding: 13px;
  border-radius: 7px;
  cursor: pointer;
  margin: 13px 5px;
  color: #aaa;
  display: inline-block;
}
.mailConversationImageTransfer button:hover {
  background: #f8f8f8;
  color: #000;
}
.mailConversationImageTransfer button[type="submit"] {
  border-color: #ffa124;
  color: #fff;
  background: #ffa124;
}
.mailConversationImageTransfer button[type="submit"]:disabled {
  border-color: #999;
  color: #999;
  background: #e5e5e5;
  cursor: default;
}
.mailConversationImageTransfer .cameraButton {
  background: #f0f0f0;
  border: 1px solid #aaa;
  padding: 8px;
  border-radius: 7px;
  cursor: pointer;
  margin: 13px 5px;
  color: #aaa;
  display: inline-block;
}
.mailConversationImageTransfer .cameraButton:hover {
  background: #f8f8f8;
}
.mailConversationImageTransfer .media .actionArea {
  display: flex;
  justify-items: center;
  align-items: center;
  justify-content: center;
}
.mailConversationImageTransfer .media .actionArea button {
  background: #f0f0f0;
  border: 1px solid #aaa;
  padding: 13px;
  border-radius: 7px;
  cursor: pointer;
  margin: 13px 5px;
  color: #aaa;
  display: inline-block;
}
.mailConversationImageTransfer .media .actionArea button:hover {
  background: #f8f8f8;
  color: #000;
}
.mailConversationImageTransfer .media .actionArea button.primary {
  border: 1px solid #ffa124;
  color: #fff;
  background: #ffa124;
  cursor: pointer;
}
.mailConversationImageTransfer .media .actionArea button.primary:hover {
  background: #ffb134;
}
.mailConversationImageTransfer .media video {
  width: 100%;
  height: auto;
}
.conversationOptions {
  animation: openMenue 0.3s;
  width: 280px;
  padding: 10px 0;
  background: #424242;
  border: 1px solid #333;
  font-weight: 600;
  border-radius: 15px;
  box-shadow: 0 2px 2px #cacaca;
}
.conversationOptions .entry {
  display: block;
  padding: 10px 15px;
  color: #ffffff;
  font-weight: 600;
  font-size: 100%;
}
.conversationOptions .entry:hover {
  background: #5a5a5a;
  cursor: pointer;
}
.conversationOptions .entry img {
  width: 25px;
  height: 25px;
}
.messageInfoLayer {
  width: 100vw;
  position: fixed;
  bottom: 55px;
  z-index: 99999999999999;
  background: #ffda69;
  color: #000000;
  text-align: center;
  padding: 15px;
  left: 0;
  font-weight: 600;
  line-height: 1.3;
  font-size: 110%;
}
.chatRequestSetting {
  display: grid;
  grid-template-columns: 40px auto;
  grid-gap: 7px;
  margin-bottom: 10px;
  border-radius: 20px;
  align-items: center;
  padding: 15px;
  color: #000;
  line-height: 1.5;
  cursor: pointer;
}
.chatRequestSetting.default {
  opacity: .7;
  background: #dddddd;
  color: #848484;
  font-weight: 300;
  border: 3px solid #dadada;
}
.chatRequestSetting.restricted {
  background: linear-gradient(45deg, #ffe567 0%, #ffe05a 100%);
  border: 3px solid #f5d95c;
}
.chatRequestSetting.freeForAll {
  background: linear-gradient(45deg, #c6f66b 0%, #bae95f 100%);
  border: 3px solid #bdec62;
}
.chatRequestSetting.isolation {
  background: linear-gradient(45deg, #8F4CEC 0%, #6E18E5 100%);
  border: 3px solid #7F32E9;
  color: #fff !important;
}
.chatRequestSetting:hover {
  opacity: 1;
  animation: intoFocusSoft .5s forwards;
  border: 3px solid #fbb537;
  color: #000;
}
.chatRequestSettingProfile {
  display: grid;
  border: 1px solid #d0b32c;
  border-bottom: 0;
  grid-template-columns: 40px auto;
  grid-gap: 7px;
  align-items: center;
  padding: 15px;
  color: #000;
  line-height: 1.5;
  background: linear-gradient(45deg, #ffe25c 0%, #ffd930 100%);
}
.chatRequestInfo {
  display: block;
  background: linear-gradient(270deg, #4ff0e4 0%, #a0fff8 100%);
  border: 1px solid #7af2e9;
  margin-bottom: 10px;
  border-radius: 20px;
}
.chatRequestInfo .content {
  padding: 7px;
  margin-left: 10px;
}
.chatRequestInfo.low {
  opacity: 0.7;
  background: #dddddd;
  color: #545454;
  font-weight: 400;
  font-style: italic;
  border: 1px solid #dadada;
}
.chatRequestInfo.normal {
  color: #393939;
  font-weight: 900;
  font-size: 110%;
}
.chatRequestInfo:hover {
  opacity: 1.0;
  animation: intoFocusSoft 0.5s forwards;
}
.chatRequest {
  display: grid;
  grid-template-columns: 60px auto;
  grid-gap: 10px;
  margin-bottom: 20px;
  padding: 10px;
}
.chatRequest > .profileImage {
  grid-column: 1;
  grid-row: 1 / span 5;
  align-self: start;
  justify-self: start;
}
.chatRequest > .profileImage > a > img {
  width: 60px;
  height: 60px;
  margin-right: 10px;
  border-radius: 50%;
}
.chatRequest > .nickname {
  font-size: 1.3em;
  padding-top: 10px;
  line-height: 20px;
  align-self: start;
  justify-self: start;
}
.chatRequest > .timestamp {
  font-weight: 300;
  align-self: start;
  justify-self: start;
  padding-bottom: 10px;
}
.chatRequest .badgeList {
  padding-bottom: 10px;
}
.chatRequest .badgeList > img {
  max-width: 40px;
}
.chatRequest .pinMatchList {
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  padding: 10px;
}
.chatRequest .pinMatchList .pinMatch > div {
  padding: 3px;
  border-radius: 7px;
  overflow: hidden;
  box-shadow: 0px 0px 3px 2px #ffe178;
  height: 40px;
  width: 40px;
}
.chatRequest .pinMatchList .pinMatch > div > img {
  width: 100%;
  height: 100%;
}
.chatRequest .pinMatchList .pinMatch0 {
  grid-column: 1;
}
.chatRequest .pinMatchList .pinMatch1 {
  grid-column: 2;
}
.chatRequest .pinMatchList .pinMatch2 {
  grid-column: 3;
}
.chatRequest .pinMatchList .pinMatch3 {
  grid-column: 4;
}
.chatRequest .pinMatchList .pinMatch4 {
  grid-column: 5;
}
.chatRequest .action {
  color: #393939;
  background: #ffffff;
  border: 2px solid #69f5ea;
  border-radius: 20px;
  font-weight: 500;
  padding: 10px 15px;
  margin-right: 3px;
}
.chatRequest .action:hover {
  animation: intoFocusSoft 0.3s forwards;
}
.chatRequest.prio {
  background: linear-gradient(270deg, #4ff0e4 0, #a0fff8 100%);
  border-left: 5px solid #71e5dc;
}
.chatRequest:hover {
  opacity: 1.0;
  animation: intoFocusSoft 0.5s forwards;
}
.chatRequest.prio .nickname img {
  width: 55px;
  height: 55px;
}
.chatRequest.prio .nickname {
  font-weight: 600;
}
.chatRequest.low {
  background: #ffffff;
  border-left: 5px solid #dddddd;
}
.chatSearchQuery {
  margin-bottom: 13px;
  display: flex;
  flex-flow: row wrap;
}
.chatSearchQuery .inputSection {
  width: 660px;
}
.chatSearchQuery .inputSection input {
  border: 1px solid #efefef;
  background: #efefef;
  padding: 10px;
  padding-top: 11px;
  width: 100%;
  text-indent: 10px;
  font-weight: 300;
  border-radius: 15px 0px 0px 15px;
}
.chatSearchQuery .inputSection input:active,
.chatSearchQuery .inputSection input:hover {
  border: 1px solid #64b5ff;
  background: #ffffff;
}
.chatSearchQuery .submitSection {
  width: 70px;
}
.chatSearchQuery .submitSection button {
  border: 1px solid #ff9933;
  padding: 10px;
  width: 100%;
  border-radius: 0px 15px 15px 0px;
  color: #fff;
  background: #ff9933;
  font-weight: 600;
}
.chatSearchQuery .submitSection button:hover {
  transition: 0.5s;
  animation: intoFocusLight 0.5s forwards;
}
.chatBookmark .bookmarkHeader {
  border: 2px solid #ff9e33;
  border-radius: 7px;
  padding: 5px;
  background: #fff;
  max-width: 736px;
  color: #555;
  font-weight: 700;
  display: flex;
  margin-bottom: 20px;
  flex-direction: row;
  align-content: center;
  align-items: center;
  justify-content: space-between;
  margin-left: 7px;
  margin-right: 7px;
  gap: 13px;
  line-height: 1.5;
}
.chatBookmark .bookmarkHeader span {
  flex-grow: 2;
}
.chatBookmark .bookmarkHeader button {
  flex-shrink: 1;
  color: #ffffff;
  cursor: pointer;
  background: #d8489e;
  background: linear-gradient(45deg, #fe559b 0%, #ff4c71 100%);
  border: 2px solid #df1632;
  border-radius: 20px;
  font-weight: 900;
  font-size: 90%;
  padding: 10px 15px;
  margin-bottom: 5px;
}
.messageMeta {
  overflow: visible;
  height: 1px;
  line-height: 18px;
  background: #bdbdbd;
  display: block;
  margin-bottom: 9px;
  margin-top: 9px;
  text-align: center;
  color: #e1e1e1;
}
.messageMeta .content {
  color: #a4a4a4;
  display: inline-block;
  background: #d9d9d9;
  position: relative;
  top: -9px;
  padding: 3px 9px;
  line-height: 18px;
  font-size: 90%;
}
@media screen and (max-width: 1000px) {
  .conversationEditor {
    width: 100%;
  }
  .mailConversation .messageFrame {
    padding-bottom: 0px;
  }
}
@media screen and (min-width: 800px) and (max-width: 1000px) {
  .conversationEditor {
    width: 100%;
    left: 0;
    text-align: center;
  }
  .conversationEditor .wrapper {
    width: 750px;
    margin: auto;
    text-align: left;
  }
}
@media screen and (max-width: 800px) {
  .mailboxButtonSend {
    position: fixed;
    right: 5px;
    float: none;
  }
  .suggestFeatures {
    position: fixed;
    right: 60px;
  }
  .chatSearchQuery {
    width: 100%;
  }
  .chatSearchQuery .inputSection {
    width: 230px;
  }
  .mailboxTextarea {
    min-width: calc(100% - 105px);
  }
  .mailConversation .entry .text {
    font-size: 16px;
  }
  .mailboxCompose .editor .smilies {
    float: left;
  }
  .conversationOptions {
    top: 60px !important;
    left: 10px !important;
    position: fixed !important;
    margin-top: 0 !important;
    max-height: calc(80vh - 60px);
    overflow-y: auto;
  }
  .listOfConversations .conversation .subject {
    max-width: 160px;
  }
  .listOfConversations .conversation .timestamp {
    width: 70px;
    font-size: 75%;
  }
  .listOfConversations .conversation .statusIconMail {
    width: 35px;
    margin-right: 10px;
    margin-left: 10px;
  }
  .headerConversation {
    min-height: 50px;
    width: 100%;
    border-radius: 0;
  }
  .headerConversation .status .onlineInfo {
    font-size: 85%;
  }
  .conversationSite {
    top: 0;
    z-index: 2000000;
    width: 100%;
    min-height: 100vH;
  }
  .mailConversation .entry .text .textMessage {
    font-size: 15px;
    line-height: 20px;
  }
  .mailboxTextarea {
    font-size: 16px;
    border-radius: 20px;
  }
}
@media screen and (min-width: 800px) {
  .conversationEditor {
    background: #e5e5e5;
  }
}
@media screen and (min-width: 360px) and (max-width: 600px) {
  .mailboxCompose .emoji {
    width: 2.1em;
    height: 2.1em;
  }
  .mailboxCompose .editor .smilies .more img {
    margin-top: 0;
  }
  .mailboxCompose .editor .smilies {
    width: 300px;
  }
  .mailboxCompose .editor .smilies .entries {
    width: 300px;
  }
  .mailboxCompose .editor .smilies .more {
    width: 30px;
    margin-top: 0;
  }
  .mailboxCompose .editor .smilies .more img {
    width: 30px;
    height: 30px;
  }
}
@media screen and (min-width: 400px) and (max-width: 600px) {
  .mailboxCompose .emoji {
    width: 2.2em;
    height: 2.2em;
  }
  .mailboxCompose .editor .smilies .more img {
    margin-top: 0;
  }
  .mailboxCompose .editor .smilies {
    width: 310px;
  }
  .mailboxCompose .editor .smilies .entries {
    width: 310px;
  }
  .mailboxCompose .editor .smilies .more {
    width: 30px;
    margin-top: 0;
  }
  .mailboxCompose .editor .smilies .more img {
    width: 30px;
    height: 30px;
  }
}
.conversation.conversationMailView {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: stretch;
  max-width: 100vw;
  margin: 0 auto 50px auto;
}
.conversation.conversationMailView .topBar {
  display: flex;
  flex-direction: row;
  align-content: center;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  margin: 5px 0;
}
.conversation.conversationMailView .topBar > .topBarSpanner {
  flex-grow: 2;
}
.conversation.conversationMailView .topBar > .conversationOptionMenu {
  display: inline-flex;
  border: none;
  box-sizing: border-box;
  width: 34px;
  height: 34px;
  padding: 0 7px 0 0;
  cursor: pointer;
  background-color: unset;
}
.conversation.conversationMailView .topBar > .breadCrumbBar {
  display: flex;
  flex-direction: row;
  min-height: 35px;
  line-height: 35px;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
}
.conversation.conversationMailView .topBar > .breadCrumbBar > * {
  display: inline-flex;
  padding: 10px 15px;
}
.conversation.conversationMailView .topBar > .breadCrumbBar .crumb {
  background: url('https://s.jappy.com/i/icon/pointer/crumb.png') right center no-repeat;
  box-sizing: border-box;
  color: #333333;
  font-weight: 700;
  cursor: pointer;
  padding-right: 30px;
}
.conversation.conversationMailView .editorArea {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: stretch;
}
.conversation.conversationMailView .conversationStream {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;
  justify-content: flex-start;
}
.conversation.conversationMailView .conversationStream .unseenMessageMarker {
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  gap: 7px;
  margin: 7px;
  background: #dedede;
  border: 1px solid #d1d1d1;
  color: #666666;
  border-radius: 9px;
  padding: 9px 21px;
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  opacity: 0.7;
  transition: .3s;
}
.conversation.conversationMailView .conversationStream .unseenMessageMarker button {
  border: 1px solid #888;
  color: #666;
  background: #eee;
  padding: 7px 14px;
  font-size: 120%;
  font-weight: 700;
  border-radius: 13px;
  cursor: pointer;
  transition: .3s;
}
.conversation.conversationMailView .conversationStream .unseenMessageMarker button:hover {
  background: #d9f4ff;
}
.conversation.conversationMailView .conversationStream .unreadMessageMarker {
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  gap: 7px;
  margin: 7px;
  background: #d9f4ff;
  border: 1px solid #afc8d3;
  color: #68767d;
  border-radius: 9px;
  padding: 9px 14px;
  display: inline-flex;
  font-size: 12px;
  font-weight: 9=00;
  opacity: 0.7;
  transition: .3s;
  box-shadow: 3px 3px 3px #ccc;
}
.conversation.conversationMailView .conversationStream .unreadMessageMarker:hover {
  opacity: 0.7;
}
.conversation.conversationMailView .conversationStream .tsShortTimeAgo {
  background: #a6e7ff;
  border: 0;
  color: #cacaca;
}
.conversation.conversationMailView .conversationStream .tsRecently {
  background: transparent;
  border: 0;
  color: #cacaca;
}
.conversation.conversationMailView .conversationStream .stamp {
  padding: 10px 15px 0 15px;
  font-size: 80%;
}
.conversation.conversationMailView .conversationStream .stamp .icIcon {
  margin-right: 0;
}
.conversation.conversationMailView .conversationStream .reference {
  background: #ddd;
  padding: 7px 13px;
  border-bottom: 1px solid #777;
  border-radius: 10px;
  margin: 5px;
}
.conversation.conversationMailView .conversationStream .reference .referenceText {
  font-weight: bold;
  font-size: 0.9em;
  align-self: center;
  margin-top: 10px;
}
.conversation.conversationMailView .conversationStream .reference .icon img {
  max-width: 128px;
}
.conversation.conversationMailView .conversationStream .reference .description {
  font-size: 90%;
  font-weight: 400;
}
.conversation.conversationMailView .conversationStream .profileImage {
  width: 35px;
  margin-left: 3px;
  position: relative;
  z-index: 2;
  margin-right: 3px;
}
.conversation.conversationMailView .conversationStream .profileImage img {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  margin-top: 3px;
}
.conversation.conversationMailView .conversationStream .own .reference {
  background: #fff;
  border-bottom: 1px solid #ccc;
}
.conversation.conversationMailView .conversationStream .more {
  text-align: center;
  margin: 10px;
}
.conversation.conversationMailView .conversationStream .more a {
  display: inline-block;
  color: #8d8d8d;
  cursor: pointer;
  padding: 10px;
  font-weight: 700;
  text-align: center;
  min-height: 20px;
  line-height: 20px;
  width: 100%;
  border-bottom: 1px dashed #9e9e9e;
}
.conversation.conversationMailView .conversationStream .mailboxActions {
  padding: 5px 5px 10px 5px;
  margin-left: 55px;
  font-size: 80%;
}
.conversation.conversationMailView .conversationStream .mailboxActions img {
  width: 14px;
  vertical-align: text-bottom;
}
.conversation.conversationMailView .conversationStream .mailboxActions a.action:hover {
  background: #ffda3d;
}
.conversation.conversationMailView .conversationStream .mailboxActions a.action {
  margin-right: 10px;
  width: 16px;
  height: 16px;
  display: block;
  background: #f1f1f1;
  border-radius: 50%;
  padding: 3px;
  border: 1px solid #BCBCBC;
  text-align: center;
}
.conversation.conversationMailView .conversationStream .giftImage {
  width: 240px;
  height: 192px;
}
.conversation.conversationMailView .conversationStream .gift {
  padding: 10px;
}
.conversation.conversationMailView .conversationStream .forward {
  width: 95%;
  text-align: left;
  padding-bottom: 10px;
  padding-top: 10px;
}
.conversation.conversationMailView .conversationStream .forward .text {
  margin-left: 50px;
  font-size: 110%;
  line-height: 120%;
  box-shadow: 1px 1px 2px #dedede;
  max-width: 90%;
  overflow: hidden !important;
  background: #f6eeaf;
  padding: 10px;
  border-radius: 4px;
  color: #333333;
  border: 1px solid #bbb989;
}
.conversation.conversationMailView .conversationStream .forward .headline {
  font-size: 100%;
  padding: 5px;
  text-align: center;
}
.conversation.conversationMailView .conversationStream .forward .headline {
  color: #333333;
  font-weight: bold;
  border-top: 1px solid #e1e1e1;
  font-size: 70%;
  padding: 1%;
  text-indent: 15%;
  padding-top: 2%;
}
.conversation.conversationMailView .conversationStream .entry:hover .messageFooter {
  opacity: 1;
}
.conversation.conversationMailView .conversationStream .entry.unseenMessage.foreign > .text {
  background: #d9f4ff;
}
.conversation.conversationMailView .conversationStream .entry.own {
  flex-direction: row-reverse;
}
.conversation.conversationMailView .conversationStream .entry.highlighted {
  background: #cfcfcf;
}
.conversation.conversationMailView .conversationStream .entry.foreign {
  margin-left: 5px;
}
.conversation.conversationMailView .conversationStream .entry.foreign .text {
  background: #ffffff;
  color: #000000;
  border: 1px solid #d3d3d3;
  font-weight: 400;
}
.conversation.conversationMailView .conversationStream .entry {
  margin: 5px 0 5px 0;
  width: 100%;
  text-align: left;
  line-height: 130%;
}
.conversation.conversationMailView .conversationStream .entry {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: flex-start;
}
.conversation.conversationMailView .conversationStream .entry .tsBygone {
  color: #333333;
}
.conversation.conversationMailView .conversationStream .entry .text {
  font-size: 13px;
  line-height: 130%;
  max-width: 370px;
  overflow: hidden !important;
  background: #ffe190;
  background: linear-gradient(90deg, #ffe7a6 0, #ffe190 100%);
  z-index: 1;
  position: relative;
  border-radius: 15px;
  color: #333333;
}
.conversation.conversationMailView .conversationStream .entry .text img {
  max-width: 100%;
}
.conversation.conversationMailView .conversationStream .entry .text .textMessage {
  padding: 10px 15px 5px 15px;
}
.conversation.conversationMailView .conversationStream .entry .text .textMessage .emojiHuge {
  font-size: 300%;
}
.conversation.conversationMailView .conversationStream .entry .text .textMessage .emojiLarge {
  font-size: 225%;
}
.conversation.conversationMailView .conversationStream .entry .text .textMessage .emojiBig {
  font-size: 150%;
}
.conversation.conversationMailView .conversationStream .entry .text .image {
  padding: 15px;
}
.conversation.conversationMailView .conversationStream .entry .text .image img {
  width: 160px;
  height: 160px;
}
.conversation.conversationMailView .conversationStream .entry .text .forward {
  padding: 10px 0;
}
.conversation.conversationMailView .conversationStream .entry .text .emotion img {
  max-width: 300px;
  border: 4px solid #fe2e85;
  border-radius: 10px;
  min-height: 220px;
}
.conversation.conversationMailView .conversationStream .entry .text .emotion .emotionTitle {
  padding: 10px 15px 10px 15px;
  font-weight: 900;
  color: #333333;
  font-size: 120%;
}
.conversation.conversationMailView .conversationStream .entry.meta.system {
  justify-content: center;
}
.conversation.conversationMailView .conversationStream .entry .responseSection {
  padding: 0 10px 10px 0;
  line-height: 14px;
}
.conversation.conversationMailView .conversationStream .entry .responseSection img {
  max-height: 14px;
  padding: 0;
  margin: 0;
}
.conversation.conversationMailView .conversationStream .entry .pointerLeft {
  position: relative;
  z-index: 2;
  margin-top: 13px;
  width: 10px;
  height: 19px;
  left: 2px;
}
.conversation.conversationMailView .conversationStream .entry .messageFooter {
  width: auto;
  min-width: 150px;
  opacity: 0.5;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  min-height: 22px;
  padding: 0 7px;
  gap: 5px;
}
.conversation.conversationMailView .conversationStream .entry .messageFooter > button {
  display: inline-flex;
  align-content: center;
  justify-content: center;
  box-sizing: border-box;
  border: none;
  background-color: unset;
  align-items: center;
  width: 14px;
  height: 14px;
  padding: 4px;
}
.conversation.conversationMailView .conversationStream .entry .messageFooter > button:hover > img {
  transform: scale(1.2);
  opacity: 1;
}
.conversation.conversationMailView .conversationStream .entry .messageFooter > button > img {
  width: 12px;
  opacity: 0.6;
  margin: 5px;
  transition: .3s;
}
.conversation.conversationMailView .conversationStream .entry .messageFooter > .time {
  display: inline-flex;
  align-content: center;
  justify-content: center;
  box-sizing: border-box;
  font-size: 10px;
  font-weight: 300;
  color: #9c9c9c;
  line-height: 14px;
  align-items: center;
}
.conversation.conversationMailView .conversationStream .entry .messageFooter > .messageTypeHint {
  display: inline-flex;
  align-content: center;
  justify-content: center;
  box-sizing: border-box;
  font-size: 10px;
  font-weight: 300;
  color: #333333;
  line-height: 14px;
  align-items: center;
  padding: 0 6px;
}
.conversation.conversationMailView .conversationStream .entry .messageFooter .bookmarkHint {
  display: inline-flex;
  width: 16px;
  height: 16px;
  opacity: 0.8;
}
.conversation.conversationMailView .conversationStream .entry .messageFooter .messageStatusHint {
  display: inline-flex;
  width: 16px;
  height: 16px;
  opacity: 0.8;
}
.conversation.conversationMailView .conversationStream .entry .giftSubLink {
  color: #999999;
  padding: 20px;
}
.conversation.conversationMailView .conversationStream .entry .giftShow {
  padding: 10px;
  text-align: center;
}
.conversation.conversationMailView .conversationStream .entry .giftShow span {
  font-weight: 700;
  border-radius: 25px;
  padding: 15px 15px;
  cursor: pointer;
  margin-top: 10px;
  margin-bottom: 15px;
  border: 1px solid #47c6f8;
  color: #fff;
  background: #49ccff;
}
.conversation.conversationMailView .conversationStream .entry .giftShow span:hover {
  background: #ffa225;
  border: 1px solid #ffa225;
  transition: 0.5s;
}
.conversation.conversationMailView .conversationStream .entry .giftPre {
  text-align: center;
  padding: 5px;
  font-size: 90%;
  text-transform: uppercase;
  padding-bottom: 0;
  color: #999999;
}
.conversation.conversationMailView .conversationStream .entry .giftName {
  padding: 5px;
  text-align: center;
  color: #333333;
  font-weight: 600;
}
.conversation.conversationMailView .conversationStream .entry .giftIcon {
  padding: 5px;
  text-align: center;
}
.conversation.conversationMailView .conversationStream .entry .date {
  text-align: center;
  color: #333333;
  font-weight: bold;
  font-size: 90%;
  margin: 10px 0 5px 0;
  padding-bottom: 5px;
}
.conversation.conversationMailView .conversationStream .entry .data span {
  padding: 5px 0 5px;
}
.conversation.conversationMailView .conversationStream .entry .bookmarkHint {
  padding: 0 10px 10px 0;
  line-height: 14px;
}
.conversation.conversationMailView .conversationStream .entry .bookmarkHint img {
  max-height: 14px;
  padding: 0;
  margin: 0;
  transition: .7s;
  filter: grayscale(1);
}
.conversation.conversationMailView .conversationStream .entry .bookmarkHint img:hover {
  filter: none;
}
.conversation.conversationMailView .conversationStream .attachments .stats {
  margin: 5px;
}
.conversation.conversationMailView .conversationStream .attachmentLinkEntry {
  margin-left: 0;
  margin-right: 10px;
}
.conversation.conversationMailView .conversationStream .attachmentLinkEntry .options {
  display: none;
}
.conversation.conversationMailView .conversationStream .attachmentLinkEntry .numberOfShares {
  background: none;
  font-style: italic;
  margin-top: 0;
}
.conversation.conversationMailView .conversationStream .attachmentAddFrame {
  background: #fffee0;
  border-top: 1px solid #e1e1e1;
}
.conversation.conversationMailView .conversationStream .attachedPictures {
  margin: 1%;
  margin-bottom: 2px;
  min-height: 160px;
}
.conversation.conversationMailView .conversationStream .attachedPictures .image {
  width: 120px;
  height: 120px;
  margin: 0;
  margin-right: 1%;
  padding: 3px;
  background: #ffffff;
  border: 1px solid #e1e1e1;
  cursor: pointer;
}
.conversation.conversationMailView .conversationStream .attachedPictures .image:hover {
  background: #e1e1e1;
}
.conversation.conversationMailView .conversationStream .attachedPictures .image img {
  width: 120px;
  max-height: 120px;
}
.conversation.conversationMailView .conversationStream .attachedPictures .headline {
  font-size: 90%;
  padding: 6px 0 3px 0;
}
.conversation.conversationMailView .conversationStream .attachedLinks {
  margin: 15px 10px;
  padding-bottom: 10px;
  padding-top: 5px;
}
.conversation.conversationMailView .conversationStream .attachedLinks a.link,
.attachedLinks .link {
  width: 93%;
  display: block;
  padding: 0;
}
.conversation.conversationMailView .conversationStream .attachedLinks a.link .title,
.attachedLinks .link .title {
  font-size: 110%;
  color: #78b1e3;
}
.conversation.conversationMailView .conversationStream .attachedLinks a.link .text,
.attachedLinks .link .text {
  width: 75%;
  overflow: hidden;
}
.conversation.conversationMailView .conversationStream .attachedLinks .video {
  width: 93%;
}
.conversation.conversationMailView .conversationStream .attachedLinks .video .content {
  width: 80%;
}
.conversation.conversationMailView .conversationStream .attachedLinks .stats {
  font-size: 80%;
  color: #888888;
  margin-left: 3%;
}
.conversation.conversationMailView .conversationStream .attachedLinks .icon {
  width: 12%;
}
.conversation.conversationMailView .conversationStream .attachedLinks .icon img {
  width: 35px;
  height: 35px;
}
.conversation.conversationMailView .conversationStream .attachedLinks .headline {
  padding-bottom: 5px;
  font-style: italic;
  font-size: 90%;
  text-align: left;
}
.conversation.conversationMailView .conversationStream .answerlistOfUserWithImages.foreign .text {
  background: #ffffff;
  border: 1px solid #999999;
  color: #333333;
}
.conversation.conversationMailView .conversationStream .answer.own .time {
  text-align: left;
}
.conversation.conversationMailView .conversationStream .answer.own .text {
  background: #ebf3f6;
  border: 1px solid #aac9d8;
  color: #333333;
}
.conversation.conversationMailView .conversationStream .answer {
  margin: 3% 5% 3% 3%;
  width: 92%;
}
.conversation.conversationMailView .conversationStream .answer .time {
  font-size: 10px;
  color: #bdbdbd;
  padding: 2%;
  width: 20%;
}
.conversation.conversationMailView .conversationStream .answer .text {
  box-shadow: 1px 1px 2px #dedede;
  background: #FDD978;
  max-width: 75%;
  overflow: hidden !important;
  padding: 7px 8px;
  border-radius: 4px;
}
.conversation.conversationMailView .conversationStream .answer .text img {
  max-width: 320px !important;
}
.conversation.conversationMailView .conversationStream .answer .headline {
  color: #333333;
  font-weight: bold;
  border-top: 1px solid #e1e1e1;
  text-align: center;
  padding: 1%;
}
.conversation.conversationMailView .conversationComposeContainer {
  min-height: 215px;
}
.conversation.conversationMailView .conversationComposeContainer textarea {
  max-height: 50vh;
}
.conversation.conversationMailView .conversationComposeBar {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  gap: 3px;
  padding: 3px 9px;
}
.conversation.conversationMailView .conversationComposeBar .messageSubmit[disabled],
.conversation.conversationMailView .conversationComposeStatus button.messageSubmit[disabled]:hover {
  cursor: not-allowed;
  background-color: #999;
  border-color: #555;
  width: 42px;
  height: 42px;
  opacity: 0.5;
}
.conversation.conversationMailView .conversationComposeBar .messageSubmit {
  border: 1px solid #009fdd;
  color: #ffffff;
  background: url('//s.jappy.com/i/icon/unity/send.png') no-repeat center #00b8ff;
}
.conversation.conversationMailView .conversationComposeBar .messageSubmit:hover {
  background-color: #4ccbfc;
  width: 48px;
  height: 48px;
  padding: 12px;
}
.conversation.conversationMailView .conversationComposeBar .messageSubmit[disabled]:hover {
  width: 42px;
  height: 42px;
  background-color: #999;
  border-color: #555;
  opacity: 0.5;
}
.conversation.conversationMailView .conversationComposeBar .conversationComposeFeedback {
  min-width: 120px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;
  justify-content: flex-start;
}
.conversation.conversationMailView .conversationComposeBar .conversationComposeFeedback img,
.conversation.conversationMailView .conversationComposeBar .conversationComposeFeedback .vsic {
  height: 2em;
  width: 2em;
}
.conversation.conversationMailView .conversationComposeBar .conversationComposeFeedback #composeFeedbackDescription {
  padding: 3px 9px 3px 13px;
  font-size: 80%;
  color: #777;
  font-weight: 400;
  display: inline-flex;
  align-content: center;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: nowrap;
  flex-direction: column;
}
.conversation.conversationMailView .conversationComposeBar .conversationComposeFeedback #composeFeedbackDescription .timestampSpan {
  background: none;
  color: #666;
}
.conversation.conversationMailView .conversationComposeBar .buttonContainer {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: flex-end;
}
.conversation.conversationMailView .conversationComposeBar .buttonContainer > * {
  display: inline-block;
  border-radius: 50%;
  height: 42px;
  width: 42px;
  padding: 10px;
  cursor: pointer;
  background-size: cover;
  font-weight: 700;
  transition: 0.3s;
  box-sizing: border-box;
}
.conversation.conversationMailView .attachmentContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  flex-direction: row;
}
.conversation.conversationMailView .attachmentContainer > * {
  display: inline-flex;
  border-radius: 50%;
  cursor: pointer;
  background: #c0c0c0;
  border: 1px solid #b0b0b0;
  margin: 4px;
  width: 37px;
  height: 37px;
  transition: .3s;
  padding: 6px;
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
}
.conversation.conversationMailView .attachmentContainer > *:hover {
  background: #D0D0D0;
  margin: 2px;
  width: 41px;
  height: 41px;
}
.conversation.conversationMailView .attachmentContainer .vsic {
  width: 100%;
  height: 100%;
  min-width: 22px;
  min-height: 22px;
}
.conversation.conversationMailView #conversationComposeEditor {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-height: 12em;
  margin: auto;
  padding: 7px 9px;
  line-height: 1.5;
  font-size: 120%;
  resize: vertical;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-weight: 300;
  color: #000000;
  border: 1px solid #dcdcdc;
  border-radius: 10px;
  max-height: 90vh;
}
.conversation.conversationMailView .chatRequestStatus {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  border-width: 3px;
  border-style: solid;
  box-sizing: border-box;
  padding: 11px;
  border-radius: 11px;
  align-content: center;
  justify-content: space-evenly;
  align-items: stretch;
  justify-items: stretch;
  margin-bottom: 0.5em;
  grid-gap: 0.7em;
}
.conversation.conversationMailView .chatRequestStatus .vsic {
  grid-column: 1 / span 1;
  display: inline-flex;
  width: 40px;
  height: 40px;
}
.conversation.conversationMailView .chatRequestStatus .description {
  grid-column: 2 / span 1;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  font-size: 120%;
  line-height: 1.5;
}
.conversation.conversationMailView .chatRequestStatus .action {
  grid-column: 3 / span 1;
  display: inline-flex;
}
.conversation.conversationMailView .chatRequestStatus .action > * {
  display: inline-flex;
  border: 2px solid #ccc;
  background: #f0f0f0;
  border-radius: 9px;
  padding: 5px 13px;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  gap: 7px;
  color: #000;
  box-sizing: border-box;
  cursor: pointer;
  transition: .7s;
}
.conversation.conversationMailView .chatRequestStatus .action > *:hover {
  background: #fff;
  border-color: #fbb537;
}
.conversation.conversationMailView .chatRequestStatus .action > * > .vsic {
  width: 20px;
  height: 20px;
}
#conversationOptionLayer {
  background: rgba(30, 30, 30, 0.1);
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: fixed;
  z-index: 9000001;
  padding-top: 60px;
}
.conversation.conversationMailView .chatRequestStatus.offer {
  background: linear-gradient(270deg, #4ff0e4 0%, #a0fff8 100%);
  border-color: #7af2e9;
  font-weight: 700;
}
.conversation.conversationMailView .chatRequestStatus.expired {
  background: linear-gradient(270deg, #8F4CEC 0%, #6E18E5 100%);
  border-color: #7F32E9;
  color: #fff;
}
.conversation.conversationMailView .chatRequestStatus.accepted {
  background: linear-gradient(270deg, #c6f66b 0%, #bae95f 100%);
  border-color: #bdec62;
  color: #fff;
}
.conversation.conversationMailView .chatRequestStatus.declined {
  background: linear-gradient(270deg, #f56c6c 0%, #e85f5f 100%);
  border-color: #eb6363;
  color: #fff;
}
.conversation.conversationMailView .chatRequestStatus.contactChatRequestSettingDefault {
  border-color: #dadada;
  background: #dddddd;
  color: #848484;
  font-weight: 300;
  transition: .3s;
  opacity: .9;
}
.conversation.conversationMailView .chatRequestStatus.contactChatRequestSettingRestricted {
  border-color: #f5d95c;
  background: linear-gradient(45deg, #ffe567 0%, #ffe05a 100%);
}
.conversation.conversationMailView .chatRequestStatus.contactChatRequestSettingFreeForAll {
  border-color: #bdec62;
  background: linear-gradient(45deg, #c6f66b 0%, #bae95f 100%);
}
.conversation.conversationMailView .chatRequestStatus.contactChatRequestSettingIsolation {
  border-color: #7F32E9;
  background: linear-gradient(45deg, #8F4CEC 0%, #6E18E5 100%);
  color: #fff;
}
.conversation.conversationMailView .chatRequestStatus:hover {
  border-color: #fbb537;
}
.conversation.conversationMailView .chatRequestStatus.contactChatRequestSettingDefault:hover {
  color: #000;
  opacity: 1;
}
.conversation.conversationMailView .noticeList {
  margin: 13px;
  border-radius: 11px;
  padding: 7px;
  border: 2px solid #f5d95c;
  background: #fff6cc;
  color: #806d19;
  display: flex;
  flex-direction: column;
  gap: 7px;
  align-content: flex-start;
  justify-content: center;
  align-items: flex-start;
}
.conversation.conversationMailView .noticeList .noticeEntry {
  padding: 7px;
  font-weight: 800;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  align-items: baseline;
  justify-content: flex-start;
  gap: 3px;
}
#conversationOptionLayer .conversationActionMenu {
  max-width: 90vw;
  display: flex;
  flex-direction: column;
  width: 280px;
  background: #424242;
  border: 1px solid #333;
  font-weight: 600;
  border-radius: 15px;
  box-shadow: 0 2px 2px #cacaca;
  position: absolute;
  box-sizing: border-box;
  overflow: hidden;
}
#conversationOptionLayer .conversationActionMenu > * {
  display: flex;
  padding: 10px 15px;
  box-sizing: border-box;
  gap: 10px;
  align-content: center;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
  transition: .3s;
}
#conversationOptionLayer .conversationActionMenu > *:hover {
  background: #5a5a5a;
}
#conversationOptionLayer .conversationActionMenu > * > * {
  display: inline-flex;
  box-sizing: border-box;
}
#conversationOptionLayer .conversationActionMenu > * > .label {
  color: #ffffff !important;
  font-weight: 600;
  font-size: 100%;
}
#conversationOptionLayer .conversationActionMenu > * > .vsic {
  width: 25px;
  height: 25px;
}
#messageOptionLayer {
  background: rgba(30, 30, 30, 0.1);
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: fixed;
  z-index: 9000001;
  padding-top: 60px;
}
#messageOptionLayer .messageOptionMenu {
  max-width: 90vw;
  display: flex;
  flex-direction: column;
  width: 280px;
  background: #424242;
  border: 1px solid #333;
  font-weight: 600;
  border-radius: 15px;
  box-shadow: 0 2px 2px #cacaca;
  position: absolute;
  box-sizing: border-box;
  overflow: hidden;
}
#messageOptionLayer .messageOptionMenu > * {
  display: flex;
  padding: 10px 15px;
  box-sizing: border-box;
  gap: 10px;
  align-content: center;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
  transition: .3s;
}
#messageOptionLayer .messageOptionMenu > *:hover {
  background: #5a5a5a;
}
#messageOptionLayer .messageOptionMenu > * > * {
  display: inline-flex;
  box-sizing: border-box;
}
#messageOptionLayer .messageOptionMenu > * > .label {
  color: #ffffff !important;
  font-weight: 600;
  font-size: 100%;
}
#messageOptionLayer .messageOptionMenu > * > .vsic {
  width: 25px;
  height: 25px;
}
#messageDeleteConfirmLayer {
  background: rgba(30, 30, 30, 0.1);
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: fixed;
  z-index: 9000001;
  padding-top: 60px;
  display: flex;
  justify-items: center;
  align-items: center;
  justify-content: center;
}
#messageDeleteConfirmLayer .messageDeleteConfirmDialog {
  top: 60px !important;
  position: fixed !important;
  max-height: calc(20vh);
  overflow-y: auto;
  border: 1px solid #333;
  background: #424242;
  color: #eee;
  display: flex;
  flex-direction: column;
  gap: 17px;
  line-height: 1.5;
  padding: 17px 23px;
  border-radius: 23px;
  font-size: 15px;
  margin: 20px;
}
#messageDeleteConfirmLayer .messageDeleteConfirmDialog .caption {
  color: #fff;
  text-align: center;
  font-size: 120%;
  font-weight: 900;
}
#messageDeleteConfirmLayer .messageDeleteConfirmDialog .annotation {
  color: #aaa;
  text-align: center;
  font-size: 90%;
  font-weight: 400;
}
#messageDeleteConfirmLayer .messageDeleteConfirmDialog .actionArea {
  gap: 13px;
}
@media screen and (max-width: 800px) {
  #conversationOptionLayer .conversationActionMenu {
    top: 60px !important;
    left: 10px !important;
    position: fixed !important;
    margin-top: 0 !important;
    max-height: calc(80vh - 60px);
    overflow-y: auto;
  }
  #messageOptionLayer .messageOptionMenu {
    top: 60px !important;
    left: 10px !important;
    position: fixed !important;
    margin-top: 0 !important;
    max-height: calc(20vh);
    overflow-y: auto;
  }
  #messageDeleteConfirmLayer .messageDeleteConfirmDialog {
    padding: 17px;
  }
}
/* Bell Feed */
.layerNotifications {
  background: #e5e5e5;
  color: #282828;
  padding: 0;
  width: 100%;
}
.layerNotifications .headline {
  padding: 10px;
  font-size: 120%;
}
.layerNotifications .pointer {
  position: relative;
  margin-top: -30px;
  margin-left: 20px;
  z-index: 2;
}
.layerNotifications .text {
  max-height: 450px;
  min-height: 450px;
  overflow-y: scroll;
  padding: 0;
  padding-top: 5px;
}
.listOfNotifications {
  background: #ffffff;
  color: #333333;
  padding: 3%;
  width: 94%;
}
a.notificationEntry {
  width: 300px;
  display: block;
  float: left;
  padding-bottom: 4px;
  padding-top: 4px;
  border-radius: 15px;
  margin-bottom: 4px;
}
a.notificationEntry:hover {
  opacity: 1;
  cursor: pointer;
  background: #f1f1f1;
}
a.notificationEntry .preStamp {
  display: none;
}
a.notificationEntry.old {
  opacity: 0.9;
}
a.notificationEntry .userImage {
  float: left;
  width: 50px;
  text-align: right;
  padding-top: 7px;
}
a.notificationEntry .userImage .image img {
  border-radius: 50%;
  width: 40px;
}
a.notificationEntry .userImage .image img.attachedImage {
  border-radius: 3px;
}
a.notificationEntry .echoResponse {
  position: relative;
  margin-left: 22px;
  margin-top: -18px;
  z-index: 2;
}
a.notificationEntry .whatHappend {
  float: left;
  padding-left: 10px;
  padding-top: 12px;
  font-size: 100%;
  font-weight: 300;
  max-width: 200px;
  padding-bottom: 10px;
  color: #323232;
  line-height: 120%;
}
a.notificationEntry .reference {
  float: right;
  padding-right: 20px;
  padding-left: 5px;
  padding-top: 20px;
  width: 20px;
}
a.notificationEntry .timestamp {
  font-size: 80%;
  color: #969696;
}
a.notificationEntry .timestamp .tsShortTimeAgo,
.notificationEntry .timestamp .tsRecently {
  color: #969696 !important;
  border: none;
  background: none;
}
a.notificationEntry .attachedImageFull {
  margin-left: 80px;
  width: 250px;
  padding-bottom: 10px;
}
a.notificationEntry .attachedImageFull img {
  width: 100px;
}
a.notificationEntry .overlay {
  margin-top: -60px;
  z-index: 2;
  position: relative;
  padding-left: 20px;
  display: none;
}
a.notificationEntry.notificationType27.active {
  background: #6bffff;
}
a.notificationEntry.notificationType27.active .whatHappend {
  font-weight: 700;
  color: #000000;
}
a.notificationEntry.notificationType27.active:hover {
  background: #8fffff;
}
a.notificationEntry.notificationType28 {
  background: #fff473;
}
a.notificationEntry.notificationType28 .whatHappend {
  color: #000000;
}
a.notificationEntry.notificationType28:hover {
  background: #fffac0;
}
a.notificationEntry.notificationType11 {
  background: #fff473;
}
a.notificationEntry.notificationType11 .whatHappend {
  font-weight: 900;
  color: #000000;
}
a.notificationEntry.notificationType11:hover {
  background: #fffac0;
}
a.notificationEntry:hover .overlay {
  display: block;
}
.notificationFooter {
  padding: 12px 20px;
  text-align: center;
}
.notificationFooter:hover {
  background: #f1f1f1;
  color: #417bc4;
  cursor: pointer;
}
.entryFrame {
  width: 100%;
}
/* Geschenkelayer (Layer-Variante & Fallback-Webview) */
#giftLayer .frame {
  background: #ffffff;
  text-align: left;
}
#giftLayer .frame .giftHeaderNavigation {
  margin-bottom: 10px;
  padding-top: 10px;
}
#giftLayer .frame .giftHeaderNavigation a {
  color: #6c6c6c;
  border-bottom: 3px solid #e5e5e5;
  font-weight: 300;
  display: inline-block;
  padding: 5px 15px;
  margin-right: 5px;
  text-align: center;
}
#giftLayer .frame .giftHeaderNavigation a.active {
  background: none;
  font-weight: 600;
  color: #49ccff;
  border-bottom: 3px solid #49ccff;
}
#giftLayer .frame .giftHeaderNavigation a:hover {
  background: #d2d2d2;
}
#giftLayer .frame .giftHeaderNavigation a[disabled] {
  color: #6c6c6c;
  background: none;
  border-bottom: 3px solid #e5e5e5;
}
#giftLayer .frame .giftHeaderNavigation img {
  width: 30px;
  margin-right: 5px;
}
#giftLayer .frame .query {
  margin-bottom: 13px;
  display: flex;
  flex-flow: row wrap;
}
#giftLayer .frame .query .inputSection {
  width: 760px;
}
#giftLayer .frame .query .inputSection input {
  border: 1px solid #efefef;
  background: #efefef;
  padding: 10px;
  padding-top: 11px;
  width: 100%;
  text-indent: 10px;
  font-weight: 300;
  border-radius: 15px 0px 0px 15px;
}
#giftLayer .frame .query .inputSection input:active,
#giftLayer .frame .query .inputSection input:hover {
  border: 1px solid #64b5ff;
  background: #ffffff;
}
#giftLayer .frame .query .submitSection {
  width: 70px;
}
#giftLayer .frame .query .submitSection button {
  border: 1px solid #ff9933;
  padding: 10px;
  width: 100%;
  border-radius: 0px 15px 15px 0px;
  color: #fff;
  background: #ff9933;
  font-weight: 600;
}
#giftLayer .frame .query .submitSection button:hover {
  transition: 0.5s;
  animation: intoFocusLight 0.5s forwards;
}
#giftLayer .frame .giftHeaderFilter {
  text-align: right;
  margin-bottom: 7px;
}
#giftLayer .frame .giftHeaderFilter a {
  margin-left: 10px;
  color: #9c9c9c;
  font-weight: 300;
  display: inline-block;
  padding: 5px;
  border-bottom: 3px solid #e5e5e5;
  font-size: 90%;
}
#giftLayer .frame .giftHeaderFilter a.active {
  color: #49ccff;
  border-bottom: 3px solid #49ccff;
}
#giftLayer .frame .giftHeaderFilter a.unpacked {
  color: #ff007e;
  font-weight: 600;
  border-bottom: 3px solid #ff007e;
}
#giftLayer .frame .entryList {
  background: #fff;
  padding: 7px;
  border-radius: 10px;
  min-height: 560px;
}
#giftLayer .frame .entryList .entity {
  float: left;
  cursor: pointer;
}
#giftLayer .frame .pager {
  display: grid;
  grid-template-columns: auto 15% 10% 15%;
}
#giftLayer .frame .pager > * {
  min-height: 1px;
}
#giftLayer .frame .pager .numberOfEntries {
  grid-column: 1;
  font-size: 120%;
  text-indent: 30px;
  font-weight: 300;
  color: #a5a5a5;
  padding-top: 10px;
}
#giftLayer .frame .pager .navigationPrevious {
  grid-column: 2;
}
#giftLayer .frame .pager .navigationPrevious button {
  display: inline-block;
  border: 1px solid #ff9933;
  border-radius: 15px 0px 0px 15px;
  width: 100%;
  height: 32px;
  border-right: none;
  background: #ff9933;
  color: #ffffff;
  font-weight: 600;
}
#giftLayer .frame .pager .navigationPageSelection {
  grid-column: 3;
}
#giftLayer .frame .pager .navigationPageSelection select {
  border: 1px solid #dbdbdb;
  width: 100%;
  padding: 7px;
  text-align: center;
  background: #fff;
  height: 32px;
}
#giftLayer .frame .pager .navigationNext {
  grid-column: 4;
}
#giftLayer .frame .pager .navigationNext button {
  display: inline-block;
  border: 1px solid #ff9933;
  border-radius: 0px 15px 15px 0px;
  width: 100%;
  height: 32px;
  border-left: none;
  background: #ff9933;
  color: #ffffff;
  font-weight: 600;
}
#giftLayer .frame .pager .navigationPrevious button:hover,
#giftLayer .frame .pager .navigationNext button:hover {
  transition: 0.5s;
  animation: intoFocusLight 0.5s forwards;
}
#giftLayer .frame .detail {
  background: #fff;
  border-radius: 10px;
}
#giftLayer .frame .detail .left {
  float: left;
  width: 300px;
  margin-right: 20px;
}
#giftLayer .frame .detail .left .icon {
  text-align: center;
}
#giftLayer .frame .detail .left .icon img {
  width: 256px;
  height: 256px;
  background-size: contain;
  background-repeat: no-repeat;
}
#giftLayer .frame .detail .left .name {
  text-align: center;
  font-weight: 700;
  margin-top: 10px;
  color: #333;
  font-size: 120%;
  padding: 5px;
}
#giftLayer .frame .detail .left .value,
#giftLayer .frame .detail .left .packageCost {
  text-align: center;
  margin-top: 7px;
  margin-bottom: 10px;
}
#giftLayer .frame .detail .left .valueSpan {
  background: #ffedb0;
  padding: 7px 15px;
  font-weight: 300;
  border-radius: 20px;
  color: #919191;
}
#giftLayer .frame .detail .left .valueSpan.discounted {
  text-decoration: line-through;
  background: none;
  color: #626262;
  font-weight: 300;
}
#giftLayer .withEffect {
  background: none;
  background: linear-gradient(90deg, #ffc50f 0%, #f43a85 100%);
  color: #ffffff;
}
#giftLayer .frame .detail .left .discount {
  color: #fff;
  background: #6cce00;
  font-weight: 900;
  padding: 5px;
  border-radius: 5px;
}
#giftLayer .frame .detail .left .voucher {
  color: #ffedf6;
  background: #f01d86;
  font-weight: 600;
  padding: 5px;
  border-radius: 5px;
}
#giftLayer .frame .detail .right {
  float: left;
  width: 500px;
}
#giftLayer .frame .detail .right .meta {
  color: #555;
  font-size: 10px;
  margin-bottom: 10px;
  margin-top: 20px;
}
#giftLayer .frame .detail .right .message {
  background: #ffffff;
  color: #000000;
  border: 1px solid #23c2ff;
  font-weight: 300;
  font-size: 150%;
  line-height: 180%;
  border-radius: 10px;
  padding: 15px;
}
#giftLayer .frame .detail .right .messageEmpty {
  color: #d8d8d8;
  font-size: 110%;
  font-weight: 300;
  font-style: italic;
  padding: 15px 0;
}
#giftLayer .packageInfo {
  padding: 5px;
  font-size: 90%;
  color: #333333;
  margin-top: 20px;
}
#giftLayer .packageInfo img {
  border-radius: 50px;
  background: #e1e1e1;
  width: 35px;
  height: 35px;
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 5px;
}
#giftLayer .isSetRedeemed {
  padding: 5px;
  font-size: 90%;
  color: #333333;
}
#giftLayer .isSetRedeemed img {
  width: 35px;
  height: 35px;
  margin-right: 5px;
}
#giftLayer .frame .detail .comments {
  margin-bottom: 17px;
}
#giftLayer .frame .detail .comments .caption {
  font-size: 120%;
  font-weight: 600;
  padding: 12px 0px;
}
#giftLayer .frame .detail .comments .comment.sender .meta {
  text-align: right;
}
#giftLayer .frame .detail .comments .comment.sender .message {
  margin-left: 25%;
}
#giftLayer .frame .detail .comments .comment.receiver .message {
  margin-right: 25%;
}
#giftLayer .frame .actions {
  margin-top: 20px;
  padding-bottom: 10px;
}
#giftLayer .frame .actions button {
  text-align: center;
  background: #fff;
  border: 1px solid #e5e5e5;
  color: #585858;
  min-height: 50px;
  cursor: pointer;
  font-size: 100%;
  padding: 15px 25px;
  margin: 0 3px 3px 0;
  border-radius: 20px;
  display: inline-block;
  float: left;
}
#giftLayer .frame .actions button:hover {
  transition: 0.5s;
  animation: intoFocusLight 0.5s forwards;
}
#giftLayer .frame .actions button.action {
  background: #d8489e;
  background: linear-gradient(45deg, #fe559b 0%, #ff4c71 100%);
  border: 2px solid #df1632;
  color: #ffffff;
  font-weight: 600;
}
#giftLayer .frame .actions button[disabled] {
  background: #aaa;
  border: 1px solid #999;
  color: #fff;
  cursor: not-allowed;
}
#giftLayer .frame .actions button[disabled]:hover {
  background: #aaa;
}
#giftLayer .frame .actions button img {
  width: 25px;
}
#giftLayer .frame .actions button.withIcon {
  padding: 10px 15px;
}
#giftLayer .frame .detail .right .actions #addToWishlist {
  background: #ff9933;
  background: linear-gradient(45deg, #ffc51b 0%, #fee540 100%);
  border: 1px solid #ffb635;
  font-weight: 600;
  font-size: 100%;
}
#giftLayer .frame .detail .right .actions #removeFromWishlist {
  background: #fffa6c;
  color: #000000;
  border: 1px solid #f1ed6d;
  background: linear-gradient(120deg, #fffa6c 0, #fffa50 100%);
  font-weight: 700;
}
#giftLayer .frame .detail .right .options {
  padding-top: 10px;
}
#giftLayer .frame .detail .right .options .caption {
  padding: 7px;
  font-weight: 700;
}
#giftLayer .frame .detail .right .options .addonEntry {
  float: left;
  cursor: pointer;
  margin-right: 2px;
  margin-bottom: 3px;
  display: inline-block;
  background: #e5e5e5;
  border-radius: 20px;
  color: #484848;
  padding: 7px 15px 7px 10px;
  font-weight: 300;
  font-size: 100%;
}
#giftLayer .frame .detail .right .options .addonEntry img {
  width: 30px;
  vertical-align: middle;
  margin-right: 5px;
  background-size: contain;
  background-repeat: no-repeat;
}
#giftLayer .frame .detail .right .options .addonEntry:hover {
  background: #696969;
  color: #ffffff;
  transition: 0.5s;
}
#giftLayer .frame .subsection {
  margin-bottom: 13px;
  position: relative;
}
#giftLayer .frame .subsection > .caption {
  padding: 7px;
  height: 36px;
  cursor: pointer;
}
#giftLayer .frame .subsection > .caption .text,
#giftLayer .frame .captionTitle {
  font-size: 120%;
  font-weight: 600;
  padding: 12px 0px;
}
#giftLayer .frame .subsection > .caption .more {
  float: right;
  color: #6c6c6c;
  background: #e3e3e3;
  font-weight: 300;
  display: inline-block;
  padding: 5px 20px;
  margin-right: 5px;
  border-radius: 10px;
  text-align: center;
  margin-top: 5px;
}
#giftLayer .frame .subsection .scrollSection {
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  height: 120px;
  background: #fff;
  border-radius: 10px;
}
#giftLayer .frame .subsection .scrollSection::-webkit-scrollbar {
  width: 0px;
  height: 2px;
}
#giftLayer .frame .subsection .scrollSection::-webkit-scrollbar-button {
  color: #333333;
}
#giftLayer .frame .subsection .scrollSection::-webkit-scrollbar-thumb {
  color: #333333;
  background: #e5e5e5;
}
#giftLayer .frame .subsection .scrollSection::-webkit-scrollbar-track {
  color: #333333;
  background: #f1f1f1;
}
#giftLayer .frame .subsection .scrollSection {
  scrollbar-color: #e5e5e5 #f1f1f1;
  scrollbar-width: thin;
}
#giftLayer .frame .subsection .scrollSection .giftEntity {
  cursor: pointer;
}
#giftLayer .frame .subsection .scrollSection .giftEntity:hover {
  color: inherit;
  text-decoration: none;
}
#giftLayer .frame .subsection .scrollBack,
#giftLayer .frame .subsection .scrollNext {
  background: #f0f0f0;
  color: #333;
  display: inline-block;
  position: absolute;
  width: 24px;
  height: 120px;
  z-index: 1000;
  cursor: pointer;
  opacity: 0.8;
  text-align: center;
  vertical-align: middle;
  line-height: 120px;
}
#giftLayer .frame .subsection .scrollBack:hover,
#giftLayer .frame .subsection .scrollNext:hover {
  opacity: 1.0;
  background: #49ccff;
}
#giftLayer .frame .subsection .scrollBack {
  left: 0px;
  border-bottom-left-radius: 10px;
  border-top-left-radius: 10px;
}
#giftLayer .frame .subsection .scrollNext {
  right: 0px;
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
}
#giftLayer .frame #giftMessage {
  width: 100%;
  height: 4em;
  border: none;
}
#giftLayer .frame .wrapperEditor .msPreview {
  margin-bottom: 7px;
  padding-bottom: 7px;
  border-bottom: 1px solid #d3d3d3;
}
#giftLayer .frame .wrapperEditor .editor .features {
  min-width: 100px;
  max-width: 100px;
}
#giftLayer .frame #transferMessage {
  padding: 13px;
  margin-bottom: 7px;
  font-weight: 800;
}
#giftLayer .frame .more > .caption {
  padding: 7px;
  font-size: 200%;
  color: #999;
  margin-top: 27px;
  margin-bottom: 27px;
}
#giftLayer .frame .info {
  background: #d8eafc;
  color: #1e87f0;
  padding: 13px;
  border-radius: 11px;
  margin: 7px 0;
  font-weight: 700;
}
#giftLayer .frame .error {
  background: #fef4f6;
  color: #f0506e;
  padding: 13px;
  border-radius: 11px;
  margin: 7px 0;
  font-weight: 700;
}
#giftLayer .editor .features {
  display: none;
}
#giftLayer .back {
  width: 35px;
  padding: 5px;
  margin-left: 10px;
  cursor: pointer;
}
.giftEntity {
  display: inline-block;
  position: relative;
  width: 120px;
  height: 120px;
  cursor: pointer;
  margin-left: 10px;
}
.giftEntity .icon {
  width: 120px;
  height: 89px;
}
.giftEntity .icon img {
  width: 120px;
  height: 82px;
  background-position: center;
  box-sizing: border-box;
  position: absolute;
  top: 0px;
  left: 0px;
  background-size: contain;
  background-repeat: no-repeat;
}
.giftEntity .caption {
  text-overflow: ellipsis;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
  top: 90px;
  left: 10px;
  right: 10px;
  padding: 5px;
  text-align: center;
  color: #8a8a8a;
  font-weight: 500;
}
.giftEntity .caption img {
  width: 11px;
  height: auto;
}
.giftEntity .transferPrice,
.giftEntity .isNotAvailable,
.giftEntity .voucher,
.giftEntity .discount,
.giftEntity .privacy,
.giftEntity .withEffect {
  position: absolute;
  border-radius: 5px;
  padding: 5px;
  font-size: 11px;
}
.giftEntity .discount {
  top: 35px;
  right: 0px;
  color: #fff;
  background: #6cce00;
  font-weight: 900;
}
.giftEntity .voucher {
  top: 35px;
  right: 0px;
  color: #ffedf6;
  background: #f01d86;
  font-weight: 600;
}
.giftEntity .privacy.private {
  top: 68px;
  right: 0px;
  color: #666666;
  background: #e1e1e1;
  font-weight: 900;
}
.giftEntity .privacy img {
  height: 1em;
}
.giftEntity .transferPrice {
  right: 0;
  top: 60px;
  color: #fff;
  background: #ffa225;
}
.giftEntity .transferPrice.isNotAvailable {
  color: #666666;
  background: #f8f8f8;
  opacity: 0.8;
  filter: grayscale();
}
.giftEntity .transferPrice img {
  width: 11px;
  height: auto;
}
.giftEntity:hover {
  transition: 0.5s;
  animation: intoFocusLight 0.5s forwards;
}
.giftEntity:hover .caption {
  text-decoration: underline;
}
/* Overrides für die Layer-Variante des GiftLayers (greifen nicht für die Fallback-Variante) */
#giftLayer.layer {
  background: rgba(0, 0, 0, 0.15);
  text-align: center;
  width: 100%;
  height: 100%;
}
#giftLayer.layer .frame {
  max-height: 85vh;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  display: inline-block;
  width: 850px;
  padding: 25px;
  border-radius: 10px;
  border: 1px solid #bfbfbf;
}
#giftLayer.layer .frame::-webkit-scrollbar {
  width: 8px;
}
#giftLayer.layer .frame::-webkit-scrollbar-button {
  color: #333333;
}
#giftLayer.layer .frame::-webkit-scrollbar-thumb {
  color: #333333;
  background: #ff9933;
}
#giftLayer.layer .frame::-webkit-scrollbar-track {
  color: #333333;
  background: #E5E5E5;
}
#giftLayer.layer .frame .pager .numberOfEntries {
  grid-column: 1;
}
/* Overrides für die Fallback-Variante des GiftLayers */
#giftLayer.fallback {
  width: 790px;
}
#giftLayer.fallback .frame {
  margin-left: 20px;
  width: 750px;
  padding-top: 15px;
  border-radius: 10px;
}
#giftLayer.fallback .return {
  padding: 5px 25px;
}
#giftLayer.fallback .return a {
  color: #6c6c6c;
  background: #ddd;
  font-weight: 300;
  display: inline-block;
  padding: 12px 25px;
  margin-right: 5px;
  border-radius: 20px;
  text-align: center;
}
#giftLayer.fallback .return a img {
  height: 3em;
  border-radius: 50%;
}
.giftConfirmLayer {
  background: rgba(0, 0, 0, 0.15);
  text-align: center;
  width: 100%;
  height: 100%;
}
.giftConfirmLayer .frame {
  display: inline-block;
  width: 320px;
  background: #fff;
  border: 3px solid #d9b033;
  border-radius: 15px;
  background: linear-gradient(30deg, #ffd247 0, #ffda69 100%);
  padding: 20px;
}
.giftConfirmLayer .frame p {
  padding-bottom: 7px;
  line-height: 1.5;
}
.giftConfirmLayer .frame .headline {
  line-height: 1.5;
  font-size: 110%;
  font-weight: 900;
  padding-bottom: 10px;
}
.giftConfirmLayer .frame .sub {
  font-size: 90%;
  padding: 10px;
  color: #795b00;
}
.giftConfirmLayer .frame .layerActions {
  padding-bottom: 10px;
  text-align: center;
  padding-top: 10px;
  width: 250px;
  margin: auto;
}
.giftConfirmLayer .frame .layerActions button {
  text-align: center;
  min-width: 250px;
  background: #ffe185;
  border: 1px solid #fecd36;
  color: #271d00;
  cursor: pointer;
  font-size: 100%;
  padding: 15px 20px;
  margin: 0 3px 3px 0;
  border-radius: 20px;
  display: inline-block;
  float: left;
}
.giftConfirmLayer .frame .layerActions button:hover {
  transition: 0.5s;
  animation: intoFocusLight 0.5s forwards;
}
.giftConfirmLayer .frame .layerActions button.action {
  color: #ffffff;
  background: #d8489e;
  background: linear-gradient(45deg, #fe559b 0%, #ff4c71 100%);
  border: 1px solid #df1632;
  font-weight: 600;
  min-width: 250px;
}
.giftConfirmLayer .frame .layerActions button[disabled] {
  background: #aaa;
  border: 1px solid #999;
  color: #fff;
  cursor: not-allowed;
}
.giftHeaderUser .userImage {
  float: left;
  margin-left: 15px;
}
.giftHeaderUser .userImage img {
  width: 40px;
  border-radius: 50%;
}
.giftHeaderUser .nickname {
  float: left;
  font-size: 130%;
  font-weight: 500;
  padding: 10px;
}
.giftHeaderUser .myAccount {
  float: right;
  font-size: 160%;
  font-weight: 700;
  color: #484848;
}
.giftHeaderUser .myAccount a {
  color: #4ecdff;
}
.giftHeaderUser .myAccount img {
  width: 40px;
  vertical-align: middle;
  margin-left: 5px;
}
.giftPackageList .packageEntry {
  display: inline-block;
  position: relative;
  width: 120px;
  cursor: pointer;
  margin-left: 5px;
  margin-bottom: 5px;
  height: 150px;
  border-radius: 10px;
  background: #e5e5e5;
  padding: 3px;
  color: #8a8a8a;
  font-weight: 500;
}
.giftPackageList .packageEntry .packageImage {
  width: 120px;
  height: 120px;
  background-size: contain;
  background-repeat: no-repeat;
}
.giftPackageList .packageEntry .price {
  position: absolute;
  border-radius: 5px;
  padding: 5px;
  font-size: 11px;
  right: 7px;
  top: 80px;
  color: #fff;
  background: #ffa225;
}
.giftPackageList .packageEntry .price.free {
  color: #ffedf6;
  background: #f01d86;
  font-weight: 600;
}
.giftPackageList .packageEntry .title {
  text-overflow: ellipsis;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
  top: 120px;
  left: 10px;
  right: 10px;
  padding: 5px;
  text-align: center;
}
.giftPackageList .packageEntry:hover {
  background: #dcdcdc;
}
.giftPackageList .packageEntry.active {
  background: #666666;
  color: #ffffff;
  font-weight: 600;
}
#giftLayer .unpack {
  padding: 30px;
  margin: auto;
  line-height: 150%;
  text-align: center;
}
#giftLayer .unpack .icon img {
  margin: auto;
  width: 200px;
  height: 200px;
  box-sizing: border-box;
  top: 0px;
  left: 0px;
  background-size: contain;
  background-repeat: no-repeat;
}
#giftLayer .frame .unpack .actions button {
  float: none;
}
#giftLayer .frame .unpack .actions .unpackButton {
  font-weight: 700;
  border-radius: 25px;
  padding: 15px 15px;
  cursor: pointer;
  margin-top: 10px;
  margin-bottom: 15px;
  color: #fff;
  background: #d8489e;
  background: linear-gradient(45deg, #fe559b 0%, #ff4c71 100%);
  border: 1px solid #df1632;
  min-width: 250px;
}
#giftLayer .frame .unpack .actions .denyButton {
  background: none;
  border: none;
  margin-top: 5px;
  text-decoration: underline;
}
#giftLayer .unpack .value span {
  background: #ffda69;
  padding: 5px;
  font-weight: 600;
  border-radius: 5px;
}
#giftLayer .unpack .infoText {
  padding: 10px;
}
/* Sets */
.giftVariant {
  display: block;
  float: left;
  width: 128px;
  height: 128px;
  padding: 10px;
  background: #e1e1e1;
  border: 3px solid #e1e1e1;
  background: linear-gradient(45deg, #e1e1e1 0%, #f1f1f1 100%);
  border-radius: 15px;
  margin-right: 15px;
  margin-bottom: 35px;
}
.giftVariant.fulfilled {
  background: linear-gradient(45deg, #ff9933 0%, #ffd237 100%);
  border: 3px solid #ffb134;
}
.giftVariant:hover {
  box-shadow: 0 0 15px #ffe000;
  animation: hoverCard 0.2s forwards;
  animation-iteration-count: 1;
  animation-timing-function: ease-out;
}
.giftVariant .image {
  width: 128px;
}
.giftVariant a {
  display: block;
}
.giftVariant .giftName {
  position: relative;
  margin-top: 20px;
  background: #ffffff;
  padding: 5px 10px;
  color: #000000;
  font-size: 110%;
  font-weight: 300;
}
.giftVariant .missing {
  position: relative;
  margin-top: -170px;
  font-family: 'Luckiest Guy', cursive;
  color: #ea008d;
  font-size: 110%;
}
.giftSets {
  padding: 0 15px;
}
.giftSets .setName {
  font-family: 'Luckiest Guy', cursive;
  font-size: 180%;
  font-weight: 500;
  padding: 10px 0;
  color: #ff7a17;
}
.giftSets .headline,
.giftSets .setBonus {
  font-size: 120%;
  font-weight: 300;
  padding: 15px 0;
  color: #666666;
}
.giftSet p {
  font-size: 90%;
  color: #9c9c9c;
}
a.giftSetLine {
  display: block;
  color: #dddddd;
  border-radius: 15px;
  margin-bottom: 5px;
}
a.giftSetLine:hover {
  background: #f1f1f1;
  transition: 0.5s;
  animation: intoFocusSoft 0.5s forwards;
}
a.giftSetLine .setIcon {
  float: left;
  width: 90px;
  text-align: center;
}
a.giftSetLine .setIcon img {
  width: 60px;
}
a.giftSetLine .setName {
  float: left;
  font-size: 140%;
  font-weight: 900;
  padding: 10px 10px;
  color: #ff7a17;
}
a.giftSetLine .setProgress {
  padding: 10px 0;
  font-size: 70%;
  color: #a5a5a5;
  font-weight: 400;
}
a.giftSetLine .setProgress.finished {
  color: #2db4e8;
  font-weight: 900;
}
.rewardTitle {
  font-family: 'Luckiest Guy', cursive;
  font-size: 140%;
  padding: 5px 0;
  color: #49ccff;
}
.setAchievement img {
  width: 128px;
}
.dataTable {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: center;
  align-items: flex-start;
  gap: 5px;
  min-width: 360px;
  max-width: 100vw;
}
.dataTable .dataLine {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  gap: 3px;
  min-width: 360px;
  max-width: 100vw;
}
.dataTable .dataIcon {
  padding: 2px;
  width: 24px;
}
.dataTable .dataIcon img {
  width: 17px;
  height: 17px;
}
.dataTable .dataText {
  padding: 5px;
  width: 80px;
}
.dataTable .dataData {
  padding: 5px 10px;
  width: 220px;
}
.dataTable a {
  color: #16beff;
  font-weight: 600;
}
@media screen and (max-width: 800px) {
  #giftLayer.layer .frame {
    width: 98%;
    padding: 1%;
  }
  #giftLayer .frame .query {
    width: 100%;
  }
  #giftLayer .frame .query .inputSection {
    width: 230px;
  }
  #giftLayer.layer .frame {
    border-radius: 0;
  }
  #giftLayer .frame .giftHeaderNavigation a {
    padding: 10px 10px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 70px;
    height: 25px;
  }
  #giftLayer .frame .giftHeaderNavigation .optional {
    display: none;
  }
  #giftLayer .frame .giftHeaderFilter a {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 50px;
  }
  #giftLayer.layer .frame .right {
    width: 320px;
  }
  #giftLayer .frame .detail {
    width: 320px;
    margin: auto;
  }
  #giftLayer .frame #giftMessage {
    height: 3em;
  }
  #giftLayer .frame .detail .left .icon img {
    width: 128px;
    height: 128px;
  }
  #giftLayer .frame .detail .right .options .addonEntry.addText {
    display: inline-block !important;
  }
  #giftLayer .frame .detail .right .options .addonEntry {
    text-overflow: ellipsis;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    width: 40%;
  }
  #giftLayer .frame .pager {
    grid-template-columns: auto 20% 22% 20%;
  }
  #giftLayer .frame .detail .messageEditor {
    display: none;
  }
  #giftLayer.fallback {
    width: 100%;
  }
  #giftLayer.fallback .frame {
    margin-left: 0px;
    width: 100%;
  }
  #giftLayer .frame .actions button {
    padding: 15px 15px;
  }
  .giftPackageList .packageEntry {
    width: 95px;
    margin-left: 3px;
  }
  .giftPackageList .packageEntry .packageImage {
    width: 95px;
    height: 95px;
  }
  .giftPackageList {
    width: 320px;
    margin: auto;
  }
  .giftSets .breakdown {
    width: 340px;
  }
  .giftEntity {
    width: 100px;
    height: 120px;
  }
  a.giftSetLine .setName {
    max-width: 220px;
  }
  .giftEntity {
    margin-left: 0;
  }
  .actions button.wishlist img {
    display: none;
  }
}
.pinBox {
  font-size: 100%;
  line-height: 1.3;
  border-radius: 10px;
}
.pinBox.styled {
  background: #fff;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 15px;
}
.pinBox .pinBoxIcon {
  display: grid;
  grid-template-columns: calc(20% - 5px) calc(20% - 5px) calc(20% - 5px) calc(20% - 5px) calc(20% - 5px);
  align-items: center;
  justify-items: center;
  grid-gap: 5px;
}
.pinBox .pinBoxIcon button {
  cursor: pointer;
}
.pinBox .pinBoxIcon .pin {
  display: inline-block;
  width: 60px;
  height: 60px;
  border: none;
  border-radius: 15px;
  padding: 10px;
  box-sizing: border-box;
}
.pinBox .pinBoxIcon .priority {
  width: 60px;
  height: 60px;
}
.pinBox .pin.unset {
  background: #ccc;
  opacity: .7;
}
.pinBox .pinBoxList {
  margin-top: 7px;
  display: grid;
  grid-template-columns: 100%;
  grid-gap: 7px;
}
.pinBox .pinBoxList .pin {
  display: grid;
  grid-template-columns: 40px auto;
  align-items: center;
  justify-items: left;
  padding: 3px 10px;
  border: none;
  grid-gap: 20px;
  cursor: pointer;
  border-radius: 15px;
}
.pinBox .pinBoxList .pin img,
.pinBox .pinBoxIconList .pin .content {
  display: inline-block;
}
.pinBox .pinBoxList .pin img {
  width: 40px;
  height: 40px;
}
.pinBox .pinBoxList .pin .content {
  align-self: center;
  justify-self: start;
}
.pinBox .pinBoxList .pin:hover {
  animation: intoFocusLight 0.5s forwards;
}
.pinBox .pinBoxList .pin:hover img {
  animation: intoFocus 0.5s forwards;
  animation-delay: 0.2s;
}
.pinBox .pinBoxIcon .active {
  box-shadow: 0px 0px 5px 3px #ea5800;
}
.pinBox .pinBoxList .own {
  display: grid;
  grid-template-columns: auto 40px;
  grid-template-rows: 50% 50%;
  grid-gap: 2px;
}
.pinBox .pinBoxList .own .pin {
  grid-column: 1 / span 1;
  grid-row: 1 / span 2;
  align-items: center;
  justify-items: center;
  cursor: pointer;
}
.pinBox .pinBoxList .own .pin.pinListUp {
  grid-row: 1 / span 1;
}
.pinBox .pinBoxList .own .pin.pinListDown {
  grid-row: 2 / span 1;
}
.pinBox .pinBoxList .own .pin.pinListUp,
.pinBox .pinBoxList .own .pin.pinListDown {
  padding: 0;
  align-items: center;
  justify-items: center;
  opacity: .7;
  transition: .4s;
  cursor: pointer;
  grid-column: 2 / span 1;
}
.pinBox .pinBoxList .own .pin.pinListUp img,
.pinBox .pinBoxList .own .pin.pinListDown img {
  height: 10px;
  width: 10px;
}
.pinBox .pinBoxList .own .pin.pinListFlip:hover,
.pinBox .pinBoxList .own .pin.pinListUp:hover,
.pinBox .pinBoxList .own .pin.pinListDown:hover {
  opacity: 1;
  transition: .4s;
}
.pinBox .pinBoxList .own .pin.unset {
  grid-column: 1 / span 4;
}
.pinBox .alert {
  padding: 10px;
  line-height: 140%;
  font-size: 120%;
  font-weight: 300;
}
.pinBox .match {
  box-shadow: 0px 0px 5px 5px #ffe178;
}
.pinBox .pinBoxList.hasExpiration .pin {
  grid-template-columns: 40px auto 40px;
}
.pinBox .pinBoxList.hasExpiration .pin .expiration img {
  filter: brightness(0.7);
}
.selectPinCat {
  padding: 10px 0 20px 10px;
}
.selectPinCat .entry {
  width: 115px;
  min-height: 115px;
  float: left;
}
.selectPinCat .entry button {
  border: 1px solid #efefef;
  background: #f3f3f3;
  cursor: pointer;
  border-radius: 15px;
  color: #555555;
  display: inline-block;
  line-height: 2em;
  text-align: center;
  font-weight: 300;
  width: 110px;
  min-height: 110px;
  font-size: 1em;
}
.selectPinCat .entry img {
  width: 80px;
}
.selectPinCat .entry button:hover {
  animation: intoFocusLight 0.5s forwards;
}
.selectPinCatDyn {
  display: flex;
  justify-content: space-evenly;
  align-content: stretch;
  align-items: stretch;
  flex-wrap: nowrap;
  flex-direction: row;
}
.selectPinCatDyn button {
  border: 1px solid #efefef;
  background: #f3f3f3;
  cursor: pointer;
  border-radius: 15px;
  padding: 7px;
  color: #555555;
  display: inline-block;
  line-height: 2em;
  text-align: center;
  font-weight: 300;
  width: 110px;
  font-size: 1em;
}
#pinLayer {
  right: 0px;
  bottom: 0px;
  background: rgba(0, 0, 0, 0.65);
  width: 100%;
  padding-top: 10px;
  display: grid;
}
#pinLayer > .layerWrapper {
  padding-bottom: 100px;
  justify-self: center;
  align-self: center;
}
#pinLayer .container {
  max-width: 600px;
  background: #fff;
  min-width: 400px;
  border-radius: 10px;
  padding: 25px;
}
#pinLayer .pinBox {
  border-radius: 0;
}
#pinLayer .head {
  display: flex;
  align-items: center;
  color: #484848;
  height: 3.5em;
  max-width: 100%;
  background: #fff;
}
#pinLayer .head .caption {
  flex-grow: 1;
  margin: .5em 1em;
  font-weight: 700;
  font-size: 1.3em;
  text-overflow: ellipsis;
}
#pinLayer .head button {
  border: 1px solid #c7c7c7;
  background: #d5d5d5;
  cursor: pointer;
  border-radius: 15px;
  color: #333333;
  display: inline-block;
  height: 2.5em;
  margin: .5em;
  line-height: 2em;
  text-align: center;
  font-weight: 300;
  padding: 2px 10px;
}
#pinLayer .quicksearch input {
  padding: 10px;
  border-radius: 15px;
  border: 1px solid #e1e1e1;
  text-indent: 10px;
  font-weight: 300;
}
#pinLayer .quicksearch {
  padding: 10px 20px 0 10px;
}
#pinLayer .pinGrid {
  display: grid;
  grid-template-columns: calc(25% - 7px) calc(25% - 7px) calc(25% - 7px) calc(25% - 7px);
  grid-gap: 7px;
  margin-bottom: 21px;
}
#pinLayer .pinGrid .pin {
  display: grid;
  grid-template-columns: 100%;
  border-radius: 15px;
  align-items: center;
  justify-items: center;
  padding: 5px;
  grid-gap: 7px;
  border: none;
  box-sizing: border-box;
}
#pinLayer .pinGrid .pin:hover {
  animation: intoFocusLight 0.5s forwards;
}
#pinLayer .pinGrid .pin:hover img {
  animation: intoFocus 0.5s forwards;
  animation-delay: 0.2s;
}
#pinLayer .pinGrid .pin img {
  max-width: 40%;
}
#pinLayer .pinGrid.pincatz9u08lb5 {
  grid-template-columns: 50% 50%;
}
.pindcv9fk5ijc {
  background: #ffffff;
  border: 2px solid #f7f7f7 !important;
  color: #7d7d7d;
  font-weight: 400;
}
.pindcv9fk5ijc.special {
  border: 2px solid #555555 !important;
  color: #ffffff;
  font-weight: 700;
}
/* pink */
.pindc6uihkh1g {
  background: linear-gradient(120deg, #fb43cb 0%, #d651e6 100%);
  border: 2px solid #fcaaff !important;
  color: #ffffff;
  font-weight: 600;
}
/* yellow/orange */
.pindc74hkopa3 {
  background: linear-gradient(120deg, #ffec3a 0, #ffd237 100%);
  border: 2px solid #ffd237 !important;
  color: #333333;
  font-weight: 400;
}
/* red */
.pindclgtisq2r {
  background: linear-gradient(120deg, #fe2b81 0%, #ff5aa1 100%);
  border: 2px solid #fe398a !important;
  color: #ffffff;
  font-weight: 600;
}
/* leucht-gruen */
.pindcc2a5eur6 {
  background: linear-gradient(120deg, #e7fe2b 0, #84f0a5 100%);
  border: 2px solid #bbf861 !important;
  color: #555555;
  font-weight: 600;
}
/* gruen */
.pindca1tinms5 {
  background: linear-gradient(120deg, #aaff7e 0, #40dd52 100%);
  border: 2px solid #72ed67 !important;
  color: #0c5411;
  font-weight: 600;
}
/* blau */
.pindc7zwnre2z {
  background: linear-gradient(120deg, #6cd7ff 0, #2a9aff 100%);
  border: 2px solid #4dbbff !important;
  color: #ffffff;
}
/* gelb hell */
.pindcflgsri3f {
  background: linear-gradient(120deg, #fffa6c 0, #fffa50 100%);
  border: 2px solid #f7f256 !important;
  color: #545454;
  font-weight: 600;
}
/* special: rank */
.pindcz1vlt3xh {
  background: url("//s.jappy.com/i/dashboard/backgroundRank.png") no-repeat;
  background-position: center;
  background-size: cover;
  color: #fff;
  font-weight: 600;
}
/* flieder */
.pindcmdui2m48 {
  background: linear-gradient(120deg, #e0d7f7 0, #d8b1fc 100%);
  border: 2px solid #e0c9ff !important;
  color: #574667;
  font-weight: 600;
}
/* mint-blau */
.pindc77l8zrlj {
  background: linear-gradient(120deg, #BCFFDB 0, #9ae8f0 100%);
  border: 2px solid #abf4e6 !important;
  color: #304642;
  font-weight: 500;
}
/* Türkis */
.pindc7yvegwss {
  background: linear-gradient(120deg, #1ccad8 0, #15e6cd 100%);
  border: 2px solid #19d7d3 !important;
  color: #ffffff;
  font-weight: 500;
}
/* Rosa */
.pindc52tjk4ri {
  background: linear-gradient(120deg, #ffdcf3 0, #ffade2 100%);
  border: 2px solid #ffcaec !important;
  color: #751a55;
  font-weight: 500;
}
.pincatz9u08lb5 {
  grid-template-columns: none !important;
}
.pincatz9u08lb5 .quote {
  font-weight: bold !important;
  justify-self: start;
  padding: 7px;
  text-align: left;
  grid-column: 1 / span 2;
}
.pincatz9u08lb5 .author {
  font-size: .9em;
  text-align: right;
  justify-self: right;
  grid-column: 1 / span 2;
}
.pincatnius2q5j {
  grid-template-columns: none !important;
  grid-gap: 5px !important;
  padding: 11px !important;
}
.pincatnius2q5j .mottoText {
  font-weight: 600;
  justify-self: center;
}
.pincatnius2q5j .mottoSubtitle {
  font-weight: 400;
  font-size: .8em;
  justify-self: center;
}
#pinLayer .pager {
  display: grid;
  grid-template-columns: calc(33% - 7px) calc(34% - 7px) calc(33% - 7px);
  grid-gap: 7px;
  justify-items: stretch;
  align-items: center;
}
#pinLayer .pager button {
  border: 1px solid #c7c7c7;
  background: #d5d5d5;
  cursor: pointer;
  border-radius: 15px;
  color: #333333;
  display: inline-block;
  height: 2.5em;
  margin: .5em;
  line-height: 2em;
  text-align: center;
  font-weight: 300;
  padding: 2px 10px;
  box-sizing: border-box;
}
#pinLayer .pager select {
  border: 1px solid #c7c7c7;
  background: #ffffff;
  cursor: pointer;
  border-radius: 15px;
  color: #333333;
  display: inline-block;
  height: 2.5em;
  margin: .5em;
  line-height: 2em;
  text-align: center;
  font-weight: 300;
  padding: 2px 10px;
  box-sizing: border-box;
}
@media screen and (min-width: 370px) and (max-width: 490px) {
  .pinBox {
    max-width: 360px;
    margin: auto;
    margin-bottom: 10px;
  }
  #pinLayer .pinGrid {
    display: grid;
    grid-template-columns: calc(50% - 7px) calc(50% - 7px);
  }
}
@media screen and (max-width: 490px) {
  #pinLayer .container {
    padding: 5px;
    min-width: 360px;
  }
}
#reportUserLayer {
  right: 0px;
  bottom: 0px;
  background: rgba(0, 0, 0, 0.65);
  width: 100%;
  padding-top: 10px;
  display: grid;
}
#reportUserLayer > .layerWrapper {
  padding-bottom: 100px;
  justify-self: center;
  align-self: center;
}
#reportUserLayer .container {
  max-width: 600px;
  background: #fff;
  min-width: 400px;
  border-radius: 10px;
  padding: 25px;
}
#reportUserLayer .head {
  display: flex;
  align-items: center;
  color: #484848;
  height: 3.5em;
  max-width: 100%;
  background: #fff;
}
#reportUserLayer .head .caption {
  flex-grow: 1;
  margin: .5em 1em;
  font-weight: 700;
  font-size: 1.3em;
  text-overflow: ellipsis;
}
#reportUserLayer .head button {
  border: 1px solid #c7c7c7;
  background: #d5d5d5;
  cursor: pointer;
  border-radius: 15px;
  color: #333333;
  display: inline-block;
  height: 2.5em;
  margin: .5em;
  line-height: 2em;
  text-align: center;
  font-weight: 300;
  padding: 2px 10px;
}
.emotionConfirm {
  width: 170px;
  height: 212px;
  background: #ffffff;
  padding: 10px;
  border-radius: 10px;
  background: #ff2581;
  border: 3px solid #da1669;
  animation: emotionConfirm 0.3s;
}
.emotionConfirm img {
  width: 170px;
  border-radius: 10px;
  border: 1px solid #ed1973;
  max-height: 122px;
  overflow: hidden;
}
.emotionConfirm .message {
  margin-top: 90px;
  text-align: center;
  background: #ff2581;
  opacity: 0.9;
  position: absolute;
  color: #ffffff;
  padding: 10px;
  min-width: 150px;
  font-weight: 500;
}
.emotionConfirm .buttons {
  margin-top: 12px;
}
.emotionConfirm .buttons > * {
  display: block;
  color: #ffffff;
  padding: 10px 10px;
  background: #da1669;
  border: 1px solid #d01a66;
  margin-left: 0 !important;
  border-radius: 10px;
  margin-bottom: 9px;
  font-size: 110%;
  text-align: center;
}
.emotionConfirm .buttons > .blue {
  color: #666666;
  font-weight: 900;
  background: #ffffff;
  border: 1px solid #da1669;
}
.emotionConfirm .buttons > *:hover {
  border: 1px solid #96134a;
  transition: 0.5s;
  text-decoration: underline;
}
.emotionDetailLayer {
  width: 100%;
  text-align: center;
}
.emotionDetailLayer .emotion .icon {
  border: 5px solid #ff2581;
  border-radius: 10px;
  max-width: 400px;
}
.emotionDetailLayer .foot {
  margin: auto;
  width: 400px;
}
.emotionDetailLayer .foot > * {
  margin: auto;
  display: block;
  padding: 15px 10px;
  margin-left: 0 !important;
  background: #da1669;
  color: #ffffff;
  border: 1px solid #d01a66;
  font-weight: 900;
  border-radius: 10px;
  margin-bottom: 5px;
  font-size: 110%;
  text-align: center;
}
.emotionDetailLayer .foot > *:hover {
  border: 1px solid #000000;
  transition: 0.5s;
}
.emotionDetailLayer .foot > *.simple {
  background: #333333;
  border: 1px solid #1d1d1d;
}
.emotionDetailLayer .foot > *:hover.simple {
  border: 1px solid #ffffff;
}
.emotionDetailLayer .head {
  width: 400px;
  margin: auto;
  padding-bottom: 10px;
}
.emotionDetailLayer .head > .stampOffline {
  color: #ffffff;
}
.emotionDetailLayer .head .profileImage {
  width: 30px;
  float: left;
}
.emotionDetailLayer .head .profileImage img {
  border-radius: 50%;
}
.emotionDetailLayer .head .text {
  float: left;
  padding: 7px 10px;
}
.emotionDetailLayer .head .text .privacy {
  color: #ffffff;
  margin-left: 10px;
}
.emotionDetailLayer .name {
  width: 400px;
  padding: 20px 10px;
  color: #ffffff;
  margin: auto;
  font-size: 130%;
  font-weight: 900;
}
/* Emotions Layer*/
.playingEmotion {
  border: 5px solid #ff2581;
  border-radius: 10px;
}
.emotionOverlay {
  height: 120px;
  width: 125px;
  background: #fde694;
  border-radius: 10px;
  border: 3px solid #fee382;
}
.emotionOverlay .confirmButton {
  padding: 12px;
  border-radius: 20px;
  background: #1adfdf;
  border: 1px solid #18cccc;
  text-align: center;
  color: #ffffff;
  font-weight: 900;
}
.emotionOverlay .confirmButton:hover {
  cursor: pointer;
  background: #24e6e6;
  transition: 0.5s;
}
.emotionOverlay .actions {
  margin: 0 15px;
}
.emotionOverlay .info {
  padding: 15px;
  text-align: center;
  line-height: 140%;
  font-weight: 700;
  color: #000000;
}
.emotionSelection {
  width: 100%;
  padding-top: 10px;
  background: #ffffff;
  margin: auto;
}
.emotionSelection .shopSelectorHeadline {
  margin: 5px 20px;
}
.emotionSelection .head .text {
  float: left;
  padding: 10px 30px 20px 30px;
  font-size: 120%;
  font-weight: 600;
  max-width: 200px;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.emotionSelection .search input {
  margin-left: 30px;
  width: 300px;
  border-radius: 7px;
  padding: 10px 15px;
  border: 1px solid #efefef;
  background: #f7f7f7;
  font-size: 100%;
}
.emotionSelection .navigation {
  width: 100%;
  overflow: scroll;
}
.emotionSelection .navigation .wrapper {
  width: 1000px;
  margin-left: 30px;
}
.emotionSelection .navigation span {
  display: inline-block;
  text-align: center;
  padding: 10px 10px;
  color: #666666;
  cursor: pointer;
  font-size: 100%;
  font-weight: 300;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.emotionSelection .navigation span:hover {
  color: #ec6449;
}
.emotionSelection .navigation span.active {
  color: #4ecdff;
  font-weight: bold;
  border-bottom: 4px solid #4ecdff;
}
.emotionSelection .selection {
  margin-bottom: 20px;
  margin-top: 5px;
}
.emotionSelection .topic {
  font-size: 12px;
  color: #333333;
  padding: 0 10px 0 15px;
  color: #666666;
  width: 650px;
}
.emotionSelection .topicText {
  font-size: 120%;
  float: left;
  padding-top: 10px;
}
.emotionSelection .infoPresentedToday {
  margin-bottom: 10px;
  color: #dddddd;
  font-weight: 600;
  padding: 0px 30px;
  text-align: center;
}
.emotionSelection .infoNumberOfVouchers {
  margin-bottom: 10px;
  color: #9bd729;
  font-weight: 600;
  padding: 0px 30px;
  text-align: center;
}
.emotionSelection .grading {
  margin: 0;
}
.emotionSelection .grading > * {
  float: right;
  margin-right: 20px;
}
.emotionSelection .listing {
  margin-left: 30px;
  padding-top: 20px;
  margin-bottom: 20px;
}
.emotionSelection .listing > .entry {
  display: block;
  float: left;
  overflow: hidden;
  height: 130px;
  text-align: left;
  margin: 0 20px 10px 0;
  text-align: center !important;
  border-radius: 5px;
  color: #565656;
  cursor: pointer;
}
.emotionSelection .listing > .entry.promoted {
  font-weight: bold;
}
.emotionSelection .listing > .entry .name {
  display: block;
  font-size: 90%;
  font-weight: 300;
  color: #999999;
  padding-top: 10px;
  text-align: center;
}
.emotionSelection .listing > .entry .icon {
  text-align: center;
  border: 3px solid #e1e1e1;
  border-radius: 10px;
}
.emotionSelection .listing > .entry .icon img {
  border-radius: 5px;
  height: 90px;
  width: 125px;
}
.emotionSelection .listing > .entry:hover .icon {
  border: 3px solid #ff2581;
}
.emotionSelection .listing > .entry:hover .name {
  color: #000000;
  font-weight: 500;
}
.emotionSelection .listing > .entry .name {
  padding: 8px 0 0 15px;
  color: #666666;
}
.emotionSelection .cost {
  text-align: left;
}
.emotionSelection .cost span {
  background: #ffb02c;
  color: #ffffff;
  font-weight: 600;
  display: block;
  position: absolute;
  margin-top: -45px;
  margin-left: 10px;
  padding: 3px;
  border-radius: 5px;
}
.emotionSelection .cost span img {
  width: 15px;
  height: 15px;
}
.emotionSelection .listing > .entry .emotion {
  margin-left: 15px;
}
.emotionSelection .listing > .entry:hover .cost {
  text-decoration: none;
}
.emotionSelection .price {
  text-align: left;
}
.emotionSelection .price span {
  background: #ff9933;
  color: #ffffff;
  font-weight: 300;
  position: absolute;
  margin-top: -110px;
  padding: 3px;
  border-radius: 3px;
}
.emotionSelection .head .search {
  float: right;
  padding-top: 15px;
  margin-left: 5px;
  margin-right: 30px;
}
.emotionSelection .head .search input {
  border-radius: 7px;
  padding: 10px 15px;
  border: 1px solid #e1e1e1;
  font-size: 130%;
  width: 300px;
}
.emotionSelection .collectableStatus {
  display: grid;
  grid-template-columns: 60px auto 60px;
  grid-template-rows: min-content min-content;
  padding: 13px;
  grid-gap: 3px 13px;
  align-content: center;
  justify-content: center;
  align-items: center;
  justify-items: start;
}
.emotionSelection .collectableStatus .icon {
  grid-column: 1;
  grid-row: 1 / span 2;
}
.emotionSelection .collectableStatus .description {
  grid-column: 2;
  grid-row: 1;
  padding: 7px;
  font-size: .9em;
  font-weight: bold;
  line-height: 1.5;
  color: #09C619;
}
.emotionSelection .collectableStatus .description.problem {
  color: #C64809;
}
.emotionSelection .collectableStatus .pinState {
  grid-column: 2;
  grid-row: 2;
  padding: 7px;
  font-size: .9em;
  font-weight: 400;
  line-height: 1.5;
  color: #09C619;
}
.emotionSelection .collectableStatus .pinState.problem {
  color: #a0a0a0;
}
.emotionSelection .collectableStatus .pinPreview {
  grid-column: 3;
  grid-row: 1 / span 2;
}
.emotionSelection .collectableStatus .pinPreview img {
  border-radius: 50%;
  width: 60px;
  height: 60px;
  border-style: solid;
  border-width: 2px;
}
.emotionSelection .collectableStatus .pinPreview.difficultyHard img {
  border-color: #f96c6c;
}
.emotionSelection .collectableStatus .pinPreview.difficultyMedium img {
  border-color: #ffd932;
}
.emotionSelection .collectableStatus .pinPreview.difficultyEasy img {
  border-color: #4adb5b;
}
.emotionSelection .collectableStatus .pinPreview.difficultyVeryHard img {
  border-color: #00ffe7;
}
@keyframes scrollFormTop {
  from {
    top: -1000px;
  }
  to {
    top: 50px;
  }
}
@keyframes scrollToTop {
  from {
    top: 50px;
  }
  to {
    top: -50px;
  }
}
@keyframes growEchoBox {
  from {
    height: 0px;
    overflow: hidden;
    border: 10px solid #ffedb0;
  }
  to {
    height: 320px;
    overflow: hidden;
    border: 10px solid #ffd237;
  }
}
@keyframes showEchoBox {
  from {
    height: 0px;
    overflow: hidden;
  }
  to {
    height: 70;
    overflow: hidden;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeElementOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes showLogin {
  0% {
    transform: translate(0, -400px);
  }
  25% {
    transform: translate(0, -350px);
  }
  90% {
    transform: translate(0, 10px);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes showMobileActionButton {
  0% {
    transform: translate(0, -400px);
  }
  80% {
    transform: translate(0, 0);
    opacity: 1.0;
  }
  90% {
    transform: scale(1.2);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1.0;
  }
}
@keyframes showMobileActions {
  0% {
    transform: translate(0, 400px);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes prepareImage {
  0% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(-10deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes hoverTopActions {
  0% {
    text-indent: 0px;
  }
  100% {
    text-indent: 3px;
  }
}
@keyframes updateTickerEntry {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.01);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes highlightTickerEntry {
  0% {
    transform: scale(1);
    background: none;
  }
  50% {
    transform: scale(1.01);
    background: #cacaca;
  }
  100% {
    transform: scale(1);
    background: none;
  }
}
@keyframes zoomIn {
  0% {
    transform: scale(0.1);
    background: none;
  }
  100% {
    transform: scale(1);
    background: #4e4e4e;
  }
}
@keyframes focusIcon {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes hideTickerEntry {
  0% {
    transform: scale(1);
  }
  80% {
    transform: scale(0);
  }
  100% {
    height: 0px;
    overflow: hidden;
  }
}
@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(-7deg);
  }
  75% {
    transform: rotate(7deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes twistSuper {
  0% {
    transform: scale(1.2);
  }
  50% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1.2);
  }
}
@keyframes showEffect {
  0% {
    display: block !important;
    transform: scale(0.2);
  }
  50% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes twistCard {
  0% {
    transform: scale(0.2);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    box-shadow: 0 0 15px #ffe000;
    transform: scale(1);
  }
}
@keyframes twistCard2 {
  0% {
    transform: scale(0);
  }
  30% {
    transform: scale(0.2);
  }
  60% {
    transform: scale(1.2);
  }
  100% {
    box-shadow: 0 0 15px #ffe000;
    transform: scale(1);
  }
}
@keyframes twistCard3 {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(0.2);
  }
  80% {
    transform: scale(1.2);
  }
  100% {
    box-shadow: 0 0 15px #ffe000;
    transform: scale(1);
  }
}
@keyframes hoverAddEcho {
  0% {
    transform: scale(1);
    border-radius: 10px;
  }
  100% {
    transform: scale(1.05);
    border-radius: 20px;
  }
}
@keyframes hoverCard {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.07);
  }
}
@keyframes openCard {
  0% {
    transform: scale(0.7);
  }
  80% {
    transform: scale(1.07);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes pulseDuration {
  0% {
    transform: scale(1);
    opacity: 0.80;
  }
  50% {
    transform: scale(1.2);
    opacity: 1.0;
  }
  100% {
    transform: scale(1);
    opacity: 0.8;
  }
}
@keyframes glowDuration {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes showBorder {
  from {
    border-color: #e4e4e4;
  }
  to {
    border-color: #85c4ff;
  }
}
@keyframes showStreamEntry {
  from {
    opacity: 0.1;
  }
  to {
    opacity: 1;
  }
}
@keyframes growStatusIcons {
  0% {
    width: 0px;
  }
  25% {
    width: 20px;
  }
  75% {
    width: 75px;
  }
  100% {
    width: 65px;
  }
}
@keyframes openMenue {
  0% {
    height: 10px;
    overflow: hidden;
  }
  100% {
    height: auto;
    overflow: hidden;
  }
}
/* Wobble Horizontal */
@keyframes wobble-horizontal {
  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  51% {
    -webkit-transform: translateX(1px);
    transform: translateX(1px);
    transform: rotate(10deg);
  }
  52% {
    -webkit-transform: translateX(-1px);
    transform: translateX(-1px);
    transform: rotate(-10deg);
  }
  53% {
    -webkit-transform: translateX(1px);
    transform: translateX(1px);
    transform: rotate(15deg);
  }
  54% {
    -webkit-transform: translateX(-1px);
    transform: translateX(-1px);
    transform: rotate(-15deg);
  }
  55% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes backgroundFade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.3;
  }
}
@keyframes navigatorSlideIn {
  from {
    margin-left: -100px;
  }
  to {
    margin-left: 0;
  }
}
@keyframes fadeNotificationOut {
  0% {
    transform: scale(0);
    opacity: 0.0;
  }
  10% {
    transform: scale(1.1);
    opacity: 1.0;
  }
  12% {
    transform: scale(1);
    opacity: 1.0;
  }
  90% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}
@keyframes fadeOut {
  to {
    height: 0px;
    opacity: 0;
    padding: 0;
  }
}
@keyframes fadeOutBellFeed {
  to {
    height: 0px;
    width: 0;
    opacity: 0;
    padding: 0;
    display: none;
  }
}
@keyframes imageFadeIn {
  from {
    transform: translateX(2000px);
    display: block;
  }
  to {
    transform: translateX(0);
  }
}
@keyframes shake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }
  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}
@keyframes emotionConfirm {
  0% {
    transform: scale(0.6);
    transform: scale(1);
  }
  80% {
    transform: scale(1);
    transform: scale(1.5);
  }
  100% {
    transform: scale(0.6);
    transform: scale(1);
  }
}
@keyframes movePointer {
  0% {
    padding-right: 0;
    padding-top: 0;
  }
  100% {
    padding-right: 10px;
    padding-top: 10px;
  }
}
/* Rotate the right side of the progress bar from 0 to 180 degrees */
@-webkit-keyframes right-spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(180deg);
  }
}
/* Rotate the left side of the progress bar from 0 to 360 degrees */
@-webkit-keyframes left-spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
/* Set the wrapper clip to auto, effectively removing the clip */
@-webkit-keyframes close-wrapper {
  to {
    clip: rect(auto, auto, auto, auto);
  }
}
@-webkit-keyframes overshotIn {
  0% {
    transform: scale(0.4);
  }
  40% {
    transform: scale(0.4);
  }
  90% {
    transform: scale(1.2);
  }
  100% {
    ransform: scale(1);
  }
}
@-webkit-keyframes overshotInDelay {
  0% {
    transform: scale(0);
  }
  30% {
    transform: scale(0);
  }
  40% {
    transform: scale(0.4);
  }
  90% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes fadeAndScale {
  0% {
    opacity: 0;
    transform: scale3d(0.75, 0.75, 1);
  }
  70% {
    opacity: 0;
    transform: scale3d(0.75, 0.75, 1);
  }
  100% {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}
@-webkit-keyframes glowingText {
  from {
    text-shadow: 0 0 10px #fff;
    background: #ff0052;
  }
  to {
    text-shadow: 0 0 10px #ce007f;
    background: #c1003e;
  }
}
@keyframes overshotFadeIn {
  0% {
    transform: scale(0);
    opacity: 0.0;
  }
  90% {
    transform: scale(1.1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes redeem {
  0% {
    opacity: 1.0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1.0;
  }
}
@keyframes intoFocus {
  0% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1.2);
  }
}
@keyframes intoFocusLight {
  0% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1.05);
  }
}
@keyframes intoFocusSoft {
  0% {
    transform: scale(0.99);
  }
  100% {
    transform: scale(1.01);
  }
}
@keyframes opacityDelay {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1.0;
  }
}
@keyframes backgroundSlide {
  0% {
    background-position: 20%;
  }
  100% {
    background-position: 40%;
  }
}
@keyframes intoFocusAndBack {
  0% {
    transform: scale(1);
  }
  80% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes scaleToZero {
  0% {
    transform: scale(1);
    margin-top: 0px;
  }
  100% {
    transform: scale(0);
    margin-top: -72px;
  }
}
@keyframes brandingColor {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
/*Profile Themes blau */
.profileImageTheme0 {
  background: #62b5ff;
}
.theme_0 .background {
  background-color: #62b5ff;
}
.theme_0 .profileSections a.active {
  border-bottom: 5px solid #54a8f3;
}
.theme_0 .profileSections a:hover {
  border-bottom: 5px solid #54a8f3;
}
/*Profile Themes grün */
.profileImageTheme1 {
  background: #b3d24c;
}
.theme_1 .background {
  background-color: #b3d24c;
}
.theme_1 .profileSections a.active {
  border-bottom: 5px solid #a5c246;
}
.theme_1 .profileSections a:hover {
  border-bottom: 5px solid #a5c246;
}
/* Template Gelb */
.profileImageTheme2 {
  background: #fdd021;
}
.theme_2 .background {
  background-color: #fdd021;
}
.theme_2 .profileSections a.active {
  border-bottom: 5px solid #de9602;
}
.theme_2 .profileSections a:hover {
  border-bottom: 5px solid #de9602;
}
.theme_2 .profileSections a .text {
  color: #de9602;
}
/* Dunkelblau */
.profileImageTheme3 {
  background: #4580c9;
}
.theme_3 .background {
  background-color: #4580c9;
}
/* H206 */
.theme_3 .profileSections a {
  border-bottom: 5px solid #316ab2;
}
.theme_3 .profileSections a:hover {
  border-bottom: 5px solid #316ab2;
}
/* Lila */
.profileImageTheme4 {
  background: #a763e2;
}
.theme_4 .background {
  background-color: #a763e2;
}
.theme_4 .profileSections a {
  border-bottom: 5px solid #7c5288;
}
.theme_4 .profileSections a:hover {
  border-bottom: 5px solid #7c5288;
}
/* Pink */
.profileImageTheme5 {
  background: #ff6aaf;
}
.theme_5 .background {
  background-color: #ff6aaf;
}
.theme_5 .profileSections a.active {
  border-bottom: 5px solid #F3548E;
}
.theme_5 .profileSections a:hover {
  border-bottom: 5px solid #F3548E;
}
/* Dreamland */
.profileImageTheme7 {
  background: #fe6c6d;
}
.theme_7 .background {
  background: url('//s.jappy.com/i/theme/dreamland/background.png') no-repeat 0 0 #fe6c6d;
}
.theme_7 .profileBox {
  background-size: 100% 100%;
  background-position: 50% 50%;
}
.theme_7 .profileSections a.active {
  border-bottom: 5px solid #de5b73;
}
.theme_7 .profileSections a:hover {
  border-bottom: 5px solid #de5b73;
}
/* Underwater */
.profileImageTheme8 {
  background: #02cddb;
}
.theme_8 .background {
  background: url('//s.jappy.com/i/theme/underwater/bg_profile.png') no-repeat 0 0 #3efffa;
}
.theme_8 .profileBox {
  background-size: 110% auto;
  background-position: 60% 100%;
}
.theme_8 .profileSections a.active {
  border-bottom: 5px solid #5ff4f8;
}
.theme_8 .profileSections a:hover {
  border-bottom: 5px solid #5ff4f8;
}
/* Oldschool */
.profileImageTheme9 {
  background: #333333;
}
.theme_9 .background {
  background: url('//s.jappy.com/i/theme/oldschool/bg_profile.png') #333333;
}
.theme_9 .profileSections a.active {
  border-bottom: 5px solid #3fd9dd;
}
.theme_9 .profileSections a:hover {
  border-bottom: 5px solid #3fd9dd;
}
/* Dessert */
.profileImageTheme10 {
  background: #ca6e25;
}
.theme_10 .background {
  background: url('//s.jappy.com/i/theme/dessert/bg_profile.png') no-repeat 0 0 #ca6e25;
}
.theme_10 .profileBox {
  background-size: 100% auto;
  background-position: 50% 50%;
}
.theme_10 .profileSections a.active {
  border-bottom: 5px solid #ca6e25;
  color: #333333;
}
.theme_10 .profileSections a:hover {
  border-bottom: 5px solid #ca6e25;
}
.theme_10 .wrap a:hover .text {
  color: #ffffff;
}
/* Lines */
.profileImageTheme11 {
  background: #29749f;
}
.theme_11 .background {
  background: url('//s.jappy.com/i/theme/lines/bg_profile.jpg') no-repeat 0 0 #29749f;
}
.theme_11 .profileBox {
  background-size: 100% auto;
  background-position: 50% 50%;
}
.theme_11 .profileSections a.active {
  border-bottom: 5px solid #52cbc6;
}
.theme_11 .profileSections a:hover {
  border-bottom: 5px solid #52cbc6;
}
/* space */
.profileImageTheme12 {
  background: #009780;
}
.theme_12 .background {
  background: url('//s.jappy.com/i/theme/space/bg_profile.png') no-repeat 0 0 #009780;
}
.theme_12 .profileBox {
  background-size: 100% auto;
  background-position: 50% 50%;
}
.theme_12 .profileSections a.active {
  border-bottom: 5px solid #009780;
}
.theme_12 .profileSections a:hover {
  border-bottom: 5px solid #009780;
}
/* Ostern */
.profileImageTheme13 {
  background: #e69fa8;
}
.theme_13 .background {
  background: url('//s.jappy.com/i/theme/easter/bg_profile.png') no-repeat 0 0 #ca6e25;
}
.theme_13 .profileBox {
  background-size: 100% auto;
  background-position: 50% 50%;
}
.theme_13 .profileSections a.active {
  border-bottom: 5px solid #95555f;
}
.theme_13 .profileSections a .text {
  color: #333333;
}
.theme_13 .profileSections a:hover {
  border-bottom: 5px solid #95555f;
}
.theme_13 .profileSummary .basicData,
.theme_13 .profileSummary .basicData a {
  color: #333333;
}
.theme_13 .profileSummary .stampOnline,
.theme_13 .profileSummary .stampOffline {
  color: #333333;
}
/* Grassland */
.profileImageTheme14 {
  background: #89d124;
}
.theme_14 .background {
  background: url('//s.jappy.com/i/theme/grassland/bg_profile.png') no-repeat 0 0 #cdf875;
}
.theme_14 .profileBox {
  background-size: 100% auto;
  background-position: 50% 60%;
}
.theme_14 .profileSections a.active {
  border-bottom: 5px solid #7bb81b;
}
.theme_14 .profileSections a .text {
  color: #333333;
}
.theme_14 .profileSections a:hover {
  border-bottom: 5px solid #7bb81b;
}
.theme_14 .profileSummary .basicData,
.theme_14 .profileSummary .basicData a {
  color: #333333;
}
.theme_14 .profileSummary .stampOnline,
.theme_14 .profileSummary .stampOffline {
  color: #333333;
}
/* Fussball */
.profileImageTheme15 {
  background: #ca6e25;
}
.theme_15 .background {
  background: url('//s.jappy.com/i/theme/soccer/bg_profile.png') no-repeat 0 0 #ca6e25;
}
.theme_15 .profileBox {
  background-size: 100% auto;
  background-position: 50% 50%;
}
.theme_15 .profileSections a.active {
  border-bottom: 5px solid #f5edd9;
}
.theme_15 .profileSections a .text {
  color: #ffffff;
}
.theme_15 .profileSections a:hover {
  border-bottom: 5px solid #f5edd9;
}
.theme_15 .wrap a:hover .text {
  color: #ffffff;
}
.theme_15 .profileSummary .stampOnline,
.theme_15 .profileSummary .stampOffline {
  color: #ffffff;
  text-shadow: 2px 2px #20190d;
}
/* Herbst */
.profileImageTheme16 {
  background: #df272c;
}
.theme_16 .background {
  background: url('//s.jappy.com/i/theme/fall/bg_profile.png') no-repeat 0 0 #ca6e25;
}
.theme_16 .profileBox {
  background-size: 100% auto;
  background-position: 50% 50%;
}
.theme_16 .profileSections a.active {
  border-bottom: 5px solid #5c1517;
}
.theme_16 .profileSections a .text {
  color: #ffffff;
}
.theme_16 .profileSections a:hover {
  border-bottom: 5px solid #5c1517;
}
.theme_16 .profileSummary .stampOnline,
.theme_16 .profileSummary .stampOffline {
  color: #fff;
}
/* Halloween */
.profileImageTheme17 {
  background: #004d7b;
}
.theme_17 .background {
  background: url('//s.jappy.com/i/theme/halloween/bg_profile.png') no-repeat 0 0 #ca6e25;
}
.theme_17 .profileBox {
  background-size: 100% auto;
  background-position: 50% 50%;
}
.theme_17 .profileSections a.active {
  border-bottom: 5px solid #d0860d;
}
.theme_17 .profileSections a .text {
  color: #ffffff;
}
.theme_17 .profileSections a:hover {
  border-bottom: 5px solid #d0860d;
}
.theme_17 .profileSummary .stampOnline,
.theme_17 .profileSummary .stampOffline {
  color: #fff;
}
/* XMas */
.profileImageTheme18 {
  background: #322f28;
}
.theme_18 .background {
  background: url('//s.jappy.com/i/theme/xmas/bg_profile.png') no-repeat 0 0 #322f28;
}
.theme_18 .profileBox {
  background-size: 100% auto;
  background-position: 50% 0;
}
.theme_18 .profileSections a.active {
  border-bottom: 5px solid #da2222;
}
.theme_18 .profileSections a:hover {
  border-bottom: 5px solid #da2222;
}
.theme_18 .wrap a:hover .text {
  color: #ffffff;
}
/* Feuerwerk */
.profileImageTheme19 {
  background: #322f28;
}
.theme_19 .background {
  background: url('//s.jappy.com/i/theme/fireworks/bg_profile.png') no-repeat 0 0 #322f28;
}
.theme_19 .profileBox {
  background-size: 100% auto;
  background-position: 50% 0;
}
.theme_19 .profileSections a.active {
  border-bottom: 5px solid #e3acd5;
}
.theme_19 .profileSections a:hover {
  border-bottom: 5px solid #e3acd5;
}
.theme_19 .profileSummary .basicData,
.theme_19 .profileSummary .basicData a {
  font-weight: 700;
}
.theme_19 .profileSummary .stampOnline,
.theme_19 .profileSummary .stampOffline {
  color: #ffffff;
  text-shadow: 2px 2px #106aac;
}
/* Winter */
.profileImageTheme20 {
  background: #cccccc;
}
.theme_20 .background {
  background: url('//s.jappy.com/i/theme/winter/bg_profile.png') no-repeat 0 0 #cccccc;
}
.theme_20 .profileBox {
  background-size: 100% auto;
  background-position: 50% -40px;
}
.theme_20 .profileSections a.active {
  border-bottom: 5px solid #285262;
}
.theme_20 .profileSections a .text {
  color: #285262;
}
.theme_20 .profileSections a {
  background: rgba(255, 255, 255, 0.7);
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  border-bottom: 5px solid #ffffff;
}
.theme_20 .profileSummary .stampOnline,
.theme_20 .profileSummary .stampOffline {
  color: #285262;
}
.theme_20 .profileSections a:hover {
  border-bottom: 5px solid #285262;
}
.theme_20 .profileSummary .basicData,
.theme_20 .profileSummary .basicData a {
  color: #333333;
  font-weight: 700;
}
/* Love */
.profileImageTheme21 {
  background: #3cabbc;
}
.theme_21 .background {
  background: url('//s.jappy.com/i/theme/love/bg_profile.png') no-repeat 0 0 #cccccc;
}
.theme_21 .profileBox {
  background-size: 100% auto;
  background-position: 50% 0;
}
.theme_21 .profileSections a.active {
  border-bottom: 5px solid #ea5d6b;
}
.theme_21 .profileSections a .text {
  color: #9b191e;
}
.theme_21 .profileSections a:hover {
  border-bottom: 5px solid #ea5d6b;
}
.theme_21 .basicText {
  background: #e65064;
  opacity: 0.8;
  font-weight: 600;
}
/* Party */
.profileImageTheme22 {
  background: #eb572c;
}
.theme_22 .background {
  background: url('//s.jappy.com/i/theme/carnival/bg_profile.png') no-repeat 0 0 #eb572c;
}
.theme_22 .profileBox {
  background-size: 100% auto;
  background-position: 50% 0;
}
.theme_22 .profileSections a.active {
  border-bottom: 5px solid #ffdc95;
}
.theme_22 .profileSections a .text {
  color: #000000;
  font-weight: 900;
}
.theme_22 .profileSections a:hover {
  border-bottom: 5px solid #ffdc95;
}
.theme_22 .basicData,
.theme_22 .basicData a {
  color: #000000;
  font-weight: 900;
}
.theme_22 .profileSummary .stampOnline {
  color: #333333;
}
/* Lichtparty */
.profileImageTheme23 {
  background: #610c3a;
}
.theme_23 .background {
  background: url('//s.jappy.com/i/theme/lightparty/bg_profile.png') no-repeat 0 0 #eb572c;
}
.theme_23 .profileBox {
  background-size: 100% auto;
  background-position: 50% 0;
}
.theme_23 .profileSections a.active {
  border-bottom: 5px solid #740e33;
}
.theme_23 .profileSections a .text {
  color: #ffffff;
}
.theme_23 .profileSections a:hover {
  border-bottom: 5px solid #740e33;
}
.theme_23 .basicData,
.theme_23 .basicData a {
  font-weight: 600;
}
.theme_23 .profileSummary .stampOnline {
  color: #fffabb;
}
/* Aufgeblüht */
.profileImageTheme24 {
  background: #e12c53;
}
.theme_24 .background {
  background: url('//s.jappy.com/i/theme/blooming/bg_profile.png') no-repeat 0 0 #e12c53;
}
.theme_24 .profileBox {
  background-size: 100% auto;
  background-position: 50% 0;
}
.theme_24 .profileSections a.active {
  border-bottom: 5px solid #79988b;
}
.theme_24 .profileSections a .text {
  color: #ffffff;
}
.theme_24 .profileSections a:hover {
  border-bottom: 5px solid #79988b;
}
.theme_24 .basicData,
.theme_24 .basicData a {
  font-weight: 600;
  color: #293b34;
}
.theme_24 .profileSummary .stampOnline {
  color: #1f2724;
}
.theme_24 .profileSections a {
  background: rgba(255, 255, 255, 0.7);
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  border-bottom: 5px solid #ffffff;
}
.theme_24 .profileSections a .text {
  color: #002026;
}
/* Weihnachtlich */
.profileImageTheme25 {
  background: #83430d;
}
.theme_25 .background {
  background: url('//s.jappy.com/i/theme/xmas/bg_profile2.png') no-repeat 0 0 #83430d;
}
.theme_25 .profileBox {
  background-size: 100% auto;
  background-position: 50% 0;
}
.theme_25 .profileSections a.active {
  border-bottom: 5px solid #959181;
}
.theme_25 .profileSections a:hover {
  border-bottom: 5px solid #959181;
}
.theme_25 .profileSummary .basicData {
  font-weight: 600;
}
.theme_25 .profileSummary .stampOnline {
  color: #381c04;
  font-weight: 800;
}
/* Frostig */
.profileImageTheme26 {
  background: #9e9b8d;
}
.theme_26 .background {
  background: url('//s.jappy.com/i/theme/winter/bg_profile2.png') no-repeat 0 0 #322f28;
}
.theme_26 .profileBox {
  background-size: 100% auto;
  background-position: 50% 0;
}
.theme_26 .profileSections a .text {
  color: #232221;
}
.theme_26 .profileSections a.active {
  border-bottom: 5px solid #959181;
}
.theme_26 .profileSections a:hover {
  border-bottom: 5px solid #959181;
}
.theme_26 .profileSummary .basicData {
  color: #232221;
}
.theme_26 .profileSummary .basicData a {
  color: #403f3c;
}
.theme_26 .profileSummary .stampOnline {
  color: #403f3c;
}
/* Gestrickt */
.profileImageTheme27 {
  background: #64213c;
}
.theme_27 .background {
  background: url('//s.jappy.com/i/theme/cuddle/bg_profile.png') no-repeat 0 0 #64213c;
}
.theme_27 .profileBox {
  background-size: 100% auto;
  background-position: 50% 0;
}
.theme_27 .profileSections a.active {
  border-bottom: 5px solid #ffffff;
}
.theme_27 .profileSections a:hover {
  border-bottom: 5px solid #ffffff;
}
.theme_27 .profileSections a .text {
  color: #ffffff;
}
/* Pool Zeit */
.profileImageTheme28 {
  background: #64213c;
}
.theme_28 .background {
  background: url('//s.jappy.com/i/theme/poolTime.png') no-repeat 0 0 #64213c;
}
.theme_28 .profileBox {
  background-size: 100% auto;
  background-position: 50% 0;
}
.theme_28 .profileSections a.active {
  border-bottom: 5px solid #f3d70d;
}
.theme_28 .profileSections a:hover {
  border-bottom: 5px solid #ffffff;
}
.theme_28 .profileSections a {
  background: rgba(255, 255, 255, 0.7);
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  border-bottom: 5px solid #ffffff;
}
.theme_28 .profileSections a .text {
  color: #002026;
}
.theme_28 .profileSummary .stampOnline,
.theme_28 .profileSummary .stampOffline {
  color: #000000;
  text-shadow: 2px 2px #f7dc0d;
}
.theme_28 .profileSummary .basicData {
  font-weight: 600;
  color: #040404 !important;
}
.theme_28 .profileSummary .basicData a {
  color: #040404 !important;
}
/* Farbspritzer */
.profileImageTheme29 {
  background: #f2a99a;
}
.theme_29 .background {
  background: url('//s.jappy.com/i/theme/colorful.png') no-repeat 0 0 #f2a99a;
}
.theme_29 .profileBox {
  background-size: 100% auto;
  background-position: 50% 0;
}
.theme_29 .profileSections a.active {
  border-bottom: 5px solid #f2a99a;
}
.theme_29 .profileSections a:hover {
  border-bottom: 5px solid #f2a99a;
}
.theme_29 .profileSummary .basicData {
  font-weight: 600;
  color: #040404 !important;
}
.theme_29 .profileSummary .basicData a {
  color: #040404 !important;
}
.theme_29 .profileSections a {
  background: rgba(255, 255, 255, 0.7);
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  border-bottom: 5px solid #ffffff;
}
.theme_29 .profileSummary .basicData {
  font-weight: 600;
}
.theme_29 .profileSections a .text {
  color: #002026;
}
.theme_29 .profileSummary .stampOnline,
.theme_29 .profileSummary .stampOffline {
  color: #ffffff;
  text-shadow: 2px 2px #6b5ca4;
}
/* Nacht Cocktail */
.profileImageTheme30 {
  background: #ffb600;
}
.theme_30 .background {
  background: url('//s.jappy.com/i/theme/nightCocktail.png') no-repeat 0 0 #060606;
}
.theme_30 .profileBox {
  background-size: 100% auto;
  background-position: 50% 0;
}
.theme_30 .profileSections a.active {
  border-bottom: 5px solid #ffe938;
}
.theme_30 .profileSections a:hover {
  border-bottom: 5px solid #ffe938;
}
.theme_30 .profileSections a {
  background: rgba(255, 255, 255, 0.7);
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  border-bottom: 5px solid #ffffff;
}
.theme_30 .profileSummary .basicData {
  font-weight: 600;
}
.theme_30 .profileSections a .text {
  color: #002026;
}
.theme_30 .profileSummary .stampOnline,
.theme_30 .profileSummary .stampOffline {
  color: #ffffff;
  text-shadow: 2px 2px #3d504d;
}
/* Fruchtig */
.profileImageTheme31 {
  background: #69b920;
}
.theme_31 .background {
  background: url('//s.jappy.com/i/theme/summerCocktail.png') no-repeat 0 0 #ffffff;
}
.theme_31 .profileBox {
  background-size: 100% auto;
  background-position: 50% 0;
}
.theme_31 .profileSections a.active {
  border-bottom: 5px solid #ff225b;
}
.theme_31 .profileSections a:hover {
  border-bottom: 5px solid #ffe938;
}
.theme_31 .profileSections a {
  background: rgba(255, 255, 255, 0.7);
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  border-bottom: 5px solid #ffffff;
}
.theme_31 .profileSections a .text {
  color: #333333;
}
.theme_31 .profileSummary .basicData {
  font-weight: 600;
  color: #040404 !important;
}
.theme_31 .profileSummary .basicData a {
  color: #040404 !important;
}
.theme_31 .profileSummary .stampOnline,
.theme_31 .profileSummary .stampOffline {
  color: #000000;
  text-shadow: 2px 2px #f0da2c;
}
/* Narzisse */
.profileImageTheme32 {
  background: #2f647d;
}
.theme_32 .background {
  background: url('//s.jappy.com/i/theme/narzisse.png') no-repeat 0 0 #ffffff;
}
.theme_32 .profileBox {
  background-size: 100% auto;
  background-position: 50% 0;
}
.theme_32 .profileSections a.active {
  border-bottom: 5px solid #ffe938;
}
.theme_32 .profileSections a:hover {
  border-bottom: 5px solid #ffe938;
}
.theme_32 .profileSections a {
  background: rgba(255, 255, 255, 0.7);
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  border-bottom: 5px solid #ffffff;
}
.theme_32 .profileSections a .text {
  color: #333333;
}
.theme_32 .profileSummary .basicData {
  font-weight: 600;
  color: #ffffff;
}
.theme_32 .profileSummary .basicData a {
  color: #ffffff;
}
.theme_32 .profileSummary .stampOnline,
.theme_32 .profileSummary .stampOffline {
  color: #000000;
  text-shadow: 2px 2px #f0da2c;
}
/* Palmen */
.profileImageTheme33 {
  background: #ff225b;
}
.theme_33 .background {
  background: url('//s.jappy.com/i/theme/vacationPalm.png') no-repeat 0 0 #ffffff;
}
.theme_33 .profileBox {
  background-size: 100% auto;
  background-position: 50% 0;
}
.theme_33 .profileSections a.active {
  border-bottom: 5px solid #62075b;
}
.theme_33 .profileSections a:hover {
  border-bottom: 5px solid #62075b;
}
.theme_33 .profileSections a {
  background: rgba(255, 255, 255, 0.7);
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  border-bottom: 5px solid #ffffff;
}
.theme_33 .profileSections a .text {
  color: #333333;
}
.theme_33 .profileSummary .stampOnline,
.theme_33 .profileSummary .stampOffline {
  color: #000000;
}
.helpCenter {
  font-family: "Roboto", "Arial Nova", sans-serif-light, "Open Sans", Arial, sans-serif;
  text-align: center;
  font-size: 120%;
  font-weight: 300;
  line-height: 130%;
}
.helpCenter #header {
  text-align: center;
  padding: 20px;
  margin-bottom: 15px;
}
.helpCenter #header h1 {
  margin-bottom: 7px;
  font-size: 120%;
  font-weight: 700;
}
.helpCenter #header h1 a,
.helpCenter #header h1 a:hover,
.helpCenter #header h1 a:active,
.helpCenter #header h1 a:focus {
  color: #ffffff !important;
}
.helpCenter .card h2 a,
.helpCenter .card h2 a:hover,
.helpCenter .card h2 a:active,
.helpCenter #header h2 a:focus {
  color: #333333 !important;
}
.helpCenter #header input {
  width: 250px;
  background: #ffffff;
  color: #333;
  border: 1px solid #adadad;
  padding: 12px 20px;
  border-radius: 20px;
  margin-right: 2px;
}
.helpCenter .card {
  border-radius: 20px;
  text-align: left;
  background: #ffffff;
  margin: auto;
  margin-bottom: 15px;
  padding: 20px;
  width: 700px;
  line-height: 160%;
}
.helpCenter .card h2 {
  padding: 0px;
  padding-bottom: 5px;
  text-align: center;
  text-transform: uppercase;
  font-weight: 800;
  font-size: 110%;
}
.helpCenter a {
  color: #1ec0ff;
}
.helpCenter ul li {
  margin: 0px 0px 7px 0px;
}
.helpCenter ul li ul {
  margin: 7px 0px 0px 0px;
}
.helpCenter p {
  line-height: 1.7;
  margin-top: 0.5em;
  margin-bottom: 0.75em;
}
.helpCenter p.hint {
  background-color: #eee;
  border-radius: 5px;
  padding: 10px 15px;
  line-height: 1.3;
}
.helpCenter strong {
  color: #222;
  font-weight: 700;
}
.helpCenter i {
  color: #222;
  font-weight: 700;
  font-style: italic;
}
.helpCenter #contact textarea {
  display: block;
  margin-top: 2em;
  border: 1px solid #eee;
  background: #fff;
  padding: 10px 15px;
  width: calc(100% - 30px - 2px);
  min-height: 9em;
  border-radius: 5px;
}
.helpCenter .actionSelector .button:first-child {
  margin-left: 0px;
}
.helpCenter button[disabled] {
  opacity: 0.5;
}
.helpCenter button.searchButton {
  border-radius: 50%;
  height: 42px;
  width: 42px;
  padding: 10px;
  cursor: pointer;
  border: 1px solid #e87400;
  color: #ffffff;
  background: url(//s.jappy.com/i/icon/unity/send.png) no-repeat 50% 50% #ff7f00;
  font-weight: 700;
}
.helpCenter button.searchButton:hover {
  border: 1px solid #9d4e00;
  transition: 0.5s;
}
.helpCenter .box {
  padding: 1px;
  margin: 7px 0px 21px 0px;
  box-shadow: 1px 0 2px rgba(0, 0, 0, 0.15);
  border-radius: 3px 3px 0 0;
}
.helpCenter .box .title,
.helpCenter .box .title a {
  color: #fff;
  font-weight: bold;
  margin: 0px;
  padding: 7px;
}
.helpCenter .box .title p {
  margin: 0px;
  padding: 0px;
}
.helpCenter .box .content {
  background: #fff;
  color: #000;
  font-weight: 400;
  margin: 0px;
  padding: 7px;
}
.helpCenter .box .content p {
  margin: 0px;
  padding: 7px 0px 0px 0px;
}
.helpCenter .box .content p:first-child {
  margin: 0px;
  padding: 0px;
}
.helpCenter .box.grey {
  background-image: linear-gradient(to top, #dedede 0, #cacaca 100%);
}
.helpCenter .box.grey .title,
.helpCenter .box.grey .title a {
  color: #555;
}
.helpCenter .box.pink {
  background-image: linear-gradient(to top, #ec0083 0, #ff64c6 100%);
}
.helpCenter .box.red {
  background-image: linear-gradient(to top, #ED1400 0, #FF5858 100%);
}
.helpCenter .box.blue {
  background-image: linear-gradient(to top, #72ffff 0, #077abd 100%);
}
.helpCenter .box.yellow {
  background-image: linear-gradient(to top, #ffd950 0, #ff9133 100%);
}
.helpCenter .box.green {
  background-image: linear-gradient(to top, #3cfe42 0, #20c3c3 100%);
}
.helpCenter .box.purple {
  background-image: linear-gradient(to top, #AE6289 0, #DE5F9A 100%);
}
.helpCenter .textGrey {
  color: #cacaca !important;
}
.helpCenter .textPink {
  color: #ff64c6 !important;
}
.helpCenter .textRed {
  color: #FF5858 !important;
}
.helpCenter .textBlue {
  color: #077abd !important;
}
.helpCenter .textYellow {
  color: #ff9133 !important;
}
.helpCenter .textGreen {
  color: #3cfe42 !important;
}
.helpCenter .textPurple {
  color: #DE5F9A !important;
}
.helpCenter .width-1-3 {
  width: 90px;
  padding: 7px;
  float: left;
  overflow: hidden;
}
.helpCenter .taC {
  text-align: center;
}
.helpCenter .icon {
  height: 1.5em;
}
.helpCenter .darkSilhouette {
  filter: grayscale() brightness(-100%);
}
.helpCenter table {
  border: 1px solid #eee;
  border-collapse: collapse;
}
.helpCenter table thead th {
  background-image: linear-gradient(to top, #dedede 0, #cacaca 100%);
  color: #555;
  line-height: 30px;
  font-weight: 700;
  text-transform: uppercase;
}
.helpCenter table tbody tr {
  border-bottom: 1px solid #eee;
}
.helpCenter table tbody tr:nth-child(odd) {
  background: #f8f8f8;
}
.helpCenter table tbody tr:hover {
  background: #f4f4f4;
}
.helpCenter table tbody td {
  padding: 8px 3px 8px 15px;
  vertical-align: top;
}
.helpCenter table tbody th {
  background: #dedede;
  color: #555;
  line-height: 30px;
  font-weight: 500;
  text-align: center;
}
.helpCenter span.fBox {
  padding: 20px;
}
.helpCenter span.fBox.left {
  float: left;
}
.helpCenter span.fBox.right {
  float: right;
}
.helpCenter span.fBox img {
  width: 70px;
}
.helpCenter .linkAsActionButton {
  text-align: center;
  padding: 20px 0px;
}
.helpCenter .linkAsActionButton a {
  padding: 12px;
  border-radius: 20px;
  background: #1adfdf;
  border: 1px solid #18cccc;
  text-align: center;
  color: #ffffff;
  font-weight: 900;
}
.helpCenter .imageFootage {
  width: 200px;
  margin: auto;
}
.helpCenter .imageFootage img {
  width: 200px;
}
.helpCenter .imageFootage .title {
  padding: 5px 10px;
  color: #999999;
}
.helpCenter .highlight {
  background: #f1f1f1;
  padding: 15px;
  border-radius: 15px;
  color: #00b8ff;
  line-height: 200%;
}
/* emptyState */
.helpState {
  line-height: 180%;
  text-align: center;
  width: 360px;
  margin: auto;
  margin-top: 20px;
}
.helpState .wrapper {
  width: 300px;
  margin: auto;
  padding: 10px;
}
.helpState .text {
  padding: 10px 15px 15px 15px;
  font-size: 110%;
  font-weight: 300;
}
.helpState .icon img {
  width: 100px;
}
.helpState .headline {
  font-size: 140%;
  font-weight: bold;
  margin-top: 10px;
}
.helpState .button a,
.helpState .button button,
.helpState .button input,
.helpState .button .confirm {
  cursor: pointer;
  border-radius: 5px;
  padding: 15px 20px;
  margin: auto;
  border: none;
  font-size: 100%;
  font-weight: 600;
  display: block;
  color: #ffffff;
  background: #ff9933;
  text-align: center;
  margin-bottom: 10px;
}
.helpState .button a:hover,
.helpState .button button:hover,
.helpState .button .confirm:hover {
  text-decoration: underline;
}
.helpState .button button.simple {
  background: none;
  border: none;
  color: #333333;
  text-decoration: underline;
}
.helpState .info {
  text-align: left;
  margin-top: 20px;
  background: #ffffff;
  border: 2px solid #a3faf6;
  border-radius: 20px;
  max-width: 320px;
  margin: auto;
  margin-bottom: 5px;
}
.helpState .info .headline {
  text-align: center;
}
.helpState .info .infoText {
  padding: 20px;
  font-size: 13px;
}
.helpState .info .infoText .problem {
  padding: 12px 0;
  font-weight: 400;
  cursor: pointer;
}
.helpState .info .infoText .problem:hover {
  text-decoration: underline;
}
.helpState .info .infoText .answer {
  padding: 5px 0;
  font-weight: 600;
  font-style: italic;
}
.activationInfoLayer .helpState {
  background: #ffffff;
  border-radius: 20px;
}
@media screen and (max-width: 600px) {
  .helpCenter {
    width: 100%;
    border-radius: 0;
  }
  .helpCenter .card {
    width: 320px;
    border-radius: 0;
  }
  .helpCenter #header input {
    width: 200px;
  }
}
/*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */
/*
	Styles for basic PhotoSwipe functionality (sliding area, open/close transitions)
*/
/* pswp = photoswipe */
.pswp {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  overflow: hidden;
  -ms-touch-action: none;
  touch-action: none;
  z-index: 2000000;
  -webkit-text-size-adjust: 100%;
  /* create separate layer, to avoid paint on window.onscroll in webkit/blink */
  -webkit-backface-visibility: hidden;
  outline: none;
}
.pswp * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.pswp img {
  max-width: none;
}
/* style is added when JS option showHideOpacity is set to true */
.pswp--animate_opacity {
  /* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */
  opacity: 0.001;
  will-change: opacity;
  /* for open/close transition */
  -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
  transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
}
.pswp--open {
  display: block;
}
.pswp--zoom-allowed .pswp__img {
  /* autoprefixer: off */
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in;
}
.pswp--zoomed-in .pswp__img {
  /* autoprefixer: off */
  cursor: -webkit-grab;
  cursor: -moz-grab;
  cursor: grab;
}
.pswp--dragging .pswp__img {
  /* autoprefixer: off */
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
  cursor: grabbing;
}
/*
	Background is added as a separate element.
	As animating opacity is much faster than animating rgba() background-color.
*/
.pswp__bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  will-change: opacity;
}
.pswp__scroll-wrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.pswp__container,
.pswp__zoom-wrap {
  -ms-touch-action: none;
  touch-action: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
/* Prevent selection and tap highlights */
.pswp__container,
.pswp__img {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
.pswp__zoom-wrap {
  position: absolute;
  width: 100%;
  -webkit-transform-origin: left top;
  -ms-transform-origin: left top;
  transform-origin: left top;
  /* for open/close transition */
  -webkit-transition: -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
  transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
}
.pswp__bg {
  will-change: opacity;
  /* for open/close transition */
  -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
  transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
}
.pswp--animated-in .pswp__bg,
.pswp--animated-in .pswp__zoom-wrap {
  -webkit-transition: none;
  transition: none;
}
.pswp__container,
.pswp__zoom-wrap {
  -webkit-backface-visibility: hidden;
}
.pswp__item {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: hidden;
}
.pswp__img {
  position: absolute;
  width: auto;
  height: auto;
  top: 0;
  left: 0;
}
/*
	stretched thumbnail or div placeholder element (see below)
	style is added to avoid flickering in webkit/blink when layers overlap
*/
.pswp__img--placeholder {
  -webkit-backface-visibility: hidden;
}
/*
	div element that matches size of large image
	large image loads on top of it
*/
.pswp__img--placeholder--blank {
  background: #222;
}
.pswp--ie .pswp__img {
  width: 100% !important;
  height: auto !important;
  left: 0;
  top: 0;
}
/*
	Error message appears when image is not loaded
	(JS option errorMsg controls markup)
*/
.pswp__error-msg {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  font-size: 14px;
  line-height: 16px;
  margin-top: -8px;
  color: #CCC;
}
.pswp__error-msg a {
  color: #CCC;
  text-decoration: underline;
}
/*! PhotoSwipe Default UI CSS by Dmitry Semenov | photoswipe.com | MIT license */
/*

	Contents:

	1. Buttons
	2. Share modal and links
	3. Index indicator ("1 of X" counter)
	4. Caption
	5. Loading indicator
	6. Additional styles (root element, top bar, idle state, hidden state, etc.)

*/
/*

	1. Buttons

 */
/* <button> css reset */
.pswp__button {
  width: 44px;
  height: 44px;
  position: relative;
  background: none;
  cursor: pointer;
  overflow: visible;
  -webkit-appearance: none;
  display: block;
  border: 0;
  padding: 0;
  margin: 0;
  float: right;
  opacity: 0.75;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.pswp__button:focus,
.pswp__button:hover {
  opacity: 1;
}
.pswp__button:active {
  outline: none;
  opacity: 0.9;
}
.pswp__button::-moz-focus-inner {
  padding: 0;
  border: 0;
}
/* pswp__ui--over-close class it added when mouse is over element that should close gallery */
.pswp__ui--over-close .pswp__button--close {
  opacity: 1;
}
.pswp__button,
.pswp__button--arrow--left:before,
.pswp__button--arrow--right:before {
  background: url(//s.jappy.com/i/libs/photoswipe/default-skin.png) 0 0 no-repeat;
  background-size: 264px 88px;
  width: 44px;
  height: 44px;
}
@media (-webkit-min-device-pixel-ratio: 1.1), (-webkit-min-device-pixel-ratio: 1.09375), (min-resolution: 105dpi), (min-resolution: 1.1dppx) {
  /* Serve SVG sprite if browser supports SVG and resolution is more than 105dpi */
  .pswp--svg .pswp__button,
  .pswp--svg .pswp__button--arrow--left:before,
  .pswp--svg .pswp__button--arrow--right:before {
    background-image: url(//s.jappy.com/i/libs/photoswipe/default-skin.svg);
  }
  .pswp--svg .pswp__button--arrow--left,
  .pswp--svg .pswp__button--arrow--right {
    background: none;
  }
}
.pswp__button--close {
  background-position: 0 -44px;
}
.pswp__button--share {
  background-position: -44px -44px;
  display: none !important;
}
.pswp__button--fs {
  display: none;
}
.pswp--supports-fs .pswp__button--fs {
  display: block;
}
.pswp--fs .pswp__button--fs {
  background-position: -44px 0;
}
.pswp__button--zoom {
  display: none;
  background-position: -88px 0;
}
.pswp--zoom-allowed .pswp__button--zoom {
  display: block;
}
.pswp--zoomed-in .pswp__button--zoom {
  background-position: -132px 0;
}
/* no arrows on touch screens */
.pswp--touch .pswp__button--arrow--left,
.pswp--touch .pswp__button--arrow--right {
  visibility: hidden;
}
/*
	Arrow buttons hit area
	(icon is added to :before pseudo-element)
*/
.pswp__button--arrow--left,
.pswp__button--arrow--right {
  background: none;
  top: 50%;
  margin-top: -50px;
  width: 70px;
  height: 100px;
  position: absolute;
}
.pswp__button--arrow--left {
  left: 0;
}
.pswp__button--arrow--right {
  right: 0;
}
.pswp__button--arrow--left:before,
.pswp__button--arrow--right:before {
  content: '';
  top: 35px;
  background-color: rgba(0, 0, 0, 0.3);
  height: 30px;
  width: 32px;
  position: absolute;
}
.pswp__button--arrow--left:before {
  left: 6px;
  background-position: -138px -44px;
}
.pswp__button--arrow--right:before {
  right: 6px;
  background-position: -94px -44px;
}
/*

	2. Share modal/popup and links

 */
.pswp__counter,
.pswp__share-modal {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.pswp__share-modal {
  display: block;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  padding: 10px;
  position: absolute;
  z-index: 1600;
  opacity: 0;
  -webkit-transition: opacity 0.25s ease-out;
  transition: opacity 0.25s ease-out;
  -webkit-backface-visibility: hidden;
  will-change: opacity;
}
.pswp__share-modal--hidden {
  display: none;
}
.pswp__share-tooltip {
  z-index: 1620;
  position: absolute;
  background: #FFF;
  top: 56px;
  border-radius: 2px;
  display: block;
  width: auto;
  right: 44px;
  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
  -webkit-transform: translateY(6px);
  -ms-transform: translateY(6px);
  transform: translateY(6px);
  -webkit-transition: -webkit-transform 0.25s;
  transition: transform 0.25s;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}
.pswp__share-tooltip a {
  display: block;
  padding: 8px 12px;
  color: #000;
  text-decoration: none;
  font-size: 14px;
  line-height: 18px;
}
.pswp__share-tooltip a:hover {
  text-decoration: none;
  color: #000;
}
.pswp__share-tooltip a:first-child {
  /* round corners on the first/last list item */
  border-radius: 2px 2px 0 0;
}
.pswp__share-tooltip a:last-child {
  border-radius: 0 0 2px 2px;
}
.pswp__share-modal--fade-in {
  opacity: 1;
}
.pswp__share-modal--fade-in .pswp__share-tooltip {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}
/* increase size of share links on touch devices */
.pswp--touch .pswp__share-tooltip a {
  padding: 16px 12px;
}
a.pswp__share--facebook:before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  top: -12px;
  right: 15px;
  border: 6px solid transparent;
  border-bottom-color: #FFF;
  -webkit-pointer-events: none;
  -moz-pointer-events: none;
  pointer-events: none;
}
a.pswp__share--facebook:hover {
  background: #3E5C9A;
  color: #FFF;
}
a.pswp__share--facebook:hover:before {
  border-bottom-color: #3E5C9A;
}
a.pswp__share--twitter:hover {
  background: #55ACEE;
  color: #FFF;
}
a.pswp__share--pinterest:hover {
  background: #CCC;
  color: #CE272D;
}
a.pswp__share--download:hover {
  background: #DDD;
}
/*

	3. Index indicator ("1 of X" counter)

 */
.pswp__counter {
  position: absolute;
  left: 0;
  top: 0;
  height: 44px;
  font-size: 13px;
  line-height: 44px;
  color: #FFF;
  opacity: 0.75;
  padding: 0 10px;
}
/*

	4. Caption

 */
.pswp__caption {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  min-height: 44px;
}
.pswp__caption small {
  font-size: 11px;
  color: #BBB;
}
.pswp__caption__center {
  text-align: left;
  max-width: 420px;
  margin: 0 auto;
  font-size: 13px;
  padding: 10px;
  line-height: 20px;
  color: #CCC;
}
.pswp__caption--empty {
  display: none;
}
/* Fake caption element, used to calculate height of next/prev image */
.pswp__caption--fake {
  visibility: hidden;
}
/*

	5. Loading indicator (preloader)

	You can play with it here - http://codepen.io/dimsemenov/pen/yyBWoR

 */
.pswp__preloader {
  width: 44px;
  height: 44px;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -22px;
  opacity: 0;
  -webkit-transition: opacity 0.25s ease-out;
  transition: opacity 0.25s ease-out;
  will-change: opacity;
  direction: ltr;
}
.pswp__preloader__icn {
  width: 20px;
  height: 20px;
  margin: 12px;
}
.pswp__preloader--active {
  opacity: 1;
}
.pswp__preloader--active .pswp__preloader__icn {
  /* We use .gif in browsers that don't support CSS animation */
  background: url(preloader.gif) 0 0 no-repeat;
}
.pswp--css_animation .pswp__preloader--active {
  opacity: 1;
}
.pswp--css_animation .pswp__preloader--active .pswp__preloader__icn {
  -webkit-animation: clockwise 500ms linear infinite;
  animation: clockwise 500ms linear infinite;
}
.pswp--css_animation .pswp__preloader--active .pswp__preloader__donut {
  -webkit-animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite;
  animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite;
}
.pswp--css_animation .pswp__preloader__icn {
  background: none;
  opacity: 0.75;
  width: 14px;
  height: 14px;
  position: absolute;
  left: 15px;
  top: 15px;
  margin: 0;
}
.pswp--css_animation .pswp__preloader__cut {
  /*
			The idea of animating inner circle is based on Polymer ("material") loading indicator
			 by Keanu Lee https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html
		*/
  position: relative;
  width: 7px;
  height: 14px;
  overflow: hidden;
}
.pswp--css_animation .pswp__preloader__donut {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  border: 2px solid #FFF;
  border-radius: 50%;
  border-left-color: transparent;
  border-bottom-color: transparent;
  position: absolute;
  top: 0;
  left: 0;
  background: none;
  margin: 0;
}
@media screen and (max-width: 1024px) {
  .pswp__preloader {
    position: relative;
    left: auto;
    top: auto;
    margin: 0;
    float: right;
  }
}
@-webkit-keyframes clockwise {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes clockwise {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes donut-rotate {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  50% {
    -webkit-transform: rotate(-140deg);
    transform: rotate(-140deg);
  }
  100% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
}
@keyframes donut-rotate {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  50% {
    -webkit-transform: rotate(-140deg);
    transform: rotate(-140deg);
  }
  100% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
}
/*

	6. Additional styles

 */
/* root element of UI */
.pswp__ui {
  -webkit-font-smoothing: auto;
  visibility: visible;
  opacity: 1;
  z-index: 1550;
}
/* top black bar with buttons and "1 of X" indicator */
.pswp__top-bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 44px;
  width: 100%;
}
.pswp__caption,
.pswp__top-bar,
.pswp--has_mouse .pswp__button--arrow--left,
.pswp--has_mouse .pswp__button--arrow--right {
  -webkit-backface-visibility: hidden;
  will-change: opacity;
  -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
  transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
}
/* pswp--has_mouse class is added only when two subsequent mousemove events occur */
.pswp--has_mouse .pswp__button--arrow--left,
.pswp--has_mouse .pswp__button--arrow--right {
  visibility: visible;
}
.pswp__top-bar,
.pswp__caption {
  background-color: rgba(0, 0, 0, 0.5);
}
/* pswp__ui--fit class is added when main image "fits" between top bar and bottom bar (caption) */
.pswp__ui--fit .pswp__top-bar,
.pswp__ui--fit .pswp__caption {
  background-color: rgba(0, 0, 0, 0.3);
}
/* pswp__ui--idle class is added when mouse isn't moving for several seconds (JS option timeToIdle) */
.pswp__ui--idle .pswp__top-bar {
  opacity: 0;
}
.pswp__ui--idle .pswp__button--arrow--left,
.pswp__ui--idle .pswp__button--arrow--right {
  opacity: 0;
}
/*
	pswp__ui--hidden class is added when controls are hidden
	e.g. when user taps to toggle visibility of controls
*/
.pswp__ui--hidden .pswp__top-bar,
.pswp__ui--hidden .pswp__caption,
.pswp__ui--hidden .pswp__button--arrow--left,
.pswp__ui--hidden .pswp__button--arrow--right {
  /* Force paint & create composition layer for controls. */
  opacity: 0.001;
}
/* pswp__ui--one-slide class is added when there is just one item in gallery */
.pswp__ui--one-slide .pswp__button--arrow--left,
.pswp__ui--one-slide .pswp__button--arrow--right,
.pswp__ui--one-slide .pswp__counter {
  display: none;
}
.pswp__element--disabled {
  display: none !important;
}
.pswp--minimal--dark .pswp__top-bar {
  background: none;
}
.pswp__button .pswp__button--share {
  display: none;
}
.pswp_comment {
  position: absolute;
  right: 20px;
  cursor: pointer;
  bottom: 10px;
  padding: 10px;
  border-radius: 15px;
  color: #ffffff;
  border: 1px solid #ffffff;
}
a.pswp_comment:hover {
  background: #333333;
  color: #f1f1f1;
}
.inventoryLayer {
  width: 100%;
}
.listOfCards {
  width: 700px;
  margin: auto;
}
.inventory {
  width: 740px;
  border-radius: 10px;
  margin: auto;
  text-align: center;
}
.inventory.overview {
  border: 3px solid #e9cbbf;
  padding-bottom: 100px;
  min-height: 600px;
}
.inventory .actions {
  padding: 10px 10px;
  background: #36cdd6;
  border-bottom: 5px solid #2dbcc6;
}
.inventory .actionBubble {
  width: 80px;
  padding-bottom: 10px;
  height: 70px;
  font-size: 120%;
  font-weight: 600;
  display: inline-block;
  color: #ffffff;
  text-align: center;
  vertical-align: middle;
  border-radius: 10px;
}
.inventory .actionBubble img {
  width: 50px;
  margin-bottom: 5px;
}
.inventory .actionBubble:first-child {
  margin-left: 20px;
}
.inventory .actionBubble:hover {
  background: #6ef7ff;
}
.inventory .slots {
  padding: 10px 10px;
}
.inventory .slots .slot {
  width: 80px;
  height: 80px;
  display: inline-block;
  background: #fff;
  opacity: 0.75;
  border: 2px solid #eba6eb;
  border-radius: 10px;
}
.inventory .storageWrapper {
  text-align: center;
}
.inventory .storageSize {
  text-align: right;
  padding-bottom: 10px;
  font-family: 'Luckiest Guy', cursive;
  margin: auto;
  display: inline-block;
}
.inventory .storageSize .size {
  float: right;
  color: #4a4a4a;
  background: rgba(255, 255, 255, 0.5);
  font-weight: 900;
  border-radius: 20px;
  padding: 2px 10px;
  letter-spacing: 2px;
}
.inventory .storageSize .size:hover {
  animation: intoFocusLight 0.5s forwards;
}
.inventory .storageSize img {
  float: right;
  width: 25px;
  margin-right: 10px;
}
.inventory .storageSize .image {
  float: right;
  cursor: pointer;
  text-align: center;
  margin-left: 10px;
  padding: 2px 5px;
  font-size: 150%;
  width: 25px;
  margin-top: 0;
}
.inventory .storageSize .rubyExchange {
  float: right;
  cursor: pointer;
  text-align: center;
  margin-left: 10px;
  padding: 2px 10px;
  font-size: 140%;
  width: 25px;
  margin-top: 0;
  margin-right: 20px;
}
.inventory .storageSize .numberOfCards {
  color: #084c71;
  font-size: 140%;
  margin-right: 15px;
}
.activeEffects .amount {
  display: none;
}
.inventoryTitle {
  padding: 20px 0;
  font-size: 170%;
  font-family: 'Luckiest Guy', cursive;
  color: #00476a;
}
.inventory .cardList {
  padding: 10px 5px;
  width: 320px;
  margin: auto;
}
.inventoryCard {
  background: #ffa225;
  display: inline-block;
  margin: 10px;
  border-radius: 10px;
  height: 200px;
  width: 135px;
  position: relative;
  top: 0;
  left: 0;
  overflow: hidden;
  cursor: pointer;
  white-space: normal;
  text-align: center;
}
.inventoryCard .icon {
  padding-top: 10px;
}
.inventoryCard:hover {
  box-shadow: 0 0 15px #ffe000;
  animation: hoverCard 0.2s forwards;
  animation-iteration-count: 1;
  animation-timing-function: ease-out;
}
.inventoryCard .title {
  position: absolute;
  top: 140px;
  text-align: center;
  font-size: 120%;
  width: 96%;
  padding: 2%;
  max-width: 96%;
  text-overflow: ellipsis;
  line-height: 130%;
  color: #fff;
  overflow: hidden;
  font-weight: 500;
  font-family: 'Luckiest Guy', cursive;
}
.inventoryCard .description {
  position: absolute;
  top: 75px;
  left: 0;
  padding: 7px;
  line-height: 1.5;
  width: 160px;
  overflow: hidden;
}
.inventoryCard .action {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 7px;
  z-index: 10;
  text-align: center;
  font-weight: 700;
  background: #36CDD6;
  color: #fff;
}
.inventoryCard .amount {
  position: absolute;
  top: 7px;
  right: 12px;
  color: #ffffff;
  font-family: 'Luckiest Guy', sans-serif;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
  font-size: 150%;
}
.inventoryCard .duration {
  position: absolute;
  top: 4px;
  right: 4px;
}
.inventoryCard .duration_9 {
  animation: pulseDuration 2s infinite;
}
.inventoryCard .duration_0 {
  animation: glowDuration 2s infinite;
}
.inventoryCard .duration img {
  width: 20px;
}
.inventory .cardList .fakeCard {
  background: #d2d2d2;
  background: linear-gradient(0deg, #d2d2d2 0%, #b2b2b2 100%);
  display: inline-block;
  margin: 10px;
  box-shadow: 0 0 2px #c9c9c9;
  border: 1px solid #c9c9c9;
  border-radius: 10px;
  height: 200px;
  width: 135px;
  position: relative;
  top: 0;
  left: 0;
  overflow: hidden;
  cursor: pointer;
  white-space: normal;
  text-align: center;
}
.inventory .cardList .fakeCard img {
  margin: auto;
  width: 70%;
  margin-top: 30px;
}
.inventory .cardList .fakeCard:hover {
  box-shadow: 0 0 15px #ffe000;
}
.inventory .cardList .fakeCard .title {
  width: 100%;
  text-align: center;
  margin-top: 10px;
  font-size: 120%;
  color: #494949;
  font-weight: 500;
  font-family: 'Luckiest Guy', sans-serif;
}
.inventory .cardList .fakeCard.placeholder {
  border: 1px solid #dddddd;
  background: linear-gradient(0deg, #ffffff 0%, #f1f1f1 100%);
}
.inventory .siloList {
  padding: 10px 10px;
}
.inventory .siloList .siloEntry {
  display: inline-block;
  text-align: center;
  height: 170px;
  width: 110px;
  position: relative;
  top: 0;
  left: 0;
  overflow: hidden;
  cursor: pointer;
  white-space: normal;
}
.inventory .siloList .siloEntry img {
  width: 100px;
  height: 100px;
  padding: 15px;
  border-radius: 15px;
}
.inventory .siloList .siloEntry:hover img {
  box-shadow: 0 0 15px #ffe000;
}
.inventory .detail {
  width: 320px;
  text-align: left;
  margin: auto;
  padding-bottom: 20px;
}
.inventory .detail .left {
  width: 150px;
  float: left;
}
.inventory .detail .right {
  float: left;
  width: 200px;
  margin-left: 10px;
  background: #000000;
  border-radius: 10px;
  min-height: 200px;
}
/* Karten */
/* Orange */
.cardStyle1 {
  background: #05b8ea;
  background: linear-gradient(0deg, #ff9933 0%, #ffd237 100%);
  border: 3px solid #ffb134;
}
.cardStyle1 .title {
  color: #ffffff;
}
/* Blau */
.cardStyle2 {
  background: #05b8ea;
  background: linear-gradient(0deg, #45aaf7 0%, #31fff6 100%);
  border: 3px solid #38e4f6;
}
.cardStyle2 .title {
  color: #ffffff;
}
/* Türkise */
.cardStyle3 {
  background: #ff9933;
  background: linear-gradient(0deg, #45fff9 0%, #ffedb0 100%);
  border: 3px solid #a5ebb4;
}
.cardStyle3 .title {
  color: #138d84;
}
/* Pink  text-shadow:-1px 0 #000000, 0 3px #520033, 1px 0 #290019, 0 -1px #220015*/
.cardStyle4 {
  background: #ffd237;
  background: linear-gradient(0deg, #d54bff 0%, #ff46ad 100%);
  border: 3px solid #c42a10;
  box-shadow: 0 0 2px #d54cfe;
}
.cardStyle4 .title {
  color: #ffffff;
}
/* Gruenblau */
.cardStyle5 {
  background: #05b8ea;
  background: linear-gradient(0deg, #c3ec44 0%, #4ce0ea 100%);
  border: 3px solid #6ee1ae;
}
.cardStyle5 .title {
  color: #006263;
}
/* Orange Pink  text-shadow:-1px 0 #000000, 0 3px #520033, 1px 0 #290019, 0 -1px #220015*/
.cardStyle6 {
  background: #ffd237;
  background: linear-gradient(0deg, #ff00c4 0%, #ffd237 100%);
  border: 3px solid #ff806e;
  box-shadow: 0 0 2px #ff7a17;
}
.cardStyle6 .title {
  color: #ffffff;
}
/* Blau Gruen */
.cardStyle7 {
  background: #05b8ea;
  background: linear-gradient(0deg, #31d76c 0%, #00d4ff 100%);
  border: 3px solid #17b7cb;
  box-shadow: 0 0 2px #ff7a17;
}
/* Haut */
.cardStyle8 {
  background: #ffc1b4;
  background: linear-gradient(30deg, #ffb8b3 0, #fff3ba 100%);
  border: 3px solid #ffd6b7;
  box-shadow: 0 0 2px #ffdfb9;
}
.cardStyle8 .title {
  color: #9d4c31;
}
/* Gruen */
.cardStyle9 {
  background: #69c417;
  background: linear-gradient(330deg, #69c417 0, #f2ec3c 100%);
  border: 3px solid #9dd325;
  box-shadow: 0 0 2px #f2ec3c;
}
/* Gelbgold */
.cardStyle10 {
  background: #ffb756;
  background: linear-gradient(30deg, #ffb756 0%, #fdff70 50%, #fec005 100%);
  border: 3px solid #c39800;
  box-shadow: 0 0 2px #f2ec3c;
}
.cardStyle10 .title {
  color: #503800;
}
/* Orangebraun */
.cardStyle11 {
  background: #247f7b;
  background: linear-gradient(0deg, #ffa225 0%, #f25e3c 100%);
  border: 3px solid #eb4919;
  box-shadow: 0 0 2px #ff7a17;
}
.cardStyle11 .title {
  color: #ffffff;
}
/* Pink Orange */
.cardStyle12 {
  background: #247f7b;
  background: linear-gradient(0deg, #ff9933 0%, #ff37cb 100%);
  border: 3px solid #ec6721;
  box-shadow: 0 0 2px #ff7a17;
}
.cardStyle12 .title {
  color: #ffffff;
}
/* Giftgrün */
.cardStyle13 {
  background: #b1fa65;
  background: linear-gradient(30deg, #61f5a3 0%, #fcff2a 50%, #61bc1d 100%);
  border: 3px solid #9bd522;
  box-shadow: 0 0 2px #58bc1f;
}
.cardStyle13 .title {
  color: #405f0c;
}
/* Rot Pink */
.cardStyle14 {
  background: #fd419c;
  background: linear-gradient(0deg, #ff4ba6 0, #f00059 100%);
  border: 3px solid #e30a5c;
  box-shadow: 0 0 2px #f20861;
}
.cardStyle14 .title {
  color: #ffffff;
}
/* Gelb */
.cardStyle15 {
  background: #fffa61;
  background: linear-gradient(120deg, #fffa6c 0, #fffa50 100%);
  border: 3px solid #f1ec54;
  box-shadow: 0 0 2px #d3cf4b;
}
.cardStyle15 .title {
  color: #000000;
}
/* Grau */
.cardStyle16 {
  background: #cec4c5;
  background: linear-gradient(45deg, #d3c8c9 0, #999 100%);
  border: 3px solid #9f9e9e;
  box-shadow: 0 0 2px #9e9d9d;
}
.cardStyle16 .title {
  color: #343434;
}
/* Mintblau */
.cardStyle17 {
  background: #90efeb;
  background: linear-gradient(120deg, #b0ffde 0, #87eaef 100%);
  border: 2px solid #98eae3;
  box-shadow: 0 0 2px #aefdd8;
  color: #000000;
}
.cardStyle17 .title {
  color: #3f7c79;
}
/* Schwarze Karte */
.cardStyle21 {
  background: #247f7b;
  background: linear-gradient(0deg, #ffa225 0%, #f25e3c 100%);
  border: 3px solid #eb4919;
  box-shadow: 0 0 2px #ff7a17;
}
.cardStyle21 .title {
  color: #ffffff;
}
/* Schwarze Karte */
.cardStyle22 {
  background: #247f7b;
  background: linear-gradient(0deg, #ff9933 0%, #ff37cb 100%);
  border: 3px solid #ec6721;
  box-shadow: 0 0 2px #ff7a17;
}
.cardStyle22 .title {
  color: #ffffff;
}
/* Talisman Karte */
.cardStyle50 {
  background: #49ccff;
  background: linear-gradient(30deg, #ff9200 0%, #fcff2a 50%, #ff00e0 100%);
  border: 3px solid #e4971c;
  box-shadow: 0 0 2px #ff7a17;
}
.cardStyle50 .title {
  color: #75550b;
}
/* Leer */
.cardStyle99 {
  background: #247f7b;
  background: linear-gradient(0deg, #247f7b 0%, #31fff6 100%);
  border: 3px solid #fff6a3;
  box-shadow: 0 0 2px #ff7a17;
}
.cardStyle99 .title {
  color: #ffffff;
}
.suggestOptions {
  width: 700px;
  margin: auto;
  margin-bottom: 10px;
}
.suggestLoot {
  background: #70edf0;
  background: linear-gradient(30deg, #fbd9d0 0%, #30f6fe 100%);
  border: 3px solid #55cfd2;
  box-shadow: 0 0 10px #ffee39;
  display: inline-block;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  white-space: normal;
  text-align: center;
}
.suggestLoot .icon {
  float: left;
  width: 40px;
  margin: 5px 10px;
}
.suggestLoot:hover {
  box-shadow: 0 0 15px #ffe000;
}
.suggestLoot .title {
  float: left;
  text-align: center;
  font-size: 160%;
  width: 200px;
  margin-right: 10px;
  padding: 15px;
  line-height: 130%;
  color: #fff;
  overflow: hidden;
  font-weight: 500;
  font-family: 'Luckiest Guy', cursive;
}
.inventory .tradeList {
  padding: 10px 20px;
  background: #36cdd6;
  border-top: 5px solid #2dbcc6;
}
.inventory .tradeList .tradeEntry {
  background: #ccfffc;
  border: 1px solid #33c9d2;
  display: inline-block;
  margin: 3px;
  border-radius: 10px;
  height: 70px;
  width: 70px;
  position: relative;
  top: 0;
  left: 0;
  overflow: hidden;
  cursor: pointer;
  white-space: normal;
}
.inventory .tradeList .tradeEntry .pic {
  position: absolute;
  width: 70px;
}
.inventory .tradeList .tradeEntry .cost img {
  width: 20px;
  height: 20px;
}
.inventory .tradeList .tradeEntry:hover {
  box-shadow: 0 0 15px #ffe000;
}
.inventory .tradeList .tradeEntry .title {
  position: absolute;
  top: 30px;
  left: 10px;
  text-align: center;
  font-size: 13px;
  line-height: 140%;
  font-weight: 900;
  color: #fff;
  width: 150px;
  overflow: hidden;
}
.inventory .tradeList .tradeEntry .description {
  position: absolute;
  top: 75px;
  left: 0;
  padding: 7px;
  line-height: 1.5;
  width: 160px;
  overflow: hidden;
}
.inventory .tradeList .cost {
  color: #0a4a4f;
  font-weight: 900;
  top: 50px;
  left: 10px;
  font-size: 13px;
  position: relative;
  background: rgba(204, 255, 252, 0.45);
}
.inventory .dealerShip {
  animation: animateShip 2s infinite;
  float: left;
  width: 150px;
  top: 30px;
  position: relative;
  left: 50px;
}
.inventory .dealerPicture {
  float: right;
}
.inventory .dealerPicture img {
  width: 120px;
  margin-right: 60px;
  margin-top: 50px;
}
.inventory .emptyState span {
  background: rgba(255, 255, 255, 0.45);
  display: inline-block;
  padding: 15px;
  border-radius: 15px;
}
.lootboxContainer {
  width: 750px;
  height: 600px;
  border-radius: 10px;
  margin: auto;
  border: 3px solid #e3a91a;
}
.lootboxContainerHalloween {
  width: 750px;
  height: 800px;
  border-radius: 10px;
  margin: auto;
  border: 3px solid #1e528b;
}
.fixedAvailable .layerCardDetail {
  position: fixed !important;
  bottom: 0 !important;
  overflow-y: scroll;
  margin: 0 !important;
  height: 100%;
}
.layerCardDetail {
  padding: 0;
  margin: 0;
  height: 100%;
  box-shadow: 0 0 5px #17949b;
}
.layerCardDetail {
  background: rgba(0, 0, 0, 0.15);
}
.layerCardDetail .frame {
  margin: auto;
  margin-top: 70px;
  line-height: 150%;
  width: 320px;
  border-radius: 15px;
  height: 480px;
  overflow: hidden;
}
.layerCardDetail .content {
  position: relative;
  margin-top: -240px;
  padding: 25px;
  height: 150px;
}
.layerCardDetail .title {
  text-align: center;
  font-size: 120%;
  width: 100%;
  line-height: 140%;
  font-weight: 900;
  color: #fff;
  overflow: hidden;
}
.layerCardDetail .description {
  margin-top: 20px;
  line-height: 140%;
  font-size: 100%;
}
.layerCardDetail .listOfOptions {
  position: absolute;
  width: 320px;
  margin-top: 20px;
  text-align: center;
  margin-left: 20px;
}
.layerCardDetail .listOfOptions .option {
  float: left;
  margin-left: 15px;
  cursor: pointer;
}
.layerCardDetail .listOfOptions .option .text {
  padding: 2px;
  border-radius: 10px;
  margin-top: 10px;
  font-weight: 300;
  font-size: 80%;
  background: #ffffff;
  opacity: 0.6;
}
.layerCardDetail .listOfOptions img {
  width: 60px;
  height: 60px;
  background: #ffd237;
  border-radius: 50%;
  padding: 10px;
  border: 1px solid #e1e1e1;
  box-shadow: 0 0 5px #17949b;
}
.layerCardDetail .listOfOptions .option.play img {
  width: 100px;
  height: 100px;
  background: #ffffff;
  border: 3px solid #e1e1e1;
}
.layerCardDetail .listOfOptions .option.play .text {
  font-weight: 700;
  font-size: 120%;
}
.layerCardDetail .listOfOptions .option:hover img {
  border: 3px solid #dddddd;
}
.layerCardDetail .listOfOptions .option:hover .text {
  opacity: 1;
}
.layerCardDetail .closeLayer {
  width: 25px;
  padding: 3px;
  border-radius: 50%;
  background: #000000;
  opacity: 0.5;
  position: absolute;
  cursor: pointer;
  margin-left: 10px;
  margin-top: -12px;
}
.layerCardDetail .closeLayer:hover {
  opacity: 1;
}
.layerCard .requirements {
  font-family: 'Poppins', cursive;
  font-size: 110%;
  line-height: 140%;
  color: #ab4563;
}
.layerCard .requirements .title {
  font-weight: 900;
}
.layerCard .requirements .entry {
  padding-top: 5px;
}
.layerCard .requirements .entry img {
  width: 20px;
}
.layerCard .requirements .entry.check {
  color: #859c00;
}
.layerCard .requirements.notFulfilled {
  text-align: center;
  background: #ff207f;
  border-radius: 15px;
  padding: 10px 15px;
  color: #ffffff;
  margin-top: 10px;
  font-weight: 900;
}
.layerCard {
  background: rgba(0, 0, 0, 0.4);
  width: 100vw;
  height: 100vh;
  text-align: center;
}
.layerCard .close {
  width: 300px;
  text-align: right;
}
.layerCard .close img {
  width: 20px;
  position: absolute;
  opacity: 0.8;
}
.layerCard .close img:hover {
  animation: focusIcon 1s;
  opacity: 0.8;
  cursor: pointer;
  transition: 1s;
}
.layerCard .actionList span {
  display: block;
  color: #ffffff;
  border-radius: 10px;
  margin-right: 5px;
  font-size: 140%;
  padding: 10px;
  cursor: pointer;
  text-align: center;
  font-family: 'Luckiest Guy', cursive;
  margin-bottom: 5px;
  background: linear-gradient(0deg, #3be0ff 0%, #52afff 100%);
  border: 3px solid #51b0ff;
  box-shadow: 0 0 2px #ff7a17;
}
.layerCard .actionList span.play {
  background: linear-gradient(0deg, #ff9933 0%, #ffd237 100%);
  border: 3px solid #ffb134;
  box-shadow: 0 0 2px #ff7a17;
}
.layerCard .actionList span:hover {
  border: 3px solid #b67f27;
  transition: 1s;
}
.layerCard .actionList {
  margin-bottom: 10px;
}
.layerCard .subActions span {
  display: block;
  float: left;
  border-radius: 50%;
  background: #ffffff;
  padding: 5px;
  border: 1px solid #eecdbf;
  opacity: 0.8;
  cursor: pointer;
}
.layerCard .subActions span:hover {
  opacity: 1;
}
.layerCard .subActions img {
  width: 30px;
}
.lootInfo .actionList span {
  cursor: pointer;
  background: #f2c7c4;
  padding: 10px;
  border-radius: 15px;
  font-weight: 900;
  display: block;
}
.lootInfo .actionList span:hover {
  background: #ffffff;
  transition: 0.5s;
}
.effectList {
  font-size: 110%;
  color: #ffffff;
  padding-top: 10px;
  padding-bottom: 10px;
}
.effectList .headline {
  font-size: 130%;
  color: #825755;
  font-family: 'Luckiest Guy', cursive;
}
.effect {
  display: block;
  padding-top: 10px;
  cursor: pointer;
}
.activeEffects .effect:hover {
  background: rgba(0, 0, 0, 0.7);
  transition: 0.5s;
}
.possibleEffects .effect:hover {
  background: rgba(255, 255, 255, 0.3);
  transition: 0.5s;
}
.effectFeedback .effect {
  opacity: 0;
  animation: fadeAndScale 0.5s forwards cubic-bezier(0.4, -1.08, 0.58, 1.95);
  animation-delay: -0.2s;
  transform-origin: center bottom;
}
.effect .description {
  font-weight: 600;
  float: left;
}
.effectProbabilityGuaranteed {
  color: #523331;
}
.effectProbabilityMostly {
  color: #00b06a;
}
.effectProbabilityVeryFrequently {
  color: #179091;
}
.effectProbabilityFrequently {
  color: #0176b2;
}
.effectProbabilityEveryNowAndThen {
  color: #1ba9c9;
}
.effectProbabilityRare {
  color: #c38a00;
}
.effectProbabilityVeryRare {
  color: #df3699;
}
.effectProbabilityUltraRare {
  color: #e61b1b;
}
.activeEffects {
  width: 300px;
  margin: auto;
  background: #32f2ff;
  border-radius: 10px;
  text-align: left;
  font-size: 100%;
}
.activeEffects .headline {
  text-align: center;
  color: #00476a;
  font-size: 170%;
}
.activeEffects .effect {
  padding: 10px;
}
.cardOverviewInfo {
  padding: 15px 0;
  border-radius: 10px;
  font-size: 110%;
  line-height: 150%;
  color: #602e0c;
  font-family: 'Poppins', cursive;
  margin-top: 10px;
  margin-bottom: 10px;
}
.effectNegative {
  animation: glowingText 1s ease-in-out infinite;
  background: #ff0052;
  border-radius: 5px;
  color: #ffffff;
  padding: 0 5px;
}
.cardSpread {
  padding: 10px 20px;
  color: #f1f1f1;
}
.cardDuration {
  float: right;
  padding-top: 3px;
}
.cardDuration .process {
  display: none;
}
.cardDuration .process img {
  width: 20px;
}
.activeEffects .cardDuration .process {
  display: block;
}
.effectDescription {
  display: none;
  width: 100%;
  line-height: 130%;
}
.effectDescription .description {
  padding: 10px 0;
  width: 280px;
  font-weight: 300;
}
.lootInfo {
  width: 720px;
  line-height: 140%;
  text-align: center;
  margin-top: 15px;
  font-size: 150%;
  position: absolute;
}
.lootInfo .wrapper {
  padding: 10px;
  width: 300px;
  margin: auto;
}
.lootInfo .text {
  padding: 10px;
  border-radius: 10px;
  background: #ffce37;
  color: #602e0c;
  opacity: 0.8;
}
.lootInfo a.open,
.lootInfo button.open {
  padding: 10px 15px;
  display: block;
  border-radius: 10px;
  background: #05b8ea;
  background: linear-gradient(0deg, #ff9933 0%, #ffd237 100%);
  border: 3px solid #ffb134;
  box-shadow: 0 0 2px #ff7a17;
  font-family: 'Luckiest Guy', cursive;
  font-size: 120%;
  color: #ffffff;
  margin-top: 10px;
}
.lootInfo button {
  min-width: 300px;
  cursor: pointer;
}
.lootInfo a:hover.open,
button:hover.open {
  border: 3px solid #fff697;
  transition: 0.8s;
}
.lootInfo a.backToInventory,
.lootInfo button.backToInventory {
  background: linear-gradient(0deg, #3be0ff 0%, #52afff 100%);
  border: 3px solid #51b0ff;
}
.lootInfo a.backToLootbox {
  background: #ff8019;
  background: linear-gradient(0deg, #ffa225 0%, #ff7a17 100%);
  border: 3px solid #ff831b;
  box-shadow: 0 0 2px #ff7a17;
}
.lootInfo .cardInstance {
  background: #ffcfd1;
  background: linear-gradient(45deg, #ffcfd1, #f2edcf);
  width: 280px;
  padding: 10px;
  font-size: 0.7em;
  border: 6px solid #f2c7c4;
  border-radius: 10px;
  margin-bottom: 50px;
}
.lootInfo .detail {
  width: 280px !important;
}
.cardInstance .headline {
  font-size: 150%;
  font-family: 'Luckiest Guy', cursive;
  font-weight: 700;
}
.lootbox {
  width: 750px;
  margin: auto;
  text-align: center;
  position: absolute;
  margin-top: 430px;
}
.lootbox .box {
  width: 180px;
  margin-left: 150px;
}
.moreLootInfo {
  width: 750px;
  text-align: center;
  position: absolute;
  margin-top: 340px;
  color: #ffffff;
  font-weight: 300;
  line-height: 140%;
}
.moreLootInfo a {
  color: #ffffff;
  text-decoration: underline;
}
.selectCards {
  width: 750px;
  position: absolute;
  margin-top: 170px;
}
.selectCards .wrapper {
  width: 360px;
  margin: auto;
}
.selectCards .inventoryCard {
  animation: twistCard 1s ease-in-out;
}
.selectCards .inventoryCard.animation2 {
  animation: twistCard2 1.5s ease-in-out;
}
.selectCards .inventoryCard.animation3 {
  animation: twistCard3 2s ease-in-out;
}
.selectCards a.inventoryCard {
  height: 150px;
  width: 100px;
  margin: 5px;
}
.selectCards a.inventoryCard .title {
  top: 105px;
  font-size: 100%;
}
/* rgb(49 246 255) 0%, #419de9 100% - #ffcfd1,#f2edcf*/
.instanceList {
  width: 320px;
  animation: openCard 0.3s forwards;
  animation-iteration-count: 1;
  animation-timing-function: ease-out;
  margin: 10px auto auto auto;
  background: #2d3638;
  border-radius: 10px;
  padding: 20px;
  padding-bottom: 10px;
  border: 6px solid #f2c7c4;
  max-height: 90vh;
  overflow-y: scroll;
  background: linear-gradient(45deg, #ffcfd1, #f2edcf);
}
.instanceList::-webkit-scrollbar {
  width: 5px;
}
.instanceList::-webkit-scrollbar-track {
  color: #333333;
  background: #f2edcf;
}
.instanceList::-webkit-scrollbar-button {
  color: #333333;
}
.instanceList::-webkit-scrollbar-thumb {
  color: #333333;
  background: #d39a96;
}
.instanceList {
  scrollbar-color: #d39a96 #f2edcf;
  scrollbar-width: thin;
}
.cardInfo {
  text-align: left;
  line-height: 160%;
  color: #825755;
  margin: auto;
  margin-top: 10px;
  font-size: 90%;
}
.cardInfo .tsBygone {
  color: #825755;
}
.layerCard .inventoryCard {
  box-shadow: 0 0 15px #be8783;
}
.rubyExchangeLayerBackground,
.rubyConfirmBackground,
.lootThrowAwayConfirmBackground,
.receiveCardBackground {
  width: 100vw;
  height: 100vh;
  text-align: center;
  background: rgba(0, 0, 0, 0.7);
  padding-top: 10px;
}
.rubyExchangeLayer {
  width: 320px;
  top: 55px;
  line-height: 150%;
  animation: openCard 0.3s forwards;
  animation-iteration-count: 1;
  animation-timing-function: ease-out;
  margin: auto;
  background: #2d3638;
  border-radius: 10px;
  padding: 20px;
  border: 6px solid #f2c7c4;
  max-height: 90vh;
  overflow-y: scroll;
  background: linear-gradient(45deg, #ffcfd1, #f2edcf);
}
.rubyExchangeLayer h3 {
  font-weight: 700;
  font-size: 120%;
}
.rubyExchangeLayer .headline {
  font-family: 'Luckiest Guy', cursive;
  color: #9c5b5b;
  font-size: 150%;
}
.rubyExchangeLayer::-webkit-scrollbar {
  width: 5px;
}
.rubyExchangeLayer::-webkit-scrollbar-track {
  color: #333333;
  background: #f2edcf;
}
.rubyExchangeLayer::-webkit-scrollbar-button {
  color: #333333;
}
.rubyExchangeLayer::-webkit-scrollbar-thumb {
  color: #333333;
  background: #d39a96;
}
.rubyExchangeLayer {
  scrollbar-color: #d39a96 #f2edcf;
  scrollbar-width: thin;
}
.rubyExchangeLayer table th {
  text-align: center;
  padding: 5px;
  background: #d5a39f;
}
.rubyExchangeLayer button {
  padding: 10px 15px;
  border-radius: 10px;
  background: linear-gradient(0deg, #ff9933 0, #ffd237 100%);
  border: 3px solid #ffb134;
  box-shadow: 0 0 2px #ff7a17;
  font-family: 'Luckiest Guy', cursive;
  font-size: 120%;
  color: #ffffff;
}
.rubyExchangeLayer button:hover {
  cursor: pointer;
  border: 3px solid #d7811e;
  transition: 0.5s;
}
.rubyExchangeLayer .close {
  width: 300px;
  text-align: right;
}
.rubyExchangeLayer .close img {
  width: 20px;
  position: absolute;
  opacity: 0.8;
  top: 15px;
  right: 10px;
}
.rubyExchangeLayer .close img:hover {
  animation: focusIcon 1s;
  opacity: 0.8;
  cursor: pointer;
  transition: 1s;
}
.rubyExchangeLayer table td {
  padding: 5px;
}
.cardDeleteLayer {
  width: 280px;
  font-family: 'Luckiest Guy', cursive;
  color: #4d3129;
  font-size: 150%;
  margin-left: -166px;
  left: 50%;
  top: 60px;
  position: fixed;
  margin-top: 55px;
  line-height: 150%;
  animation: openCard 0.3s forwards;
  animation-iteration-count: 1;
  animation-timing-function: ease-out;
  background: #2d3638;
  border-radius: 10px;
  padding: 20px;
  border: 6px solid #c79081;
  background: linear-gradient(0deg, #c79081, #dfa579);
}
.cardDeleteLayer button {
  padding: 5px 10px;
  border-radius: 10px;
  margin-bottom: 5px;
  background: linear-gradient(0deg, #ff9933 0, #ffd237 100%);
  border: 3px solid #ffb134;
  box-shadow: 0 0 2px #ff7a17;
  font-family: 'Luckiest Guy', cursive;
  font-size: 100%;
  color: #ffffff;
}
.cardDeleteLayer button:hover {
  cursor: pointer;
  border: 3px solid #d7811e;
  transition: 0.5s;
}
.inventoryHalloween .activeEffects {
  background: rgba(0, 0, 0, 0.7);
}
.inventoryHalloween .activeEffects .headline,
.inventoryHalloween .inventoryTitle {
  color: #3bf5fc;
}
.inventoryHalloween .suggestLoot {
  border-color: #194b7f;
  color: #1a0f26 !important;
  width: 300px;
}
.inventoryHalloween .suggestLoot .icon {
  display: none;
}
.inventoryHalloween .suggestLoot .title {
  color: #1a0f26;
}
.lootboxHalloween {
  min-height: 900px;
}
.lootboxHalloween .storageSize .size {
  color: #ffffff;
}
.lootboxHalloween .moreLootInfo {
  color: #000000;
}
.lootboxHalloween .moreLootInfo a {
  color: #000000;
}
.lootboxHalloween .lootInfo .text {
  color: #ffffff;
  background: #1a0f26;
}
.lootboxHalloween .lootbox .box {
  display: none;
}
.inventoryFall .activeEffects {
  background: rgba(0, 0, 0, 0.7);
}
.inventoryFall .activeEffects .headline {
  color: #ffffff;
}
.inventoryFall .suggestLoot {
  border-color: #fbd44a;
  width: 300px;
  background: linear-gradient(30deg, #ad1324 0%, #ff5567 100%);
}
.inventoryFall .suggestLoot .icon {
  display: none;
}
.inventoryFall .suggestLoot .title {
  color: #ffffff;
}
.inventoryFall .showAllEffects {
  background: #f2bc2e;
}
.inventoryFall .inventoryTitle {
  color: #b11d05;
}
.inventoryFall .dataTable a {
  color: #333333;
}
.inventoryFall .suggestLoot:hover {
  box-shadow: 0 0 15px #ab1904;
}
.lootboxXmas {
  min-height: 900px;
}
.lootboxXmas .storageSize .size {
  color: #000000;
}
.lootboxXmas .moreLootInfo {
  color: #000000;
  margin-top: 380px;
}
.lootboxXmas .moreLootInfo a {
  color: #000000;
}
.lootboxXmas .lootInfo .text {
  color: #ffffff;
  background: rgba(0, 0, 0, 0.7);
  font-size: 90%;
}
.lootboxXmas .lootbox .box {
  display: none;
}
.lootboxXmas a.highlight {
  background: linear-gradient(0deg, #ff3343 0%, #ff0081 100%);
  border: 3px solid #ce0061;
}
.lootboxXmas .lootInfo a.backToInventory,
.lootboxXmas .lootInfo button.backToInventory {
  background: linear-gradient(0deg, #fbf4e9 0%, #dae2d4 100%);
  border: 3px solid #b1cac2;
  color: #446d7b;
}
.inventoryXmas .activeEffects {
  background: rgba(0, 0, 0, 0.7);
}
.inventoryXmas .activeEffects .headline {
  color: #ffffff;
}
.inventoryXmas .suggestLoot {
  border-color: #fbd44a;
  width: 300px;
  background: linear-gradient(30deg, #ad1324 0%, #ff5567 100%);
}
.inventoryXmas .suggestLoot .icon {
  display: none;
}
.inventoryXmas .suggestLoot .title {
  color: #ffffff;
}
.inventoryXmas .showAllEffects {
  background: #fbd44a;
}
.inventoryXmas .inventoryTitle {
  color: #ff2805;
}
.inventoryXmas .dataTable a {
  color: #333333;
}
.inventoryXmas .suggestLoot:hover {
  box-shadow: 0 0 15px #ab1904;
}
.inventoryXmas.inventory .storageSize .numberOfCards {
  color: #ffffff;
}
.lootboxFall {
  min-height: 900px;
}
.lootboxFall .storageSize .size {
  color: #000000;
}
.lootboxFall .moreLootInfo {
  color: #000000;
  margin-top: 380px;
}
.lootboxFall .moreLootInfo a {
  color: #000000;
}
.lootboxFall .lootInfo .text {
  color: #ffffff;
  background: #1a0f26;
}
.lootboxFall .lootbox .box {
  display: none;
}
.lootboxFall a.highlight {
  background: linear-gradient(0deg, #ff3343 0%, #ff0081 100%);
  border: 3px solid #ce0061;
}
.inventoryWater .activeEffects {
  background: rgba(0, 0, 0, 0.7);
}
.inventoryWater .activeEffects .headline {
  color: #ffffff;
}
.inventoryWater .suggestLoot {
  border-color: #fbd44a;
  width: 300px;
  background: linear-gradient(30deg, #ff4c60 0%, #ff5567 100%);
  border-radius: 30px;
}
.inventoryWater .suggestLoot .icon {
  display: none;
}
.inventoryWater .suggestLoot .title {
  color: #ffffff;
}
.inventoryWater .showAllEffects {
  background: #fbd44a;
}
.inventoryWater .inventoryTitle {
  color: #ffffff;
}
.inventoryWater .dataTable a {
  color: #333333;
}
.inventoryWater .suggestLoot:hover {
  box-shadow: 0 0 15px #ab1904;
}
.inventoryWater.inventory .storageSize .numberOfCards {
  color: #00a6ff;
}
.lootboxWater {
  min-height: 900px;
}
.lootboxWater .storageSize .size {
  color: #00a6ff;
}
.lootboxWater .moreLootInfo {
  color: #000000;
  margin-top: 380px;
}
.lootboxWater .moreLootInfo a {
  color: #000000;
}
.lootboxWater .lootInfo .text {
  font-size: 90%;
}
.lootboxWater .lootbox .box {
  display: none;
}
.lootboxWater a.highlight {
  background: linear-gradient(0deg, #ff3343 0%, #ff0081 100%);
  border: 3px solid #ce0061;
}
.lootboxWater .lootInfo a.backToInventory,
.lootboxWater .lootInfo button.backToInventory {
  background: linear-gradient(0deg, #fbf4e9 0%, #dae2d4 100%);
  border: 3px solid #b1cac2;
  color: #446d7b;
}
.achievementDetail .image {
  margin: auto;
  width: 256px;
}
.achievementDetail .image img {
  width: 256px;
}
.achievementDetail .achievementTitle {
  text-align: center;
  padding: 20px;
  font-size: 180%;
  font-weight: 200;
}
.achievementDetail .redeemed {
  font-size: 120%;
  font-weight: 300;
}
.achievementDetail .achievementDescription {
  text-align: center;
  padding: 0 20px 40px 20px;
}
.achievementDetail .achievementBonus {
  width: 320px;
  margin: auto;
  text-align: center;
}
.achievementDetail .button {
  border: 1px solid #47c6f8;
  color: #fff;
  background: #49ccff;
  cursor: pointer;
  text-align: center;
  padding: 10px;
  border-radius: 15px;
  display: block;
  width: 120px;
  margin: auto;
  margin-top: 10px;
}
.achievementDetail .button.buttonRound {
  padding: 12px;
  border-radius: 50%;
  width: 64px;
  height: 64px;
  background: #f0f0f0;
  border-color: #808080;
  transition: margin 0.3s, background 0.3s, width 0.3s, height 0.3s, border-color 0.7s, box-shadow 1.3s;
  margin: 8px auto;
}
.achievementDetail .button.buttonRound:hover {
  background: #f8f8f8;
  border-color: #ffc;
  width: 72px;
  height: 72px;
  margin: 0 auto;
  box-shadow: 0 0 7px 2px #ffffc0;
}
.achievementDetail .marginTop {
  margin-top: 3em;
}
.achievementList {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-content: center;
  align-items: start;
  justify-items: start;
  align-content: center;
  gap: 5px;
  max-width: 690px;
}
.achievementList .entry {
  padding: 10px;
  margin-right: 5px;
  margin-bottom: 5px;
  border-radius: 15px;
  background: #f1f1f1;
}
.achievementList .entry:hover {
  background: #ffedb0;
  transition: 0.5s;
}
.achievementList .entry img {
  width: 140px;
}
.achievementList .achievementTitle {
  text-align: center;
  padding: 15px 0 10px 0;
  font-size: 120%;
  font-weight: 300;
  color: #000000;
}
@media screen and (min-width: 600px) {
  .achievementList {
    grid-template-columns: repeat(4, 1fr);
  }
}
.achievementLayer {
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.65);
  width: 100%;
  padding-top: 10px;
  display: grid;
}
#achievementLayer > .layerWrapper {
  padding-bottom: 100px;
  justify-self: center;
  align-self: center;
}
#achievementLayer .container {
  max-width: 600px;
  background: #fff;
  min-width: 300px;
  border-radius: 10px;
  padding: 25px;
}
#achievementLayer .head {
  display: flex;
  align-items: center;
  color: #484848;
  height: 3.5em;
  max-width: 100%;
  background: #fff;
}
#achievementLayer .head .caption {
  flex-grow: 1;
  margin: .5em 1em;
  font-weight: 700;
  font-size: 1.3em;
  text-overflow: ellipsis;
}
#achievementLayer .head button {
  border: 1px solid #c7c7c7;
  background: #d5d5d5;
  cursor: pointer;
  border-radius: 15px;
  color: #333333;
  display: inline-block;
  height: 2.5em;
  margin: .5em;
  line-height: 2em;
  text-align: center;
  font-weight: 300;
  padding: 2px 10px;
}
#achievementLayer .layerContentArea {
  margin: 11px;
}
#achievementLayer .layerCheckboxArea {
  margin: 7px 11px;
}
#achievementLayer .layerLabelCheckbox {
  padding: 3px;
  display: flex;
  flex-direction: row;
  align-content: center;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 5px;
  cursor: pointer;
  border-radius: 7px;
}
#achievementLayer .layerLabelCheckbox:hover {
  background: #f0f0f0;
}
#achievementLayer .layerLabelCheckbox > input[type="checkbox"] {
  min-width: 24px;
  min-height: 24px;
  transition: .3s;
}
.effectFeedback .badLuck {
  padding: 10px 0;
  color: #ff2525;
  font-weight: 600;
  font-size: 130%;
  font-family: 'Poppins', cursive;
}
.optionalEffect {
  display: none;
}
.optionalEffect.optionalFade {
  display: block;
  animation: fadeAndScale 0.4s forwards;
  animation-timing-function: ease-out;
  animation-delay: -0.2s;
}
.showAllEffects {
  padding: 10px;
  text-align: center;
  margin: 5px;
  background: #3bf5fc;
  border-radius: 15px;
  color: #060d19;
  font-weight: 900;
}
.layerCard .showAllEffects {
  background: #e5b6b3;
}
.showAllEffects:hover {
  cursor: pointer;
  transition: 0.5s;
  background: #ffffff;
}
.inventory .emptyState .headline {
  background: #1a0f26;
  color: #ffffff;
  border-radius: 15px;
  padding: 5px 10px;
}
.inventoryButtonYellow {
  padding: 10px 15px;
  border-radius: 10px;
  margin-bottom: 5px;
  background: linear-gradient(0deg, #ff9933 0, #ffd237 100%);
  border: 3px solid #ffb134;
  box-shadow: 0 0 2px #ff7a17;
  font-family: 'Luckiest Guy', cursive;
  font-size: 100%;
  color: #ffffff;
}
.inventoryButtonYellow:hover {
  cursor: pointer;
  border: 3px solid #d7811e;
  transition: 0.5s;
}
.inventoryButtonBlue {
  padding: 10px 15px;
  border-radius: 10px;
  margin-bottom: 5px;
  background: linear-gradient(180deg, #3be0ff 0, #52afff 100%);
  border: 3px solid #51b0ff;
  box-shadow: 0 0 2px #1793FF;
  font-family: 'Luckiest Guy', cursive;
  font-size: 100%;
  color: #ffffff;
}
.inventoryButtonBlue:hover {
  cursor: pointer;
  border: 3px solid #d7811e;
  transition: 0.5s;
}
.inventoryButtonYellow[disabled],
.inventoryButtonBlue[disabled] {
  background: linear-gradient(180deg, #9D9D9D 0, #A8A8A8 100%);
  border: 3px solid #A8A8A8;
  box-shadow: 0 0 2px #8B8B8B;
  color: #ffffff;
}
.rubyConfirm,
.lootThrowAwayConfirm,
.receiveCardConfirm {
  width: 100vw;
  max-width: 350px;
  display: inline-block;
  line-height: 160%;
  background: linear-gradient(45deg, #ffcfd1, #f2edcf);
  border: 5px solid #333333;
  text-align: left;
  margin-top: 60px;
  margin-bottom: 30px;
  border-radius: 13px;
  box-shadow: 1px 1px 13px #000000;
  overflow: hidden;
}
.lootThrowAwayConfirm .headline {
  padding: 20px;
  text-align: center;
  font-weight: 600;
  color: #4c2900;
  font-size: 160%;
  font-family: 'Luckiest Guy', cursive;
}
.lootThrowAwayConfirm .content {
  padding: 0 20px;
  color: #965116;
}
.lootThrowAwayConfirm .question {
  color: #965116;
  font-size: 120%;
  font-weight: 600;
}
.lootThrowAwayConfirm .info {
  padding: 15px 0;
  color: #d07a30;
}
.lootThrowAwayConfirm .actionbar {
  padding: 5px 0 10px 0;
  font-size: 120%;
}
.rubyConfirm {
  width: 100vw;
  max-width: 350px;
  display: inline-block;
  line-height: 160%;
  background: linear-gradient(45deg, #ffcfd1, #f2edcf);
  border: 5px solid #333333;
  text-align: left;
  margin-top: 60px;
  margin-bottom: 30px;
  border-radius: 13px;
  box-shadow: 1px 1px 13px #000000;
  overflow: hidden;
}
.rubyConfirm .headline {
  padding: 20px;
  text-align: center;
  font-weight: 600;
  color: #4c2900;
  font-size: 160%;
  font-family: 'Luckiest Guy', cursive;
}
.rubyConfirm .content {
  padding: 0 20px;
  color: #965116;
}
.rubyConfirm .content .factorList {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0 0 13px 0;
}
.rubyConfirm .content .factorList .factor {
  padding: 0 7px;
}
.rubyConfirm .question {
  color: #965116;
  font-size: 120%;
  font-weight: 600;
}
.rubyConfirm .info {
  padding: 15px 0;
  color: #d07a30;
}
.rubyConfirm .badNews {
  background: #a05823;
  color: #ffffff;
  padding: 15px;
  border-radius: 15px;
  margin: 10px 0;
  font-size: 110%;
  text-align: center;
  animation: glowingText 1s infinite;
}
.rubyConfirm .actionbar {
  padding: 5px 17px 10px 0;
  font-size: 120%;
}
.receiveCardConfirm .headline {
  padding: 20px;
  text-align: center;
  font-weight: 600;
  color: #4c2900;
  font-size: 160%;
  font-family: 'Luckiest Guy', cursive;
}
.receiveCardConfirm .content {
  color: #965116;
}
.receiveCardConfirm .question {
  color: #965116;
  font-size: 120%;
  font-weight: 600;
}
.receiveCardConfirm .info {
  padding: 15px 0;
  color: #d07a30;
}
.receiveCardConfirm .error {
  padding: 15px 0;
  color: #D0303A;
}
.receiveCardConfirm .actionbar {
  padding: 5px 20px 10px 20px;
  font-size: 120%;
}
.receiveCardConfirm .content .leftPane {
  float: left;
  width: 135px;
}
.receiveCardConfirm .content .rightPane {
  margin-left: 170px;
  line-height: 1.7;
  padding: 13px 0;
}
.effectView .tabList {
  width: 300px;
  display: inline-block;
  min-height: calc(76px);
}
.effectView .tabList .effectGroupTab {
  display: inline-block;
  position: relative;
  width: 65px;
  height: 30px;
  padding: 3px;
  cursor: pointer;
  border-radius: 10px;
}
.effectView .tabList .effectGroupTab:hover {
  background: rgba(127, 127, 127, 0.7);
}
.effectView .tabList .effectGroupTab.active {
  background: #ffffff;
}
.effectView .tabList .effectGroupTab .icon {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  bottom: 8px;
  width: 20px;
}
.effectView .tabList .effectGroupTab .counter {
  border-radius: 50% 50%;
  padding: 5px;
  color: #333333;
  top: 7px;
  left: 30px;
  position: absolute;
  font-weight: 600;
}
.effectView .tabList .effectGroupTab .attentionRequired {
  border-radius: 50% 50%;
  padding: 5px;
  background: #FB5264;
  color: #ffffff;
  font-weight: bold;
  right: 0;
  top: 0;
  position: absolute;
  width: 12px;
  height: 12px;
  text-align: center;
  animation: glowDuration 2s infinite;
}
.cardTransfer {
  width: 320px;
  top: 55px;
  line-height: 150%;
  animation: openCard 0.3s forwards;
  animation-iteration-count: 1;
  animation-timing-function: ease-out;
  margin: auto;
  background: #2d3638;
  border-radius: 10px;
  padding: 20px;
  border: 6px solid #ffb4b6;
  max-height: 90vh;
  overflow-y: scroll;
  background: linear-gradient(45deg, #ffb2b6, #fff4b1);
}
.cardTransfer .text {
  padding: 5px 0;
  font-size: 110%;
  line-height: 150%;
  color: #602e0c;
  font-family: 'Poppins', cursive;
  margin-top: 10px;
  margin-bottom: 10px;
}
.cardTransfer .text.image img {
  width: 40px;
  border-radius: 50%;
  margin-top: 5px;
}
.cardTransfer::-webkit-scrollbar {
  width: 5px;
}
.cardTransfer::-webkit-scrollbar-track {
  color: #333333;
  background: #f2edcf;
}
.cardTransfer::-webkit-scrollbar-button {
  color: #333333;
}
.cardTransfer::-webkit-scrollbar-thumb {
  color: #333333;
  background: #d39a96;
}
.cardTransfer {
  scrollbar-color: #d39a96 #f2edcf;
  scrollbar-width: thin;
}
.shopContent .shopEntry .notAvailable {
  color: #ff00bd;
  font-weight: 700;
  line-height: 120%;
  font-size: 90%;
}
.rubyBar {
  display: flex;
  gap: 2px;
  flex-direction: row;
  flex-wrap: nowrap;
  padding: 7px;
  line-height: 2em;
  align-items: baseline;
  justify-items: center;
  max-width: 740px;
  margin-bottom: 2px;
}
.rubyBar .title {
  font-weight: 300;
  font-size: 130%;
  font-family: 'Luckiest Guy', sans-serif;
  color: #333;
}
.rubyBar .rubyState {
  background: #fff;
  padding: 5px 5px;
  padding-left: 15px;
  border-radius: 30px;
  font-size: 140%;
  font-weight: 300;
  text-align: center;
  font-family: 'Luckiest Guy', sans-serif;
}
.rubyBar .rubyState a {
  color: #555555;
}
.rubyBar img {
  max-height: 35px;
  margin-left: 5px;
}
.rubyBar .expander {
  flex-grow: 1;
}
.rubyBar > a.entry {
  cursor: pointer;
  text-align: center;
  font-size: 100%;
  border: 3px solid #ffb134;
  background: linear-gradient(0deg, #ff9933 0%, #ffd237 100%);
  border-radius: 50%;
  color: #ffffff;
  width: 50px;
  justify-self: center;
  height: 50px;
}
.rubyBar > a.entry .text {
  position: absolute;
  margin-top: 5px;
  margin-left: -10px;
  font-size: 100%;
  font-weight: 400;
  width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rubyBar > a.entry .text span {
  background: #ff9933;
  padding: 4px;
  border-radius: 5px;
  color: #ffffff;
  opacity: 0.4;
}
.rubyBar > a.entry.surprise {
  background: linear-gradient(120deg, #c1ffe5 0, #7be6eb 100%);
  border: 3px solid #85e8e5;
}
.rubyBar > a.entry.surprise .text {
  color: #c1ffe5;
}
.rubyBar > a.entry.surprise .text span {
  background: #86eaea;
  color: #fffdfd;
}
.rubyBar > a.entry.offers .text {
  color: #c1ffe5;
}
.rubyBar > a.entry.offers .text span {
  background: #ff5644;
  color: #fffdfd;
}
.rubyBar > a.entry.offers {
  border: 3px solid #e7e250;
  background: linear-gradient(195deg, #fffa69 0%, #e9e443 100%);
}
.rubyBar > a.entry img {
  width: 40px;
  height: 40px;
  margin: 5px;
}
.rubyBar > a:hover,
.rubyBar > .rubyState:hover {
  animation: intoFocusLight 0.5s forwards;
}
.rubyBar > .rubyExchange {
  background: linear-gradient(45deg, #ff5ca0 0%, #ff4c71 100%);
  border: 3px solid #fa4783;
  border-radius: 50%;
  text-align: center;
  width: 25px;
  height: 25px;
  padding: 5px;
  font-size: 200%;
  font-weight: 900;
  font-family: 'Luckiest Guy', sans-serif;
  color: #ffffff;
}
@media screen and (max-width: 750px) {
  .rubyBar {
    flex-wrap: wrap;
    gap: 2px;
  }
}
.shopContent {
  max-width: 750px;
  display: grid;
  grid-template-columns: 50% 50%;
}
.shopContent > .shopEntry {
  display: grid;
  grid-template-columns: 150px auto;
  grid-gap: 10px;
  background: #fff;
  border-radius: 15px;
  margin-bottom: 10px;
  margin-left: 10px;
}
.shopContent > .shopEntry:hover {
  animation: intoFocusSoft .3s forwards;
}
.shopContent > .shopEntry > .detail {
  padding: 15px;
}
.shopContent > .shopEntry > .detail > .caption {
  font-size: 150%;
  font-weight: 400;
  padding-bottom: 1em;
}
.shopContent > .shopEntry > .detail > .description {
  line-height: 1.5;
  font-size: 110%;
  font-weight: 300;
}
.shopContent > .shopEntry > .detail > .condition {
  margin-bottom: 10px;
  margin-top: 10px;
}
.shopContent > .shopEntry > .detail > .condition .price {
  font-size: 200%;
  font-weight: 900;
  font-family: 'Luckiest Guy', sans-serif;
  color: #eb1776;
}
.shopContent > .shopEntry > .detail > .condition .limit {
  padding: 5px 0;
  font-size: 90%;
  font-weight: 700;
  color: #51ceff;
}
.shopContent > .confirmation {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 15px;
  margin-bottom: 7px;
  margin-left: 7px;
  margin-right: 7px;
  padding: 15px;
}
.shopContent > .confirmation .inventoryCard {
  margin: auto;
}
#rubyShopLayer {
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.65);
  width: 100%;
  padding-top: 10px;
  display: grid;
}
#rubyShopLayer .layerWrapper {
  padding-bottom: 100px;
  justify-self: center;
  align-self: center;
}
#rubyShopLayer .layerWrapper .wrapper {
  padding: 10px 15px;
  line-height: 200%;
  font-size: 120%;
  font-weight: 300;
}
#rubyShopLayer .container {
  max-width: 600px;
  background: #fff;
  min-width: 300px;
  border-radius: 10px;
  padding: 25px;
}
#rubyShopLayer .head {
  display: flex;
  align-items: center;
  color: #484848;
  height: 3.5em;
  max-width: 100%;
  background: #fff;
}
#rubyShopLayer .head .caption {
  flex-grow: 1;
  margin: .5em 1em;
  font-weight: 700;
  font-size: 1.3em;
  text-overflow: ellipsis;
}
#rubyShopLayer .head button {
  border: 1px solid #c7c7c7;
  background: #d5d5d5;
  cursor: pointer;
  border-radius: 15px;
  color: #333333;
  display: inline-block;
  height: 2.5em;
  margin: .5em;
  line-height: 2em;
  text-align: center;
  font-weight: 300;
  padding: 2px 10px;
}
.shopContent.full {
  max-width: 100%;
  grid-template-columns: 100%;
}
.headlineRubyShop {
  font-size: 120%;
  font-weight: 300;
  color: #7d7d7d;
  padding: 10px 20px;
}
@media screen and (max-width: 490px) {
  .shopContent {
    max-width: 100%;
    grid-template-columns: 100%;
  }
}
/* CSS für das Kalender-Aktionsspiel */
.calendarHeader {
  max-width: 690px;
  line-height: 2em;
  overflow-x: auto;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-items: center;
  align-content: center;
}
.calendarHeader .caption {
  display: flex;
  flex-direction: row;
}
.calendarHeader .caption .expand {
  flex-grow: 1;
}
.calendarHeader .caption .title {
  font-family: 'Luckiest Guy', cursive;
  font-weight: 900;
  font-size: 200%;
  color: #0e5a61;
  padding: 10px 10px 0;
  display: inline-flex;
  justify-content: start;
  align-content: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.calendarHeader a,
.calendarHeader button {
  padding: 7px 17px 10px 20px;
  color: #ffffff;
  background: #e82d2a;
  background: linear-gradient(180deg, #ff6e63 0, #e82d2a 100%);
  border: 2px solid #e9302c;
  font-size: 100%;
  border-radius: 20px;
  transition: .5s;
  cursor: pointer;
  font-weight: 700;
  margin: 0;
  box-sizing: border-box;
  display: inline-flex;
  justify-content: center;
  align-content: center;
  justify-items: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.calendarHeader a:hover,
.calendarHeader button:hover {
  border: 2px solid #fe9b37;
  transition: .8s;
  background: linear-gradient(30deg, #ffd237 0, #ffa225 100%);
}
.calendarHeader .currencyList {
  display: flex;
  flex-direction: row-reverse;
  gap: 11px;
}
.calendarHeader .currencyEntry {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: auto 1fr;
  grid-gap: 0 5px;
  align-items: center;
  justify-items: center;
  align-content: end;
  justify-content: end;
  border-radius: 11px;
  transition: .3s;
  overflow: hidden;
  padding: 0 9px;
}
.calendarHeader .currencyEntry .name {
  color: #0a4a4f;
  font-weight: 500;
  grid-column: 1 / span 2;
  grid-row: 1 / span 1;
  align-self: end;
  justify-self: end;
}
.calendarHeader .currencyEntry .icon {
  grid-column: 1 / span 1;
  grid-row: 2 / span 1;
  max-height: 3em;
}
.calendarHeader .currencyEntry .balance {
  grid-column: 2 / span 1;
  grid-row: 2 / span 1;
  color: #0a4a4f;
  font-family: 'Luckiest Guy', cursive;
  font-weight: 900;
  font-size: 150%;
  justify-self: start;
}
.calendarHeader .currencyEntry:hover {
  background: #aad5d8;
  cursor: pointer;
}
.calendarHeader .section {
  padding: 3px;
  display: flex;
  gap: 3px;
  flex-direction: row;
}
.calendarHeader .section button img,
.calendarHeader .section a img {
  width: 32px;
  height: 32px;
}
.calendarHeader .section.expand {
  flex-grow: 1;
}
.calendarHeader .section.calendarOwner {
  font-weight: 700;
  font-size: 130%;
}
.calendarHeader .calendarPrivacy,
.calendarLayer .calendarPrivacy {
  display: flex;
  flex-direction: row;
  gap: 7px;
  padding: 11px;
  border: 3px solid;
  border-radius: 7px;
  margin: 7px 0;
  align-content: center;
  align-items: center;
  justify-content: flex-start;
  font-size: 1.2em;
  line-height: 1.5;
}
.calendarHeader .calendarPrivacy.friends,
.calendarLayer .calendarPrivacy.friends {
  background: #E6F4F1;
  background: linear-gradient(130deg, #E6F4F1 0%, #D0EBE6 100%);
  border-color: #9AAEBB;
  color: #00376A;
}
.calendarHeader .calendarPrivacy.nobody,
.calendarLayer .calendarPrivacy.nobody {
  background: #FFBEC3;
  background: linear-gradient(130deg, #FFBEC3 0%, #FF7C54 100%);
  border-color: #FF6300;
  color: #2F4858;
}
.calendarHeader .calendarPrivacy img,
.calendarLayer .calendarPrivacy img {
  width: 3em;
  height: 3em;
}
.calendarHeader .calendarPrivacy span,
.calendarLayer .calendarPrivacy span {
  flex-grow: 1;
}
.navigationTop {
  display: flex;
  flex-direction: row;
  gap: 3px;
  flex-wrap: wrap;
}
.calendarContent {
  max-width: 690px;
  position: relative;
}
.calendarContent img {
  max-width: 100%;
}
.calendarContent .door {
  position: absolute;
  display: inline-block;
  cursor: pointer;
}
.calendarContent .opened {
  background: rgba(249, 71, 58, 0.5);
  opacity: 0.5;
}
.calendarContent .door:hover {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 5px;
  opacity: 0.5;
}
.calendarSubPage .tabs {
  padding-top: 10px;
  display: flex;
  flex-direction: row;
  gap: 7px;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  margin: 7px 0;
}
.calendarSubPage .tabs .navigationTab {
  display: inline-flex;
  padding: 7px 17px;
  border-radius: 20px;
  border: 2px solid #cecece;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  background: #cecece;
  color: #555;
  transition: .3s;
  opacity: 0.6;
  box-sizing: border-box;
  height: 40px;
  line-height: 12px;
}
.calendarSubPage .tabs .navigationTab:hover {
  opacity: 1.0;
  background: #ff9933;
  background: linear-gradient(30deg, #ffd237 0%, #ff9933 100%);
  border-color: #ff9933;
}
.calendarSubPage .tabs .navigationTab.active {
  background: #9e9e9e;
  color: #ffffff;
  border-color: #949494;
  opacity: 1.0;
  font-weight: 800;
}
.calendarFriendList {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 30px;
}
.calendarFriendList.lowPriority {
  opacity: 0.5;
}
.calendarFriendList .friend {
  display: grid;
  grid-template-columns: 75px 1fr auto auto;
  grid-template-rows: 1fr;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  grid-gap: 7px;
  transition: .5s;
  border-radius: 17px;
  padding: 7px;
}
.calendarFriendList .friend:hover {
  background: #f0f0f0;
}
.calendarFriendList .friend.checked {
  opacity: 0.5;
}
.calendarFriendList .friend .image img {
  border-radius: 50%;
  max-width: 75px;
  grid-row: 1 / span 1;
  grid-column: 1 / span 1;
}
.calendarFriendList .friend .content {
  display: flex;
  flex-direction: column;
  grid-row: 1 / span 1;
  grid-column: 2 / span 1;
  gap: 7px;
}
.calendarFriendList .friend .content .nickname {
  font-weight: 900;
  font-size: 1.3em;
}
.calendarFriendList .friend .content .friendState .unconfirmed {
  color: #a34b0c;
  font-weight: bold;
}
.calendarFriendList .friend .omitSetting {
  display: flex;
  flex-direction: column;
  gap: 7px;
  grid-row: 1 / span 1;
  grid-column: 3 / span 1;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  width: 72px;
}
.calendarFriendList .friend .omitSetting img {
  width: 35px;
  height: 35px;
}
.calendarFriendList .friend .actionList {
  display: flex;
  flex-direction: row;
  grid-row: 1 / span 1;
  grid-column: 4 / span 1;
  gap: 7px;
  align-content: center;
  align-items: stretch;
  justify-content: flex-start;
}
.calendarFriendList .friend .actionList .action {
  display: inline-flex;
  border-radius: 50%;
  border: 1px solid #888;
  background: #ddd;
  color: #555;
  padding: 7px;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: center;
  justify-content: center;
  align-items: center;
  transition: .7s;
  cursor: pointer;
}
.calendarFriendList .friend .actionList .action:hover {
  background: #eee;
  border-color: #aaa;
}
.calendarFriendList .friend .actionList .action img {
  width: 20px;
  height: 20px;
}
.calendarFriendList .friend .actionList .action.calendar {
  background: #fb483d;
  color: #fff;
  border: #ffafa9;
  border-radius: 20px 20px;
  padding: 3px 11px;
}
.calendarFriendList .friend .actionList .action.calendar:hover {
  background: #ff7a73;
}
.calendarLayer {
  text-align: center;
  display: flex;
  width: 100%;
  justify-items: center;
  align-items: center;
  justify-content: center;
  align-content: center;
}
.calendarLayer .calendarFrame {
  background: #f9473a;
  max-width: 300px;
  max-height: 70vh;
  overflow: auto;
  padding: 20px;
  margin: 10px 20px 100px 20px;
  border-radius: 20px;
  width: 300px;
  background: linear-gradient(90deg, #ff4c3f 0%, #e6302e 100%);
  border: 3px solid #e92e2b;
  box-shadow: 0 0 2px #000000;
  display: inline-flex;
  flex-direction: column;
  gap: 7px;
  align-items: center;
}
.calendarLayer h4 {
  font-size: 160%;
  font-weight: 300;
}
.calendarLayer p {
  padding: 20px 10px;
  line-height: 1.5;
  color: #ffffff;
  font-weight: 600;
}
.calendarLayer .title {
  font-family: 'Luckiest Guy', cursive;
  font-weight: 900;
  font-size: 200%;
  color: #ffe593;
}
.calendarLayer .bonusTitle {
  font-family: 'Luckiest Guy', cursive;
  font-weight: 900;
  font-size: 150%;
  color: #9e0503;
  margin: 10px;
}
.calendarLayer .friend {
  display: block;
  width: 280px;
  text-align: left;
  min-height: 30px;
  margin-bottom: 3px;
  padding: 7px;
}
.calendarLayer .friend .image {
  width: 25px;
}
.calendarLayer .friend .image img {
  border-radius: 50%;
  width: 25px;
}
.calendarLayer .friend .content {
  margin-left: 35px;
  padding: 0 5px;
  color: #700100;
}
.calendarLayer .friend .content .nickname {
  display: block;
  color: #ffffff;
  font-weight: 600;
  font-size: 110%;
}
.calendarLayer .friend:first-child {
  margin-top: 10px;
}
.calendarLayer .friend:hover {
  background: #ff766e;
  border-radius: 15px;
}
.calendarLayer button {
  padding: 7px 17px;
  color: #6a0200;
  background: #fee4ba;
  border: 2px solid #dc2b28;
  border-radius: 20px;
  transition: .5s;
  cursor: pointer;
  font-weight: 700;
  display: inline-flex;
  margin: 0 0 5px 0;
  box-sizing: content-box;
  height: 28px;
  line-height: 28px;
  justify-items: center;
  align-items: center;
  justify-content: center;
  align-content: center;
  gap: 5px;
}
.calendarLayer button:hover {
  border: 2px solid #fe9b37;
  transition: .8s;
  background: linear-gradient(30deg, #ffd237 0, #ffa225 100%);
}
.calendarLayer button img {
  height: 2em;
}
.calendarLayer button[disabled] {
  opacity: 0.5;
}
.calendarLayer a {
  color: #043131;
}
.calendarLayer .actionbar {
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  gap: 7px;
  justify-content: center;
  align-content: center;
  justify-items: center;
  align-items: center;
  flex-wrap: wrap;
}
.calendarLayer .actionButton {
  background: linear-gradient(30deg, #ffd237 0, #ffa225 100%);
  border: 2px solid #fe9b37;
  color: #994D00;
  font-weight: bold;
  font-size: 140%;
  transition: .8s;
  display: inline-flex;
  justify-items: center;
  align-items: center;
  justify-content: center;
  align-content: center;
}
.calendarLayer .actionButton:hover {
  border: 2px solid #BBABF2;
  transition: .8s;
  background: linear-gradient(30deg, #BBABF2 0, #AE96F1 100%);
  color: #ffffff;
}
.calendarLayer .actionButton[disabled] {
  color: #000;
  background: #bebebe;
  border: 2px solid #cecece;
}
.calendarLayer .actionButton[disabled]:hover {
  color: #000;
  background: #cecece;
  border: 2px solid #cecece;
}
.calendarLayer textarea {
  border: 2px solid #cecece;
  width: 100%;
  border-radius: 20px;
  min-height: 10em;
  padding: 20px;
  box-sizing: border-box;
  line-height: 1.5;
}
.calendarLayer input[type="text"],
.calendarLayer input[type="number"] {
  border: 2px solid #cecece;
  width: 100%;
  border-radius: 20px;
  padding: 20px;
  box-sizing: border-box;
  line-height: 1.5;
  margin-bottom: 7px;
}
.calendarLayer input[type="number"] {
  text-align: right;
}
.calendarLayer ul {
  list-style: bullet;
  text-align: left;
}
.calendarLayer ul.contentList {
  list-style: none;
  margin: 0;
  padding: 0 0 5px 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  justify-items: start;
  align-items: stretch;
  align-self: stretch;
}
.calendarLayer ul.contentList li {
  margin: 0;
  padding: 0 0 5px 0;
  display: flex;
  flex-direction: column;
}
.calendarLayer ul.contentList li:last-child {
  margin: 0;
  padding: 0;
}
.calendarLayer .text {
  display: block;
  background: #f8f8f8;
  border: 2px solid #f0f0f0;
  border-radius: 7px;
  overflow: hidden;
}
.calendarLayer .text .caption {
  color: #1a9a9a;
  font-weight: 400;
  font-size: 80%;
  padding: 5px 10px 0 10px;
}
.calendarLayer .text .content {
  padding: 10px 10px 10px 10px;
  color: #043131;
}
.calendarLayer .emotionList {
  display: flex;
  flex-direction: column;
  justify-self: stretch;
  align-self: stretch;
  gap: 3px;
}
.calendarLayer .emotionList .emotion {
  padding: 5px;
}
.calendarLayer .emotion {
  display: flex;
  background: #f8f8f8;
  border: 2px solid #f0f0f0;
  border-radius: 7px;
  overflow: hidden;
  flex-direction: row;
  gap: 9px;
}
.calendarLayer .emotion .image {
  justify-self: center;
  align-self: center;
  width: 64px;
}
.calendarLayer .emotion .image img {
  width: 64px;
}
.calendarLayer .emotion .content {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 200px;
  align-items: flex-start;
}
.calendarLayer .emotion .content .caption {
  color: #999;
  font-weight: 400;
  font-size: 80%;
}
.calendarLayer .emotion .content .name {
  color: #333;
  font-weight: 800;
  font-size: 130%;
}
.calendarLayer .emotion .content .detail {
  color: #777;
  font-weight: 600;
  font-size: 90%;
}
.calendarLayer .transfer {
  display: flex;
  background: #b1feff;
  border: 2px solid #be5711;
  border-radius: 10px;
  overflow: hidden;
  flex-direction: column;
}
.calendarLayer .transfer .caption {
  color: #1a9a9a;
  font-weight: 400;
  font-size: 80%;
  padding: 10px 10px 0 10px;
}
.calendarLayer .transfer .content {
  padding: 10px 10px 10px 10px;
  color: #043131;
  font-weight: 700;
  display: flex;
  flex-direction: row;
  align-content: center;
  align-items: center;
  justify-content: flex-start;
}
.calendarLayer .transfer .content a {
  color: #043131;
}
.calendarLayer .transfer .content a:hover {
  color: #eb3632;
}
.calendarLayer .progressBackground {
  background: #fff;
  position: relative;
  height: 24px;
  border-radius: 7px;
  overflow: hidden;
  border: 2px solid #e92e2b;
  display: flex;
  width: 270px;
  flex-direction: row;
}
.calendarLayer .progressBackground .progress {
  background: #d0f099;
  display: inline-block;
  height: 24px;
  position: absolute;
  top: 0;
  left: 0;
}
.calendarLayer .progressBackground .percentage {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  line-height: 24px;
}
.calendarLayer .progressBackground .fractionShare {
  height: 24px;
  display: inline-block;
}
.calendarLayer .milestone {
  background: #c31e1d;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 20px;
  border: 1px solid #dc2b28;
  color: #ffffff;
}
.calendarLayer .milestone .icon {
  width: 40px;
}
.calendarLayer .milestone .icon img {
  width: 30px;
}
.calendarLayer .milestone .name {
  margin-left: 45px;
  text-align: left;
  padding: 10px;
  font-size: 100%;
  font-weight: 700;
}
.calendarLayer .milestone.requirementWrapper {
  background: #ffda69;
  color: #ce1e1c;
  font-weight: 900;
}
.calendarLayer .milestone .requirementList {
  text-align: left;
  margin-left: 15px;
}
.calendarLayer .topic {
  padding: 10px;
  color: #2e0300;
  font-weight: 900;
  font-size: 110%;
}
.calendarLayer .tabs {
  padding-top: 10px;
  display: flex;
  flex-direction: row;
  gap: 7px;
  align-content: center;
  justify-content: center;
  align-items: center;
}
.calendarLayer .tabs button.active {
  background: #fb483d;
  color: #ffffff;
  border: 2px solid #ffafa9;
}
.calendarLayer .fraction {
  background: #fee4ba;
  border-radius: 20px;
  border: 1px solid #dc2b28;
  color: #6a0200;
  margin-bottom: 10px;
  line-height: 120%;
  display: flex;
  width: 250px;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 3px;
}
.calendarLayer .fraction .line {
  padding: 10px;
  text-align: left;
  display: flex;
  flex-direction: row;
  gap: 7px;
}
.calendarLayer .fraction .icon {
  width: 64px;
}
.calendarLayer .fraction .icon img {
  width: 64px;
}
.calendarLayer .fraction .description {
  padding: 0 10px 0 10px;
  max-width: 180px;
}
.calendarLayer .fraction .name {
  text-align: left;
  font-size: 120%;
  padding: 15px;
  padding-bottom: 0;
  font-weight: 900;
  text-indent: 70px;
}
.calendarLayer .fraction .action {
  text-align: left;
  text-indent: 85px;
}
.calendarLayer .fraction .requirementList {
  text-align: left;
  margin-left: 72px;
  margin-right: 20px;
}
.calendarLayer .fraction .requirementList p {
  color: #6a0200;
  padding: 0;
  font-size: 90%;
}
.calendarLayer .fraction .requirementList .requirement {
  padding: 4px;
}
.calendarFrame .calendarCardShopOfferList {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: stretch;
  justify-content: flex-start;
  align-items: flex-start;
}
.calendarFrame .calendarCardShopOfferList .offer {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  transition: .3s;
  padding: 5px;
  border-radius: 9px;
}
.calendarFrame .calendarCardShopOfferList .offer:hover {
  cursor: pointer;
  background: rgba(255, 72, 59, 0.62);
}
.calendarFrame .calendarCardShopOfferList .offerDescription {
  text-align: left;
  color: #fff;
  font-size: 110%;
  display: flex;
  flex-direction: column;
  gap: 7px;
  line-height: 1.3;
}
.calendarFrame .calendarCardShopOfferList .offerPrice {
  text-align: center;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.calendarFrame .calendarCardShopOfferList .offerCriteria {
  font-size: 90%;
  font-weight: 900;
}
.calendarFrame .calendarCardShopOfferList .priceNode {
  color: #fff;
  font-size: 120%;
  font-weight: 900;
}
.calendarLayer .exchangeOfferList {
  display: flex;
  flex-direction: column;
}
.calendarLayer .exchangeOffer {
  background: #fd4a3e;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 20px;
  border: 1px solid #dc2b28;
  color: #ffffff;
  font-weight: 800;
  display: flex;
  flex-direction: column;
}
.calendarLayer .exchangeOffer .line {
  display: flex;
  flex-direction: row;
}
.calendarLayer .exchangeOffer .line .desc {
  padding: 10px;
  width: 70px;
  text-align: left;
}
.calendarLayer .exchangeOffer .line .info {
  padding: 5px;
}
.calendarLayer .accountBalance {
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: space-around;
  align-items: stretch;
  justify-self: stretch;
  align-self: stretch;
}
.calendarLayer .accountBalance .line {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: space-evenly;
  align-items: center;
}
.calendarLayer .accountBalance .line .icon {
  padding: 3px;
}
.calendarLayer .accountBalance .line .icon img {
  width: 24px;
  height: 24px;
}
.calendarLayer .accountBalance .line .value {
  padding: 10px 0;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.5;
}
.calendarLayer .buttonGrid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 7px;
  align-content: flex-start;
  justify-content: center;
  align-items: center;
}
.calendarLayer ::-webkit-scrollbar {
  width: 5px;
}
.calendarLayer ::-webkit-scrollbar-track {
  color: #333333;
  background: #ff4c3f;
  border-radius: 5px;
}
.calendarLayer ::-webkit-scrollbar-button {
  color: #333333;
}
.calendarLayer ::-webkit-scrollbar-thumb {
  color: #333333;
  background: #700100;
  border-radius: 5px;
}
.calendarLayer {
  scrollbar-color: #d39a96 #f2edcf;
  scrollbar-width: thin;
}
.calendarLayer .suggestion {
  text-align: left;
  padding: 5px;
}
.calendarLayer .suggestion .suggest {
  padding: 5px 10px;
  border-radius: 10px;
  background: #dc2623;
  color: #ffffff;
  cursor: pointer;
}
.calendarLayer .suggestion .suggest:hover {
  background: #9e2721;
}
.calendarLayer .formDescriptor {
  margin-right: 10px;
}
.calendarLayer .formDescriptor label {
  text-align: left;
  color: #fff;
  line-height: 1.5;
  font-weight: 600;
  width: 50px;
  padding: 20px 10px;
}
.calendarLayer .formDescriptor .formControl {
  margin-left: 70px;
  padding: 10px;
}
.calendarLayer .formDescriptor .formControl input,
.calendarLayer .formDescriptor .formControl select {
  width: 100%;
  border: 2px solid #cecece;
  border-radius: 10px;
  padding: 10px;
  box-sizing: border-box;
  line-height: 1.5;
  background: #fff;
}
.calendarLayer .calendarSetting {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 7px;
  justify-content: start;
  align-content: start;
  justify-items: start;
  align-items: stretch;
}
.calendarLayer .calendarSetting .calendarSettingLabel {
  padding: 7px;
}
.calendarLayer .calendarSetting .calendarSettingDropdown {
  display: inline-flex;
  border: 1px solid #9e2721;
  background: #fff;
  color: #333;
  padding: 7px;
  border-radius: 7px;
  box-sizing: border-box;
}
.calendar .expressHeader {
  display: flex;
  flex-direction: row;
  max-width: 695px;
  padding: 0 7px;
  align-content: center;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
}
.calendar .expressHeader .caption {
  font-size: 24px;
  font-weight: 400;
  line-height: 1.5;
}
.calendar .expressHeader .expand {
  flex-grow: 1;
}
.calendar .expressHeader .queueState {
  display: flex;
  flex-direction: column;
  gap: 7px;
  align-content: center;
  align-items: center;
}
.calendar .expressHeader .queueState .subcaption {
  color: #555;
  font-size: 0.8em;
}
.calendar .detailSection {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-content: center;
  align-items: center;
  justify-content: flex-start;
}
.calendar .detailSection .queueWaitScreen {
  display: flex;
  flex-direction: column;
  gap: 37px;
  justify-content: center;
  align-content: center;
  justify-items: center;
  align-items: center;
}
.calendar .detailSection .queueWaitScreen .queueHeader {
  display: flex;
  flex-direction: column;
  gap: 17px;
  justify-content: center;
  align-content: center;
  justify-items: center;
  align-items: center;
}
.calendar .detailSection .queueWaitScreen .queueHeader .queueWaitText {
  font-size: 16px;
}
.calendar .detailSection .queueWaitScreen .queueHeader .queueWaitPosition {
  font-size: 22px;
  font-weight: 700;
}
.calendar .detailSection .queueWaitScreen .queueFooter {
  font-size: 12px;
}
.calendar .detailSection .expressMainMenu {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 13px;
  flex-wrap: nowrap;
  align-content: center;
  align-items: stretch;
  justify-content: flex-start;
  margin: 0 auto;
}
.calendar .detailSection .expressMainMenu button {
  display: grid;
  grid-gap: 7px;
  grid-template-columns: 32px auto;
  grid-template-rows: 1fr;
  padding: 7px;
  box-sizing: border-box;
  border: 2px solid #bbb;
  border-radius: 7px;
  background: #f0f0f0;
  transition: .7s;
  font-size: 14px;
  cursor: pointer;
  align-items: center;
  justify-items: center;
  justify-content: start;
  align-content: center;
  min-width: 200px;
}
.calendar .detailSection .expressMainMenu button:hover {
  background: #f8f8f8;
}
.calendar .detailSection .expressMainMenu button[disabled] {
  opacity: 0.5;
  cursor: default;
}
.calendar .detailSection .expressMainMenu button img {
  grid-column: 1 / span 1;
  grid-row: 1 / span 1;
}
.calendar .detailSection .expressMainMenu button span {
  grid-column: 2 / span 1;
  grid-row: 1 / span 1;
}
.calendar .detailSection input[disabled],
.calendar .detailSection textarea[disabled],
.calendar .detailSection select[disabled] {
  opacity: 0.5;
  cursor: default;
}
.calendar .detailSection .formSet {
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex-wrap: nowrap;
  align-content: center;
  align-items: stretch;
  justify-content: flex-start;
  min-width: 200px;
}
.calendar .detailSection .formSet p {
  line-height: 1.5;
  padding: 7px 0;
}
.calendar .detailSection .formDescriptor {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.calendar .detailSection .formDescriptor .formControl {
  display: flex;
  flex-direction: row;
  gap: 5px;
  min-width: 300px;
}
.calendar .detailSection .formDescriptor input,
.calendar .detailSection .formDescriptor textarea,
.calendar .detailSection .formDescriptor select {
  padding: 5px 9px;
  border: 1px solid #bbb;
  background: #fff;
  color: #555;
  border-radius: 5px;
  font-size: 14px;
  line-height: 1.5;
  transition: .7s;
  flex-grow: 1;
}
.calendar .detailSection .formDescriptor input:focus,
.calendar .detailSection .formDescriptor textarea:focus,
.calendar .detailSection .formDescriptor select:focus {
  border-color: #43a4e8;
}
.calendar .detailSection .formDescriptor textarea {
  min-height: 5em;
  resize: vertical;
}
.calendar .detailSection .calendarMax {
  display: inline-flex;
  padding: 7px 13px;
  border: 2px solid #999;
  border-radius: 7px;
  cursor: pointer;
  background: #f0f0f0;
  transition: .7s;
  font-size: 14px;
}
.calendar .detailSection .calendarMax:hover {
  background: #f8f8f8f8;
}
.calendar .detailSection .calendarMax[disabled] {
  opacity: 0.5;
  cursor: default;
}
.calendar .detailSection .calendarFriendOptionList {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 30px;
}
.calendar .detailSection .calendarFriendOptionList .friend {
  display: flex;
  flex-direction: row;
  gap: 7px;
  align-content: center;
  align-items: stretch;
  justify-content: space-around;
  transition: .5s;
  border-radius: 7px;
  padding: 7px;
}
.calendar .detailSection .calendarFriendOptionList .friend:hover {
  background: #fafafa;
}
.calendar .detailSection .calendarFriendOptionList .friend .profileImage {
  width: 35px;
}
.calendar .detailSection .calendarFriendOptionList .friend .profileImage img {
  border-radius: 50%;
}
.calendar .detailSection .calendarFriendOptionList .friend .nickname {
  flex-grow: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.calendar .detailSection .calendarFriendOptionList .friend .input[type="checkbox"] {
  width: 24px;
  box-sizing: border-box;
}
.calendar .detailSection .calendarAccountSet {
  display: flex;
  flex-direction: row;
  gap: 13px;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: flex-start;
  align-content: center;
}
.calendar .detailSection .calendarAccountSet .calendarAccountColumn {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-content: center;
  align-items: center;
  justify-content: flex-start;
}
.calendar .detailSection .calendarAccountSet .calendarAccountColumn .line {
  display: flex;
  flex-direction: row;
  gap: 3px;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: center;
}
.calendar .detailSection .calendarAccountSet .calendarAccountColumn .line .icon {
  display: inline-flex;
  width: 2em;
  height: 2em;
}
.calendar .detailSection .calendarAccountSet .calendarAccountColumn .line .value {
  display: inline-flex;
  width: 60px;
  align-content: center;
  align-items: center;
  justify-content: flex-start;
}
.calendar .detailSection .calendarAccountSet .calendarAccountColumn .line.cost {
  color: #e82d2a;
}
.calendar .detailSection .actionBar {
  display: flex;
  flex-direction: row;
  padding: 7px;
  justify-content: space-between;
  align-content: center;
  align-items: stretch;
}
.calendar .detailSection .actionBar button {
  display: inline-flex;
  padding: 7px 13px;
  border: 2px solid #999;
  border-radius: 7px;
  cursor: pointer;
  background: #f0f0f0;
  transition: .7s;
  font-size: 14px;
}
.calendar .detailSection .actionBar button:hover {
  background: #f8f8f8f8;
}
.calendar .detailSection .actionBar button[disabled] {
  opacity: 0.5;
  cursor: default;
}
.calendar .detailSection .actionBar button.primary {
  font-weight: 900;
  background: #e82d2a;
  background: linear-gradient(180deg, #ff6e63 0, #e82d2a 100%);
  border: 2px solid #e9302c;
  color: #fff;
}
.calendar .detailSection .explanationBox {
  display: flex;
  background: #f0f0f0;
  border: 1px solid #888;
  flex-direction: column;
  margin: 30px 0;
  box-sizing: border-box;
  border-radius: 7px;
}
.calendar .detailSection .explanationBox .caption {
  display: inline-flex;
  padding: 7px;
  font-weight: 700;
  font-size: 16px;
  border-bottom: 1px solid #888;
  box-sizing: border-box;
}
.calendar .detailSection .explanationBox .description {
  display: flex;
  flex-direction: column;
  padding: 7px;
  gap: 7px;
  align-content: flex-start;
  align-items: stretch;
  justify-content: flex-start;
  box-sizing: border-box;
  line-height: 1.3;
}
.calendar .detailSection .explanationBox .description p {
  padding: 0 0 7px 0;
}
.calendar.calendarEnd {
  max-width: 695px;
}
.calendar.calendarEnd .calendarEndContent {
  background: #fff;
  border: 1px solid #dc2b28;
  padding: 7px;
  border-radius: 13px;
  color: #6a0200;
  margin: 7px;
}
.calendar.calendarEnd .accountBalance {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: stretch;
  align-content: flex-start;
  gap: 5px;
  margin: 13px;
}
.calendar.calendarEnd .accountBalance .line {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-end;
  align-items: center;
  color: #555;
}
.calendar.calendarEnd .accountBalance .line .annotation {
  font-size: 0.8em;
  padding: 10px 0;
}
.calendar.calendarEnd .accountBalance .line .icon {
  height: 2em;
  padding: 3px;
}
.calendar.calendarEnd .accountBalance .line .icon img {
  width: 24px;
  height: 24px;
}
.calendar.calendarEnd .accountBalance .line .value {
  padding: 10px 0;
  font-weight: 700;
  line-height: 1.5;
}
.calendar.calendarEnd p {
  padding: 7px 21px 10px 21px;
  line-height: 1.7;
}
.calendar.calendarEnd button {
  min-width: 60px;
  color: #6a0200;
  background: #fee4ba;
  border: 2px solid #dc2b28;
  border-radius: 20px;
  transition: .5s;
  cursor: pointer;
  font-weight: 700;
  display: inline-flex;
  margin: 0 0 5px 0;
  box-sizing: content-box;
  height: 28px;
  line-height: 28px;
  justify-items: center;
  align-items: center;
  justify-content: center;
  padding: 3px 20px;
}
.calendar.calendarEnd button img {
  width: 24px;
  height: 24px;
}
.calendar.calendarEnd button:hover {
  border: 2px solid #fe9b37;
  transition: .8s;
  background: linear-gradient(30deg, #ffd237 0, #ffa225 100%);
}
.calendar.calendarEnd button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
.calendar.calendarEnd .tablewrapper {
  overflow-x: auto;
  padding: 3px;
  box-sizing: border-box;
  width: 100%;
}
.calendar.calendarEnd table {
  border-collapse: collapse;
  box-sizing: border-box;
  margin: 5px 5px 25px 5px;
  border-radius: 7px;
  border: 1px solid #dc2b28;
  table-layout: auto;
  width: 100%;
  max-width: 655px;
}
.calendar.calendarEnd table th {
  font-size: 12px;
  color: #fff;
  background: #dc2b28;
}
.calendar.calendarEnd table td,
.calendar.calendarEnd table th {
  line-height: 1.5;
  width: auto;
  text-align: center;
}
.calendar.calendarEnd table tr:nth-child(even) {
  background: #f4d8c4;
}
.calendar.calendarEnd table th .annotation {
  font-size: 0.8em;
}
.calendar.calendarEnd table .cardTitle {
  font-weight: 800;
  text-align: left;
}
.calendar.calendarEnd table .cardDescription {
  line-height: 1.5;
  font-size: 0.8em;
  text-align: left;
}
.calendar .endGameStoreButtonUnaffordable {
  min-width: 60px;
  border: 2px solid #dc2b28;
  border-radius: 20px;
  font-weight: 700;
  margin: 0 0 5px 0;
  display: inline-flex;
  box-sizing: content-box;
  height: 28px;
  line-height: 28px;
  justify-items: center;
  align-items: center;
  justify-content: center;
  padding: 3px 20px;
  opacity: 0.5;
  color: #6a0200;
  background: #fee4ba;
  transition: 0.5s;
  cursor: not-allowed;
}
.calendar .endGameStoreButtonUnaffordable:hover {
  opacity: 1.0;
}
.calendar .endGameStoreButtonUnaffordable img {
  width: 24px;
  height: 24px;
}
.calendarLayer table .tsBygone {
  color: #ffffff;
}
@media screen and (max-width: 600px) {
  .calendarHeader .title {
    font-size: 150%;
  }
  .calendarHeader .section {
    padding: 2px;
  }
  .calendarHeader .caption {
    flex-direction: column;
  }
  .calendarHeader button,
  .calendarHeader a {
    padding: 7px 10px 13px 11px;
    font-size: 90%;
  }
  .calendarFriendList .friend {
    grid-template-columns: 75px 1fr auto;
    grid-template-rows: 1fr auto;
  }
  .calendarFriendList .friend .actionList {
    display: flex;
    flex-direction: row;
    grid-row: 2 / span 1;
    grid-column: 1 / span 3;
  }
}
@keyframes betBlink {
  50% {
    border: 1px solid #6B004B;
  }
}
@keyframes soonEnding {
  50% {
    opacity: .5;
    color: #B30248;
  }
}
@keyframes unsavedBlink {
  50% {
    background: #FCCB08;
  }
}
.bettingGame {
  max-width: 700px;
  background: #fff;
  border-radius: 10px;
  background-size: 100% auto !important;
  padding: 10px 20px;
}
.bettingGame .gameHeader .banner {
  color: #f7ffb0;
  padding: 67px 7px 17px 15px;
  font-size: 3em;
  font-weight: 800;
  font-family: 'Luckiest Guy', cursive;
}
.bettingGame .gameHeader .subNavigation {
  overflow-x: auto;
  overflow-y: hidden;
  margin: 0;
  white-space: nowrap;
  padding: 7px;
}
.bettingGame .gameHeader .subNavigation a {
  background: #608829;
  border-radius: 10px;
  color: #ffffff;
  border-bottom: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  max-width: 215px;
  font-family: 'Luckiest Guy', cursive;
  font-weight: 300;
  font-size: 120%;
  display: inline-block;
  padding: 10px 9px;
  margin-right: 5px;
  text-align: center;
}
.bettingGame .gameHeader .subNavigation a:hover {
  background: #2c420e;
}
.bettingGame .gameHeader .subNavigation a.active {
  background: #ffffff;
  color: #2c420e;
}
.bettingGame .gameHeader .subNavigation .newMatches {
  color: #c00085;
  font-weight: 900;
}
.bettingGame .gameHeader .subNavigation::-webkit-scrollbar {
  height: 5px;
}
.bettingGame .gameHeader .subNavigation::-webkit-scrollbar-button {
  color: #999999;
}
.bettingGame .gameHeader .subNavigation::-webkit-scrollbar-thumb {
  color: #999999;
  background: #2c420e;
}
.bettingGame .gameHeader .subNavigation::-webkit-scrollbar-track {
  color: #999999;
  background: #96c11f;
}
.bettingGame p {
  line-height: 1.5;
  padding: 0px 7px 0.75em 7px;
}
.bettingGame ul {
  padding: 0px 0px 0px 26px;
}
.bettingGame li {
  line-height: 1.5;
  padding: 0px 7px 0.25em 0px;
}
.bettingGame button {
  text-align: center;
  font-weight: 900;
  cursor: pointer;
  font-size: 110%;
  padding: 15px 25px;
  margin: 0 3px 3px 0;
  border-radius: 20px;
  display: inline-block;
  background: #9dce0a;
  color: #ffffff;
  border: 1px solid #8fbc08;
  transition: .5s;
}
.bettingGame button:hover {
  background: #d70396;
  border: 1px solid #c00085;
  transition: .5s;
}
.bettingGame button.unchanged {
  background: #f1f1f1;
  color: #202d0c;
  border: 1px solid #73a133;
  transition: .5s;
}
.bettingGame input.bet {
  display: inline-block;
  border: 1px solid #ccc;
  padding: 7px;
  border-radius: 7px;
  background: #fff;
  width: 40px;
  transition: .5s;
  font-weight: bold;
  text-align: center;
}
.bettingGame input.bet:focus {
  border: 1px solid #c00085;
  transition: .5s;
}
.bettingGame input.bet.problem {
  border: 1px solid #c00085;
  background: #871B3F;
  color: #fff;
  transition: 0.5s;
  animation: betBlink 3s linear infinite;
}
.bettingGame h2 {
  padding: 10px 10px;
  font-family: 'Luckiest Guy', cursive;
}
.bettingGame h3 {
  margin-top: 7px;
  font-family: 'Luckiest Guy', cursive;
  text-align: center;
}
.bettingGame h4 {
  margin-top: 7px;
  font-family: 'Luckiest Guy', cursive;
  color: #ffffff;
  font-size: 200%;
}
.bettingGame table img {
  max-height: 4em;
  line-height: 4em;
}
.bettingGame .soonEnding {
  color: #d70396;
  animation: soonEnding 2s linear infinite;
}
.bettingGame .team {
  font-weight: 900;
  transition: .25s;
}
.bettingGame .team.winner,
.bettingGame .bet.winner {
  color: #CAFFBD;
  transition: .25s;
}
.bettingGame .team.loser,
.bettingGame .bet.loser {
  color: #FF96E9;
  transition: .25s;
}
.bettingGame .team.draw,
.bettingGame .bet.draw {
  color: #CBC9FF;
  transition: .25s;
}
.bettingGame .bet.directional {
  color: #CAFFBD;
  transition: .25s;
}
.bettingGame .unsavedHintContainer {
  position: absolute;
  height: 0px;
}
.bettingGame .unsavedHint {
  position: relative;
  top: -80px;
  background: #fdd021;
  border-radius: 7px;
  padding: 13px;
  visibility: hidden;
  line-height: 1.5;
  display: block;
  margin: 3px 9px;
  animation: unsavedBlink 3s linear infinite;
}
.bettingGame .unsavedHint.active {
  visibility: visible;
}
.bettingGame .notification {
  padding: 7px;
  background: #871B3F;
  color: #fff;
  font-weight: bold;
  display: none;
  transition: .5s;
}
.bettingGame .notification.active {
  display: table-row;
  transition: .5s;
}
.bettingGame .profileImageOnline,
.bettingGame .profileImageOffline,
.bettingGame .profileImageBlocked,
.bettingGame .mockProfileImage {
  border-radius: 50%;
  border: none !important;
  display: inline-block;
  height: 3em;
  width: 3em;
  line-height: 3em;
  text-align: center;
  margin: 2px;
}
.bettingGame ol li.me a {
  color: #EE63FF;
  font-weight: 900;
}
.bettingGame table {
  font-family: 'Oswald', cursive;
  font-size: 130%;
}
.bettingGame table.exchange tr:nth-child(even),
.bettingGame table.highscore tr:nth-child(even),
.bettingGame table.statistic tr:nth-child(even) {
  background-color: #AAED4C;
}
.bettingGame table.exchange tr:nth-child(odd),
.bettingGame table.highscore tr:nth-child(odd),
.bettingGame table.statistic tr:nth-child(odd) {
  background-color: #73a133;
}
.bettingGame table.highscore tr.myRank {
  background-color: #4F6E23;
  color: #fff;
}
.bettingGame table td:last-child,
.bettingGame table th:last-child {
  padding-right: 15px;
}
.bettingGame textarea {
  border: 1px solid #b0b0b0;
  border-radius: 7px;
  display: block;
  min-height: 10em;
  margin: 0 0 11px 0;
  padding: 7px;
  width: calc(86%);
}
.bettingGame a {
  color: #ffd237;
}
.bettingGame .tsBygone {
  color: #ffffff;
}
.bettingGame table th {
  background: #96c11f;
}
.bettingGame table span {
  font-size: 100%;
}
#collectableLayer {
  right: 0px;
  bottom: 0px;
  background: rgba(0, 0, 0, 0.65);
  width: 100%;
  padding-top: 10px;
}
#collectableLayer > .layerWrapper {
  padding-bottom: 100px;
  justify-self: center;
  align-self: center;
}
.collectableGame {
  margin: auto;
  width: 340px;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 0 2px #505050;
  border: 6px solid #3a3a3a;
  background: linear-gradient(0deg, #000 0%, #333 100%);
}
.collectableGame .layerHeader {
  padding: 10px 5px;
  font-size: 120%;
  font-weight: 400;
  color: #ffffff;
}
.collectableGame .navigationNext {
  width: 50px;
  float: right;
}
.collectableGame .navigationPrevious {
  width: 50px;
  float: left;
}
.collectableGame .navigation {
  padding: 5px;
}
.collectableGame .navigation button {
  background: #dfb49c;
  background: linear-gradient(45deg, #fe559b 0%, #ff4c71 100%);
  border: 2px solid #df1632;
  border-radius: 50%;
  padding: 5px;
  margin-bottom: 3px;
}
.collectableGame .navigation button:hover {
  border-color: #c48d6e;
  opacity: 0.8;
  transition: 0.3s;
}
.collectableGame button.difficultyHard {
  border-color: #f96c6c;
}
.collectableGame button.difficultyMedium {
  border-color: #ffd932;
}
.collectableGame button.difficultyEasy {
  border-color: #4adb5b;
}
.collectableGame button.difficultyVeryHard {
  border-color: #00ffe7;
}
.collectableGame button.active {
  border: 2px solid #df1632;
}
.collectableGame .buttonAll {
  border-radius: 20px;
  padding: 12px 10px;
  display: inline-block;
  text-align: center;
  width: 100%;
  font-weight: 900;
  letter-spacing: 0;
  font-size: 100%;
  margin: 3px 0;
}
.collectableGame .buttonAll:hover {
  opacity: 0.6;
  transition: 0.3s;
  cursor: pointer;
}
.collectableGame .buttonRedeem {
  color: #ffffff;
  background: #d8489e;
  background: linear-gradient(45deg, #fe559b 0%, #ff4c71 100%);
  border: 2px solid #df1632;
}
.collectableGame .buttonRedeem[disabled] {
  opacity: 0.4;
}
.collectableGame .buttonOther {
  background: linear-gradient(45deg, #ffc51b 0%, #fee540 100%);
  border: 2px solid #eec324;
  font-weight: 500;
}
.collectableGame .collectableTitle {
  padding: 15px 7px;
  color: #ffffff;
  font-size: 170%;
  font-weight: 900;
}
.collectableGame .collectableProbability {
  padding: 10px 5px;
  padding-top: 0;
  color: #f1f1f1;
  font-weight: 300;
  font-size: 110%;
  line-height: 140%;
}
.collectableGame .collectableProbability .sure {
  font-weight: 900;
  color: #1ad777;
}
.collectableGame .collectableProbability .easy {
  font-weight: 900;
  color: #37daff;
}
.collectableGame .collectableProbability .medium {
  font-weight: 900;
  color: #ffd237;
}
.collectableGame .collectableProbability .hard {
  font-weight: 900;
  color: #ff4d76;
}
.collectableGame .collectableLucky {
  padding: 10px;
  color: #94ff15;
  font-weight: 900;
  font-size: 120%;
  text-align: center;
  line-height: 130%;
}
.collectableGame .collectableLucky .celebrate {
  width: 128px;
  margin: auto;
  margin-top: 10px;
  border-radius: 10px;
}
.collectableGame .fullfilled {
  padding: 10px;
  text-align: center;
  color: #f1f1f1;
  font-weight: 900;
}
.collectableGame .collectableNotLucky {
  padding: 10px;
  color: #bf1565;
  font-weight: 900;
  font-size: 120%;
  line-height: 130%;
  text-align: center;
}
.navigationNext img,
.navigationPrevious img {
  width: 30px;
}
.collectableGame .receivedAnimation img {
  animation: redeem 2s ease-in-out;
  animation-iteration-count: infinite;
}
.collectableImages {
  padding: 10px 0;
}
.collectableImages .headline {
  font-weight: 900;
}
.collectableImages button {
  border-radius: 50%;
  border: 2px solid #ff2260;
  cursor: pointer;
}
.collectableImages button img {
  border-radius: 50%;
  width: 50px !important;
  height: 50px !important;
}
.collectableImages button:hover {
  transition: 0.5s;
  border: 2px solid #ff975c;
  opacity: 0.8;
}
.collectableButtons {
  margin: auto;
  width: 320px;
  text-align: center;
  margin-top: 20px;
}
.collectableButtons .showFinder {
  border-radius: 15px;
  background: linear-gradient(45deg, #ffc51b 0%, #fee540 100%);
  border: 2px solid #eec324;
  padding: 10px 15px;
  font-weight: 500;
  display: block;
  width: 300px;
  margin-top: 5px;
}
.collectableButtons .showCollectables {
  border-radius: 15px;
  color: #ffffff;
  background: #d8489e;
  background: linear-gradient(45deg, #fe559b 0%, #ff4c71 100%);
  border: 2px solid #df1632;
  padding: 10px 15px;
  font-weight: 900;
  display: block;
  width: 300px;
}
.collectableButtons .showShop {
  border-radius: 15px;
  background: #fffa6c;
  background: linear-gradient(120deg, #fffa6c 0, #fffa50 100%);
  border: 2px solid #e4df4a !important;
  color: #333333;
  padding: 10px 15px;
  font-weight: 500;
  display: block;
  width: 300px;
  margin-top: 5px;
  cursor: pointer;
}
.collectableButtons .showCollectables:hover,
.collectableButtons .showFinder:hover,
.collectableButtons .showShop:hover {
  transition: 0.5s;
  animation: intoFocusSoft 0.5s forwards;
  cursor: pointer;
}
.collectableGame .shopContent .shopEntry {
  background: #363636;
}
.collectableGame .shopContent .shopEntry .detail .description {
  color: #ffffff;
}
.collectableGame .shopContent .shopEntry .detail .condition .price {
  color: #09c7ff;
}
.collectableGame .rubyBar .rubyState {
  background: none;
  color: #ffffff;
}
.feed .redeem {
  float: left;
  padding: 10px 35px;
  margin-left: 20px;
  font-weight: 600;
  margin-top: 5px;
  color: #ffffff;
  border-radius: 20px;
  border: 1px solid #55d8f6;
  text-align: center;
  background: #55d8f6;
  font-size: 12px;
  font-family: "Roboto", "Arial Nova", sans-serif-light, "Open Sans", Arial, sans-serif;
  display: block;
}
.collectableDescription {
  padding: 7px;
  color: #ffffff;
  line-height: 140%;
  font-weight: 300;
  padding-top: 0;
}
.collectableGame .headerLogo {
  text-align: center;
}
.collectableGame .headerLogo img {
  width: 150px;
}
.collectableGame .table {
  max-width: 500px;
  margin: auto;
}
.collectableGame .table td,
.collectableGame .table tr {
  padding: 0;
  margin: 0;
}
.collectableOverview {
  text-align: center;
}
.collectableOverview p {
  text-align: center;
}
.collectableOverview .redeem {
  color: #000000;
  background: #d8489e;
  background: linear-gradient(45deg, #ffc51b 0%, #fee540 100%);
  border: 2px solid #eec324;
  border-radius: 20px;
  padding: 10px 15px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 0 2px #f1f1f1;
}
.collectableOverview .redeem:hover {
  transition: 0.5s;
  opacity: 0.8;
}
.collectableUserList p {
  padding: 10px;
}
.collectableUserList .resultGrid {
  display: grid;
  grid-template-columns: 47% 47%;
  margin-top: 10px;
  grid-gap: 10px;
}
.collectableUser {
  text-align: center;
  margin-bottom: 20px;
  position: relative;
}
.collectableUser .parts {
  margin-top: 20px;
  position: absolute;
  padding: 5px;
  margin-bottom: 15px;
  font-weight: 700;
  font-size: 110%;
  margin-left: 40px;
}
.collectableUser .parts span {
  background: #000000;
  color: #ffffff;
  border-radius: 5px;
  padding: 2px 5px;
}
.collectableUser .profileImage {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto 50px;
}
.collectableUser .profileImage img {
  width: 320px;
  border-radius: 10px;
  grid-row: 1 / span 2;
  grid-column: 1;
  justify-self: center;
  align-self: end;
}
.collectableUser button {
  color: #ffffff;
  background: #d8489e;
  background: linear-gradient(45deg, #fe559b 0%, #ff4c71 100%);
  border: 2px solid #df1632;
  border-radius: 20px;
  font-weight: 900;
  padding: 10px 15px;
}
.collectableUser .pinMatch {
  display: grid;
  grid-template-columns: repeat(4, calc(18%));
  grid-gap: 7px;
  align-items: center;
  justify-items: center;
  grid-column: 1;
  grid-row: 2;
  padding: 0 30px 30px 30px;
  width: 320px;
  justify-self: center;
  max-width: 100%;
  box-sizing: border-box;
}
.collectableUser .pinMatch .pin {
  padding: 3px;
  border-radius: 7px;
  overflow: hidden;
  box-shadow: 0 0 3px 2px #ffe178;
}
.collectableUser .pinMatch .pin img {
  width: 40px;
}
.collectableUser .lockState {
  margin-bottom: 10px;
  text-align: center;
  font-weight: 300;
}
.collectableUser .lockState .redeemInfo {
  padding: 10px;
  line-height: 25px;
}
.collectableUser .lockState .redeemInfo img {
  margin-right: 5px;
}
.collectableUser button:hover {
  transition: 0.5s;
  opacity: 0.8;
}
.headInfo {
  text-align: center;
}
.headInfo img {
  width: 220px;
}
.headInfo .stats {
  font-weight: 300;
  padding: 5px;
}
.headInfo .text {
  font-size: 150%;
  font-weight: 900;
  padding: 10px;
}
.emosToRedeem {
  margin-top: 30px;
  width: 320px;
  margin: auto;
}
.emosToRedeem .entry {
  float: left;
  width: 300px;
  margin: 10px;
}
.emosToRedeem .entry .title {
  padding: 10px;
}
.emosToRedeem .entry .from {
  padding: 10px;
  margin-top: 20px;
}
.emosToRedeem .entry .button {
  margin-top: -50px;
}
.actionButtonPin {
  cursor: pointer;
}
.actionButtonPin img {
  height: 1.5em;
}
.actionButtonPin .unpinned img {
  opacity: 0.5;
}
.collectableGame .collectableTitle .difficultyHard {
  color: #f96c6c;
  font-weight: 300;
}
.collectableGame .collectableTitle .difficultyMedium {
  font-weight: 300;
  color: #ffd932;
}
.collectableGame .collectableTitle .difficultyEasy {
  font-weight: 300;
  color: #4adb5b;
}
.collectableGame .collectableTitle .difficultyVeryHard {
  font-weight: 300;
  color: #00ffe7;
}
.collectableGame .notRedeemable {
  color: #333333;
  padding: 15px;
  line-height: 1.5;
  background: #ffd500;
  background: linear-gradient(45deg, #fe559b 0%, #ff4c71 100%);
  border-radius: 15px;
  margin-bottom: 7px;
}
.collectableGame .notRedeemable .caption {
  padding-bottom: 5px;
  font-size: 120%;
  font-weight: 900;
  color: #ffffff;
}
.collectableGame .notRedeemable .description {
  padding-top: 5px;
  line-height: 140%;
  font-size: 110%;
  color: #2d010c;
  font-weight: 300;
}
.collectableGame .notRedeemable .title {
  font-weight: 900;
}
@media screen and (max-width: 600px) {
  .collectableUser .profileImage {
    grid-template-rows: auto 40px;
  }
  .collectableUser .pinMatch {
    padding: 10px;
  }
  .collectableUser .parts {
    margin-top: 10px;
    margin-left: 10px;
  }
  .collectableGame .layerHeader {
    max-width: 300px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
}
/**
	Jappy WOW
 background: #ff4b86;background: linear-gradient(45deg, #ff4b86 50%, #f02265 100%)
 */
.reactionSelection {
  position: fixed;
  z-index: 2;
  bottom: 0;
  text-align: center;
  left: 0;
  width: 100%;
}
.reactionSelection .selection {
  margin: auto;
  display: inline-block;
  background: rgba(0, 0, 0, 0.3);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  min-height: 150px;
}
.reactionSelection .selection .entry {
  float: left;
  width: 100px;
  height: 100px;
  border-radius: 30px;
  margin: 15px;
  opacity: 1.0;
}
.reactionSelection .selection .entry .icon {
  text-align: center;
}
.reactionSelection .selection .entry .icon img {
  width: 100%;
  border-radius: 30px;
  border: 4px solid #f02265;
}
.reactionSelection .selection .entry .icon img:hover {
  opacity: 1.0;
  border: 4px solid #d4094b;
  transition: 0.5s;
}
.reactionSelection .selection .entry:hover .icon {
  animation: intoFocusLight 0.5s forwards;
  transition: 0.3s;
}
.reactionSelection .selection .entry .text {
  color: #e2e2e2;
  font-weight: 900;
  padding: 5px;
  text-align: center;
  font-size: 130%;
  position: relative;
  margin-bottom: -20px;
}
.reactionSelection .selection .entry .text img {
  width: 20px;
  margin-right: 3px;
}
.reactionPicture {
  position: absolute;
  width: 750px;
  margin: auto;
}
.reactionHeader {
  width: 750px;
  background: linear-gradient(45deg, #ffe082 0%, #ffda69 100%);
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}
.reactionHeader .title {
  font-weight: 700;
  font-size: 90%;
  padding: 5px;
}
.reactionHeader .points {
  width: 30px;
  margin-right: 5px;
}
.reactionHeader .numberOfPoints {
  padding: 7px 20px;
  display: block;
  float: right;
}
.reactionHeader .links {
  padding: 7px 10px;
  display: block;
  text-align: right;
  float: right;
}
.reactionHeader .links img {
  width: 25px;
  margin-top: 3px;
}
.reactionHeader .links a {
  margin-right: 10px;
}
.reactionHeader a.log {
  color: #dd8f12;
  font-family: 'Luckiest Guy', cursive;
  font-size: 200%;
}
.reactionHeader a.add {
  padding: 0 10px;
  margin-left: 5px;
  font-size: 24px;
  font-family: 'Luckiest Guy', cursive;
  left: 10px;
  display: inline-block;
  border-radius: 10px;
  background: #05b8ea;
  background: linear-gradient(0deg, #ff9933 0%, #ffd237 100%);
  border: 3px solid #ffb134;
  box-shadow: 0 0 2px #ff7a17;
  color: #ffffff;
}
.reactionHeader a:hover {
  animation: intoFocusLight 0.5s forwards !important;
  transition: 0.3s;
}
.reactionReport {
  text-align: center;
}
.reactionReport hr {
  border: none;
  border-top: 5px solid #ffaac6;
  color: #ef3470;
  border-radius: 2px;
  width: 300px;
  margin-bottom: 25px;
  margin-top: 10px;
}
.reactionReport .reportHeader {
  background: #333333;
  border-radius: 10px;
  background: linear-gradient(90deg, #333333 0%, #000000 100%);
  margin-left: 10px;
  font-family: 'Roboto', cursive;
}
.reactionReport .profileImage {
  float: left;
  margin: 20px;
}
.reactionReport .profileImage img {
  width: 75px;
  border-radius: 50%;
  border: 3px solid #51cb05;
}
.reactionReport .partOfSince {
  float: left;
  margin: 25px;
  line-height: 150%;
  text-align: left;
  margin-left: 0;
  font-size: 150%;
  color: #c3c3c3;
  font-weight: 300;
}
.reactionReport .partOfSince span {
  font-weight: 900;
  color: #ffffff;
}
.reactionReport .icon {
  margin: auto;
}
.reactionReport .icon img {
  width: 125px;
  border-radius: 50%;
  border: 3px solid #f7407b;
  margin-top: 10px;
}
.reactionReport .listOfVoters {
  margin: auto;
  padding-top: 20px;
}
.reactionReport .listOfVoters img {
  width: 65px;
  border-radius: 50%;
  border-width: 2px;
  margin: 3px;
}
.reactionReport .listOfVoters img {
  border: 2px solid #9d9d9d;
}
.reactionReport .listOfVoters img:hover {
  animation: intoFocus 0.4s forwards;
}
.reactionReport .info {
  margin: auto;
  padding: 10px;
  width: 320px;
  margin-top: 10px;
  line-height: 200%;
  border-radius: 10px;
  background: #ffffff;
}
.reactionReport .gotoStats {
  float: left;
  margin: 25px;
  margin-left: 0;
}
.reactionReport .gotoStats .button {
  padding: 10px;
  display: block;
  width: 180px;
  text-align: center;
  color: #ffffff;
  border-radius: 20px;
  font-family: 'Luckiest Guy', cursive;
  font-size: 130%;
  background: linear-gradient(0deg, #ff9933 0%, #ffd237 100%);
  border: 3px solid #ffb134;
  box-shadow: 0 0 2px #ff7a17;
}
.reactionReport h2 {
  padding: 20px 0 0 10px;
  font-weight: 700;
  font-size: 12px;
}
.reactionReport .navigation {
  margin: auto;
  margin-top: 40px;
  width: 280px;
}
.reactionReport .navigation a {
  padding: 10px;
  display: block;
  width: 250px;
  text-align: center;
  color: #ffffff;
  border-radius: 20px;
  font-family: 'Luckiest Guy', cursive;
  font-size: 130%;
  background: linear-gradient(0deg, #ff9933 0%, #ffd237 100%);
  border: 3px solid #ffb134;
  box-shadow: 0 0 2px #ff7a17;
}
.reactionReport .navigation a.self {
  border-color: #db1c59;
  background: linear-gradient(0deg, #ef3470 0%, #ff6d9d 100%);
}
.reactionReport .navigation a:hover {
  cursor: pointer;
  opacity: 0.6;
  transition: 0.5s;
}
.reactionMatch {
  text-align: center;
}
.reactionMatch .versus {
  font-weight: 900;
  font-size: 1.5em;
}
.reactionMatch .matchIcon {
  width: 90px;
  border-radius: 50%;
  border: 3px solid #f7407b;
}
.reactionMatch .matchImage img {
  width: 128px;
  border-radius: 15px;
  border-width: 2px;
}
.reactionMatch hr {
  border: none;
  border-top: 5px solid #ffaac6;
  color: #ef3470;
  border-radius: 2px;
  width: 300px;
  margin-bottom: 25px;
  margin-top: 10px;
}
.reactionMatch .actions {
  margin: 5px;
  padding-bottom: 10px;
}
.reactionMatch .headline {
  text-align: center;
  font-size: 1.2em;
  font-weight: 900;
  color: #f7407b;
  margin: 5px;
  padding-bottom: 20px;
}
@media screen and (max-width: 600px) {
  .reactionSelection .selection .entry {
    width: 80px !important;
    margin: 5px;
  }
  .reactionSelection .selection {
    min-height: 115px;
  }
  .reactionHeader {
    width: 100% !important;
  }
  .reactionMatch .matchImage img {
    width: 90px;
  }
  .reactionMatch .matchIcon {
    width: 64px;
  }
}
.gameLottery {
  max-width: 690px;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: stretch;
  gap: 9px;
}
.gameLottery .instanceDescription {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: center;
  gap: 9px;
}
.gameLottery .instanceDescription h4 {
  font-family: 'Luckiest Guy', cursive;
  font-size: 2.1rem;
  font-weight: 900;
  color: #d33027;
  -webkit-text-stroke: 2px #fff;
  letter-spacing: 3px;
  padding: 13px 7px 11px 7px;
  display: block;
}
.gameLottery .instanceDescription .timeRange {
  font-weight: 400;
  font-size: 120%;
  color: #777;
}
.gameLottery .instanceDescription .description {
  background: #fff;
  color: #555;
  font-size: 110%;
  padding: 11px 13px;
  margin: 9px;
  border-radius: 9px;
}
.gameLottery .instanceDescription .detail {
  min-width: 50%;
  background: #444;
  padding: 9px;
  margin: 9px;
  border-radius: 9px;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 9px;
  border: 2px solid #000;
  box-shadow: 3px 3px 7px rgba(150, 150, 150, 0.13);
}
.gameLottery .instanceDescription .prizeList {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 7px;
  line-height: 1.7;
}
.gameLottery .instanceDescription .prizeList .intro {
  font-weight: 700;
  color: #eee;
}
.gameLottery .instanceDescription .termsList {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 7px;
}
.gameLottery .instanceDescription .termsList .intro {
  font-weight: 700;
  color: #eee;
}
.gameLottery .instanceDescription .termsList .termEntry {
  font-weight: 600;
}
.gameLottery .instanceDescription .termsList .fulfilled {
  color: #7bd246;
}
.gameLottery .instanceDescription .termsList .failed {
  color: #d33027;
}
.gameLottery .gameState {
  background: #fff;
  color: #555;
  font-weight: 400;
  font-size: 1.0rem;
  line-height: 1.6em;
  padding: 9px;
  border-radius: 9px;
  border: 1px solid #888;
  box-shadow: 3px 3px 7px rgba(150, 150, 150, 0.13);
}
.gameLottery .gameState .headline {
  font-family: 'Luckiest Guy', cursive;
  font-size: 1.4rem;
  font-weight: 400;
  color: #777;
  line-height: 1.5;
  padding: 13px 0 21px 0;
  text-align: center;
}
.gameLottery .gameState .introduction {
  text-align: center;
  margin: 0 0 0.8em 0;
}
.gameLottery .gameState .action {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  margin: 0 0 0.8em 0;
}
.gameLottery .gameState .action button {
  color: #333333;
  cursor: pointer;
  background: #ff9933;
  background: linear-gradient(45deg, #ffc51b 0%, #fee540 100%);
  border: 2px solid #eec324;
  border-radius: 20px;
  font-weight: 900;
  padding: 10px 15px;
  margin-bottom: 5px;
}
.gameLottery .gameState .loader {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
}
.gameLottery .gameState .loader img {
  max-width: 10vh;
  margin: 25px;
}
.gameLottery .payoutTerms {
  text-align: center;
  font-size: 0.7rem;
  margin-top: 3em;
  color: #777;
  line-height: 1.3;
}
.gameLottery .gameState .selectionGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
}
.gameLottery .gameState .selectionGrid .selectionEntry {
  border: 1px solid #888;
  background: #e0e0e0;
  cursor: pointer;
  transition: .3s;
  border-radius: 7px;
  overflow: hidden;
  opacity: .7;
}
.gameLottery .gameState .selectionGrid .selectionEntry.disabled {
  cursor: unset;
  opacity: .5;
}
.gameLottery .gameState .selectionGrid .selectionEntry.picked {
  border-color: #62b5ff;
  box-shadow: 0 0 5px 1px #62b5ff;
  opacity: 1.0;
}
.gameLottery .gameState .selectionGrid .selectionEntry:hover {
  background: #f0f0f0;
  opacity: 1.0;
}
.gameLottery .gameState .selectionGrid .selectionEntry .location {
  display: flex;
  background: #333;
  color: #fff;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-around;
  align-content: stretch;
  padding: 4px;
  gap: 4px;
  height: 1.7em;
}
.gameLottery .gameState .selectionGrid .selectionEntry .detail {
  display: flex;
  background: #333;
  color: #fff;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-around;
  align-content: stretch;
  padding: 4px;
  gap: 4px;
  height: 1.7em;
}
.gameLottery .gameState .selectionGrid .selectionEntry .detail > * {
  padding: 2px 7px;
  border-radius: 5px;
  display: inline-block;
  min-width: 36px;
  text-align: center;
  font-weight: bold;
}
.gameLottery .gameState .age.male {
  background: #62b5ff;
}
.gameLottery .gameState .age.female {
  background: #ff6aaf;
}
.gameLottery .gameState .membership {
  background: #6aaf6a;
  background: linear-gradient(33deg, #507f50 0%, #7ac97a 100%);
  color: #182718;
}
.gameLottery .gameState .lastWin {
  background: #af6aaf;
  background: linear-gradient(33deg, #7f4d7f 0%, #d581d5 100%);
}
.gameLottery .gameState .colorLegend {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  gap: 3px;
  margin: 70px 0 30px 0;
  font-size: 80%;
}
.gameLottery .gameState .colorLegend > * {
  padding: 3px;
  display: flex;
  gap: 13px;
  align-items: center;
}
.gameLottery .gameState .colorLegend .colorBlock {
  padding: 3px;
  display: inline-block;
  min-width: 36px;
  min-height: 1.5em;
  border-radius: 5px;
}
.gameLottery .helpLink {
  text-align: center;
  margin: 3em 0;
}
.gameLottery .helpLink a {
  font-weight: 700;
  font-size: 120%;
  color: #333;
}
.gameLotteryLayerContainer {
  width: 100vw;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-content: flex-start;
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
}
.gameLotteryLayerContainer .layerContainer {
  max-width: 350px;
  display: inline-flex;
  text-align: left;
  margin-top: 70px;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  color: #fff;
  background: rgba(50, 50, 50, 0.5);
  border-radius: 13px;
  padding: 13px;
  border: 2px solid #222;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  align-content: center;
  gap: 7px;
}
.gameLotteryLayerContainer .layerContainer .headline {
  font-size: 180%;
  text-align: center;
  margin-bottom: .25rem;
  padding: 7px;
}
.gameLotteryLayerContainer .layerContainer .message {
  font-size: 120%;
  padding: 17px;
  text-align: center;
  line-height: 1.5;
}
.gameLotteryLayerContainer .layerContainer .profileImage {
  border-radius: 13px;
  overflow: hidden;
}
.gameLotteryLayerContainer .layerContainer .profileImage img {
  width: 50vw;
  max-width: 100%;
}
.gameLotteryLayerContainer .layerContainer .detailTable {
  display: flex;
  flex-direction: column;
  gap: 5px;
  line-height: 1.4;
}
.gameLotteryLayerContainer .layerContainer .detailTable .detailRow {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex-wrap: wrap;
}
.gameLotteryLayerContainer .layerContainer .detailTable .heading {
  font-size: 90%;
  font-weight: bold;
  text-transform: uppercase;
  display: inline-block;
}
.gameLotteryLayerContainer .layerContainer .actionArea {
  padding: 17px;
  text-align: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: stretch;
  gap: 7px;
}
.gameLotteryLayerContainer .btn {
  border: 3px solid;
  border-radius: 10px;
  font-size: 120%;
  color: #ffffff !important;
  text-align: center;
  line-height: 40px;
  min-height: 40px;
  font-family: 'Luckiest Guy', cursive;
  padding: 3px 13px;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);
  box-sizing: border-box;
}
.gameLotteryLayerContainer .btn:hover,
.breakGame .btn:focus {
  transition: .8s;
}
.gameLotteryLayerContainer .btn[disabled] {
  opacity: 0.6;
  transition: 0.3s;
}
.gameLotteryLayerContainer .btn-block {
  display: block;
  width: 100%;
}
.gameLotteryLayerContainer .btn.primary {
  border-color: #ffb134;
  box-shadow: 0 0 2px #ff7a17;
  background: linear-gradient(0deg, #ff9933 0, #ffd237 100%);
}
.gameLotteryLayerContainer .btn.primary:hover,
.breakGame .btn.primary:focus {
  border-color: #fff697;
}
.gameLotteryLayerContainer .btn.silver {
  border-color: #e0e0e0;
  box-shadow: 0 0 2px #e8e8e8;
  background: linear-gradient(0deg, #a0a0a0 0, #e0e0e0 100%);
}
.gameLotteryLayerContainer .btn.silver:hover,
.breakGame .btn.silver:focus {
  border-color: #a0a0a0;
  color: #e0e0e0;
}
@media screen and (min-width: 800px) {
  .gameLottery .gameState .selectionGrid {
    grid-template-columns: repeat(3, 1fr);
  }
  .gameLotteryLayerContainer .layerContainer .detailTable .detailRow {
    flex-direction: row;
  }
  .gameLotteryLayerContainer .layerContainer .detailTable .heading {
    font-size: 100%;
    text-transform: none;
    width: 120px;
  }
}
/* Kalender-Spezifische Design-Anpassungen */
.gameLotteryInstance2 {
  background: #031d36 url("https://s.jappy.com/i/games/wichtelLotterie/xmas_wichtellotterie_bg.png") no-repeat top center;
  background-size: contain;
}
.gameLotteryInstance2 .instanceDescription {
  margin-top: min(300px, 50vw);
}
.gameLotteryInstance2 .instanceDescription h4 {
  display: none;
}
.gameLotteryInstance2 .instanceDescription .timeRange {
  color: #fff;
}
.gameLotteryInstance2 .helpLink a {
  color: #fff;
}
.breakGame.layer {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-content: flex-start;
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
}
.breakGame .dialog {
  max-width: 350px;
  display: inline-block;
  text-align: left;
  margin-top: 70px;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.breakGame .dialog .headline {
  font-size: 180%;
  text-align: center;
  margin-bottom: .25rem;
  padding: 7px;
}
.breakGame .dialog .message {
  font-size: 120%;
  padding: 17px;
  text-align: center;
  line-height: 1.5;
}
.breakGame .dialog .actionArea {
  padding: 17px;
  text-align: center;
}
.breakGame .bubble {
  padding: 7px 9px 9px 9px;
  margin: 7px 9px 9px 9px;
  border-radius: 13px;
  background: rgba(30, 30, 30, 0.5);
  color: #f0f0f0;
}
.breakGame .bubble h3 {
  color: #fff;
}
.breakGame .btn {
  border: 3px solid;
  border-radius: 10px;
  font-size: 120%;
  color: #ffffff !important;
  text-align: center;
  line-height: 40px;
  min-height: 40px;
  font-family: 'Luckiest Guy', cursive;
  padding: 3px 13px;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);
  box-sizing: border-box;
}
.breakGame .btn:hover,
.breakGame .btn:focus {
  transition: .8s;
}
.breakGame .btn[disabled] {
  opacity: 0.6;
  transition: 0.3s;
}
.breakGame .btn-block {
  display: block;
  width: 100%;
}
.breakGame .btn.primary {
  border-color: #ffb134;
  box-shadow: 0 0 2px #ff7a17;
  background: linear-gradient(0deg, #ff9933 0, #ffd237 100%);
}
.breakGame .btn.primary:hover,
.breakGame .btn.primary:focus {
  border-color: #fff697;
}
.breakGame .btn.secondary {
  border-color: #d930a9;
  box-shadow: 0 0 2px #D4F8FF;
  background: linear-gradient(0deg, #fc3dda 0, #f53bb1 100%);
}
.breakGame .btn.secondary:hover,
.breakGame .btn.secondary:focus {
  border-color: #D4F8FF;
}
.breakGame .btn.green {
  border-color: #81E500;
  box-shadow: 0 0 2px #5DE500;
  background: linear-gradient(0deg, #9CE500 0, #A7FF33 100%);
}
.breakGame .btn.green:hover,
.breakGame .btn.green:focus {
  border-color: #B2FF97;
}
.breakGame .btn.yellow {
  border-color: #ffb134;
  box-shadow: 0 0 2px #ff7a17;
  background: linear-gradient(0deg, #ff9933 0, #ffd237 100%);
}
.breakGame .btn.yellow:hover,
.breakGame .btn.yellow:focus {
  border-color: #fff697;
}
.breakGame .btn.red {
  border-color: #FF5434;
  box-shadow: 0 0 2px #FFC697;
  background: linear-gradient(0deg, #FF3B33 0, #FF7536 100%);
}
.breakGame .btn.red:hover,
.breakGame .btn.red:focus {
  border-color: #FFC697;
}
.breakGame .btn.silver {
  border-color: #e0e0e0;
  box-shadow: 0 0 2px #e8e8e8;
  background: linear-gradient(0deg, #a0a0a0 0, #e0e0e0 100%);
}
.breakGame .btn.silver:hover,
.breakGame .btn.silver:focus {
  border-color: #a0a0a0;
  color: #e0e0e0;
}
.breakGame h2 {
  font-family: 'Luckiest Guy', cursive;
  width: auto;
  font-size: 250%;
  text-align: center;
  color: #fff;
}
.breakGame h3 {
  font-family: 'Luckiest Guy', cursive;
  width: auto;
  font-size: 200%;
  text-align: center;
  color: #fff;
}
.breakGame h4 {
  font-family: 'Luckiest Guy', cursive;
  width: auto;
  font-size: 150%;
  text-align: center;
  color: #eee;
}
.breakGame p {
  padding: 3px 3px 7px 3px;
  font-weight: bold;
  line-height: 1.5;
  font-size: 120%;
}
.breakGame hr {
  background: none;
  border: 0;
  height: 10px;
}
.breakGame dl {
  font-size: 1.2em;
  line-height: 1.5;
}
.breakGame dl dt {
  font-weight: 600;
}
.breakGame dl dd {
  font-size: 1.4em;
  font-weight: 300;
}
.breakGame table {
  color: #fff;
}
.breakGame table th,
.breakGame table td {
  color: #fff;
  vertical-align: top;
  padding: 7px 3px;
}
.breakGame table td.caption {
  font-weight: 800;
}
.breakGame table tr {
  transition: .3s;
}
.breakGame table tr:hover {
  background: rgba(63, 63, 63, 0.75);
}
.breakGame table .nowrap {
  white-space: nowrap;
}
.breakGame table .stampOnline,
.breakGame table .stampOffline,
.breakGame table .stampBlocked {
  color: #fff;
}
.breakGame table .stampOnline {
  background: rgba(208, 240, 153, 0.5);
}
.breakGame #breakGameFrame {
  min-height: 60vh;
  max-width: 690px;
  width: 100%;
}
.breakGame #breakGameFrame .content {
  min-height: 60vh;
  padding: 0 0 30px 0;
  position: relative;
}
.breakGame #breakGameFrame .menu {
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
}
.breakGame #breakGameFrame .menu .logo {
  padding: 25px;
}
.breakGame #breakGameFrame .menu .logo img {
  max-width: min(30vw, 300px);
}
.breakGame #breakGameFrame .menu .navigation {
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  padding: 10px 20px;
  gap: 7px;
  max-width: 60%;
}
.breakGame #breakGameFrame .menu .navigation p {
  max-width: 100%;
}
.breakGame #breakGameFrame .menu .navigation .buttonBar {
  display: flex;
  flex-direction: column;
  gap: 9px;
  align-content: stretch;
  justify-content: space-evenly;
  align-items: stretch;
  margin: 20px 0 10px 0;
  width: 100%;
}
.breakGame #breakGameFrame .ingame {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 7px 0;
}
.breakGame #breakGameFrame .ingame .gameHeader {
  display: flex;
  justify-content: space-evenly;
  align-items: stretch;
  align-content: stretch;
  width: 100%;
}
.breakGame #breakGameFrame .ingame .gameHeader .gameMetricContainer {
  width: 40%;
  text-align: center;
  line-height: 1.5;
  padding: 0 7px 7px 7px;
  display: flex;
  flex-direction: column;
  position: relative;
  height: 70px;
  justify-content: space-evenly;
}
.breakGame #breakGameFrame .ingame .gameHeader .gameMetricContainer .subtitle {
  font-weight: 100;
  font-size: 80%;
}
.breakGame #breakGameFrame .ingame .gameHeader .gameMetricContainer .value {
  font-size: 200%;
  font-weight: 300;
}
.breakGame #breakGameFrame .ingame .gameHeader .gameMetricContainer .addon {
  position: absolute;
  top: 70px;
  left: 0;
  right: 0;
  background: rgba(50, 50, 50, 0.5);
  padding: 7px 17px 17px 17px;
  border-radius: 13px;
  text-shadow: 1px 1px #000;
  color: #fff;
  font-size: 170%;
  z-index: 2000;
  text-align: center;
}
.breakGame #breakGameFrame .ingame .canvasArea {
  aspect-ratio: 1.0;
  max-width: 90vw;
  margin: 0;
  padding: 0;
  display: block;
  width: min(90vw, 60vh, 630px);
  height: min(90vw, 60vh, 630px);
  min-width: 300px;
  min-height: 300px;
}
.breakGame #breakGameFrame .ingame .canvasArea canvas {
  z-index: 100;
  max-height: 60vh;
  height: 100%;
  width: 100%;
  min-width: 300px;
  min-height: 300px;
}
.breakGame #breakGameFrame .ingame .canvasArea.viewportSmall,
.breakGame #breakGameFrame .ingame .canvasArea.viewportMedium,
.breakGame #breakGameFrame .ingame .canvasArea.viewportLarge {
  width: auto;
  height: auto;
  max-width: unset !important;
  max-height: unset !important;
  min-width: unset !important;
  min-height: unset !important;
}
.breakGame #breakGameFrame .ingame .canvasArea.viewportSmall canvas {
  width: 340px !important;
  height: 340px !important;
  max-width: unset !important;
  max-height: unset !important;
  min-width: unset !important;
  min-height: unset !important;
}
.breakGame #breakGameFrame .ingame .canvasArea.viewportMedium canvas {
  width: 520px !important;
  height: 520px !important;
  max-width: unset !important;
  max-height: unset !important;
  min-width: unset !important;
  min-height: unset !important;
}
.breakGame #breakGameFrame .ingame .canvasArea.viewportLarge canvas {
  width: 680px !important;
  height: 680px !important;
  max-width: unset !important;
  max-height: unset !important;
  min-width: unset !important;
  min-height: unset !important;
}
.breakGame #breakGameFrame .ingame .ingameMenu {
  display: flex;
  flex-direction: column;
  gap: 11px;
  font-size: 120%;
  justify-content: center;
  align-items: center;
}
.breakGame #breakGameFrame .ingame .ingameMenu .gameMode {
  padding: 7px 0;
  font-size: 120%;
  font-weight: 800;
}
.breakGame #breakGameFrame .ingame .ingameMenu .buttonBar {
  display: flex;
  flex-direction: row;
  gap: 13px;
  font-size: 120%;
  justify-content: center;
  align-items: stretch;
}
.breakGame #breakGameFrame .ingame .ingameMenu .buttonBar button img {
  height: 40px;
  width: 40px;
}
.breakGame #breakGameFrame .overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.breakGame #breakGameFrame .overlay.loading {
  display: grid;
  background: rgba(240, 240, 240, 0.4);
  transition: .3s;
  text-align: center;
  color: #555;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  width: 100%;
  height: 100%;
  align-self: start;
  justify-self: center;
  grid-template-rows: min-content min-content auto;
}
.breakGame #breakGameFrame .overlay.loading .text {
  font-size: 3rem;
  padding: 3rem;
  line-height: 1.5;
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px 0px #333;
}
.breakGame #breakGameFrame .overlay.loading .loadingProgress {
  height: 3rem;
  margin: 30px;
}
.breakGame #breakGameFrame .overlay.loading .loadingProgress .barContainer {
  position: relative;
  background: #fff;
  height: 3rem;
  width: 100%;
  display: inline-block;
  border-radius: 7px;
  overflow: hidden;
  border: 3px solid #3EBE10;
}
.breakGame #breakGameFrame .overlay.loading .loadingProgress .bar {
  position: absolute;
  top: 0px;
  left: 0px;
  background: #A7FF33;
  display: inline-block;
  height: 100%;
}
.breakGame #breakGameFrame .overlay.loading .loadingProgress .text {
  position: absolute;
  top: 0rem;
  left: 0px;
  right: 0px;
  text-align: center;
  color: #333;
  font-weight: 200;
  font-size: 2rem;
  padding: 0;
  text-shadow: none;
}
.breakGame #breakGameFrame .overlay.gameover {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  grid-column: unset;
  grid-row: unset;
  background: rgba(50, 50, 50, 0.5);
  text-align: center;
  transition: 0.5s;
  height: 100%;
  padding: 50px;
  z-index: 5000001;
}
.breakGame #breakGameFrame .overlay.gameover .content {
  overflow-y: auto;
}
.breakGame #breakGameFrame .overlay.gameover .bubble {
  background: rgba(0, 0, 0, 0.7);
}
.breakGame .dialog {
  max-height: calc(80vh - 60px);
  overflow-y: auto;
  z-index: 5000002;
  box-sizing: border-box;
  margin-top: 60px;
  margin-bottom: 60px;
  border: 3px solid #111;
}
.breakGame #breakGameFrame .achievementGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 3px;
  width: 100%;
}
.breakGame #breakGameFrame .achievementGrid .achievementEntry {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-content: center;
  align-items: center;
  width: 64px;
  height: 96px;
  gap: 7px;
}
.breakGame #breakGameFrame .achievementGrid .achievementEntry .icon {
  width: 100%;
  aspect-ratio: 1.0;
  max-height: 64px;
  max-width: 64px;
}
.breakGame #breakGameFrame .achievementGrid .achievementEntry .label {
  color: #fff;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
}
.breakGame #breakGameFrame .gameSummary {
  display: flex;
  flex-direction: column;
  align-content: stretch;
  justify-content: space-evenly;
  align-items: stretch;
  background: rgba(0, 0, 0, 0.5);
  gap: 7px;
  border-radius: 13px;
  padding: 13px;
}
.breakGame #breakGameFrame .gameSummary .label {
  font-size: 140%;
  font-weight: 300;
  padding: 13px;
  line-height: 1.5;
}
.breakGame #breakGameFrame .gameSummary .row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-evenly;
  align-items: stretch;
  align-content: stretch;
  gap: 7px;
}
.breakGame #breakGameFrame .gameSummary .row .column {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: space-between;
  align-items: center;
  gap: 9px;
}
.breakGame #breakGameFrame .gameSummary .row .column .caption {
  font-size: 0.8em;
  font-weight: 700;
  color: #a0a0a0;
  text-shadow: 2px 2px 3px rgba(50, 50, 50, 0.8);
  text-align: center;
}
.breakGame #breakGameFrame .gameSummary .row .column .value {
  font-size: 1.8em;
  font-weight: 300;
  color: #fff;
  text-align: center;
}
.breakGame #breakGameFrame .service {
  text-align: center;
}
.breakGame #breakGameFrame .tableOverflow {
  overflow-x: auto;
  max-width: 100%;
}
.breakGame #breakGameFrame .highscoreTable img {
  max-height: 1.5em;
}
.breakGame #breakGameHelp {
  display: flex;
  gap: 7px;
  font-size: 130%;
  line-height: 1.5;
  padding: 20px;
  align-items: center;
  align-content: stretch;
  font-weight: 600;
  color: #16beff;
}
.breakGame #breakGameHelp img {
  height: 1.5em;
  aspect-ratio: 1.0;
}
.breakGame .layer::-webkit-scrollbar {
  width: 7px;
}
.breakGame .layer::-webkit-scrollbar-track {
  background: #fff;
}
.breakGame .layer::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 3px;
}
.breakGame .dialog::-webkit-scrollbar {
  width: 7px;
}
.breakGame .dialog::-webkit-scrollbar-track {
  background: #fff;
}
.breakGame .dialog::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 3px;
}
@media screen and (max-width: 800px) {
  .breakGame .bubble {
    max-width: 100% !important;
  }
}
@media screen and (max-height: 720px) {
  .breakGame .dialog {
    max-height: 100vh;
  }
}
@media screen and (min-width: 800px) {
  .breakGame #breakGameFrame .achievementGrid {
    grid-template-columns: repeat(6, 1fr);
  }
}
.gameWordGuessDescription {
  margin: 2em 10px 10px 10px;
  line-height: 1.5;
  padding: 11px;
  background: #fff;
  border-radius: 9px;
  max-width: 650px;
}
.gameWordGuessDescription .gridLetter {
  border-width: 2px;
  border-style: solid;
  border-radius: 30%;
  aspect-ratio: 1.0;
  padding: 8px;
  font-weight: 800;
  display: inline-flex;
  text-align: center;
  vertical-align: middle;
  justify-content: center;
  align-content: center;
  align-items: center;
  transition: .1s;
  box-sizing: content-box;
  width: 20px;
  height: 20px;
  margin: 3px 3px;
  font-size: 1.0em !important;
}
.gameWordGuessDescription .gridLetterWhite {
  color: #000000;
  background: #fff;
  border-color: #909090;
}
.gameWordGuessDescription .gridLetterGrey {
  color: #909090;
  background: #a0a0a0;
  border-color: #909090;
}
.gameWordGuessDescription .gridLetterRed {
  color: #fff;
  background: #d91f27;
  border-color: #ff4942;
}
.gameWordGuessDescription .gridLetterYellow {
  color: #4f4537;
  background: #ffd66d;
  border-color: #ffc860;
}
.gameWordGuessDescription .gridLetterGreen {
  color: #fff;
  background: #64a300;
  border-color: #90cc00;
}
#wordGuessFrame {
  max-width: 690px;
  background: linear-gradient(90deg, #484848 0%, #333333 100%);
  border-radius: 0 0 10px 10px;
  padding-bottom: 15px;
}
.gameWordGuess button:focus {
  box-shadow: 0 0 2px rgba(15, 122, 229, 0.7);
}
.gameWordGuess button[disabled] {
  opacity: 0.5;
}
.gameWordGuess .stampOffline,
.gameWordGuess table td {
  color: #ffffff;
}
.wordGuessDetailLayer table td,
.wordGuess .personalHighscore table td {
  color: #000000;
}
.gameWordGuess .personalHighscore .flexTable {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
}
.gameWordGuess .personalHighscore .flexTable .caption {
  text-align: left;
  color: #666;
  line-height: 30px;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12px;
}
.gameWordGuess .personalHighscore .flexTable .row {
  display: flex;
  flex-direction: row;
  gap: 5px;
  flex-wrap: wrap;
}
.gameWordGuess .personalHighscore .flexTable .row > div {
  padding: 10px 10px 10px 16px;
}
.gameWordGuess .personalHighscore .flexTable .c_id {
  width: 10px;
}
.gameWordGuess .personalHighscore .flexTable .c_word {
  display: inline-flex;
  flex-direction: column;
  gap: 7px;
}
.gameWordGuess .personalHighscore .intro {
  font-size: 140%;
  font-weight: 800;
}
.gameWordGuess .personalHighscore .detail {
  white-space: nowrap;
}
.gameWordGuess .personalHighscore .detail.major {
  padding: 3px 0;
  font-weight: 600;
}
.gameWordGuess .personalHighscore .detail.minor {
  padding: 3px 0;
  font-weight: 400;
  font-size: 80%;
}
.gameWordGuess .nextGame {
  padding: 30px 0 3px 0;
}
.gameWordGuess .autoflow {
  overflow-x: auto;
}
.gameWordGuess button.primary {
  border: 2px solid #fabe2d;
  font-weight: 800;
  color: #181818;
  border-radius: 7px;
  padding: 13px;
  background: #e5f0ff;
  transition: .3s;
  background: radial-gradient(circle, #f8aa2d, #ffef2d);
  font-size: 1.3em;
  min-width: 200px;
}
.gameWordGuess button.primary:hover {
  cursor: pointer;
  background: #f8aa2d;
}
.gameWordGuess button.secondary {
  border: 2px solid #ffe33b;
  font-weight: 800;
  color: #000000;
  border-radius: 7px;
  padding: 13px;
  background: #f0f0f0;
  transition: .3s;
  background: radial-gradient(circle, #ffe63f, #fdfc5c);
  font-size: 1.3em;
  min-width: 200px;
}
.gameWordGuess button.secondary:hover {
  cursor: pointer;
  background: #f5f5f5;
}
.gameWordGuess .logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 150px;
  margin-bottom: 50px;
}
.gameWordGuess .logo img {
  max-width: min(60vw, 300px);
}
.gameWordGuess .gameModeBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 13px;
  background: #fff;
  border-radius: 9px;
  padding: 11px;
  margin: 30px 10px;
  border: 2px solid #d0d0d0;
}
.gameWordGuess .gameModeBox .gameModeSelection {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-content: flex-start;
  gap: 7px;
}
.gameWordGuess .gameModeBox .gameModeSelection .caption {
  font-size: 150%;
  font-weight: 300;
  color: #999;
  text-align: center;
  padding: 7px;
}
.gameWordGuess .gameModeBox .gameMode {
  display: flex;
  flex-direction: row;
  line-height: 1.5;
  gap: 3px;
  padding: 7px;
  border-radius: 11px;
  align-content: flex-start;
  align-items: center;
}
.gameWordGuess .gameModeBox .gameMode:hover {
  background: #f0f0f0;
  cursor: pointer;
}
.gameWordGuess .gameModeBox .gameMode input {
  width: 20px;
  margin: 0;
  padding: 0;
}
.gameWordGuess .gameModeBox .gameMode span {
  margin: 0;
  padding: 0;
}
.gameWordGuess .gridLetterWhite {
  color: #000000;
  background: #fff;
  border-color: #909090;
}
.gameWordGuess .gridLetterGrey {
  color: #909090;
  background: #a0a0a0;
  border-color: #909090;
}
.gameWordGuess .gridLetterRed {
  color: #fff;
  background: #d91f27;
  border-color: #c61e23;
  background: radial-gradient(circle, #e03037, #ff4248);
}
.gameWordGuess .gridLetterYellow {
  color: #3e3309;
  background: #ffd66d;
  border-color: #a37d10;
  background: radial-gradient(circle, #f8aa2d, #ffef2d);
}
.gameWordGuess .gridLetterGreen {
  color: #fff;
  background: #64a300;
  border-color: #4fb400;
  background: radial-gradient(circle, #39a900, #71cc00);
  box-shadow: 1px 1px 5px #67c600;
}
.gameWordGuess .gridLetter {
  border-width: 2px;
  border-style: solid;
  border-radius: 20%;
  aspect-ratio: 1.0;
  padding: 8px;
  font-weight: 800;
  display: inline-flex;
  text-align: center;
  vertical-align: middle;
  justify-content: center;
  align-content: center;
  align-items: center;
  transition: .1s;
  box-sizing: content-box;
}
.gameWordGuess .gridLetter.playSoon {
  opacity: 0.5;
}
.gameWordGuess .hintSet {
  display: flex;
  flex-direction: row-reverse;
  gap: 5px;
  margin: 0 7px 7px 7px;
}
.gameWordGuess .hintSet .gridLetter {
  width: 32px;
  height: 32px;
}
.gameWordGuess .hintSet button {
  font-size: 1em;
}
.gameWordGuess .wordGrid {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 7px;
  padding: 7px 13px;
}
.gameWordGuess .wordGrid .row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-content: center;
  align-items: center;
  gap: 7px;
  box-sizing: border-box;
}
.gameWordGuess .wordGrid .row.current .gridLetter {
  box-shadow: 3px 3px 5px 1px #d0d0d0 inset;
}
.gameWordGuess .wordGrid .row.current .gridLetter.gridLetterRed {
  box-shadow: none;
}
.gameWordGuess .wordGrid .row.current .gridLetter.gridLetterYellow {
  box-shadow: none;
}
.gameWordGuess .wordGrid .row.current .gridLetter.gridLetterGreen {
  box-shadow: none;
}
.gameWordGuess .wordGrid .row.current .gridLetter:focus,
.gameWordGuess .wordGrid .row.current .gridLetter.focus {
  border-color: #0f7ae5;
  box-shadow: 0 0 5px #0a75a8;
}
.gameWordGuess .wordGrid .gridLetter {
  display: inline-flex;
  width: 30px;
  height: 30px;
  font-size: 1.2rem;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  cursor: text;
}
.gameWordGuess .gameEnd {
  padding: 25px;
  line-height: 1.5;
  text-align: center;
  color: #ffffff;
}
.gameWordGuess .onScreenKeyboard {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-evenly;
  align-content: center;
  gap: 3px;
  margin-top: 20px;
}
.gameWordGuess .onScreenKeyboard .row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 3px;
  align-items: stretch;
  padding: 0 7px;
}
.gameWordGuess .onScreenKeyboard .row button {
  width: auto;
  min-width: 8%;
  min-height: 40px;
  font-size: 0.8rem;
  font-weight: 700;
  flex-grow: 1;
  aspect-ratio: auto;
  box-sizing: border-box;
  border-radius: 7px;
  border-style: solid;
  transition: .3s;
}
.gameWordGuess .onScreenKeyboard .row button.special {
  border: 2px solid #a0a0a0;
  font-weight: 800;
  color: #555;
  background: #d0d0d0;
  transition: .3s;
  flex-grow: 1.25;
}
.gameWordGuess .onScreenKeyboard .row button.attention {
  cursor: pointer;
  background: #9ddede;
  border-color: #0f7ae5;
  color: #0f7ae5;
}
.gameWordGuess .onScreenKeyboard .row button:hover {
  cursor: pointer;
  background: #f5ffff;
  border-color: #0f7ae5;
  color: #0f7ae5;
}
.gameWordGuess .onScreenKeyboard .row button img {
  display: inline-block;
  width: 30px;
  height: 30px;
  max-width: unset;
  max-height: unset;
}
.gameWordGuess .gameModeTitle {
  padding: 15px;
  color: #fff;
}
.gameWordGuess .gameModeTitle .detail {
  line-height: 1.5;
  text-align: center;
}
.gameWordGuess .gameModeTitle .detail .sub {
  font-size: 0.5em;
  font-weight: 300;
}
.gameWordGuess .gameModeTitle .detail .caption {
  font-size: 1.5rem;
  font-weight: 900;
  color: #fff;
}
.gameWordGuess .gameDescription {
  color: #ffffff;
  line-height: 1.5em;
  padding: 15px;
  text-align: center;
}
.gameWordGuess .score {
  width: 55%;
  color: #ffff;
  font-size: 1.3rem;
  min-width: 120px;
  font-weight: 800;
  border-radius: 7px;
  padding: 7px;
  text-align: center;
  padding-top: 5px;
}
.gameWordGuess .score span {
  color: #999;
  font-weight: 300;
}
.gameWordGuess .subarea {
  display: flex;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
  padding: 7px;
  gap: 9px;
}
.gameWordGuess .subarea button {
  height: 48px;
  width: 48px;
  border-radius: 7px;
  padding: 7px;
  box-sizing: border-box;
  border: 2px solid #c0c0c0;
  background: #f0f0f0;
  transition: .3s;
}
.gameWordGuess .subarea button:hover {
  cursor: pointer;
  background: #f0ffff;
}
.gameWordGuess .subarea .caption {
  font-weight: 300;
  font-size: 1.5rem;
  color: #ffffff;
}
.gameWordGuess .subarea .caption .gridLetter {
  width: 20px;
  height: 20px;
  font-size: 1.5rem;
}
.gameWordGuess .gameList {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.gameWordGuess .gameList .gameEntry {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  padding: 7px;
  align-items: center;
  justify-content: space-between;
}
.gameWordGuess .gameList .gameEntry .detail {
  flex-grow: 1;
}
.gameWordGuess .gameList .gameEntry .detail .mode {
  font-size: 0.8rem;
  padding: 3px;
  display: flex;
  flex-direction: row;
  gap: 7px;
  color: #ffffff;
}
.gameWordGuess .gameList .gameEntry .action {
  margin-top: 20px;
}
.gameWordGuess .hint {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  padding: 3px;
  gap: 3px;
}
.gameWordGuess .hint .gridLetter {
  width: 30px;
  height: 30px;
  font-size: 2.0em;
}
.gameWordGuess .gameList .gameEntry .action button {
  border-radius: 7px;
  width: 80px;
}
.gameWordGuess .gameListDetail {
  text-align: center;
  padding: 7px;
  font-size: 90%;
  line-height: 1.5;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  align-items: stretch;
}
.gameWordGuess .gameListDetail span {
  padding: 7px 13px;
  margin: 5px 3px;
  background: #f0f0f0;
  border-radius: 15px;
  display: inline-flex;
  align-content: center;
  justify-content: center;
  align-items: center;
  height: 22px;
  color: #000;
}
.gameWordGuess .gameListDetail span a {
  margin: 5px;
  color: #000;
}
.gameWordGuess .menu {
  display: flex;
  flex-direction: column;
  padding: 9px;
  gap: 9px;
  align-items: center;
  justify-content: space-evenly;
}
.gameWordGuess .scoreShare {
  margin: 50px 25px;
  border-radius: 16px;
  background: #e0e0e0;
}
.gameWordGuess .scoreShare textarea {
  display: block;
  height: 200px;
  border: none;
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  width: 100%;
  box-sizing: border-box;
}
.gameWordGuess .pageNavigation {
  display: flex;
  justify-content: center;
  align-content: center;
}
.gameWordGuess .pageNavigation ul {
  display: flex;
  justify-content: center;
  align-content: center;
  list-style: none;
  flex-wrap: wrap;
}
.gameWordGuess .pageNavigation ul li {
  display: flex;
  justify-content: center;
  align-content: stretch;
  align-items: stretch;
}
.gameWordGuess .pageNavigation ul li button {
  display: flex;
  justify-content: center;
  align-content: center;
  padding: 10px;
  margin: 0;
  background: #fff;
  color: #000;
  font-weight: 700;
  transition: .3s;
  border: 1px solid #a0a0a0;
  border-left: none;
  border-right: none;
}
.gameWordGuess .pageNavigation ul li:first-child button {
  border-radius: 7px 0 0 7px;
  border-left: 1px solid #a0a0a0;
}
.gameWordGuess .pageNavigation ul li:last-child button {
  border-radius: 0 7px 7px 0;
  border-right: 1px solid #a0a0a0;
}
.gameWordGuess .pageNavigation ul li button:hover {
  cursor: pointer;
  background: #e5f0f0;
}
.gameWordGuess .pageNavigation ul li.active button {
  background: #0f7ae5;
  color: #fff;
}
.gameWordGuess .statisticsSection {
  background: #fff;
  border-radius: 7px;
  margin: 7px 7px 13px 7px;
  padding: 7px;
}
.gameWordGuess .statisticsSection .caption {
  margin: 7px;
  font-size: 160%;
  font-weight: 400;
  color: #555;
}
.gameWordGuess .finder {
  background: #ffffff;
  display: flex;
  line-height: 200%;
  padding: 10px;
  margin: 10px;
  border-radius: 5px;
  align-items: center;
  flex-direction: column;
}
.gameWordGuess .finder p {
  font-weight: 600;
  max-width: 300px;
  margin: 20px 10px;
  text-align: center;
}
.gameWordGuess .error {
  color: #d91f27;
}
.gameWordGuess .notice {
  color: #F8AA2D;
}
.gameWordGuess .success {
  color: #64a300;
}
.gameWordGuess .muted {
  color: #909090;
}
.gameWordGuess .finder p.error,
.gameWordGuess .finder p.notice,
.gameWordGuess .finder p.success,
.gameWordGuess .finder p.muted {
  font-weight: 600;
  font-size: 120%;
}
.gameWordGuess .finder dl {
  display: flex;
  flex-direction: column;
  text-align: center;
  margin-bottom: 20px;
}
.gameWordGuess .finder dl dd {
  font-weight: 400;
  font-size: 120%;
}
.gameWordGuess .finder dl dt {
  font-weight: 600;
  font-size: 80%;
}
.gameWordGuess .finder .expirationTimestamp {
  font-size: 120%;
}
.gameWordGuess .achievementGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 7px;
  width: 100%;
  justify-content: space-evenly;
  align-items: start;
  justify-items: center;
}
.gameWordGuess .achievementGrid .achievementEntry {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-content: center;
  align-items: center;
  height: 96px;
  gap: 7px;
}
.gameWordGuess .achievementGrid .achievementEntry.new {
  box-shadow: 0 0 2px rgba(15, 122, 229, 0.7);
}
.gameWordGuess .achievementGrid .achievementEntry.pending img {
  opacity: 0.5;
  transition: .7s;
}
.gameWordGuess .achievementGrid .achievementEntry.pending:hover img {
  opacity: 1.0;
  filter: drop-shadow(0 0 5px #1e87f0);
}
.gameWordGuess .achievementGrid .achievementEntry .icon {
  aspect-ratio: 1.0;
}
.gameWordGuess .achievementGrid .achievementEntry .icon img {
  height: 64px;
  width: 64px;
  max-width: unset;
  max-height: unset;
}
.gameWordGuess .achievementGrid .achievementEntry .label {
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 72px;
  overflow: hidden;
}
.gameWordGuess .achievementHint {
  padding: 7px;
  line-height: 1.4;
}
.gameWordGuess .achievementHint .subcaption {
  font-weight: 300;
  font-size: 90%;
}
.gameWordGuess #notificationSettingContainer {
  display: flex;
  justify-content: center;
}
.gameWordGuess #notificationSettingContainer label {
  display: inline-flex;
  align-items: center;
  background: #fff;
  margin: 20px;
  padding: 7px 21px;
  border-radius: 7px;
  line-height: 13px;
  justify-content: center;
  transition: .3s;
  gap: 7px;
}
.gameWordGuess #notificationSettingContainer label:hover {
  cursor: pointer;
  background: #f0ffff;
}
.gameWordGuess #didYouKnowContainer {
  display: flex;
  justify-content: center;
}
.gameWordGuess #didYouKnowContainer .didYouKnow {
  display: inline-flex;
  align-items: flex-start;
  background: #fff;
  margin: 20px;
  padding: 9px;
  border-radius: 7px;
  justify-content: flex-start;
  transition: .3s;
  gap: 7px;
  flex-direction: column;
  line-height: 1.5;
}
.gameWordGuess #didYouKnowContainer .didYouKnow .small {
  font-size: 80%;
  font-weight: 800;
  color: #909090;
}
.gameWordGuess .w7 .gridLetter {
  width: 20px;
  height: 20px;
}
.helpCenter .gameWordGuessDescription {
  margin: 0;
  padding: 0;
}
.helpCenter .gameWordGuessDescription ul {
  margin: 0;
  padding: 0 0 0 20px;
}
#wordGuessDetailLayer {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background: rgba(0, 0, 0, 0.2);
}
#wordGuessDetailLayer .wordGuessDetailLayer {
  overflow-y: auto;
  margin-bottom: 50px;
  background: #fff;
  border-radius: 7px;
  padding: 7px;
  margin-top: 40px;
}
#wordGuessDetailLayer .gridLetter {
  width: 20px;
  height: 20px;
  cursor: default;
}
@media screen and (min-width: 800px) {
  #wordGuessFrame {
    border-radius: 10px;
  }
  .gameWordGuess .gameList .gameEntry {
    flex-direction: row;
  }
  .gameWordGuess .gameList .gameEntry .action {
    margin-top: 0;
  }
  .gameWordGuess .gameModeBox {
    flex-direction: row;
    justify-content: space-around;
  }
  .gameWordGuess .achievementGrid {
    grid-template-columns: repeat(5, 1fr);
  }
  .gameWordGuess .achievementGrid .achievementEntry {
    height: 130px;
  }
  .gameWordGuess .achievementGrid .achievementEntry .icon img {
    height: 96px;
    width: 96px;
  }
  .gameWordGuess .achievementGrid .achievementEntry .label {
    max-width: 96px;
  }
}
@media screen and (min-width: 800px) and (min-height: 900px) {
  .gameWordGuess .gridLetter {
    font-size: 2.0rem;
  }
  .gameWordGuess .wordGrid .gridLetter {
    font-size: 4.0rem;
    width: 90px;
    height: 90px;
  }
  .gameWordGuess .wordGrid.w7 .gridLetter {
    font-size: 4.0rem;
    width: 70px;
    height: 70px;
  }
  .gameWordGuess .onScreenKeyboard {
    gap: 11px;
  }
  .gameWordGuess .onScreenKeyboard .row {
    gap: 11px;
  }
  .gameWordGuess .onScreenKeyboard .row button {
    min-height: 50px;
    font-size: 1.4rem;
  }
}
/**
 * CSS-Klassen, die sich ausschließlich auf das Layout beziehen und nichts mit Farben, Schriften & co zu tun haben,
 * und die einen allgemeinen Baukasten bilden
 *
 * Sie dient dem Zweck, schnell und ohne CSS-Anpassungen ein Layout zu erzeugen und erspart den Entwicklern, <style>-Blöcke im Template zu machen
 * Es geht hier um Maße und Abstände. Farben, Schriften, Hintergründe & co haben hier nix verloren. 
 */
.dn {
  display: none;
}
.db {
  display: block;
}
.dib {
  display: inline-block;
}
.dg {
  display: grid;
}
.dgi {
  display: inline-grid;
}
.df {
  display: flex;
}
.dif {
  display: inline-flex;
}
.fdr {
  flex-direction: row;
}
.fdc {
  flex-direction: column;
}
.fg3 {
  gap: 3px;
}
.fg5 {
  gap: 5px;
}
.fg7 {
  gap: 7px;
}
.fg9 {
  gap: 9px;
}
.fg11 {
  gap: 11px;
}
.gcs1 {
  grid-column-start: 1;
}
.gcs2 {
  grid-column-start: 2;
}
.gcs3 {
  grid-column-start: 3;
}
.gcs4 {
  grid-column-start: 4;
}
.gcs5 {
  grid-column-start: 5;
}
.gcs6 {
  grid-column-start: 6;
}
.gcs7 {
  grid-column-start: 7;
}
.gcs8 {
  grid-column-start: 8;
}
.gcs9 {
  grid-column-start: 9;
}
.gce1 {
  grid-column-end: span 1;
}
.gce2 {
  grid-column-end: span 2;
}
.gce3 {
  grid-column-end: span 3;
}
.gce4 {
  grid-column-end: span 4;
}
.gce5 {
  grid-column-end: span 5;
}
.gce6 {
  grid-column-end: span 6;
}
.gce7 {
  grid-column-end: span 7;
}
.gce8 {
  grid-column-end: span 8;
}
.gce9 {
  grid-column-end: span 9;
}
.grs1 {
  grid-row-start: 1;
}
.grs2 {
  grid-row-start: 2;
}
.grs3 {
  grid-row-start: 3;
}
.grs4 {
  grid-row-start: 4;
}
.grs5 {
  grid-row-start: 5;
}
.grs6 {
  grid-row-start: 6;
}
.grs7 {
  grid-row-start: 7;
}
.grs8 {
  grid-row-start: 8;
}
.grs9 {
  grid-row-start: 9;
}
.grs10 {
  grid-row-start: 10;
}
.grs11 {
  grid-row-start: 11;
}
.grs12 {
  grid-row-start: 12;
}
.gre1 {
  grid-row-end: span 1;
}
.gre2 {
  grid-row-end: span 2;
}
.gre3 {
  grid-row-end: span 3;
}
.gre4 {
  grid-row-end: span 4;
}
.gre5 {
  grid-row-end: span 5;
}
.gre6 {
  grid-row-end: span 6;
}
.gre7 {
  grid-row-end: span 7;
}
.gre8 {
  grid-row-end: span 8;
}
.gre9 {
  grid-row-end: span 9;
}
.jss {
  justify-self: start;
}
.jse {
  justify-self: end;
}
.jsc {
  justify-self: center;
}
.jsS {
  justify-self: stretch;
}
.ass {
  align-self: start;
}
.ase {
  align-self: end;
}
.asc {
  align-self: center;
}
.asS {
  align-self: stretch;
}
.jis {
  justify-items: start;
}
.jie {
  justify-items: end;
}
.jic {
  justify-items: center;
}
.jcs {
  justify-content: start;
}
.jce {
  justify-content: end;
}
.jic {
  justify-content: center;
}
.pd3 {
  padding: 3px;
}
.pd5 {
  padding: 5px;
}
.pd7 {
  padding: 7px;
}
.pd10 {
  padding: 10px;
}
.pd15 {
  padding: 15px;
}
.pd20 {
  padding: 20px;
}
.pd25 {
  padding: 25px;
}
.pdt3 {
  padding-top: 3px;
}
.pdt5 {
  padding-top: 5px;
}
.pdt7 {
  padding-top: 7px;
}
.pdt10 {
  padding-top: 10px;
}
.pdt15 {
  padding-top: 15px;
}
.pdt20 {
  padding-top: 20px;
}
.pdt25 {
  padding-top: 25px;
}
.m3 {
  margin: 3px;
}
.m5 {
  margin: 5px;
}
.m7 {
  margin: 7px;
}
.m10 {
  margin: 10px;
}
.m15 {
  margin: 15px;
}
.m20 {
  margin: 20px;
}
.m25 {
  margin: 25px;
}
.w100p {
  width: 100%;
}
.fwB {
  font-weight: bold;
}
.lh10 {
  line-height: 1.0;
}
.lh12 {
  line-height: 1.2;
}
.lh15 {
  line-height: 1.5;
}
.taL {
  text-align: left;
}
.taC {
  text-align: center;
}
.taR {
  text-align: right;
}
.taJ {
  text-align: justify;
}
button.clear {
  display: inline-block;
  background: none;
  border: none;
}
input.clear {
  display: inline-block;
  background: none;
  border: none;
}
.buttonRound {
  padding: 20px;
  border-radius: 50%;
}
.vsicon {
  display: inline-block;
  height: 2em;
  line-height: 2em;
}
.br50p {
  border-radius: 50%;
}
.w100p {
  width: 100%;
}
.h100p {
  height: 100%;
}
.wsnw {
  white-space: nowrap;
}
/*****************************************************************************/
.buttonGroup {
  display: inline-flex;
  vertical-align: middle;
  position: relative;
}
.buttonGroup.center {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  align-content: center;
  flex-wrap: wrap;
}
.buttonGroup.center > * {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  justify-items: center;
  gap: 7px;
}
#jpy > .siteDouble > .left > .buttonGroup,
#jpy > .buttonGroup {
  margin: 0 10px;
}
.buttonGroup > * {
  border-style: solid;
  border-width: 2px;
  border-right: none;
}
.buttonGroup > *:first-child {
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}
.buttonGroup > *:last-child {
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  border-right-width: 2px;
  border-right-style: solid;
}
.buttonGroup > * {
  cursor: pointer;
  line-height: 38px;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  display: inline-block;
  transition: 0.1s ease-in-out;
  padding: 0 30px;
}
.buttonGroup > * > img {
  max-height: 20px;
  max-width: 20px;
  width: 20px;
  height: 20px;
}
.buttonGroup.sm > * {
  padding: 0 13px;
}
.buttonGroup.xs > * {
  padding: 0 7px;
}
.input {
  padding: 7px;
  border-radius: 7px 7px;
  border-style: solid;
  border-width: 1px;
  transition: 0.3s ease-in-out;
  width: calc(100% - 14px);
}
.inputGroup {
  display: flex;
  width: 100%;
  align-content: stretch;
  justify-content: space-evenly;
  align-items: stretch;
  flex-wrap: nowrap;
  flex-direction: row;
}
.inputGroup > .input {
  border-radius: 0;
}
.inputGroup > .input:first-child {
  border-top-left-radius: 7px;
  border-bottom-left-radius: 7px;
}
.inputGroup > .input:last-child {
  border-top-right-radius: 7px;
  border-bottom-right-radius: 7px;
}
/**
 * CSS-Klassen, welche eine einfache Gestaltungsmöglichkeit geben
 *
 * Hier geht es um Farben und Schriften. Layout hat hier nix verloren.
 */
/* Style anwenden */
.textColorPrimary {
  color: #ea5800;
}
.textColorSecondary {
  color: #3ca2fe;
}
.textColorAttention {
  color: #ffe178;
}
.textColorLight {
  color: #999999;
}
.textColorLighter {
  color: #666666;
}
.textColorDark {
  color: #333333;
}
.fw100 {
  font-weight: 100;
}
.fw300 {
  font-weight: 300;
}
.fw500 {
  font-weight: 500;
}
.fw700 {
  font-weight: 700;
}
.fw900 {
  font-weight: 900;
}
/*
dmsd mag das überhaupt ned
.buttonGroup > * {background: @color_action_foreground; border-color: @color_action_background; color: @color_action_background;}
.buttonGroup > .active {background: @color_action_background; color: @color_action_foreground;}
.buttonGroup > .active:hover {background: darken(@color_action_background, @hover_darken);}
.buttonGroup > *[disabled] {cursor: not-allowed;}

 */
.buttonGroup > * {
  background: #ffffff;
  border-color: #f7cf2f;
  color: #797979;
  font-size: 90%;
  font-weight: 300;
}
.buttonGroup > .active {
  background: #ffdb39;
  color: #333;
  font-weight: 900;
}
.buttonGroup > .active:hover {
  background: #ffa225;
  animation: intoFocusLight 0.5s forwards;
}
.buttonGroup > *[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}
.form .input {
  background: #f1f1f1;
  border-color: #f1f1f1;
  color: #333333;
}
.form .input:focus {
  box-shadow: 0 0 4px 1px #3ca2de;
  border-color: #3ca2de;
}
.actionArea > *:hover {
  transition: 0.5s;
  opacity: 0.8;
}
.actionArea > *[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}
.actionArea > .buttonBlue {
  padding: 7px;
  color: #fff;
  border: 2px solid #47c6f8;
  background: #00b8ff;
  background: linear-gradient(30deg, #73d9ff 0, #01b8ff 100%);
  font-weight: 600;
  border-radius: 10px;
  display: inline-block;
  margin: 7px;
}
.actionArea > .buttonPink {
  color: #ffffff;
  cursor: pointer;
  background: #d8489e;
  background: linear-gradient(45deg, #fe559b 0%, #ff4c71 100%);
  border: 2px solid #df1632;
  border-radius: 20px;
  font-weight: 900;
  padding: 10px 15px;
  margin-bottom: 5px;
}
.actionArea > .buttonYellow {
  color: #333333;
  cursor: pointer;
  background: #ff9933;
  background: linear-gradient(45deg, #ffc51b 0%, #fee540 100%);
  border: 2px solid #eec324;
  border-radius: 20px;
  font-weight: 900;
  padding: 10px 15px;
  margin-bottom: 5px;
}
.actionArea > .buttonGrey {
  color: #333333;
  cursor: pointer;
  background: #999999;
  background: linear-gradient(45deg, #8d8d8d 0%, #c5c5c5 100%);
  border: 2px solid #898989;
  border-radius: 20px;
  font-weight: 900;
  padding: 10px 15px;
  margin-bottom: 5px;
}
.actionArea > .buttonWhite {
  color: #333333;
  cursor: pointer;
  background: #999999;
  background: linear-gradient(45deg, #ffffff 0%, #f9f9f9 100%);
  border: 2px solid #e1e1e1;
  border-radius: 20px;
  font-weight: 900;
  padding: 10px 15px;
  margin-bottom: 5px;
}
#dashboardLayer {
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.65);
  width: calc(100% - 6em);
  padding: 3em;
  padding-top: 10px;
}
#dashboardFrame {
  margin-top: 10px;
  margin-right: 10px;
}
.dashboard .clickable {
  cursor: pointer;
}
.dashboard .grid {
  display: grid;
  grid-gap: 0.5rem;
  grid-auto-flow: row dense;
  grid-template-columns: 25% 25% 25% 25%;
  max-width: 760px;
  padding-bottom: 10px;
  padding-right: .5rem;
}
.dashboard .widget.width1 {
  grid-column-end: span 1;
}
.dashboard .widget.width2 {
  grid-column-end: span 2;
}
.dashboard .widget.width3 {
  grid-column-end: span 3;
}
.dashboard .widget.width4 {
  grid-column-end: span 4;
}
.dashboard .widget.height1 {
  grid-row-end: span 1;
}
.dashboard .widget.height2 {
  grid-row-end: span 2;
}
.dashboard .widget.height3 {
  grid-row-end: span 3;
}
.dashboard .widget.height4 {
  grid-row-end: span 4;
}
@media all and (-ms-high-contrast: none) {
  .dashboard .grid .icon img {
    max-width: 40px;
  }
  .dashboard .grid .widget {
    display: block;
    width: 320px;
    margin: 10px;
    text-align: center;
    float: left;
  }
  .pinMatch img {
    max-width: 40px !important;
    max-height: 40px !important;
  }
}
.dashboard .widget {
  margin: 0 0px;
  border: 1px solid #cacaca;
  box-sizing: border-box;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  min-height: 150px;
  background: linear-gradient(130deg, #dedede 0%, #bebebe 100%);
}
.dashboard .small:hover {
  border: 1px solid #49ccff;
  transition: 0.5s;
  opacity: .8;
  animation: intoFocusSoft 0.3s forwards;
}
.dashboard .small:hover .head {
  background: linear-gradient(90deg, #a3e5ff 0%, #99e2ff 100%);
  transition: 0.5s;
}
.dashboard .widget > .head,
.dashboard .widget > .widgetWrapper > .head {
  display: flex;
  align-items: center;
  color: #484848;
  height: 3.5em;
  max-width: 100%;
}
.dashboard .widget > .head .caption,
.dashboard .widget > .widgetWrapper > .head .caption {
  flex-grow: 1;
  margin: .5em 1em;
  font-weight: 700;
  font-size: 1.3em;
  height: 1.5em;
  display: inline-flex;
  align-items: center;
  align-content: center;
  flex-wrap: nowrap;
  flex-direction: row;
}
.dashboard .widget > .head .caption > span,
.dashboard .widget > .widgetWrapper > .head .caption > span {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 30vw;
}
.dashboard .widget > .head .counter,
.dashboard .widget > .widgetWrapper > .head .counter {
  border: 1px solid #f71538;
  background: #f60039;
  background: linear-gradient(30deg, #ff8833 0, #f60039 100%);
  border-radius: 50% 50%;
  display: inline-block;
  width: 2em;
  height: 2em;
  margin: .5em;
  line-height: 2em;
  color: #fff;
  text-align: center;
  font-weight: bold;
}
.dashboard .widget > .head .closeButton {
  border: 1px solid #c7c7c7;
  background: #d5d5d5;
  cursor: pointer;
  border-radius: 15px;
  color: #333333;
  height: 2.5em;
  margin: .5em;
  line-height: 2em;
  text-align: center;
  font-weight: 300;
  padding: 2px 10px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: flex-start;
}
.dashboard .widget > .head .closeButton:hover {
  background: #ffe96e;
}
.dashboard .widget > .head .backButton,
.dashboard .widget > .widgetWrapper > .head > button {
  border: 1px solid #d5d5d5;
  background: #ffffff;
  cursor: pointer;
  border-radius: 15px;
  color: #333333;
  height: 2.5em;
  margin: .5em;
  line-height: 2em;
  text-align: center;
  font-weight: 600;
  padding: 2px 10px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: flex-start;
}
.dashboard .widget > .head .backButton:hover,
.dashboard .widget > .widgetWrapper > .head > button:hover {
  background: #ffe96e;
}
.dashboard .widget > .head .closeButton img,
.dashboard .widget .head .backButton img,
.dashboard .widget > .widgetWrapper > .head > button > img {
  width: 15px;
  margin-right: 5px;
}
.dashboard .widget > .content {
  display: grid;
  height: calc(100% - 3.5em);
}
.dashboard .widget > .body {
  background: #ffffff;
}
.dashboard .widget.attention {
  box-shadow: 0px 0px 5px 2px #49ccff;
}
.dashboard .profileImageWrapper {
  width: 480px;
  margin: auto;
  padding: 10px;
  padding-bottom: 20px;
}
.dashboard .profileImageWrapper .profileImage img {
  width: 35px;
  border-radius: 50%;
}
.dashboard .profileImageWrapper .stampBlock {
  font-size: 1.4em;
  font-weight: 300;
  padding: 10px;
}
.dashboard .profileImageWrapper .imageContainer {
  border-radius: 10px;
  border: 2px solid #e1e1e1;
}
.dashboard .abstractEntity {
  display: flex;
  align-items: center;
}
.dashboard .abstractEntity .icon {
  text-align: center;
  width: 78px;
}
.dashboard .abstractEntity .icon img {
  height: 56px;
}
.dashboard .abstractEntity .title {
  padding: 7px;
  font-weight: bold;
  font-size: 0.8em;
  color: #fff;
  background: #3d3d3d;
}
.dashboard .abstractEntity .description {
  padding: 7px 7px 0 7px;
  font-size: 0.8em;
  text-align: center;
}
.dashboard .meta {
  display: flex;
}
.dashboard .meta img {
  max-height: 100%;
  width: auto;
  max-width: none;
}
.dashboard .meta .info {
  display: flex;
  flex-direction: column;
}
.dashboard .meta .info span {
  padding: 3px;
}
.dashboard img.noBorder {
  border: none !important;
}
.dashboard .action {
  padding: 1em;
  background: #fff;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.dashboard .action button,
.dashboard .action a {
  padding: 7px;
  color: #fff;
  border: 2px solid #47c6f8;
  background: #00b8ff;
  background: linear-gradient(30deg, #73d9ff 0, #01b8ff 100%);
  font-weight: 600;
  border-radius: 10px;
  display: inline-block;
  margin: 7px;
}
.dashboard .action button.muted,
.dashboard .action a.muted {
  color: #555;
  border: 2px solid #e0e0e0;
  background: #e5e5e5;
}
.dashboard .formRow {
  display: flex;
  align-items: center;
}
.dashboard .formRow label {
  padding: 7px;
}
.dashboard .formRow input[type="text"],
.dashboard .formRow input[type="password"] {
  padding: 7px;
  flex-grow: 1;
  border-radius: 7px;
  border: 1px solid #777;
}
.dashboard .contextAction {
  margin-left: 10px;
  margin-top: 10px;
}
.dashboard .emotionWidget {
  display: block;
  padding: 15px;
  padding-bottom: 5px;
}
.dashboard .emotionWidget .emotionItem,
.dashboard .emotionList .emotionItem {
  display: block;
  float: left;
  overflow: hidden;
  height: 130px;
  text-align: left;
  margin: 0 20px 10px 0;
  text-align: center !important;
  border-radius: 5px;
  color: #565656;
  cursor: pointer;
}
.dashboard .emotionIcon {
  text-align: center;
  border: 3px solid #ebb3a0;
  border-radius: 10px;
}
.dashboard .emotionIcon img {
  border-radius: 5px;
  width: 120px;
}
.dashboard .giftList .stampOnline {
  padding: 2px 5px;
  font-weight: 600;
  font-size: 0.8rem;
}
.dashboard .giftList .stampOffline {
  padding: 2px 5px;
  font-weight: 600;
  font-size: 0.8rem;
  background: #f1f1f1;
}
.dashboard .giftList .abstractEntity .icon img {
  height: 100px;
}
.dashboard .giftList .abstractEntity .icon {
  width: 130px;
}
.dashboard .giftList .abstractEntity .description {
  text-align: left;
  padding-bottom: 10px;
}
.dashboard .emotionList {
  padding-bottom: 20px;
}
.dashboard .emotionList .emotionIcon {
  text-align: center;
  border: 3px solid #e1e1e1;
  border-radius: 10px;
  margin: 10px;
}
.dashboard .emotionList .emotionIcon img {
  border-radius: 10px;
  width: 120px;
}
.dashboard .emotionList .emotionTitle {
  font-weight: 900;
  font-size: 1.3em;
  margin: 10px;
  padding-top: 15px;
}
.dashboard .emotionList .sent img {
  width: 35px;
  border-radius: 50%;
  margin-left: 10px;
}
.dashboard .emotionList .emotionsPresented {
  color: #fe559b;
  font-weight: 700;
  text-align: center;
}
.dashboard .emotionList .typeOfEmotion {
  font-weight: 300;
  font-size: 1.0em;
  margin-left: 10px;
}
.dashboard .emotionList .redeemInfo {
  position: absolute;
  margin-left: 20px;
  margin-top: 20px;
}
.dashboard .emotionsTeaser {
  text-align: center;
  width: 140px;
  margin: auto;
  padding-bottom: 10px;
}
.dashboard .emotionsTeaser .list {
  margin: auto;
  margin-top: 40px;
}
.dashboard .emotionsTeaser .emotionIcon {
  width: 35px;
  border-radius: 25px;
  float: left;
}
.dashboard .emotionsTeaser .emotionIcon img {
  width: 35px;
  border-radius: 25px;
}
.dashboard .emotionsTeaser .redeemable {
  animation: overshotFadeIn 0.2s forwards;
  animation-delay: 0.2s;
}
.dashboard .emotionsTeaser .redeemable span {
  padding: 5px;
  background: #ffffff;
  border-radius: 10px;
  font-weight: 900;
  font-size: 120%;
  margin-top: 3px;
}
.dashboard .buttonPink {
  color: #ffffff;
  cursor: pointer;
  background: #d8489e;
  background: linear-gradient(45deg, #fe559b 0%, #ff4c71 100%);
  border: 2px solid #df1632;
  border-radius: 20px;
  font-weight: 900;
  padding: 10px 15px;
  margin-bottom: 5px;
}
.dashboard .buttonPink:hover {
  transition: 0.5s;
  opacity: 0.8;
}
.dashboard .buttonYellow {
  color: #333333;
  cursor: pointer;
  background: #ff9933;
  background: linear-gradient(45deg, #ffc51b 0%, #fee540 100%);
  border: 2px solid #eec324;
  border-radius: 20px;
  font-weight: 900;
  padding: 10px 15px;
  margin-bottom: 5px;
}
.dashboard .buttonYellow:hover {
  transition: 0.5s;
  opacity: 0.8;
}
.dashboard .buttonGrey {
  color: #333333;
  cursor: pointer;
  background: #999999;
  background: linear-gradient(45deg, #8d8d8d 0%, #c5c5c5 100%);
  border: 2px solid #898989;
  border-radius: 20px;
  font-weight: 900;
  padding: 10px 15px;
  margin-bottom: 5px;
}
.dashboard .buttonGrey:hover {
  transition: 0.5s;
  opacity: 0.8;
}
.dashboard .buttonWhite {
  color: #333333;
  cursor: pointer;
  background: #999999;
  background: linear-gradient(45deg, #ffffff 0%, #f9f9f9 100%);
  border: 2px solid #e1e1e1;
  border-radius: 20px;
  font-weight: 900;
  padding: 10px 15px;
  margin-bottom: 5px;
}
.dashboard .buttonWhite:hover {
  transition: 0.5s;
  opacity: 0.8;
}
.dashboard .buttonGrey,
.dashboard .buttonYellow,
.dashboard .buttonPink,
.dashboard .buttonWhite {
  display: inline-block;
  box-sizing: border-box;
}
.dashboard .buttonGrey img,
.dashboard .buttonYellow img,
.dashboard .buttonPink img,
.dashboard .buttonWhite img {
  max-width: 1em;
}
.dashboard button.button.clear img {
  max-width: 3em;
}
@media screen and (max-width: 600px) {
  .dashboard .profileImageWrapper {
    max-width: 360px;
  }
  .dashboard .profileImageWrapper .imageContainer img {
    max-width: 360px;
  }
  .dashboard .emotionWidget .emotionItem {
    margin: 0 5px 5px 0;
  }
  .dashboard .emotionWidget .emotionItem .emotionIcon img {
    width: 60px;
  }
  .dashboard .emotionWidget {
    padding: 10px;
  }
  .dashboard .grid {
    grid-template-columns: 50% 50%;
    margin: 3%;
  }
  .dashboard .widget.width1 {
    grid-column-end: span 1;
  }
  .dashboard .widget.width2 {
    grid-column-end: span 2;
  }
  .dashboard .widget.width3 {
    grid-column-end: span 2;
  }
  .dashboard .widget.width4 {
    grid-column-end: span 2;
  }
  .dashboard .widget > .head .backButton span {
    display: none;
  }
  .dashboard .widget > .head .caption .text {
    max-width: 120px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  .profileImageRound img {
    width: 70px;
    height: 70px;
  }
}
.widget.detailTickerList .tickerGrid {
  display: grid;
  grid-template-columns: 200px auto;
  grid-gap: 15px 25px;
  padding: 15px;
}
.widget.detailTickerList .tickerGrid:nth-child(even) {
  background: #f8f8f8;
}
.widget.detailTickerList .tickerGrid > .reference {
  align-self: start;
  justify-self: start;
  grid-column: 1;
  width: 100%;
}
.widget.detailTickerList .tickerGrid > .reference > a {
  transition: .3s;
  border-radius: 15px;
  display: inline-block;
  padding: 10px 15px;
  background: #e1e1e1;
  width: 90%;
  color: #333333;
}
.widget.detailTickerList .tickerGrid > .reference > a:hover {
  background: #f0f0f0;
}
.widget.detailTickerList .tickerGrid > .reference > a > .context {
  display: grid;
  grid-template-columns: 25px auto;
  grid-gap: 7px;
  color: #3ca2fe;
  font-size: 1.0em;
  font-weight: 600;
}
.widget.detailTickerList .tickerGrid > .reference > a > .context > img {
  justify-self: center;
  align-self: center;
  width: 20px;
}
.widget.detailTickerList .tickerGrid > .reference > a > .context > div {
  justify-self: start;
  align-self: center;
}
.widget.detailTickerList .tickerGrid > .reference > a > .descriptor {
  line-height: 1.5;
  padding-top: 5px;
  font-weight: 300;
}
.widget.detailTickerList .tickerGrid > .reference > a > .descriptor .nickname {
  display: block;
  font-weight: 600;
}
.widget.detailTickerList .tickerGrid > .detail {
  max-width: 530px;
}
.widget.detailTickerList .tickerGrid .commentList {
  display: grid;
  grid-gap: 7px;
  align-self: start;
  grid-template-columns: 35px minmax(auto, max-content);
  margin-bottom: 10px;
  line-height: 130%;
}
.widget.detailTickerList .tickerGrid .commentList .referenceProfileImage {
  align-self: start;
  justify-self: start;
  grid-column: 1;
}
.widget.detailTickerList .tickerGrid .commentList .referenceContent {
  align-self: center;
  justify-self: start;
  grid-column: 2;
}
.widget.detailTickerList .tickerGrid .commentList .referenceUser {
  padding-top: 5px;
  font-size: 1.1em;
}
.widget.detailTickerList .tickerGrid .commentList .referenceUser .nickname {
  font-weight: 600;
}
.widget.detailTickerList .tickerGrid .commentList .referenceProfileImage img {
  width: 35px;
  border-radius: 50%;
}
.widget.detailTickerList .tickerGrid .commentList .referenceTime {
  font-size: 0.9em;
  font-weight: 300;
  padding-top: 7px;
}
.widget.detailTickerList .tickerGrid .referenceEcho {
  justify-self: start;
  display: grid;
  grid-template-columns: 25px min-content auto;
  grid-gap: 7px;
  margin-top: 5px;
  margin-bottom: 20px;
}
.widget.detailTickerList .tickerGrid .referenceEcho .icon {
  align-self: center;
  justify-self: start;
  grid-column: 1;
  height: 25px;
}
.widget.detailTickerList .tickerGrid .referenceEcho .name {
  align-self: center;
  justify-self: start;
  grid-column: 2;
}
.widget.detailTickerList .tickerGrid .referenceEcho .seen {
  grid-column: 3;
}
.widget.detailTickerList .tickerGrid .referenceEcho:last-of-type {
  margin-bottom: 5px;
}
.widget.detailTickerList .tickerGrid .echoList .referenceSeen {
  text-align: right;
  margin-bottom: -20px;
}
.widget.detailTickerList .tickerGrid .referenceEchoUser {
  justify-self: start;
  display: grid;
  grid-template-columns: 25px min-content max-content;
  grid-gap: 7px;
  grid-column: 3;
}
.widget.detailTickerList .tickerGrid .referenceEchoUser .profileImage {
  align-self: center;
  justify-self: start;
  grid-column: 1;
}
.widget.detailTickerList .tickerGrid .referenceEchoUser .profileImage img {
  border-radius: 50%;
  width: 35px;
}
.widget.detailTickerList .tickerGrid .referenceEchoUser .stamp {
  align-self: center;
  justify-self: start;
  grid-column: 2;
  font-weight: 600;
  white-space: nowrap;
}
.widget.detailTickerList .tickerGrid .referenceEchoUser .timestamp {
  align-self: center;
  justify-self: start;
  grid-column: 3;
}
.widget.detailTickerList .tickerGrid .commentArea {
  grid-column: 2;
  display: flex;
  gap: 7px;
  width: 100%;
}
.widget.detailTickerList .tickerGrid .commentArea textarea {
  border: 1px solid #c0c0c0;
  padding: 10px;
  border-radius: 5px;
  font-size: 1.1em;
  box-sizing: border-box;
  height: auto;
  resize: vertical;
  width: 100%;
  min-height: 3em;
  min-width: 220px;
}
.widget.detailTickerList .tickerGrid .commentArea textarea:hover {
  border: 1px solid #49ccff;
}
.widget.detailTickerList .tickerGrid .commentArea .area {
  flex-grow: 1;
}
.widget.detailTickerList .reference .buttonWhite {
  font-weight: 300;
  font-size: 1em;
  padding: 5px 10px;
}
.widget.detailTickerList .tickerGrid .features {
  display: none !important;
}
.widget.detailTickerList .tickerGrid .actionButtonSmall {
  border: 1px solid #e8e8e8;
  display: inline;
  background: #efefef;
  color: #333;
  opacity: 0.6;
  border-radius: 15px;
  line-height: 2em;
  padding: 2px 10px;
  font-weight: 300;
  font-size: 0.9em;
}
.widget.detailTickerList .tickerGrid .actionButtonSmall:hover {
  opacity: 1.0;
  transition: 0.5s;
  animation: intoFocus 0.5s forwards;
}
.widget.detailTickerList .tickerGrid .actionButtonSmall img {
  margin-right: 5px;
  width: 20px;
}
.widget.detailTickerList .tickerGrid > .referenceSeen {
  justify-self: start;
  grid-column: 3;
}
.widget.detailTickerList .tickerGrid .referenceSeen > button {
  opacity: .7;
  transition: .4s;
}
.widget.detailTickerList .tickerGrid .referenceSeen > button:hover {
  opacity: 1;
}
.widget.detailTickerList .tickerGrid .referenceSeen > button span.mobile {
  display: none;
}
.widget.detailRubyTransactionList .actionButtonSmall {
  border: 1px solid #e8e8e8;
  display: inline;
  background: #efefef;
  color: #333;
  opacity: 0.6;
  border-radius: 15px;
  line-height: 2em;
  padding: 2px 10px;
  font-weight: 300;
  font-size: 0.9em;
}
.widget.detailRubyTransactionList .actionButtonSmall:hover {
  opacity: 1.0;
  transition: 0.5s;
  animation: intoFocus 0.5s forwards;
}
.widget.detailRubyTransactionList .actionButtonSmall img {
  margin-right: 5px;
  width: 20px;
}
.widget .genericCounter {
  display: grid;
  grid-template-rows: 50% 50%;
  justify-items: center;
  align-items: center;
  grid-gap: 7px;
}
.widget .genericCounter .amount {
  font-size: 250%;
  font-weight: 600;
  align-self: end;
}
.widget .genericCounter .subtitle {
  font-size: 90%;
  font-weight: 300;
  align-self: start;
}
.widget .genericChange {
  display: grid;
  grid-template-rows: 33% 33% 33%;
  justify-items: center;
  align-items: center;
  grid-gap: 7px;
}
.widget .genericChange .from,
.widget .genericChange .to {
  font-size: 150%;
  font-weight: 600;
}
.widget .genericChange .from {
  align-self: end;
}
.widget .genericChange .to {
  align-self: start;
}
.widget .genericChange .actionName {
  font-size: 90%;
  font-weight: 300;
}
@media screen and (max-width: 600px) {
  .widget.detailTickerList .tickerGrid {
    grid-template-columns: 100%;
  }
  .widget.detailTickerList .tickerGrid > .reference {
    justify-self: center;
    width: 100%;
  }
  .widget.detailTickerList .tickerGrid > .reference > .context {
    justify-content: center;
  }
  .widget.detailTickerList .tickerGrid .detail {
    grid-column: 1;
    grid-template-columns: calc(50% - 7px) calc(50% - 7px);
  }
  .widget.detailTickerList .tickerGrid .detail .referenceEcho {
    grid-column: 1 / span 2;
    justify-self: stretch;
    padding: 15px;
    border-radius: 15px;
  }
  .widget.detailTickerList .tickerGrid .referenceSeen {
    grid-column: 1 / span 1;
    justify-self: right;
    opacity: 1;
  }
  .widget.detailTickerList .tickerGrid .echoList .referenceSeen {
    margin-bottom: 0;
    margin-top: 2px;
  }
  .widget.detailTickerList .tickerGrid .referenceSeen button {
    border: 1px solid #e8e8e8;
    background: #efefef;
    color: #333;
    border-radius: 15px;
    line-height: 2em;
    height: 2.5em;
    padding: 2px 10px;
    font-weight: 300;
    margin-bottom: 1em;
    display: grid;
    grid-template-columns: 15px auto;
    justify-items: center;
    align-items: center;
    grid-gap: 7px;
  }
  .widget.detailTickerList .tickerGrid .referenceSeen button > span.mobile {
    display: inline;
  }
  .widget.detailTickerList .tickerGrid .commentArea {
    grid-column: 1;
  }
  .widget.detailTickerList .tickerGrid > .reference > a > .descriptor .nickname {
    display: inline;
  }
}
#dw_rank,
#dw_rankChange {
  background: url("//s.jappy.com/i/dashboard/backgroundRank.png") no-repeat;
  background-position: 20%;
  background-size: auto 100%;
  animation: backgroundSlide 30s forwards;
}
.dashboard #dw_rank .head,
.dashboard #dw_rankChange .head {
  background: none !important;
  color: #ffffff;
}
.dashboard #dw_rank .progressBarRank,
.dashboard #dw_rankChange .progressBarRank {
  margin: 10px;
}
.dashboard #dw_rank .progressBarRank .progressBackground,
.dashboard #dw_rankChange .progressBarRank .progressBackground {
  background: #d638a3;
  min-width: 150px;
}
.dashboard #dw_rank .progressBarRank .progress,
.dashboard #dw_rankChange .progressBarRank .progress {
  background: linear-gradient(90deg, #ad29ad 0%, #210a3d 100%);
  border: 1px solid #9929af;
}
.dashboard #dw_rank .progressBarRank .rankInPercent,
.dashboard #dw_rankChange .progressBarRank .rankInPercent {
  color: #ffffff;
}
.dashboard #dw_rankChange .detail {
  background: rgba(255, 255, 255, 0.75);
  border-radius: 7px;
  box-shadow: 0px 0px 5px #ffa6e5;
  padding: 7px;
  margin-right: 2em;
  margin-bottom: 2em;
}
.dashboard #dw_rankChange .experienceLog,
.dashboard #dw_rank .experienceLog {
  grid-row: 3;
  overflow: hidden;
  align-self: center;
  justify-self: center;
  max-height: 65px;
}
.dashboard #dw_rankChange .experienceLog .logEntry,
.dashboard #dw_rank .experienceLog .logEntry {
  display: grid;
  grid-template-columns: max-content auto;
  grid-gap: 7px;
  padding: 7px;
  line-height: 1.5;
  font-size: 80%;
  align-items: center;
  color: #ffffff;
  margin-bottom: 10px;
  transition-timing-function: ease-out;
}
.dashboard #dw_rankChange .experienceLog .logEntry.animated .dashboard #dw_rank .experienceLog .logEntry.animated {
  animation: scaleToZero 0.8s forwards;
}
.dashboard #dw_rankChange .experienceLog .logEntry .amount,
.dashboard #dw_rank .experienceLog .logEntry .amount {
  text-align: right;
  font-weight: 900;
  width: 70px;
  font-size: 120%;
}
.dashboard #dw_rankChange .experienceLog .logEntry .amount img,
.dashboard #dw_rank .experienceLog .logEntry .amount img {
  width: 20px;
  height: 20px;
}
.dashboard #dw_rankChange .experienceLog .logEntry .type,
.dashboard #dw_rank .experienceLog .logEntry .type {
  font-size: 120%;
  font-weight: 300;
}
.dashboard #dw_rankChange .experienceLog .logEntry .type .tsRecently,
.dashboard #dw_rank .experienceLog .logEntry .type .tsRecently {
  background: none;
  color: #ff8ff4 !important;
  font-weight: 900;
}
.dashboard #dw_ruby {
  background: url("//s.jappy.com/i/dashboard/backgroundRuby.png") no-repeat;
  background-position: center;
  background-size: cover;
}
.dashboard #dw_ruby .head {
  background: none !important;
  color: #ffffff;
}
.dashboard #dw_ruby .button {
  color: #007fbb;
  background: #d8489e;
  background: linear-gradient(45deg, #c3fdf7 0%, #66d5fb 100%);
  border: 2px solid #ffffff;
  border-radius: 20px;
  font-weight: 900;
  padding: 10px 25px;
}
.dashboard #dw_ruby .button img {
  width: 70px;
}
.dashboard #dw_ruby .info {
  text-align: center;
  background: rgba(255, 255, 255, 0.6);
  padding: 5px;
  border-radius: 10px;
  line-height: 120%;
  font-weight: 500;
  color: #2185b2;
}
.dashboard #dw_ruby .amount {
  font-size: 200%;
  font-weight: 900;
  color: #ee2f84;
}
.dashboard #dw_ruby .amount img {
  width: 25px;
}
#dw_gameWordGuess {
  background: url("//s.jappy.com/i/games/wordGuess/widgetWordGuess.png") no-repeat #212626;
  background-position: bottom;
  background-size: 150%;
  color: #ffffff;
  min-height: 250px;
}
#dw_gameWordGuess .head {
  background: none !important;
  color: #ffffff;
}
#dw_gameWordGuess .buttonPlay {
  padding: 10px;
  background: #ff2581;
  margin: auto;
  margin-top: 10px;
  border-radius: 20px;
  text-align: center;
  width: 100px;
  font-weight: 900;
  border: 5px solid #000000;
  color: #000000;
  font-size: 110%;
  background: linear-gradient(90deg, #e1e82f 0, #a5d426 100%);
}
#dw_gameWordGuess .reminder {
  padding: 15px;
  font-size: 130%;
  font-weight: 300;
}
#dw_gameWordGuess .friendGame {
  padding: 15px;
  line-height: 120%;
  vertical-align: top;
  color: #ffe12b;
  font-size: 90%;
  font-weight: 900;
}
#dw_gameWordGuess .content {
  grid-template-rows: 20% 20% auto;
  text-align: center;
}
#dw_emotionsReceived {
  background: url("//s.jappy.com/i/dashboard/backgroundEmotion.png") no-repeat;
  background-position: center;
  background-size: cover;
  border: 1px solid #da1669;
}
#dw_emotionsReceived .head {
  background: none !important;
  color: #743a27;
}
#dw_emotionsReceived .button {
  padding: 10px;
  background: #ff2581;
  margin-top: 5px;
  border-radius: 20px;
  text-align: center;
  width: 100px;
  font-weight: 900;
  border: 3px solid #da1669;
  color: #ffffff;
  font-size: 110%;
}
#dw_dailyBonusRouletteEligible {
  background: linear-gradient(120deg, #BCFFDB 0, #94f5ff 100%);
  border: 1px solid #8ddcdc;
}
#dw_dailyBonusRouletteEligible .head {
  background: none !important;
  color: #3aa8a2;
}
#dw_dailyBonusRouletteEligible:hover .head {
  background: none !important;
}
#dw_dailyBonusRouletteRedeemed {
  border: 1px solid #c3c3c3;
  background: linear-gradient(130deg, #d6d6d6 0%, #bebebe 100%);
}
#dw_dailyBonusRouletteRedeemed .head {
  background: none !important;
  color: #484848;
}
#dw_collectableFinder {
  background: linear-gradient(130deg, #dedede 0%, #bebebe 100%);
  border: 1px solid #c0c0c0;
}
#dw_collectableFinder .head {
  background: none !important;
  color: #858585;
}
#dw_collectableFinder .button {
  color: #ffffff;
  background: #ff4675;
  background: linear-gradient(45deg, #ff00b3 0%, #ff4675 100%);
  border: 2px solid #e31599;
  border-radius: 20px;
  font-weight: 900;
  padding: 10px 25px;
}
#dw_collectableFinder .button img {
  width: 70px;
}
#dw_collectableFinderResult {
  color: #fff;
  background: linear-gradient(90deg, #484848 0%, #333333 100%);
  border: 1px solid #c1c1c1;
}
#dw_collectableFinderResult .head {
  background: none !important;
  color: #ffffff;
}
#dw_collectableFinderResult .list {
  position: relative;
  min-height: 150px;
}
#dw_collectableFinderResult .list img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 4px solid #333;
}
#dw_collectableFinderResult .list img:nth-child(1) {
  position: absolute;
  top: 40px;
  left: 20px;
  z-index: 4;
}
#dw_collectableFinderResult .list img:nth-child(2) {
  position: absolute;
  top: 10px;
  left: 80px;
  z-index: 3;
}
#dw_collectableFinderResult .list img:nth-child(3) {
  position: absolute;
  top: 40px;
  left: 160px;
  z-index: 2;
}
#dw_collectableFinderResult .list img:nth-child(4) {
  position: absolute;
  top: 20px;
  left: 240px;
  z-index: 1;
}
.dashboard .notificationAttention {
  background: #ffe178;
  color: #916a2f;
  margin: 7px;
  padding: 5px;
  border-radius: 5px;
  font-weight: 700;
}
#dw_profileImageCarousel {
  background: linear-gradient(45deg, #fb427f 0%, #db1a59 100%);
  border: 1px solid #b4b4b4;
}
#dw_profileImageCarousel .imageContainer {
  width: 150px;
  margin: auto;
}
#dw_profileVisitors {
  display: grid;
  grid-template-rows: 42px auto;
  grid-template-columns: 100%;
  background: #fff;
}
#dw_profileVisitors .head {
  background: none !important;
  color: #333 !important;
  grid-column: 1 / span 1;
  grid-row: 1 / span 2;
  z-index: 2;
}
#dw_profileVisitors .visitor {
  display: grid;
  grid-template-rows: 42px 160px auto 30px ;
  grid-template-columns: 25% 25% 25% 25%;
  overflow: hidden;
  align-content: start;
  cursor: pointer;
  background: #ffffff;
  border-radius: 20px;
  padding: 5px;
  grid-row: 1 / span 2;
  grid-column: 1 / span 1;
}
#dw_profileVisitors .visitor .profileImage {
  overflow: hidden;
  grid-column: 1 / span 4;
  grid-row: 2;
  justify-self: center;
  border-radius: 10px;
}
#dw_profileVisitors .visitor .profileImage img {
  width: 160px;
  height: 160px;
  border-radius: 10px;
}
#dw_profileVisitors .visitor .stamp {
  font-size: 120%;
  font-weight: 500;
  grid-row: 4;
  grid-column: 1 / span 4;
  z-index: 2;
  padding-top: 10px;
  padding-left: 10px;
  color: #525252;
}
#dw_profileVisitors .visitor .stampOffline {
  border-radius: 10px;
  background: #f93;
  padding: 7px;
  color: #ffffff;
}
#dw_profileVisitors .visitor .stampOnline {
  border-radius: 10px;
  background: #80cb00;
  padding: 7px;
  color: #ffffff;
}
#dw_profileVisitors .visitor .pinMatch {
  grid-row: 3;
  padding: 3px;
  z-index: 2;
  margin-top: -45px;
}
#dw_profileVisitors .visitor .pinMatch > div {
  padding: 3px;
  border-radius: 7px;
  overflow: hidden;
  box-shadow: 0px 0px 3px 2px #ffe178;
}
#dw_profileVisitors .visitor .pinMatch > div > img {
  width: 100%;
  height: 100%;
}
#dw_profileVisitors .visitor .pinMatch0 {
  grid-column: 1;
}
#dw_profileVisitors .visitor .pinMatch1 {
  grid-column: 2;
}
#dw_profileVisitors .visitor .pinMatch2 {
  grid-column: 3;
}
#dw_profileVisitors .visitor .pinMatch3 {
  grid-column: 4;
}
#dw_profileVisitors .visitor .gender {
  grid-row: 1;
  grid-column: 3;
  align-self: center;
  justify-self: end;
}
#dw_profileVisitors .visitor .gender img {
  grid-column: 1;
  width: 25px;
}
#dw_profileVisitors .visitor .age {
  grid-row: 1;
  grid-column: 4;
  padding: 5px;
  font-size: 120%;
  font-weight: 900;
  align-self: center;
  text-align: center;
  color: #49ccff;
}
#dw_profileVisitors .visitor.locked {
  grid-template-rows: 42px 160px auto;
}
#dw_profileVisitors .visitor.locked .profileImage img {
  -webkit-filter: blur(8px);
  filter: blur(8px);
}
#dw_userRecommendation .content {
  display: grid;
  grid-template-rows: 42px 160px auto ;
  grid-template-columns: 25% 25% 25% 25%;
  overflow: hidden;
  align-content: start;
  cursor: pointer;
  border-radius: 20px;
  padding: 5px;
}
#dw_userRecommendation .content .profileImage {
  overflow: hidden;
  grid-column: 1 / span 4;
  grid-row: 2;
  justify-self: center;
  border-radius: 10px;
}
#dw_userRecommendation .content .profileImage img {
  width: 160px;
  height: 160px;
  border-radius: 10px;
}
#dw_userRecommendation .content .stamp {
  font-size: 120%;
  font-weight: 500;
  grid-row: 3;
  grid-column: 1 / span 4;
  z-index: 2;
  padding-top: 10px;
  padding-left: 10px;
  color: #525252;
}
#dw_userRecommendation .content .stampOffline {
  border-radius: 10px;
  background: #f93;
  padding: 7px;
  color: #ffffff;
}
#dw_userRecommendation .content .stampOnline {
  border-radius: 10px;
  background: #80cb00;
  padding: 7px;
  color: #ffffff;
}
#dw_userRecommendation .content .pinMatch {
  grid-row: 3;
  padding: 3px;
  z-index: 2;
  margin-top: -45px;
}
#dw_userRecommendation .content .pinMatch > div {
  padding: 3px;
  border-radius: 7px;
  overflow: hidden;
  box-shadow: 0px 0px 3px 2px #ffe178;
}
#dw_userRecommendation .content .pinMatch > div > img {
  width: 100%;
  height: 100%;
}
#dw_userRecommendation .content .pinMatch0 {
  grid-column: 1;
}
#dw_userRecommendation .content .pinMatch1 {
  grid-column: 2;
}
#dw_userRecommendation .content .pinMatch2 {
  grid-column: 3;
}
#dw_userRecommendation .content .pinMatch3 {
  grid-column: 4;
}
#dw_userRecommendation .content .gender {
  grid-row: 1;
  grid-column: 3;
  align-self: center;
  justify-self: end;
}
#dw_userRecommendation .content .gender img {
  grid-column: 1;
  width: 25px;
}
#dw_userRecommendation .content .age {
  grid-row: 1;
  grid-column: 4;
  padding: 5px;
  font-size: 120%;
  font-weight: 900;
  align-self: center;
  text-align: center;
  color: #49ccff;
}
#dw_userRecommendation .content .timer {
  grid-row: 3;
  grid-column: 4;
  padding: 5px;
}
#dw_userRecommendation .content .timer img {
  width: 24px;
}
#dw_credits {
  background: linear-gradient(45deg, #ffe567 0%, #ffb22c 100%);
  border: 1px solid #fbb537;
}
#dw_credits .head {
  background: none !important;
  color: #825500;
}
#dw_giftsReceived {
  background: linear-gradient(130deg, #dedede 0%, #bebebe 100%);
  border: 1px solid #c0c0c0;
}
#dw_giftsReceived .head {
  background: none !important;
  color: #858585;
}
#dw_giftsReceived .new {
  text-align: right;
  position: absolute;
  margin-top: -120px;
  animation: overshotFadeIn 0.4s forwards;
  animation-delay: 0.5s;
}
#dw_pinUpdated {
  background: linear-gradient(120deg, #BCFFDB 0, #94f5ff 100%);
  border: 1px solid #8ddcdc;
}
#dw_pinUpdated .head {
  background: none !important;
  color: #3aa8a2;
}
#dw_pinUpdated .userInfo a img {
  width: 35px;
  border-radius: 50%;
}
#dw_pinUpdated .head .counter {
  border: 1px solid #96f1f2;
  background: #fff !important;
  color: #4cb0b3;
}
#dw_profileImageFriends .simpleStamp {
  font-size: 1.3em;
  font-weight: 200;
}
#dw_tickerComment {
  border: 1px solid #e3e035;
  background: linear-gradient(45deg, #fffd88 0, #fffb2e 100%) !important;
}
#dw_tickerComment .head {
  background: none !important;
  color: #818181;
}
#dw_tickerComment .head .caption {
  font-weight: 500;
}
#dw_tickerEcho {
  border: 1px solid #ecbd19;
  background: linear-gradient(45deg, #ffd544 0%, #ffcd1f 100%);
}
#dw_tickerEcho .head {
  background: none !important;
  color: #9d8019;
}
#dw_tickerEcho .echoUserImage {
  position: absolute;
  margin-top: -50px;
  margin-left: 60px;
}
#dw_tickerEcho .echoUserImage img {
  border-radius: 50%;
  width: 60px;
}
#dw_chatRequest {
  background: linear-gradient(45deg, #ffacf0 0%, #ff48ba 100%);
  border: 1px solid #ff53c0;
}
#dw_chatRequest .head {
  background: none !important;
  color: #c342a6;
}
#dw_chatRequest .head .counter {
  background: #ffffff !important;
  color: #ff3bb6;
  border: 1px solid #ff9ee9;
}
#dw_news {
  background: linear-gradient(45deg, #545454 0, #222435 100%);
  border: 1px solid #191919;
  color: #fff;
}
#dw_news .head {
  margin: auto;
  background: none;
  color: #fff;
}
#dw_news .head .counter {
  border: 1px solid #4f505c;
  background: #ffffff;
  color: #333333;
}
#dw_questIntroduction {
  border: 1px solid #ecbd19;
  background: linear-gradient(45deg, #ffd544 0%, #ffcd1f 100%);
  color: #333333;
}
#dw_questIntroduction .head {
  background: none !important;
  color: #9d8019;
}
#dw_questIntroduction .head button {
  border: 1px solid #efc224;
  background: #ffd544;
}
#dw_questIntroduction .head button:hover {
  transition: 0.5s;
  animation: intoFocusLight 0.5s forwards;
}
#dw_questIntroduction .head button img {
  margin-right: 0;
}
#dw_questIntroduction .text {
  font-size: 1.1em;
  font-weight: 300;
  color: #725903;
  line-height: 150%;
  padding: 15px;
  text-align: center;
}
#dw_questIntroduction .buttons {
  margin-top: 15px;
  padding-bottom: 10px;
}
#dw_questIntroduction .buttons button:hover {
  transition: 0.5s;
  animation: intoFocusLight 0.5s forwards;
}
#dw_questIntroduction .text p {
  padding: 0 30px 10px 30px;
}
#dw_questIntroduction .text p a {
  color: #00d3e9;
  font-weight: 900;
}
#dw_achievementReceived {
  background: linear-gradient(130deg, #505050 0, #363636 100%);
  background: url('//s.jappy.com/i/dashboard/celebrateAchievement.gif');
  background-size: cover;
  border: 1px solid #383838;
}
#dw_achievementReceived .head {
  color: #a7a7a7;
}
#dw_achievementReceived .head .counter {
  border: 1px solid #5a5a5a;
  background: #696969;
}
#dw_achievementReceived:hover .head {
  background: none !important;
}
#dw_gameBettingGame {
  background: url("//s.jappy.com/i/games/bettingGame/bg.png") no-repeat #73a133 top left;
  background-size: cover;
  color: #fff;
  font-family: 'Luckiest Guy', cursive;
}
#dw_gameBettingGame .head {
  color: #fff;
}
#dw_gameBettingGame:hover .head {
  background: none !important;
}
#dw_gameBettingGame .content .match {
  display: grid;
  justify-items: center;
  padding: 7px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 20px;
  margin: 6px;
}
#dw_gameBettingGame .content .match .league {
  font-size: 80%;
}
#dw_gameBettingGame .content .match .who {
  text-align: center;
}
#dw_gameBettingGame .content .match .who .team {
  font-size: 140%;
  display: block;
  padding: 9px;
}
#dw_gameBettingGame .content .match .what {
  font-weight: 400;
  font-size: 120%;
  padding: 7px;
}
#dw_gameBettingGame .content .match .attention {
  font-weight: 400;
  font-size: 140%;
  padding: 7px;
  color: #ee2f84;
  -webkit-text-stroke: .5px #fff;
  -webkit-text-fill-color: #ee2f84;
}
#dw_gameBettingGame .content .match .when {
  font-size: 90%;
}
#dw_gameBettingGame .content table {
  color: #fff;
  font-family: 'Luckiest Guy', cursive;
  font-size: 140%;
}
#dw_gameBettingGame .content table th {
  color: #fff;
  font-weight: 600;
}
#dw_gameBettingGame .content .newMatches {
  color: #fff;
  font-weight: 400;
  font-size: 150%;
  margin: 7px;
  text-align: center;
}
#dw_gameBettingGameUpcoming {
  background: url("//s.jappy.com/i/games/bettingGame/bg.png") no-repeat #73a133 top left;
  background-size: cover;
  color: #fff;
  font-family: 'Luckiest Guy', cursive;
}
#dw_gameBettingGameUpcoming .head {
  color: #fff;
}
#dw_gameBettingGameUpcoming:hover .head {
  background: none !important;
}
#dw_gameBettingGameUpcoming .content {
  justify-items: center;
  align-items: center;
  justify-content: center;
}
#dw_gameBettingGameUpcoming .content span.title {
  font-size: 150%;
  font-weight: 700;
}
#dw_gameBettingGameUpcoming .content span.subtitle {
  font-size: 80%;
  font-weight: 400;
}
#dw_tickerSubscriberAdded {
  background: #fff;
}
#dw_tickerSubscriberAdded .head {
  background: none !important;
  color: #333 !important;
  z-index: 2;
}
#dw_tickerSubscriberAdded .fan {
  display: grid;
  grid-template-rows: 42px 160px auto 30px ;
  grid-template-columns: 25% 25% 25% 25%;
  overflow: hidden;
  align-content: start;
  cursor: pointer;
  background: #ffffff;
  border-radius: 20px;
  padding: 5px;
  grid-row: 2;
  grid-column: 1 / span 1;
}
#dw_tickerSubscriberAdded .fan .profileImage {
  overflow: hidden;
  grid-column: 1 / span 4;
  grid-row: 2;
  justify-self: center;
  border-radius: 10px;
}
#dw_tickerSubscriberAdded .fan .profileImage img {
  width: 160px;
  height: 160px;
  border-radius: 10px;
}
#dw_tickerSubscriberAdded .fan .stamp {
  font-size: 120%;
  font-weight: 500;
  grid-row: 4;
  grid-column: 1 / span 4;
  z-index: 2;
  padding-top: 10px;
  padding-left: 10px;
  color: #525252;
}
#dw_tickerSubscriberAdded .fan .stampOffline {
  border-radius: 10px;
  background: #f93;
  padding: 7px;
  color: #ffffff;
}
#dw_tickerSubscriberAdded .fan .stampOnline {
  border-radius: 10px;
  background: #80cb00;
  padding: 7px;
  color: #ffffff;
}
#dw_tickerSubscriberAdded .fan .pinMatch {
  grid-row: 3;
  padding: 3px;
  z-index: 2;
  margin-top: -45px;
}
#dw_tickerSubscriberAdded .fan .pinMatch > div {
  padding: 3px;
  border-radius: 7px;
  overflow: hidden;
  box-shadow: 0px 0px 3px 2px #ffe178;
}
#dw_tickerSubscriberAdded .fan .pinMatch > div > img {
  width: 100%;
  height: 100%;
}
#dw_tickerSubscriberAdded .fan .pinMatch0 {
  grid-column: 1;
}
#dw_tickerSubscriberAdded .fan .pinMatch1 {
  grid-column: 2;
}
#dw_tickerSubscriberAdded .fan .pinMatch2 {
  grid-column: 3;
}
#dw_tickerSubscriberAdded .fan .pinMatch3 {
  grid-column: 4;
}
#dw_tickerSubscriberAdded .fan .gender {
  grid-row: 1;
  grid-column: 3;
  align-self: center;
  justify-self: end;
}
#dw_tickerSubscriberAdded .fan .gender img {
  grid-column: 1;
  width: 25px;
}
#dw_tickerSubscriberAdded .fan .age {
  grid-row: 1;
  grid-column: 4;
  padding: 5px;
  font-size: 120%;
  font-weight: 900;
  align-self: center;
  text-align: center;
  color: #49ccff;
}
#dw_gameCalendar {
  background-size: auto 150%;
  animation: backgroundSLide 45s forwards;
}
#dw_gameCalendar .head {
  color: #F2F5CC;
  font-size: 100%;
  text-align: center;
}
#dw_gameCalendar .head .caption {
  text-shadow: 1px 1px 2px #000;
}
#dw_gameCalendar:hover .head {
  background: none !important;
}
#dw_gameBreakChallenge {
  background: url('//vs.jappy.com/game/jbreak/worldEnvironment/1e12jqcq.jpg@q5h8r9.default.ddbde8') no-repeat center;
  background-size: cover;
}
#dw_gameBreakChallenge:hover .head {
  background: none;
}
#dw_gameBreakChallenge .head .caption {
  color: #fff;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}
#dw_gameBreakChallenge .content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 7px;
  padding: 7px;
}
#dw_gameBreakChallenge .content.short {
  grid-template-columns: repeat(1, 1fr);
}
#dw_gameBreakChallenge #resultEasy {
  grid-row: 1 / span 1;
  grid-column: 1 / span 1;
}
#dw_gameBreakChallenge #resultMedium {
  grid-row: 2 / span 1;
  grid-column: 1 / span 1;
}
#dw_gameBreakChallenge #resultHard {
  grid-row: 3 / span 1;
  grid-column: 1 / span 1;
}
#dw_gameBreakChallenge #reminderEasy {
  grid-row: 1 / span 1;
  grid-column: 2 / span 1;
}
#dw_gameBreakChallenge #reminderMedium {
  grid-row: 2 / span 1;
  grid-column: 2 / span 1;
}
#dw_gameBreakChallenge #reminderHard {
  grid-row: 3 / span 1;
  grid-column: 2 / span 1;
}
#dw_gameBreakChallenge .content.short #reminderEasy {
  grid-column: 1 / span 1;
}
#dw_gameBreakChallenge .content.short #reminderMedium {
  grid-column: 1 / span 1;
}
#dw_gameBreakChallenge .content.short #reminderHard {
  grid-column: 1 / span 1;
}
#dw_gameBreakChallenge .gameResult,
#dw_gameBreakChallenge .gameReminder {
  padding: 7px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 7px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
#dw_gameBreakChallenge .gameResult {
  height: 63px;
}
#dw_gameBreakChallenge .gameResult .placement {
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  font-weight: 900;
}
#dw_gameBreakChallenge .gameResult .placement img {
  height: 2em;
}
#dw_gameBreakChallenge .gameReminder {
  height: 63px;
}
#dw_gameBreakChallenge #resultUpcoming {
  grid-row: 1 / span 3;
  grid-column: 1 / span 1;
  text-align: center;
  padding: 7px;
}
#dw_gameBreakChallenge .reminder {
  display: flex;
  height: 2em;
  flex-direction: row;
  align-items: center;
  align-content: stretch;
  justify-content: flex-start;
  gap: 7px;
  padding: 3px;
  background: linear-gradient(0deg, #FF3B33 0, #FF7536 100%);
  border: 3px solid #ffb134;
  box-shadow: 0 0 2px #ff7a17;
  border-radius: 7px;
  color: #fff;
  font-weight: 800;
}
#dw_gameBreakChallenge .reminder img {
  height: 2em;
}
#dw_gameBreakChallenge .state {
  display: flex;
  height: 2em;
  flex-direction: row;
  align-items: center;
  align-content: stretch;
  justify-content: space-evenly;
  gap: 7px;
  padding: 3px;
  color: #fff;
  font-weight: 800;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  text-align: center;
}
#dw_gameBreakChallenge .state .mini {
  font-size: 0.7em;
  padding: 3px;
}
#dw_gameBreakChallenge .label {
  font-size: 0.8em;
  font-weight: 900;
  color: #fff;
  margin: 3px 0;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  justify-self: start !important;
  align-self: start;
}
#dw_gameBreakChallenge .easy {
  background: linear-gradient(0deg, #9CE500 0, #A7FF33 100%);
}
#dw_gameBreakChallenge .medium {
  background: linear-gradient(0deg, #ff9933 0, #ffd237 100%);
}
#dw_gameBreakChallenge .hard {
  background: linear-gradient(0deg, #FF3B33 0, #FF7536 100%);
}
#dw_newsChangelog,
.dashboard .newsChangelogDetail {
  background: linear-gradient(130deg, #505050 0, #363636 100%);
}
#dw_newsChangelog:hover .head,
.newsChangelogDetail:hover .head {
  background: none;
}
#dw_newsChangelog .head .caption,
.newsChangelogDetail .head .caption {
  color: #fff;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}
#dw_newsChangelog .content .text {
  background: #fff;
  color: #555;
  margin: 7px;
  border-radius: 7px;
  padding: 9px;
}
#dw_newsChangelog .content .subcaption,
.newsChangelogDetail .changeLogEntry .subcaption {
  font-weight: 900;
  font-size: 120%;
  color: #000;
  line-height: 1.3;
  margin-bottom: 5px;
  display: flex;
  align-content: center;
  align-items: baseline;
  justify-content: flex-start;
}
#dw_newsChangelog .content .summary,
.newsChangelogDetail .changeLogEntry .summary {
  font-size: 110%;
  line-height: 1.3;
  margin-bottom: 5px;
}
#dw_newsChangelog .content .detailChanges,
.newsChangelogDetail .changeLogEntry .detailChanges {
  margin-bottom: 5px;
}
#dw_newsChangelog .content .detailChanges li,
.newsChangelogDetail .changeLogEntry .detailChanges li {
  line-height: 1.3;
  margin-bottom: 5px;
}
#dw_newsChangelog .content .detailChanges li.more,
.newsChangelogDetail .changeLogEntry .detailChanges li.more {
  list-style: none;
}
.newsChangelogDetail .changeLogEntry {
  padding: 5px 10px;
}
#dw_newsUpcoming:hover .head,
.newsUpcomingDetail:hover .head {
  background: none;
}
#dw_newsUpcoming .content .text {
  background: #fff;
  color: #555;
  margin: 7px;
  border-radius: 7px;
  padding: 9px;
}
#dw_newsUpcoming .content .subcaption,
.newsUpcomingDetail .detailEntry .subcaption,
.newsUpcomingDetail .detailEntry .subcaption a {
  font-weight: 900;
  font-size: 120%;
  color: #000;
  line-height: 1.3;
  margin-bottom: 5px;
  display: flex;
  align-content: center;
  align-items: baseline;
  justify-content: flex-start;
}
#dw_newsUpcoming .content .summary {
  font-size: 90%;
  line-height: 1.3;
  margin-bottom: 5px;
}
.newsUpcomingDetail .detailEntry {
  padding: 13px 17px 20px 17px;
}
.newsUpcomingDetail .detailEntry .summary {
  line-height: 1.3;
  margin-bottom: 5px;
}
.newsUpcomingDetail .detailEntry .summary p {
  line-height: 1.7;
  margin-top: 0.5em;
  margin-bottom: 0.75em;
}
#dw_giftPropagation,
.dashboard .giftPropagationDetail {
  background: linear-gradient(45deg, #ffc51b 0%, #fee540 100%);
}
#dw_giftPropagation:hover .head,
.giftPropagationDetail:hover .head {
  background: none;
}
#dw_giftPropagation .head .caption,
.giftPropagationDetail .head .caption {
  color: #825500;
}
#dw_giftPropagation .content,
.giftPropagationDetail .body {
  background: #fff;
  margin: 7px;
  border-radius: 5px;
  padding: 5px;
}
#dw_giftPropagation .content p,
.giftPropagationDetail .body p {
  line-height: 1.5;
  margin-bottom: 2em;
}
#dw_giftPropagation .content {
  display: grid;
  height: calc(100% - 3.5em - 24px);
  justify-items: center;
  align-items: center;
  justify-content: center;
  align-content: center;
}
.giftPropagationDetail .body .entryList {
  display: grid;
  justify-items: center;
  align-items: center;
  justify-content: center;
  align-content: center;
}
#dw_giftPropagation .content.entryCount1 {
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: repeat(1, 1fr);
}
#dw_giftPropagation .content.entryCount2 {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(1, 1fr);
}
#dw_giftPropagation .content.entryCount3,
#dw_giftPropagation .content.entryCount4 {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
}
#dw_giftPropagation .giftVariantEntry,
.giftPropagationDetail .giftVariantEntry {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  gap: 3px;
}
#dw_giftPropagation .giftVariantEntry .icon img,
.giftPropagationDetail .giftVariantEntry .icon img {
  display: inline-block;
  background-size: auto 90%;
  width: 100%;
  height: 120px;
  background-position: center;
  background-repeat: no-repeat;
}
#dw_giftPropagation .giftVariantEntry .caption,
.giftPropagationDetail .giftVariantEntry .caption {
  font-weight: 700;
  color: #333;
  font-size: 120%;
}
#dw_giftPropagation .giftVariantEntry .price,
.giftPropagationDetail .giftVariantEntry .price {
  display: flex;
  font-size: 70%;
  justify-items: center;
  align-items: center;
  align-content: center;
  flex-direction: row;
  gap: 4px;
  color: #919191;
}
#dw_giftPropagation .giftVariantEntry .price img,
.giftPropagationDetail .giftVariantEntry .price img {
  height: 2em;
}
#dw_giftPropagation .giftVariantEntry .actionSet,
.giftPropagationDetail .giftVariantEntry .actionSet {
  display: flex;
  justify-items: center;
  align-items: center;
  align-content: center;
  flex-direction: row;
  gap: 4px;
  padding: 13px;
}
#dw_giftPropagation .moreEntry {
  display: flex;
  justify-items: center;
  align-items: center;
  align-content: center;
  font-size: 300%;
  font-weight: 300;
  color: #ff9933;
}
.giftPropagationDetail .body .entryList {
  grid-template-columns: repeat(2, 1fr);
}
@media screen and (min-width: 1020px) {
  .giftPropagationDetail .body .entryList {
    grid-template-columns: repeat(4, 1fr);
  }
}
#dw_giftSetPropagation,
.dashboard .giftSetPropagationDetail {
  background: linear-gradient(265deg, #2e0d4a 0%, #0d0526 100%);
}
#dw_giftSetPropagation:hover .head,
.giftSetPropagationDetail:hover .head {
  background: none;
}
#dw_giftSetPropagation .head .caption,
.giftSetPropagationDetail .head .caption {
  color: #fff;
}
#dw_giftSetPropagation .content,
.giftSetPropagationDetail .body {
  background: #fff;
  margin: 7px;
  border-radius: 5px;
  padding: 5px;
}
#dw_giftSetPropagation .content p,
.giftSetPropagationDetail .body p {
  line-height: 1.5;
  margin-bottom: 2em;
}
#dw_giftSetPropagation .content {
  display: grid;
  height: calc(100% - 3.5em - 24px);
  justify-items: center;
  align-items: center;
  justify-content: center;
  align-content: center;
}
.giftSetPropagationDetail .body .entryList {
  display: grid;
  justify-items: center;
  align-items: center;
  justify-content: center;
  align-content: center;
}
#dw_giftSetPropagation .content.entryCount1 {
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: repeat(1, 1fr);
}
#dw_giftSetPropagation .content.entryCount2 {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(1, 1fr);
}
#dw_giftSetPropagation .content.entryCount3,
#dw_giftSetPropagation .content.entryCount4 {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
}
#dw_giftSetPropagation .giftSetEntry,
.giftSetPropagationDetail .giftSetEntry {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  gap: 3px;
}
#dw_giftSetPropagation .giftSetEntry .icon img,
.giftSetPropagationDetail .giftSetEntry .icon img {
  display: inline-block;
  background-size: auto 90%;
  width: 100%;
  height: 120px;
  background-position: center;
  background-repeat: no-repeat;
}
#dw_giftSetPropagation .giftSetEntry .caption,
.giftSetPropagationDetail .giftSetEntry .caption {
  font-weight: 700;
  color: #333;
  font-size: 120%;
}
#dw_giftSetPropagation .moreEntry {
  display: flex;
  justify-items: center;
  align-items: center;
  align-content: center;
  font-size: 300%;
  font-weight: 300;
  color: #ff4c71;
}
.giftSetPropagationDetail .body .entryList {
  grid-template-columns: repeat(2, 1fr);
}
@media screen and (min-width: 1020px) {
  .giftSetPropagationDetail .body .entryList {
    grid-template-columns: repeat(4, 1fr);
  }
}
#dw_emotionLegacyPropagation,
.dashboard .emotionLegacyPropagationDetail {
  background: linear-gradient(31deg, #57c9fe 0%, #fed86e 100%);
}
#dw_emotionLegacyPropagation:hover .head,
.emotionLegacyPropagationDetail:hover .head {
  background: none;
}
#dw_emotionLegacyPropagation .head .caption,
.emotionLegacyPropagationDetail .head .caption {
  color: #5f4807;
}
#dw_emotionLegacyPropagation .content,
.emotionLegacyPropagationDetail .body {
  background: #fff;
  margin: 7px;
  border-radius: 5px;
  padding: 5px;
}
#dw_emotionLegacyPropagation .content p,
.emotionLegacyPropagationDetail .body p {
  line-height: 1.5;
  margin-bottom: 2em;
}
#dw_emotionLegacyPropagation .content {
  display: grid;
  height: calc(100% - 3.5em - 24px);
  justify-items: center;
  align-items: center;
  justify-content: center;
  align-content: center;
}
.emotionLegacyPropagationDetail .body .entryList {
  display: grid;
  justify-items: center;
  align-items: center;
  justify-content: center;
  align-content: center;
}
#dw_emotionLegacyPropagation .content.entryCount1 {
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: repeat(1, 1fr);
}
#dw_emotionLegacyPropagation .content.entryCount2 {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(1, 1fr);
}
#dw_emotionLegacyPropagation .content.entryCount3,
#dw_emotionLegacyPropagation .content.entryCount4 {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
}
#dw_emotionLegacyPropagation .emotionLegacyEntry,
.emotionLegacyPropagationDetail .emotionLegacyEntry {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  gap: 3px;
}
#dw_emotionLegacyPropagation .emotionLegacyEntry .icon img,
.emotionLegacyPropagationDetail .emotionLegacyEntry .icon img {
  display: inline-block;
  background-size: auto 90%;
  width: 100%;
  height: 120px;
  background-position: center;
  background-repeat: no-repeat;
}
#dw_emotionLegacyPropagation .emotionLegacyEntry .price,
.emotionLegacyPropagationDetail .emotionLegacyEntry .price {
  display: flex;
  font-size: 70%;
  justify-items: center;
  align-items: center;
  align-content: center;
  flex-direction: row;
  gap: 4px;
  color: #919191;
}
#dw_emotionLegacyPropagation .emotionLegacyEntry .price img,
.emotionLegacyPropagationDetail .emotionLegacyEntry .price img {
  height: 2em;
}
#dw_emotionLegacyPropagation .emotionLegacyEntry .caption,
.emotionLegacyPropagationDetail .emotionLegacyEntry .caption {
  font-weight: 700;
  color: #333;
  font-size: 120%;
}
#dw_emotionLegacyPropagation .emotionLegacyEntry .category,
.emotionLegacyPropagationDetail .emotionLegacyEntry .category {
  font-weight: 700;
  color: #555;
  font-size: 80%;
}
#dw_emotionLegacyPropagation .moreEntry {
  display: flex;
  justify-items: center;
  align-items: center;
  align-content: center;
  font-size: 300%;
  font-weight: 300;
  color: #57c9fe;
}
.emotionLegacyPropagationDetail .body .entryList {
  grid-template-columns: repeat(2, 1fr);
}
@media screen and (min-width: 1020px) {
  .emotionLegacyPropagationDetail .body .entryList {
    grid-template-columns: repeat(4, 1fr);
  }
}
#dw_pinPropagation,
.dashboard .pinPropagationDetail {
  background: linear-gradient(120deg, #6cd7ff 0, #2a9aff 100%);
}
#dw_pinPropagation:hover .head,
.pinPropagationDetail:hover .head {
  background: none;
}
#dw_pinPropagation .head .caption,
.pinPropagationDetail .head .caption {
  color: #16548b;
}
#dw_pinPropagation .content,
.pinPropagationDetail .body {
  background: #fff;
  margin: 7px;
  border-radius: 5px;
  padding: 5px;
}
#dw_pinPropagation .content p,
.pinPropagationDetail .body p {
  line-height: 1.5;
  margin-bottom: 2em;
}
#dw_pinPropagation .content {
  display: grid;
  height: calc(100% - 3.5em - 24px);
  justify-items: center;
  align-items: center;
  justify-content: center;
  align-content: center;
}
.pinPropagationDetail .body .entryList {
  display: grid;
  justify-items: center;
  align-items: center;
  justify-content: center;
  align-content: center;
}
#dw_pinPropagation .content.entryCount1 {
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: repeat(1, 1fr);
}
#dw_pinPropagation .content.entryCount2 {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(1, 1fr);
}
#dw_pinPropagation .content.entryCount3,
#dw_pinPropagation .content.entryCount4 {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
}
#dw_pinPropagation .pinEntry,
.pinPropagationDetail .pinEntry {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  gap: 3px;
  margin-bottom: 9px;
}
#dw_pinPropagation .pinEntry .icon img,
.pinPropagationDetail .pinEntry .icon img {
  display: inline-block;
  background-size: auto 90%;
  width: 100%;
  height: 60px;
  background-position: center;
  background-repeat: no-repeat;
}
#dw_pinPropagation .pinEntry .price,
.pinPropagationDetail .pinEntry .price {
  display: flex;
  font-size: 70%;
  justify-items: center;
  align-items: center;
  align-content: center;
  flex-direction: row;
  gap: 4px;
  color: #919191;
}
#dw_pinPropagation .pinEntry .price img,
.pinPropagationDetail .pinEntry .price img {
  height: 2em;
}
#dw_pinPropagation .pinEntry .caption,
.pinPropagationDetail .pinEntry .caption {
  font-weight: 700;
  color: #333;
  font-size: 120%;
}
#dw_pinPropagation .pinEntry .category,
.pinPropagationDetail .pinEntry .category {
  font-weight: 700;
  color: #555;
  font-size: 80%;
}
#dw_pinPropagation .moreEntry {
  display: flex;
  justify-items: center;
  align-items: center;
  align-content: center;
  font-size: 300%;
  font-weight: 300;
  color: #57c9fe;
}
.pinPropagationDetail .body .entryList {
  grid-template-columns: repeat(2, 1fr);
}
@media screen and (min-width: 1020px) {
  .pinPropagationDetail .body .entryList {
    grid-template-columns: repeat(4, 1fr);
  }
}
#dw_chatReminder,
.dashboard .chatReminderDetail {
  background: linear-gradient(120deg, #ffdbbc 0, #fff594 100%);
  border: 1px solid #dcdc8d;
}
#dw_chatReminder:hover .head {
  background: none;
}
.dashboard .chatReminderDetail .body {
  background: rgba(255, 255, 255, 0.25);
}
#dw_chatReminder .conversationList,
.dashboard .chatReminderDetail .conversationList {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: flex-start;
}
#dw_chatReminder .conversationEntry,
.dashboard .chatReminderDetail .conversationEntry {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: stretch;
  gap: 11px;
  padding: 11px 3px;
  width: 100%;
  transition: .7s;
  box-sizing: border-box;
}
#dw_chatReminder .conversationEntry {
  font-size: 90%;
}
#dw_chatReminder .conversationEntry:nth-child(even).overdue,
.dashboard .chatReminderDetail .conversationEntry:nth-child(even).overdue {
  background: rgba(255, 30, 30, 0.2);
}
#dw_chatReminder .conversationEntry:nth-child(odd),
.dashboard .chatReminderDetail .conversationEntry:nth-child(odd) {
  background: rgba(30, 30, 30, 0.05);
}
#dw_chatReminder .conversationEntry:nth-child(odd).overdue,
.dashboard .chatReminderDetail .conversationEntry:nth-child(odd).overdue {
  background: rgba(255, 30, 30, 0.25);
}
.dashboard .chatReminderDetail .conversationEntry:hover {
  cursor: pointer;
  background: #fff !important;
}
#dw_chatReminder .conversationEntry .storeTimestamp,
.dashboard .chatReminderDetail .conversationEntry .storeTimestamp {
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
  width: 40px;
}
#dw_chatReminder .conversationEntry .storeTimestamp {
  width: 40px;
}
.dashboard .chatReminderDetail .conversationEntry .storeTimestamp {
  width: 120px;
}
#dw_chatReminder .conversationEntry .storeTimestamp span,
.dashboard .chatReminderDetail .conversationEntry .storeTimestamp span {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
#dw_chatReminder .conversationEntry .profileImage,
.dashboard .chatReminderDetail .conversationEntry .profileImage {
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
  width: 40px;
}
#dw_chatReminder .conversationEntry .profileImage img,
.dashboard .chatReminderDetail .conversationEntry .profileImage img {
  border-radius: 50%;
  border: none;
}
#dw_chatReminder .conversationEntry .caption,
.dashboard .chatReminderDetail .conversationEntry .caption {
  display: flex;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  font-weight: 700;
  flex-grow: 10;
}
.dashboard .chatReminderDetail .conversationEntry .conversationAction {
  display: flex;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  white-space: nowrap;
  gap: 7px;
}
#dw_chatReminder .moreEntry,
.dashboard .chatReminderDetail .moreEntry {
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
  font-size: 80%;
  width: 100%;
  padding: 11px;
  font-weight: 700;
  box-sizing: border-box;
}
.dashboard .chatReminderDetail .explanation {
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
  font-size: 90%;
  font-weight: 300;
  line-height: 1.7;
  padding: 15px;
}
.dashboard .chatReminderDetail .conversationEntry .conversationAction .chatButton {
  display: none;
}
.dashboard .chatReminderDetail .conversationEntry .conversationAction .laterButton .buttonDescription {
  display: none;
}
@media screen and (min-width: 1020px) {
  .dashboard .chatReminderDetail .conversationEntry .conversationAction .chatButton {
    display: inline-block;
  }
  .dashboard .chatReminderDetail .conversationEntry .conversationAction .laterButton .buttonDescription {
    display: inline;
  }
}
#dw_guestbookEntryReceived {
  background: #4986b5;
  border: 1px solid #4986b5;
}
#dw_guestbookEntryReceived .head {
  color: #fff;
}
#dw_guestbookEntryReceived:hover .head {
  background: none;
}
#dw_guestbookEntryReceived .content {
  color: #fff;
  align-items: center;
  justify-content: center;
  justify-items: center;
  background: none;
}
#dw_guestbookEntryReceived .content span {
  text-align: center;
}
#dw_guestbookEntryReceived .content .counter {
  font-size: 3.5rem;
}
#dw_guestbookEntryReceived .content .subtitle {
  font-size: 0.75rem;
}
#dw_guestbookEntryImportant {
  background: #ff9933;
  background: linear-gradient(45deg, #ffc51b 0%, #fee540 100%);
  border: 2px solid #eec324;
}
#dw_guestbookEntryImportant .head {
  color: #9d8019;
}
#dw_guestbookEntryImportant:hover .head {
  background: none;
}
#dw_guestbookEntryImportant .content {
  line-height: 1.5;
  align-items: center;
  justify-content: center;
  justify-items: center;
  font-size: 1.2em;
  text-align: center;
}
#dw_gameLotteryEligible {
  background: linear-gradient(165deg, #ffdbbc 0, #fff594 100%);
  border: 1px solid #eec324;
}
#dw_gameLotteryEligible:hover .head {
  background: none;
}
#dw_gameLotteryEligible .content {
  text-align: center;
  align-items: center;
  justify-content: center;
  justify-items: center;
}
#dw_gameLotteryEligible .content .main {
  font-weight: 400;
  font-size: 145%;
  line-height: 1.7;
}
#dw_gameLotteryEligible .content .expl {
  font-weight: 900;
  color: #000;
  font-size: 85%;
  line-height: 1.7;
}
#dw_gameLotteryReport {
  background: radial-gradient(farthest-corner at 50% -5px, #045094 -50%, #000000 150%);
  border: 1px solid #0561ac;
  color: #fff;
}
#dw_gameLotteryReport .head {
  color: #fff;
}
#dw_gameLotteryReport:hover .head {
  background: none;
}
#dw_gameLotteryReport .content .prize {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  gap: 3px;
  padding: 13px;
}
#dw_gameLotteryReport .content .prize > * {
  text-align: center;
  line-height: 1.5;
}
#dw_gameLotteryReport .content .prize .description {
  font-weight: 700;
  font-size: 140%;
}
#dw_gameLotteryReport .content .prize .subtitle {
  font-weight: 700;
  font-size: 105%;
}
#dw_gameLotteryReport .content .prize .amount {
  font-weight: 500;
  font-size: 100%;
}
#dw_userIntent {
  background: linear-gradient(220deg, #e2fffd 0%, #b5ffc4 100%);
  border-color: #ffe65c;
}
#dw_userIntent .head {
  color: #709d5f;
}
#dw_userIntent:hover .head {
  background: none;
}
#dw_userIntent .content {
  padding: 7px;
}
#dw_userIntent .intentSettingList {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 5px;
  justify-content: flex-start;
  align-items: flex-start;
}
#dw_userIntent .intentSettingList .intentSettingEntry {
  display: flex;
  flex-direction: row;
  gap: 7px;
  align-items: center;
  justify-content: flex-start;
}
#dw_userIntent .intentSettingList .intentSettingEntry img {
  max-height: 2em;
}
#dw_userIntent .intentSettingList .intentSettingEntry .label {
  line-height: 1.5;
  text-align: left;
}
#dw_giftSetStatusUpdate .giftSetEntry,
.giftSetStatusUpdate .giftSetEntry {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  gap: 3px;
}
#dw_giftSetStatusUpdate .giftSetEntry .icon img,
.giftSetStatusUpdate .giftSetEntry .icon img {
  display: inline-block;
  background-size: auto 90%;
  width: 100%;
  height: 120px;
  background-position: center;
  background-repeat: no-repeat;
}
#dw_giftSetStatusUpdate .giftSetEntry .caption,
.giftSetStatusUpdate .giftSetEntry .caption {
  font-weight: 700;
  color: #333;
  font-size: 120%;
}
.dashboard .gameLotteryReport .body {
  min-height: 200px;
}
.dashboard .gameLotteryReport .body .prizeList {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: flex-start;
}
.dashboard .gameLotteryReport .body .prizeList .prize {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 5px;
  padding: 13px;
}
.dashboard .gameLotteryReport .body .prizeList .prize .description {
  font-weight: 700;
}
.dashboard .gameLotteryReport .body p {
  background: linear-gradient(90deg, #eaffff 0, #d9f4ff 100%);
  border: 1px solid #84c4e1;
  border-radius: 15px;
  padding: 9px;
  margin: 9px 0;
  box-shadow: 2px 2px 5px rgba(143, 167, 178, 0.27);
  font-size: 120%;
  line-height: 1.7;
}
.dashboard .gameLotteryReport .body .voteList {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: stretch;
  gap: 9px;
  padding: 13px;
}
.dashboard .gameLotteryReport .body .voteList .item {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  gap: 3px;
  padding: 5px;
}
.dashboard .gameLotteryReport .body .voteList .item .profileImage {
  width: 70px;
}
.dashboard .gameLotteryReport .body .voteList .item .profileImage img {
  width: 70px;
  border-radius: 50%;
}
.dashboard .gameLotteryReport .body .voteList .item .stamp {
  font-weight: bold;
  padding: 0 0 0 27px;
}
.dashboard .gameLotteryReport .body .voteList .item .userEntry {
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.dashboard .guestbookEntryImportant .explanation {
  padding: 7px;
}
.dashboard .guestbookEntryImportant .guestbookImportantList {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 7px;
  padding: 7px;
}
.dashboard .guestbookEntryImportant .guestbookImportantList .item {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 7px;
}
.dashboard .guestbookEntryImportant .guestbookImportantList .item .icon {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: center;
  gap: 3px;
  text-align: center;
}
.dashboard .guestbookEntryImportant .guestbookImportantList .item .icon img {
  width: 75px;
  border-radius: 50%;
}
.dashboard .guestbookEntryImportant .guestbookImportantList .item .content {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 7px;
}
.dashboard .guestbookEntryImportant .guestbookImportantList .item .content .button {
  padding: 0 10px;
  display: inline-flex;
}
.dashboard .badge {
  display: inline-flex;
  padding: 3px 7px;
  margin: 5px;
  border-radius: 50px;
  font-size: 75%;
  font-weight: 700;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
}
.dashboard .badge.badgePink {
  color: #ffffff;
  background: #d8489e;
  background: linear-gradient(45deg, #fe559b 0%, #ff4c71 100%);
  border: 2px solid #df1632;
}
.dashboard .badge.badgeYellow {
  color: #333333;
  cursor: pointer;
  background: #ff9933;
  background: linear-gradient(45deg, #ffc51b 0%, #fee540 100%);
  border: 2px solid #eec324;
}
.dashboard .noteWhyReceived {
  padding: 20px 20px 40px 20px;
  text-align: center;
  font-size: 80%;
  font-weight: 300;
  color: #777;
  line-height: 1.4;
}
/* Widgets ohne Inhalt nicht anzeigen (Achtung: Whitespaces werden von Browsern nicht als "leer" erachtet!) */
.widget:empty,
.widget:blank {
  display: none;
}
.questGrid {
  display: grid;
  grid-template-columns: 75% 25%;
}
.questGrid .text {
  grid-column: 1;
}
.questGrid .icon {
  grid-column: 2;
}
.questGrid .icon img {
  margin-left: 15px;
  max-width: 70%;
  padding-bottom: 10px;
}
.widget.small.dwid_1,
.widget.small.dwid_5 {
  background: #ffffff;
  border: 1px solid #e4e4e4;
  color: #6a6a6a;
}
.widget.small.dwid_1 .head,
.widget.small.dwid_5 .head {
  margin: auto;
  background: none;
  color: #727272;
}
.widget.small.dwid_1 .content .text,
.widget.small.dwid_5 .content .text {
  padding: 15px;
  font-size: 1.1em;
  line-height: 150%;
  padding-top: 0;
}
.widget.small.dwid_1 .content .read,
.widget.small.dwid_5 .content .read {
  padding: 0 15px 10px 15px;
}
.widget.small.dwid_1 .content .read .buttonWhite,
.widget.small.dwid_5 .content .read .buttonWhite {
  margin-right: 3px;
}
.listOfChatRequests {
  margin: auto;
  width: 180px;
  padding-bottom: 20px;
}
.listOfChatRequests .hiIcon {
  animation: rotate 0.5s forwards;
}
.listOfChatRequests .hiIcon img {
  width: 128px;
  animation: overshotInDelay 0.2s forwards;
}
.listOfChatRequests .profileImage {
  position: absolute;
  margin-left: 130px;
  margin-top: -130px;
  animation: intoFocusAndBack 0.9s forwards;
}
.listOfChatRequests .profileImage img {
  width: 60px;
  border-radius: 50%;
  border: 6px solid #ffffff;
}
.listOfChatRequests .profileImage.profileImage1 {
  z-index: 2;
}
.listOfChatRequests .profileImage.profileImage2 {
  margin-left: 125px;
  margin-top: -95px;
  animation-delay: 0.3s;
  z-index: 1;
}
.listOfChatRequests .profileImage.profileImage3 {
  margin-left: 115px;
  margin-top: -60px;
  animation-delay: 0.6s;
  z-index: 0;
}
.visitorList {
  max-width: 720px;
}
.visitorList .visitorGrid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: calc(25% - 10px) calc(25% - 10px) calc(25% - 10px) calc(25% - 10px);
  justify-items: center;
  align-items: center;
  margin-bottom: 30px;
}
.visitorList .visitorGrid .visitor {
  width: 160px;
  height: 230px;
  display: grid;
  grid-template-rows: 30px 160px auto 30px ;
  grid-template-columns: 25% 25% 25% 25%;
  overflow: hidden;
  transition: .3s;
  align-content: start;
  cursor: pointer;
  background: #ffffff;
  border-radius: 20px;
  padding: 5px;
}
.visitorList .visitorGrid .visitor:hover {
  animation: intoFocusLight 0.5s forwards;
  transition: 0.3s;
}
.visitorList .visitorGrid .visitor .profileImage {
  overflow: hidden;
  grid-column: 1 / span 4;
  grid-row: 2;
}
.visitorList .visitorGrid .visitor .profileImage img {
  width: 160px;
  height: 160px;
  border-radius: 10px;
}
.visitorList .visitorGrid .visitor .stamp {
  font-size: 120%;
  font-weight: 500;
  grid-row: 4;
  grid-column: 1 / span 4;
  z-index: 2;
  padding-top: 10px;
  padding-left: 10px;
  color: #525252;
}
.visitorList .visitorGrid .visitor .stampOffline {
  border-radius: 10px;
  background: #f93;
  padding: 7px;
  color: #ffffff;
}
.visitorList .visitorGrid .visitor .stampOnline {
  border-radius: 10px;
  background: #80cb00;
  padding: 7px;
  color: #ffffff;
}
.visitorList .visitorGrid a.visitor .profileImage img {
  border-width: 2px !important;
}
.visitorList .visitorGrid a.visitor:hover .profileImage img {
  border-color: #333333;
  transition: 0.5s;
}
.visitorList .visitorGrid .visitor .pinMatch {
  grid-row: 3;
  padding: 3px;
  z-index: 2;
  margin-top: -45px;
}
.visitorList .visitorGrid .visitor .pinMatch > div {
  padding: 3px;
  border-radius: 7px;
  overflow: hidden;
  box-shadow: 0px 0px 3px 2px #ffe178;
}
.visitorList .visitorGrid .visitor .pinMatch > div > img {
  width: 100%;
  height: 100%;
}
.visitorList .visitorGrid .visitor .pinMatch0 {
  grid-column: 1;
}
.visitorList .visitorGrid .visitor .pinMatch1 {
  grid-column: 2;
}
.visitorList .visitorGrid .visitor .pinMatch2 {
  grid-column: 3;
}
.visitorList .visitorGrid .visitor .pinMatch3 {
  grid-column: 4;
}
.visitorList .visitorGrid .visitor .gender {
  grid-row: 1;
  grid-column: 3;
  text-align: right;
}
.visitorList .visitorGrid .visitor .gender img {
  grid-column: 1;
  width: 25px;
}
.visitorList .visitorGrid .visitor .age {
  grid-row: 1;
  grid-column: 4;
  padding: 5px;
  font-size: 120%;
  font-weight: 900;
  align-self: center;
  text-align: center;
  color: #49ccff;
}
.visitorList .visitorGrid .visitor.locked .profileImage img,
#profileVisitorLayer .profileImage img {
  -webkit-filter: blur(8px);
  filter: blur(8px);
}
.visitorShop {
  display: grid;
  padding: 7px;
  grid-template-columns: 100%;
  grid-gap: 7px;
}
.visitorShop .statusBar {
  margin-left: 20px;
}
.visitorShop .explanation {
  line-height: 1.5;
  font-size: 110%;
  font-weight: 300;
  margin-left: 25px;
  margin-right: 25px;
  margin-bottom: 20px;
}
.visitorShop .offer {
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 10px;
  background: #fff;
  border-radius: 15px;
  margin-left: 10px;
  margin-right: 10px;
  padding: 15px;
}
.visitorShop .offer .redeem {
  grid-column: 2;
  grid-row: 1;
  justify-self: right;
}
.visitorShop .offer .redeem button img {
  height: 1.5em;
}
.visitorShop .offer .title {
  font-family: 'Luckiest Guy', cursive;
  font-weight: 500;
  line-height: 130%;
  color: #000;
  grid-column: 1;
  grid-row: 1;
  align-self: center;
}
.visitorShop .offer .description {
  line-height: 1.5;
  font-size: 110%;
  font-weight: 300;
}
.visitorShop .offer .limit {
  color: #51ceff;
  font-weight: 700;
  font-size: 90%;
  grid-column: 1 / span 2;
  grid-row: 2;
}
.visitorShop .offer .notAvailable {
  color: #ff00bd;
  font-weight: 700;
  line-height: 120%;
  font-size: 90%;
  grid-column: 1 / span 2;
}
#profileVisitorLayer {
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.65);
  width: 100%;
  padding-top: 10px;
  display: grid;
}
#profileVisitorLayer .layerWrapper {
  padding-bottom: 100px;
  justify-self: center;
  align-self: center;
}
#profileVisitorLayer .container {
  max-width: 600px;
  background: #fff;
  min-width: 300px;
  border-radius: 10px;
  padding: 25px;
}
#profileVisitorLayer .head {
  display: flex;
  align-items: center;
  color: #484848;
  height: 3.5em;
  max-width: 100%;
  background: #fff;
}
#profileVisitorLayer .head .caption {
  flex-grow: 1;
  margin: .5em 1em;
  font-weight: 700;
  font-size: 1.3em;
  text-overflow: ellipsis;
}
#profileVisitorLayer .head button {
  border: 1px solid #c7c7c7;
  background: #d5d5d5;
  cursor: pointer;
  border-radius: 15px;
  color: #333333;
  display: inline-block;
  height: 2.5em;
  margin: .5em;
  line-height: 2em;
  text-align: center;
  font-weight: 300;
  padding: 2px 10px;
}
#profileVisitorLayer .info {
  padding: 10px;
  line-height: 120%;
  font-size: 110%;
  font-weight: 300;
  margin-top: 15px;
}
@media screen and (max-width: 660px) {
  .visitorList .visitorGrid {
    grid-template-columns: calc(50% - 10px) calc(50% - 10px);
  }
  .questGrid .icon img {
    margin-left: 5px;
    max-width: 80%;
    padding-bottom: 10px;
  }
}
.siteSectionHeader {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  padding: 9px;
  gap: 9px;
  align-content: center;
  align-items: center;
  justify-content: flex-start;
}
.siteSectionHeader > .caption {
  flex-grow: 2;
  font-size: 1.8em;
  font-weight: 300;
  padding: 0 0 0 8px;
}
.siteSectionHeader > .optionArea {
  opacity: 0.6;
  transition: .3s;
}
.siteSectionHeader > .optionArea:hover {
  opacity: 1.0;
}
.siteSectionHeader > .optionArea > .button.buttonRound {
  border: 1px solid #aeac9f;
  background: #ecebe3;
  padding: 3px;
  cursor: pointer;
  transition: .3s;
}
.siteSectionHeader > .optionArea > .button.buttonRound:hover,
.siteSectionHeader > .optionArea > .button.buttonRound:active,
.siteSectionHeader > .optionArea > .button.buttonRound:focus {
  border-color: #8aa0a8;
  background: #d6eef6;
}
.siteSectionHeader > .optionArea > .button.buttonRound > img {
  max-width: 22px;
  max-height: 22px;
}
@media screen and (max-width: 660px) {
  .siteSectionHeader > .caption {
    padding: 0 0 0 19px;
  }
  .siteSectionHeader > .optionArea > .button.buttonRound {
    padding: 5px;
  }
  .siteSectionHeader > .optionArea > .button.buttonRound > img {
    max-width: 26px;
    max-height: 26px;
  }
}
.dashboardPreferenceSectionList {
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex-wrap: nowrap;
  margin: 9px 3px 5px 3px;
  padding: 0 7px;
}
.dashboardPreferenceSectionList .dashboardPreferenceSection {
  display: flex;
  gap: 3px;
  flex-direction: column;
  flex-wrap: nowrap;
}
.dashboardPreferenceSectionList .dashboardPreferenceSection .dashboardPreferenceSectionCaption {
  font-weight: 300;
  font-size: calc(2.1em);
  margin: 12px 0 24px 0;
}
.dashboardPreferenceOptionList {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 15px;
}
.dashboardPreferenceOptionList .dashboardPreferenceOption {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 13px;
  margin: 0 0 7px;
  justify-content: flex-start;
}
.dashboardPreferenceOptionList .dashboardPreferenceOption .dashboardPreferenceDescription {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 12px;
  flex-grow: 3;
}
.dashboardPreferenceOptionList .dashboardPreferenceOption .dashboardPreferenceDescription .dashboardPreferenceCaption {
  font-weight: bold;
  color: #555;
}
.dashboardPreferenceOptionList .dashboardPreferenceOption .dashboardPreferenceDescription .dashboardPreferenceComingSoon {
  color: #ffa433;
}
.dashboardPreferenceOptionList .dashboardPreferenceOption .dashboardPreferenceDescription p {
  line-height: 1.6;
}
.dashboardPreferenceOptionList .dashboardPreferenceOption .dashboardPreferenceToggle {
  padding: 2px;
  border: 2px solid #ccc;
  border-radius: 17px;
  height: 30px;
  width: 50px;
  min-width: 50px;
  max-width: 50px;
  display: flex;
  align-items: center;
  overflow: hidden;
  cursor: pointer;
  transition: .4s;
  position: relative;
  box-shadow: inset 2px 2px 3px rgba(128, 128, 128, 0.25);
}
.dashboardPreferenceOptionList .dashboardPreferenceOption .dashboardPreferenceToggle .dashboardPreferenceTogglePill {
  display: inline-block;
  position: absolute;
  border: 2px solid #ccc;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  background: #fff;
  margin: -3px -5px;
  transition: .4s;
  filter: drop-shadow(2px 2px 3px rgba(128, 128, 128, 0.25));
}
.dashboardPreferenceOptionList .dashboardPreferenceOption .dashboardPreferenceToggle:hover .dashboardPreferenceTogglePill {
  background: #eee;
}
.dashboardPreferenceOptionList .dashboardPreferenceOption .dashboardPreferenceToggle.defaultDisabled {
  background: #eee;
}
.dashboardPreferenceOptionList .dashboardPreferenceOption .dashboardPreferenceToggle.defaultEnabled {
  background: #a3b8cc;
}
.dashboardPreferenceOptionList .dashboardPreferenceOption .dashboardPreferenceToggle.setDisabled {
  background: #fff;
}
.dashboardPreferenceOptionList .dashboardPreferenceOption .dashboardPreferenceToggle.setEnabled {
  background: #5ca5e6;
}
.dashboardPreferenceOptionList .dashboardPreferenceOption .dashboardPreferenceToggle.defaultDisabled .dashboardPreferenceTogglePill,
.dashboardPreferenceOptionList .dashboardPreferenceOption .dashboardPreferenceToggle.setDisabled .dashboardPreferenceTogglePill {
  left: 0;
}
.dashboardPreferenceOptionList .dashboardPreferenceOption .dashboardPreferenceToggle.defaultEnabled .dashboardPreferenceTogglePill,
.dashboardPreferenceOptionList .dashboardPreferenceOption .dashboardPreferenceToggle.setEnabled .dashboardPreferenceTogglePill {
  left: 28px;
}
.dashboardPreferenceOptionList .dashboardPreferenceOption .dashboardPreferenceWipe {
  opacity: 0.5;
  transition: .3s;
}
.dashboardPreferenceOptionList .dashboardPreferenceOption .dashboardPreferenceWipe:hover {
  opacity: 1.0;
}
.dashboardPreferenceOptionList .dashboardPreferenceOption .dashboardPreferenceWipe .button.buttonRound {
  padding: 7px;
  border: 1px solid #aaa;
  background: #ddd;
  transition: .3s;
  cursor: pointer;
}
.dashboardPreferenceOptionList .dashboardPreferenceOption .dashboardPreferenceWipe .button.buttonRound:hover,
.dashboardPreferenceOptionList .dashboardPreferenceOption .dashboardPreferenceWipe .button.buttonRound:focus,
.dashboardPreferenceOptionList .dashboardPreferenceOption .dashboardPreferenceWipe .button.buttonRound:active {
  border-color: #8aa0a8;
  background: #d6eef6;
}
.dashboardPreferenceOptionList .dashboardPreferenceOption .dashboardPreferenceWipe .button.buttonRound img {
  max-width: 24px;
  max-height: 24px;
}
#settingsLayer {
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(33, 33, 33, 0.4);
}
#settingsLayer .settingsLayer {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
}
#settingsLayer .settingsLayer .dialog {
  display: inline-flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  border-radius: 15px;
  background: #e5e5e5;
  margin: auto;
  gap: 7px;
  padding: 7px;
  min-width: 280px;
}
#settingsLayer .settingsLayer .dialog .headline {
  font-size: 130%;
  padding: 10px;
  font-weight: 600;
  color: #333333;
}
#settingsLayer .settingsLayer .dialog .content {
  display: inline-flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
}
#settingsLayer .settingsLayer .dialog .actionArea {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
  justify-content: center;
  align-items: center;
}
.userSettings .settingsList {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.userSettings .settingsList .settingsLabelBlock {
  display: inline-flex;
  padding: 7px 7px 7px calc(5px + 3px + 13px);
}
.userSettings .settingsList .settingsEntry {
  display: flex;
  transition: .3s;
  flex-direction: row;
  align-content: stretch;
  align-items: stretch;
  justify-content: flex-start;
}
.userSettings .settingsList .settingsEntry:hover {
  background: #fff;
  border-radius: 7px;
}
.userSettings .settingsList .settingsEntry .settingsCheckbox {
  display: flex;
  justify-content: flex-start;
  gap: 3px;
  padding: 5px;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}
.userSettings .settingsList .settingsEntry .settingsLabelBlock {
  display: block;
  padding: 5px;
}
.userSettings .settingsList .settingsDivider {
  display: block;
  margin: 7px;
  border-top: 1px solid #888;
}
.userSettings .settingsList .settingsNewBadge {
  display: inline-flex;
  background: #ffa62b;
  color: #fff;
  font-weight: 900;
  padding: 4px;
  justify-content: center;
  align-content: center;
}
.userSettings .settingsStoreStatus {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 2em;
  min-height: 32px;
  gap: 7px;
}
.userSettings .settingsStoreStatus img {
  width: 32px;
}
.userSettings .settingsStoreStatus span.inProcess {
  color: #3ca2fe;
}
.userSettings .settingsStoreStatus span.failed {
  color: #ea5800;
  font-weight: bold;
}
.userSettings .settingsStoreStatus span.done {
  color: #96c223;
  font-weight: bold;
}
.imageUploadLimit {
  color: #999;
  font-size: 11px;
  padding: 7px 13px;
  line-height: 1.5;
  text-align: center;
  margin-top: 13px;
}
/******************************************************************************
 * Einheitliche Design-Bausteine für Jappy 2025                               *
 ******************************************************************************/
/******************************************************************************
 * Aktions-Knöpfe (Links oder Buttons)                                        +
 ******************************************************************************/
.j25 .action > .icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-size: 16px;
}
.j25 .action > .label {
  display: inline-flex;
  align-items: center;
  padding: 0 7px 0 0;
}
.j25 .action.noIcon > .label {
  display: inline-flex;
  align-items: center;
  padding: 0 7px;
}
.j25 .action > .badge {
  background: #ea5800;
  color: #fff;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  display: inline-flex;
  justify-content: center;
  align-content: center;
  justify-items: center;
  align-items: center;
  font-size: 11px;
  line-height: 16px;
  font-weight: bold;
}
.j25 .action.lowPriority > .badge {
  background: #696969;
}
.j25 .action:hover,
.j25 .action:focus,
.j25 .action.focus {
  border-color: #3ca2fe;
  color: #3ca2fe;
}
.j25 .action.active {
  border-color: #ea5800;
  color: #ea5800;
}
.j25 .action.danger {
  background: #ea5800;
  border-color: #ea5800;
  color: #fff;
}
.j25 .action.cta {
  background: #3ca2fe;
  border-color: #3ca2fe;
  color: #fff;
}
.j25 .action.cta .label {
  font-weight: bold;
}
.j25 .action[disabled],
.j25 .action.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.j25 .action.more {
  display: none;
}
.j25 .showMore .action.more {
  display: flex;
}
.j25 .showMore .action.moreToggle {
  display: none;
}
.j25 .action {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  padding: 7px;
  border-radius: 7px;
  border-width: 1px;
  border-style: solid;
  color: #555;
  border-color: #d8d8d8;
  background: #eee;
  transition: .3s;
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box;
  align-content: center;
  align-items: center;
  min-width: 80px;
  gap: 9px;
  user-select: none;
  min-height: 2.5em;
}
.j25 .action.green {
  background: #96c223;
  color: #fff;
  font-weight: bold;
}
.j25 .action.red {
  background: #ea5800;
  color: #fff;
  font-weight: bold;
}
/******************************************************************************
 * Dropdown-Indikator                                                         +
 ******************************************************************************/
.j25 .dropdownAction > .icon {
  grid-column: 2 / span 1;
  grid-row: 1 / span 3;
  width: 16px;
  height: 16px;
  display: inline-block;
  background-size: 16px;
}
.j25 .dropdownAction > .label {
  grid-column: 1 / span 1;
  grid-row: 2 / span 1;
  font-size: 11px;
  color: #333;
}
.j25 .dropdownAction > .supertext {
  grid-column: 1 / span 1;
  grid-row: 1 / span 1;
  font-size: 9px;
  color: #555;
}
.j25 .dropdownAction {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr auto;
  background: none;
  border: none;
  grid-gap: 3px 7px;
  padding: 5px 7px;
  user-select: none;
}
/******************************************************************************
 * Icon als background-image                                                  +
 ******************************************************************************/
.j25 .icon {
  background-position: center;
  background-repeat: no-repeat;
}
/******************************************************************************
 * Empty-States                                                               +
 ******************************************************************************/
.j25 .emptyState > .icon {
  display: inline-block;
  width: 128px;
  height: 128px;
  background-size: 128px;
}
.j25 .emptyState > .label {
  display: inline-block;
  text-align: center;
}
.j25 .emptyState {
  display: flex;
  text-align: left;
  padding: 27px 13px;
  min-height: 30vh;
  justify-content: center;
  justify-items: center;
  align-items: center;
  align-content: center;
  gap: 11px;
  flex-direction: column;
  line-height: 1.8;
  font-size: 12px;
  color: #555;
  font-weight: bold;
}
/******************************************************************************
 * Formulare                                                                  +
 ******************************************************************************/
.j25 .form > .formActionBar {
  display: flex;
  flex-direction: row;
  gap: 7px;
  margin: 33px 0 0 0;
}
.j25 .form > .formActionBar .spacer {
  flex-grow: 1;
}
.j25 .form > .formAlert > * {
  box-sizing: border-box;
  padding: 0 0 3px 0;
  line-height: 1.5;
}
.j25 .form > .formAlert > .caption {
  font-weight: bold;
}
.j25 .form > .formAlert {
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-style: solid;
  border-width: 1px;
  padding: 7px;
  border-radius: 7px;
}
.j25 .form > .formAlert.green {
  border-color: #96c223;
  background: #fff;
}
.j25 .form > .formAlert.orange {
  border-color: #ff9133;
  background: #fff;
}
.j25 .form > .formAlert.red {
  border-color: #ea5800;
  background: #fff;
}
.j25 .form > .formRow > .formControls > input[type="text"],
.j25 .form > .formRow > .formControls > input[type="password"],
.j25 .form > .formRow > .formControls > textarea {
  border: 2px solid #d8d8d8;
  background: #fff;
  box-sizing: border-box;
  padding: 7px;
  max-width: 100%;
  border-radius: 7px;
  line-height: 1.5;
  transition: .3s;
}
.j25 .form > .formRow > .formControls > input[type="text"]:focus,
.j25 .form > .formRow > .formControls > input[type="password"]:focus,
.j25 .form > .formRow > .formControls > textarea:focus {
  border-color: #077abd;
  box-shadow: 0 0 5px #72ffff;
}
.j25 .form > .formRow > .formControls input[type="radio"],
.j25 .form > .formRow > .formControls input[type="checkbox"] {
  border: 1px solid #d8d8d8;
  background: #fff;
  box-sizing: border-box;
  padding: 7px;
  display: inline-block;
  width: 16px;
  height: 16px;
}
.j25 .form > .formRow > .formControls > textarea {
  min-height: 7em;
}
.j25 .form > .formRow > .formControls > .formControlCheckbox {
  display: flex;
  flex-direction: row;
  justify-items: start;
  justify-content: start;
  align-items: center;
  align-content: center;
  line-height: 24px;
  gap: 7px;
}
.j25 .form > .formRow > .formControls {
  display: flex;
  flex-direction: column;
  gap: 7px;
  align-content: center;
  align-items: stretch;
  justify-content: flex-start;
}
.j25 .form > .formRow > label {
  font-size: 9px;
  margin: 0 0 0 8px;
}
.j25 .form > .formRow {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.j25 .form {
  display: flex;
  flex-direction: column;
  gap: 17px;
  margin: 17px 11px 51px 11px;
}
/******************************************************************************
 * Info-Boxen                                                                 +
 ******************************************************************************/
.j25 .infoBox > * {
  background: #fff;
  padding: 7px;
  border-radius: 3px;
}
.j25 .infoBox > .caption {
  font-weight: bold;
}
.j25 .infoBox p {
  box-sizing: border-box;
  padding: 0 0 7px 0;
}
.j25 .infoBox p:last-child {
  box-sizing: border-box;
  padding: 0;
}
.j25 .infoBox {
  padding: 3px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 7px 11px;
  border-radius: 5px;
  line-height: 1.5;
}
.j25 .infoBox.blue {
  background-color: #077abd;
  background-image: linear-gradient(to top, #72ffff 0, #077abd 100%);
}
.j25 .infoBox.grey {
  background-color: #d0d0d0;
}
/******************************************************************************
 * Seiten-Navigation (Pager)                                                  +
 ******************************************************************************/
.j25 .pageNavigation > .actionBar > .next {
  grid-column: 4 / span 1;
  grid-row: 1 / span 2;
  flex-direction: row-reverse;
}
.j25 .pageNavigation > .actionBar > .pageDropdown {
  grid-column: 2 / span 2;
  grid-row: 1 / span 2;
  color: #555;
  border: 1px solid #d8d8d8;
  background: #fff;
  border-radius: 7px;
  padding: 7px;
  box-sizing: border-box;
}
.j25 .pageNavigation > .actionBar > .pageLabel {
  grid-column: 2 / span 1;
  grid-row: 1 / span 1;
  font-size: 9px;
  z-index: 5;
  display: inline-flex;
  align-self: flex-end;
  background: none;
  color: #777;
  padding: 0 0 3px 12px;
}
.j25 .pageNavigation > .actionBar > .previous {
  grid-column: 1 / span 1;
  grid-row: 1 / span 2;
}
.j25 .pageNavigation > .actionBar {
  display: grid;
  grid-template-rows: 16px 1fr;
  min-height: 45px;
  grid-template-columns: 80px 1fr 40px 80px;
  grid-gap: 3px 5px;
  grid-column: 2 / span 1;
  grid-row: 1 / span 1;
  max-width: 300px;
  min-width: 250px;
}
.j25 .pageNavigation > .resultCapacity {
  grid-column: 3 / span 1;
  grid-row: 1 / span 1;
  display: inline-flex;
  justify-content: flex-end;
  align-content: center;
  align-items: center;
  justify-self: end;
}
.j25 .pageNavigation {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 1fr;
  grid-gap: 3px 5px;
  padding: 7px;
  justify-content: center;
  justify-items: center;
  align-items: center;
  align-content: center;
  margin: 26px 0 13px 0;
  box-sizing: border-box;
  user-select: none;
}
/******************************************************************************
 * Primär-Navigation (Tabs oben)                                              +
 ******************************************************************************/
.j25 .primaryNavigation > .primaryNavigationOptionList > .primaryNavigationEntry > .badge {
  background: #ea5800;
  color: #fff;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: inline-flex;
  justify-content: center;
  align-content: center;
  justify-items: center;
  align-items: center;
}
.j25 .primaryNavigation > .primaryNavigationOptionList > .primaryNavigationEntry > .icon {
  width: 24px;
  height: 24px;
  display: inline-block;
  background-position: center;
  background-size: contain;
}
.j25 .primaryNavigation > .primaryNavigationOptionList > .primaryNavigationEntry > .label {
  font-size: 14px;
  padding-right: 12px;
  display: inline-flex;
  align-items: center;
}
.j25 .primaryNavigation > .primaryNavigationOptionList > .primaryNavigationEntry {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  gap: 11px;
  padding: 9px;
  align-items: stretch;
  color: #555;
  border-style: solid;
  border-width: 1px;
  border-right-width: 0;
  border-color: #d8d8d8;
  background: #eee;
  transition: .3s;
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box;
}
.j25 .primaryNavigation > .primaryNavigationOptionList > .primaryNavigationEntry:first-child {
  border-top-left-radius: 13px;
  border-bottom-left-radius: 13px;
  padding-left: 13px;
}
.j25 .primaryNavigation > .primaryNavigationOptionList > .primaryNavigationEntry:last-child {
  border-top-right-radius: 13px;
  border-bottom-right-radius: 13px;
  padding-right: 13px;
  border-right-width: 1px;
}
.j25 .primaryNavigation > .primaryNavigationOptionList > .primaryNavigationEntry.active > .label {
  font-weight: bold;
  display: inline-flex;
}
.j25 .primaryNavigation > .primaryNavigationOptionList > .primaryNavigationEntry.active {
  border-color: #ea5800;
  color: #ea5800;
  border-right-width: 1px;
}
.j25 .primaryNavigation > .primaryNavigationOptionList > .primaryNavigationEntry.active,
.sectionContacts > .primaryNavigation > .primaryNavigationEntry:hover,
.sectionContacts > .primaryNavigation > .primaryNavigationEntry:focus {
  background: #fff;
}
.j25 .primaryNavigation > .primaryNavigationOptionList > .primaryNavigationEntry:hover,
.sectionContacts > .primaryNavigation > .primaryNavigationEntry:focus {
  border-color: #3ca2fe;
  color: #3ca2fe;
}
.j25 .primaryNavigation > .primaryNavigationOptionList {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0;
  padding: 0 7px;
  margin: 0;
}
.j25 .primaryNavigation {
  overflow-x: auto;
  padding: 5px 0;
  grid-row: 1 / span 1;
  grid-column: 1 / span 1;
  max-width: 100%;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #ccc #e5e5e5;
  transition: scrollbar-color 0.7s;
  user-select: none;
}
.j25 .primaryNavigation:hover {
  scrollbar-color: #888 #e5e5e5;
}
.j25 .profileImageOffline,
.j25 .profileImageOnline,
.j25 .profileImageBlocked {
  border-style: solid;
  border-width: 3px;
}
/******************************************************************************
 * Sekundär-Navigation (Unter-Filter, zB Freunde / Lesezeichen / Listen)      +
 ******************************************************************************/
.j25 .secondaryNavigationContainer > .secondaryNavigation > .secondaryNavigationEntry > .badge {
  background: #3ca2fe;
  color: #fff;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  line-height: 16px;
  font-size: 12px;
  display: inline-flex;
  justify-content: center;
  align-content: center;
  justify-items: center;
  align-items: center;
  text-align: center;
}
.j25 .secondaryNavigationContainer > .secondaryNavigation > .secondaryNavigationEntry {
  border-bottom-width: 3px;
  border-bottom-style: solid;
  display: inline-flex;
  padding: 7px;
  box-sizing: border-box;
  color: #555;
  transition: .3s;
  text-align: center;
  justify-content: center;
  align-items: baseline;
  flex-wrap: nowrap;
  flex-direction: row;
  white-space: nowrap;
  gap: 9px;
  line-height: 17px;
}
.j25 .secondaryNavigationContainer > .secondaryNavigation > .secondaryNavigationEntry.active > .badge {
  background: #ea5800;
}
.j25 .secondaryNavigationContainer > .secondaryNavigation > .secondaryNavigationEntry.active {
  border-color: #ea5800;
  color: #ea5800;
  font-weight: bold;
}
.j25 .secondaryNavigationContainer > .secondaryNavigation > .secondaryNavigationEntry:hover {
  border-color: #3ca2fe;
  color: #3ca2fe;
}
.j25 .secondaryNavigationContainer > .secondaryNavigation {
  display: flex;
  gap: 3px;
  align-items: end;
  padding: 3px 7px;
  margin: 0 7px 7px 7px;
  overflow-x: auto;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-start;
  grid-column: 1 / span 1;
  user-select: none;
}
.j25 .secondaryNavigationContainer {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: 1fr;
  margin: 0 0 11px 0;
}
/******************************************************************************
 * Toolbar mit Actions                                                        +
 ******************************************************************************/
.j25 .toolbar {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 7px;
  margin-bottom: 9px;
  overflow-x: auto;
  padding: 7px;
}
.j25 .toolbar input[type="text"],
.j25 .toolbar input[type="password"] {
  display: flex;
  border: 2px solid #d8d8d8;
  background: #fff;
  box-sizing: border-box;
  padding: 7px;
  border-radius: 7px;
  line-height: 1.5;
  transition: .3s;
  max-width: 740px;
  flex-grow: 1;
  width: 100%;
  margin: 0;
}
.j25 .toolbar input[type="text"]:focus,
.j25 .toolbar input[type="password"]:focus {
  border-color: #077abd;
  box-shadow: 0 0 5px #72ffff;
}
.j25 .toolbarContainer {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  gap: 3px;
}
.j25 .toolbarContainer > .toolbar {
  flex-grow: 1;
}
.j25 .toolbarContainer > .toolbarBurger {
  min-height: 2.5em;
  width: 32px;
  display: flex;
  justify-items: flex-start;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
  padding: 7px 0;
}
.j25 .toolbarContainer > .toolbarBurger > .actionTrigger {
  background-size: 2.5em;
  background-position: center;
  width: 32px;
  height: 2.5em;
  display: inline-block;
  box-sizing: border-box;
  border: none;
  background-color: transparent;
  cursor: pointer;
  padding: 0;
  margin: 0;
  background-repeat: no-repeat;
}
/******************************************************************************
 * Fliegende Toolbar / Suche                                                  +
 ******************************************************************************/
.j25 .floatingToolbar {
  background: #fdf3a2;
  position: fixed;
  top: 50px;
  left: 0;
  right: 0;
  min-height: 65px;
  justify-items: center;
  align-items: center;
  align-content: center;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: start;
  box-sizing: border-box;
  margin: 0;
  padding: 0 0 0 310px;
}
.j25 .floatingToolbar > .toolbar {
  display: flex;
  justify-content: center;
  align-content: center;
  z-index: 50000000;
  margin: 0;
  padding: 3px;
  height: 100%;
  width: 100%;
  max-width: 750px;
  box-sizing: border-box;
}
.j25 .floatingToolbar > .toolbar > .counter {
  background: #3ca2fe;
  color: #fff;
  font-weight: bold;
  font-size: 16px;
  line-height: 34px;
  display: inline-flex;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  aspect-ratio: 1;
  justify-content: center;
  align-content: center;
  align-self: center;
  justify-self: center;
}
/******************************************************************************
 * Textformatierung allgemein                                                 +
 ******************************************************************************/
.j25 h2 {
  font-size: 15px;
  font-weight: 700;
  padding: 10px 0 7px 19px;
}
.j25 h3 {
  font-size: 18px;
  font-weight: 400;
  padding: 10px 0 7px 19px;
}
.j25 h4 {
  font-size: 12px;
  font-weight: 300;
  padding: 10px 0 7px 19px;
  color: #999;
  text-align: center;
}
/******************************************************************************
 * Profilbilder                                                               +
 ******************************************************************************/
.j25 .profileImageOffline {
  border-color: #e5e5e5;
}
.j25 .profileImageOnline {
  border-color: #90cc00;
}
.j25 .profileImageBlocked {
  border-color: #888;
  filter: grayscale() blur(3px);
}
/******************************************************************************
 * Subframe                                                                   +
 ******************************************************************************/
.j25 .subframe {
  display: flex;
  flex-direction: column;
  gap: 0;
}
/******************************************************************************
 * Layer / Dialoge                                                            +
 ******************************************************************************/
.j25.layer {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(50, 50, 50, 0.5);
  display: flex;
  overflow-y: auto;
}
.j25.dialog {
  justify-content: center;
  justify-items: center;
  align-content: flex-start;
  align-items: flex-start;
  padding: 80px 40px;
}
.j25.dialog > .frame {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  background: #fff;
  border: 2px solid #777;
  border-radius: 13px;
  padding: 13px;
  max-width: 90vw;
  min-width: 300px;
  min-height: 100px;
  gap: 7px;
  line-height: 1.5;
}
.j25.dialog > .frame > .caption {
  color: #333;
  font-weight: bold;
  font-size: 16px;
  padding: 0 3px;
}
.j25.dialog > .frame > .explanation > p {
  padding: 0 0 7px 0;
}
.j25.dialog > .frame > .spacer {
  flex-grow: 1;
}
.j25.dialog > .frame > .actionBar {
  display: flex;
  flex-direction: row;
  gap: 7px;
  margin: 33px 0 0 0;
  align-items: center;
  justify-content: space-around;
  align-content: center;
}
/******************************************************************************
 * Menü-Layer mit Navigations-Optionen                                        +
 ******************************************************************************/
.j25.menuLayer > .frame {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  background: #525252;
  gap: 1px;
  border: 1px solid #333;
  font-weight: 600;
  border-radius: 15px;
  box-shadow: 0 2px 2px #666666;
  color: #fff;
  box-sizing: border-box;
  overflow: hidden;
  position: absolute;
  height: auto;
}
.j25.menuLayer > .frame .menuItem {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 30px 1fr;
  height: 2em;
  justify-content: flex-start;
  align-content: center;
  justify-items: center;
  align-items: center;
  min-width: 280px;
  max-width: 90vw;
  box-sizing: border-box;
  transition: .3s;
  padding: 24px 15px;
  background: #424242;
}
.j25.menuLayer > .frame .menuItem:hover {
  background: #5a5a5a;
}
.j25.menuLayer > .frame .menuItem > .icon {
  grid-column: 1 / span 1;
}
.j25.menuLayer > .frame .menuItem > .label {
  grid-column: 2 / span 1;
  color: #fff;
  justify-self: flex-start;
  padding-right: 30px;
}
/******************************************************************************
 * Templating-Sektion                                                         +
 *----------------------------------------------------------------------------*
 * Unsichtbarer Bereich, aus dem sich JS serverseitig aufbereitete            *
 * potentiell dynamische Daten pickt (zB: Icon-URLs vom VirtualStatic)        *
 ******************************************************************************/
.j25 .template {
  display: none;
}
/******************************************************************************
 * Individuelle Bereichs-Anpassungen für Kontakte / Freunde / Lesezeichen     +
 ******************************************************************************/
.j25.sectionContacts .contactHeader > .actionPoints > .icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-size: 16px;
}
.j25.sectionContacts .contactHeader > .actionPoints > .label {
  font-weight: bold;
  font-size: 15px;
}
.j25.sectionContacts .contactHeader > .actionPoints {
  grid-column: 2 / span 1;
  grid-row: 1 / span 1;
  display: flex;
  gap: 7px;
  box-sizing: border-box;
  flex-direction: row;
  color: #555;
  border-style: solid;
  border-width: 1px;
  border-radius: 7px;
  padding: 7px 13px;
  border-color: #d8d8d8;
  background: #eee;
  transition: .3s;
  cursor: pointer;
  white-space: nowrap;
  align-items: flex-end;
  justify-self: center;
  user-select: none;
}
.j25.sectionContacts .contactHeader > .actionPoints.active {
  border-color: #ea5800;
  color: #ea5800;
}
.j25.sectionContacts .contactHeader > .actionPoints:hover {
  border-color: #3ca2fe;
  color: #3ca2fe;
}
.j25.sectionContacts .contactHeader {
  display: grid;
  grid-template-columns: 1fr 75px;
  grid-template-rows: 1fr;
  justify-items: start;
  align-items: center;
}
.j25.sectionContacts .contactList > .contact > .actionList {
  display: flex;
  flex-direction: row;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 7px;
  grid-column: 2 / span 1;
  grid-row: 4 / span 1;
  padding: 0 0 0 7px;
}
.j25.sectionContacts .contactList > .contact > .detail > span {
  padding: 0 17px 0 22px;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 13px;
  line-height: 16px;
  box-sizing: border-box;
  color: #696969;
  display: inline-flex;
  justify-items: center;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  flex-wrap: nowrap;
}
.j25.sectionContacts .contactList > .contact > .detail > span.distance {
  color: #898989;
  font-weight: 300;
}
.j25.sectionContacts .contactList > .contact > .detail {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 7px 13px;
  grid-column: 2 / span 1;
  grid-row: 2 / span 1;
  padding: 0 0 0 7px;
}
.j25.sectionContacts .contactList > .contact > .nickname {
  grid-column: 2 / span 1;
  grid-row: 1 / span 1;
  font-weight: bold;
  color: #333;
  padding: 0 0 0 7px;
}
.j25.sectionContacts .contactList > .contact > .note {
  grid-column: 2 / span 1;
  grid-row: 3 / span 1;
  background: #fdfce2;
  border-radius: 7px;
  padding: 7px;
  box-sizing: border-box;
}
.j25.sectionContacts .contactList > .contact > .note .caption {
  font-weight: bold;
  color: #b0ad80;
  font-size: 9px;
  padding: 0 0 5px 0;
}
.j25.sectionContacts .contactList > .contact > .note p {
  padding: 0 0 7px 0;
}
.j25.sectionContacts .contactList > .contact > .note p:last-child {
  padding: 0;
}
.j25.sectionContacts .contactList > .contact > .profileImage img {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border-radius: 50%;
}
.j25.sectionContacts .contactList > .contact > .profileImage {
  grid-column: 1 / span 1;
  grid-row: 1 / span 4;
}
.j25.sectionContacts .contactList > .contact {
  display: grid;
  grid-template-columns: 60px 1fr;
  grid-template-rows: max-content 1fr max-content auto;
  grid-gap: 7px 13px;
  padding: 11px 7px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 1px 2px 3px #cacaca;
  user-select: none;
}
.j25.sectionContacts .contactList > .contact.noNote {
  grid-template-rows: max-content 1fr auto;
}
.j25.sectionContacts .contactList > .contact.noNote > .actionList {
  grid-row: 3 / span 1;
}
.j25.sectionContacts .contactList {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 3px;
  min-height: 50vh;
}
.j25.sectionContacts p {
  box-sizing: border-box;
  padding: 0 0 7px 19px;
  line-height: 1.5;
}
.j25.sectionContacts {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 750px;
}
.j25.sectionContacts .contactEditor {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 160px 1fr;
  grid-gap: 13px;
  align-items: start;
}
.j25.sectionContacts .contactEditor .form {
  grid-column: 2 / span 1;
  grid-row: 1 / span 1;
}
.j25.sectionContacts .contactEditor .contact {
  display: grid;
  background: #fff;
  border-radius: 10px;
  box-shadow: 1px 2px 3px #cacaca;
  grid-column: 1 / span 1;
  grid-row: 1 / span 1;
  grid-template-columns: 1fr;
  grid-template-rows: 100px max-content auto 1fr;
  padding: 11px 7px;
  margin: 15px 3px;
  grid-gap: 11px;
  justify-items: center;
}
.j25.sectionContacts .contactEditor > .contact > .detail > span {
  padding: 0 17px 0 22px;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 13px;
  line-height: 16px;
  box-sizing: border-box;
  color: #696969;
  display: inline-flex;
  justify-items: center;
  align-items: center;
  gap: 3px;
  flex-wrap: nowrap;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 120px;
  overflow: hidden;
}
.j25.sectionContacts .contactEditor > .contact > .detail > span.distance {
  color: #898989;
  font-weight: 300;
}
.j25.sectionContacts .contactEditor > .contact > .detail {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 11px 13px;
  grid-column: 1 / span 1;
  grid-row: 3 / span 1;
  max-width: 150px;
  align-content: flex-start;
}
.j25.sectionContacts .contactEditor > .contact > .nickname {
  font-weight: bold;
  color: #333;
  grid-column: 1 / span 1;
  grid-row: 2 / span 1;
}
.j25.sectionContacts .contactEditor > .contact > .profileImage img {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border-radius: 50%;
  width: 80px;
  height: 80px;
}
.j25.sectionContacts .contactEditor > .contact > .profileImage {
  grid-column: 1 / span 1;
  grid-row: 1 / span 1;
}
/******************************************************************************
 * Individuelle Bereichs-Anpassungen für Posteingang / Mailbox / Chatübersicht+
 ******************************************************************************/
.j25.sectionChatInbox {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 750px;
}
.j25.sectionChatInbox > .inboxList {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 7px;
}
.j25.sectionChatInbox > .inboxList > .conversation {
  display: grid;
  grid-template-columns: 28px 44px 1fr;
  grid-template-rows: 1fr;
  align-content: stretch;
  align-items: stretch;
  justify-content: flex-start;
  box-sizing: border-box;
  background: #fff;
  grid-gap: 5px;
  color: #333;
  border-radius: 7px;
  padding: 7px;
  min-height: 60px;
  transition: .3s;
}
.j25.sectionChatInbox > .inboxList > .conversation:hover {
  cursor: pointer;
  background: #fafdb8;
  color: #000;
}
.j25.sectionChatInbox > .inboxList > .conversation.unread {
  background: #fdf3a2;
}
.j25.sectionChatInbox > .inboxList > .conversation.unread:hover {
  background: #fafdb8;
}
.j25.sectionChatInbox > .inboxList > .conversation.mention {
  background: #5385ff;
}
.j25.sectionChatInbox > .inboxList > .conversation.mention:hover {
  background: #77AFFC;
}
.j25.sectionChatInbox > .inboxList > .conversation.reminder {
  background: #96c223;
}
.j25.sectionChatInbox > .inboxList > .conversation.reminder:hover {
  background: #adc185;
}
.j25.sectionChatInbox > .inboxList > .conversation.selected {
  background: #3ca2fe;
  color: #fff;
}
.j25.sectionChatInbox > .inboxList > .conversation.selected:hover {
  background: #72bcfe;
}
.j25.sectionChatInbox > .inboxList > .conversation > .image {
  grid-column: 2 / span 1;
  grid-row: 1 / span 1;
  display: flex;
  justify-items: center;
  justify-content: center;
  align-items: center;
  align-content: center;
  aspect-ratio: 1;
  min-width: 40px;
  min-height: 40px;
}
.j25.sectionChatInbox > .inboxList > .conversation > .image > span {
  border-radius: 50%;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 40px;
  height: 40px;
  display: inline-block;
  aspect-ratio: 1;
}
.j25.sectionChatInbox > .inboxList > .conversation > .selectionPart {
  grid-column: 1 / span 1;
  grid-row: 1 / span 1;
  padding: 3px;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
}
.j25.sectionChatInbox > .inboxList > .conversation > .selectionPart > input {
  min-width: 20px;
  min-height: 20px;
}
.j25.sectionChatInbox > .inboxList > .conversation > .metaPart {
  color: unset;
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 24px 80px;
  flex-grow: 1;
  grid-gap: 3px 0;
  align-content: center;
  align-items: center;
  justify-content: start;
  justify-items: start;
  min-height: 44px;
  grid-column: 3 / span 1;
  grid-row: 1 / span 1;
}
.j25.sectionChatInbox > .inboxList > .conversation > .metaPart > .caption {
  grid-column: 1 / span 2;
  grid-row: 1 / span 1;
  font-weight: 900;
  color: #444;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 0 9px 0 11px;
  overflow: hidden;
  width: 100%;
}
.j25.sectionChatInbox > .inboxList > .conversation.unread > .metaPart > .caption {
  grid-column: 1 / span 1;
}
.j25.sectionChatInbox > .inboxList > .conversation > .metaPart > .caption span {
  color: #777;
}
.j25.sectionChatInbox > .inboxList > .conversation > .metaPart > .caption .stampOffline,
.j25.sectionChatInbox > .inboxList > .conversation > .metaPart > .caption .stampOnline {
  box-sizing: border-box;
  padding: 3px;
  margin: 0 -3px;
  display: inline-block;
  border-radius: 3px;
}
.j25.sectionChatInbox > .inboxList > .conversation > .metaPart > .caption .stampOnline {
  color: #333;
}
.j25.sectionChatInbox > .inboxList > .conversation > .metaPart > .caption img {
  width: 16px;
  height: 16px;
}
.j25.sectionChatInbox > .inboxList > .conversation > .metaPart > .preview {
  grid-column: 1 / span 2;
  grid-row: 2 / span 1;
  font-weight: 500;
  color: #555;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 0 9px 0 11px;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}
.j25.sectionChatInbox > .inboxList > .conversation.unread > .metaPart > .preview {
  grid-column: 1 / span 1;
}
.j25.sectionChatInbox > .inboxList > .conversation > .metaPart > .preview .typeDescriptor {
  color: #888;
  margin-right: 7px;
}
.j25.sectionChatInbox > .inboxList > .conversation > .metaPart > .preview.own {
  font-weight: 300;
  font-style: italic;
}
.j25.sectionChatInbox > .inboxList > .conversation > .metaPart > .count {
  grid-column: 2 / span 1;
  grid-row: 1 / span 2;
  justify-content: center;
  align-content: center;
  justify-items: center;
  align-items: center;
  display: inline-flex;
}
.j25.sectionChatInbox > .inboxList > .conversation > .metaPart > .count span {
  background: #ea5800;
  color: #fff;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: inline-flex;
  justify-content: center;
  align-content: center;
  justify-items: center;
  align-items: center;
}
.j25.sectionChatInbox > .inboxList > .conversation > .metaPart > .timestamp {
  grid-column: 3 / span 1;
  grid-row: 1 / span 2;
  font-size: 11px;
  justify-self: center;
  align-self: center;
  display: inline-block;
  padding: 3px;
}
.j25.sectionChatInbox > .inboxList > .conversation > .metaPart > .date {
  grid-column: 3 / span 1;
  grid-row: 1 / span 1;
  font-size: 11px;
  justify-self: center;
  align-self: center;
  display: inline-block;
  padding: 3px;
}
.j25.sectionChatInbox > .inboxList > .conversation > .metaPart > .time {
  grid-column: 3 / span 1;
  grid-row: 2 / span 1;
  font-size: 11px;
  justify-self: center;
  align-self: center;
  display: inline-block;
  padding: 3px;
}
.j25.sectionChatInbox > .inboxList > .conversation.unread > .metaPart > .caption {
  color: #777;
}
.j25.sectionChatInbox > .inboxList > .conversation.unread > .metaPart > .caption span {
  color: #555;
}
.j25.sectionChatInbox > .inboxList > .conversation.mention > .metaPart > .caption,
.j25.sectionChatInbox > .inboxList > .conversation.reminder > .metaPart > .caption,
.j25.sectionChatInbox > .inboxList > .conversation.selected > .metaPart > .caption {
  color: #fff;
}
.j25.sectionChatInbox > .inboxList > .conversation.mention > .metaPart > .caption span,
.j25.sectionChatInbox > .inboxList > .conversation.reminder > .metaPart > .caption span,
.j25.sectionChatInbox > .inboxList > .conversation.selected > .metaPart > .caption span {
  color: #f0f0f0;
}
.j25.sectionChatInbox > .inboxList > .conversation.unread > .metaPart > .caption .stampOnline,
.j25.sectionChatInbox > .inboxList > .conversation.mention > .metaPart > .caption .stampOnline,
.j25.sectionChatInbox > .inboxList > .conversation.reminder > .metaPart > .caption .stampOnline,
.j25.sectionChatInbox > .inboxList > .conversation.selected > .metaPart > .caption .stampOnline {
  color: #333;
}
.j25.sectionChatInbox > .inboxList > .conversation.unread > .metaPart > .caption .stampOffline {
  color: #333;
}
.j25.sectionChatInbox > .inboxList > .conversation.unread > .metaPart > .preview .typeDescriptor {
  color: #333;
}
.j25.sectionChatInbox > .inboxList > .conversation.mention > .metaPart > .caption .stampOffline,
.j25.sectionChatInbox > .inboxList > .conversation.reminder > .metaPart > .caption .stampOffline,
.j25.sectionChatInbox > .inboxList > .conversation.selected > .metaPart > .caption .stampOffline {
  color: #f0f0f0;
}
.j25.sectionChatInbox > .inboxList > .conversation.mention > .metaPart > .preview,
.j25.sectionChatInbox > .inboxList > .conversation.reminder > .metaPart > .preview,
.j25.sectionChatInbox > .inboxList > .conversation.selected > .metaPart > .preview {
  color: #fff;
}
.j25.sectionChatInbox > .inboxList > .conversation.mention > .metaPart > .preview .typeDescriptor,
.j25.sectionChatInbox > .inboxList > .conversation.reminder > .metaPart > .preview .typeDescriptor,
.j25.sectionChatInbox > .inboxList > .conversation.selected > .metaPart > .preview .typeDescriptor {
  color: #e0e0e0;
}
.j25.sectionChatInbox > .inboxList > .conversation.mention > .metaPart > .date,
.j25.sectionChatInbox > .inboxList > .conversation.reminder > .metaPart > .date,
.j25.sectionChatInbox > .inboxList > .conversation.selected > .metaPart > .date {
  color: #fff;
}
.j25.sectionChatInbox > .inboxList > .conversation.mention > .metaPart > .time,
.j25.sectionChatInbox > .inboxList > .conversation.reminder > .metaPart > .time,
.j25.sectionChatInbox > .inboxList > .conversation.selected > .metaPart > .time {
  color: #fff;
}
.j25.sectionChatInbox > .inboxList > .conversationLoader {
  margin: 31px 7px 71px 7px;
  border-radius: 7px;
  padding: 11px 21px;
  background: #3ca2fe;
  color: #fff;
  border: none;
  font-weight: bold;
  font-size: 12px;
  justify-self: center;
  align-self: center;
  transition: .3s;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  justify-items: center;
  align-content: center;
  align-items: center;
}
.j25.sectionChatInbox > .inboxList > .conversationLoader:hover {
  background: #77AFFC;
}
.j25.sectionChatInbox > .inboxList > .conversationLoader[disabled] {
  opacity: 0.5;
  cursor: wait;
}
/******************************************************************************
 * Media-Selektoren: Tablets                                                  +
 ******************************************************************************/
@media screen and (min-width: 1000px) {
  .j25 .floatingToolbar .toolbar.showMore {
    justify-content: flex-start;
    max-width: unset;
  }
}
/******************************************************************************
 * Media-Selektoren: Linke Navigation nicht sichtbar                          +
 ******************************************************************************/
@media screen and (max-width: 1000px) {
  .j25 .floatingToolbar {
    padding: 0;
  }
}
/******************************************************************************
 * Media-Selektoren: Linke Navigation gekürzt sichtbar                        +
 ******************************************************************************/
@media screen and (min-width: 1000px) and (max-width: 1420px) {
  .j25 .floatingToolbar {
    padding: 0 0 0 230px;
  }
}
/******************************************************************************
 * Media-Selektoren: Smartphones                                              +
 ******************************************************************************/
@media screen and (max-width: 600px) {
  .j25 .primaryNavigation > .primaryNavigationOptionList > .primaryNavigationEntry > .label {
    display: none;
  }
  .j25.sectionContacts .toolbar > .action {
    flex-direction: row;
    min-width: 56px;
    justify-content: center;
    min-height: 48px;
  }
  .j25.sectionContacts .toolbar > .action > .icon {
    width: 24px;
    height: 24px;
    background-size: 24px;
  }
  .j25.sectionContacts .toolbar > .action > .label {
    display: none;
  }
  .j25.sectionContacts .toolbar > .action.keepLabel > .label {
    display: inline;
  }
  .j25 .action {
    min-height: 3em;
  }
  .j25 .toolbarContainer > .toolbarBurger {
    min-height: 3em;
    width: 32px;
    background-size: 3em;
  }
  .j25 .toolbarContainer > .toolbarBurger > .actionTrigger {
    height: 3em;
    width: 24px;
  }
  .j25 .action.short {
    min-width: 3em;
    gap: 0;
    justify-content: center;
  }
  .j25 .action.short > .label {
    display: none;
  }
  .j25 .toolbar.showMore .action {
    min-width: 3em;
    justify-content: center;
  }
  .j25 .toolbar.showMore .action > .label {
    display: none;
  }
  .j25 .form > .formRow > .formControls > textarea:focus {
    min-height: 40vh;
  }
  .j25 .formActionBar > .action {
    min-width: 40px;
    justify-content: center;
  }
  .j25 .formActionBar > .action > .label {
    display: none;
  }
  .j25 .formActionBar > .action.cta > .label {
    display: inline;
  }
  .j25 .floatingToolbar {
    padding: 0;
  }
  .j25.sectionContacts .contactList > .contact > .actionList > .action {
    min-width: 40px;
    justify-content: center;
  }
  .j25.sectionContacts .contactList > .contact > .actionList > .action > .label {
    display: none;
  }
  .j25.sectionContacts .contactList > .contact > .actionList > .action.keepLabel {
    min-width: 160px;
  }
  .j25.sectionContacts .contactList > .contact > .actionList > .action.keepLabel > .label {
    display: inline;
  }
  .j25.sectionContacts .contactEditor {
    grid-template-rows: 80px 1fr;
    grid-template-columns: 1fr;
  }
  .j25.sectionContacts .contactEditor .form {
    grid-column: 1 / span 1;
    grid-row: 2 / span 1;
  }
  .j25.sectionContacts .contactEditor .contact {
    grid-template-columns: 60px 1fr;
    grid-template-rows: max-content 1fr auto;
    grid-gap: 7px 13px;
    justify-items: start;
    margin: 5px 13px;
  }
  .j25.sectionContacts .contactEditor .contact > .detail > span {
    white-space: nowrap;
    max-width: unset;
  }
  .j25.sectionContacts .contactEditor .contact > .detail {
    grid-column: 2 / span 1;
    grid-row: 2 / span 1;
    max-width: unset;
    gap: 7px;
    align-content: unset;
  }
  .j25.sectionContacts .contactEditor .contact > .nickname {
    grid-column: 2 / span 1;
    grid-row: 1 / span 1;
  }
  .j25.sectionContacts .contactEditor .contact > .profileImage img {
    width: 60px;
    height: 60px;
  }
  .j25.sectionContacts .contactEditor .contact > .profileImage {
    grid-column: 1 / span 1;
    grid-row: 1 / span 4;
  }
  .j25 .pageNavigation {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .j25 .pageNavigation > .actionBar {
    grid-template-columns: 50px 1fr 40px 50px;
    min-width: 150px;
  }
  .j25 .pageNavigation > .actionBar > .action {
    justify-content: center;
    min-width: unset;
    max-width: 50px;
  }
  .j25 .pageNavigation > .actionBar > .action > .label {
    display: none;
  }
}
.limbus .card {
  background: #f0f0f0;
  border: 2px solid #d0d0d0;
  border-radius: 13px;
  padding: 0;
  margin: 15px 7px;
  overflow: hidden;
  box-shadow: 3px 3px 7px rgba(150, 150, 150, 0.125);
}
.limbus .card .caption {
  font-size: 180%;
  padding: 10px 10px 15px 10px;
  margin: 0 0 20px 0;
  background: #fff;
  line-height: 1.5;
  text-align: center;
  border-bottom: 1px solid #d0d0d0;
}
.limbus .card .body {
  margin: 10px 20px;
}
.limbus .card .body p {
  padding: 0 0 11px 0;
  line-height: 1.5;
}
.limbus .card .body .scrollbox {
  background: #fff;
  max-height: 50vh;
  overflow-y: auto;
  padding: 20px;
}
.limbus .card .body .scrollbox .infosTerms {
  font-size: 1em;
}
.limbus .card .body .entry {
  display: flex;
  flex-direction: row;
  gap: 11px;
  margin: 10px 0;
}
.limbus .card .body .entry .icon {
  width: 100px;
  height: 100px;
}
.limbus .card .body .entry .icon img {
  max-width: unset;
}
.limbus .card .body .entry .text {
  line-height: 1.5;
  padding: 3px;
}
.limbus .card .body .countdownLarge {
  font-weight: 300;
  font-size: 350%;
  text-align: center;
  color: #999;
  margin: 1.5rem 0;
  background: #fff;
  padding: 17px;
  border-radius: 17px;
}
.limbus .card .body .countdownLarge.active {
  color: #f00;
}
.limbus .card .body .countdownSmall {
  margin: 0.5rem 0 1.5rem 0;
  font-size: 80%;
  font-weight: 300;
  color: #555;
  text-align: center;
}
.limbus .card .body ul {
  margin: 0;
  padding: 0 0 0 20px;
}
.limbus .card .body ul li {
  margin: 3px 13px 7px 3px;
}
.limbus .actionRow {
  display: flex;
  justify-content: space-around;
  gap: 20px;
  margin: 20px 10px;
  flex-wrap: wrap;
  flex-direction: column;
}
.limbus .formRow {
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  gap: 10px;
  margin: 20px 10px 30px 10px;
}
.limbus .formRow > label {
  padding: 3px 7px;
  font-size: 80%;
  font-weight: 700;
  text-transform: uppercase;
}
.limbus .formRow .optionSet {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 5px;
}
.limbus .formRow .optionSet .optionRow {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  align-items: stretch;
  justify-content: flex-start;
  gap: 3px;
  padding: 3px 0;
}
.limbus .formRow .optionSet .optionRow input[type="radio"] {
  min-width: 20px;
  min-height: 20px;
  display: inline-block;
  margin: 7px 7px;
  align-self: flex-start;
}
.limbus .formRow .optionSet .optionRow input[type="checkbox"] {
  min-width: 20px;
  min-height: 20px;
  display: inline-block;
  margin: 7px 7px;
  align-self: flex-start;
}
.limbus .formRow .optionSet .optionRow span {
  line-height: 1.5;
  flex-grow: 1;
  align-self: center;
}
.limbus .formRow .input,
.limbus .formRow input[type="text"],
.limbus .formRow input[type="email"],
.limbus .formRow input[type="password"] .limbus .formRow select,
.limbus .formRow textarea {
  padding: 13px;
  width: calc(74%);
  line-height: 1.7;
  background: #fff;
}
.limbus .multiSelectRow {
  display: flex;
  margin: 3px 0;
  padding: 11px;
  border: 1px solid #333;
  background: #fff;
  border-radius: 7px;
  gap: 7px;
  line-height: 1.5;
  transition: .1s;
  cursor: pointer;
}
.limbus .multiSelectRow:hover {
  background: #eff;
}
.limbus .multiSelectRow .text {
  flex-grow: 2;
  align-self: center;
}
.limbus .multiSelectRow .category {
  display: block;
  color: #777;
  font-weight: 400;
}
.limbus .multiSelectRow .nowrap {
  white-space: nowrap;
}
.limbus .multiSelectRow input[type="checkbox"] {
  min-width: 20px;
  min-height: 20px;
  align-self: center;
  justify-self: center;
}
.limbus .detailRow {
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: center;
  margin: 7px 0;
  padding: 7px 7px 7px 0;
  border-radius: 7px;
  transition: .3s;
}
.limbus .detailRow:hover {
  background: #ffc;
}
.limbus .detailRow .detail {
  flex-grow: 200;
  display: inline-flex;
  align-items: center;
  font-size: 120%;
  gap: 7px;
  line-height: 1.5;
}
.limbus .detailRow .detail img {
  max-height: 2em;
}
.limbus .detailRow label {
  display: inline-flex;
  width: 20vw;
  max-width: 120px;
  padding: 7px;
  font-weight: 500;
  font-size: 75%;
  color: #555;
  text-transform: uppercase;
  line-height: 1.5;
}
.limbus #profilePinCounter {
  position: fixed;
  top: 50px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-direction: row;
}
.limbus #profilePinCounter .box {
  background: #ffc;
  color: #555;
  font-size: 1.2em;
  z-index: 10000000000;
  padding: 11px;
  border-radius: 7px;
  border: 1px solid #888;
  transition: .3s;
}
.limbus #profilePinCounter .critical {
  color: #f44;
  font-weight: bold;
}
.limbus .fixed {
  font-family: monospace;
}
.limbus .hidden {
  display: none;
}
.limbus .button {
  border-radius: 25px;
  padding: 11px 23px;
  transition: .3s;
  line-height: 1.7;
  font-weight: 700;
  min-width: 210px;
  text-align: center;
}
.limbus .button[disabled] {
  opacity: 0.5;
}
.limbus .button.small {
  min-width: 60px;
  font-size: 1.0em;
  font-weight: 500;
  padding: 7px;
}
.limbus .button.white {
  border: 1px solid #999;
  background: #fff;
  cursor: pointer;
  color: #333;
}
.limbus .button.white:hover {
  background: #aaa;
}
.limbus .button.red {
  border: 1px solid #622;
  background: #733;
  cursor: pointer;
  color: #fff;
}
.limbus .button.red:hover {
  background: #f88;
  border-color: #b99;
}
.limbus .button.green {
  border: 1px solid #262;
  background: #373;
  cursor: pointer;
  color: #fff;
}
.limbus .button.green:hover {
  background: #8f8;
  border-color: #9b9;
}
.limbus .button.blue {
  border: 1px solid #226;
  background: #337;
  cursor: pointer;
  color: #fff;
}
.limbus .button.blue:hover {
  background: #88f;
  border-color: #99b;
}
.limbus .alert {
  padding: 13px;
  margin: 13px 10px;
  border-radius: 9px;
  border-width: 2px;
  border-style: solid;
  line-height: 1.7;
  box-shadow: 3px 3px 7px rgba(150, 150, 150, 0.125);
}
.limbus .alert.yellow {
  background: #ffefa0;
  border-color: #cb8;
}
.limbus .alert.red {
  background: #ffc0c0;
  border-color: #c88;
}
.limbus .alert.green {
  background: #e0ffe0;
  border-color: #8c8;
}
.limbus .alert.blue {
  background: #e0efff;
  border-color: #89c;
}
.limbus .alert.pink {
  background: #ffd0ff;
  border-color: #a8a;
}
.limbus .alert.purple {
  background: #e0a0ff;
  border-color: #a6a;
}
.limbus .info {
  padding: 7px;
  margin: 13px 7px;
  border-radius: 9px;
  border-width: 2px;
  border-style: solid;
  line-height: 1.7;
  box-shadow: 3px 3px 7px rgba(150, 150, 150, 0.125);
}
.limbus .info .headline {
  font-size: 140%;
  font-weight: 700;
  padding: 3px 20px;
}
.limbus .card .info .headline {
  padding: 3px 10px 5px 10px;
}
.limbus .card .info p {
  padding: 3px 10px 5px 10px;
}
.limbus .info ul li {
  margin: 3px 13px 7px 3px;
}
.limbus .info.white {
  background: #fff;
  border-color: #bbb;
}
.limbus .info.yellow {
  background: #ffefa0;
  border-color: #cb8;
}
.limbus .info.red {
  background: #ffc0c0;
  border-color: #c88;
}
.limbus .info.green {
  background: #e0ffe0;
  border-color: #8c8;
}
.limbus .info.blue {
  background: #e0efff;
  border-color: #89c;
}
.limbus .info.pink {
  background: #ffd0ff;
  border-color: #a8a;
}
.limbus .info.purple {
  background: #f1d4ff;
  border-color: #a6a;
}
.limbus .info .scrollbox {
  background: #fff;
  max-height: 50vh;
  overflow-y: auto;
  padding: 20px 10px;
}
.limbus .info .scrollbox #infoSection {
  margin: 0;
}
.limbus .info .scrollbox .infosTerms {
  font-size: 1em;
}
.limbus .info .scrollbox .headline {
  margin-left: 0;
  padding-left: 0;
}
.limbus .info.yellow .headline {
  color: #763;
}
.limbus .info.red .headline {
  color: #733;
}
.limbus .info.green .headline {
  color: #373;
}
.limbus .info.blue .headline {
  color: #347;
}
.limbus .info.pink .headline {
  color: #737;
}
.limbus .info.purple .headline {
  color: #636;
}
.limbus #refreshOptionBlock > div {
  background: #ffa;
  color: #000;
  display: flex;
  flex-direction: row;
  gap: 13px;
  align-items: flex-start;
  justify-content: center;
}
.limbus #refreshOptionBlock button {
  padding: 7px 11px;
  min-width: unset;
  margin: 7px 3px;
}
.limbus #refreshOptionBlock p {
  padding: 7px;
  align-self: center;
  line-height: 1.8;
  font-weight: 400;
}
.limbus .inputGroup {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  align-content: center;
  justify-items: flex-start;
}
.limbus .inputGroup * {
  border-radius: 0;
  border-right-width: 0;
}
.limbus .inputGroup .button {
  padding: 9px 20px;
  min-width: unset;
}
.limbus .formRow .inputGroup input[type="text"],
.limbus .formRow .inputGroup input[type="password"] {
  width: auto;
  flex-grow: 2;
}
.limbus .inputGroup *:first-child {
  border-top-left-radius: 10px !important;
  border-bottom-left-radius: 10px !important;
}
.limbus .inputGroup *:last-child {
  border-top-right-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
  border-right-width: 1px;
}
.limbus .registrationAssistantProgress {
  white-space: nowrap;
  color: #a0a0a0;
  font-weight: 400;
}
.limbus .userProofVerificationContainer {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}
.limbus .userProofVerificationContainer img {
  max-width: 60vw;
  border-radius: 17px;
  width: 90%;
}
@media screen and (min-width: 600px) {
  .limbus .multiSelectRow {
    gap: 13px;
  }
  .limbus .actionRow {
    flex-direction: row-reverse;
  }
}
.swupContainer {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
  box-sizing: border-box;
}
.swupContainer .caption {
  font-weight: 600;
  color: #555;
  margin: 0.5em 0 1.2em 0;
}
.swupFile {
  margin: 13px;
  padding: 13px;
  grid-row: 1 / span 1;
  grid-column: 1 / span 1;
  visibility: hidden;
}
.swupDropTarget {
  transition: .7s;
  margin: 32px;
  z-index: 2500;
  padding: 13px;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(7px);
  border: 3px dashed rgba(80, 80, 80, 0.5);
  border-radius: 30px;
  justify-items: center;
  align-items: center;
  align-content: center;
  justify-content: center;
  opacity: 0.0;
  grid-column: 1 / span 1;
  grid-row: 1 / span 1;
  display: none;
}
.swupDropTarget.visible {
  opacity: 1.0;
}
.imagePreviewBuffer {
  display: none;
  max-width: 256px;
  height: auto;
}
.swupZoneFrame {
  background: #fff;
  border: 2px solid rgba(187, 187, 187, 0.5);
  border-radius: 11px;
  min-height: 400px;
  justify-content: center;
  align-content: center;
  justify-items: center;
  align-items: center;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  margin: 11px;
  padding: 30px;
  grid-column: 1 / span 1;
  grid-row: 1 / span 1;
  box-sizing: border-box;
}
.swupZoneFrame > * {
  grid-column: 1 / span 1;
  grid-row: 1 / span 1;
}
.swupZone {
  display: flex;
  flex-direction: column;
  justify-items: center;
  align-content: center;
  flex-wrap: nowrap;
  align-items: center;
  gap: 13px;
  grid-row: 1 / span 1;
  grid-column: 1 / span 1;
}
.swupLayer {
  background: rgba(255, 255, 255, 0.7);
  border: 2px solid rgba(127, 127, 127, 0.5);
  border-radius: 13px;
  padding: 13px;
  min-width: min(300px, 50%);
  min-height: min(50vh, 400px);
  display: flex;
  flex-direction: column;
  z-index: 500;
  backdrop-filter: blur(7px);
}
.swupIntro {
  margin-top: 50px;
}
.swupIntro img {
  height: min(30vw, 13em);
}
.swupInit img.fatal {
  width: min(30vw, 13em);
  margin-bottom: 17px;
}
.swupInitCaption,
.swupUploadCaption {
  font-weight: 600;
  color: #777;
  padding: 13px 0 9px 0;
  max-width: min(320px, 50vw);
}
.swupInitExplanation,
.swupUploadExplanation {
  font-weight: 200;
  color: #555;
  padding: 0 0 7px 0;
  max-width: min(320px, 50vw);
  line-height: 1.3;
}
.swupInitCaption.fatal {
  color: #700;
}
.swupInitExplanation.fatal {
  color: #500;
}
.swupZone {
  justify-self: stretch;
  gap: 3px;
}
.swupZone progress {
  height: 30px;
  width: min(250px, 50%);
  box-sizing: border-box;
}
.swupZone progress::-webkit-progress-bar,
.swupZone progress::-moz-progress-bar {
  background: rgba(240, 240, 240, 0.7);
  border-radius: 7px;
  border: 2px solid rgba(192, 192, 192, 0.5);
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5) inset;
}
.swupZone progress::-webkit-progress-value,
.swupZone progress::-moz-progress-value {
  background: rgba(90, 90, 90, 0.9);
}
.swupExplanationText {
  font-size: 1.2em;
  margin-bottom: 30px;
}
.swupExplanationText p {
  color: #555;
  padding: 0 0 5px 0;
  line-height: 1.3;
  font-weight: 400;
}
.swupExplanationText .caption {
  font-weight: 600;
  color: #777;
  padding: 0 0 7px 0;
}
.swupExplanationText ul {
  list-style: circle;
  margin: 0 0 7px 0;
  padding: 0 21px;
}
.swupExplanationText ul li {
  line-height: 1.5;
  padding: 0 0 7px 0;
  margin: 0 0 0 2em;
}
.swupZone .uploadHint {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 5px;
  padding: 5px;
}
.swupZone .uploadHint .hintMessage {
  display: block;
  padding: 5px 13px;
  border: 1px solid;
  border-radius: 5px;
  font-weight: 900;
  min-width: 200px;
  max-width: 240px;
  line-height: 1.5;
}
.swupZone .uploadHint .hintMessage.information {
  border-color: #667480;
  background: #E0F7FF;
  color: #667480;
}
.swupZone .uploadHint .hintMessage.warning {
  border-color: #997c3d;
  background: #fcdd96;
  color: #997c3d;
}
.swupZone .uploadHint .hintMessage.fatal {
  border-color: #b34747;
  background: #ffb3b3;
  color: #b34747;
}
.swupStart .swupExplanationText {
  max-width: min(320px, 50vw);
}
.swupUploadConfirmation .swupExplanationText {
  justify-self: start;
  align-self: start;
}
.swupActionListPrimary {
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-start;
  align-items: stretch;
  min-width: min(240px, 40vw);
  margin-bottom: 70px;
}
.swupActionListSecondary {
  display: flex;
  flex-direction: row;
  gap: 9px;
  flex-wrap: wrap;
  align-content: stretch;
  justify-content: space-around;
  align-items: center;
}
.swupActionListToolbar {
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  align-content: stretch;
}
.swupActionListToolbar .swupAction {
  justify-content: center;
}
.swupActionGroup {
  display: flex;
  flex-direction: row;
  gap: 3px;
  justify-content: space-evenly;
  align-items: stretch;
  align-content: stretch;
  flex-wrap: nowrap;
  max-width: 100%;
}
.swupActionGroup .swupLabel {
  align-self: center;
}
.swupDropdown {
  padding: 7px;
  background: #fff;
  border: 1px solid #999;
  border-radius: 7px;
  color: #000;
  box-sizing: border-box;
  line-height: 1.3;
  font-size: 14px;
}
.swupAction {
  background: rgba(240, 240, 240, 0.5) !important;
  border: 2px solid rgba(187, 187, 187, 0.5) !important;
  border-radius: 7px !important;
  padding: 7px 11px !important;
  cursor: pointer !important;
  color: #555 !important;
  transition: .7s;
  font-weight: 500;
  display: inline-grid !important;
  align-items: center;
  justify-items: start;
  justify-content: start;
  align-content: center;
  margin: 0 !important;
}
.swupAction.action {
  background: rgba(224, 247, 255, 0.5);
  color: #406f80 !important;
}
.swupAction:hover {
  background: #f0f0f0;
  color: #000;
}
.swupAction:focus {
  background: #ffffd9;
  color: #808040;
}
.swupAction:active {
  background: #e0f7ff;
  color: #00b8fe;
}
.swupAction.active {
  border-color: #ff893c;
  background: rgba(255, 137, 60, 0.5);
  color: #9b4f27;
}
.swupAction[disabled] {
  opacity: 0.3;
  cursor: default;
}
.swupAction .icon {
  height: 2.5em;
}
.swupActionListToolbar .swupAction {
  justify-items: center;
}
.swupActionListToolbar .swupAction .label {
  text-overflow: ellipsis;
  max-width: 90px;
  overflow: hidden;
  max-height: 1.5em;
  line-height: 1.5em;
}
.swupActionListToolbar .swupAction .icon img {
  max-width: auto;
  max-height: 100%;
}
.swupActionListPrimary .swupAction {
  grid-template-rows: 1fr;
  grid-template-columns: auto 1fr;
  grid-gap: 13px;
}
.swupActionListPrimary .swupAction .icon {
  grid-column: 1 / span 1;
  grid-row: 1 / span 1;
}
.swupActionListPrimary .swupAction .label {
  grid-column: 2 / span 1;
  grid-row: 1 / span 1;
}
.swupColorSelector {
  width: 2.5em;
  height: 2.5em;
  display: inline-flex;
  border-radius: 50%;
  border: 2px solid rgba(64, 64, 64, 0.5);
  cursor: pointer;
}
.swupColorSelector.active {
  border-color: #ff893c;
}
.swupViewCanvas {
  max-width: min(100%, 75vw);
  min-width: 240px;
  min-height: 240px;
  background: url("//s.jappy.com/i/icon/loading_white_bg.gifX") center no-repeat;
  background-size: 150px;
  background-color: rgba(255, 255, 255, 0);
  width: 480px;
  height: auto;
  margin: 0;
  padding: 0;
}
.swupPreview {
  display: flex;
  width: 100%;
  max-width: 100%;
  align-items: start;
  justify-items: center;
  justify-content: center;
  align-content: center;
  margin: 0 0 20px 0;
  overflow: hidden;
  flex-wrap: wrap;
  flex-direction: column;
}
.swupPreview .swupPreviewNormal,
.swupPreview .swupPreviewThumbnail {
  border: 2px solid rgba(187, 187, 187, 0.5);
  border-radius: 11px;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
}
.swupPreview .swupPreviewNormal {
  min-width: 240px;
  max-width: 70%;
  overflow: hidden;
}
.swupPreview .swupPreviewThumbnail {
  min-width: 240px;
  max-width: 70%;
  overflow: hidden;
}
.swupViewCanvasEditor {
  transition: .5s;
  background-size: contain;
  min-width: 240px;
  min-height: 240px;
  aspect-ratio: 1;
  display: inline-block;
}
.swupRuleSet,
.swupRuleSet ul {
  list-style: disc;
  margin: 3px 0 5px 15px;
  line-height: 1.3;
  padding: 0 21px;
}
.swupRuleSet li {
  margin: 0 0 5px 20px;
  padding: 0;
}
.swupFormRow {
  display: flex;
  max-width: 400px;
  flex-direction: column;
  gap: 7px;
  justify-content: stretch;
  align-items: stretch;
  justify-items: stretch;
  margin: 0 0 7px 0;
  box-sizing: border-box;
  width: 100%;
}
.swupFormRow label {
  padding: 5px;
  font-size: 11px;
  font-weight: 800;
  color: #555;
  box-sizing: border-box;
}
.swupFormRow input[type="text"],
.swupFormRow textarea {
  width: 100%;
  min-height: 5em;
  padding: 7px;
  background: #fff;
  border: 1px solid #999;
  border-radius: 7px;
  color: #000;
  box-sizing: border-box;
  line-height: 1.3;
  font-size: 14px;
}
.swupFormEntry.range {
  display: grid;
  grid-gap: 3px;
  grid-template-rows: auto 1fr;
  grid-template-columns: 1fr auto;
}
.swupFormEntry.range label {
  grid-column: 1 / span 2;
  grid-row: 1 / span 1;
}
.swupFormEntry.range input[type="range"] {
  grid-column: 1 / span 1;
  grid-row: 2 / span 1;
}
.swupFormEntry.range input[type="number"] {
  grid-column: 2 / span 1;
  grid-row: 2 / span 1;
  border: none;
  background: #f0f0f0;
  text-align: center;
  color: #333;
  font-weight: 900;
}
.swupFormEntry.radio {
  display: grid;
  grid-gap: 3px;
  grid-template-columns: 1fr auto;
  grid-template-rows: 1fr auto;
}
.swupFormEntry.radio input {
  grid-row: 1 / span 1;
  grid-column: 1 / span 1;
}
.swupFormEntry.radio .label {
  display: inline;
  grid-row: 1 / span 1;
  grid-column: 2 / span 1;
}
.swupFormEntry.radio .explanation {
  display: inline;
  line-height: 1.3;
  font-size: 11px;
  grid-row: 2 / span 1;
  grid-column: 2 / span 1;
  padding: 0 5px;
}
.swupInfo {
  padding: 7px;
  margin: 13px 7px;
  border-radius: 9px;
  border-width: 2px;
  border-style: solid;
  line-height: 1.7;
  box-shadow: 3px 3px 7px rgba(150, 150, 150, 0.125);
}
.swupInfo .headline {
  font-size: 140%;
  font-weight: 700;
  padding: 3px 3px;
}
.swupInfo ul li {
  margin: 3px 13px 7px 3px;
}
.swupInfo.white {
  background: #fff;
  border-color: #bbb;
}
.swupInfo.yellow {
  background: #ffefa0;
  border-color: #cb8;
}
.swupInfo.red {
  background: #ffc0c0;
  border-color: #c88;
}
.swupInfo.green {
  background: #e0ffe0;
  border-color: #8c8;
}
.swupInfo.blue {
  background: #e0efff;
  border-color: #89c;
}
.swupInfo.pink {
  background: #ffd0ff;
  border-color: #a8a;
}
.swupInfo.purple {
  background: #f1d4ff;
  border-color: #a6a;
}
.swupInfo .scrollbox {
  background: #fff;
  max-height: 50vh;
  overflow-y: auto;
  padding: 20px 10px;
}
.swupInfo .scrollbox #infoSection {
  margin: 0;
}
.swupInfo .scrollbox .infosTerms {
  font-size: 1em;
}
.swupInfo .scrollbox .headline {
  margin-left: 0;
  padding-left: 0;
}
.swupInfo.yellow .headline {
  color: #763;
}
.swupInfo.red .headline {
  color: #733;
}
.swupInfo.green .headline {
  color: #373;
}
.swpInfo.blue .headline {
  color: #347;
}
.swupInfo.pink .headline {
  color: #737;
}
.swupInfo.purple .headline {
  color: #636;
}
.swupDebugText {
  margin-bottom: 1em;
  background: #f00;
  color: #fff;
  font-weight: bold;
  border-radius: 7px;
  padding: 7px;
  display: inline-block;
}
@media screen and (max-width: 690px) {
  .swupContainer {
    max-width: 100vw;
  }
}
/* Guestbook */
.guestbook {
  width: 100%;
}
.guestbook .entry {
  width: 360px;
  margin-bottom: 10px;
  float: left;
  background: #ffffff;
  box-shadow: 0 2px 2px #cacaca;
}
.guestbook .entry.importantEntry .listOfActions {
  background: #fdd978;
}
.guestbook .entry.importantEntry {
  border-top: 5px solid #ffd460;
}
.guestbook .entry.small {
  width: 210px;
  margin-right: 10px;
}
.guestbook .entry:hover .name {
  display: block;
}
.guestbook .head .profileImage {
  float: left;
  width: 75px;
  padding-top: 10px;
  padding-bottom: 5px;
}
.guestbook .head .profileImage img {
  border-radius: 50%;
  width: 50px;
  margin-left: 15px;
}
.guestbook .head .basics {
  float: left;
  padding-top: 15px;
}
.guestbook .head .basics .stamp {
  font-size: 120%;
  font-weight: 500;
  padding-bottom: 5px;
}
.guestbook .head .status {
  float: right;
  padding: 5px;
}
.guestbook .text {
  padding: 5px 15px;
  font-size: 110%;
}
.guestbook .text img {
  max-width: 330px;
}
.guestbook .headOptions {
  margin-left: 200px;
}
.guestbook .headOptions a {
  float: left;
  width: 30px;
  padding: 15px;
  height: 30px;
  border-radius: 50%;
  display: block;
  background: #ec6449;
}
.guestbook .comments {
  width: 100%;
}
.guestbook .comments .commentEntry {
  clear: both;
  border-bottom: 1px solid #f2f2f2;
  padding-bottom: 9px;
  padding-top: 5px;
}
.guestbook .comments .commentEntry:last-child {
  border: none;
}
.guestbook .comments .headline .options {
  float: left;
  color: #999999;
}
.guestbook .comments .picture {
  float: left;
  width: 75px;
  padding-top: 5px;
}
.guestbook .comments .picture img {
  width: 35px;
  margin-left: 25px;
  min-height: 35px;
  border-radius: 50%;
}
.guestbook .comments .plain {
  float: left;
  width: 270px;
}
.guestbook .comments .plain .commentText {
  color: #000000;
  padding-right: 5px;
  padding-top: 5px;
  line-height: 140%;
}
.guestbook .comments .plain img {
  vertical-align: text-bottom;
}
.guestbook .comments .plain .headline {
  padding-bottom: 0px;
  font-size: 11px;
  padding-top: 5px;
}
.guestbook .commentBox {
  width: 100%;
  border-top: 1px solid #f2f2f2;
  padding-top: 10px;
  padding-bottom: 5px;
}
.guestbook .commentBox .profileImage {
  float: left;
  width: 75px;
  text-align: right;
}
.guestbook .commentBox .profileImage img {
  width: 35px;
  margin-right: 7px;
  min-height: 35px;
  border-radius: 50%;
}
.guestbook .commentBox .plain {
  float: left;
}
.guestbook .commentBox .inputComment {
  width: 250px;
  padding: 5px 10px;
  border-radius: 3px;
  padding-top: 8px;
  line-height: 130%;
  min-height: 52px;
  border: 1px solid #c8c8c8;
}
.guestbook .commentBox .inputComment.small {
  min-height: 18px;
}
.guestbook .commentBox .inputComment:focus {
  color: #000000;
  border: 1px solid #b6b6b6;
  background: #ffffff;
}
.guestbook .commentBox .buttonSend:hover {
  border: 1px solid #000000;
  color: #000000;
}
.guestbook .commentBox .features {
  position: absolute;
  z-index: 2;
  width: 150px;
  padding-top: 3px;
  height: 25px;
  display: none;
}
.guestbook .commentBox .editor {
  border: none;
  background: #ffffff;
  width: 250px;
}
.guestbook .commentBox .editor .smilies .entry {
  border-bottom: none;
}
.guestbook .commentBox .editor .smilies .entries {
  border: none;
}
.guestbook .commentBox .resizeFrame {
  background: none;
}
.guestbook .commentBox .actionSelector {
  padding: 0;
}
.guestbookPrivateEntry {
  background: #ffffff;
  border: 1px solid #dadada;
  padding: 30px 15px;
  margin-bottom: 10px;
  font-size: 140%;
  float: left;
  width: 520px;
}
#guestbookContainer .return {
  padding: 5px 25px;
}
#guestbookContainer .return a {
  color: #6c6c6c;
  background: #ddd;
  font-weight: 300;
  display: inline-block;
  padding: 12px 25px;
  margin-right: 5px;
  border-radius: 20px;
  text-align: center;
}
#guestbookContainer .return a img {
  height: 3em;
  border-radius: 50%;
}
#guestbookContainer .frame {
  padding: 5px 25px;
}
#guestbookContainer .frame .buttons {
  margin: 10px;
}
#guestbookContainer .frame .buttons .button {
  text-align: center;
  background: #fff;
  border: 1px solid #e5e5e5;
  color: #585858;
  cursor: pointer;
  font-size: 110%;
  padding: 15px 25px;
  margin: 0 3px 3px 0;
  border-radius: 20px;
  display: inline-block;
  float: left;
}
#guestbookContainer .frame .buttons .button:hover {
  background: #ffedb0;
  border: 1px solid #a89c74;
  color: #333333;
  transition: 0.5s;
}
#guestbookContainer .frame .buttons .button.action {
  border: 1px solid #47c6f8;
  color: #fff;
  background: #49ccff;
}
#guestbookContainer .frame .buttons .button.action:hover {
  background: #00acef;
  border: 1px solid #00acef;
  transition: 0.5s;
}
#guestbookContainer .frame .buttons .button.createEntry {
  border: 1px solid #97c224;
  color: #fff;
  background: #97c224;
}
#guestbookContainer .frame .buttons .button.createEntry:hover {
  background: #8DC200;
  border: 1px solid #8DC200;
  transition: 0.5s;
}
#guestbookContainer .frame .buttons .button.important {
  border: 1px solid #ffa225;
  color: #fff;
  background: #ffa225;
}
#guestbookContainer .frame .buttons .button.important:hover {
  background: #ffb756;
  transition: 0.5s;
}
#guestbookContainer .frame .buttons .button[disabled] {
  background: #aaa;
  border: 1px solid #999;
  color: #fff;
  cursor: not-allowed;
}
#guestbookContainer .frame .buttons .button[disabled]:hover {
  background: #aaa;
}
#guestbookContainer .frame .buttons.small .button {
  padding: 7px 10px;
  border-radius: 10px;
}
#guestbookContainer .frame .pager {
  padding: 15px 15px 0px 15px;
}
#guestbookContainer .frame .pager > * {
  min-height: 1px;
}
#guestbookContainer .frame .pager .numberOfEntries {
  float: left;
  width: 190px;
  padding: 11px 0px;
}
#guestbookContainer .frame .pager .navigationPrevious {
  float: left;
  width: 100px;
}
#guestbookContainer .frame .pager .navigationPrevious button {
  display: inline-block;
  border: 1px solid #999;
  border-radius: 7px 0px 0px 7px;
  width: 100%;
  height: 32px;
  border-right: none;
}
#guestbookContainer .frame .pager .navigationPageSelection {
  float: left;
  width: 100px;
}
#guestbookContainer .frame .pager .navigationPageSelection select {
  border: 1px solid #999;
  width: 100%;
  padding: 7px;
  text-align: center;
  background: #fff;
  height: 32px;
}
#guestbookContainer .frame .pager .navigationNext {
  float: left;
  width: 100px;
}
#guestbookContainer .frame .pager .navigationNext button {
  display: inline-block;
  border: 1px solid #999;
  border-radius: 0px 7px 7px 0px;
  width: 100%;
  height: 32px;
  border-left: none;
}
#guestbookContainer .frame .guestbookEntry {
  background: #fff;
  padding: 13px;
  border-radius: 13px;
  margin-bottom: 13px;
}
#guestbookContainer .frame .guestbookEntry .meta {
  padding: 3px 7px;
  margin-bottom: 10px;
  color: #555;
  font-size: 10px;
}
#guestbookContainer .frame .guestbookEntry .content {
  padding: 3px 7px;
  margin-bottom: 13px;
}
#guestbookContainer .frame .guestbookEntry .comments {
  padding: 3px 7px;
}
#guestbookContainer .frame .guestbookEntry .comments .caption {
  font-size: 120%;
  font-weight: 400;
  padding: 12px 0px;
  color: #777;
  margin-top: 13px;
}
#guestbookContainer .frame .guestbookEntry .comments .commentEditor textarea {
  border: none;
  display: block;
  width: calc(100% - 150px);
  padding: 3px;
}
#guestbookContainer .frame .guestbookEntry .comments .comment {
  border: 1px solid #23c2ff;
  border-radius: 10px;
  margin: 0px 25% 7px 0px;
}
#guestbookContainer .frame .guestbookEntry .comments .comment.owner {
  margin: 0px 0px 7px 25%;
}
#guestbookContainer .frame .guestbookEntry .flR {
  float: right;
}
#guestbookEntryImageContentArea .fileSelection .headline {
  font-size: 150%;
  font-weight: 300;
  color: #555555;
  text-align: center;
}
#guestbookEntryImageContentArea .prepareImage {
  animation: prepareImage 1.0s infinite;
  width: 100px;
  margin: auto;
}
#guestbookEntryImageContentArea .imageUploadStatus {
  padding: 0 20px;
  text-align: center;
  color: #999;
  font-weight: bold;
}
#guestbookEntryImageContentArea .imageUploadStatus .info {
  font-weight: 300;
  color: #999999;
  margin-top: 20px;
}
#guestbookEntryImageContentArea .removeImage {
  text-align: center;
  color: #999;
  padding: 10px;
  background: #e5e5e5;
  margin-top: 10px;
  width: 340px;
  cursor: pointer;
  border-radius: 10px;
}
#guestbookEntryImageContentArea .imageUploadStatus .headline {
  font-weight: 300;
  padding: 20px;
  font-size: 150%;
}
#guestbookEntryImageContentArea .nonMobile {
  display: none;
}
#guestbookEntryImageContentArea button {
  background: #f0f0f0;
  border: 1px solid #aaa;
  padding: 13px;
  border-radius: 7px;
  cursor: pointer;
  margin: 13px 5px;
  color: #aaa;
  display: inline-block;
}
#guestbookEntryImageContentArea button:hover {
  background: #f8f8f8;
  color: #000;
}
#guestbookEntryImageContentArea button[type="submit"] {
  border-color: #ffa124;
  color: #fff;
  background: #ffa124;
}
#guestbookEntryImageContentArea button[type="submit"]:disabled {
  border-color: #999;
  color: #999;
  background: #e5e5e5;
  cursor: default;
}
#guestbookEntryImageContentArea .cameraButton {
  background: #f0f0f0;
  border: 1px solid #aaa;
  padding: 8px;
  border-radius: 7px;
  cursor: pointer;
  margin: 13px 5px;
  color: #aaa;
  display: inline-block;
}
#guestbookEntryImageContentArea .cameraButton:hover {
  background: #f8f8f8;
}
#guestbookEntryImageContentArea .media .actionArea {
  display: flex;
  justify-items: center;
  align-items: center;
  justify-content: center;
}
#guestbookEntryImageContentArea .media .actionArea button {
  background: #f0f0f0;
  border: 1px solid #aaa;
  padding: 13px;
  border-radius: 7px;
  cursor: pointer;
  margin: 13px 5px;
  color: #aaa;
  display: inline-block;
}
#guestbookEntryImageContentArea .media .actionArea button:hover {
  background: #f8f8f8;
  color: #000;
}
#guestbookEntryImageContentArea .media .actionArea button.primary {
  border: 1px solid #ffa124;
  color: #fff;
  background: #ffa124;
  cursor: pointer;
}
#guestbookEntryImageContentArea .media .actionArea button.primary:hover {
  background: #ffb134;
}
#guestbookEntryImageContentArea .media video {
  width: 100%;
  height: auto;
}
/* Gallery */
.galleryOptions {
  background: #fffee0;
  border-bottom: 1px solid #e1e1e1;
  padding: 10px 0 11px 15px;
}
.galleryOptions a {
  margin-right: 2px;
}
.galleryContainer {
  width: 100%;
}
.galleryContainer .friends,
.galleryContainer .group,
.galleryContainer .password,
.galleryContainer .public,
.galleryContainer .back,
.galleryContainer .whitelist,
.galleryContainer .private,
.galleryContainer .profile {
  background: url(//s.jappy.com/i/icon/gallery/flG3.gif) no-repeat #ffffff;
  width: 160px;
}
.galleryContainer .friends {
  border-top: 5px solid #DCF0FF;
  background-position: 25px -160px;
}
.galleryContainer .password {
  border-top: 5px solid #fff8a7;
  background-position: 25px -340px;
}
.galleryContainer .profile {
  border-top: 5px solid #c4c4c4;
  background-position: -285px -330px;
}
.galleryContainer .group {
  border-top: 5px solid #54a7ee;
  background-position: 25px 20px;
}
.galleryContainer .public {
  border-top: 5px solid #83c108;
  background-position: 25px 20px;
}
.galleryContainer .back {
  border-top: 5px solid #ffffff;
  background-position: -130px 10px;
}
.galleryContainer .album {
  float: left;
  height: 200px;
  overflow: hidden;
  line-height: 25px;
  border: 1px solid #bbbbbb;
  border-right: 1px solid #acacac;
  border-bottom: 1px solid #acacac;
}
.galleryContainer .album a {
  width: 100%;
  height: 200px;
  display: block;
  padding-top: 6px;
  text-decoration: none;
  color: #2f2f2f;
  text-align: center;
}
.galleryContainer .album:hover {
  border: 1px solid #5da7e0;
  box-shadow: 1px 1px 2px #5da7e0;
}
.galleryContainer .element {
  float: left;
  height: 200px;
  overflow: hidden;
  box-shadow: 1px 1px 2px #9c9c9c;
  border: 1px solid #bbbbbb;
  border-right: 1px solid #acacac;
  border-bottom: 1px solid #acacac;
}
.galleryContainer .element a.imageLink {
  width: 100%;
  max-height: 170px;
  display: block;
  text-decoration: none;
  color: #2f2f2f;
  text-align: center;
  cursor: pointer;
}
.galleryContainer .element:hover {
  border: 1px solid #5da7e0;
  box-shadow: 1px 1px 2px #5da7e0;
}
.galleryContainer .album,
.galleryContainer .element {
  width: 160px;
  margin-right: 6px;
  margin-bottom: 6px;
}
.galleryContainer .pic {
  background: #f8f8f8;
}
.galleryContainer .title {
  height: 155px;
}
.galleryContainer .subtext {
  padding: 8px 15px 5px 15px;
  text-align: left;
  font-style: italic;
  background: #ffffff;
  color: #acacac;
}
.galleryStatistics {
  padding: 15px;
  margin-top: 10px;
  font-size: 90%;
  color: #777777;
  line-height: 140%;
}
.galleryContainer .authen {
  position: absolute;
  z-index: 100;
  margin-top: -100px;
  padding: 5px;
  background: #fff8a7;
  border: 1px solid #e5c34c;
  width: 153px;
  line-height: 25px;
  cursor: default;
}
.galleryContainer .setting {
  float: left;
  width: 166px;
  height: 199px;
  overflow: hidden;
  line-height: 25px;
  border-left: 1px solid #e8e8e8;
  border-top: 1px solid #e8e8e8;
  background: #f4f4f4;
}
.galleryContainer .image {
  border-bottom: 2px solid #cacaca;
}
.galleryContainer .infos {
  position: absolute;
  margin: 10px 0 0 10px;
}
.galleryContainer .infos .infoTitle {
  font-size: 120%;
  background: #ffffff;
  padding: 3px;
  color: #333333;
  font-weight: bold;
  margin-bottom: 5px;
}
.galleryContainer .option {
  position: absolute;
  margin: 10px 0 0 10px;
  width: 140px !important;
}
.galleryContainer .private {
  border-top: 5px solid #e1e1e1;
  background-position: -285px 20px;
}
.galleryImageFrame {
  padding: 0;
  overflow: visible;
  text-align: left;
  position: relative;
  margin: 0;
  z-index: 4;
  width: 100%;
}
.galleryImageFrame img {
  max-width: 100%;
}
.gallerySkyScrapperRight {
  position: absolute;
  margin-left: 650px;
  z-index: 2;
  min-height: 600px;
  width: 180px;
}
.imageRating {
  margin-left: 15px;
}
.galleryNavigation {
  margin-bottom: 10px;
}
.galleryNavigation {
  width: 100%;
  overflow: scroll;
  padding: 10px 0 10px 0;
}
.galleryNavigation a.navigation {
  padding: 0;
  width: 80px;
  margin: 0 10px;
  border-radius: 5px;
  height: 50px;
  float: left;
  text-align: center;
  display: none;
  cursor: pointer;
}
.galleryNavigation a.navigation:hover {
  background: #ffd97e;
}
.galleryNavigation a.navigation img {
  margin-top: 5px;
}
.galleryImagePreview {
  width: 100%;
  text-align: left;
}
.galleryImagePreview a.entry,
.galleryImagePreview .entry {
  width: 55px;
  height: 50px;
  padding-top: 5px;
  border-radius: 50%;
  text-align: center;
  overflow: hidden;
  display: block;
  float: left;
}
.galleryImagePreview a.entry.active {
  background: #333333;
}
.galleryImagePreview a.entry img {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: 1px solid #d3d3d3;
}
.galleryImagePreview .imageHighlight {
  border-bottom: 3px solid #348eff !important;
}
.galleryImagePreview a.entry:hover img {
  border: 1px solid #3b89cb;
}
.galleryImagePreview a.entry img.noBorder {
  opacity: 0;
  border: none !important;
  border-radius: 0%;
}
.imageTitle {
  font-size: 130%;
  margin: 5px;
  margin-top: 10px;
  margin-left: 15px;
}
.imageDescription {
  font-size: 12px;
  margin: 10px 0;
}
.galleryElement {
  min-height: 300px;
}
/* Shop */
.shopOverview .additionalInfo {
  float: left;
  background: #ffffff;
  padding: 20px 15px;
  line-height: 160%;
  font-weight: 300;
  width: 150px;
  font-size: 110%;
  min-height: 165px;
  background: #ffe178;
  border-top: 4px solid #ffc119;
}
.headlineShop {
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  max-width: 720px;
}
.headlineShop .text {
  float: left;
  font-size: 180%;
  color: #787878;
  padding: 5px 15px 0 15px;
  font-weight: 300;
}
.headlineShop .text a {
  color: #787878;
}
.headlineShop .text a:hover {
  color: #417bc4;
}
.headlineShop .more {
  float: right;
  margin-right: 16px;
}
.headlineShop .more a {
  display: block;
  background: #999999;
  font-weight: 700;
  color: #ffffff;
  padding: 7px;
  border-radius: 10px;
}
.headlineShop .more a:hover {
  background: #444444;
}
.headlineShop a.categories {
  float: right;
  position: relative;
  margin-top: -10px;
  display: block;
  border-radius: 5px;
  background: #ffffff;
  padding: 5px 10px 5px 20px;
  border: 1px solid #e0e0e0;
  font-size: 120%;
  color: #787878;
  box-shadow: 1px 1px 2px 0 #D0D0D0;
}
.headlineShop a.categories img {
  width: 25px;
  margin-left: 5px;
  vertical-align: -50%;
}
.shopOverview a.entry {
  float: left;
  display: block;
  background: #ffffff;
  border: 1px solid #dbdbdb;
  border-radius: 25px;
  margin-left: 6px;
  margin-right: 6px;
  margin-bottom: 7px;
  width: 165px;
}
.shopOverview a:hover.entry {
  border: 1px solid #52b8ff;
}
.shopOverview a.entry .icon {
  padding: 15px;
  min-height: 100px;
}
.shopOverview a.entry:last-child {
  margin-right: 0;
}
.shopOverview .giftList a.entry .sub {
  padding: 15px;
  min-height: 30px;
  background: #ffda69;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  text-align: center;
}
.shopOverview .giftList a.entry .sub .giftText {
  font-size: 100%;
  font-weight: 600;
  color: #333333;
}
.shopOverview a.entry .cost {
  position: absolute;
  z-index: 2;
  margin-top: -20px;
  margin-left: 50px;
  background: #ff9933;
  color: #ffffff;
  border-radius: 10px;
  min-width: 55px;
  max-width: 80px;
  text-align: center;
  padding: 5px;
}
.shopOverview .giftList a.entry .available {
  padding-top: 5px;
  font-size: 11px;
}
.shopOverview .giftList a.entry .available span {
  color: #333333;
}
.shopOverview .onlinestatusList a.entry .sub {
  padding: 15px;
  background: #cacaca;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  text-align: center;
}
.shopOverview .onlinestatusList a.entry .sub .giftText {
  font-size: 100%;
  color: #ffffff;
  font-weight: 600;
}
.shopOverview .onlinestatusList a.entry .available {
  padding-top: 5px;
  font-size: 11px;
  min-height: 15px;
}
.shopOverview .onlinestatusList a.entry .available span {
  color: #333333;
}
.shopOverview .onlinestatusList a.entry .available img {
  vertical-align: text-bottom;
}
.shopOverview .onlinestatusList.echos a.entry .sub {
  background: #62b6ff;
}
/* Status Onlinestatus */
#nvOnlineStatus {
  width: 100%;
}
.statusSelector {
  width: 100%;
  margin: auto;
  background: #ffffff;
  padding-bottom: 10px;
}
.statusSelector .selection {
  padding-bottom: 100px;
  width: 100%;
  padding-top: 20px;
}
.statusSelector .search {
  text-align: left;
}
.statusSelector .search input {
  margin-left: 10px;
  width: 300px;
  border-radius: 15px;
  padding: 10px 15px;
  border: none;
  background: #efefef;
  font-size: 100%;
}
.statusSelector .top {
  padding-top: 10px;
}
.statusSelector .navigation {
  width: 100%;
  overflow: scroll;
}
.statusSelector .navigation .wrapper {
  width: 100%;
  height: 40px;
  margin-bottom: 10px;
}
.statusSelector .navigation a {
  display: block;
  float: left;
  text-align: center;
  padding: 10px 10px;
  color: #666666;
  cursor: pointer;
  font-size: 100%;
  font-weight: 300;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.statusSelector .navigation a:first-child {
  margin-left: 10px;
}
.statusSelector .navigation a:hover {
  color: #ec6449;
}
.statusSelector .navigation a.activeSt {
  font-weight: bold;
  color: #49ccff;
  border-bottom: 3px solid #49ccff;
}
.statusSelector .listing {
  margin-left: 5px;
}
.statusSelector .listing a.statusIconEntry {
  display: block;
  float: left;
  overflow: hidden;
  width: 70px;
  height: 90px;
  padding: 2px;
  text-align: left;
  margin: 2px 4px 2px 4px;
  text-align: center !important;
  border-radius: 15px;
  color: #565656;
  cursor: pointer;
}
.statusSelector a.statusIconEntry.current {
  background: #444444;
  color: #ffffff;
  font-weight: normal;
  border-bottom: 2px solid #3ca2fe;
}
.statusSelector .listing a.statusIconEntry .statusText {
  display: block;
  font-size: 90%;
  font-weight: 300;
  color: #999999;
  padding-top: 10px;
  text-align: center;
}
.statusSelector .listing a.statusIconEntry .statusIconImage {
  padding-top: 5px;
  text-align: center;
}
.statusSelector .listing a.statusIconEntry .statusIconImage img {
  width: 50px;
  margin-top: 5px;
}
.statusSelector .listing a:hover.statusIconEntry {
  background: #ffedb0;
}
.statusSelector .listing a:hover.statusIconEntry .statusText {
  color: #000000;
  font-weight: 500;
}
.statusSelector .back {
  text-align: left;
}
.statusSelector .shopSuggest a.entry img {
  width: 65px;
}
.statusSelector .shopSuggest .price {
  text-align: left;
}
.statusSelector .shopSuggest .price span {
  background: #ff9933;
  color: #ffffff;
  font-weight: 300;
  position: absolute;
  margin-top: -85px;
  padding: 3px;
  border-radius: 3px;
}
.statusSelector .statusIconPrice {
  position: absolute;
  font-size: 100%;
  margin-top: 5px;
  margin-left: 15px;
}
.statusSelector .statusIconPrice span {
  border-radius: 5px;
  background: #ffa225;
  color: #ffffff;
  padding: 2px;
}
.statusIconConfirm {
  text-align: center;
  width: 100%;
}
.shopSuggest {
  background: #ffffff;
  padding: 10px 0 50px 30px;
  background: #f1f1f1;
}
.shopSuggest .headline {
  float: left;
  width: 100%;
}
.shopSuggest .headline a {
  display: block;
  padding: 20px 0;
  color: #666666;
  cursor: pointer;
  font-size: 120%;
  font-weight: 600;
}
.shopSuggest .offerings {
  float: left;
  width: 100%;
}
.shopSuggest a.entry {
  display: block;
  float: left;
  text-align: center;
  width: 46%;
  border-radius: 5px;
  padding: 1%;
  margin: 1%;
}
.shopSuggest a:hover.entry {
  background: #ffce79;
}
.shopSuggest a.entry img {
  width: 126px;
  border-radius: 10px;
}
.shopSuggest a.entry .title {
  font-size: 90%;
  font-weight: 300;
  color: #999999;
  padding-top: 5px;
}
.shopSuggest a:hover.entry .title {
  color: #000000;
  font-weight: 500;
}
/* Login Gratuity */
.newLoginGratuity {
  margin-top: 2px;
}
.newLoginGratuity .image {
  width: 200px;
  float: left;
}
.newLoginGratuity .image img {
  border: 1px solid #BCBCBC;
}
.newLoginGratuity .plain {
  width: 440px;
  margin-left: 10px;
  float: left;
}
.newLoginGratuity .headline {
  font-weight: bold;
  font-size: 18px;
  margin: 5px 0 10px 0;
}
.newLoginGratuity .actionSelector {
  padding: 0;
  margin: 20px 0 0;
}
.newLoginGratuity.specials {
  margin-top: 3px;
}
.newLoginGratuity.specials .actionSelector {
  padding: 385px 10px 15px 15px;
  width: 790px;
  height: 30px;
  margin: 0;
}
.newLoginGratuity.specials .container {
  width: 815px;
  height: 430px;
  overflow: hidden;
}
.newLoginGratuity .msInfo.important img {
  position: relative;
  top: 4px;
  right: 5px;
}
.newLoginGratuity .msInfo.important span {
  position: relative;
  right: 10px;
}
/* Zwischenlösung für Tablet und Horizontalview */
@media screen and (min-width: 600px) {
  .site .siteLeft {
    display: none;
    float: left;
  }
  .site .third {
    display: none;
    width: 0px;
  }
}
@media screen and (min-width: 600px) and (max-width: 1000px) {
  .site {
    width: 100%;
  }
  .uiSectionNavi {
    padding: 10px;
    margin-bottom: 0;
  }
  .site {
    margin: auto;
  }
  .homepage .channelsHead {
    padding: 10px;
  }
  .floatingFoot2 .counter {
    margin-left: 90px;
  }
}
@media screen and (min-width: 1000px) {
  .header .headNotifications {
    display: block;
  }
}
@media screen and (min-width: 800px) {
  .site {
    width: 790px;
  }
  .site .siteRight {
    width: 790px;
    float: left;
    overflow: visible;
    padding-bottom: 20px;
    min-height: 450px;
    background: #e5e5e5;
  }
  .suggestFeatures {
    position: absolute;
    margin-left: 600px;
  }
  .conversationEditor {
    width: 750px;
  }
  .cardList {
    width: auto !important;
  }
  .cardList .inventoryCard,
  .cardList .fakeCard {
    margin: 5px !important;
  }
  /* Mailbox */
  .inbox .left {
    float: left;
    width: 600px;
    margin-left: 20px;
  }
  .inbox .right {
    float: left;
    display: block;
  }
  .mailboxNavigation a.entry.simple .text {
    display: block;
  }
  .mailboxNavigation a.entry.simple {
    width: 130px;
  }
  .subNavigation a.addChat {
    width: 135px;
    height: 40px;
    background: #ff6c62;
    border-radius: 20px;
    margin-right: 0;
  }
  .subNavigation a.addChat .icon {
    float: left;
  }
  .subNavigation a.addChat .text {
    float: left;
    color: #ffffff;
    padding: 15px 5px;
    font-weight: 500;
    display: block;
  }
  .conversationSite {
    width: 750px;
    margin-left: 20px;
  }
  .inbox {
    width: 750px;
    margin-left: 20px;
  }
  .mailboxSelectReceiver {
    margin-left: 20px;
  }
  .listOfConversations .conversation .checkbox {
    display: block;
  }
  .listOfConversations .conversation .sender {
    margin-left: 0;
  }
  .listOfConversations .unreadCounter {
    margin-left: 50px;
  }
  .listOfConversations .conversation .subject {
    padding-bottom: 2px;
  }
  .mailboxCompose .editor {
    width: 700px;
  }
  .mailboxTextarea {
    width: 670px;
    max-width: 670px;
    margin-left: 0;
  }
  .mailboxButtonSend {
    margin-right: 0;
  }
  .mailboxCompose .editor .features {
    display: block;
  }
  .mailboxCompose .editor .smilies {
    float: right;
    margin-left: 0;
  }
  .mailConversation.mailbox {
    width: 750px;
  }
  .mailConversation.mailbox .entry .text {
    max-width: 530px;
  }
  .settingsProfileImageList {
    grid-template-columns: repeat(3, 1fr);
  }
  .profileImageQuickNavigation {
    grid-template-columns: repeat(6, 1fr);
  }
}
@media screen and (min-width: 600px) {
  .tutorialWindow .desktop {
    display: block;
  }
  .tutorialWindow .mobile {
    display: none;
  }
  .userMenu {
    right: 20px;
  }
  .userAccount.active {
    margin-right: 22px;
  }
  .headerGuestLogin {
    display: block;
  }
  .header .contextMenue {
    display: block;
  }
  .notifications .wrapper {
    min-height: 250px;
    max-height: 250px;
  }
  body {
    background: #e5e5e5;
  }
  .listOfContacts {
    width: 95%;
  }
  .defaultList li {
    width: 40%;
  }
  .subNavigation2 {
    padding-bottom: 10px;
  }
  /* #profile */
  .profileMobileActions {
    display: none;
  }
  .profileStartpage {
    width: 750px;
    margin-left: 20px;
  }
  .profileStartpage .startData {
    float: left;
    width: 360px;
  }
  .profileStartpage .right {
    float: right;
    margin-right: 20px;
  }
  .profileStartpage .iconBox {
    display: block;
  }
  .profileBox {
    width: 750px;
    margin-left: 20px;
  }
  .profileNumberOfImages {
    margin-left: 240px;
  }
  .profileSubActions {
    display: block;
  }
  .profileStartpage .welcome {
    display: block;
  }
  .profileStartpage .stream {
    margin-top: 10px;
    overflow: visible;
    width: 360px;
  }
  .profileStartpage .stream .entry {
    border-top: none;
  }
  .profileStartpage .stream .adslot.mobile {
    display: none;
  }
  .profileStartpage .stream .adslot.desktop {
    display: block;
  }
  .addTickerSuggest {
    display: block;
  }
  .profileSections a {
    margin: 5px;
  }
  .profileSections {
    width: 720px;
    overflow: visible;
  }
  .sectionTabs {
    width: 100%;
    overflow: visible;
    max-width: 710px;
    border-radius: 10px;
  }
  .sectionTabs .wrap {
    width: 700px;
  }
  .sectionTabs a.right {
    float: right;
  }
  .header .headSearch {
    float: right;
    margin-right: 15px;
  }
  .notifications {
    display: block;
  }
  .header .headSearch {
    display: block;
  }
  .siteDouble .left {
    width: 550px;
    float: left;
    background: transparent;
    margin-left: 20px;
  }
  .siteDouble .right {
    float: right;
    width: 180px;
  }
  .homepage {
    width: 100%;
  }
  .homepage .discoverStream {
    float: right;
    width: 360px;
    margin-right: 40px;
    display: block;
  }
  .homepage .aboStream {
    float: left;
    width: 360px;
    margin-left: 0px;
    display: block;
    overflow: hidden;
  }
  .homepage .attend {
    float: left;
    width: 360px;
    min-height: 50px;
  }
  .homepage .streamFilter {
    float: right;
    width: 360px;
    margin-right: 40px;
  }
  .homepage.showAbosEntries .discoverStream {
    display: block;
  }
  /* Für Ads */
  .homepage .aboStream .adslot {
    display: block;
  }
  .homepage .discoverStream .adslot {
    display: none;
  }
  .stream {
    overflow: visible;
  }
  /* Bellfeed */
  #layerBellFeed {
    left: auto !important;
    right: 620px !important;
  }
  .layerNotifications {
    width: 635px !important;
    padding: 0;
    box-shadow: 10px 5px 20px #323232;
    position: fixed;
    animation: scrollFormTop 0.3s;
  }
  a.notificationEntry {
    width: 550px;
  }
  a.notificationEntry .whatHappend {
    max-width: 400px;
  }
  .layerNotifications .text {
    padding: 0;
  }
  /* Stream */
  .statusIconSelected {
    margin-left: 300px;
    right: auto;
  }
  .streamFilter .wrapper {
    width: 360px;
  }
  .streamFilter {
    overflow: visible;
    margin-left: 0;
    padding-top: 0;
    height: 55px;
    width: 360px;
  }
  .streamFilter a.entry {
    width: 60px;
    border-bottom: 4px solid #cccccc;
    padding-top: 10px;
  }
  .streamFilter a.entry.active {
    background: transparent;
  }
  .streamFilter a.entry {
    background: transparent;
    padding: 13px 5px 13px 5px;
  }
  .streamFilter a.entry {
    margin-right: 15px;
  }
  .streamFilter a.entry {
    margin: 0;
    width: 110px;
  }
  .streamFilter a.entry.simple {
    width: 30px;
  }
  .streamFilter a.entry .icon {
    float: left;
  }
  .streamFilter a.entry .icon img {
    width: 20px;
  }
  .streamFilter a.entry .text {
    float: left;
    text-indent: 5px;
    padding-top: 9px;
    font-size: 110%;
  }
  .streamFilter a.entry.simple .text {
    display: none;
  }
  .streamFilter a.entry.active {
    border-width: 4px;
  }
  .streamFilter a.entry.aboLink {
    display: none;
  }
  .stream .commentOptions {
    margin-left: 320px;
    right: auto;
  }
  .tickerCompose .masked {
    border-bottom: 4px solid #cacaca;
  }
  .tickerLayer .tickerUserHead .subscribe .actionEntry {
    padding: 12px 15px;
  }
  .addTicker .headline {
    display: block;
  }
  .addTicker .input {
    padding: 0 0 10px 0;
    margin: 0;
  }
  .addTicker .input input {
    width: 330px;
    padding: 17px 15px;
    margin: 0;
  }
  .addTicker .input input:hover {
    border: 1px solid #3ca2fe;
  }
  .tickerCompose {
    background: #d9d9d9;
    padding-top: 0;
  }
  .tickerCompose .textareaCompose {
    padding: 17px 15px;
    width: 330px;
    margin: 0;
    border: 1px solid #cecece;
  }
  .tickerCompose .textareaCompose:hover {
    border: 1px solid #3ca2fe;
  }
  .markAsRead {
    width: 100%;
    margin: 0;
    margin-bottom: 10px;
  }
  .statusSelector {
    width: 770px;
    padding: 15px;
    border-radius: 15px;
  }
  .statusSelector .navigation .wrapper {
    overflow: hidden;
  }
  .statusSelector .search input {
    width: 700px;
  }
  .statusSelector .navigation a {
    padding: 10px 20px;
    font-size: 100%;
    text-align: left;
  }
  .statusSelector .navigation {
    overflow: hidden;
  }
  .statusSelector .navigation .wrapper {
    margin-bottom: 0;
  }
  .statusSelector .listing a.statusIconEntry {
    margin: 3px 6px 3px 3px;
    width: 80px;
    font-size: 90%;
  }
  .statusSelector .listing a.statusIconEntry .statusIcon img {
    animation: growStatusIcons 0.2s;
  }
  .emotionSelection {
    width: 800px;
    border-radius: 15px;
  }
  .emotionSelection .head .text {
    max-width: 500px;
  }
  .emotionSelection .navigation {
    overflow: hidden;
  }
  .emotionSelection .listing {
    padding-top: 0;
  }
  .emotionSelection .search input {
    width: 710px;
  }
  .emotionSelection .listing a.entry {
    width: 130px;
  }
  .emotionSelection .navigation .wrapper {
    width: auto;
    margin: 0;
    margin-left: 30px;
  }
  .emotionSelection .navigation a {
    padding: 10px 20px;
    font-size: 100%;
    text-align: left;
  }
  .emotionSelection .navigation a.active {
    border-bottom: none;
  }
  /* Freundesliste */
  .friendSection .left {
    float: left;
    width: 530px;
  }
  .friendSection .right {
    float: right;
    display: block;
  }
  .friendList .grading .sortBy {
    display: block;
  }
  .friendList .list .entry:hover .settings {
    display: block;
  }
  .friendList .list .entry:hover {
    background: #ffedb0;
  }
  .friendList .list .entry a.main {
    width: 300px;
  }
  .sectionAbos {
    margin-left: 20px;
    width: 530px;
  }
  .aboList .entry:hover {
    background: #ffedb0;
  }
  /* Einstellungen */
  #settingsSection {
    margin-left: 20px;
  }
  #settingsSection .top .settings {
    float: left;
  }
  #settingsSection .top .settings .row .title {
    float: left;
    text-align: right;
    color: #ffffff;
  }
  #settingsSection .top .settings .row .value {
    float: left;
  }
  .settingsBlock {
    width: 240px;
    height: 300px;
    border-radius: 3px;
  }
  #settingsSection .top .settings .row {
    padding: 4px 0 4px 0;
  }
  #settingsSection .top .settings .row .value {
    width: 240px;
  }
  .profileImageSettingsList .image {
    width: 235px;
    margin: 0;
    margin-right: 10px;
    margin-bottom: 10px;
  }
  /* Profilanpassungen */
  .profileDetails .entry {
    width: 100%;
    margin: 0;
    margin-top: 10px;
    margin-right: 5px;
  }
  .profileDetails .entry .options {
    margin-left: 320px;
    right: auto;
  }
  .profileSections a.additional {
    display: none;
  }
  .startData .stream .entry {
    max-width: 100%;
  }
  .stream .entry.entryGift {
    width: 240px;
    margin-right: 10px;
  }
  /*Profilbild und Gallery */
  .galleryNavigation a.navigation {
    display: block;
  }
  .galleryNavigation {
    overflow: auto;
  }
  .galleryImageFrame {
    width: 650px;
  }
  .galleryImageFrame img {
    max-width: 650px;
  }
  /* Gästebuch */
  .guestbook .entry {
    width: 550px;
  }
  .guestbook .text img {
    max-width: 520px;
  }
  .composeMedium {
    width: 550px;
  }
  .composeMedium .textareaCompose {
    width: 528px;
  }
  .composeMedium .features {
    display: block;
  }
  .header .tickerStatusButton a.createTicker {
    padding: 10px 12px;
  }
  /* Coms */
  .listOfGroups .groupEntry {
    width: 100%;
  }
  .listOfGroups .groupEntry .text {
    with: 400px;
  }
  /*Shop*/
  .siteDouble.shopDouble .right {
    float: left;
    margin-left: 30px;
  }
  .siteDouble.shopDouble .right h2 {
    margin-top: 52px;
  }
  #giftSelection .specials {
    display: block;
  }
  #giftSelection .right .headline {
    margin-top: 200px;
  }
  .headlineShop a.categories {
    display: none;
  }
  .shopSuggest .headline {
    float: none;
  }
  .shopSuggest .offerings {
    float: none;
  }
  .shopSuggest a.entry {
    width: 130px;
  }
  .showFriendOnline {
    display: block;
  }
  /* Gruppen */
  .groupHeader .allGroups {
    display: block;
  }
  .groupHeader {
    padding-top: 0;
  }
  .boardStream .boardEntry textarea {
    width: 600px;
  }
  .comBoard .commentOptions {
    margin-left: 580px;
    right: auto;
  }
  .boardStream .boardEntry {
    width: 600px;
  }
  #groupSection {
    padding-right: 15px;
  }
  #groupSection .stream .entry:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
  }
  #groupSection .actionSelector .button:first-child {
    margin-left: 0;
  }
  #groupSection .overview .left {
    float: left;
    width: 360px;
  }
  #groupSection .overview .right {
    float: right;
    width: 360px;
    margin-right: 10px;
  }
  .stream.wide {
    width: 100%;
  }
  .stream.wide .entry {
    max-width: 750px;
  }
  .nvG .firstPage {
    display: block;
  }
  .nvG .numberOfEntries {
    display: block;
  }
  .sectionTabs a.rightEntry {
    float: right;
  }
  .breadCrumb.profile {
    display: block;
  }
  .profileImageContainer .imageWrapper {
    padding: 10px 10px;
  }
  .profileImageContainer .right {
    display: block;
    float: right;
    width: 250px;
    margin-left: 20px;
  }
  .profileImageContainer .left {
    width: 500px;
    float: left;
  }
  .homepage .topicHead {
    width: 95%;
  }
  .homepage .settingsFoot {
    width: 720px !important;
    bottom: 0 !important;
  }
}
@media screen and (min-width: 1000px) {
  .messageInfoLayer {
    bottom: 0px;
  }
  .bannerTop {
    width: 1000px;
    padding-bottom: 5px;
    padding-top: 5px;
    text-align: center;
  }
  .bannerTop .adslot.billboard90 {
    display: block;
    height: 90px;
  }
  .bannerTop .adslot.billboard250 {
    display: block;
    min-height: 250px;
  }
  .bannerTop .adslot.mobileBillboard {
    display: none;
  }
  /* UserCenter */
  .userCenterHeader {
    margin-top: 0px;
    display: block;
    float: left;
    padding: 0;
    background: transparent;
  }
  .userCenterHeader a.entry {
    display: block;
    padding-right: 15px;
  }
  .userCenterHeader a.entry.friends {
    display: none;
  }
  .userCenterHeader a.entry.inventory {
    display: none;
  }
  .userCenterHeader a.entry.shop {
    display: none;
  }
  .userCenterHeader a.entry.rank {
    display: none;
  }
  .userCenterHeader a.entry.userSearch {
    display: none;
  }
  .userCenterHeader a.entry.guestbookEntry {
    display: none;
  }
  .userCenterHeader a.entry.guestbookEntry.show {
    display: block;
    padding-right: 0;
  }
  .userCenterHeader a.entry.guestbookEntry .text {
    display: none;
  }
  .userCenterHeader a.entry.groupEntry {
    display: none;
  }
  .userCenterHeader a.entry.groupEntry.show {
    display: block;
    padding-right: 0;
  }
  .userCenterHeader a.entry.groupEntry .text {
    display: none;
  }
  .userCenterHeader a.entry.gameEntry {
    display: none;
  }
  .userCenterHeader a.entry.active {
    border-top: 3px solid #ffa225;
    padding-top: 0;
  }
  .header .headSearch input {
    width: 100px;
  }
  .header .logoFrame {
    width: 190px;
  }
  .homepage {
    margin-left: 20px;
  }
  body {
    background: #e5e5e5;
  }
  .site {
    width: 1000px;
    margin-left: 0;
  }
  .site .siteLeft {
    float: left;
    width: 200px;
    height: 100%;
  }
  .site .siteRight {
    padding-left: 10px;
  }
  .site .third {
    float: left;
    width: 0px;
    margin-left: 10px;
  }
  .site .siteLeft {
    display: block;
    float: left;
  }
  #friendSection {
    margin-left: 20px;
  }
  .giftsSection {
    margin-left: 20px;
  }
  .profileEmotionsSection {
    margin-left: 20px;
  }
  #defaultSection {
    margin-left: 20px;
  }
  #shopSection {
    margin-left: 20px;
  }
  #searchSection {
    margin-left: 20px;
    width: 780px;
  }
  #searchSection .rectangle {
    display: none;
  }
  #searchSection .half {
    display: block;
    text-align: center;
    width: 720px;
    margin-bottom: 10px;
  }
  #searchSection .half iframe {
    margin: auto;
  }
  #groupSection {
    margin-left: 20px;
  }
  .infosRankSection {
    margin-left: 20px;
  }
  #guestbookSection {
    margin-left: 20px;
  }
  #infoSection {
    margin-left: 20px;
  }
  #tickerSection {
    margin-left: 20px;
  }
  #gallerySection {
    margin-left: 20px;
  }
  .garden {
    margin-left: 20px;
  }
  .floatingFoot,
  .floatingFoot2 {
    display: none;
  }
  .hlG1 {
    padding-left: 35px;
    font-size: 150%;
    font-weight: 300;
  }
  #galleryImageSection {
    margin-left: 20px;
  }
  .postSite {
    display: block;
  }
  .singleAction.floating {
    width: 500px;
    left: auto !important;
    margin: auto !important;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }
  .bannerTop .adslot.billboard90.wallpaper {
    margin-left: 275px;
  }
  #groupSection .stream.wide img {
    max-width: 720px !important;
  }
  .collectableGame {
    width: 500px;
    padding: 20px 40px;
  }
  .emosToRedeem {
    width: 650px;
  }
}
@media screen and (min-width: 800px) {
  .feed .actions .list {
    display: none;
  }
  .tickerLayer .frame {
    width: 760px;
    margin: auto;
    background: #ffffff;
    padding: 10px;
  }
  .tickerLayer .clearForm {
    width: 760px;
    margin: auto;
  }
  .tickerLayer .twoPane {
    width: 760px;
  }
  .tickerLayer .twoPane .meta {
    width: 50%;
    float: left;
  }
  .tickerLayer .twoPane .content {
    width: 50%;
    float: left;
  }
  .tickerLayer.edit .statusSelector {
    width: 760px;
    padding: 20px 20px;
    border-radius: 15px;
  }
  .tickerLayer .nonMobile {
    display: inline;
  }
  .mailConversationImageTransfer .nonMobile {
    display: inline;
  }
  .layerTickerDetails .tickerLayer .frame.editing {
    width: 760px;
    border-radius: 15px;
    padding: 20px;
  }
  .tickerLayer.edit .frame .left {
    width: 50% !important;
    margin-right: auto !important;
  }
  .confirmStatusIcon {
    left: calc(50% - 170px);
  }
  .tickerSuggestions.feed {
    width: 800px;
    margin: auto;
  }
  #suggestionColumn2 {
    display: block;
  }
}
@media screen and (min-width: 900px) {
  .tickerLayer {
    background: #e5e5e5;
  }
  .tickerUserHead {
    padding: 10px 0 10px 0;
  }
  .tickerLayer .attachments {
    max-width: 520px;
  }
  a.metaRecord .metaBox,
  .metaRecordCompact .metaBox {
    max-width: 360px;
  }
  .tickerLayer .frame {
    padding: 30px;
  }
}
@media screen and (min-width: 1220px) {
  .siteDouble.startpage .left {
    margin-left: 20px;
  }
  .site {
    width: 1200px;
  }
  .site .siteLeft {
    width: 220px;
  }
  .mailboxPreview .conversation .subject {
    max-width: 160px;
    width: 160px;
  }
  .header .logoFrame {
    width: 225px;
  }
  .header .headSearch input {
    width: 120px;
  }
  .userCenterHeader a.entry {
    display: block;
    padding-right: 20px;
  }
  .guest .site .third {
    width: 0 !important;
    display: none;
  }
  .bannerTop .adslot.billboard90.wallpaper {
    margin-left: 302px;
  }
  .tickerSuggestions.feed {
    width: 1200px;
  }
  #suggestionColumn3 {
    display: block;
  }
  .tickerUserHead {
    padding: 20px 0 10px 0;
  }
  .tickerLayer .attachments {
    max-width: 580px;
  }
  a.streamVideoPreview .playButton,
  a.streamMusicPreview .playButton {
    top: -270px;
  }
}
@media screen and (min-width: 1350px) {
  .site .third {
    width: 160px;
    min-height: 300px;
    display: block;
  }
}
@media screen and (min-width: 490px) and (min-width: 1350px) {
  .site {
    width: 1330px;
  }
  .site .third {
    min-height: 600px;
    width: 300px;
  }
}
@media screen and (min-width: 490px) and (min-width: 1420px) {
  .bannerTop {
    width: 1090px;
  }
  .site {
    width: 1410px;
  }
  .site .siteLeft {
    width: 300px;
  }
  .mailboxPreview .conversation .subject {
    max-width: 230px;
    width: 230px;
  }
  .header .logoFrame {
    width: 295px;
  }
  .bannerTop .adslot.billboard90.wallpaper {
    margin-left: 382px;
  }
}
@media screen and (min-width: 490px) and (max-width: 450px) {
  .headlineFriendsOnline {
    background: #333333;
    border: none;
  }
  .headlineFriendsOnline a {
    color: #b8b8b8;
  }
  .headlineConversationShortcut {
    background: #333333;
    border: none;
  }
  .headlineConversationShortcut a {
    color: #b8b8b8;
  }
  .site .siteLeft {
    background: #484848;
  }
  .mailboxPreview {
    background: #484848;
    border-left: none;
  }
  .mailboxPreview .conversation {
    border-bottom: none;
  }
  .mailboxPreview .messageTopic {
    color: #e1e1e1;
  }
  .contactsOnline .entry a.plain a,
  .contactsOnline .entry .plain .link {
    color: #e0e0e0;
  }
  .contactsOnline {
    background: #484848;
  }
  .header {
    border-bottom: none;
  }
  .bannerTop {
    min-height: 250px;
    padding-bottom: 5px;
  }
}
@media screen and (min-width: 490px) and (max-height: 650px) {
  .navigator.userCenter a.entry .icon {
    height: 35px;
  }
  .navigator.userCenter a.entry {
    padding-top: 0;
    padding-bottom: 0;
  }
  .navigator.userCenter a.entry .icon img {
    margin-top: 3px;
  }
  .navigator.userCenter a.entry .text {
    padding-top: 10px;
  }
}
@media screen and (max-width: 1000px) {
  .header .logoFrame.burgerLogo img.burgerIcon {
    display: inline-block;
  }
  .guest .header .logoFrame.burgerLogo img.burgerIcon {
    display: none;
  }
}
@media screen and (max-width: 800px) {
  .ledgeToggle {
    display: block;
  }
  .textOptionsLedge {
    display: none;
  }
  .textOptionsLayer a img {
    width: 20px;
    height: 20px;
  }
  .editor .smilies .more {
    width: 20px;
  }
  .notificationTop {
    bottom: 65px;
  }
  .searchUserResults {
    margin-left: 0;
  }
  .header .logoFrame {
    margin-left: 0;
  }
  .pointerInfo {
    display: block !important;
  }
  .moreLootInfo {
    width: 100%;
  }
  .homepage .topicDropdown .topicSelector {
    margin-left: 15px;
  }
  .cookieNotice {
    bottom: 50px;
  }
  .homepage .optional {
    display: none;
  }
  .channelsHead {
    padding: 10px;
  }
  .homepage .channelsHead .entry .name,
  .uiSectionNavi.noIcons .section .text {
    max-width: 40px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    margin-left: 0;
  }
  .homepage .channelsHead .entry {
    padding-right: 10px;
  }
  .uiSectionNavi {
    margin-bottom: 0;
    padding: 10px;
  }
  .uiSectionNavi a.section {
    padding: 0 5px 0 5px;
    margin-right: 3px;
  }
  .uiSectionNavi a.section .text {
    display: none;
  }
  .uiSectionNavi.noIcons a.section .text {
    display: inline-block;
  }
  .uiSectionNavi a.section .icon {
    padding-right: 10px;
  }
  .homepage .topicHead {
    padding-top: 10px;
  }
  .header .headSearch input {
    width: 150px;
  }
  .listOfContacts .list .entry {
    border-radius: initial;
    padding-bottom: 10px;
  }
  .emotionSelection .listing {
    margin: auto;
    width: 320px;
  }
  #galleryImagePreview {
    display: none;
  }
  .navigator.userCenter .profile {
    display: none;
  }
  .defaultImageLayer .imageFrame img {
    width: 100% !important;
    height: auto !important;
  }
  .feed .commentBox .inputComment {
    width: 200px;
  }
  .feed .editor .smilies {
    display: none;
  }
  .feed .commentBox {
    margin-top: 0;
  }
  .feed {
    text-align: center;
  }
  .feed .column {
    width: 360px;
    margin: auto;
    float: none;
  }
  .feed .comments .commentEntry .actions {
    visibility: visible;
  }
  .infosRankSection {
    width: 360px;
    margin: auto;
  }
  .infosRankSection .floatingBox {
    float: none;
    width: 360px;
    margin: 0;
    margin-bottom: 10px;
  }
  .statusSelector .navigation .wrapper {
    width: 1000px;
  }
  .tickerLayer .tickerUserHead,
  .tickerLayer .tickerTopic {
    width: 360px;
    margin: auto;
  }
  .tickerLayer .referenceUser .profileImage img {
    margin-left: 0;
  }
  .tickerLayer .tickerUserHead .subscribe .actionEntry span {
    display: none;
  }
  .tickerLayer .tickerTopic {
    padding-top: 10px;
    padding-bottom: 5px;
  }
  .tickerLayer .explanation {
    text-align: center;
    color: #484848;
    text-transform: uppercase;
    font-size: 100%;
    border-radius: 10px;
    font-weight: 600;
    background: #e5e5e5;
  }
  .tickerLayer .explanation img {
    width: 70px;
    margin: 10px;
  }
  .tickerLayer .startCamera a {
    padding: 20px;
    margin-bottom: 10px;
    background: #ffd237;
    color: #333333;
    border-radius: 10px;
    font-weight: 600;
    display: block;
    text-transform: uppercase;
  }
  .tickerLayer .startCamera {
    padding: 0;
    margin-top: 5px;
  }
  .tickerLayer .fileSelection .headline {
    display: none;
  }
  .tickerLayer .editing .media {
    margin-top: 0px;
    width: 360px;
    margin: auto;
    margin-top: 10px;
  }
  .tickerLayer {
    text-align: center;
  }
  .tickerSuggestionsFrame {
    background: #e5e5e5;
  }
  .tickerLayer .referenceUser {
    text-align: left;
    padding-top: 0;
  }
  .tickerLayer .feed .comments {
    text-align: left;
  }
  .tickerLayer .left {
    width: 100%;
    margin: auto;
    text-align: left;
    float: none;
    background: #e5e5e5;
    padding-top: 5px;
    padding-bottom: 5px;
  }
  .tickerLayer .left.full {
    padding: 0;
  }
  .tickerLayer .left .media {
    width: 360px;
    text-align: center;
    margin: auto;
  }
  .tickerLayer .left.full .media {
    width: 100%;
  }
  .tickerLayer .right {
    width: 360px;
    margin: auto;
    text-align: left;
    float: none;
  }
  .tickerSuggestions.feed .fragment {
    margin: auto;
    margin-left: auto;
    float: none;
  }
  .tickerLayer .left {
    margin-bottom: 10px;
    margin-bottom: 0;
  }
  .tickerLayer .right {
    padding-bottom: 20px;
  }
  .tickerSuggestions.feed .column {
    width: 360px;
    float: none;
    margin: auto;
  }
  .tickerLayerOptions {
    margin: auto;
    top: 40px !important;
    left: auto !important;
    width: 100% !important;
    border-radius: 0;
    padding: 0;
  }
  .tickerShareMobileWrapper {
    width: 100% !important;
    padding: 20px;
    font-size: 120%;
  }
  .tickerLayer .topbar .actionEntry {
    padding: 8px;
  }
  .tickerLayer .topbar .subscribe .actionEntry {
    padding: 10px 8px;
  }
  .tickerLayer .topbar .badFeedback .actionEntry {
    margin-right: 2px;
  }
  .tickerLayer .tickerUserHead .actionButton .text {
    display: none;
  }
  .profileFrame .msInfo {
    margin-left: 0;
  }
  .subNavigation {
    margin-top: 10px;
  }
  .subNavigation a.navigationEntry {
    font-size: 100%;
    padding: 15px 12px 15px 12px;
    max-width: 80px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  .settingsBlock {
    margin: auto;
    width: 360px;
    float: none;
    border-radius: 10px;
    margin-bottom: 10px;
  }
  #settingsSection .top .settings {
    margin: auto;
    width: 100%;
    margin-top: -5px;
  }
  #settingsSection .top .settings .row {
    padding: 4px 20px 4px 20px;
    width: auto;
  }
  .selectTheme {
    width: 360px;
  }
  .layerTickerDetails .selectEcho {
    position: fixed;
    bottom: 0px;
    width: 100%;
    left: 0;
    border-radius: 0;
    text-align: center;
  }
  .layerTickerDetails .selectEcho .echoList {
    width: 360px;
    margin: auto;
    padding-top: 5px;
    padding-bottom: 5px;
  }
  .tickerLayer .media .image img {
    max-width: 100%;
  }
  .videoEditor {
    min-height: 50vh;
  }
  .emotionOverlay {
    width: 100%;
    left: 0 !important;
    font-size: 120%;
    border-radius: 0;
    padding-top: 10px;
  }
  .emotionOverlay .actions {
    margin: 15px 20% 15px 20%;
  }
  .layerEmoji {
    bottom: 110px !important;
    right: 5px !important;
  }
  .emojiLayer {
    width: 320px;
  }
  .emojiLayer .categories {
    text-align: center;
  }
  .emojiLayer .categories img {
    width: 25px;
    margin: 7px 3px;
  }
  .emojiLayer .listOfEmojis {
    padding: 15px;
    width: calc(100% - 30px);
    height: 30vh;
  }
  .emojiLayer .loader {
    text-align: center;
  }
  .emojiLayer .loader img {
    height: 120px;
  }
  .listOfContacts .list .settings {
    padding-top: 0;
    margin-top: 0;
    padding-bottom: 0;
    min-width: 200px;
  }
  .listOfContacts .list .entry .profileImage {
    padding-bottom: 0;
  }
  .grading .folder {
    display: none;
  }
  .grading .inputSearch {
    width: 110px;
  }
  .homepage .topicDropdown .topicList {
    min-width: 360px;
    width: 100%;
    position: fixed;
    max-height: 40em;
  }
  .tickerStats {
    width: 360px;
    margin: auto;
  }
  .tickerStats table th {
    max-width: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .desktopOnly {
    display: none;
  }
  .mobileOnly {
    display: inline-block;
  }
  .settingsHeader {
    width: 400px;
    margin: 5px 10px;
  }
  .settingsHeader .row .title {
    text-align: left;
    width: auto;
    margin: 0px 10px;
    display: block;
    float: none;
  }
  .settingsHeader .row .value {
    text-align: left;
    margin: 5px 10px;
    display: block;
    float: none;
    width: auto;
  }
  .suggestOptions {
    width: 100% !important;
    margin-bottom: 20px !important;
  }
  .listOfCards,
  .lootbox {
    width: 100% !important;
  }
  .lootboxContainer {
    border: none;
    background-size: auto 100% !important;
  }
  .inventory {
    width: 100% !important;
    border: none !important;
    border-radius: 0 !important;
  }
  .inventoryXmas .suggestLoot {
    margin-top: 60px;
  }
  .inventory .storageSize .numberOfCards {
    margin-right: 30px !important;
  }
  .lootInfo,
  .lootBox,
  .lootboxContainer,
  .selectCards {
    width: 100% !important;
    border-radius: none !important;
    border: none !important;
  }
  .tutorialWindow .mobile {
    display: block;
  }
  .tutorialWindow {
    margin-top: 10px;
  }
  .reactionHeader {
    right: 20px;
    bottom: 130px !important;
    left: auto !important;
    background: rgba(255, 226, 110, 0.5) !important;
    border: none !important;
  }
  .reactionHeader .numberOfPoints,
  .reactionHeader .links {
    padding: 5px !important;
  }
  .reactionPicture {
    width: 100% !important;
  }
}
@media screen and (max-width: 600px) {
  .nvG {
    margin-bottom: 20px;
  }
  #settingsSection .top .settings .row .value {
    width: 97%;
  }
  .themePreviewLayer .wrapper {
    padding: 10px 0;
    border-radius: 0;
    width: 100%;
  }
  .theme_8 .profileBox {
    background-size: auto 130%;
    background-position: 40% 100%;
  }
  .theme_10 .profileBox {
    background-size: auto 130%;
    background-position: 40% 100%;
  }
  .theme_11 .profileBox {
    background-size: auto 130%;
    background-position: 40% 100%;
  }
  .theme_12 .profileBox {
    background-size: auto 130%;
    background-position: 40% 100%;
  }
  .theme_13 .profileBox {
    background-size: auto 100%;
    background-position: 10% 100%;
  }
  .theme_14 .profileBox {
    background-size: auto 100%;
    background-position: 10% 100%;
  }
  .theme_15 .profileBox {
    background-size: auto 100%;
    background-position: 10% 100%;
  }
  .theme_16 .profileBox {
    background-size: auto 100%;
    background-position: 10% 100%;
  }
  .theme_17 .profileBox {
    background-size: auto 100%;
    background-position: -70px 100%;
  }
  .theme_18 .profileBox {
    background-size: auto;
    background-position: 90% 0%;
  }
  .theme_19 .profileBox {
    background-size: 200%;
    background-position: 25% 40%;
  }
  .theme_20 .profileBox {
    background-size: auto 100%;
    background-position: 10% 100%;
  }
  .theme_21 .profileBox {
    background-size: auto 100%;
    background-position: 17% 100%;
  }
  .theme_22 .profileBox {
    background-size: auto 100%;
    background-position: 17% 100%;
  }
  .theme_23 .profileBox {
    background-size: auto 100%;
    background-position: 17% 100%;
  }
  .theme_24 .profileBox {
    background-size: auto 100%;
    background-position: 17% 100%;
  }
  .theme_25 .profileBox {
    background-size: auto 100%;
    background-position: 17% 100%;
  }
  .theme_26 .profileBox {
    background-size: auto 100%;
    background-position: 17% 100%;
  }
  .theme_27 .profileBox {
    background-size: auto 100%;
    background-position: 17% 100%;
  }
  .theme_28 .profileBox {
    background-size: auto 100%;
  }
  .theme_29 .profileBox {
    background-size: auto 100%;
  }
  .theme_30 .profileBox {
    background-size: auto 100%;
  }
  .theme_31 .profileBox {
    background-size: auto 100%;
  }
  .theme_32 .profileBox {
    background-size: auto 100%;
  }
  .theme_33 .profileBox {
    background-size: auto 100%;
  }
}
@media screen and (max-width: 380px) {
  .mailbox .entry .text {
    max-width: 303px;
  }
  .tickerLayer .right {
    width: 320px;
  }
  .tickerLayer .tickerTop {
    width: 320px;
  }
  .tickerLayer .tickerUserHead,
  .tickerLayer .tickerTopic {
    width: 320px;
  }
  .tickerLayer .referenceUser .profileImage {
    width: 45px;
  }
  .tickerLayer .referenceUser .basics .timestamp {
    padding-top: 2px;
    font-size: 80%;
  }
  .tickerLayer .tickerUserHead .actionRight {
    padding-top: 15px;
  }
  .settingsHeader {
    width: 360px;
  }
}
/* iPhone x */
@media screen and (min-width: 375px) and (max-width: 600px) {
  /*.mailboxTextarea {width:280px;max-width:280px}*/
}
@media screen and (min-width: 400px) and (max-width: 600px) {
  /*  {width:310px;max-width:310px}*/
  .header .headSearch input {
    width: 90px;
  }
}
@media screen and (max-width: 410px) {
  .header .headSearch input {
    padding: 13px;
    background: #333333;
    width: 90px;
  }
}
/* iPhone iOS */
@media screen and (max-width: 330px) {
  .headerConversation .status {
    max-width: 30%;
  }
  .userMenu {
    right: 0;
  }
  .mailConversation.mailbox .entry .text {
    max-width: 250px;
  }
  .stream {
    width: 100%;
  }
  .echoSelection {
    width: 100%;
  }
  .mailboxTextarea {
    width: 220px !important;
  }
  .editor .features {
    display: none;
  }
  .stream .comments .plain {
    width: 240px;
  }
  .userCenter .icon {
    height: 35px;
  }
  .userCenter a.entry {
    padding-top: 0;
    padding-bottom: 0;
  }
  .userCenter a.entry .icon img {
    margin-top: 3px;
    width: 25px;
  }
  .userCenter a.entry .text {
    padding-top: 11px;
    font-size: 100%;
  }
  .tickerLayer .right {
    width: 100%;
  }
  .profileMobileOptions .profileTopActions {
    margin-top: 10px;
  }
  .profileMobileOptions .profileTopActions a .icon {
    width: 40px;
  }
  .profileMobileOptions .profileTopActions a {
    margin-top: 5px;
  }
  .homepage .filterDropdown {
    display: none;
  }
  .settingsHeader {
    width: 300px;
  }
  .listOfConversations .conversation .statusIconMail {
    display: none;
  }
  .instanceList {
    width: 260px;
  }
  .layerCard .close {
    width: 240px;
  }
  .inventory .detail {
    width: 240px;
  }
}
/* Inventory Anpassungen unter 360px */
@media screen and (max-width: 360px) {
  .searchUserResults a.entry {
    width: 140px;
  }
  .instanceList {
    width: 280px;
    padding: 15px;
    font-size: 90%;
  }
  .layerCard .close {
    width: 260px;
  }
  .inventory .detail {
    width: 260px;
  }
  .inventoryCard {
    margin: 3px;
  }
  .inventory .storageSize .numberOfCards {
    background: #fff0c4;
    border-radius: 15px;
  }
  .selectCards .wrapper {
    width: 320px;
  }
  .selectCards a.inventoryCard {
    height: 140px;
    width: 85px;
  }
  .header .logoFrame.burgerLogo img {
    height: 30px;
    margin-top: 5px;
    margin-right: 0;
  }
  .header .userAccount .nickname {
    max-width: 60px;
  }
}
@media screen and (min-width: 370px) and (max-width: 490px) {
  .profileStartpage .right {
    width: 100%;
  }
  .profileStartpage .welcome {
    width: 360px;
    margin: auto;
  }
  .profileStartpage .iconBox {
    margin: 10px auto 10px auto;
    width: 360px;
  }
  .imageAttachedDefault img {
    height: 270px;
    width: 100%;
    max-width: 450px;
    margin: auto;
  }
  .profileSections {
    width: 95%;
  }
  #groupSection .presentation {
    width: 94%;
    margin-left: 3%;
  }
  .boardList {
    width: 94%;
    margin-left: 3%;
  }
  .groupInfoBlock {
    width: 94%;
    margin-left: 3%;
  }
}