.utc-datetime span.event-timezone {margin-left: 6px !important; color: #666 !important} body {} .navbar {background-color: #F7F8F9} a.cancel {color: #aaa} #home-container #home-header {margin: -12px -12px 30px -12px; background: #fff url('/assets/img/home/red-mountains.webp') no-repeat scroll center bottom; background-size: cover; text-align: center;} #home-container #home-header .navbar {background-color: transparent; color: #fff !important; transition: background 300ms ease-in 200ms;} #home-container #home-header .navbar.scrolled {background: linear-gradient(90deg, #774256, #4E384B); } #home-container #home-header #logo-black {display: none;} #home-container #home-header .navbar i {color: #fff !important;} #home-container #home-header .navbar-brand {opacity: 0;} #home-container #home-header .user-profile-pic {color: #fff} #home-container #home-header a.nav-link {color: #fff} #home-container #home-header .row {margin: 0;} #home-container #home-header h1 {color: #fff; margin-top: 70px} #home-container #home-header img.logo {margin-top: 70px; margin-bottom: 12px; width: 150px;} #home-container #home-header p {color: #fff; margin-bottom: 32px;} #home-container #home-header a.btn {margin-bottom: 140px} #home-container .row.fractal-bg {background: #fff url('/assets/img/home/fractal-bg.webp') no-repeat scroll center bottom; background-size: cover; color: #fff;} #home-container .row.bottom-separator {border-bottom: 1px solid #eee;} #home-container #chris-signature {width: 100px; margin-bottom: 24px; margin-left: 12px} #home-container .home-activities div {padding: 12px 15px;} #home-container .home-activities i {color: green; margin-right: 6px} #home-hero {margin-top: -12px; position: relative; height: 200px; overflow: hidden} #home-hero h1#callout {position: absolute; top: 128px; color: #fff; z-index: 5} #home-hero .home-slider {width: 100%; background-size: cover; position: absolute; top: 0; left: 0;} #home-hero .home-slider h1 {padding-top: 160px; color: #fff;} #home-container img {max-width: 100%;} .row.footer {} .row.footer ul {padding: 0; list-style-type: none} .row.footer ul li {display: inline; font-size: .8rem; margin-left: 24px; color: #aaa} .row.footer ul li a {color: #aaa} p.disclaimer {font-size: .8rem; color: #aaa;} p.disclaimer a {color: #aaa} h1.page-title {margin: 16px 0 24px 0; font-weight: normal;} h1.page-title a {float: right;} h1.page-title a#new-event {padding: 5px 16px; background-color: green; border-radius: 18px; color: #fff; text-decoration: none; font-size: 1.2rem; margin-top: 2px} h1.page-title a#new-event i {margin-right: 4px} .loading-content {width: 100%; height: 300px; color: #999; text-align: center} .loading-content .spinner-border {height: 16px; width: 16px; margin-right: 10px; border-width: 2px;} .loading-content i {display: block; font-size: 3rem; margin: 100px 0 10px 0;} .loading-content h6 {font-weight: normal} .no-content {width: 100%; height: 300px; color: #999; text-align: center} .no-content i {display: block; font-size: 3rem; margin: 100px 0 10px 0;} .no-content h6 {font-weight: normal; padding: 0 15px} .no-content h6 a {color: #999;} .alert:empty {display: none} .activity-bubble {display: inline-block; font-size: .8rem; margin: 0 .4rem .5rem 0; padding: .2rem .7rem; border-radius: 1rem; background-color: #fff; border: 1px solid #0d6efd; color: #0d6efd; cursor: pointer;} .activity-bubble.active {background-color: #0d6efd; color: #fff;} i.user-verified-backdrop {color: #fff} i.user-verified {color: #1d9bf0} i.star {color: #F8D64C;} i.complete {color: green; font-size: 1.4rem; margin-top: -3px;} i.success {color: green;} .panes {position: relative; overflow: hidden; margin: -12px -12px 0 -12px;} .panes .pane {position: absolute; left: 10000px;} .panes .pane .scroll-y {overflow-y: scroll; overflow-x: hidden; padding: 12px 12px 0 12px;} .important-info, .notice {text-align: left; border-left: 5px solid #006efd; padding: 4px 0 4px 12px; margin-bottom: 24px} .important-info.success, .notice.success {border-left: 5px solid #badbcc;} .important-info.error, .notice.error {border-left: 5px solid red; color: rgb(132, 32, 41)} .input-icon-wrap {position: relative} .input-icon-wrap .input-icon {position: absolute; right: 15px; top: 0px; font-size: 20px;} .input-icon-wrap .input-icon i.success {color: green;} .input-icon-wrap .input-icon i.error {color: red;} .input-icon-wrap .input-help-text {margin: 3px 5px; color: rgb(132, 32, 41); height: 20px;} #user-nav {margin-bottom: 12px; width: 100%; border-top: 1px solid transparent; position: sticky; -webkit-backface-visibility: hidden; top: 0; z-index: 1001;} #user-nav .container-fluid {max-width: 600px !important;} #user-nav .back-btn {display: inline-block; margin-right: 8px; display: none;} body.pwa-standalone #user-nav .back-btn {display: inline-block} #user-nav .back-btn i {font-size: 22px;} #user-nav a#header-inbox {position: relative; color: #444; margin-left: 6px} #user-nav a#header-inbox i {font-size: 24px;} #user-nav a#header-inbox .notification-bubble {display: none; position: absolute; font-size: 14px; top: -12px; left: 16px; color: #fff; background-color: red; font-size: 14px; padding: 0 7px; border-radius: 12px} #user-nav a#header-inbox div.notification-bubble span {font-size: 14px} #user-nav #logo-black {width: 80px; max-width: 100%; opacity: .75; vertical-align: -4px;} #user-nav a#events {margin-right: 8px} #user-nav a#events i {font-size: 24px; color: #444; vertical-align: -3px;} #user-nav a.navbar-brand {margin-right: 0} #user-nav .navbar-toggler {border: none; padding-right: 0} #user-nav .navbar-toggler span {} #user-nav .navbar-toggler span img {height: 30px; width: 30px; border-radius: 50%; border: 1px solid #aaa;} #user-nav .navbar-toggler span .menu-icon {vertical-align: -1px} #user-nav ul.navbar-nav {text-align: right; margin-right: 6px;} #main-container {max-width: 600px !important} #register {} /* #register .panes {position: relative; overflow: hidden;} #register .pane {position: absolute; padding: 0 6px 24px 6px; left: 10000px} */ #register .schp {height: 1px; overflow: hidden} #register .pane #register-name-p {margin-bottom: 16px} #register .pane button.register-next {float: right; margin-bottom: 24px;} #onboarding {} /* #onboarding .panes {position: relative; overflow: hidden;} #onboarding .pane {position: absolute; padding: 0 6px 24px 0; left: 10000px} */ /* #onboarding .pane .scroll-y {overflow-y: scroll; overflow-x: hidden} */ #onboarding .pane button.onboarding-next {float: right; margin-bottom: 24px;} #onboarding .geolocation-enable {text-align: center; padding: 16px 0; margin: 0 70px 36px 70px; border: 1px solid #ccc; border-radius: 8px} #onboarding .geolocation-enable i {font-size: 30px; display: block; color: #444} #onboarding .geolocation-enable span i {font-size: 16px; margin-left: 4px; display: inline; color: green} #onboarding .webpush-enable {text-align: center; padding: 16px 0; margin: 0 70px 36px 70px; border: 1px solid #ccc; border-radius: 8px} #onboarding .webpush-enable i {font-size: 30px; display: block; color: #444} #onboarding .webpush-enable span i {font-size: 16px; margin-left: 4px; display: inline; color: green} #profile {overflow: hidden;} img.chooseable-cover-img {max-width: 100%; margin-bottom: 10px; border-radius: 6px} .being-replaced {-webkit-filter: grayscale(100%); filter: grayscale(100%);} #profile-header {margin-bottom: 24px; position: relative;} #profile-cover {position: relative; height: 160px; width: 100%; background-size: cover; background-position: center; background-blend-mode: saturation; border-radius: 6px} #profile-cover .upload {display: none; background-color: #ccc; position: absolute; bottom:5px; left: 5px; text-align: center; border-radius: 50%; width: 2.3rem; height: 2.3rem;} #profile-cover-pic-upload, #event-cover-pic-upload {text-align: center; padding: 24px 0;} #profile-cover-pic-upload i, #event-cover-pic-upload i { display: block; color: #444; font-size: 40px;} div.or {width: 100%; border-bottom: 1px solid #ccc; margin-bottom: 40px; margin-top: 16px;} div.or div {margin-bottom: -10px; text-align: center} div.or div span {font-size: .9rem; font-style: italic; background-color: #fff; padding: 0 16px; color: #aaa} #profile-header.self .upload {display: block;} #profile-cover .upload i.upload-icon {font-size: 1.5rem; color: #444} #profile-header .report {cursor: pointer; background-color: #ddd; position: absolute; top:5px; right: 5px; text-align: center; border-radius: 50%; width: 24px; height: 24px} #report-header .report span {} #profile-header.self .report {display: none; } #profile-cover .report i.report-icon {font-size: .9rem; color: #222} #profile-cover .upload-progress {position: absolute; top: 0; height: 5px; border-radius: 6px; width: 100%;} #profile-cover .upload-progress .progress-bar {height: 100%; width: 0%; background-color: #0d6efd; border-radius: 6px;} /* #profile-img {height: 130px; width: 130px; border-radius: 50%; border: 3px solid #fff; position: absolute; bottom: -65px; left: 0; right: 0; margin-left: auto; margin-right: auto;} */ #profile-img-progress {height: 130px; width: 130px; border-radius: 50%; background-color: #fff; position: absolute; bottom: -65px; right: 30px; overflow: hidden;} #profile-img-progress .progress-bar {width: 0%; height: 100%; background-color: #0d6efd;} #profile-img {height: 124px; width: 124px; border-radius: 50%; position: absolute; bottom: -62px; right: 33px;} /* #profile-img-progress {height: 130px; width: 130px; border-radius: 50%; border: 3px solid #fff; position: absolute; bottom: -65px; right: 30px; z-index: 5} */ #profile-header form {position: absolute; top: -1000px; height: 0; width: 0; opacity: 0; visibility: hidden;} .hidden-forms {} .hidden-forms form {position: absolute; top: -1000px; height: 0; width: 0; opacity: 0; visibility: hidden;} #profile-info {} #profile-info h2.name {margin-bottom: 0px} #profile-info h2.name i.user-verified {color: #1d9bf0; margin-left: 12px; font-size: 1.4rem;} #profile-info h6.username {color: #777} #profile-bio {margin-top: 20px} #profile-bio p {font-size: .8rem; color: #666; margin-bottom: 0px} #profile-tabs {margin: 16px 0 24px 0; border-bottom: 1px solid #eee;} ul.nav.nav-pills {} ul.nav.nav-pills li.nav-item {color: #444} ul.nav.nav-pills li.nav-item a {color: #444; border-radius: 0;} ul.nav.nav-pills li.nav-item a.active {color: #444; background-color: transparent; border-bottom: 3px solid #444} div.rounded-button {display: inline-block; font-size: .9rem; padding: 4px 12px; margin: 24px 6px 16px 6px; border-radius: 20px; color: #555; background-color: #fff; border: 1px solid #777; cursor: pointer;} div.rounded-button.report-user {padding: 5px 5px 5px 10px; float: right;} div.rounded-button a {color: #555; text-decoration: none} div.rounded-button i {margin-right: 4px} div.rounded-button.active {background-color: #111; border: 1px solid #111; color: #fff} .tab-page {display: none; padding-bottom: 24px} .user-activities {padding-bottom: 16px} .user-activities .activities-cloud {margin: 24px 0; display: none;} .user-activities .activities-cloud.activities-self {display: block;} .user-activities .activities-skill {} .user-activities .activities-skill.user-other {margin-top: 24px} .user-activities .activities-skill .no-skills {width: 100%; height: 400px; color: #999; text-align: center} .user-activities .activities-skill .no-skills i {display: block; font-size: 3rem; margin: 100px 0 10px 0;} .user-activities .activities-skill .no-skills h6 {font-weight: normal} .user-activities .activities-skill .user-activity-row {display: block; min-height: 3rem; padding: .7rem .6rem; border-bottom: 1px solid #ccc} .user-activities .activities-skill .user-activity-row span.activity-name {} .user-activities .activities-skill .user-activity-row span.user-skill-level {float: right; color: #999} .user-activities .activities-skill .user-activity-row i {float: right; margin-left: 6px; color: #999} .user-activities .activities-skill .user-activity-row i.expand-arrow {display: block} .user-activities .activities-skill .user-activity-row i.expanded-arrow {display: none} .user-activities .activities-skill .user-activity-row.expanded i.expand-arrow {display: none} .user-activities .activities-skill .user-activity-row.expanded i.expanded-arrow {display: block} .user-activities .activities-skill .user-activity-row select.user-skill-level-select {float: right; display: none} .user-activities .activities-skill .user-activity-row div.user-activity-options {display: none} .user-activities .activities-skill .user-activity-row.expanded div.user-activity-options {display: block} .user-activities .activities-skill .user-activity-row div.user-activity-options div.option {text-align: right; padding: 10px 24px;} .user-activities .activities-skill .user-activity-row div.user-activity-options div.option i.selected {margin-right: 4px; color: green} .event-filter {background-color: #F8F9FA; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; margin-top: -12px; position: sticky; top: 55px; padding: 8px 0; z-index: 1000} /* .event-filter .filter-option {text-align: center;} */ .event-filter .filter-sentence {text-align: center;} /* .event-filter .filter-option {border: 1px solid #0d6efd; background-color: #0d6efd; color: #fff; border-radius: 16px; padding: 2px 10px;} */ .event-filter .filter-option {border-bottom: 1px dashed #0d6efd; margin: 0 2px; cursor: pointer;} .event-filter-option {display: none; background-color: #F8F9FA; border-bottom: 1px solid #ccc; padding-top: 12px; position: absolute; width: 100%; top: 41px; z-index: 999;} .event-filter-option ul {padding-left: 0px} .event-filter-option ul li {list-style-type: none; margin: 0 0 12px 12px; cursor: pointer;} #user-geo {background-color: #F8F9FA; cursor: pointer; text-align: center; font-size: 12px; margin: 0 -12px; padding: 8px 0; border-bottom: 1px solid #ccc;position: relative} #user-geo a {text-decoration: none; color: var(--bs-body-color);} #user-geo i {margin-right: 2px; font-size: 10px} #user-geo i::before {vertical-align: 0} #is-geo {} #use-geo {display: none; width: 100%; position: absolute; top: 8px} #use-geo .spinner-border {display: none; margin-right: 2px; height: 10px; width: 10px; border-width: 2px; vertical-align: 0;} #use-geo.active .spinner-border {display: inline-block} #use-geo.active i.bi-geo-alt-fill {display: none} #event-detail-view {padding-bottom: 0px} #edit-event-link {background-color: #ccc; margin-top: -12px; margin-bottom: 12px; text-align: right;} #edit-event-link .col {padding: 8px 20px;} #edit-event-link .col a {text-decoration: none; color: #444; display: block;} #event-header {margin-bottom: 16px; position: relative} #event-cover {height: 180px; width: 100%; background-size: cover; background-position: center; border-radius: 6px; position: relative} #event-cover .report {cursor: pointer; background-color: #ddd; position: absolute; top:5px; right: 5px; text-align: center; border-radius: 50%; width: 20px; height: 20px} #event-cover .report span {} #event-cover .report i.report-icon {font-size: .7rem; color: #222; display: block; margin-top: 2px} #event-info {} #event-info h2.name {margin-bottom: 16px} #event-info h2.name i.user-verified {color: #1d9bf0; margin-left: 12px; font-size: 1.4rem;} #event-info h6 {margin: 0 0 4px 0; font-size: .9rem; font-weight: normal; color: #666} #event-info h6.datetime {} #event-info h6.datetime.ical-link {cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-decoration-color: #ccc;} #event-info a.ical-link {cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-decoration-color: #ccc;} #event-info h6.location {} #event-info h6.location span {margin-left: 10px; color: #bbb} #event-info h6.weather {} #event-info h6.weather i {margin-right: 3px} #event-description {margin-top: 16px} #event-description p {font-size: 1rem; color: #444; margin-bottom: 0px} #event-activity-bubbles {margin-top: 14px} #event-rsvp {margin-top: 36px; padding-bottom: 24px; border-bottom: 1px solid #ccc} #event-rsvp h5 {margin-bottom: 24px} #event-rsvp .users-tally {float: right} #event-rsvp .user-tally {margin-left: 26px; font-size: 1.2rem; color: #999; font-weight: normal} #event-rsvp .users {position: relative} #event-rsvp .users a {display: block} #event-rsvp .users .more-arrow {position: absolute; right: 12px; top: 15px; color: #212529 } #event-rsvp img, #event-rsvp div.users-additional {height: 50px; width: 50px; border-radius: 50%;} #event-rsvp .host {position: relative; height: 50px; width: 50px; margin-right: 44px; display: inline-block} #event-rsvp .host i.user-verified-backdrop {position: absolute; font-size: 1.4rem; bottom: -8px; left: -6px;} #event-rsvp .host i.user-verified {position: absolute; font-size: 1.4rem; bottom: -8px; left: -6px;} #event-rsvp .host i.star {position: absolute; font-size: 1.4rem; bottom: -8px; right: -6px; } #event-rsvp .rsvp {display: inline} #event-rsvp .rsvp img {} #event-rsvp .rsvp.user-overlap img {border: 1px solid #fff; display: inline; margin-left: -20px;} #event-rsvp .rsvp.user-overlap div.users-additional {display: inline-block; text-align: center; border: 1px solid #999; background-color: #ddd; margin-left: -20px;} #event-rsvp .rsvp.user-overlap div.users-additional span {display: block; margin-top: 10px; color: #000;} .event-share {margin: 0 -12px; border-bottom: 1px solid #ccc;} .event-share i {float: right; margin: 15px 12px 0 0;} .event-share a {display: block; margin-left: -8px; padding: 16px 12px;text-decoration: none; color: #444} .event-comments {margin: 0;} .event-comments i {float: right; margin-top: 15px} .event-comments a {display: block; margin-left: -8px; padding: 0px; padding: 16px 0;text-decoration: none; color: #444} #event-venue {padding-top: 18px; padding-bottom: 16px; border-top: 1px solid #ccc; cursor: pointer} #event-venue .more-arrow {float: right; margin-right: 12px} #event-venue p {margin: 0;} #event-venue p.address {color: #999; font-size: .8rem;} #event-venue p.address .extended-address {display: none;} #event-venue p.address .extended-address:after {content: ' ';} #event-venue p.address .street-address {display: none;} #event-venue p.address .street-address:after {content: ', '; display: none;} #event-venue p.address .locality:after {content: ', ';} #event-venue p.address .postal-code {display: none;} #event-venue p.address .country-name {display: none;} #event-venue p.about {overflow: hidden; white-space: nowrap; text-overflow: ellipsis; height: 24px; color: #777} #event-venue div.map {position:relative; width: 100%; height: 200px; margin-top: 12px; overflow: hidden;} #event-venue div.map div.map-overlay {width: 100%; height: 100%; background-color: transparent; position: absolute; top: 0; left: 0; z-index: 1000} .event-feed-section {} .event-feed-section .headline {position: sticky; top: 96px; padding: 10px 0; z-index: 100; background-color: #fff;} .event-card-row {cursor: pointer} .event-card-row .event-card {border-radius: 5px; border: 1px solid #ccc; overflow: hidden; margin-bottom: 16px} .event-card-row .event-card .event-cover-pic {height: 140px; width: 100%; background-size: cover; background-position: center; position: relative} .event-card-row .event-card .event-cover-pic .event-rsvp-following {position: absolute; bottom: 10px; left: 20px;} .event-card-row .event-card .event-cover-pic .event-rsvp-following div.rsvp-following {height: 35px; width: 35px; margin-left: -10px; display: inline-block; position: relative} .event-card-row .event-card .event-cover-pic .event-rsvp-following div.rsvp-following img {height: 35px; width: 35px; border: 1px solid #fff; border-radius: 50%;} .event-card-row .event-card .event-cover-pic .event-rsvp-following div.rsvp-following i {position: absolute; bottom: -6px; left: -4px;} .event-card-row .event-card .event-cover-pic .event-rsvp-following div.rsvp-following i.user-going {color: green} .event-card-row .event-card .event-details {padding: 10px 10px} .event-card-row .event-card .event-details h4 {font-size: 1.2rem; } .event-card-row .event-card .event-details h4 .tag-label {display: inline-block; font-size: .8rem; background-color: green; color: #fff; padding: 2px 6px; margin-left: 8px; border-radius: 4px; vertical-align: 2px;} .event-card-row .event-card .event-details h6 {margin: 0 0 4px 0; font-size: .9rem; font-weight: normal; color: #666} .event-card-row .event-card .event-details h6 span {margin-left: 10px; color: #bbb} #event-rsvp-action {background-color: #fff; border-top: 1px solid #ccc; position: sticky; -webkit-backface-visibility: hidden; bottom: 0; z-index: 1001; padding: 12px 0 10px 0; text-align: center} #event-rsvp-action button {width: 100%;} #event-rsvp-action a.btn {width: 100%;} #event-rsvp-action p {margin: 8px 0 0px 0; font-size: .9rem;} body.pwa-standalone #event-rsvp-action p {margin-bottom: 10px} #event-users-going {margin-top: 34px} #event-users-going .rsvp {position: relative; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid #eee; cursor: pointer;} #event-users-going .rsvp .more-arrow {position: absolute; right: 10px; top: 16px} #event-users-going .rsvp img {height: 60px; width: 60px; border-radius: 50%} /* #event-users-going .rsvp span {margin-left: 16px} */ #event-users-going .rsvp p {display: inline-block; vertical-align: middle; font-size: 1.1rem; margin: 0 0 0 16px; max-width: 70%} #event-users-going .rsvp p span {display: block; font-size: .8rem; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} #event-users-going .rsvp .host {position: relative; height: 60px; width: 60px; display: inline-block} #event-users-going .rsvp .host i.user-verified-backdrop {position: absolute; font-size: 1.4rem; bottom: -6px; left: -6px} #event-users-going .rsvp .host i.user-verified {position: absolute; font-size: 1.4rem; bottom: -6px; left: -6px;} #event-users-going .rsvp .host i.star {position: absolute; font-size: 1.4rem; bottom: -6px; right: -6px;} #event-users-going .rsvp .profile-img-container {position: relative; height: 60px; width: 60px; display: inline-block} #event-users-going .rsvp .profile-img-container i {position: absolute; font-size: 1.4rem; bottom: -6px; right: -6px;} #event-users-going .rsvp .profile-img-container i {position: absolute; font-size: 1.4rem; bottom: -6px; right: -6px;} #event-users-going .rsvp .profile-img-container i.star {color: red;} #event-users-going .rsvp .profile-img-container i.user-verified-backdrop {bottom: -6px; left: -8px;} #event-users-going .rsvp .profile-img-container i.user-verified {bottom: -6px; left: -8px;} #venue-detail-view {padding-bottom: 40px} #venue-header {margin-bottom: 16px; position: relative} #venue-cover {height: 180px; width: 100%; background-size: cover; background-position: center; border-radius: 6px} #venue-info {} #venue-info h2.name {margin-bottom: 16px} #venue-info h2.name i.user-verified {color: #1d9bf0; margin-left: 12px; font-size: 1.4rem;} #venue-info h6 {margin: 0 0 4px 0; font-size: .9rem; font-weight: normal} #venue-info h6.datetime {color: #666} #venue-info h6.location {color: #666} #venue-info h6.location span {margin-left: 10px; color: #bbb} #venue-info .venue-links { margin: 24px 0;} #venue-info .venue-links a.venue-link { display: block; border-bottom: 1px solid #ddd; padding: 16px 8px; text-decoration: none; color: #444} #venue-info .venue-links a i {float: right; margin-right: 0px;} #venue-info .venue-links a.venue-link .extended-address {} #venue-info .venue-links a.venue-link .extended-address:after {content: ' ';} #venue-info .venue-links a.venue-link .street-address {/*display: block*/} #venue-info .venue-links a.venue-link .street-address:after {content: '\A'; white-space: pre-wrap;} #venue-info .venue-links a.venue-link .locality:after {content: ', ';} #venue-info .venue-links a.venue-link .country-name {display: none} #venue-description {margin-top: 16px} #venue-description p {font-size: .9rem; color: #444; margin-bottom: 0px} #venue-activity-bubbles {margin-top: 14px} #venue-events {margin-top: 24px} #qr {} #qr .user-profile-qr {position: relative} #qr .user-profile-qr img.qr {width: 100%} #qr .user-profile-qr .logo {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;} #qr .user-profile-qr .logo span {display: inline-block; padding: 2px 14px; color: #111; background-color: #fff; border: 3px solid #fff; font-size: 1.2rem; border-radius: 2rem;} #qr .user-profile-qr .logo i {position: absolute; bottom: -6%; left: 20%; font-size: 8vw;} #qr .user-profile-qr .logo img.user-profile-pic {height: 55%; width: 55%; border-radius: 50%; border: 3px solid #fff} #settings {font-size: .9rem;} #settings .form-switch {margin-bottom: 24px} #settings .form-switch input.form-check-input {width: 3.5em; height: 2rem;} #settings .form-switch label {width: 80%; margin-left: 1.5rem;} #settings .form-switch label span {font-size: .9rem; color: #999} #settings textarea {font-size: .9rem;} #inbox {margin: 0 -12px; border-top: 1px solid #ccc;} #inbox a.message {display: block; text-decoration: none; padding: 12px 0 16px 10px; border-bottom: 1px solid #ccc; border-left: 5px solid #fff} #inbox a.message.message-unread {border-left: 5px solid #0d6efd; background-color: #EAF4FD} #inbox a.message .more-arrow {float: right; margin-top: 2px; margin-right: 10px; color: #999} #inbox a.message span {float: right; margin-top: 4px; margin-right: 5px; color: #999; font-size: .9rem;} #inbox a.message span em {display: inline-block; margin-right: 8px; font-style: normal; background-color: #0d6efd; color: #fff; border-radius: 12px; padding: 0px 7px; margin-top: -2px} #inbox a.message.message-read span em {display: none;} #inbox a.message .profile-img-container {position: relative; height: 60px; width: 60px; margin-right: .8rem; display: inline; float: left;} #inbox a.message .profile-img-container img {height: 60px; width: 60px; border-radius: 50%; float: left; } #inbox a.message .profile-img-container i {position: absolute; font-size: 1.4rem; bottom: -6px; right: -6px;} #inbox a.message .profile-img-container i {position: absolute; font-size: 1.4rem; bottom: -6px; right: -6px;} #inbox a.message .profile-img-container i.user-verified-backdrop {bottom: -6px; left: -8px;} #inbox a.message .profile-img-container i.user-verified {bottom: -6px; left: -8px;} #inbox a.message h6 {font-size: 1.3rem; color: #444; margin-top: 2px; margin-bottom: 5px;} #inbox a.message p {display: block; margin: 0 10px 0 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; height: 24px; color: #555; font-size: .9em;} #chat {margin: 0 -12px;} #chat #chat-user {position: sticky; z-index: 5; background-color: #fff; top: 55px; left: 12px; width: 100%; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; height: 80px; padding: 10px 0; margin: -15px 0 0 0; cursor: pointer;} #chat #chat-user i.more-arrow {position: absolute; right: 10px; top: 25px; color: #212529} #chat #chat-user .profile-img-container {position: relative; height: 60px; width: 60px; margin-right: .8rem; display: inline; float: left;} #chat #chat-user .profile-img-container img {height: 60px; width: 60px; border-radius: 50%; float: left; margin-left: 10px;} #chat #chat-user .profile-img-container i {position: absolute; font-size: 1.4rem; bottom: -6px; right: -6px;} #chat #chat-user .profile-img-container i {position: absolute; font-size: 1.4rem; bottom: -6px; right: -6px;} #chat #chat-user .profile-img-container i.user-verified-backdrop {bottom: -6px; left: 2px;} #chat #chat-user .profile-img-container i.user-verified {bottom: -6px; left: 2px;} #chat #chat-user h6 {display: inline-block; vertical-align: middle; margin: 16px 0 0 16px; font-size: 1.3rem;} #chat #chat-user p {display: block; margin: 0 10px 0 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; height: 24px; color: #555; font-size: .9rem;} #chat .chats-wrapper {position: relative; display: table-cell; height: 500px; vertical-align: bottom; padding: 0;} #chat .chats-wrapper .chats {max-height: 500px; padding: 24px 0 0 0; overflow-y: scroll;} #chat .chats-wrapper .chats #chat-spacer {color: transparent; height: 1px} #chat .load-more-chat {text-align: center; font-size: .8rem; font-weight: bold; color: #0d6efd; cursor: pointer; height: 24px; margin-bottom: 16px;} #chat .load-more-chat .spinner-border {height: 12px; width: 12px; border-width: 2px; margin-left: 8px} #chat .load-more-separator {border-bottom: 1px solid #ccc; margin: 12px 0 24px 0;} #chat .load-more-separator p {margin-bottom: -10px; text-align: center} #chat .load-more-separator p span {font-size: .8rem; text-transform: uppercase; color: #999; background-color: #fff; padding: 0 10px;} #chat .chat {margin: 0px 30% 0px 15px; border-bottom: 1px solid #fefefe; overflow: hidden} #chat .chat.from-me {margin: 0px 15px 0px 30%; text-align: right; border-bottom: 1px solid #408cfd;} #chat .chat:last-child {margin-bottom: 24px !important} #chat .chat.end-string {margin-bottom: 16px; border-bottom: none} #chat .chat p {position: relative; text-align: left; width: 100%; padding: 8px 16px; background-color: #e9e9eb; margin: 0} #chat .chat.from-other.vulgar-filter.potentially-vulgar-1 p {cursor: pointer; filter: blur(4px);} #chat .chat.from-me p {background-color: #0d6efd; color: #fff} #chat .chat.from-me.vulgar-filter.potentially-vulgar-1 p {} /* #chat .chat.new-string p {border-top-left-radius: 12px; border-top-right-radius: 12px} #chat .chat.end-string p {border-bottom-left-radius: 12px; border-bottom-right-radius: 12px;} */ #chat .chat.end-string p::before {position: absolute; background-color: #fff; content: ""; width: 15px; height: 20px; border-radius: 50%; z-index: 3} #chat .chat.end-string p::after {position: absolute; content: ""; width: 16px; height: 14px; border-radius: 50%; z-index: 2;} #chat .chat.from-me.end-string p:before {bottom: 3px; right: -15px;} #chat .chat.from-me.end-string p:after {bottom: 0px; right: -9px; background-color: #0d6efd; } #chat .chat.from-other.end-string p:before {bottom: 3px; left: -15px;} #chat .chat.from-other.end-string p:after {bottom: 0px; left: -9px; background-color: #e9e9eb;} #chat .chat span.name {font-size: .8rem; color: #777; display: block; margin: 0 8px 2px 8px;} #chat .chat span.utc-unix-timestamp {font-size: .7rem; color: #777; display: block; margin: 0 6px; display: none} #chat #chat-input-wrapper {padding: 6px; border-top: 1px solid #ccc; background-color: #eee; position: absolute; width: 100%; bottom: 0; left: 0; z-index: 10} #chat #chat-input-wrapper #chat-input {height: 40px; width: 85%; font-size: 16px} #chat #chat-input-wrapper #chat-send {position: absolute; bottom: 8px; right: 6px; height: 35px; width: 35px; background-color: #006efd; border-radius: 50%; color: #fff; font-size: 20px; padding: 3px 0 0 6px; margin: 3px 8px 0 0; cursor: pointer;} body.pwa-standalone #chat #chat-input-wrapper {padding-bottom: 26px} body.pwa-standalone #chat #chat-input-wrapper #chat-send {bottom: 28px;} #chat .chat {padding: 0px 30% 0px 15px; margin: 0;} #chat .chat .chat-bubble { display: inline-block;} #chat .chat.from-me {border-bottom: 1px solid #fff; padding: 0px 15px 0px 30%; margin: 0;} #chat .chat.end-string {margin-bottom: 16px; border-bottom: none} #chat .chat.after-delay {margin-top: 5px !important;} #chat .chat p {border-radius: 16px; padding: 7px 14px} /* #chat .chat.from-others.new-string p {border-top-left-radius: 18px} #chat .chat.from-others.end-string p {border-bottom-left-radius: 18px;} #chat .chat.from-me.new-string p {border-top-right-radius: 18px} #chat .chat.from-me.end-string p {border-bottom-right-radius: 18px;} */ #chat .chat.emoji-only {font-size: 3rem;} #chat .chat.emoji-only .chat-bubble p {background-color: #fff; padding: 0;} #chat .chat.emoji-only .chat-bubble p:after {background-color: #fff;} #chat .chat.emoji-only.emoji-next {margin-bottom: 0;} #event-messages-view #event-info {position: sticky; padding-bottom: 12px; border-bottom: 1px solid #ccc} #event-messages-view #event-info i {position: absolute; right: 15px; top: 0;} #event-messages-view #event-info h2.name {margin-right: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1.2rem;} #chat .chat.event-group-chat {padding: 0px 20% 0px 15px;} #chat .chat.event-group-chat.from-me {padding: 0px 15px 0px 20%; margin-right: 6px;} #chat .chat.event-group-chat:last-child {margin-bottom: 50px !important} #chat .chat.event-group-chat {position: relative} #chat .chat.event-group-chat img.user-profile-pic {display: none;} #chat .chat.event-group-chat.from-other.end-string img.user-profile-pic {display: block; height: 36px; width: 36px; border-radius: 50%; position: absolute; bottom: 2px; left: -45px; z-index: 5;} #chat .chat.event-group-chat.from-other.end-string.emoji-only img.user-profile-pic {bottom: 19px} #chat .chat.event-group-chat span.name {display: none} #chat .chat.event-group-chat.from-other.new-string span.name {display: block; margin-left: 53px;} #chat .chat.event-group-chat.from-other.new-string.emoji-only span.name {display: none;} #chat .chat.event-group-chat.from-other .chat-bubble {margin-left: 45px; position: relative; } #chat .chat.event-group-chat.from-other span.utc-unix-timestamp {margin-left: 51px;} #auth-code-input {text-align: center} #auth-code-input #auth-code {margin: 0 auto; font-size: 2rem; width: 120px; text-align: center} #auth-code-input #auth-code-login {margin: 0 auto; font-size: 1.2rem; width: 120px; text-align: center} #new-event-duplicate-btn {float: right; margin-top: 20px; font-size: 1rem; background-color: orange; color: #fff; padding: 2px 12px; border-radius: 24px; cursor: pointer;} #new-event-duplicate-btn i {margin-left: 5px;} #new-event-duplicate {display: none;} #new-event-duplicate ul {list-style-type: none; padding-left: 0; padding-bottom: 24px} #new-event-duplicate ul li {border-bottom: 1px solid #ccc; padding-bottom: 8px; margin-bottom: 8px; cursor: pointer} #new-event-duplicate ul li span.name {display: block} #new-event-duplicate ul li span.date {font-size: 12px; color: #777} #new-event-duplicate ul li span.location {font-size: 12px; color: #777; margin-left: 10px} #pane-new-event .input-container i.success {float: right; display: none;} .option-more-link {border-top: 1px solid #ccc; margin: 0 -12px; padding: 15px 12px; cursor: pointer} .option-more-link.complete {background-color: #d1e7dd} .option-more-link i {float: right; margin-right: 12px} .option-more-link:last-child {border-bottom: 1px solid #ccc;} #pane-activities {} #pane-activities .activity-bubble.my-activity {background-color: #e8f1ff} #pane-activities #new-event-activity-image {height: 180px; background-size: cover; background-position: center; border-radius: 6px; margin: 16px 0; position: relative; cursor: pointer;} /* #pane-activities #new-event-activity-image:empty {height: 0px} */ #pane-activities #new-event-activity-image .upload {position: absolute; bottom: 6px; left: 6px;} #pane-activities #new-event-activity-image .upload i {background-color: #ccc; color: #000; padding: 4px 6px; font-size: 1.2rem; border-radius: 50%;} #pane-activities #new-event-activity-image .upload-progress {position: absolute; top: 0; height: 5px; border-radius: 6px; width: 100%;} #pane-activities #new-event-activity-image .upload-progress .progress-bar {height: 100%; width: 0%; background-color: #0d6efd; border-radius: 6px;} img.chooseable-event-cover-img {max-width: 100%; margin-bottom: 10px; border-radius: 6px; cursor: pointer;} /* #venue-map-container {height: 50px; overflow: hidden; margin-bottom: 12px} #venue-map {width: 130%; height: 400px; margin-top: -55px; margin-left: -15%} */ #venue-map-container {height: 50px; overflow: hidden; margin: 12px -12px;} #venue-map {height: 322px;} #user-map-container {height: 50px; overflow: hidden; margin: -12px;} #user-map {height: 472px;} #new-event-start-date, #new-event-end-date {background-color: #fff;} #row-ending {display: none} #new-event-start-time-plus-15, #new-event-end-time-plus-15, #new-event-lasting-other {margin-top: 40px; font-size: 14px; cursor: pointer} .pac-item {padding: 3px 4px !important;} .pac-logo:after {display: none !important;} /* google maps */