#account {
}
  #account #profile {
    transition: all 300ms ease;
    z-index: 1;
    position: fixed;
    display: flex;
    align-items: center;
    right: 0;
    top: 0;
    border: 1px solid #ccc;
    border-radius: 14px;
    padding: 4px 6px;
    margin: 11px;
    cursor: pointer;
    overflow-x: hidden;
  }
    #account #profile .avatar {
      flex: 0 0 16px;
      border-radius: 50%;
      overflow: hidden;
      width: 16px;
      height: 16px;
    }
    #account #profile .name {
      transition: all 300ms ease;
      flex: 1 0;
      font-size: 14px;
      margin-left: 0.5em;
      max-width: 7em;
      text-overflow: ellipsis;
      overflow-x: hidden;
      white-space: nowrap;
    }
    #account #profile .sign-out {
      width: 12px;
      height: 12px;
      background: url(images/sign-out.png) no-repeat;
      background-size: 12px 12px;
      background-position: 0px 0px;
      margin: 0 0.2em 0 0.5em;
      opacity: 0.8;
    }



  /**
   * favorites
  **/
  #account .favorites-btn {
    transform: scale(1.1,1);
    transform-origin: left center;
    color: #ff1148;
    position: fixed;
    z-index: 1;
    top: 38px;
    right: 0;
    margin: 11px;
    cursor: pointer;
  }
    #account .favorites-btn:after {
      content: '♥';
    }


  #account #favorites {
    transition: all 300ms ease;
    position: fixed;
    right: 0;
    bottom: 0;
    top: calc(72px + 4em);
    width: 30%;
    background: #fff;
    z-index: 1;
    padding: 25px;
    box-shadow: 0px 5px 10px -2px rgba(0, 0, 0, 0.5);
  }
    .no-result #account #favorites {
      top: 72px;
    }

    #account #favorites .loader {
      filter: brightness(250%);
      opacity: 0.4;
    }

    #account #favorites.folded {
      right: -45%;
    }
    #account #favorites .header {
      margin-top: 0px;
    }
    #account #favorites .list {
      display: flex;
      flex-flow: row wrap;
      align-content: flex-start;
      overflow-y: scroll;
      height: 100%;
    }
    #account #favorites .item {
      padding-bottom: 1em;
      cursor: pointer;
      background: #fff;
      margin-right: 16px;
      width: calc(50% - 8px);
    }
      #account #favorites .item:nth-of-type(2n) {
        margin-right: 0;
      }
      #account #favorites .content .item:last-of-type {
        padding-bottom: 56px;
      }
        #account #favorites .item .illustration .menu {
          position: absolute;
          top: 5px;
          right: 5px;
          font-size: 16px;
          /* font-weight: bolder; */
          background: white;
          color: grey;
          border-radius: 16px;
          width: 16px;
          height: 16px;
          text-align: center;
          line-height: 7px;
          padding: 2px;
          box-shadow: 0 0 3px 0px rgba(0,0,0,0.3);
          /* text-shadow: 0 0 5px rgba(0,0,0,0.4); */
          transition: all 300ms ease;
        }
          #account #favorites .item .illustration .menu:before {
            content: '...';
          }
            #account #favorites .item .illustration .menu.opened:before {
              content: '';
            }
          #account #favorites .item .illustration .menu.opened {
            background: #ff1148;
            color: white;
            height: 40px;
            border-radius: 20px;
          }
            #account #favorites .menu .add-to-bag, #account #favorites .menu .toggle-favorite {
              opacity: 0;
              position: absolute;
              top: 0px;
              width: 16px;
              color: white;
              text-align: center;
              transition: all 300ms ease;
            }
            #account #favorites .menu .add-to-bag {
              line-height: 14px;
              width: 14px;
              height: 14px;
              border: 1px solid #ff6666;
              border-radius: 50%;
            }
              #account #favorites .menu.opened .add-to-bag {
                opacity: 1;
                top: 2px;
              }
              #account #favorites .menu .add-to-bag:after {
                content: '+';
              }
            #account #favorites .menu .toggle-favorite {
              line-height: 16px;
            }
              #account #favorites .menu.opened .toggle-favorite {
                top: 25px;
                opacity: 1;
                display: block;
                /*text-shadow: 0 0 5px rgba(0,0,0,0.4);*/
                transform: scale(1.1,1);
                transform-origin: left center;
              }
              #account #favorites .menu .toggle-favorite:after {
                content: '♡';
              }
              #account #favorites .menu .toggle-favorite.favorited:after {
                content: '♥';
              }
              #account #favorites .menu.opened .toggle-favorite:after {
              }
                #account #favorites .menu.opened .toggle-favorite.favorited:after {
                }


      #account #favorites .item .illustration {
        position: relative;
        display: flex;
        flex-direction: column;
      }
        #account #favorites .item .illustration {
          min-height: 80px;
        }
        #account #favorites .item .illustration .play-btn {
          bottom: 10px;
          left: 10px;
          position: absolute;
          border: 1px solid #fff;
          border-radius: 50%;
          width: 20px;
          height: 20px;
          line-height: 22px;
          font-size: 10px;
          text-align: center;
          background: white;
          color: #000;
          box-shadow: 0 0 3px 0 rgba(0,0,0,0.3);
        }
        #account #favorites .illustration .route-to {
          bottom: -6px;
          right: 5px;
          position: absolute;
          width: 16px;
          height: 16px;
          background: #fff;
          border-radius: 50%;
          padding: 3px;
          box-shadow: 0 0 3px rgba(0,0,0,0.3);
        }
          #account #favorites .illustration .route-to img {
            width: 15px;
          }
        #account #favorites .item .cover {
          /*margin-top: -1em;*/
          width: 100%;
          height: 100%;
          border-radius: 3px;
        }
      #account #favorites .item .content {
      }
        #account #favorites .item .content .tags {
          overflow-x: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          color: #fff;
          line-height: 1.9em;
        }
          #account #favorites .item .content .tags .tag {
            margin-right: 5px;
            border-radius: 5px;
            border: 1px solid #333;
            color: #333;
            padding: 3px;
            font-size: 0.7em;
            overflow: hidden;
            text-overflow: ellipsis;
            display: inline-block;
            line-height: 1.2em;
            max-width: 8em;
            vertical-align: middle;
          }
        #account #favorites .item .address, .info .address {
          font-size: 10px;
          font-style: italic;
          line-height: 1.2em;
        }
          #account #favorites .item .address a, .info .address a {
            text-decoration: none;
            color: inherit;
          }
        #account #favorites .item h4.title {
          line-height: 1em;
          font-size: 1.2em;
          font-weight: bold;
          margin: 0;
          padding: 0;
          color: #ff1148;
          /*text-decoration: underline;*/
        }
          #account #favorites .item .title a {
            color: #ff1148;
            text-decoration: none;
          }
        #account #favorites .info .summary {
          margin-top: 5px;
        }
        #account #favorites .item .summary {
          line-height: 1em;
          font-size: 1em;
          margin: 0 0 5px 0;
        }




#connect {
  position: relative;
  width: 400px;
  padding: 1em 2em;
  text-align: center;
  border-radius: 5px;
  background: white;
  /*color: #ff1148;*/
  z-index: 2;
  top: calc(50% - 200px - 2em);
  margin: auto;
  box-shadow: 0 0 25px -4px rgba(64, 64, 64, 1);

  display: flex;
  overflow: hidden;
  transition: all 200ms ease;
}
  #connect #sign-in,
  #connect #sign-up {
    flex: 1 0 100%;
    position: relative;
    display: inline-block;
    transition: all 200ms ease;
    left: 0;
  }
  #connect.animate #sign-in.hidden,
  #connect.animate #sign-up.hidden {
    display: inline-block !important;
  }
  #connect.animate #sign-in.hidden {
    left: calc(-100% - 2em);
  }
  #connect.animate #sign-up.hidden {
    left: calc(100% + 2em);
  }

  .socials {
    display: flex;
  }

  .facebook {
    flex: 1 1;
  }
    .facebook-btn {
      border-radius: 3px;
      width: 90%;
      background-color: #4267b2;
      color: #fff;
      cursor: pointer;
    }
      .facebook-btn tr {
        border-collapse: collapse;
        border-spacing: 0
      }
        .facebook-btn .logo {
          margin: 2px;
          line-height: 0;
          text-align: left;
        }
        .facebook-btn .text {
          line-height: 20px;
          margin: 0 24px 0 12px;
          float: left;
          font-size: 16px;
          border: none;
          font-family: Helvetica, Arial, sans-serif;
          letter-spacing: .25px;
          overflow: hidden;
          text-align: center;
          text-overflow: clip;
          white-space: nowrap;
        }
          .facebook-btn svg {
            height: 36px;
            width: 36px;
            color: #fff;
            white-space: nowrap;
          }
            .facebook-btn svg path {
              fill: #fff;
            }


  .spotify-btn {
    flex: 1 1;
    border-radius: 4px;
    background: #1DB954;
    color: #fff;
    min-width: 260px;
    max-width: 272px;
    cursor: pointer;
  }
    .spotify-btn .logo {
      margin: 8px;
      line-height: 0;
    }
      .spotify-btn .logo img {
        width: 24px;
        height: 24px;
        margin: 0;
      }
      .spotify-btn .text {
        line-height: 20px;
        margin: 0 24px 0 12px;
        float: left;
        font-size: 16px;
        border: none;
        font-family: Helvetica, Arial, sans-serif;
        letter-spacing: .25px;
        overflow: hidden;
        text-align: center;
        text-overflow: clip;
        white-space: nowrap;
      }

  button.google-login {
    flex: 1 1;
    display: block;
    width: 90%;
    line-height: 38px;
    height: 40px;
    border-radius: 4px;
    border-style: none;
    background: #3367d6;
    font-size: 16px;
    padding: 1px;
    cursor: pointer;
  }
    .google-login .logo {
      float: left;
      margin: 1px;
      line-height: 0;
      border-radius: 2px;
    }
      .google-login .logo img {
        width: 36px;
        height: 36px;
        margin: 0;
      }
      .google-login .text {
        line-height: 30px;
        margin: 0 24px 0 12px;
        font-size: 16px;
        border: none;
        font-family: Helvetica, Arial, sans-serif;
        letter-spacing: .25px;
        overflow: hidden;
        text-align: center;
        text-overflow: clip;
        white-space: nowrap;
        color: #fff;
      }
  #connect .continue {
    display: flex;
    margin: 1.25em 0;
  }
    #connect .continue hr {
      height: 1px;
      border: none;
      margin: 0.5em 0;
      background: #ddd;
      flex: 1 1;
    }
    #connect .continue div {
      line-height: 1em;
      margin: 0 1em;
      color: #888;
    }
  #connect .sign-in,
  #connect .sign-up {
    font-size: 1em;
  }
    #connect .sign-in h4,
    #connect .sign-up h4 {
      margin: 1em;
      font-size: 1.25em;
      font-weight: bold;
    }
    #connect .sign-in label,
    #connect .sign-up label {
      display: flex;
    }
      #connect .sign-in span,
      #connect .sign-up span {
        flex: 1;
      }
      #connect .sign-in input,
      #connect .sign-up input {
        flex: 2;
        padding: 8px 10px;
        margin: 0.4em 0;
        border-radius: 3px;
        border: 1px solid #ddd;
        font-size: 1em;
      }
        #connect .sign-in input.error,
        #connect .sign-up input.error {
          border: 1px solid #ff1148;
        }
      #connect .sign-in input.submit,
      #connect .sign-up input.submit {
        width: 100%;
        background: #ff1148;
        color: white;
        font-weight: bold;
        font-family: inherit;
        border: none;
        border-radius: 3px;
        cursor: pointer;
      }
    #connect .sign-in email,
    #connect .sign-up email {
    }
    #connect .sign-in password,
    #connect .sign-up password {
    }
  #connect .go-to-sign-up {
  }
    #connect .go-to-sign-up a {
      cursor: pointer;
      color: #ff1148;
    }



.need-to-sign-in #page {
  filter: blur(3px) brightness(100%);
  position: fixed;
}
  .need-to-sign-in #page * {
    pointer-events: none;
  }
  #container.need-to-sign-in {
    position: fixed;
    height: 100%;
    width: 100%;
    overflow: hidden;
  }