/* trackpipe/public/css/fan/signup/fan_signup_common_phone.css */
/* common buttons */
.signup-common-form button,
.ui-dialog.nu-dialog .signup-common-form button {
    background: rgb(0,161,198);
    border-radius: 4px;
    color: #fff;
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    border: none;

    height: auto;
    min-height: 36px;
    padding: 0.2em 1em;
    vertical-align: top;
}
.signup-common-form button:focus,
.ui-dialog.nu-dialog .signup-common-form button:focus {
    background: rgb(0,161,198);
    border: none;
}
.signup-common-form button:active,
.ui-dialog.nu-dialog .signup-common-form button:active {
    background: rgb(0,161,198);
    border: none;
}
.signup-common-form button[disabled],
.ui-dialog.nu-dialog .signup-common-form button[disabled],
.signup-common-form button[disabled]:focus,
.ui-dialog.nu-dialog .signup-common-form button[disabled]:focus {
    background: #555;
    color: #ccc;
    opacity: 0.3;
    border: none;
}

.ui-widget-content .signup-common-form a,
.signup-common-form a {
    color: rgb(0,161,198);
}

.ui-dialog.nu-dialog.blank-title .ui-dialog-titlebar {
    border: none;
    background-color: #FFF;
}

.ui-dialog.nu-dialog.blank-title .ui-dialog-content {
    padding-top: 0;
}

/* fan action form */

.action-form {
    font-size: 16px;
    line-height: 20px;
}

.action-form .buttons {
    margin: 20px auto 0 auto;
}

.action-form .buttons button {
    width: 47%;
    margin-right: 0;
}

.action-form .buttons button.signup {
    margin-right: 4%;
}

.ui-dialog.nu-dialog .signup-common-form button.submit {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    width: 100%;
}

.ui-dialog.nu-dialog .action-form button.login {
    background-color: #FFF;
    color: rgb(0,161,198);
    border: 1px solid rgb(0,161,198);
}

.modal-welcome-message {
    text-align: center;
    font-size: 16px;
    line-height: 20px;
}

.welcome-form .buttons {
    margin: 20px auto 0 auto;
}

.welcome-form .buttons button {
    width: 47%;
    margin-right: 0;
}

.welcome-form .buttons button.signup {
    margin-right: 4%;
}

.welcome-form .buttons button.ok-button {
    background-color: #FFF;
    color: rgb(0,161,198);
    border: 1px solid rgb(0,161,198);
}

.welcome-form .buttons {
    display: inline-block;
    width: 100%;
}

.welcome-form .buttons .get-app {
    margin-right: 4%;
}

.welcome-form .buttons .ok-button.unsupported {
    display: block;
    margin: 0 auto;
}

.verify-nag.signup-common-form {
     width: auto; 
}

.verify-nag button.nag-send-again,
.verify-nag button.nag-cancel {
    width: 46%;
}

.verify-nag .nag-email-change {
    display: block;
    margin: 24px 0 24px 0;
}

.signup-common-form .signup-common-form button.nag-send-again,
.ui-dialog.nu-dialog .signup-common-form button.nag-send-again {
    padding: 0.2em 0.6em;
}


/* invisible recaptcha used by captcha.js */

#global-invisible-recaptcha .grecaptcha-badge {
    z-index: 2000; /* this needs to be above modal dialog backdrop */
}

/* don't show tooltips on mobile */

.signup-tooltip-outer {
    display: none;
}

#menubar-verify-banner {
    display: none;
}

/* welcome_2 pane */
.signup-common-form.welcome-2-form .buttons {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.welcome-2-form {
    margin: -36px 16px 0 16px;
}

.welcome-2-form h1 {
    text-align: center;
    font-size: 26px;
    margin: 20px 0 0 0;
}

.welcome-2-form h2 {
    font-size: 16px;
    margin: 12px 0 12px 0;
    font-weight: 400;
    text-align: center;
}

.welcome-2-form h2.active {
    margin: 34px 0 20px 0;
}

.welcome-2-form h2.welcome {
    font-size: 18px;
    line-height: 22px;
    margin: 6px auto 20px auto;
    width: 100%;
}

.welcome-2-form h2.welcome.no-tooltips {
    margin-top: 36px;
}

.complete-profile-form .item .hint {
    margin: 10px 0 15px 0px;
}

.complete-profile-form .profile-pic label.placeholder-wrapper,
.complete-profile-form .profile-pic label.placeholder-wrapper:hover {
    height: 100%;
    width: 100%;
    border: 4px solid #307d9a;
}

.complete-profile-form .profile-pic label.placeholder-wrapper.loading:focus,
.complete-profile-form .profile-pic label.placeholder-wrapper.loading:hover,
.complete-profile-form .profile-pic label.placeholder-wrapper.loading:hover:focus {
    border: 4px solid #307d9a;
}

.complete-profile-form .profile-pic .placeholder {
    background: #FFF;
}

.complete-profile-form .profile-pic .placeholder .camera-icon {
    fill: #409fc2;
    top: 26px;
    left: 21px;
}

.complete-profile-form .location-display {
    color: #FFF;
}

.complete-profile-form .profile-pic {
    margin-bottom: 20px;
}

.complete-profile-form .skip {
    color: #FFF;
    opacity: 0.5;
    margin-top: 15px;
    display: inline-block;
    font-size: 14px;
}

.signup-common-form.welcome-2-form .buttons button,
.ui-dialog.nu-dialog .signup-common-form.welcome-2-form .buttons button {
    width: 100%;
    height: auto;
    padding: 12px 14px 12px 14px;
    border-radius: 4px;
}

.signup-common-form.welcome-2-form .buttons.split button,
.ui-dialog.nu-dialog .signup-common-form.welcome-2-form .buttons.split button {
    width: 214px;
    height: auto;
    padding: 12px 14px 12px 14px;
    border-radius: 4px;
    border: 1px solid rgb(0,161,198);
}

.signup-common-form.welcome-2-form .buttons.split button:first-child,
.ui-dialog.nu-dialog .signup-common-form.welcome-2-form .buttons.split button:first-child {
    margin-right: 20px;
}

.signup-common-form.welcome-2-form .buttons.split button:last-child,
.ui-dialog.nu-dialog .signup-common-form.welcome-2-form .buttons.split button:last-child {
    background: #FFF;
    color: rgb(0,161,198);
}

.welcome-2-form .buttons a.no-thanks {
    display: block;
    text-align: center;
    margin: 16px 0 0 0;
}

.welcome-2-form .icon img {
    height: 235px;
    margin: 0 auto;
}

.welcome-2-form .to-bandcamp {
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 10px;
}




/* trackpipe/public/css/fan/signup/fan_signup_genre_picker_phone.css */
/* MOBILE GENRE PICKER */
.genre-picker-form.skinny .search-results {
    left: calc(50% - 160px);
}
.genre-picker-form .search-results.results-visible {
    max-height: 124px;
}
.genre-picker-form.skinny .search-wrapper {
    width: 100%;
}
.genre-picker-form.standalone {
    margin-left: 0px;
    margin-right: 0px;
}
.ui-widget.nu-dialog .genre-picker-form .search-wrapper input {
    margin-bottom: 0px;
    border-radius: 24px;
    font-size: 16px;
}

.genre-picker-form > div {
    flex: 1 0 auto;
    transition: all .5s linear;
}
.genre-picker-form .heading-wrapper h4 {
    padding: 16px 0px;
    margin: 0px;
}
.genre-picker-form .heading-wrapper h3 {
    margin: 0px;
    padding: 18px 18px 0px 0px;
    font-weight: bold;
}
.genre-picker-form .heading-wrapper.mobile h3 {
    line-height: 1.3em;
    margin-bottom: 10px;
}
.genre-picker-form {
    margin: 0px;
    flex-direction: column;
}
.genre-picker-form.mobile ul.genres > li.genre.expanded {
    width: 100%;
    margin: 5px 0px;
}
.genre-picker-form .genres-overflow-wrapper.mobile ul.genres > li.genre.expanded,
.genre-picker-form .genres-overflow-wrapper.mobile ul.genres > li.genre.expanded.long,
.genre-picker-form .genres-overflow-wrapper.mobile ul.genres > li.genre.expanded .content{
    height: auto;
}
.genre-picker-form ul.genres > li.genre.expanded .content {
    width: 100%;
}
.genre-picker-form .selected-genres-wrapper {
    width: 100%;
    height: 44px;
}
.genre-picker-form li.genre.expanded .subgenres {
    justify-content: left;
}
.genre-picker-form,
.genre-picker-form .buttons,
.genre-picker-form .genres-overflow-wrapper,
.genre-picker-form .genres-overflow-wrapper ul {
    width: 100%;
    overflow-x: hidden;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    -ms-overflow-style: none;  /* IE 10+ */
    overflow: -moz-scrollbars-none;  /* Firefox */
}
.genre-picker-form .genres-overflow-wrapper::-webkit-scrollbar { /* Safari and Chrome */
    display: none;
}
.genre-picker-form .genres-overflow-wrapper.mobile ul {
    display: inline-block;
}
.genre-picker-form .genres-overflow-wrapper.mobile li.genre.selected {
    display: block;
}
.genre-picker-form .genres-overflow-wrapper.mobile li.genre {
    display: none;
}
.genre-picker-form .genres-overflow-wrapper.mobile li.genre.selected li.subgenre.selected .genre-icon {
    display: inline-block;
}
.genre-picker-form .genres-overflow-wrapper.mobile .genre-icon {
    display: none;
}
.genre-picker-form li.subgenre.selected h3.subgenre-name:hover .genre-icon {
    background-position: -16px 0%;
}
.genre-picker-form .mobile ul.subgenres h3 {
    padding: 5px 14px;
    font-size: 16px;
}
.genre-picker-form .buttons {
    margin: 16px 0px;
}
.genre-picker-form li.genre.expanded .subgenres {
    margin: 0px 0px 10px 0px;
}
.genre-picker-form .mobile ul.subgenres li {
    margin: 4px 2px;
}
.genre-picker-form .mobile ul.genres > li.genre .content > div.genre-title{
    margin: 0px 0px 10px 0px;
}
.genre-picker-form .mobile ul.genres > li.genre .content {
    background: none;
    font-size: 1.2em;
}
.genre-picker-form .genres-overflow-wrapper {
    height: 63.3vh;
}
.genre-picker-form .genres-overflow-wrapper.mobile {
    height: 75.8vh;
}
@media (width: 1024px) and (height: 1366px) { /* ipad pro */
    .genre-picker-form .genres-overflow-wrapper {
        height: 81.2vh;
    }
    .genre-picker-form .genres-overflow-wrapper.mobile {
        height: 85.3vh;
    }
}
@media (width: 768px) and (height: 1024px) { /* ipad */
    .genre-picker-form .genres-overflow-wrapper {
        height: 76.3vh;
    }
    .genre-picker-form .genres-overflow-wrapper.mobile {
        height: 81.7vh;
    }
}
@media (max-width : 414px) and (max-height : 896px) { /* XR, XS MAX*/
    #signup-vm.genre-picker-form {
        margin-left: -10px;
        width: 107%;
    }
    .genre-picker-form .list-wrapper {
    margin: 0px;
    }
    .genre-picker-form .genres-overflow-wrapper {
        height: 51.3vh;
    }
    .genre-picker-form .genres-overflow-wrapper.mobile {
        height: 59.6vh;
    }
}
@media (width: 411px) and (height: 823px) { /* ipad */
    .genre-picker-form .genres-overflow-wrapper {
        height: 66.9vh;
    }
    .genre-picker-form .genres-overflow-wrapper.mobile {
        height: 78.1vh;
    }
}
@media (width: 411px) and (height: 731px) { /* ipad */
    .genre-picker-form .genres-overflow-wrapper {
        height: 49.0vh;
    }
    .genre-picker-form .genres-overflow-wrapper.mobile {
        height: 63.6vh;
    }
}
@media (max-width: 375px) and (max-height: 812px) {
    #signup-vm.genre-picker-form {
        margin-left: -10px;
        width: 107%;
    }
    .genre-picker-form .list-wrapper {
    margin: 0px;
    }
    .genre-picker-form .genres-overflow-wrapper {
        height: 52.5vh;
    }
    .genre-picker-form .genres-overflow-wrapper.mobile {
        height: 61.3vh;
    }
}
@media (max-width: 375px) and (max-height: 667px) {
    #signup-vm.genre-picker-form {
        margin-left: -10px;
        width: 107%;
    }
    .genre-picker-form .list-wrapper {
    margin: 0px;
    }
    .genre-picker-form .genres-overflow-wrapper {
        height: 41.5vh; /*14*/
    }
    .genre-picker-form .genres-overflow-wrapper.mobile {
        height: 55.8vh; /*12*/
    }
}
@media (max-width: 360px) {
    .genre-picker-form .genres-overflow-wrapper {
        height: 57.8vh ;
    }
    .genre-picker-form .genres-overflow-wrapper.mobile {
        height: 72.2vh ;
    }
}
@media (max-width: 320px) {
    .genre-picker-form ul.genres > li.genre.top-level,
    .genre-picker-form ul.genres > li.genre.top-level .content {
        width: 131px;
        height: 131px;
    }
    .genre-picker-form .mobile ul.genres > li.genre.top-level,
    .genre-picker-form .mobile ul.genres > li.genre.top-level .content {
        width: 272px;
        height: auto;
    }
    .genre-picker-form .genres-overflow-wrapper {
        height: 32.5vh;
    }
    .genre-picker-form .genres-overflow-wrapper.mobile {
        height: 49.6vh;
    }
    .genre-picker-form.skinny .search-results {
        left: calc(50% - 141px);
        width: 100%;
    }

}
.genre-picker-form .mobile #electronic-box .content, .genre-picker-form .mobile #rock-box .content, .genre-picker-form .mobile #metal-box .content,
.genre-picker-form .mobile #alternative-box .content, .genre-picker-form .mobile #hip-hop-rap-box .content, .genre-picker-form .mobile #experimental-box .content,
.genre-picker-form .mobile #punk-box .content, .genre-picker-form .mobile #folk-box .content, .genre-picker-form .mobile #pop-box .content, .genre-picker-form .mobile #ambient-box .content,
.genre-picker-form .mobile #soundtrack-box .content, .genre-picker-form .mobile #world-box .content,
.genre-picker-form .mobile #jazz-box .content, .genre-picker-form .mobile #acoustic-box .content, .genre-picker-form .mobile #funk-box .content, .genre-picker-form .mobile #r-b-soul-box .content,
.genre-picker-form .mobile #devotional-box .content, .genre-picker-form .mobile #classical-box .content, .genre-picker-form .mobile #reggae-box .content, .genre-picker-form .mobile #podcasts-box .content,
.genre-picker-form .mobile #country-box .content, .genre-picker-form .mobile #spoken-word-box .content, .genre-picker-form .mobile #comedy-box .content, .genre-picker-form .mobile #blues-box .content,
.genre-picker-form .mobile #kids-box .content, .genre-picker-form .mobile #audiobooks-box .content, .genre-picker-form .mobile #latin-box .content {
    background: none;
}
.genre-picker-form .content ul.subgenres h3 {
    color: white;
}
.genre-picker-form #electronic-box .content ul.subgenres h3 {
    background-color: #F9A55B;
}
.genre-picker-form #rock-box .content ul.subgenres h3 {
    background-color: #F7714E;
}
.genre-picker-form #metal-box .content ul.subgenres h3 {
    background-color: #E0222D;
}
.genre-picker-form #alternative-box .content ul.subgenres h3 {
    background-color: #D62F6A;
}
.genre-picker-form #hip-hop-rap-box .content ul.subgenres h3 {
    background-color: #C33AA4;
}
.genre-picker-form #experimental-box .content ul.subgenres h3 {
    background-color: #9A58C0;
}
.genre-picker-form #punk-box .content ul.subgenres h3 {
    background-color: #816FB2;
}
.genre-picker-form #folk-box .content ul.subgenres h3 {
    background-color: #8690CE;
}
.genre-picker-form #pop-box .content ul.subgenres h3 {
    background-color: #87A8C5;
}
.genre-picker-form #ambient-box .content ul.subgenres h3 {
    background-color: #85BFBC;
}
.genre-picker-form #soundtrack-box .content ul.subgenres h3 {
    background-color: #82D23D;
}
.genre-picker-form #world-box .content ul.subgenres h3 {
    background-color: #B0CA3C;
}
.genre-picker-form #jazz-box .content ul.subgenres h3 {
    background-color: #D6BF3D;
}
.genre-picker-form #acoustic-box .content ul.subgenres h3 {
    background-color: #F9A55B;
}
.genre-picker-form #funk-box .content ul.subgenres h3 {
    background-color: #F7714E;
}
.genre-picker-form #r-b-soul-box .content ul.subgenres h3 {
    background-color: #E0222D;
}
.genre-picker-form #devotional-box .content ul.subgenres h3 {
    background-color: #D62F6A;
}
.genre-picker-form #classical-box .content ul.subgenres h3 {
    background-color: #C33AA4;
}
.genre-picker-form #reggae-box .content ul.subgenres h3 {
    background-color: #9A58C0;
}
.genre-picker-form #podcasts-box .content ul.subgenres h3 {
    background-color: #816FB2;
}
.genre-picker-form #country-box .content ul.subgenres h3 {
    background-color: #8690CE;
}
.genre-picker-form #spoken-word-box .content ul.subgenres h3 {
    background-color: #87A8C5;
}
.genre-picker-form #comedy-box .content ul.subgenres h3 {
    background-color: #85BFBC;
}
.genre-picker-form #blues-box .content ul.subgenres h3 {
    background-color: #82D23D;
}
.genre-picker-form #kids-box .content ul.subgenres h3 {
    background-color: #B0CA3C;
}
.genre-picker-form #audiobooks-box .content ul.subgenres h3 {
    background-color: #D6BF3D;
}
.genre-picker-form #latin-box .content ul.subgenres h3 {
    background-color: #F9A55B;
}
.genre-picker-form #electronic-box .content ul.subgenres li.selected h3,
.genre-picker-form #rock-box .content ul.subgenres li.selected h3,
.genre-picker-form #metal-box .content ul.subgenres li.selected h3,
.genre-picker-form #alternative-box .content ul.subgenres li.selected h3,
.genre-picker-form #hip-hop-rap-box .content ul.subgenres li.selected h3,
.genre-picker-form #experimental-box .content ul.subgenres li.selected h3,
.genre-picker-form #punk-box .content ul.subgenres li.selected h3,
.genre-picker-form #folk-box .content ul.subgenres li.selected h3,
.genre-picker-form #pop-box .content ul.subgenres li.selected h3,
.genre-picker-form #ambient-box .content ul.subgenres li.selected h3,
.genre-picker-form #soundtrack-box .content ul.subgenres li.selected h3,
.genre-picker-form #world-box .content ul.subgenres li.selected h3,
.genre-picker-form #jazz-box .content ul.subgenres li.selected h3,
.genre-picker-form #acoustic-box .content ul.subgenres li.selected h3,
.genre-picker-form #funk-box .content ul.subgenres li.selected h3,
.genre-picker-form #r-b-soul-box .content ul.subgenres li.selected h3,
.genre-picker-form #devotional-box .content ul.subgenres li.selected h3,
.genre-picker-form #classical-box .content ul.subgenres li.selected h3,
.genre-picker-form #reggae-box .content ul.subgenres li.selected h3,
.genre-picker-form #podcasts-box .content ul.subgenres li.selected h3,
.genre-picker-form #country-box .content ul.subgenres li.selected h3,
.genre-picker-form #spoken-word-box .content ul.subgenres li.selected h3,
.genre-picker-form #comedy-box .content ul.subgenres li.selected h3,
.genre-picker-form #blues-box .content ul.subgenres li.selected h3,
.genre-picker-form #kids-box .content ul.subgenres li.selected h3,
.genre-picker-form #audiobooks-box .content ul.subgenres li.selected h3,
.genre-picker-form #latin-box .content ul.subgenres li.selected h3 {
    background-color: rgba(51,51,51,1);
}

/* MOBILE NEWSLETTER PICKER */
.newsletter-picker-form {
    margin-top: 56px;
}
.mobile-onboarding .newsletter-picker-form .heading-wrapper {
    display: flex;
    margin-bottom: 22px;
    font-size: 16px;
    align-items: center;
}
.mobile-onboarding .newsletter-picker-form .heading-wrapper .text {
    font-size: 16px;
    padding-right: 10px;
}
.mobile-onboarding .newsletter-picker-form .heading-wrapper .icon {
    margin-top: 0px;
    width: 120px;
    height: auto;
}
.mobile-onboarding .newsletter-picker-form .heading-wrapper .icon img {
    margin-left: -8px;
}
.newsletter-picker-form .buttons,
.newsletter-picker-form .email-abuse {
    width: 100%;
    font-size: 14px;
}
.newsletter-picker-form .buttons {
    white-space: nowrap;
}
.ui-dialog.nu-dialog.mobile-onboarding .signup-common-form.newsletter-picker-form .buttons.split button.no,
.ui-dialog.nu-dialog.mobile-onboarding .signup-common-form.newsletter-picker-form .buttons.split button.yes {
    width: 40vw;
    padding: 12px 5px;
}
@media (max-width: 320px) {
    .ui-dialog.nu-dialog.mobile-onboarding .signup-common-form.newsletter-picker-form .buttons.split button.yes {
        margin-right: 0px;
    }
}