@font-face {
  font-family: 'DimboR';
  src: url("../images/dimbor.ttf") format("truetype"); }

*:not(input) {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none; }

html, body {
  width: 100%;
  height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  font-family: 'DimboR', helvetica, arial !important; }

div, button, input, a {
  cursor: pointer; }

button, input {
  font-family: 'DimboR', helvetica, arial !important;
  font-size: 14px; }

.page {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  /*background: #ced2bb;*/
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#709b34+0,3a5b4b+100 */
  background: #709b34;
  /* Old browsers */
  background: -moz-radial-gradient(center, ellipse cover, #709b34 0%, #3a5b4b 100%);
  /* FF3.6-15 */
  background: -webkit-radial-gradient(center, ellipse cover, #709b34 0%, #3a5b4b 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: radial-gradient(ellipse at center, #709b34 0%, #3a5b4b 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#709b34', endColorstr='#3a5b4b',GradientType=1 );
  /* IE6-9 fallback on horizontal gradient */ }
  .page.right {
    transform: translateX(100%); }
  .page.left {
    transform: translateX(-100%); }
  .page.slideIn {
    animation: slide-in 0.2s forwards; }
  .page.slideOutRight {
    animation: slide-out-right 0.2s forwards; }
  .page.slideOutLeft {
    animation: slide-out-left 0.2s forwards; }

.buttonPress {
  animation: button-press-anim 0.2s; }

@keyframes button-press-anim {
  0% {
    transform: scale(1) rotate(0deg); }
  50% {
    transform: scale(1.2) rotate(0deg); }
  100% {
    transform: scale(1) rotate(0deg); } }

@keyframes slide-in {
  100% {
    transform: translateX(0%); } }

@keyframes slide-out-right {
  100% {
    transform: translateX(100%); } }

@keyframes slide-out-left {
  100% {
    transform: translateX(-100%); } }

.dialog {
  position: absolute;
  z-index: 9999;
  width: 80%;
  height: auto;
  max-height: 60%;
  top: 20%;
  left: 50%;
  margin-left: -200%;
  padding: 20px 10px;
  color: white;
  text-align: center;
  box-sizing: border-box;
  background-color: #4075a0;
  border: 4px solid white;
  box-shadow: 0 0 8px black;
  border-radius: 10px; }
  .dialog.fullscreen {
    max-height: 80%;
    top: 10%; }
  .dialog.active {
    animation-duration: 0.5s;
    animation-fill-mode: both;
    animation-name: dialog_active; }
  .dialog .close {
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 30px;
    margin: -15px -17px 0 0;
    background-color: red;
    border-radius: 19px;
    border: 2px solid white;
    box-shadow: 0 0 4px black; }
    .dialog .close::after {
      content: "X";
      line-height: 30px;
      font-size: 22px;
      padding-left: 1px;
      font-weight: bold;
      text-shadow: 0 0 3px #000000; }
  .dialog .title {
    font-size: 38px;
    font-weight: bold;
    padding-bottom: 10px;
    text-shadow: 0 0px 6px #000000; }
  .dialog .content {
    position: initial;
    height: 100%;
    overflow-y: auto;
    padding: 0 10px; }
  .dialog .scoreTable {
    width: 100%;
    color: #d3d3d3;
    border-spacing: 0;
    table-layout: fixed; }
    .dialog .scoreTable.head td {
      margin-bottom: 4px;
      color: white; }
    .dialog .scoreTable.main tbody {
      display: block;
      overflow-y: auto; }
      .dialog .scoreTable.main tbody tr {
        display: table;
        table-layout: fixed;
        width: 100%; }
    .dialog .scoreTable.trail tr td {
      border-top: 1px solid yellow;
      font-size: 20px;
      padding-top: 4px;
      color: white; }
    .dialog .scoreTable td, .dialog .scoreTable th {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 16px;
      text-shadow: 0 0 4px #000000; }
      @media (min-width: 768px) {
        .dialog .scoreTable td, .dialog .scoreTable th {
          font-size: 20px; } }
      .dialog .scoreTable td.winner, .dialog .scoreTable th.winner {
        font-weight: bold;
        color: yellow; }
      .dialog .scoreTable td.assafed, .dialog .scoreTable th.assafed {
        font-weight: bold;
        color: red; }
      .dialog .scoreTable td.leader, .dialog .scoreTable th.leader {
        background-color: #257e20; }
  .dialog .settingsItem {
    clear: both;
    padding-top: 10px;
    padding-left: 2px;
    font-size: 20px;
    text-align: left;
    text-shadow: 0 0 5px #000000; }
    @media (min-width: 768px) {
      .dialog .settingsItem {
        padding-top: 20px;
        font-size: 26px; } }
    .dialog .settingsItem div {
      float: left;
      padding: 5px 0;
      margin: 5px 0; }
      @media (min-width: 768px) {
        .dialog .settingsItem div {
          margin: 10px 0;
          padding: 10px 0; } }
    .dialog .settingsItem input {
      color: #000000; }
  .dialog .settingsOptions {
    float: right !important;
    padding: 0 2px 0 0 !important;
    margin: 0 !important;
    text-align: center; }
    .dialog .settingsOptions div {
      display: inline-block;
      padding: 1px 5px;
      margin: 5px 0;
      min-width: 30px;
      color: #d3d3d3;
      background: #3d5469; }
      .dialog .settingsOptions div.selected {
        padding: 5px;
        margin: 1px 0 3px 0;
        background: #d2d61b;
        border-radius: 6px;
        box-shadow: 0 0 6px #000000; }
  .dialog input {
    float: right;
    width: 50%;
    margin: 10px 0;
    background: none;
    border: none;
    border-bottom: 1px solid white;
    color: white;
    font-size: 20px; }
    @media (min-width: 768px) {
      .dialog input {
        padding: 5px;
        font-size: 20px; } }
  .dialog .themeContainer {
    display: block;
    float: none !important;
    clear: both;
    width: 100%;
    height: 85px;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap; }
    .dialog .themeContainer .themeItem {
      position: relative;
      display: inline-block;
      float: none !important;
      margin: 2px 5px !important;
      padding: 0 !important;
      text-align: center; }
      .dialog .themeContainer .themeItem.selected .themeIcon:after {
        content: "";
        position: absolute;
        width: 30px;
        height: 30px;
        top: 15px;
        right: -5px;
        background-image: url(../images/v.png);
        background-size: 100%; }
      .dialog .themeContainer .themeItem .themeIcon {
        position: relative;
        float: none !important;
        width: 40px;
        height: 40px;
        margin: 0 auto !important;
        padding: 0 !important;
        background-color: #fff;
        border-radius: 4px;
        box-shadow: 0 0 4px #000; }
      .dialog .themeContainer .themeItem .themeName {
        float: none !important;
        margin: 0 !important;
        padding: 0 !important; }
  .dialog .friendItem {
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 30px;
    padding: 5px 0;
    text-align: left; }
    .dialog .friendItem.noresp {
      opacity: 0.6; }
    .dialog .friendItem .friendImg {
      display: table-cell;
      width: 30px;
      overflow: hidden;
      border-radius: 4px;
      box-shadow: 0 0 4px #000; }
      .dialog .friendItem .friendImg img {
        display: block;
        width: 100%; }
    .dialog .friendItem .friendName {
      display: table-cell;
      height: 30px;
      padding: 0 0 0 6px;
      margin: 0;
      line-height: 30px;
      vertical-align: middle;
      text-shadow: 0 0 5px #000; }
      .dialog .friendItem .friendName div {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis; }
    .dialog .friendItem .status {
      display: table-cell;
      width: 70px;
      line-height: 30px;
      text-align: right;
      vertical-align: middle;
      text-shadow: 0 0 5px #000; }
      .dialog .friendItem .status:after {
        content: "..."; }
      .dialog .friendItem .status.accepted:after {
        content: "JOINED!";
        color: #00ed00; }
      .dialog .friendItem .status.rejected:after {
        content: "REJECTED";
        color: #e73232; }
  .dialog.invitingDlg .inviter, .dialog.invitedDlg .inviter {
    font-size: 19px;
    padding-bottom: 10px; }
  .dialog.invitingDlg button, .dialog.invitedDlg button {
    display: inline-block;
    margin: 20px 10px 20px 0; }
    .dialog.invitingDlg button.abort, .dialog.invitedDlg button.abort {
      margin: 20px 0 20px 10px;
      background-color: #ee1c1c; }
  .dialog .bottomGrad {
    position: absolute;
    width: 100%;
    height: 50px;
    margin: 0 -20px;
    bottom: 10px;
    background: -moz-linear-gradient(top, rgba(0, 191, 255, 0) 0%, rgba(0, 191, 255, 0.93) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(0, 191, 255, 0) 0%, rgba(0, 191, 255, 0.93) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(0, 191, 255, 0) 0%, rgba(0, 191, 255, 0.93) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0000bfff', endColorstr='#ed00bfff',GradientType=0 );
    /* IE6-9 */ }
  .dialog button {
    display: block;
    margin: 20px auto;
    padding: 10px 20px;
    font-size: 20px;
    font-weight: normal;
    color: white;
    /*background: #ee1c1c;*/
    border: none;
    border-radius: 8px;
    background-color: #31e73e;
    text-shadow: 0 0 5px #000000;
    box-shadow: 0 0 6px #000000; }

@keyframes dialog_active {
  from {
    margin-left: -200%; }
  to {
    margin-left: -40%; } }

/* !important is needed sometimes */
::-webkit-scrollbar {
  width: 4px !important; }

/* Track */
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3) !important;
  border-radius: 2px !important; }

/* Handle */
::-webkit-scrollbar-thumb {
  border-radius: 2px !important;
  background: #777777 !important;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5) !important; }

::-webkit-scrollbar-thumb:window-inactive {
  background: #777777 !important; }

#home .titleContainer {
  height: 30%; }
  #home .titleContainer::before, #home .titleContainer::after {
    content: "";
    display: block;
    height: 5%; }
  #home .titleContainer .title {
    display: block;
    font-size: 109px;
    text-align: center;
    color: #cfa344;
    text-shadow: 0 0px 10px #000000;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #ffffff; }

#home .selectionButtons {
  position: relative;
  text-align: center; }
  #home .selectionButtons > div {
    position: relative;
    display: inline-block;
    width: 32%;
    max-width: 160px;
    text-align: left;
    transform-origin: right;
    margin-left: -5%; }
    #home .selectionButtons > div.single {
      z-index: 12;
      transform: rotate(-20deg);
      margin-left: 0; }
      #home .selectionButtons > div.single.buttonPress {
        animation: button-press-anim--20deg 0.2s; }

@keyframes button-press-anim--20deg {
  0% {
    transform: scale(1) rotate(-20deg); }
  50% {
    transform: scale(1.2) rotate(-20deg); }
  100% {
    transform: scale(1) rotate(-20deg); } }
    #home .selectionButtons > div.multi {
      z-index: 14; }
    #home .selectionButtons > div.friends {
      z-index: 13;
      transform: rotate(20deg);
      transform-origin: left; }
      #home .selectionButtons > div.friends.buttonPress {
        animation: button-press-anim-20deg 0.2s; }

@keyframes button-press-anim-20deg {
  0% {
    transform: scale(1) rotate(20deg); }
  50% {
    transform: scale(1.2) rotate(20deg); }
  100% {
    transform: scale(1) rotate(20deg); } }
    #home .selectionButtons > div img.cardBg {
      position: absolute;
      width: 100%;
      z-index: 11; }
    #home .selectionButtons > div img.icon {
      position: absolute;
      width: 50%;
      z-index: 44;
      top: 15%;
      left: 25%; }
    #home .selectionButtons > div div {
      position: relative;
      top: 60%;
      z-index: 99;
      text-align: center;
      font-size: 16px; }
      @media (min-width: 768px) {
        #home .selectionButtons > div div {
          font-size: 20px; } }

#home .fbMainConnect {
  margin-top: 40px;
  text-align: center; }
  #home .fbMainConnect .fbButton {
    margin-bottom: 10px; }
  #home .fbMainConnect .fbDesc {
    display: inline-block;
    height: 46px;
    padding-left: 10px;
    font-size: 14px;
    text-align: left;
    vertical-align: middle;
    color: #ffffff;
    text-shadow: 0 0 5px #000; }

#home .settings, #home .help {
  position: absolute;
  left: 20px;
  bottom: 20px;
  width: 20%;
  max-width: 100px; }
  #home .settings img, #home .help img {
    width: 100%; }

#home .help {
  left: auto;
  right: 20px; }

#multiplayer {
  text-align: center; }
  #multiplayer div {
    margin: 0 auto;
    text-align: center;
    font-size: 22px; }
  #multiplayer .message {
    margin-top: 10px;
    color: #16548d; }
  #multiplayer .nicknameEntry {
    font-size: 36px;
    font-weight: bold;
    padding-top: 30%; }
    #multiplayer .nicknameEntry input {
      margin-top: 10%;
      font-size: 32px;
      background: transparent;
      border: none;
      border-bottom: 2px solid #000; }
  #multiplayer .connect, #multiplayer .abort {
    display: inline-block;
    margin: 30% auto 0;
    padding: 13px 50px;
    font-size: 28px;
    color: #ffffff;
    border-radius: 8px;
    background-color: #31e73e;
    text-shadow: 0 0 5px #000000;
    box-shadow: 0 0 6px #000000;
    box-sizing: border-box; }
    #multiplayer .connect.abort, #multiplayer .abort.abort {
      background-color: #bc180c; }
    #multiplayer .connect.disabled, #multiplayer .abort.disabled {
      color: #d5d5d5;
      background-color: #b2b2b2;
      text-shadow: none;
      box-shadow: none; }

.players {
  position: relative;
  width: 100%;
  height: 100%; }

.player {
  position: absolute;
  bottom: -40px;
  left: 50%;
  width: 210px;
  height: 130px;
  margin-left: -105px; }
  .player.n2 {
    transform: rotate(90deg);
    left: 25px;
    top: 50%;
    margin-top: -50px; }
  .player.n3 {
    transform: rotate(180deg);
    top: -40px; }
    .player.n3 .name {
      transform: rotate(180deg);
      float: right; }
    .player.n3 .score {
      transform: rotate(180deg);
      float: left; }
    .player.n3 .hand {
      transform: rotate(180deg); }
  .player.n4 {
    transform: rotate(270deg);
    top: 50%;
    margin-top: -50px;
    left: auto;
    right: -80px; }
  .player .panel {
    position: absolute;
    left: 50%;
    bottom: -10px;
    width: 170px;
    height: 80px;
    margin-left: -85px;
    z-index: 99;
    border-radius: 60px;
    padding: 2px 28px;
    box-sizing: border-box;
    font-size: 24px;
    background-color: #b7b9be;
    color: white;
    box-shadow: 0 -4px 0 #dcdcdc;
    text-shadow: 0 0 8px black; }
  .player .name {
    float: left; }
  .player .score {
    float: right; }
  .player.turn .panel {
    box-shadow: 0 -10px 35px yellow !important; }

.cards {
  margin: 0 auto;
  display: table; }

.player .cardContainer {
  margin-left: -67px; }

.player .cards {
  padding-left: 67px;
  position: relative;
  z-index: 11; }

.player.n1 .cardContainer {
  margin-left: -62px; }

.player.n1 .cards {
  padding-left: 62px;
  margin-top: -10px; }

.pile .cardContainer {
  margin-left: -71px;
  /*
		&:nth-child(1) .card {
		    box-shadow: 0 0 10px #111;
		}
		*/ }
  .pile .cardContainer:nth-child(1), .pile .cardContainer:nth-child(2), .pile .cardContainer:nth-child(3) {
    margin-left: -68px; }

.pile .cards {
  padding-left: 71px;
  z-index: 11; }

.pile .card {
  box-shadow: none; }

.cardContainer {
  width: 71px;
  height: 126px;
  display: inline-block;
  transform-origin: bottom;
  z-index: 11; }
  .cardContainer.transition {
    position: fixed;
    height: 96px;
    transform-origin: center; }

.card {
  background-image: url("../images/cardsV2.png");
  background-size: 1300% 500%;
  width: 71px;
  height: 96px;
  z-index: 11;
  /*box-shadow: 0 0 3px #111;*/ }
  .card.flipped {
    background-position: -284px -384px !important; }
  .card.clover {
    background-position-y: 0; }
  .card.spade {
    background-position-y: -192px; }
  .card.heart {
    background-position-y: -96px; }
  .card.diamond {
    background-position-y: -287px; }
  .card.joker {
    background-position-y: -384px; }
  .card.val1 {
    background-position-x: 0px; }
  .card.val2 {
    background-position-x: -71px; }
  .card.val3 {
    background-position-x: -142px; }
  .card.val4 {
    background-position-x: -213px; }
  .card.val5 {
    background-position-x: -284px; }
  .card.val6 {
    background-position-x: -355px; }
  .card.val7 {
    background-position-x: -426px; }
  .card.val8 {
    background-position-x: -497px; }
  .card.val9 {
    background-position-x: -568px; }
  .card.val10 {
    background-position-x: -639px; }
  .card.val11 {
    background-position-x: -709px; }
  .card.val12 {
    background-position-x: -780px; }
  .card.val13 {
    background-position-x: -851px; }
  .card.val14 {
    background-position-x: -142px; }

.userSelected .card {
  margin-top: -15px; }

.pause {
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 44px;
  margin: -7px -7px 14px 14px;
  padding: 9px 5px 0 0;
  text-align: center;
  color: white;
  background-color: #cf0a0a;
  border-radius: 10px;
  box-sizing: border-box;
  box-shadow: 0 0 8px black;
  text-shadow: 0 0 8px black;
  z-index: 1; }
  .pause::after {
    content: "II";
    font-family: arial;
    line-height: 32px;
    font-size: 22px;
    font-weight: bold; }

.pile {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -110px;
  margin-left: 35px; }

.thrown {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 130px;
  margin-top: -15px;
  margin-left: -100px; }

.yaniv {
  position: absolute;
  top: 100%;
  left: 100%;
  margin-top: 40px;
  margin-left: -85px;
  padding-left: 20px;
  width: 100px;
  height: 80px;
  border-radius: 20px;
  background-color: tomato;
  color: white;
  font-size: 22px;
  font-style: italic;
  line-height: 40px;
  box-shadow: 0 0 8px black;
  text-shadow: 0 0 8px black;
  z-index: 1; }
  .yaniv.active {
    animation-duration: 0.5s;
    animation-delay: 1s;
    animation-fill-mode: both;
    animation-name: yaniv_active; }

.clock {
  display: none;
  position: absolute;
  bottom: 10px;
  left: 10px;
  width: 90px;
  height: 117px;
  padding-top: 58px;
  padding-right: 2px;
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  color: #000;
  background: url(../images/clock.png);
  z-index: 99;
  box-sizing: border-box;
  left: 50%;
  margin-left: -38px;
  bottom: 100px; }

.scores {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: -40px;
  margin-left: -45px;
  padding-left: 60px;
  width: 130px;
  height: 80px;
  box-sizing: border-box;
  border-radius: 20px;
  background-color: #daa520;
  color: white;
  font-weight: bold;
  font-style: italic;
  line-height: 40px;
  box-shadow: 0 0 8px black;
  text-shadow: 0 0 8px black;
  z-index: 1; }

.call {
  display: none;
  position: absolute;
  top: 20%;
  left: 10%;
  width: 80%;
  z-index: 99; }
  .call.assaf {
    transform: rotate(20deg); }
  .call.active {
    animation-duration: 0.2s;
    animation-fill-mode: both;
    animation-name: call_active; }

@keyframes call_active {
  from {
    margin-left: -200%; }
  to {
    margin-left: 0; } }

@keyframes yaniv_active {
  from {
    margin-top: 40px; }
  to {
    margin-top: -40px; } }

#friends {
  padding-top: 40px; }

.fbContainer {
  display: none;
  padding: 20px;
  font-size: 16px;
  line-height: 22px;
  text-align: center; }
  .fbContainer.inviteContainer {
    padding: 0; }
    .fbContainer.inviteContainer.nofriends .mainFLTitle, .fbContainer.inviteContainer.nofriends .friendsList, .fbContainer.inviteContainer.nofriends .play {
      display: none; }
    .fbContainer.inviteContainer.nofriends .fbInvite {
      padding-top: 40px;
      text-align: center; }
      .fbContainer.inviteContainer.nofriends .fbInvite .desc {
        diaply: block;
        width: 100%;
        font-size: 30px;
        text-align: center; }
      .fbContainer.inviteContainer.nofriends .fbInvite .fbButton.invite {
        float: none;
        height: 30px;
        margin: 20px auto;
        padding: 10px;
        font-size: 30px;
        line-height: 30px; }

.fbInvite {
  padding: 20px 20px 10px;
  text-align: left; }
  .fbInvite .desc {
    display: inline-block;
    line-height: 30px; }

.fbButton {
  display: inline-block;
  height: 26px;
  margin: 10px auto 20px auto;
  padding: 10px;
  font-size: 20px;
  color: #ffffff;
  background-color: #3b579d;
  border-radius: 4px;
  box-shadow: 0 0 14px #fff;
  text-align: left; }
  .fbButton .logo {
    float: left;
    height: 100%; }
  .fbButton span {
    line-height: 26px;
    padding: 0 10px; }
  .fbButton.connect.connecting .logo, .fbButton.connect.connecting span {
    display: none; }
  .fbButton.connect.connecting:after {
    content: "connecting..";
    line-height: 30px; }
  .fbButton.invite {
    float: right;
    height: 20px;
    margin: 0;
    padding: 5px;
    font-size: 16px; }
    .fbButton.invite span {
      line-height: 20px;
      padding: 0 5px; }
  .fbButton.settings {
    margin: 20px auto;
    padding: 5px;
    height: 20px;
    font-size: 17px; }
    .fbButton.settings span {
      padding: 5px;
      line-height: 20px; }

.back {
  position: absolute;
  top: 0;
  left: 0;
  width: 68px;
  height: 38px;
  margin: -7px 14px 14px -7px;
  padding: 6px 0 0 5px;
  text-align: center;
  color: white;
  background-color: #949f9a;
  border-radius: 10px;
  box-sizing: border-box;
  z-index: 1; }
  .back::after {
    content: "Back";
    line-height: 32px;
    font-size: 20px; }

.mainFLTitle {
  margin: 0 20px;
  font-size: 20px; }

.play {
  display: inline-block;
  margin: 10px auto;
  padding: 13px 50px;
  font-size: 28px;
  color: #ffffff;
  background-color: #31e73e;
  border-radius: 8px;
  text-shadow: 0 0 5px #000000;
  box-shadow: 0 0 6px #000000; }
  .play.disabled {
    color: #d5d5d5;
    background-color: #b2b2b2;
    text-shadow: none;
    box-shadow: none; }

.friendsList {
  position: relative;
  margin: 0 10px;
  overflow: hidden;
  overflow-y: auto;
  text-align: left; }
  .friendsList .friendsListContent {
    padding: 0 10px; }
    .friendsList .friendsListContent .friendItem {
      position: relative;
      display: table;
      table-layout: fixed;
      padding: 10px;
      width: 100%;
      box-sizing: border-box;
      border-radius: 14px;
      background: #ffffff;
      margin: 8px 0;
      box-shadow: 0 0 5px #000000; }
      .friendsList .friendsListContent .friendItem > div {
        display: table-cell;
        height: 40px; }
        .friendsList .friendsListContent .friendItem > div.friendImg {
          width: 40px;
          overflow: hidden;
          border-radius: 10px; }
          .friendsList .friendsListContent .friendItem > div.friendImg img {
            display: block;
            width: 100%; }
        .friendsList .friendsListContent .friendItem > div.friendName {
          font-size: 16px;
          vertical-align: middle;
          padding: 0 10px;
          color: #4b687a; }
          .friendsList .friendsListContent .friendItem > div.friendName div {
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            max-height: 40px;
            display: -webkit-box;
            line-height: 20px; }
        .friendsList .friendsListContent .friendItem > div.mark {
          position: relative;
          width: 40px; }
          .friendsList .friendsListContent .friendItem > div.mark div {
            position: relative;
            z-index: 2;
            display: block;
            margin: 7px;
            width: 26px;
            height: 26px;
            box-sizing: border-box;
            background: #1c1c1c;
            border: 3px solid #738285;
            border-radius: 5px; }
          .friendsList .friendsListContent .friendItem > div.mark .checked {
            display: none;
            position: absolute;
            z-index: 9;
            top: -3px;
            width: 34px;
            background-image: url("../images/v.png");
            background-size: 100%;
            background-color: transparent;
            border: none; }
          .friendsList .friendsListContent .friendItem > div.mark.disabled {
            position: absolute;
            right: 20px;
            top: 20px; }
  .friendsList .paging {
    position: absolute;
    background: #bf7f1b;
    border-radius: 5px;
    /* border: 2px solid #3b579d; */
    font-weight: bold;
    font-size: 22px;
    padding: 5px 10px;
    color: #ffffff; }
    .friendsList .paging.next {
      right: 20px; }
    .friendsList .paging.prev {
      left: 20px; }

body.beach #home .titleContainer .title {
  color: #4cdcee;
  text-shadow: 0 0px 10px #3630b3;
  -webkit-text-stroke-color: #1e5689; }

body.beach .page {
  background: url(../images/beach/bg.png) repeat 0 0; }

body.beach .dialog {
  background-color: rgba(0, 191, 255, 0.93);
  border-color: #73c9ff; }
  body.beach .dialog .close {
    border: none; }
  body.beach .dialog button {
    background: #8dc63f;
    color: #565656;
    text-shadow: none;
    border: 1px solid #565656; }

body.beach .player .panel {
  background-color: #387cbf;
  color: #d2de2a;
  box-shadow: 0 -4px 0 #70bbec; }

body.beach .call.assaf {
  transform: rotate(0); }