html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
display: block;
}
audio,
canvas,
progress,
video {
display: inline-block;
}
audio:not([controls]) {
display: none;
height: 0;
}
progress {
vertical-align: baseline;
}
template,
[hidden] {
display: none;
}
a {
background-color: transparent;
-webkit-text-decoration-skip: objects;
}
a:active,
a:hover {
outline-width: 0;
}
abbr[title] {
border-bottom: none;
text-decoration: underline;
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
b,
strong {
font-weight: inherit;
}
b,
strong {
font-weight: bolder;
}
dfn {
font-style: italic;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
}
mark {
background-color: #ff0;
color: #000;
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
img {
border-style: none;
}
svg:not(:root) {
overflow: hidden;
}
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
figure {
margin: 1em 40px;
}
hr {
box-sizing: content-box;
height: 0;
overflow: visible;
}
button,
input,
select,
textarea {
font: inherit;
margin: 0;
}
optgroup {
font-weight: bold;
}
button,
input {
overflow: visible;
}
button,
select {
text-transform: none;
}
button,
html [type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
legend {
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal;
}
textarea {
overflow: auto;
}
[type="checkbox"],
[type="radio"] {
box-sizing: border-box;
padding: 0;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
[type="search"] {
-webkit-appearance: textfield;
outline-offset: -2px;
}
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-input-placeholder {
color: inherit;
opacity: 0.54;
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit;
}
.g-grid {
overflow: hidden;
list-style: none;
max-width: 1280px;
margin: 0 auto;
width: 100%;
zoom: 1;
}
.g-grid:before,
.g-grid:after {
content: '';
display: table;
}
.g-grid:after {
clear: both;
}
.g-grid.overflow-visible {
overflow: visible;
}
.g-grid .g-cols {
margin-left: -4px;
margin-right: -4px;
}
.g-grid .g-cols > .g-col {
float: left;
position: relative;
padding: 4px;
}
.g-grid .g-cols > .g-col img {
max-width: 100%;
height: auto;
ms-interpolation-mode: bicubic;
}
.g-grid .g-cols.no-padding {
margin-left: 0;
margin-right: 0;
}
.g-grid .g-cols.no-padding > .g-col {
padding: 0 !important;
}
.g-grid * {
box-sizing: border-box;
}
.g-grid .g-cols .g-xs-1 {
width: 8.333333333333332%;
box-sizing: border-box;
}
.g-grid .g-cols .g-xs-1:nth-child(n) {
padding-left: 4px;
padding-right: 4px;
clear: none;
}
.g-grid .g-cols .g-xs-1:nth-child(12n + 1) {
clear: both;
}
.g-grid .g-cols .g-xs-1:nth-child(1) {
padding-top: 0;
}
.g-grid .g-cols .g-xs-1:nth-child(11) {
padding-bottom: 0;
}
.g-grid .g-cols .g-xs-1:nth-child(2) {
padding-top: 0;
}
.g-grid .g-cols .g-xs-1:nth-child(10) {
padding-bottom: 0;
}
.g-grid .g-cols .g-xs-1:nth-child(3) {
padding-top: 0;
}
.g-grid .g-cols .g-xs-1:nth-child(9) {
padding-bottom: 0;
}
.g-grid .g-cols .g-xs-1:nth-child(4) {
padding-top: 0;
}
.g-grid .g-cols .g-xs-1:nth-child(8) {
padding-bottom: 0;
}
.g-grid .g-cols .g-xs-1:nth-child(5) {
padding-top: 0;
}
.g-grid .g-cols .g-xs-1:nth-child(7) {
padding-bottom: 0;
}
.g-grid .g-cols .g-xs-1:nth-child(6) {
padding-top: 0;
}
.g-grid .g-cols .g-xs-1:nth-child(6) {
padding-bottom: 0;
}
.g-grid .g-cols .g-xs-1:nth-child(7) {
padding-top: 0;
}
.g-grid .g-cols .g-xs-1:nth-child(5) {
padding-bottom: 0;
}
.g-grid .g-cols .g-xs-1:nth-child(8) {
padding-top: 0;
}
.g-grid .g-cols .g-xs-1:nth-child(4) {
padding-bottom: 0;
}
.g-grid .g-cols .g-xs-1:nth-child(9) {
padding-top: 0;
}
.g-grid .g-cols .g-xs-1:nth-child(3) {
padding-bottom: 0;
}
.g-grid .g-cols .g-xs-1:nth-child(10) {
padding-top: 0;
}
.g-grid .g-cols .g-xs-1:nth-child(2) {
padding-bottom: 0;
}
.g-grid .g-cols .g-xs-1:nth-child(11) {
padding-top: 0;
}
.g-grid .g-cols .g-xs-1:nth-child(1) {
padding-bottom: 0;
}
.g-grid .g-cols .g-xs-1:nth-child(12) {
padding-top: 0;
}
.g-grid .g-cols .g-xs-1:nth-child(0) {
padding-bottom: 0;
}
.g-grid .g-cols .g-xs-2 {
width: 16.666666666666664%;
box-sizing: border-box;
}
.g-grid .g-cols .g-xs-2:nth-child(n) {
padding-left: 4px;
padding-right: 4px;
clear: none;
}
.g-grid .g-cols .g-xs-2:nth-child(6n + 1) {
clear: both;
}
.g-grid .g-cols .g-xs-2:nth-child(1) {
padding-top: 0;
}
.g-grid .g-cols .g-xs-2:nth-child(11) {
padding-bottom: 0;
}
.g-grid .g-cols .g-xs-2:nth-child(2) {
padding-top: 0;
}
.g-grid .g-cols .g-xs-2:nth-child(10) {
padding-bottom: 0;
}
.g-grid .g-cols .g-xs-2:nth-child(3) {
padding-top: 0;
}
.g-grid .g-cols .g-xs-2:nth-child(9) {
padding-bottom: 0;
}
.g-grid .g-cols .g-xs-2:nth-child(4) {
padding-top: 0;
}
.g-grid .g-cols .g-xs-2:nth-child(8) {
padding-bottom: 0;
}
.g-grid .g-cols .g-xs-2:nth-child(5) {
padding-top: 0;
}
.g-grid .g-cols .g-xs-2:nth-child(7) {
padding-bottom: 0;
}
.g-grid .g-cols .g-xs-2:nth-child(6) {
padding-top: 0;
}
.g-grid .g-cols .g-xs-2:nth-child(6) {
padding-bottom: 0;
}
.g-grid .g-cols .g-xs-3 {
width: 25%;
box-sizing: border-box;
}
.g-grid .g-cols .g-xs-3:nth-child(n) {
padding-left: 4px;
padding-right: 4px;
clear: none;
}
.g-grid .g-cols .g-xs-3:nth-child(4n + 1) {
clear: both;
}
.g-grid .g-cols .g-xs-3:nth-child(1) {
padding-top: 0;
}
.g-grid .g-cols .g-xs-3:nth-child(11) {
padding-bottom: 0;
}
.g-grid .g-cols .g-xs-3:nth-child(2) {
padding-top: 0;
}
.g-grid .g-cols .g-xs-3:nth-child(10) {
padding-bottom: 0;
}
.g-grid .g-cols .g-xs-3:nth-child(3) {
padding-top: 0;
}
.g-grid .g-cols .g-xs-3:nth-child(9) {
padding-bottom: 0;
}
.g-grid .g-cols .g-xs-3:nth-child(4) {
padding-top: 0;
}
.g-grid .g-cols .g-xs-3:nth-child(8) {
padding-bottom: 0;
}
.g-grid .g-cols .g-xs-4 {
width: 33.33333333333333%;
box-sizing: border-box;
}
.g-grid .g-cols .g-xs-4:nth-child(n) {
padding-left: 4px;
padding-right: 4px;
clear: none;
}
.g-grid .g-cols .g-xs-4:nth-child(3n + 1) {
clear: both;
}
.g-grid .g-cols .g-xs-4:nth-child(1) {
padding-top: 0;
}
.g-grid .g-cols .g-xs-4:nth-child(11) {
padding-bottom: 0;
}
.g-grid .g-cols .g-xs-4:nth-child(2) {
padding-top: 0;
}
.g-grid .g-cols .g-xs-4:nth-child(10) {
padding-bottom: 0;
}
.g-grid .g-cols .g-xs-4:nth-child(3) {
padding-top: 0;
}
.g-grid .g-cols .g-xs-4:nth-child(9) {
padding-bottom: 0;
}
.g-grid .g-cols .g-xs-6 {
width: 50%;
box-sizing: border-box;
}
.g-grid .g-cols .g-xs-6:nth-child(n) {
padding-left: 4px;
padding-right: 4px;
clear: none;
}
.g-grid .g-cols .g-xs-6:nth-child(2n + 1) {
clear: both;
}
.g-grid .g-cols .g-xs-6:nth-child(1) {
padding-top: 0;
}
.g-grid .g-cols .g-xs-6:nth-child(11) {
padding-bottom: 0;
}
.g-grid .g-cols .g-xs-6:nth-child(2) {
padding-top: 0;
}
.g-grid .g-cols .g-xs-6:nth-child(10) {
padding-bottom: 0;
}
.g-grid .g-cols .g-xs-12 {
width: 100%;
box-sizing: border-box;
}
.g-grid .g-cols .g-xs-12:nth-child(n) {
padding-left: 4px;
padding-right: 4px;
clear: none;
}
.g-grid .g-cols .g-xs-12:nth-child(1n + 1) {
clear: both;
}
.g-grid .g-cols .g-xs-12:nth-child(1) {
padding-top: 0;
}
.g-grid .g-cols .g-xs-12:nth-child(11) {
padding-bottom: 0;
}
@media (max-width: 768px) {
.g-cols.lt-md-no-padding {
margin-left: 0 !important;
margin-right: 0 !important;
}
.g-cols.lt-md-no-padding .g-col {
padding: 0 !important;
}
}
@media (min-width: 340px) {
.g-grid .g-cols .g-sm-1 {
width: 8.333333333333332%;
box-sizing: border-box;
}
.g-grid .g-cols .g-sm-1:nth-child(n) {
padding-left: 4px;
padding-right: 4px;
clear: none;
}
.g-grid .g-cols .g-sm-1:nth-child(12n + 1) {
clear: both;
}
.g-grid .g-cols .g-sm-1:nth-child(1) {
padding-top: 0;
}
.g-grid .g-cols .g-sm-1:nth-child(11) {
padding-bottom: 0;
}
.g-grid .g-cols .g-sm-1:nth-child(2) {
padding-top: 0;
}
.g-grid .g-cols .g-sm-1:nth-child(10) {
padding-bottom: 0;
}
.g-grid .g-cols .g-sm-1:nth-child(3) {
padding-top: 0;
}
.g-grid .g-cols .g-sm-1:nth-child(9) {
padding-bottom: 0;
}
.g-grid .g-cols .g-sm-1:nth-child(4) {
padding-top: 0;
}
.g-grid .g-cols .g-sm-1:nth-child(8) {
padding-bottom: 0;
}
.g-grid .g-cols .g-sm-1:nth-child(5) {
padding-top: 0;
}
.g-grid .g-cols .g-sm-1:nth-child(7) {
padding-bottom: 0;
}
.g-grid .g-cols .g-sm-1:nth-child(6) {
padding-top: 0;
}
.g-grid .g-cols .g-sm-1:nth-child(6) {
padding-bottom: 0;
}
.g-grid .g-cols .g-sm-1:nth-child(7) {
padding-top: 0;
}
.g-grid .g-cols .g-sm-1:nth-child(5) {
padding-bottom: 0;
}
.g-grid .g-cols .g-sm-1:nth-child(8) {
padding-top: 0;
}
.g-grid .g-cols .g-sm-1:nth-child(4) {
padding-bottom: 0;
}
.g-grid .g-cols .g-sm-1:nth-child(9) {
padding-top: 0;
}
.g-grid .g-cols .g-sm-1:nth-child(3) {
padding-bottom: 0;
}
.g-grid .g-cols .g-sm-1:nth-child(10) {
padding-top: 0;
}
.g-grid .g-cols .g-sm-1:nth-child(2) {
padding-bottom: 0;
}
.g-grid .g-cols .g-sm-1:nth-child(11) {
padding-top: 0;
}
.g-grid .g-cols .g-sm-1:nth-child(1) {
padding-bottom: 0;
}
.g-grid .g-cols .g-sm-1:nth-child(12) {
padding-top: 0;
}
.g-grid .g-cols .g-sm-1:nth-child(0) {
padding-bottom: 0;
}
.g-grid .g-cols .g-sm-2 {
width: 16.666666666666664%;
box-sizing: border-box;
}
.g-grid .g-cols .g-sm-2:nth-child(n) {
padding-left: 4px;
padding-right: 4px;
clear: none;
}
.g-grid .g-cols .g-sm-2:nth-child(6n + 1) {
clear: both;
}
.g-grid .g-cols .g-sm-2:nth-child(1) {
padding-top: 0;
}
.g-grid .g-cols .g-sm-2:nth-child(11) {
padding-bottom: 0;
}
.g-grid .g-cols .g-sm-2:nth-child(2) {
padding-top: 0;
}
.g-grid .g-cols .g-sm-2:nth-child(10) {
padding-bottom: 0;
}
.g-grid .g-cols .g-sm-2:nth-child(3) {
padding-top: 0;
}
.g-grid .g-cols .g-sm-2:nth-child(9) {
padding-bottom: 0;
}
.g-grid .g-cols .g-sm-2:nth-child(4) {
padding-top: 0;
}
.g-grid .g-cols .g-sm-2:nth-child(8) {
padding-bottom: 0;
}
.g-grid .g-cols .g-sm-2:nth-child(5) {
padding-top: 0;
}
.g-grid .g-cols .g-sm-2:nth-child(7) {
padding-bottom: 0;
}
.g-grid .g-cols .g-sm-2:nth-child(6) {
padding-top: 0;
}
.g-grid .g-cols .g-sm-2:nth-child(6) {
padding-bottom: 0;
}
.g-grid .g-cols .g-sm-3 {
width: 25%;
box-sizing: border-box;
}
.g-grid .g-cols .g-sm-3:nth-child(n) {
padding-left: 4px;
padding-right: 4px;
clear: none;
}
.g-grid .g-cols .g-sm-3:nth-child(4n + 1) {
clear: both;
}
.g-grid .g-cols .g-sm-3:nth-child(1) {
padding-top: 0;
}
.g-grid .g-cols .g-sm-3:nth-child(11) {
padding-bottom: 0;
}
.g-grid .g-cols .g-sm-3:nth-child(2) {
padding-top: 0;
}
.g-grid .g-cols .g-sm-3:nth-child(10) {
padding-bottom: 0;
}
.g-grid .g-cols .g-sm-3:nth-child(3) {
padding-top: 0;
}
.g-grid .g-cols .g-sm-3:nth-child(9) {
padding-bottom: 0;
}
.g-grid .g-cols .g-sm-3:nth-child(4) {
padding-top: 0;
}
.g-grid .g-cols .g-sm-3:nth-child(8) {
padding-bottom: 0;
}
.g-grid .g-cols .g-sm-4 {
width: 33.33333333333333%;
box-sizing: border-box;
}
.g-grid .g-cols .g-sm-4:nth-child(n) {
padding-left: 4px;
padding-right: 4px;
clear: none;
}
.g-grid .g-cols .g-sm-4:nth-child(3n + 1) {
clear: both;
}
.g-grid .g-cols .g-sm-4:nth-child(1) {
padding-top: 0;
}
.g-grid .g-cols .g-sm-4:nth-child(11) {
padding-bottom: 0;
}
.g-grid .g-cols .g-sm-4:nth-child(2) {
padding-top: 0;
}
.g-grid .g-cols .g-sm-4:nth-child(10) {
padding-bottom: 0;
}
.g-grid .g-cols .g-sm-4:nth-child(3) {
padding-top: 0;
}
.g-grid .g-cols .g-sm-4:nth-child(9) {
padding-bottom: 0;
}
.g-grid .g-cols .g-sm-6 {
width: 50%;
box-sizing: border-box;
}
.g-grid .g-cols .g-sm-6:nth-child(n) {
padding-left: 4px;
padding-right: 4px;
clear: none;
}
.g-grid .g-cols .g-sm-6:nth-child(2n + 1) {
clear: both;
}
.g-grid .g-cols .g-sm-6:nth-child(1) {
padding-top: 0;
}
.g-grid .g-cols .g-sm-6:nth-child(11) {
padding-bottom: 0;
}
.g-grid .g-cols .g-sm-6:nth-child(2) {
padding-top: 0;
}
.g-grid .g-cols .g-sm-6:nth-child(10) {
padding-bottom: 0;
}
.g-grid .g-cols .g-sm-12 {
width: 100%;
box-sizing: border-box;
}
.g-grid .g-cols .g-sm-12:nth-child(n) {
padding-left: 4px;
padding-right: 4px;
clear: none;
}
.g-grid .g-cols .g-sm-12:nth-child(1n + 1) {
clear: both;
}
.g-grid .g-cols .g-sm-12:nth-child(1) {
padding-top: 0;
}
.g-grid .g-cols .g-sm-12:nth-child(11) {
padding-bottom: 0;
}
}
@media (min-width: 768px) {
.g-grid .g-cols .g-md-1 {
width: 8.333333333333332%;
box-sizing: border-box;
}
.g-grid .g-cols .g-md-1:nth-child(n) {
padding-left: 4px;
padding-right: 4px;
clear: none;
}
.g-grid .g-cols .g-md-1:nth-child(12n + 1) {
clear: both;
}
.g-grid .g-cols .g-md-1:nth-child(1) {
padding-top: 0;
}
.g-grid .g-cols .g-md-1:nth-child(11) {
padding-bottom: 0;
}
.g-grid .g-cols .g-md-1:nth-child(2) {
padding-top: 0;
}
.g-grid .g-cols .g-md-1:nth-child(10) {
padding-bottom: 0;
}
.g-grid .g-cols .g-md-1:nth-child(3) {
padding-top: 0;
}
.g-grid .g-cols .g-md-1:nth-child(9) {
padding-bottom: 0;
}
.g-grid .g-cols .g-md-1:nth-child(4) {
padding-top: 0;
}
.g-grid .g-cols .g-md-1:nth-child(8) {
padding-bottom: 0;
}
.g-grid .g-cols .g-md-1:nth-child(5) {
padding-top: 0;
}
.g-grid .g-cols .g-md-1:nth-child(7) {
padding-bottom: 0;
}
.g-grid .g-cols .g-md-1:nth-child(6) {
padding-top: 0;
}
.g-grid .g-cols .g-md-1:nth-child(6) {
padding-bottom: 0;
}
.g-grid .g-cols .g-md-1:nth-child(7) {
padding-top: 0;
}
.g-grid .g-cols .g-md-1:nth-child(5) {
padding-bottom: 0;
}
.g-grid .g-cols .g-md-1:nth-child(8) {
padding-top: 0;
}
.g-grid .g-cols .g-md-1:nth-child(4) {
padding-bottom: 0;
}
.g-grid .g-cols .g-md-1:nth-child(9) {
padding-top: 0;
}
.g-grid .g-cols .g-md-1:nth-child(3) {
padding-bottom: 0;
}
.g-grid .g-cols .g-md-1:nth-child(10) {
padding-top: 0;
}
.g-grid .g-cols .g-md-1:nth-child(2) {
padding-bottom: 0;
}
.g-grid .g-cols .g-md-1:nth-child(11) {
padding-top: 0;
}
.g-grid .g-cols .g-md-1:nth-child(1) {
padding-bottom: 0;
}
.g-grid .g-cols .g-md-1:nth-child(12) {
padding-top: 0;
}
.g-grid .g-cols .g-md-1:nth-child(0) {
padding-bottom: 0;
}
.g-grid .g-cols .g-md-2 {
width: 16.666666666666664%;
box-sizing: border-box;
}
.g-grid .g-cols .g-md-2:nth-child(n) {
padding-left: 4px;
padding-right: 4px;
clear: none;
}
.g-grid .g-cols .g-md-2:nth-child(6n + 1) {
clear: both;
}
.g-grid .g-cols .g-md-2:nth-child(1) {
padding-top: 0;
}
.g-grid .g-cols .g-md-2:nth-child(11) {
padding-bottom: 0;
}
.g-grid .g-cols .g-md-2:nth-child(2) {
padding-top: 0;
}
.g-grid .g-cols .g-md-2:nth-child(10) {
padding-bottom: 0;
}
.g-grid .g-cols .g-md-2:nth-child(3) {
padding-top: 0;
}
.g-grid .g-cols .g-md-2:nth-child(9) {
padding-bottom: 0;
}
.g-grid .g-cols .g-md-2:nth-child(4) {
padding-top: 0;
}
.g-grid .g-cols .g-md-2:nth-child(8) {
padding-bottom: 0;
}
.g-grid .g-cols .g-md-2:nth-child(5) {
padding-top: 0;
}
.g-grid .g-cols .g-md-2:nth-child(7) {
padding-bottom: 0;
}
.g-grid .g-cols .g-md-2:nth-child(6) {
padding-top: 0;
}
.g-grid .g-cols .g-md-2:nth-child(6) {
padding-bottom: 0;
}
.g-grid .g-cols .g-md-3 {
width: 25%;
box-sizing: border-box;
}
.g-grid .g-cols .g-md-3:nth-child(n) {
padding-left: 4px;
padding-right: 4px;
clear: none;
}
.g-grid .g-cols .g-md-3:nth-child(4n + 1) {
clear: both;
}
.g-grid .g-cols .g-md-3:nth-child(1) {
padding-top: 0;
}
.g-grid .g-cols .g-md-3:nth-child(11) {
padding-bottom: 0;
}
.g-grid .g-cols .g-md-3:nth-child(2) {
padding-top: 0;
}
.g-grid .g-cols .g-md-3:nth-child(10) {
padding-bottom: 0;
}
.g-grid .g-cols .g-md-3:nth-child(3) {
padding-top: 0;
}
.g-grid .g-cols .g-md-3:nth-child(9) {
padding-bottom: 0;
}
.g-grid .g-cols .g-md-3:nth-child(4) {
padding-top: 0;
}
.g-grid .g-cols .g-md-3:nth-child(8) {
padding-bottom: 0;
}
.g-grid .g-cols .g-md-4 {
width: 33.33333333333333%;
box-sizing: border-box;
}
.g-grid .g-cols .g-md-4:nth-child(n) {
padding-left: 4px;
padding-right: 4px;
clear: none;
}
.g-grid .g-cols .g-md-4:nth-child(3n + 1) {
clear: both;
}
.g-grid .g-cols .g-md-4:nth-child(1) {
padding-top: 0;
}
.g-grid .g-cols .g-md-4:nth-child(11) {
padding-bottom: 0;
}
.g-grid .g-cols .g-md-4:nth-child(2) {
padding-top: 0;
}
.g-grid .g-cols .g-md-4:nth-child(10) {
padding-bottom: 0;
}
.g-grid .g-cols .g-md-4:nth-child(3) {
padding-top: 0;
}
.g-grid .g-cols .g-md-4:nth-child(9) {
padding-bottom: 0;
}
.g-grid .g-cols .g-md-6 {
width: 50%;
box-sizing: border-box;
}
.g-grid .g-cols .g-md-6:nth-child(n) {
padding-left: 4px;
padding-right: 4px;
clear: none;
}
.g-grid .g-cols .g-md-6:nth-child(2n + 1) {
clear: both;
}
.g-grid .g-cols .g-md-6:nth-child(1) {
padding-top: 0;
}
.g-grid .g-cols .g-md-6:nth-child(11) {
padding-bottom: 0;
}
.g-grid .g-cols .g-md-6:nth-child(2) {
padding-top: 0;
}
.g-grid .g-cols .g-md-6:nth-child(10) {
padding-bottom: 0;
}
.g-grid .g-cols .g-md-12 {
width: 100%;
box-sizing: border-box;
}
.g-grid .g-cols .g-md-12:nth-child(n) {
padding-left: 4px;
padding-right: 4px;
clear: none;
}
.g-grid .g-cols .g-md-12:nth-child(1n + 1) {
clear: both;
}
.g-grid .g-cols .g-md-12:nth-child(1) {
padding-top: 0;
}
.g-grid .g-cols .g-md-12:nth-child(11) {
padding-bottom: 0;
}
}
100% {
opacity: 1;
}
html,
body {
width: 100%;
height: 100%;
}
body {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.5px;
-webkit-tap-highlight-color: transparent;
background: #fff;
background: var(--tertiary-0);
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
}
#zorium-root.is-ios {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
overflow: auto;
}
#zorium-root.has-overlay-page .z-nav-drawer {
display: none;
}
#zorium-root > .z-root {
display: flex;
}
#zorium-root > .z-root > .content {
flex: 1;
min-height: 0;
min-width: 0;
display: flex;
flex-direction: column;
}
#zorium-root > .z-root > .content > .page {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
#zorium-root > .z-root > .overlay-page {
position: fixed;
z-index: 100;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #fff;
background: var(--tertiary-0);
display: flex;
flex-direction: column;
animation: z-overlay-fade-in 0.2s;
}
#zorium-root > .z-root > #server-loading {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.54);
z-index: 999999;
opacity: 0;
padding: 16px;
box-sizing: border-box;
display: flex;
align-items: center;
text-align: center;
}
#zorium-root > .z-root > #server-loading.is-clicked {
opacity: 1;
}
a {
color: inherit;
text-decoration: inherit;
}
canvas {
outline: none;
}
input::placeholder {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.5px;
color: rgba(0,0,0,0.54);
color: var(--bg-text-54);
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
transition: background-color 5000s ease-in-out 0s;
-webkit-text-fill-color: var(--bg-text-87) !important;
}
@media (min-width: 768px) {
::-webkit-scrollbar {
width: 5px;
height: 5px;
}
::-webkit-scrollbar-thumb {
background: #bdbdbd;
background: var(--tertiary-400);
border-radius: 20px;
}
::-webkit-scrollbar-track {
background: #eee;
background: var(--tertiary-200);
border-radius: 20px;
}
}
@keyframes z-overlay-fade-in {
0% {
opacity: 0.25;
}
}
@keyframes z-ripple-bottom-bar-animation-css-only {
0% {
transform: scale(1);
opacity: 0.12;
}
60% {
transform: scale(1.4);
opacity: 0.12;
}
100% {
transform: scale(1.7);
opacity: 0;
}
}
@keyframes z-ripple-animation-css-only {
0% {
transform: scale(0.5);
opacity: 0.25;
}
50% {
transform: scale(1.4);
opacity: 0;
}
100% {
opacity: 0;
}
}
.z-ripple {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
cursor: pointer;
}
.z-ripple > .wave {
position: absolute;
border-radius: 50%;
width: 200%;
padding-bottom: 200%;
margin-left: -100%;
margin-top: -100%;
background: #FFFFFF;
opacity: 0;
pointer-events: none;
visibility: hidden;
}
.z-ripple > .wave.is-visible {
visibility: visible;
}
.z-ripple > .wave.is-visible.fade-in {
animation: z-ripple-animation-fade-in 0.5s;
}
.z-ripple > .wave.is-visible:not(.fade-in) {
animation: z-ripple-animation 0.5s;
}
.z-ripple.is-circle {
transform: translate3d(0, 0, 0);
border-radius: 50%;
}
@keyframes z-ripple-animation {
from {
transform: scale(0.1);
opacity: 0.25;
}
to {
transform: scale(1);
opacity: 0;
}
}
@keyframes z-ripple-animation-fade-in {
from {
transform: scale(0.1);
opacity: 0.25;
}
to {
transform: scale(1);
opacity: 1;
}
}
.is-ios .z-icon > svg > path {
transition: none;
}
.z-icon {
text-align: center;
display: flex;
-webkit-tap-highlight-color: transparent;
margin: auto;
outline: none;
}
.z-icon > svg {
vertical-align: middle;
margin: auto;
-webkit-tap-highlight-color: transparent;
}
.z-icon > svg > path {
transition: fill 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.z-icon.has-ripple-white {
position: relative;
outline: none;
overflow: hidden;
}
.z-icon.has-ripple-white:after {
content: '';
position: absolute;
border-radius: 50%;
width: 70%;
padding-bottom: 70%;
left: 15%;
top: 50%;
margin-top: -35%;
transform: scale(1);
transform-origin: 50%;
background: #FFFFFF;
opacity: 0;
pointer-events: none;
}
.is-android .z-icon.has-ripple-white:hover::after {
will-change: transform;
animation: z-ripple-animation-css-only 0.6s ease-out;
opacity: 0;
}
.z-icon.has-ripple-white:focus:not(:active)::after {
will-change: transform;
animation: z-ripple-animation-css-only 0.6s ease-out;
opacity: 0;
}
.z-icon.has-ripple-header {
position: relative;
outline: none;
overflow: hidden;
}
.z-icon.has-ripple-header:after {
content: '';
position: absolute;
border-radius: 50%;
width: 70%;
padding-bottom: 70%;
left: 15%;
top: 50%;
margin-top: -35%;
transform: scale(1);
transform-origin: 50%;
background: #757575;
background: var(--header-500-icon);
opacity: 0;
pointer-events: none;
}
.is-android .z-icon.has-ripple-header:hover::after {
will-change: transform;
animation: z-ripple-animation-css-only 0.6s ease-out;
opacity: 0;
}
.z-icon.has-ripple-header:focus:not(:active)::after {
will-change: transform;
animation: z-ripple-animation-css-only 0.6s ease-out;
opacity: 0;
}
.z-icon.is-clickable {
cursor: pointer;
}
.z-icon.is-clickable.is-aligned-top {
margin-top: -12px;
}
.z-icon.is-clickable.is-aligned-top > svg {
margin-top: 12px;
}
.z-icon.is-clickable.is-aligned-left {
margin-left: -12px;
}
.z-icon.is-clickable.is-aligned-left > svg {
margin-left: 12px;
}
.z-icon.is-clickable.is-aligned-right {
margin-left: auto;
margin-right: -12px;
}
.z-icon.is-clickable.is-aligned-right > svg {
margin-right: 12px;
}
.z-icon.is-clickable.is-aligned-bottom {
margin-left: auto;
margin-bottom: -12px;
}
.z-icon.is-clickable.is-aligned-bottom > svg {
margin-bottom: 12px;
}
.z-button {
min-height: 36px;
min-width: 48px;
max-width: 100%;
box-sizing: border-box;
display: inline-block;
position: relative;
background: transparent;
text-align: center;
outline: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.z-button > .button {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 1.06;
letter-spacing: 1.25px;
line-height: 1em;
display: flex;
align-items: center;
justify-content: center;
position: relative;
box-sizing: border-box;
vertical-align: middle;
padding: 16px;
min-height: 36px;
min-width: 64px;
max-width: 100%;
background: transparent;
text-align: center;
outline: none;
border-radius: 4px;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
border: none;
-webkit-tap-highlight-color: transparent;
}
@media (min-width: 1280px) {
.z-button > .button {
font-size: 17.4px;
}
}
.z-button > .button > .icon {
margin-right: 12px;
}
.z-button.is-disabled {
cursor: default;
pointer-events: none;
}
.z-button.is-disabled > .button {
cursor: default;
pointer-events: none;
}
.z-button.is-disabled.allow-disabled-click {
pointer-events: all;
}
.z-button.is-disabled.allow-disabled-click > .button {
pointer-events: all;
}
.z-button.is-raised > .button {
transition: box-shadow 0.25s;
box-shadow: 0 1px 4px 0 rgba(0,0,0,0.12);
}
.z-button.is-raised > .button:active {
transition: box-shadow 0.25s;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2), 0 4px 8px 0 rgba(0,0,0,0.1);
}
.z-button.is-raised.z-button.is-dark > .button {
color: #fafafa;
color: var(--primary-900-text);
}
.z-button.is-raised.z-button.is-disabled > .button {
box-shadow: none;
background: transparent;
color: rgba(0,0,0,0.7);
color: var(--bg-text);
}
.z-button.is-raised.z-button.is-dark.z-button.is-disabled > .button {
background: transparent;
color: #000;
color: var(--tertiary-200-text);
}
.z-button.is-full-width {
width: 100%;
}
.z-button.is-full-width > .button {
width: 100%;
}
.z-button.is-short > .button {
min-width: 48px;
}
.z-button.is-flat.z-button.is-dark > .button {
color: rgba(0,0,0,0.7);
color: var(--bg-text);
}
.z-button.is-flat.z-button.is-disabled > .button {
color: #000;
color: var(--tertiary-200-text);
}
.z-button.is-flat.z-button.is-dark.z-button.is-disabled > .button {
color: #000;
color: var(--tertiary-200-text);
}
.z-flat-button {
max-width: 400px;
margin: 0 auto;
}
.z-drawer {
position: fixed;
z-index: 300;
height: 100%;
top: 0;
left: 0;
box-sizing: border-box;
overflow: hidden;
pointer-events: none;
}
.z-drawer.is-open > .drawer-wrapper > .drawer-tab {
background: rgba(0,0,0,0.5);
}
.z-drawer.is-open > .drawer-wrapper > .overlay-tab {
pointer-events: all;
opacity: 0.5;
transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.z-drawer.is-right > .drawer-wrapper {
transform: translate(0px, 0px);
}
.z-drawer.is-right > .drawer-wrapper > .overlay-tab > .grip {
right: 0;
}
.z-drawer > .drawer-wrapper {
height: 100%;
display: flex;
touch-action: none;
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
transform: translate(-336px, 0px);
}
.z-drawer > .drawer-wrapper > .tabs {
overflow: hidden;
}
.z-drawer > .drawer-wrapper > .overlay-tab {
pointer-events: none;
background: #000;
opacity: 0;
height: 100%;
flex: 1;
min-height: 0;
display: flex;
transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}
.z-drawer > .drawer-wrapper > .overlay-tab > .grip {
pointer-events: all;
width: 16px;
height: 100%;
position: absolute;
}
.z-drawer > .drawer-wrapper > .drawer-tab {
pointer-events: all;
height: 100%;
}
.z-drawer > .drawer-wrapper > .drawer-tab > .drawer {
height: 100%;
display: flex;
flex-direction: column;
background: #fff;
background: var(--tertiary-0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.z-drawer.is-static {
position: relative;
z-index: 1;
pointer-events: all;
}
.z-drawer.is-static > .drawer-wrapper {
transform: translate(0, 0) !important;
}
.z-drawer.is-static > .drawer-wrapper > .overlay-tab {
display: none;
}
.z-input {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.5px;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
min-height: 48px;
display: block;
outline: none;
text-align: inherit;
position: relative;
border-radius: 4px;
}
.z-input > .hint {
pointer-events: none;
position: absolute;
background: transparent;
transform: translate(0, 16px);
color: rgba(0,0,0,0.54);
color: var(--bg-text-54);
width: 100%;
transform-origin: 0% 0%;
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), font-size 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.z-input > .input {
padding: 8px 0 8px 0;
width: 100%;
height: 48px;
box-sizing: border-box;
font: inherit;
color: inherit;
background-color: transparent;
border: none;
outline: none;
-webkit-tap-highlight-color: transparent;
}
.z-input > .input:-internal-autofill-selected {
background-color: transparent !important;
}
.z-input > .underline-wrapper {
position: absolute;
bottom: 0;
height: 1px;
width: 100%;
box-sizing: border-box;
}
.z-input > .underline-wrapper > .underline {
width: 100%;
height: 1px;
background: rgba(0,0,0,0.54);
background: var(--bg-text-54);
}
.z-input > .error {
font-family: Nunito Sans;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 0.4px;
color: rgba(0,0,0,0.38);
color: var(--bg-text-38);
color: #f61111;
margin-top: -3px;
position: absolute;
pointer-events: none;
background: transparent;
width: 100%;
}
@media (min-width: 1280px) {
.z-input > .error {
font-size: 15.2px;
}
}
.z-input.is-centered > .input {
text-align: center;
}
.z-input.is-centered.z-input.is-floating.z-input.is-focused > .hint,
.z-input.is-centered.z-input.is-floating.z-input.has-value > .hint {
transform: translate(0, 8px);
}
.z-input.is-dark {
color: rgba(0,0,0,0.7);
color: var(--bg-text);
}
.z-input.is-floating {
min-height: 48px;
}
.z-input.is-floating > .hint {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.5px;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
color: rgba(0,0,0,0.54);
color: var(--bg-text-54);
transform: translate(0, 16px);
}
.z-input.is-floating > .input {
padding: 16px 0 0 0;
height: 48px;
}
.z-input.is-floating > .underline-wrapper {
padding: 0 1px;
}
.z-input.is-floating.z-input.is-focused > .hint,
.z-input.is-floating.z-input.has-value > .hint {
font-size: 12px;
transform: translate(0, 0);
display: block;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
}
.z-input:not(.is-floating).z-input.has-value > .hint {
display: none;
}
.z-input.is-focused > .underline-wrapper > .underline {
background: #e64a19;
background: var(--primary-700);
}
.z-input.is-error > .underline-wrapper > .underline {
background: #f61111;
}
.z-input.is-disabled > .underline-wrapper > .underline {
background: none;
border-bottom: 1px dashed #757575;
}
.z-primary-input {
position: relative;
max-width: 360px;
}
.z-primary-input.is-full-width {
max-width: none;
}
.z-primary-input > .make-visible {
position: absolute;
right: 8px;
top: 4px;
}
.z-primary-input .z-input {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.5px;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
}
.z-app-bar {
transition: box-shadow 0.25s;
box-shadow: 0 1px 4px 0 rgba(0,0,0,0.12);
position: relative;
z-index: 99;
height: 56px;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.z-app-bar.is-flat {
box-shadow: none;
}
.z-app-bar > .bar {
width: 100%;
height: 56px;
box-sizing: border-box;
display: flex;
flex-direction: column;
background-size: 84px auto;
padding: 0 16px;
}
.z-app-bar > .bar > .top {
width: 100%;
height: 56px;
display: flex;
align-items: center;
}
.z-app-bar > .bar > .top > .top-left-button {
margin-right: 24px;
}
.z-app-bar > .bar > .top > .top-right-button {
margin-left: auto;
}
.z-app-bar > .bar > .top > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 21.7px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: 0.25px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
padding-right: 8px;
}
@media (min-width: 768px) {
.z-app-bar {
height: 64px;
}
.z-app-bar > .bar {
height: 64px;
}
.z-app-bar > .bar > .top {
height: 64px;
}
}
.z-secondary-button {
max-width: 400px;
margin: 0 auto;
}
.z-sign-in-overlay {
position: fixed;
z-index: 1000000;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #26a69a;
background: var(--secondary-400);
}
.z-sign-in-overlay > .content {
padding: 28px 16px 4px 16px;
max-width: 360px;
margin: 0 auto;
}
.z-sign-in-overlay > .content > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 26px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: #fff;
color: var(--secondary-400-text);
}
.z-sign-in-overlay > .content > .input {
margin: 16px 0 20px 0;
}
.z-sign-in-overlay > .content > .terms {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.32;
letter-spacing: 0.25px;
color: #fff;
color: var(--secondary-400-text);
margin-top: 16px;
}
.z-sign-in-overlay > .content > .terms a {
color: #fff;
color: var(--secondary-400-text);
}
.z-sign-in-overlay > .content > .actions {
margin-top: 24px;
}
.z-sign-in-overlay_button {
display: flex;
}
.z-sign-in-overlay_button > .icon {
margin-right: 8px;
}
.z-nav-drawer {
position: relative;
}
.z-nav-drawer_drawer {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
border-right: 1px solid var(--bg-text-12);
}
.z-nav-drawer_drawer > .header {
padding: 16px;
height: 56px;
box-sizing: border-box;
background: #fff;
background: var(--header-500);
display: flex;
align-items: center;
}
@media (min-width: 768px) {
.z-nav-drawer_drawer > .header {
height: 64px;
}
}
.z-nav-drawer_drawer > .header > .icon {
width: 36px;
margin-right: 16px;
}
.z-nav-drawer_drawer > .header > .name {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 26px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: rgba(0,0,0,0.87);
color: var(--header-500-text);
}
.z-nav-drawer_drawer > .content {
flex: 1;
min-height: 0;
width: 100%;
box-sizing: border-box;
background: #fff;
background: var(--tertiary-0);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.z-nav-drawer_drawer > .content > .menu {
flex: 1;
min-height: 0;
width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
}
.z-nav-drawer_drawer > .content > .menu > .sign-in-buttons {
padding: 0 16px 16px 16px;
display: flex;
}
.z-nav-drawer_drawer > .content > .menu > .sign-in-buttons > .button {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 1.06;
letter-spacing: 1.25px;
flex: 1;
min-height: 0;
padding: 10px 16px;
background: #e64a19;
background: var(--primary-700);
color: #fafafa;
color: var(--primary-700-text);
text-align: center;
border-radius: 4px;
cursor: pointer;
}
@media (min-width: 1280px) {
.z-nav-drawer_drawer > .content > .menu > .sign-in-buttons > .button {
font-size: 17.4px;
}
}
.z-nav-drawer_drawer > .content > .menu > .sign-in-buttons > .button:first-child {
margin-right: 16px;
}
.z-nav-drawer_drawer > .content > .menu > .divider {
width: 100%;
height: 1px;
background: rgba(0,0,0,0.12);
background: var(--bg-text-12);
margin: 8px 0;
}
.z-nav-drawer_drawer > .content > .menu > .subhead {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
color: #e64a19;
color: var(--primary-700);
padding: 16px;
}
.z-nav-drawer_drawer > .content > .menu .menu-item > .menu-item-link {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.5px;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
cursor: pointer;
display: flex;
align-items: center;
padding: 12px 16px;
}
.z-nav-drawer_drawer > .content > .menu .menu-item > .menu-item-link.is-child {
color: rgba(0,0,0,0.7);
color: var(--tertiary-200-text-70);
}
.z-nav-drawer_drawer > .content > .menu .menu-item > .menu-item-link > .icon {
margin-right: 36px;
width: 24px;
height: 28px;
}
.z-nav-drawer_drawer > .content > .menu .menu-item > .menu-item-link > .notification {
width: 6px;
height: 6px;
display: none;
border-radius: 50%;
background: #e64a19;
background: var(--primary-700);
margin-left: 8px;
}
.z-nav-drawer_drawer > .content > .menu .menu-item > .menu-item-link > .notification.is-visible {
display: block;
}
.z-nav-drawer_drawer > .content > .menu .menu-item > .menu-item-link > .chevron {
margin-left: auto;
}
.z-nav-drawer_drawer > .content > .menu .menu-item ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.z-nav-drawer_drawer > .content > .menu .menu-item ul.children-0 {
padding-left: 16px;
}
.z-nav-drawer_drawer > .content > .menu .menu-item.is-selected > .menu-item-link {
color: #e64a19;
color: var(--primary-700);
}
@media (min-width: 1280px) {
.z-nav-drawer_drawer > .content > .menu .menu-item > .menu-item-link {
position: relative;
}
.z-nav-drawer_drawer > .content > .menu .menu-item > .menu-item-link:active {
background: none !important;
}
}
.z-bottom-bar {
display: flex;
background: #fff;
background: var(--tertiary-0);
border-top: 1px solid var(--bg-text-12);
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
}
@media (min-width: 1280px) {
.z-bottom-bar {
display: none;
}
}
.z-bottom-bar.is-loaded > .menu-item {
transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
opacity: 1;
}
.z-bottom-bar.is-hidden {
transform: translateY(64px);
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.z-bottom-bar > .menu-item {
position: relative;
outline: none;
overflow: hidden;
flex: 1;
min-height: 0;
opacity: 0;
text-align: center;
padding: 8px 0;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
position: relative;
overflow: visible;
}
.z-bottom-bar > .menu-item:after {
content: '';
position: absolute;
border-radius: 50%;
width: 70%;
padding-bottom: 70%;
left: 15%;
top: 50%;
margin-top: -35%;
transform: scale(1);
transform-origin: 50%;
background: rgba(0,0,0,0.87);
background: var(--bg-text-87);
opacity: 0;
pointer-events: none;
}
.is-android .z-bottom-bar > .menu-item:hover::after {
will-change: transform;
animation: z-ripple-bottom-bar-animation-css-only 0.25s ease-out;
opacity: 0;
}
.z-bottom-bar > .menu-item:focus:not(:active)::after {
will-change: transform;
animation: z-ripple-bottom-bar-animation-css-only 0.25s ease-out;
opacity: 0;
}
.z-bottom-bar > .menu-item.is-selected > .text {
color: #e64a19;
color: var(--primary-700);
}
.z-bottom-bar > .menu-item.has-notification > .icon {
position: relative;
z-index: 1;
}
.z-bottom-bar > .menu-item.has-notification > .icon:after {
content: '';
width: 4px;
height: 4px;
border-radius: 50%;
position: absolute;
z-index: 1;
left: 50%;
top: 50%;
margin-top: -2px;
margin-left: 16px;
background: #e64a19;
background: var(--primary-700);
}
.z-bottom-bar > .menu-item > .text {
font-family: Nunito Sans;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 0.4px;
color: rgba(0,0,0,0.38);
color: var(--bg-text-38);
color: rgba(0,0,0,0.54);
color: var(--bg-text-54);
margin-top: 2px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
position: relative;
z-index: 1;
}
@media (min-width: 1280px) {
.z-bottom-bar > .menu-item > .text {
font-size: 15.2px;
}
}
.z-sheet {
position: fixed;
width: 100%;
height: 100%;
bottom: 0;
left: 0;
pointer-events: none;
display: flex;
flex-direction: column;
z-index: 300;
}
.z-sheet.is-visible {
pointer-events: all;
}
.z-sheet.is-visible > .overlay {
opacity: 1;
}
.z-sheet.is-visible > .sheet {
transform: translateY(0);
}
.z-sheet > .overlay {
position: fixed;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.38);
background: var(--bg-text-38);
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
opacity: 0;
transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.z-sheet > .sheet {
position: absolute;
background: #fff;
background: var(--tertiary-0);
bottom: 0;
left: 0;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
width: 100%;
padding: 24px 24px 16px 24px;
box-sizing: border-box;
z-index: 1;
transform: translateY(100%);
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.z-sheet > .sheet > .inner {
max-width: 500px;
margin: auto;
}
.z-sheet > .sheet > .inner > .content {
display: flex;
align-items: center;
}
.z-sheet > .sheet > .inner > .content > .message {
margin-left: 40px;
}
.z-sheet > .sheet > .inner > .actions {
display: flex;
justify-content: flex-end;
margin-top: 12px;
}
.z-dialog {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
z-index: 1000000;
}
.z-dialog.is-mounted > .dialog {
opacity: 1;
transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.z-dialog.is-mounted > .backdrop {
opacity: 1;
transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.z-dialog.is-vanilla > .dialog {
background: #fff;
background: var(--tertiary-0);
max-width: 280px;
border-radius: 4px;
}
.z-dialog.is-vanilla > .dialog > .content {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.5px;
color: #000;
color: var(--tertiary-0-text);
padding: 24px 24px 16px 24px;
}
.z-dialog.is-vanilla > .dialog > .content > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 26px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
margin-bottom: 20px;
}
.z-dialog.is-vanilla > .dialog > .actions {
display: flex;
justify-content: flex-end;
padding: 8px 16px;
}
.z-dialog.is-vanilla > .dialog > .actions > .action.is-full-width {
width: 100%;
}
.z-dialog.is-wide > .dialog {
max-width: 320px;
}
.z-dialog > .backdrop {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.38);
background: var(--bg-text-38);
z-index: 1000000;
opacity: 0;
}
.z-dialog > .dialog {
transition: box-shadow 0.25s;
box-shadow: 0 11px 7px 0 rgba(0,0,0,0.19), 0 13px 25px 0 rgba(0,0,0,0.3);
z-index: 1000003;
position: relative;
min-width: 280px;
max-height: 100%;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
opacity: 0;
}
.z-tabs-bar {
height: 48px;
width: 100%;
z-index: 100;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.z-tabs-bar.is-fixed {
position: fixed;
top: 0;
left: 0;
background-position: 0;
}
.z-tabs-bar:not(.is-flat) {
transition: box-shadow 0.25s;
box-shadow: 0 1px 4px 0 rgba(0,0,0,0.12);
z-index: 2;
}
.z-tabs-bar.is-full-width > .g-grid {
display: block;
}
.z-tabs-bar.is-full-width > .g-grid > .bar > .tab {
flex: 1;
min-height: 0;
}
.z-tabs-bar.is-arrow > .g-grid {
overflow: visible;
}
.z-tabs-bar.is-arrow > .g-grid > .bar > .selector {
background: none !important;
}
.z-tabs-bar.is-arrow > .g-grid > .bar > .selector:after {
content: '';
position: absolute;
bottom: -12px;
left: 50%;
margin-left: -12px;
width: 0;
height: 0;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-top: 12px solid var(--tertiary-0);
}
.z-tabs-bar > .g-grid {
height: 100%;
}
.z-tabs-bar > .g-grid > .bar {
height: 100%;
display: flex;
position: relative;
}
.z-tabs-bar > .g-grid > .bar > .selector {
transition: transform 0.25s;
position: absolute;
height: 2px;
background: #e64a19;
background: var(--primary-700);
bottom: 0;
}
.z-tabs-bar > .g-grid > .bar > .tab {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 1.06;
letter-spacing: 1.25px;
color: #1a1a1a;
padding: 0 8px;
text-align: center;
line-height: 48px;
display: flex;
min-width: 0;
align-items: center;
justify-content: center;
cursor: pointer;
position: relative;
}
@media (min-width: 1280px) {
.z-tabs-bar > .g-grid > .bar > .tab {
font-size: 17.4px;
}
}
.z-tabs-bar > .g-grid > .bar > .tab > .text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.z-tabs-bar > .g-grid > .bar > .tab.is-selected {
color: #FFFFFF;
}
.z-tabs-bar > .g-grid > .bar > .tab.has-icon > .text {
display: none;
}
.z-tabs-bar > .g-grid > .bar > .tab > .notification {
width: 6px;
height: 6px;
display: none;
border-radius: 50%;
background: #e64a19;
background: var(--primary-700);
margin-left: 8px;
}
.z-tabs-bar > .g-grid > .bar > .tab > .notification.is-visible {
display: block;
}
@media (min-width: 768px) {
.z-tabs-bar {
height: 64px;
background-position: 0 -64px;
}
.z-tabs-bar > .g-grid > .bar > .tab.has-icon > .icon {
margin-right: 16px;
}
.z-tabs-bar > .g-grid > .bar > .tab.has-text > .text {
display: block;
white-space: nowrap;
}
}
.z-tabs {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
-webkit-tap-highlight-color: transparent;
position: relative;
z-index: 1;
}
.z-tabs.is-child-overflow-auto > .content > .top > .info {
display: none;
}
.z-tabs > .content {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.z-tabs > .content > .tabs-bar {
height: 48px;
}
@media (min-width: 768px) {
.z-tabs > .content > .tabs-bar {
height: 64px;
}
}
.z-tabs > .content > .tabs-scroller {
flex: 1;
min-height: 0;
display: flex;
overflow: hidden;
touch-action: none;
}
.z-tabs > .content > .tabs-scroller > .tabs {
display: flex;
}
.z-tabs > .content > .tabs-scroller > .tabs > .iscroll-tab {
display: flex;
flex: 1;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.p-slide-steps {
flex: 1;
min-height: 0;
display: flex;
padding-bottom: 56px;
}
.p-slide-steps > .bottom-bar {
position: absolute;
z-index: 999;
bottom: 0;
left: 0;
display: flex;
width: 100%;
height: 56px;
align-items: center;
padding: 6px 16px;
box-sizing: border-box;
}
.p-slide-steps > .bottom-bar > .g-grid {
flex: 1;
min-height: 0;
display: flex;
}
.p-slide-steps > .bottom-bar > .g-grid > .icon {
width: 48px;
cursor: pointer;
}
.p-slide-steps > .bottom-bar > .g-grid > .text {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 1.06;
letter-spacing: 1.25px;
cursor: pointer;
color: #e64a19;
color: var(--primary-700);
text-align: center;
padding: 8px;
}
@media (min-width: 1280px) {
.p-slide-steps > .bottom-bar > .g-grid > .text {
font-size: 17.4px;
}
}
.p-slide-steps > .bottom-bar > .g-grid > .step-counter {
flex: 1;
min-height: 0;
display: flex;
justify-content: center;
width: 100%;
margin: 16px 0;
}
.p-slide-steps > .bottom-bar > .g-grid > .step-counter > .step-dot {
width: 6px;
height: 6px;
border-radius: 50%;
margin-right: 4px;
background: rgba(0,0,0,0.26);
background: var(--bg-text-26);
}
.p-slide-steps > .bottom-bar > .g-grid > .step-counter > .step-dot.is-active {
background: #e64a19;
background: var(--primary-700);
}
.z-welcome-dialog_dialog > .block {
margin: 8px 0;
}
.z-welcome-dialog_dialog > .block a {
color: #e64a19;
color: var(--primary-700);
font-weight: bold;
}
.z-welcome-dialog_dialog {
background: #fff;
background: var(--tertiary-0);
border-radius: 4px;
}
.z-welcome-dialog_step {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
padding: 24px;
}
.z-welcome-dialog_step > .image {
width: 100%;
display: block;
margin: 0 auto;
background-size: 100% auto;
}
.z-welcome-dialog_step > .image.welcome {
background-image: url("https://fdn.uno/d/images/onboard/welcome.svg?2");
padding-bottom: 79.46%;
}
.z-welcome-dialog_step > .image.roam {
background-image: url("https://fdn.uno/d/images/onboard/roam.svg?3");
padding-bottom: 89.74%;
}
.z-welcome-dialog_step > .image.help {
background-image: url("https://fdn.uno/d/images/onboard/help.svg?2");
padding-bottom: 85.28%;
}
.z-welcome-dialog_step > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 21.7px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: 0.25px;
color: #e64a19;
color: var(--primary-700);
text-align: center;
margin: 16px 0;
}
.z-welcome-dialog_step > .content {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.32;
letter-spacing: 0.25px;
padding: 0 8px;
}
.z-welcome-dialog_step > .action {
margin-top: 8px;
}
.z-welcome-overlay {
background: #fff;
background: var(--tertiary-0);
border-radius: 4px;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
z-index: 999;
}
.z-welcome-overlay > .skip {
position: absolute;
z-index: 999;
top: 8px;
right: 8px;
}
.z-welcome-overlay_step {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
padding: 24px;
}
.z-welcome-overlay_step > .image {
display: block;
margin: auto auto 0 auto;
background-size: 100% auto;
}
.z-welcome-overlay_step > .image.welcome {
width: 180px;
height: 170px;
background-image: url("https://fdn.uno/d/images/illustrations/welcome_welcome.svg?11");
}
.z-welcome-overlay_step > .image.trips {
width: 320px;
height: 150px;
background-image: url("https://fdn.uno/d/images/illustrations/empty_state_trips.svg");
}
.z-welcome-overlay_step > .image.community {
width: 180px;
height: 179px;
background-image: url("https://fdn.uno/d/images/illustrations/welcome_community.svg");
}
.z-welcome-overlay_step > .image.video {
width: 250px;
height: 200px;
background-image: url("https://fdn.uno/d/images/illustrations/welcome_video.svg");
}
.z-welcome-overlay_step > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 26px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: #e64a19;
color: var(--primary-700);
text-align: center;
margin: 24px 0 8px 0;
}
.z-welcome-overlay_step > .content {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.32;
letter-spacing: 0.25px;
text-align: center;
padding: 0 8px;
margin-bottom: auto;
}
.z-welcome-overlay_step > .content > .action {
margin-top: 24px;
}
.z-status-bar {
font-family: Nunito Sans;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 0.4px;
color: rgba(0,0,0,0.38);
color: var(--bg-text-38);
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
text-align: center;
}
@media (min-width: 1280px) {
.z-status-bar {
font-size: 15.2px;
}
}
.z-snack-bar {
position: absolute;
bottom: 0;
left: 0;
z-index: 999999;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
width: 100%;
padding: 8px;
box-sizing: border-box;
max-width: 420px;
}
.z-snack-bar.has-bottom-bar {
bottom: 64px;
}
.z-snack-bar > .bar {
transition: box-shadow 0.25s;
box-shadow: 0 1px 4px 0 rgba(0,0,0,0.12);
background: #fff;
background: var(--tertiary-0);
border-radius: 4px;
display: flex;
align-items: center;
width: 100%;
padding: 0 16px;
box-sizing: border-box;
}
.z-snack-bar > .bar > .content {
padding: 16px 0;
}
.z-snack-bar > .bar > .actions {
margin-left: auto;
display: flex;
}
.z-snack-bar > .bar > .actions > .icon {
padding: 8px;
}
.z-snack-bar > .bar > .actions > .icon:last-child {
padding-right: 0;
}
@media (min-width: 1280px) {
.z-button-menu {
display: none;
}
}
.z-primary-button {
max-width: 400px;
margin: 0 auto;
}
.z-about {
flex: 1;
min-height: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.z-about > .mission > .g-grid,
.z-about > .meet > .g-grid,
.z-about > .help > .g-grid,
.z-about > .transparency > .g-grid,
.z-about > .mission > .content,
.z-about > .meet > .content,
.z-about > .help > .content,
.z-about > .transparency > .content {
padding: 16px;
box-sizing: border-box;
}
.z-about > .mission > .g-grid > .title,
.z-about > .meet > .g-grid > .title,
.z-about > .help > .g-grid > .title,
.z-about > .transparency > .g-grid > .title,
.z-about > .mission > .content > .title,
.z-about > .meet > .content > .title,
.z-about > .help > .content > .title,
.z-about > .transparency > .content > .title {
font-family: Nunito Sans;
font-size: 36.9px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: 0.25px;
text-align: center;
text-align: center;
margin: 16px 0;
}
.z-about > .mission {
display: flex;
flex-direction: column;
align-items: center;
min-height: 370px;
background-image: url("https://fdn.uno/d/images/about/desert.jpg");
background-size: 100% auto;
padding: 16px;
box-sizing: border-box;
}
.z-about > .mission > .content {
width: 100%;
max-width: 510px;
padding: 32px 16px;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
background: #fff;
background: var(--tertiary-0);
margin: 40px auto 0 auto;
}
.z-about > .mission > .content > .title {
margin-top: 0;
}
.z-about > .mission > .content > .text {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.5px;
text-align: center;
margin-bottom: 24px;
}
.z-about > .mission > .content > .actions {
display: flex;
width: 100%;
}
.z-about > .mission > .content > .actions > .action {
flex: 1;
min-height: 0;
max-width: 170px;
margin-right: 24px;
}
.z-about > .mission > .content > .actions > .action:first-child {
margin-left: auto;
}
.z-about > .mission > .content > .actions > .action:last-child {
margin-right: auto;
}
.z-about > .roadmap {
text-align: center;
background: #fff;
background: var(--tertiary-0);
}
.z-about > .roadmap > .info {
padding: 36px 16px 16px 24px;
}
.z-about > .roadmap > .info > .title {
font-family: Nunito Sans;
font-size: 36.9px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: 0.25px;
text-align: center;
margin-bottom: 16px;
}
.z-about > .roadmap > .info > .description {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.5px;
}
.z-about > .meet {
background: #fff;
background: var(--tertiary-0);
padding-bottom: 32px;
}
.z-about > .meet > .g-grid > .g-grid > .g-cols > .g-col > .image {
width: 100%;
height: 0;
padding-bottom: 56.09756097560975%;
background-size: 100%;
margin: 16px 0;
}
.z-about > .meet > .g-grid > .g-grid > .g-cols > .g-col > .image.austin {
background-image: url("https://fdn.uno/d/images/about/austin.jpg");
}
.z-about > .meet > .g-grid > .g-grid > .g-cols > .g-col > .image.rachel {
background-image: url("https://fdn.uno/d/images/about/rachel.jpg");
}
.z-about > .meet > .g-grid > .g-grid > .g-cols > .g-col > .name {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
margin-bottom: 8px;
}
.z-about > .help {
background: #f7f5f3;
text-align: center;
padding-bottom: 32px;
}
.z-about > .help > .g-grid > .g-grid > .g-cols > .g-col > .image {
width: 140px;
height: 140px;
margin: 28px auto 0 auto;
background-size: 100%;
}
.z-about > .help > .g-grid > .g-grid > .g-cols > .g-col > .image.share {
background-image: url("https://fdn.uno/d/images/about/share.svg");
}
.z-about > .help > .g-grid > .g-grid > .g-cols > .g-col > .image.review {
background-image: url("https://fdn.uno/d/images/about/review.svg");
}
.z-about > .help > .g-grid > .g-grid > .g-cols > .g-col > .image.feedback {
background-image: url("https://fdn.uno/d/images/about/feedback.svg");
}
.z-about > .help > .g-grid > .g-grid > .g-cols > .g-col > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
margin-top: 16px;
margin-bottom: 8px;
}
.z-about > .help > .g-grid > .g-grid > .g-cols > .g-col > .description {
width: 235px;
margin: 0 auto;
}
.z-about > .help > .g-grid > .g-grid > .g-cols > .g-col > .button {
width: 200px;
margin: 12px auto 0 auto;
}
.z-about > .transparency {
background: #fff;
background: var(--tertiary-0);
display: flex;
flex-direction: column;
align-items: center;
padding-bottom: 32px;
}
.z-about > .transparency > .g-grid > .button {
width: 260px;
margin: 24px auto 0 auto;
}
.z-about a {
font-weight: 600;
}
.z-about > .disclaimer {
font-family: Nunito Sans;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 0.4px;
color: rgba(0,0,0,0.38);
color: var(--bg-text-38);
margin: 12px 0;
text-align: center;
}
@media (min-width: 1280px) {
.z-about > .disclaimer {
font-size: 15.2px;
}
}
@media (min-width: 768px) {
.z-about > .mission {
background-position: center;
}
.z-about > .mission > .content {
margin: 72px auto 0 auto;
}
}
.z-about_roadmap-phase {
padding: 72px 48px;
width: 100%;
background-color: #f7f5f3;
}
.z-about_roadmap-phase.phase-1 > .image {
background-image: url("https://fdn.uno/d/images/about/education.png");
height: 154px;
}
.z-about_roadmap-phase.phase-2 > .image {
background-image: url("https://fdn.uno/d/images/about/world.png");
height: 193.5px;
}
.z-about_roadmap-phase.phase-3 > .image {
background-image: url("https://fdn.uno/d/images/about/money.png");
height: 214.5px;
}
.z-about_roadmap-phase.phase-4 > .image {
background-image: url("https://fdn.uno/d/images/about/expand.png");
height: 160px;
}
.z-about_roadmap-phase > .image {
width: 200px;
height: 200px;
background-size: 100%;
margin: 0 auto 24px auto;
}
.z-about_roadmap-phase > .phase {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
color: #FFFFFF;
margin-bottom: 4px;
}
.z-about_roadmap-phase > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 26px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
text-align: center;
margin-bottom: 24px;
}
.z-about_roadmap-phase > .bullets {
margin: 0;
padding-left: 20px;
text-align: left;
max-width: 500px;
margin: 0 auto;
}
.z-about_roadmap-phase > .bullets > li {
margin-top: 8px;
list-style-type: circle;
}
.p-about {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.z-fab {
transition: box-shadow 0.25s;
box-shadow: 0 1px 4px 0 rgba(0,0,0,0.12);
display: inline-block;
position: relative;
background: transparent;
outline: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
cursor: pointer;
border-radius: 50%;
overflow: hidden;
-webkit-tap-highlight-color: transparent;
z-index: 1;
display: flex;
}
.z-fab > .icon-container {
width: 24px;
height: 24px;
margin: auto;
}
.z-fab:active {
transition: box-shadow 0.25s;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2), 0 4px 8px 0 rgba(0,0,0,0.1);
}
.z-tooltip {
transition: box-shadow 0.25s;
box-shadow: 0 1px 4px 0 rgba(0,0,0,0.12);
position: absolute;
z-index: 99;
opacity: 0;
pointer-events: none;
border-radius: 8px;
max-width: 300px;
min-height: 72px;
will-change: transform;
box-sizing: border-box;
cursor: pointer;
display: flex;
align-items: center;
background: #e64a19;
background: var(--primary-700);
position: fixed;
}
.z-tooltip::after {
content: '';
position: absolute;
border: 10px solid transparent;
}
.z-tooltip.anchor-top-center {
margin-top: 0;
}
.z-tooltip.anchor-top-center::after {
left: 50%;
top: -10px;
margin-left: -10px;
border-top: none;
border-bottom-color: var(--primary-700);
}
.z-tooltip.anchor-top-left {
margin-top: 0;
}
.z-tooltip.anchor-top-left::after {
left: 24px;
top: -10px;
margin-left: -10px;
border-top: none;
border-bottom-color: var(--primary-700);
}
.z-tooltip.anchor-top-right {
margin-top: 0;
}
.z-tooltip.anchor-top-right::after {
right: 24px;
top: -10px;
margin-left: -10px;
border-top: none;
border-bottom-color: var(--primary-700);
}
.z-tooltip.anchor-bottom-center {
margin-top: -20px;
}
.z-tooltip.anchor-bottom-center::after {
left: 50%;
bottom: -10px;
margin-left: -10px;
border-bottom: none;
border-top-color: var(--primary-700);
}
.z-tooltip.anchor-bottom-left {
margin-top: -20px;
}
.z-tooltip.anchor-bottom-left::after {
left: 24px;
bottom: -10px;
margin-left: -10px;
border-bottom: none;
border-top-color: var(--primary-700);
}
.z-tooltip.anchor-center-left {
margin-left: 10px;
margin-top: -10px;
}
.z-tooltip.anchor-center-left::after {
top: 50%;
left: -10px;
margin-top: -10px;
border-left: none;
border-right-color: var(--primary-700);
}
.z-tooltip.anchor-center-right {
margin-left: -10px;
margin-top: -10px;
}
.z-tooltip.anchor-center-right::after {
top: 50%;
right: -10px;
margin-top: -10px;
border-right: none;
border-left-color: var(--primary-700);
}
.z-tooltip.is-visible {
opacity: 1;
transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: all;
}
.z-tooltip > .close {
position: absolute;
top: 16px;
right: 16px;
}
.z-tooltip > .content {
flex: 1;
min-height: 0;
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.32;
letter-spacing: 0.25px;
padding: 16px;
color: var(--primary-900-text);
}
.z-tooltip > .content > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.32;
letter-spacing: 0.1px;
color: var(--primary-900-text);
padding-right: 24px;
margin-bottom: 8px;
}
.z-tooltip-positioner {
width: 1px;
opacity: 0;
}
.z-action-bar {
display: block;
}
.z-spinner {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
margin-top: 16px;
overflow: hidden;
}
.z-spinner > .van {
animation: z-spinner_van 1.2s infinite linear;
margin: auto auto 0 auto;
position: relative;
padding-left: 10px;
}
.z-spinner > .van > .chassis {
width: 113px;
height: 33px;
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMTMiIGhlaWdodD0iMzMiIHZpZXdCb3g9IjAgMCAxMTMgMzMiPgogIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLjUpIj4KICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQ4LjkxMyA0LjI5NykiPgogICAgICA8cG9seWdvbiBmaWxsPSIjRkY5MDZEIiBwb2ludHM9Ii42NzkgMTMuNjc4IDI3Ljg1MyAxMy42NzggMjcuODUzIDAgNDEuNDQgMCA0Ni45MzcgMTMuOTI3IDYzLjE3OSAxNy43ODEgNjIuNSAyNy44NTMgLjY3OSAyNy4zNTYiLz4KICAgICAgPHBvbHlnb24gZmlsbD0iI0ZGRTVEQiIgcG9pbnRzPSIzMS45MjkgMy44NTYgMzguNjYxIDMuODU2IDQyLjczNyAxMy44MzQgMzEuOTI5IDEzLjgzNCIvPgogICAgPC9nPgogICAgPHJlY3Qgd2lkdGg9IjE1LjgyMyIgaGVpZ2h0PSIyLjUzMiIgeD0iMzQuMTc4IiB5PSIyOS4xMTUiIGZpbGw9IiNEQkRCREIiLz4KICAgIDxwYXRoIGZpbGw9IiNEMkQyRDIiIGZpbGwtcnVsZT0ibm9uemVybyIgZD0iTTIyLjQ2OTExMjksLTEuNzA1MzAyNTdlLTEzIEMzNC44Nzg0NjEzLC0xLjcwNTMwMjU3ZS0xMyA0NC45MzgyMjU4LDEwLjA1OTc2NDUgNDQuOTM4MjI1OCwyMi40NjkxMTI5IEw0NC45MzgyMjU4LDMxLjY0NjYzNzkgTDAsMzEuNjQ2NjM3OSBMMCwxMSBDMCw0LjkyNDg2Nzc1IDQuOTI0ODY3NzUsLTEuNzA1MzAyNTdlLTEzIDExLC0xLjcwNTMwMjU3ZS0xMyBMMjIuNDY5MTEyOSwtMS43MDUzMDI1N2UtMTMgWiIvPgogICAgPHBhdGggZmlsbD0iI0ZGRiIgZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNMzYuMDU4MTk2NyAxMC44ODY0NDM0QzM2LjMzNDMzOSAxMC44ODY0NDM0IDM2LjU1ODE5NjcgMTEuMTEwMzAxIDM2LjU1ODE5NjcgMTEuMzg2NDQzNEwzNi41NTgxOTY3IDE5LjcwOTY1ODVDMzYuNTU4MTk2NyAxOS45ODU4MDA4IDM2LjMzNDMzOSAyMC4yMDk2NTg1IDM2LjA1ODE5NjcgMjAuMjA5NjU4NUwyNC41NTE0NDQ4IDIwLjIwOTY1ODVDMjQuMjc1MzAyNCAyMC4yMDk2NTg1IDI0LjA1MTQ0NDggMTkuOTg1ODAwOCAyNC4wNTE0NDQ4IDE5LjcwOTY1ODVMMjQuMDUxNDQ0OCAxMS4zODY0NDM0QzI0LjA1MTQ0NDggMTEuMTEwMzAxIDI0LjI3NTMwMjQgMTAuODg2NDQzNCAyNC41NTE0NDQ4IDEwLjg4NjQ0MzRMMzYuMDU4MTk2NyAxMC44ODY0NDM0ek0yNS4wNTE0NDQ4IDExLjg4NjQ0MzRMMjUuMDUxNDQ0OCAxOS4yMDk2NTg1IDM1LjU1ODE5NjcgMTkuMjA5NjU4NSAzNS41NTgxOTY3IDExLjg4NjQ0MzQgMjUuMDUxNDQ0OCAxMS44ODY0NDM0ek0xMy41NzAyMTI3IDguMzU0NzEyNEMxNS43NzkzNTE3IDguMzU0NzEyNCAxNy41NzAyMTI3IDEwLjE0NTU3MzQgMTcuNTcwMjEyNyAxMi4zNTQ3MTI0TDE3LjU3MDIxMjcgMjguNTg4MzA1NyA2LjMyOTMyNzU3IDI4LjU4ODMwNTcgNi4zMjkzMjc1NyAxMi4zNTQ3MTI0QzYuMzI5MzI3NTcgMTAuMTQ1NTczNCA4LjEyMDE4ODU3IDguMzU0NzEyNCAxMC4zMjkzMjc2IDguMzU0NzEyNEwxMy41NzAyMTI3IDguMzU0NzEyNHpNMTYuNTcwMjEyNyAxMi4zNTQ3MTI0QzE2LjU3MDIxMjcgMTAuNjk3ODU4MSAxNS4yMjcwNjcgOS4zNTQ3MTI0IDEzLjU3MDIxMjcgOS4zNTQ3MTI0TDEwLjMyOTMyNzYgOS4zNTQ3MTI0QzguNjcyNDczMzIgOS4zNTQ3MTI0IDcuMzI5MzI3NTcgMTAuNjk3ODU4MSA3LjMyOTMyNzU3IDEyLjM1NDcxMjRMNy4zMjkzMjc1NyAyNy41ODgzMDU3IDE2LjU3MDIxMjcgMjcuNTg4MzA1NyAxNi41NzAyMTI3IDEyLjM1NDcxMjR6Ii8+CiAgPC9nPgo8L3N2Zz4K");
}
.z-spinner > .van > .wheel-1,
.z-spinner > .van > .wheel-2,
.z-spinner > .van > .wheel-3 {
position: absolute;
bottom: -6px;
animation: z-spinner_wheels 1.2s infinite linear;
width: 14px;
height: 13px;
will-change: transform;
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDE0IDEzIj4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgLjc3NykiPgogICAgPHBhdGggZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuNDk3IiBmaWxsLXJ1bGU9Im5vbnplcm8iIGQ9Ik01LjgzNzA1OTc3LC0wLjM3NSBDOS4yNjc4ODU2NSwtMC4zNzUgMTIuMDQ5MTE5NSwyLjQwNjIzMzkgMTIuMDQ5MTE5NSw1LjgzNzA1OTc3IEMxMi4wNDkxMTk1LDkuMjY3ODg1NjUgOS4yNjc4ODU2NSwxMi4wNDkxMTk1IDUuODM3MDU5NzcsMTIuMDQ5MTE5NSBDMi40MDYyMzM5LDEyLjA0OTExOTUgLTAuMzc1LDkuMjY3ODg1NjUgLTAuMzc1LDUuODM3MDU5NzcgQy0wLjM3NSwyLjQwNjIzMzkgMi40MDYyMzM5LC0wLjM3NSA1LjgzNzA1OTc3LC0wLjM3NSBaIE01LjgzNzA1OTc3LDAuMzc1IEMyLjgyMDQ0NzQ2LDAuMzc1IDAuMzc1LDIuODIwNDQ3NDYgMC4zNzUsNS44MzcwNTk3NyBDMC4zNzUsOC44NTM2NzIwOSAyLjgyMDQ0NzQ2LDExLjI5OTExOTUgNS44MzcwNTk3NywxMS4yOTkxMTk1IEM4Ljg1MzY3MjA5LDExLjI5OTExOTUgMTEuMjk5MTE5NSw4Ljg1MzY3MjA5IDExLjI5OTExOTUsNS44MzcwNTk3NyBDMTEuMjk5MTE5NSwyLjgyMDQ0NzQ2IDguODUzNjcyMDksMC4zNzUgNS44MzcwNTk3NywwLjM3NSBaIi8+CiAgICA8bGluZSB4MT0iMy43OTkiIHgyPSI3Ljg3NSIgeTE9IjMuNzk5IiB5Mj0iNy44NzUiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2Utb3BhY2l0eT0iLjQ5NyIvPgogICAgPGxpbmUgeDE9IjMuNzk5IiB4Mj0iNy44NzUiIHkxPSIzLjc5OSIgeTI9IjcuODc1IiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLW9wYWNpdHk9Ii40OTciIHRyYW5zZm9ybT0ibWF0cml4KC0xIDAgMCAxIDExLjY3NCAwKSIvPgogIDwvZz4KPC9zdmc+Cg==");
}
.z-spinner > .van > .wheel-1 {
left: 24px;
}
.z-spinner > .van > .wheel-2 {
left: 70px;
}
.z-spinner > .van > .wheel-3 {
left: 98px;
}
.z-spinner > .van > .line-1,
.z-spinner > .van > .line-2,
.z-spinner > .van > .line-3 {
position: absolute;
transform-origin: 100% 100%;
animation: z-spinner_zoom 1.8s infinite;
width: 17px;
height: 2px;
background-color: #ffab91;
background-color: var(--primary-200);
}
.z-spinner > .van > .line-1 {
width: 30px;
left: -24px;
bottom: 12px;
animation-delay: 0;
}
.z-spinner > .van > .line-3 {
width: 14px;
left: -12px;
bottom: 4px;
animation-delay: 0.5s;
}
.z-spinner > .text {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 11px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.45;
letter-spacing: 0.34px;
margin: 12px auto auto auto;
text-align: center;
}
@media (min-width: 1280px) {
.z-spinner > .text {
font-size: 13px;
}
}
@keyframes z-spinner_van {
0% {
transform: translateY(0);
}
50% {
transform: translateY(5%);
}
100% {
transform: translateY(0);
}
}
@keyframes z-spinner_wheels {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
@keyframes z-spinner_zoom {
0% {
transform: scaleX(0);
opacity: 1;
}
50% {
opacity: 1;
}
100% {
transform: scaleX(1.5);
opacity: 0;
}
}
.z-trip-list-item {
transition: box-shadow 0.25s;
box-shadow: 0 1px 4px 0 rgba(0,0,0,0.12);
border-radius: 4px;
display: block;
background: #fff;
background: var(--tertiary-0);
display: block;
border-radius: 4px;
height: 112px;
}
.z-trip-list-item > .g-grid {
display: flex;
}
.z-trip-list-item > .g-grid > .image {
opacity: 0;
width: 112px;
height: 112px;
border-radius: 4px;
background-size: cover;
flex-shrink: 0;
}
.z-trip-list-item > .g-grid > .image.is-image-loaded {
opacity: 1;
transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.z-trip-list-item > .g-grid > .content {
padding: 0 16px;
margin: auto 0;
}
.z-trip-list-item > .g-grid > .content > .name {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
margin-bottom: 2px;
}
.z-trip-list-item > .g-grid > .content > .info {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.5px;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
}
.z-trip-list-item > .g-grid > .content > .stats {
font-family: Nunito Sans;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 0.4px;
color: rgba(0,0,0,0.38);
color: var(--bg-text-38);
color: #e64a19;
color: var(--primary-700);
margin-top: 8px;
}
.z-trip-list-item > .g-grid > .selected {
margin: auto 20px auto auto;
border: 2px solid #4db6ac;
border: 2px solid var(--secondary-300);
border-radius: 50%;
width: 50px;
height: 50px;
}
.z-trip-list > .placeholder {
text-align: center;
}
.z-trip-list > .placeholder > .icon {
background-size: 100%;
margin: 48px auto 0 auto;
background-image: url("https://fdn.uno/d/images/illustrations/empty_state_trips.svg?11");
width: 320px;
height: 150px;
}
.z-trip-list > .placeholder > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
margin-top: 16px;
color: #e64a19;
color: var(--primary-700);
}
.z-trip-list > .placeholder > .description {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.5px;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
margin-top: 8px;
}
.z-new-check-in-choose-trip {
padding: 16px;
}
.z-upload-overlay {
width: 100%;
height: 100%;
overflow: hidden;
cursor: pointer;
}
.z-upload-overlay > .overlay {
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
.z-checkbox {
position: relative;
display: inline-block;
}
.z-checkbox > .checkbox {
width: 18px;
height: 18px;
vertical-align: middle;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
box-sizing: border-box;
border-radius: 2px;
}
.z-checkbox > .checkbox:checked {
background: #e64a19;
background: var(--primary-700);
color: #fafafa;
color: var(--primary-900-text);
outline: 0;
}
.z-checkbox > .checkbox:checked~.icon {
display: block;
}
.z-checkbox > .icon {
display: none;
position: absolute;
left: 50%;
top: 50%;
margin-left: -8px;
margin-top: -7px;
pointer-events: none;
}
.z-step-bar {
transition: box-shadow 0.25s;
box-shadow: 0 -1px 4px 0 rgba(0,0,0,0.12);
width: 100%;
box-sizing: border-box;
background: #fff;
background: var(--tertiary-0);
display: flex;
align-items: center;
justify-content: center;
margin-top: auto;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.z-step-bar > .g-grid {
flex: 1;
min-height: 0;
display: flex;
align-items: center;
justify-content: center;
}
.z-step-bar > .g-grid > .previous,
.z-step-bar > .g-grid > .next {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 1.06;
letter-spacing: 1.25px;
text-transform: lowercase;
color: #e64a19;
color: var(--primary-700);
-webkit-tap-highlight-color: transparent;
width: 60px;
padding: 16px;
box-sizing: content-box;
cursor: pointer;
}
@media (min-width: 1280px) {
.z-step-bar > .g-grid > .previous,
.z-step-bar > .g-grid > .next {
font-size: 17.4px;
}
}
.z-step-bar > .g-grid > .next {
display: flex;
align-items: center;
color: #9E9E9E;
}
.z-step-bar > .g-grid > .next.can-continue {
color: #e64a19;
color: var(--primary-700);
}
.z-step-bar > .g-grid > .step-counter {
display: flex;
margin: 0 auto;
}
.z-step-bar > .g-grid > .step-counter > .step-dot {
width: 6px;
height: 6px;
border-radius: 50%;
margin-right: 4px;
background: rgba(0,0,0,0.26);
background: var(--bg-text-26);
}
.z-step-bar > .g-grid > .step-counter > .step-dot.is-active {
background: #e64a19;
background: var(--primary-700);
}
.z-map {
flex: 1;
min-height: 0;
display: flex;
position: relative;
}
.z-map > .map {
flex: 1;
min-height: 0;
}
.z-map.is-loading > .loading {
display: flex;
}
.z-map > .loading {
position: absolute;
display: none;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
background: var(--tertiary-0);
}
.z-upload-images-preview {
background: #f8f8f8;
background: var(--tertiary-100);
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
}
.z-upload-images-preview > .g-grid {
padding: 16px;
box-sizing: border-box;
flex: 1;
min-height: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.z-upload-images-preview > .g-grid > .caption {
max-width: 600px;
}
.z-upload-images-preview > .g-grid > .tags {
max-width: 600px;
display: flex;
align-items: center;
margin-top: 8px;
}
.z-upload-images-preview > .g-grid > .tags > .input {
max-width: 300px;
}
.z-upload-images-preview > .g-grid > .tags > .button {
margin-left: 8px;
}
.z-upload-images-preview > .g-grid > .tags > .tags {
display: flex;
margin-left: 16px;
}
.z-upload-images-preview > .g-grid > .tags > .tags > .tag {
font-family: Nunito Sans;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 0.4px;
color: rgba(0,0,0,0.38);
color: var(--bg-text-38);
margin: 0 4px;
}
@media (min-width: 1280px) {
.z-upload-images-preview > .g-grid > .tags > .tags > .tag {
font-size: 15.2px;
}
}
.z-upload-images-preview > .g-grid > .image-wrapper.rotate-180 > img {
transform: rotate(180deg);
}
.z-upload-images-preview > .g-grid > .image-wrapper.rotate-90 > img {
transform: rotate(90deg);
}
.z-upload-images-preview > .g-grid > .image-wrapper.rotate-270 > img {
transform: rotate(270deg);
}
.z-upload-images-preview > .g-grid > .image-wrapper > img {
margin-top: 16px;
max-width: 100%;
height: auto;
}
.z-upload-images-preview > .g-grid > .location {
width: 100%;
max-width: 600px;
height: 200px;
display: flex;
flex-direction: column;
margin-top: 16px;
display: none;
}
.z-upload-images-preview > .g-grid > .location.is-visible {
display: block;
}
.z-upload-images-preview > .g-grid > .location > .map {
height: 100%;
flex: 1;
min-height: 0;
display: flex;
}
.z-upload-images-preview > .g-grid > .location > .include-location {
margin-bottom: 8px;
}
.z-upload-images-preview > .g-grid > .location > .include-location > label > .checkbox {
margin-right: 8px;
display: inline-block;
}
.z-vidoe-attachment-dialog_dialog > .block {
margin: 8px 0;
}
.z-upload-images-list {
padding: 16px;
white-space: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.z-upload-images-list > .attachment {
margin-left: 8px;
display: inline-block;
vertical-align: top;
}
.z-upload-images-list > .attachment > .image {
width: 60px;
height: 60px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
background-size: cover;
background-position: center;
}
.z-upload-images-list > .attachment > .progress {
color: #fff;
color: var(--secondary-300-text);
display: block;
position: relative;
height: 20px;
text-align: center;
background: #4db6ac;
background: var(--secondary-300);
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
.z-upload-images-list > .attachment > .progress.is-uploading {
opacity: 0.7;
background: none;
color: #fafafa;
color: var(--primary-900-text);
}
.z-upload-images-list > .attachment > .progress > .bar {
height: 100%;
background: #e64a19;
background: var(--primary-700);
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
.z-upload-images-list > .attachment > .progress > .text {
position: absolute;
left: 0;
top: 0;
width: 100%;
}
.z-upload-images-list > .add-image,
.z-upload-images-list > .add-video {
background: #e64a19;
background: var(--primary-700);
border-radius: 4px;
padding: 12px 16px;
height: 80px;
box-sizing: border-box;
cursor: pointer;
position: relative;
display: inline-block;
vertical-align: top;
}
.z-upload-images-list > .add-image.add-video,
.z-upload-images-list > .add-video.add-video {
background: #fff;
background: var(--tertiary-0);
margin-left: 8px;
}
.z-upload-images-list > .add-image.add-video > .text,
.z-upload-images-list > .add-video.add-video > .text {
color: rgba(0,0,0,0.54);
color: var(--bg-text-54);
}
.z-upload-images-list > .add-image > .text,
.z-upload-images-list > .add-video > .text {
text-align: center;
color: #fafafa;
color: var(--primary-900-text);
margin-top: 4px;
}
.z-upload-images-list > .add-image > .upload-overlay,
.z-upload-images-list > .add-video > .upload-overlay {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
cursor: pointer;
}
.z-upload-image-preview {
background: #212121;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
}
.z-upload-image-preview:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 96px;
background-image: linear-gradient(to bottom, rgba(0,0,0,0), #0c0c0c);
z-index: 1;
}
.z-upload-image-preview > .image-wrapper {
display: flex;
align-items: center;
justify-content: center;
}
.z-upload-image-preview > .image-wrapper.rotate-180 > img {
transform: rotate(180deg);
}
.z-upload-image-preview > .image-wrapper.rotate-90 > img {
transform: rotate(90deg);
}
.z-upload-image-preview > .image-wrapper.rotate-270 > img {
transform: rotate(270deg);
}
.z-upload-image-preview > .image-wrapper > img {
margin-top: 16px;
max-width: 100%;
height: auto;
}
.z-upload-image-preview > .fab {
position: absolute;
z-index: 2;
bottom: 16px;
left: 50%;
margin-left: -28px;
}
.z-upload-image-preview > .fab > .progress {
color: #FFFFFF;
position: absolute;
top: 16px;
right: -40px;
width: 32px;
display: none;
}
.z-upload-image-preview > .fab > .progress.is-visible {
display: block;
}
.z-upload-image-preview > .close {
position: absolute;
z-index: 2;
left: 0;
bottom: 16px;
}
.z-textarea {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.5px;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
min-height: 48px;
display: block;
outline: none;
text-align: inherit;
position: relative;
border-radius: 4px;
}
.z-textarea > .hint {
pointer-events: none;
position: absolute;
background: transparent;
transform: translate(0, 8px);
color: rgba(0,0,0,0.54);
color: var(--bg-text-54);
width: 100%;
transform-origin: 0% 0%;
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), font-size 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.z-textarea > .textarea {
padding: 8px 0 8px 0;
width: 100%;
height: 48px;
box-sizing: border-box;
font: inherit;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
background-color: transparent;
border: none;
outline: none;
-webkit-tap-highlight-color: transparent;
}
.z-textarea > .underline-wrapper {
position: absolute;
bottom: 0;
height: 1px;
width: 100%;
box-sizing: border-box;
}
.z-textarea > .underline-wrapper > .underline {
width: 100%;
height: 1px;
background: rgba(0,0,0,0.7);
background: var(--tertiary-200-text-70);
}
.z-textarea > .error {
font-family: Nunito Sans;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 0.4px;
color: rgba(0,0,0,0.38);
color: var(--bg-text-38);
color: #f61111;
margin-top: 8px;
position: absolute;
pointer-events: none;
background: transparent;
width: 100%;
}
@media (min-width: 1280px) {
.z-textarea > .error {
font-size: 15.2px;
}
}
.z-textarea.is-centered > .textarea {
text-align: center;
}
.z-textarea.is-centered.z-textarea.is-floating.z-textarea.is-focused > .hint,
.z-textarea.is-centered.z-textarea.is-floating.z-textarea.has-value > .hint {
transform: translate(0, 8px);
}
.z-textarea.is-dark {
color: #FFFFFF;
}
.z-textarea.is-floating {
min-height: 52px;
}
.z-textarea.is-floating > .hint {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.5px;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
transform: translate(0, 20px);
}
.z-textarea.is-floating > .textarea {
padding: 24px 0 0 0;
height: 72px;
box-sizing: border-box;
}
.z-textarea.is-floating > .underline-wrapper {
padding: 0 1px;
}
.z-textarea.is-floating.z-textarea.is-focused > .hint,
.z-textarea.is-floating.z-textarea.has-value > .hint {
font-size: 12px;
transform: translate(0, 6px);
display: block;
}
.z-textarea:not(.is-floating).z-textarea.has-value > .hint {
display: none;
}
.z-textarea.is-focused > .underline-wrapper > .underline {
background: #e64a19;
background: var(--primary-700);
}
.z-textarea.is-error > .underline-wrapper > .underline {
background: #f61111;
}
.z-textarea.is-disabled > .underline-wrapper > .underline {
background: none;
border-bottom: 1px dashed var(--tertiary-200-text);
}
.z-textarea.is-full {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.5px;
background-color: transparent !important;
width: 100%;
height: 100%;
}
.z-textarea.is-full > .hint {
left: 16px;
}
.z-textarea.is-full > .textarea {
width: 100%;
height: 100%;
padding: 16px;
box-sizing: border-box;
}
.z-textarea.is-full > .underline-wrapper {
display: none;
}
.z-markdown-editor {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.z-markdown-editor > .panel {
background: #fff;
background: var(--tertiary-0);
}
.z-markdown-editor > .panel > .icon {
display: inline-block;
position: relative;
}
.z-markdown-editor > .panel > .icon > .upload-overlay {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
cursor: pointer;
}
.z-markdown-editor > .textarea {
width: 100%;
display: flex;
flex: 1;
min-height: 0;
}
.z-markdown-editor > .textarea::placeholder {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.5px;
color: rgba(0,0,0,0.54);
color: var(--bg-text-54);
}
.desktop .z-markdown-editor > .textarea {
max-width: 560px;
margin: 0 auto;
background: #fff;
background: var(--tertiary-0);
box-shadow: 0 0 4px 0 rgba(0,0,0,0.5);
padding: 24px;
}
.z-edit-check-in {
padding: 16px 0;
}
.z-edit-check-in > .g-grid > .field {
margin-bottom: 24px;
padding: 0 16px;
}
.z-edit-check-in > .g-grid > .field.flex {
display: flex;
}
.z-edit-check-in > .g-grid > .field.flex > .left-auto {
margin-left: auto;
}
.z-edit-check-in > .g-grid > .notes > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.5px;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
padding: 0 16px 16px 16px;
}
.z-edit-check-in > .g-grid > .notes > .editor {
min-height: 200px;
}
.z-new-check-in {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.z-new-check-in.is-overlay {
background: #fff;
background: var(--tertiary-0);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999;
}
.z-place-info-action-box {
margin-bottom: 20px;
}
.z-place-info-action-box > .actions {
display: flex;
}
.z-place-info-action-box > .actions > .action {
flex: 1;
min-height: 0;
text-align: center;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
}
.z-place-info-action-box > .actions > .action > .icon {
margin-bottom: 2px;
border: 2px solid #00796b;
border: 2px solid var(--secondary-700);
border-radius: 50%;
padding: 12px;
}
.z-place-info-action-box > .actions > .action > .icon.is-filled {
background: #00796b;
background: var(--secondary-700);
}
.z-place-info-action-box > .actions > .action > .text {
font-family: Nunito Sans;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 0.4px;
color: rgba(0,0,0,0.38);
color: var(--bg-text-38);
color: #00796b;
color: var(--secondary-700);
margin-top: 8px;
}
@media (min-width: 1280px) {
.z-place-info-action-box > .actions > .action > .text {
font-size: 15.2px;
}
}
.z-cell-bars {
display: flex;
align-items: flex-end;
position: relative;
}
.z-cell-bars.is-interactive {
cursor: pointer;
}
.z-cell-bars > .bar {
width: 12%;
margin: 0 3.5%;
background: #e0f2f1;
background: var(--secondary-50);
border-radius: 3px;
}
.z-cell-bars > .bar.is-visible {
background: #4db6ac;
background: var(--secondary-300);
}
.z-cell-bars > .no-signal {
position: absolute;
left: 0;
top: 0;
}
.z-place-info-contact {
margin: 0 -16px 24px -16px;
}
.z-place-info-contact > .block {
display: flex;
align-items: center;
padding: 6px 16px;
}
.z-place-info-contact > .block > .text {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.32;
letter-spacing: 0.25px;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
margin-left: 16px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.z-info-level > .flavor-text {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.32;
letter-spacing: 0.25px;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
margin-bottom: 32px;
}
.z-info-level > .bar {
position: relative;
margin: 8px 0;
height: 3px;
width: 100%;
border-radius: 4px;
background: rgba(0,0,0,0.12);
background: var(--bg-text-12);
}
.z-info-level > .bar > .fill {
position: absolute;
height: 100%;
border-radius: 4px;
background: #00796b;
background: var(--secondary-700);
transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.z-info-level > .bottom {
display: flex;
}
.z-info-level > .bottom > .min,
.z-info-level > .bottom > .max {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
}
.z-info-level > .bottom > .max {
margin-left: auto;
text-align: right;
}
.z-embedded-video > iframe {
border: none;
}
.z-embedded-video > .thumbnail {
position: relative;
}
.z-embedded-video > .thumbnail:after {
position: absolute;
content: ' ';
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.54);
}
.z-embedded-video > .thumbnail > .play {
width: 48px;
height: 48px;
border-radius: 50%;
background: #FFFFFF;
position: absolute;
left: 50%;
top: 50%;
margin-left: -24px;
margin-top: -24px;
z-index: 1;
display: flex;
}
.z-embedded-video > .thumbnail > .play:after {
display: block;
content: '';
width: 0;
height: 0;
border-left: 15px solid var(--primary-700);
border-bottom: 11px solid transparent;
border-top: 11px solid transparent;
margin: auto;
}
.z-masonry-grid {
flex: 1;
min-height: 0;
display: flex;
}
.z-masonry-grid > .column {
flex: 1;
min-height: 0;
}
.z-masonry-grid > .column > .row {
margin: 0 0 16px;
}
.z-pinch-zoom {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
-webkit-tap-highlight-color: transparent;
position: relative;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.z-pinch-zoom > .scroller {
flex: 1;
min-height: 0;
display: flex;
overflow: hidden;
touch-action: none;
}
.z-pinch-zoom > .scroller > .content {
flex: 1;
min-height: 0;
display: flex;
}
.z-image-view-overlay {
background: #212121;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
position: absolute;
z-index: 999;
animation: z-overlay-fade-in 0.6s;
}
.z-image-view-overlay:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 96px;
background-image: linear-gradient(to bottom, rgba(0,0,0,0), #0c0c0c);
z-index: $zIndexImagePreviewOverlay;
}
.z-image-view-overlay > .previous,
.z-image-view-overlay > .next {
position: absolute;
top: 50%;
z-index: 99;
}
.z-image-view-overlay > .previous {
left: 0;
}
.z-image-view-overlay > .next {
right: 0;
}
.z-image-view-overlay > .slider {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.z-image-view-overlay_image {
display: block;
margin: auto;
user-drag: none;
-webkit-user-drag: none;
-moz-user-drag: none;
-ms-user-drag: none;
}
.z-avatar {
position: relative;
border-radius: 50%;
box-sizing: border-box;
}
.z-avatar > .image {
width: 100%;
height: 100%;
background-size: 100%;
border-radius: 50%;
}
.z-avatar > .image.rotate-180 {
transform: rotate(180deg);
}
.z-avatar > .image.rotate-90 {
transform: rotate(90deg);
}
.z-avatar > .image.rotate-270 {
transform: rotate(270deg);
}
.z-profile-dialog {
opacity: 0;
will-change: opacity;
position: relative;
z-index: 99999;
}
.z-profile-dialog.is-visible {
opacity: 1;
transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.z-profile-dialog_dialog {
background: #fff;
background: var(--tertiary-0);
border-radius: 4px;
display: flex;
flex-direction: column;
}
.z-profile-dialog_dialog > .header {
padding: 24px 16px 16px 16px;
background: transparent;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
position: relative;
display: flex;
}
.z-profile-dialog_dialog > .header > .close {
position: absolute;
top: 8px;
right: 8px;
}
.z-profile-dialog_dialog > .header > .avatar {
width: 72px;
}
.z-profile-dialog_dialog > .header > .about {
margin-left: 16px;
}
.z-profile-dialog_dialog > .header > .about > .name {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
color: rgba(0,0,0,0.7);
color: var(--bg-text);
margin-bottom: 4px;
}
.z-profile-dialog_dialog > .header > .about > .roles {
font-family: Nunito Sans;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 0.4px;
color: rgba(0,0,0,0.38);
color: var(--bg-text-38);
min-height: 20px;
}
.z-profile-dialog_dialog > .header > .about > .links > .link {
display: inline-block;
margin-right: 4px;
}
.z-profile-dialog_dialog .menu {
list-style-type: none;
margin: 0;
padding: 8px 0;
flex: 1;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.z-profile-dialog_dialog .menu > .divider {
background: rgba(0,0,0,0.12);
background: var(--bg-text-12);
height: 1px;
width: 100%;
margin: 8px 0;
}
.z-profile-dialog_dialog .menu > .menu-item {
margin: 0;
}
.z-profile-dialog_dialog .menu > .menu-item > .menu-item-link {
cursor: pointer;
display: flex;
padding: 8px 16px;
box-sizing: border-box;
}
.z-profile-dialog_dialog .menu > .menu-item > .menu-item-link > .icon {
margin-right: 16px;
}
.z-profile-dialog_dialog .menu > .menu-item > .menu-item-link > .chevron {
margin-left: auto;
}
.z-profile-dialog_dialog .menu > .menu-item > .menu-item-link > .text {
font-family: Nunito Sans;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 0.4px;
color: rgba(0,0,0,0.38);
color: var(--bg-text-38);
}
.z-profile-dialog_dialog .menu > .menu-item > .menu {
margin-left: 16px;
padding: 0;
}
.z-formatted-text {
max-width: 700px;
}
.z-formatted-text.is-full-width {
max-width: none;
}
.z-formatted-text.is-truncated {
max-height: 200px;
overflow: hidden;
position: relative;
}
.z-formatted-text.is-truncated::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(to bottom, rgba(0,0,0,0), var(--tertiary-100));
}
.z-formatted-text.is-truncated > .read-more {
display: block;
}
.z-formatted-text > .read-more {
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
width: 100%;
display: none;
}
.z-formatted-text a {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
color: #e64a19;
color: var(--primary-700);
text-decoration: underline;
}
.z-formatted-text a.is-mention {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
display: inline-block;
text-decoration: none !important;
padding: 2px 4px;
background: #fafafa;
background: var(--tertiary-50);
color: #e64a19;
color: var(--primary-700);
border-radius: 2px;
}
.z-formatted-text a.is-mention:hover {
background: #eee;
background: var(--tertiary-200);
}
.z-formatted-text ul {
margin: 4px 0;
}
.z-formatted-text p {
margin: 4px 0 8px 0;
}
.z-formatted-text p:first-child {
margin-top: 0;
}
.z-formatted-text p:last-child {
margin-bottom: 0;
}
.z-formatted-text .image-wrapper {
display: block;
}
.z-formatted-text .image-wrapper img {
padding: 8px;
background: #eee;
background: var(--tertiary-200);
box-sizing: content-box;
border-radius: 2px;
box-sizing: border-box;
}
.z-formatted-text img {
max-width: 100%;
max-height: 800px;
}
.z-formatted-text img.is-sticker {
display: inline-block;
vertical-align: middle;
}
.z-formatted-text h1 {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 26px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
margin: 4px 0 8px 0;
}
.z-formatted-text h2 {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 21.7px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: 0.25px;
margin: 4px 0 8px 0;
}
.z-formatted-text h3 {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
margin: 4px 0 8px 0;
}
.z-formatted-text h4 {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
margin: 4px 0 8px 0;
}
.z-formatted-text blockquote {
margin: 0;
padding: 16px;
background: #eee;
background: var(--tertiary-200);
}
.z-formatted-text ul {
padding: 0 0 0 16px;
}
.z-formatted-text ul li {
margin-bottom: 8px;
}
.z-formatted-text hr {
border: none;
height: 1px;
background: rgba(0,0,0,0.12);
background: var(--bg-text-12);
margin: 16px 0;
}
.z-formatted-text strong {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
}
.z-rating {
display: flex;
}
.z-ui-card {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.32;
letter-spacing: 0.25px;
transition: box-shadow 0.25s;
box-shadow: 0 1px 4px 0 rgba(0,0,0,0.12);
padding: 24px 24px 8px 24px;
border-radius: 4px;
background: #fff;
background: var(--tertiary-0);
position: relative;
}
.z-ui-card.is-highlighted {
background: #e64a19;
background: var(--primary-700);
}
.z-ui-card > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.32;
letter-spacing: 0.1px;
color: #e64a19;
color: var(--primary-700);
margin-bottom: 8px;
}
.z-ui-card > .buttons {
display: flex;
justify-content: flex-end;
margin-top: 8px;
}
.z-place-info-weather {
min-height: 300px;
}
.z-place-info-weather > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.32;
letter-spacing: 0.1px;
margin-bottom: 8px;
}
.z-place-info-weather > .tap-tabs {
border: 1px solid #e0f2f1;
border: 1px solid var(--secondary-50);
border-radius: 4px;
display: flex;
margin-bottom: 24px;
}
.z-place-info-weather > .tap-tabs > .tap-tab {
flex: 1;
min-height: 0;
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.32;
letter-spacing: 0.25px;
padding: 8px 16px;
border-radius: 4px;
text-align: center;
cursor: pointer;
}
.z-place-info-weather > .tap-tabs > .tap-tab.is-selected {
background: #e0f2f1;
background: var(--secondary-50);
}
.z-place-info-weather > .graph {
width: 100%;
}
.z-place-info-weather > .averages > .months {
display: flex;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 30px;
}
.z-place-info-weather > .averages > .months > .month {
width: 60px;
text-align: center;
flex-shrink: 0;
}
.z-place-info-weather > .averages > .months > .month > .name {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.32;
letter-spacing: 0.1px;
text-transform: capitalize;
margin-bottom: 8px;
}
.z-place-info-weather > .averages > .months > .month > .precip {
font-family: Nunito Sans;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 0.4px;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
display: flex;
padding-bottom: 32px;
}
.z-place-info-weather > .averages > .months > .month > .bar-wrapper {
box-sizing: border-box;
position: relative;
}
.z-place-info-weather > .averages > .months > .month > .bar-wrapper > .bar {
flex: 1;
min-height: 0;
background: rgba(0,0,0,0.26);
background: var(--bg-text-26);
width: 20px;
height: 100%;
border-radius: 10px;
margin: 0 auto;
}
.z-place-info-weather > .averages > .months > .month > .bar-wrapper > .high,
.z-place-info-weather > .averages > .months > .month > .bar-wrapper > .low {
font-family: Nunito Sans;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 0.4px;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
position: absolute;
width: 100%;
}
.z-place-info-weather > .averages > .months > .month > .bar-wrapper > .high {
top: -24px;
}
.z-place-info-weather > .averages > .months > .month > .bar-wrapper > .low {
bottom: -24px;
}
.z-place-info-weather > .forecast {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.32;
letter-spacing: 0.25px;
}
.z-place-info-weather > .forecast > .days {
display: flex;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.z-place-info-weather > .forecast > .days > .day {
flex: 1;
min-height: 0;
text-align: center;
min-width: 116px;
}
.z-place-info-weather > .forecast > .days > .day:last-child {
margin-right: 0;
}
.z-place-info-weather > .forecast > .days > .day > .day-of-week {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.32;
letter-spacing: 0.1px;
text-transform: uppercase;
}
.z-place-info-weather > .forecast > .days > .day > .date {
font-family: Nunito Sans;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 0.4px;
color: rgba(0,0,0,0.38);
color: var(--bg-text-38);
}
.z-place-info-weather > .forecast > .days > .day > .icon {
margin: 0 auto 8px auto;
}
.z-place-info-weather > .forecast > .days > .day > .high-low,
.z-place-info-weather > .forecast > .days > .day > .rain,
.z-place-info-weather > .forecast > .days > .day > .wind {
display: flex;
justify-content: center;
margin-bottom: 4px;
}
.z-place-info-weather > .forecast > .days > .day > .high-low > .icon,
.z-place-info-weather > .forecast > .days > .day > .rain > .icon,
.z-place-info-weather > .forecast > .days > .day > .wind > .icon {
margin-right: 4px;
}
.z-place-info-weather > .forecast > .days > .day > .high-low > .divider,
.z-place-info-weather > .forecast > .days > .day > .rain > .divider,
.z-place-info-weather > .forecast > .days > .day > .wind > .divider {
margin: 0 4px;
}
.z-place-info-weather > .forecast > .days > .day > .high-low {
font-family: Nunito Sans;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 0.4px;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
}
.z-place-info-weather > .forecast > .days > .day > .high-low > .high {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.32;
letter-spacing: 0.1px;
color: #f61111;
}
.z-place-info-weather > .forecast > .days > .day > .high-low > .low {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.32;
letter-spacing: 0.1px;
color: #2196F3;
}
.z-place-info-weather > .forecast > .days > .day > .rain {
font-family: Nunito Sans;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 0.4px;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
color: #2196F3;
}
.z-place-info-weather > .forecast > .days > .day > .wind {
font-family: Nunito Sans;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 0.4px;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
align-items: flex-start;
}
.z-place-info-weather > .forecast > .attribution {
font-family: Nunito Sans;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 0.4px;
color: rgba(0,0,0,0.38);
color: var(--bg-text-38);
display: block;
margin-top: 16px;
}
.z-place-info {
flex: 1;
min-height: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.z-place-info.is-image-loaded > .cover {
opacity: 1;
transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.z-place-info > .cover {
width: 100%;
height: 200px;
background-size: cover;
background-position: center;
position: relative;
opacity: 0;
}
.z-place-info > .cover > .see-more {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.32;
letter-spacing: 0.25px;
position: absolute;
bottom: 16px;
right: 16px;
padding: 8px 12px;
border-radius: 4px;
background: rgba(0, 0, 0, 0.54);
color: #FFFFFF;
}
.z-place-info > .warning {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.32;
letter-spacing: 0.1px;
background: #f61111;
color: #FFFFFF;
padding: 8px;
}
.z-place-info > .warning > .g-grid {
display: flex;
align-items: center;
}
.z-place-info > .warning > .g-grid > .icon {
margin-right: 12px;
}
.z-place-info.is-loading > .g-grid {
display: none;
}
.z-place-info.is-loading > .spinner {
display: block;
}
.z-place-info > .spinner {
display: none;
}
.z-place-info > .g-grid {
padding: 16px;
box-sizing: border-box;
}
.z-place-info > .g-grid > .price {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.32;
letter-spacing: 0.1px;
}
.z-place-info > .g-grid > .rating {
display: flex;
}
.z-place-info > .g-grid > .rating > .rating-text {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.32;
letter-spacing: 0.25px;
margin-left: 8px;
}
.z-place-info > .g-grid > .rating > .rating-text > .rating-count {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.32;
letter-spacing: 0.25px;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
}
.z-place-info > .g-grid > .name {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 26px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
margin-bottom: 6px;
}
.z-place-info > .g-grid > .action-box {
margin-top: 24px;
}
.z-place-info > .g-grid > .is-overnight-allowed {
padding: 16px;
margin-bottom: 16px;
border-radius: 4px;
background: #F4B050;
color: rgba(0, 0, 0, 0.87);
}
.z-place-info > .g-grid > .is-overnight-allowed.is-red {
background: #f61111;
color: #FFFFFF;
}
.z-place-info > .g-grid > .is-overnight-allowed.is-green {
background: #80BC99;
color: #FFFFFF;
}
.z-place-info > .g-grid > .card {
margin-bottom: 24px;
}
.z-place-info > .g-grid > .amenity {
display: flex;
}
.z-place-info > .g-grid > .amenity > .name {
margin-left: 8px;
}
.z-place-info > .g-grid > .buttons {
display: flex;
margin-bottom: 16px;
}
.z-place-info > .g-grid > .buttons > .button {
flex: 1;
min-height: 0;
}
.z-place-info > .g-grid > .buttons > .button:first-child {
margin-right: 8px;
}
.z-place-info > .g-grid > .masonry {
margin: -4px -16px;
padding: 0 16px;
}
.z-place-info > .g-grid .section {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.32;
letter-spacing: 0.25px;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
padding: 24px 0 0 0;
border-top: 1px solid rgba(0, 0, 0, 0.12);
}
.z-place-info > .g-grid .section > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.32;
letter-spacing: 0.1px;
}
.z-place-info > .g-grid .section > .h2 {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 21.7px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: 0.25px;
margin-bottom: 4px;
}
.z-place-info > .g-grid .section > .image {
width: 100%;
margin-top: 16px;
}
.z-place-info > .g-grid .section > .map {
width: 100%;
height: 0;
padding-bottom: 54.27%;
background-size: 100%;
border-radius: 2px;
}
.z-place-info > .g-grid .section > .features {
margin-top: 24px;
}
.z-place-info > .g-grid .section > .features > .g-cols > .feature {
display: flex;
align-items: center;
}
.z-place-info > .g-grid .section > .features > .g-cols > .feature > .icon {
margin-right: 8px;
}
.z-place-info > .g-grid .section > .seasons {
border: 1px solid #e0f2f1;
border: 1px solid var(--secondary-50);
border-radius: 4px;
display: flex;
margin-bottom: 8px;
}
.z-place-info > .g-grid .section > .seasons > .tap-tab {
flex: 1;
min-height: 0;
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.32;
letter-spacing: 0.25px;
padding: 8px 16px;
border-radius: 4px;
text-align: center;
cursor: pointer;
}
.z-place-info > .g-grid .section > .seasons > .tap-tab.is-selected {
background: #e0f2f1;
background: var(--secondary-50);
}
.z-place-info > .g-grid .section > .scale {
padding: 16px 0;
}
.z-place-info > .g-grid .section > .scale > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
margin-bottom: 8px;
}
.z-place-info > .g-grid .section > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.32;
letter-spacing: 0.1px;
margin-bottom: 8px;
}
.z-place-info > .g-grid .section > .carriers {
white-space: nowrap;
overflow-x: auto;
}
.z-place-info > .g-grid .section > .carriers > .carrier {
font-family: Nunito Sans;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 0.4px;
color: rgba(0,0,0,0.38);
color: var(--bg-text-38);
display: inline-block;
text-align: center;
margin-right: 16px;
}
@media (min-width: 1280px) {
.z-place-info > .g-grid .section > .carriers > .carrier {
font-size: 15.2px;
}
}
.z-place-info > .g-grid .section > .carriers > .carrier:last-child {
margin-right: 0;
}
.z-place-info > .g-grid .section > .carriers > .carrier > .name {
font-family: Nunito Sans;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 0.4px;
color: rgba(0,0,0,0.38);
color: var(--bg-text-38);
margin-top: 4px;
}
@media (min-width: 768px) {
.z-place-info > .g-grid .section {
padding: 16px;
}
}
.z-toggle {
position: relative;
cursor: pointer;
}
.z-toggle > .track {
width: 34px;
height: 14px;
background: rgba(0,0,0,0.54);
background: var(--bg-text-54);
border-radius: 17px;
}
.z-toggle > .knob {
transition: box-shadow 0.25s;
box-shadow: 0 1px 4px 0 rgba(0,0,0,0.12);
position: absolute;
left: 0;
top: -3px;
width: 20px;
height: 20px;
background: #F5F5F5;
border-radius: 50%;
transform: translate(0, 0);
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.z-toggle.with-text > .track {
width: 48px;
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 13px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 2px;
color: #0c0c0c;
box-sizing: border-box;
text-align: right;
padding-right: 6px;
}
.z-toggle.with-text.is-selected > .track {
padding-left: 3px;
text-align: left;
color: #fff;
color: var(--secondary-300-text);
}
.z-toggle.with-text.is-selected > .knob {
transform: translate(28px, 0);
}
.z-toggle.is-selected > .track {
background: #80cbc4;
background: var(--secondary-200);
}
.z-toggle.is-selected > .knob {
background: #4db6ac;
background: var(--secondary-300);
transform: translate(14px, 0);
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.z-add-place-dialog_dialog > .type {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.5px;
display: block;
padding: 12px 0;
}
.z-coordinate-info-dialog_dialog > .feature > .layer {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 13px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 2px;
}
.z-coordinate-info-dialog_dialog > .feature > .office {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
margin-bottom: 4px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
height: 20px;
}
.z-coordinate-info-dialog_dialog > .feature > .region {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.32;
letter-spacing: 0.25px;
}
.z-coordinate-info-dialog_dialog > .feature > .access {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.32;
letter-spacing: 0.25px;
}
.z-coordinate-info-dialog_dialog > .feature > .mvums {
margin-top: 12px;
max-height: 200px;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.z-coordinate-info-dialog_dialog > .feature > .mvums > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
margin-bottom: 8px;
}
.z-coordinate-info-dialog_dialog > .feature > .mvums > .mvum {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.32;
letter-spacing: 0.25px;
display: flex;
padding: 12px 0;
}
.z-coordinate-info-dialog_dialog > .feature > .mvums > .mvum > .download-icon {
margin-left: auto;
}
.z-coordinate-info-dialog_dialog > .feature > .mvums > .mvum > .map-icon {
margin-left: 28px;
}
.z-place-sheet {
transition: box-shadow 0.25s;
box-shadow: 0 1px 4px 0 rgba(0,0,0,0.12);
position: absolute;
display: block;
z-index: 97;
bottom: 8px;
left: 8px;
right: 8px;
opacity: 0;
pointer-events: none;
}
.z-place-sheet.is-visible {
opacity: 1;
transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.z-place-sheet.is-visible > .sheet {
pointer-events: all;
cursor: pointer;
}
.z-place-sheet > .sheet {
background: #fff;
background: var(--tertiary-0);
border-radius: 4px;
max-width: 480px;
margin: 0 auto;
padding-top: 16px;
}
.z-place-sheet > .sheet > .attachments {
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
height: 128px;
padding: 0 16px 0 16px;
}
.z-place-sheet > .sheet > .attachments > .attachment {
opacity: 0;
display: inline-block;
width: 120px;
height: 120px;
margin-right: 8px;
background-size: 100% auto;
}
.z-place-sheet > .sheet > .attachments > .attachment.is-image-loaded {
opacity: 1;
transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.z-place-sheet > .sheet > .content {
padding: 0 16px 0 16px;
display: flex;
}
.z-place-sheet > .sheet > .content > .left > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
margin-bottom: 4px;
-webkit-user-select: text;
-moz-user-select: text;
user-select: text;
}
.z-place-sheet > .sheet > .content > .left > .elevation {
font-family: Nunito Sans;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 0.4px;
color: rgba(0,0,0,0.38);
color: var(--bg-text-38);
}
.z-place-sheet > .sheet > .content > .left > .add-stop-info {
margin-top: 8px;
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.5px;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
}
.z-place-sheet > .sheet > .content > .right {
margin-left: auto;
text-align: right;
}
.z-place-sheet > .sheet > .content > .right > .rating {
display: flex;
justify-content: flex-end;
}
.z-place-sheet > .sheet > .content > .right > .rating-text {
font-family: Nunito Sans;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 0.4px;
color: rgba(0,0,0,0.38);
color: var(--bg-text-38);
}
@media (min-width: 1280px) {
.z-place-sheet > .sheet > .content > .right > .rating-text {
font-size: 15.2px;
}
}
.z-place-sheet > .sheet > .content > .right > .rating-text > .rating-count {
font-family: Nunito Sans;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 0.4px;
color: rgba(0,0,0,0.38);
color: var(--bg-text-38);
}
@media (min-width: 1280px) {
.z-place-sheet > .sheet > .content > .right > .rating-text > .rating-count {
font-size: 15.2px;
}
}
.z-place-sheet > .sheet > .buttons {
display: flex;
overflow: auto;
-webkit-overflow-scrolling: touch;
padding: 12px 16px;
}
.z-place-sheet > .sheet > .buttons > .button {
font-family: Nunito Sans;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 0.4px;
color: rgba(0,0,0,0.38);
color: var(--bg-text-38);
cursor: pointer;
display: inline-block;
background: #fff;
background: var(--tertiary-0);
border: 1px solid #e0e0e0;
border: 1px solid var(--tertiary-300);
padding: 6px 12px;
border-radius: 19px;
margin: 0 4px;
position: relative;
flex-shrink: 0;
display: flex;
align-items: center;
}
.z-place-sheet > .sheet > .buttons > .button:hover {
border: 1px solid #9e9e9e;
border: 1px solid var(--tertiary-500);
}
.z-place-sheet > .sheet > .buttons > .button:active {
border: 1px solid #e64a19;
border: 1px solid var(--primary-700);
}
.z-place-sheet > .sheet > .buttons > .button > .icon {
margin-right: 10px;
}
.z-place-sheet > .sheet > .buttons > .button > .text {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.32;
letter-spacing: 0.25px;
}
.z-place-sheet > .sheet > .local-maps {
border-top: 1px solid var(--bg-text-12);
width: 100%;
padding: 8px 16px;
box-sizing: border-box;
}
.z-place-sheet > .sheet > .local-maps > .local-map {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.32;
letter-spacing: 0.1px;
display: flex;
align-items: center;
padding: 8px 0;
}
.z-place-sheet > .sheet > .local-maps > .local-map > .toggle {
margin-left: auto;
}
.z-input-range.has-value > .label > .info > .unset {
display: none;
}
.z-input-range > .label {
display: block;
margin-bottom: 16px;
}
.z-input-range > .label > .text {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.32;
letter-spacing: 0.25px;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
margin-bottom: 8px;
}
.z-input-range > .label > .range-container {
position: relative;
height: 28px;
}
.z-input-range > .label > .range-container > .range {
display: block;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
overflow: hidden;
margin: 0;
height: 30px;
-webkit-tap-highlight-color: rgba(255,255,255,0);
outline: none;
background: linear-gradient(to bottom, #00796b, #00796b) 100% 0.5% 3px no-repeat transparent;
background: linear-gradient(to bottom, var(--secondary-700), var(--secondary-700)) 100% 50%/100% 3px no-repeat transparent;
}
.z-input-range > .label > .range-container > .range::after {
content: '';
position: absolute;
top: 1px;
right: 0;
height: 100%;
background: linear-gradient(to bottom, #eee, #eee) 100% 0.5% 3px no-repeat transparent;
background: linear-gradient(to bottom, var(--tertiary-200), var(--tertiary-200)) 100% 50%/100% 3px no-repeat transparent;
}
.z-input-range > .label > .range-container > .range.percent-0::after {
width: 100%;
}
.z-input-range > .label > .range-container > .range.percent-10::after {
width: 90%;
}
.z-input-range > .label > .range-container > .range.percent-20::after {
width: 80%;
}
.z-input-range > .label > .range-container > .range.percent-25::after {
width: 75%;
}
.z-input-range > .label > .range-container > .range.percent-30::after {
width: 70%;
}
.z-input-range > .label > .range-container > .range.percent-40::after {
width: 60%;
}
.z-input-range > .label > .range-container > .range.percent-50::after {
width: 50%;
}
.z-input-range > .label > .range-container > .range.percent-60::after {
width: 40%;
}
.z-input-range > .label > .range-container > .range.percent-70::after {
width: 30%;
}
.z-input-range > .label > .range-container > .range.percent-75::after {
width: 25%;
}
.z-input-range > .label > .range-container > .range.percent-80::after {
width: 20%;
}
.z-input-range > .label > .range-container > .range.percent-90::after {
width: 10%;
}
.z-input-range > .label > .range-container > .range.percent-100::after {
width: 0%;
}
.z-input-range > .label > .range-container > .range::-webkit-slider-runnable-track {
width: 100%;
height: 30px;
background: linear-gradient(to bottom, #00796b, #00796b) 100% 0.5% 3px no-repeat transparent;
background: linear-gradient(to bottom, var(--secondary-700), var(--secondary-700)) 100% 50%/100% 3px no-repeat transparent;
}
.z-input-range > .label > .range-container > .range::-webkit-slider-thumb {
position: relative;
z-index: 1;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
width: 28px;
height: 28px;
border-radius: 50%;
border: 0;
top: 50%;
margin-top: -14px;
background: #fff;
background: var(--tertiary-0);
border: 2px solid #00796b;
border: 2px solid var(--secondary-700);
}
.z-input-range > .label > .range-container > .range::-moz-range-track,
.z-input-range > .label > .range-container > .range::-moz-range-progress {
width: 100%;
height: 30px;
background: linear-gradient(to bottom, #eee, #eee) 100% 0.5% 3px no-repeat transparent;
background: linear-gradient(to bottom, var(--tertiary-200), var(--tertiary-200)) 100% 50%/100% 3px no-repeat transparent;
}
.z-input-range > .label > .range-container > .range::-moz-range-thumb {
-moz-appearance: none;
appearance: none;
margin: 0;
height: 28px;
width: 28px;
background: #00796b;
background: var(--secondary-700);
border-radius: 100%;
border: 0;
}
.z-input-range > .label > .info {
position: relative;
}
.z-input-range > .label > .info > .unset {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.32;
letter-spacing: 0.1px;
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
text-align: center;
}
.z-input-range > .label > .info > .numbers {
display: flex;
margin-top: 8px;
}
.z-input-range > .label > .info > .numbers > .number {
text-align: center;
margin: 0 auto;
}
.z-input-range > .label > .info > .numbers > .number:first-child {
margin-left: 0;
}
.z-input-range > .label > .info > .numbers > .number:last-child {
margin-right: 0;
}
.z-layer-settings-overlay {
background: #f8f8f8;
background: var(--tertiary-100);
width: 100%;
height: 100%;
position: absolute;
z-index: 9999;
display: flex;
flex-direction: column;
}
.z-layer-settings-overlay > .content {
flex: 1;
min-height: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.z-layer-settings-overlay > .content > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
padding: 16px;
}
.z-layer-settings-overlay > .content > .layers {
background: #fff;
background: var(--tertiary-0);
}
.z-layer-settings-overlay > .content > .layers > .layer {
padding: 16px;
display: flex;
}
.z-layer-settings-overlay > .content > .layers > .layer > .icon {
width: 48px;
height: 48px;
background-size: 100%;
border-radius: 8px;
border: 2px solid rgba(0, 0, 0, 0.26);
}
.z-layer-settings-overlay > .content > .layers > .layer > .info {
flex: 1;
min-height: 0;
margin-left: 24px;
}
.z-layer-settings-overlay > .content > .layers > .layer > .info > .slider {
display: flex;
}
.z-layer-settings-overlay > .content > .layers > .layer > .info > .slider > .range {
flex: 1;
min-height: 0;
}
.z-layer-settings-overlay > .content > .layers > .layer > .info > .slider > .percent {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 13px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 2px;
margin-top: 4px;
margin-left: 24px;
}
.z-dropdown {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.5px;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
color: rgba(0,0,0,0.7);
color: var(--bg-text);
min-height: 48px;
display: block;
outline: none;
text-align: inherit;
position: relative;
max-width: 360px;
}
.z-dropdown:not(.is-disabled).z-dropdown:after {
content: '';
position: absolute;
bottom: 18px;
right: 4px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid var(--primary-700);
}
.z-dropdown > .select {
padding: 8px 24px 8px 0;
width: 100%;
height: 48px;
box-sizing: border-box;
-webkit-appearance: none;
font: inherit;
color: inherit;
background-color: transparent;
border: none;
outline: none;
-webkit-tap-highlight-color: transparent;
cursor: pointer;
}
.z-dropdown > .select:active,
.z-dropdown > .select:hover {
outline-color: var(--tertiary-200);
}
.z-dropdown > .select > .option {
background: #fff;
background: var(--tertiary-0);
}
.z-dropdown > .underline {
position: absolute;
height: 1px;
width: 100%;
background: #757575;
}
.z-dropdown > .error {
font-family: Nunito Sans;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 0.4px;
color: rgba(0,0,0,0.38);
color: var(--bg-text-38);
color: #f61111;
margin-top: 8px;
position: absolute;
pointer-events: none;
background: transparent;
}
@media (min-width: 1280px) {
.z-dropdown > .error {
font-size: 15.2px;
}
}
.z-dropdown.is-focused > .underline {
height: 2px;
}
.z-dropdown.is-error > .underline {
background: #f61111;
}
.z-dropdown.is-disabled > .underline {
background: none;
border-bottom: 1px dashed #757575;
}
.z-cell-selector > .carriers {
margin-bottom: 24px;
}
.z-cell-selector > .carriers > .carrier {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.32;
letter-spacing: 0.25px;
display: inline-block;
padding: 6px 12px;
border: 1px solid rgba(0,0,0,0.12);
border: 1px solid var(--bg-text-12);
border-radius: 4px;
margin-right: 8px;
cursor: pointer;
}
.z-cell-selector > .carriers > .carrier:last-child {
margin-right: 0;
}
.z-cell-selector > .carriers > .carrier.is-selected {
background: #e0f2f1;
background: var(--secondary-50);
border: 1px solid #4db6ac;
border: 1px solid var(--secondary-300);
}
.z-cell-selector > .label {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.32;
letter-spacing: 0.25px;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
margin-bottom: 24px;
}
.z-cell-selector > .signals {
display: flex;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.z-cell-selector > .signals > .signal {
margin-right: 24px;
}
.z-cell-selector > .signals > .signal > .name {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 13px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 2px;
margin-top: 16px;
text-align: center;
}
.z-cell-selector > .signals > .signal > .lte {
display: flex;
align-items: center;
margin-top: 6px;
}
.z-cell-selector > .signals > .signal > .lte > .text {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.32;
letter-spacing: 0.25px;
margin-right: 10px;
}
.z-filter-content > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
margin-bottom: 24px;
}
.z-filter-content > .content > .warning {
font-family: Nunito Sans;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 0.4px;
color: rgba(0,0,0,0.38);
color: var(--bg-text-38);
background: #e0f2f1;
background: var(--secondary-50);
margin-top: 8px;
margin-bottom: 24px;
padding: 12px;
border-radius: 4px;
}
@media (min-width: 1280px) {
.z-filter-content > .content > .warning {
font-size: 15.2px;
}
}
.z-filter-content > .content > .content > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.5px;
margin-top: 24px;
}
.z-filter-content > .content > .content > .info {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.32;
letter-spacing: 0.25px;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
margin-bottom: 16px;
}
.z-filter-content > .content > .content > .rating {
margin-bottom: 28px;
}
.z-filter-content > .content > .content > .tap-items.is-full-width {
display: flex;
}
.z-filter-content > .content > .content > .tap-items.is-full-width > .tap-item {
flex: 1;
min-height: 0;
}
.z-filter-content > .content > .content > .tap-items > .tap-item {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.32;
letter-spacing: 0.25px;
display: inline-block;
margin-right: 12px;
margin-bottom: 12px;
padding: 6px 12px;
border-radius: 4px;
text-align: center;
cursor: pointer;
border: 1px solid rgba(0,0,0,0.38);
border: 1px solid var(--bg-text-38);
}
.z-filter-content > .content > .content > .tap-items > .tap-item:last-child {
margin-right: 0;
}
.z-filter-content > .content > .content > .tap-items > .tap-item.is-selected {
background: #e0f2f1;
background: var(--secondary-50);
border: 1px solid #00796b;
border: 1px solid var(--secondary-700);
color: #00796b;
color: var(--secondary-700);
}
.z-filter-content > .content > .content > .tap-items > .tap-item.has-icon {
position: relative;
padding-left: 40px;
}
.z-filter-content > .content > .content > .tap-items > .tap-item.has-icon > .icon {
position: absolute;
left: 12px;
top: 6px;
}
.z-filter-content > .content > .content > .tap-tabs {
border: 1px solid #e0f2f1;
border: 1px solid var(--secondary-50);
border-radius: 4px;
display: flex;
}
.z-filter-content > .content > .content > .tap-tabs > .tap-tab {
flex: 1;
min-height: 0;
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.32;
letter-spacing: 0.25px;
padding: 8px 16px;
border-radius: 4px;
text-align: center;
cursor: pointer;
}
.z-filter-content > .content > .content > .tap-tabs > .tap-tab.is-selected {
background: #e0f2f1;
background: var(--secondary-50);
}
.z-filter-content > .content > .content > .carrier,
.z-filter-content > .content > .content > .amenity {
margin-bottom: 16px;
}
.z-filter-content > .content > .content > .checkbox-label {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.32;
letter-spacing: 0.25px;
margin-top: 16px;
display: flex;
align-items: center;
}
.z-filter-content > .content > .content > .checkbox-label:first {
margin-top: 0;
}
.z-filter-content > .content > .content > .checkbox-label > .operators {
margin-left: auto;
display: flex;
}
.z-filter-content > .content > .content > .checkbox-label > .operators > .operator {
border: 1px solid rgba(0,0,0,0.38);
border: 1px solid var(--bg-text-38);
border-radius: 50%;
width: 24px;
height: 24px;
margin-right: 8px;
}
.z-filter-content > .content > .content > .checkbox-label > .operators > .operator.is-selected {
border: 1px solid #4db6ac;
border: 1px solid var(--secondary-300);
background: #4db6ac;
background: var(--secondary-300);
}
.z-filter-content > .content > .content > .checkbox-label > .operator-input {
width: 30px;
}
.z-filter-content > .content > .content > .checkbox-label > .operator-input-wide {
width: 50px;
}
.z-filter-content > .content > .content > .checkbox-label > .small-input {
width: 50px;
margin-left: auto;
display: flex;
align-items: center;
}
.z-filter-content > .content > .content > .checkbox-label > .input {
margin-left: auto;
}
.z-filter-content > .content > .content > .distance-to-time {
margin-top: 24px;
}
.z-filter-content > .content > .content > .label {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.32;
letter-spacing: 0.25px;
margin-bottom: 8px;
}
.z-filter-content > .content > .content > .fields {
display: flex;
}
.z-filter-sheet_sheet {
position: relative;
}
.z-filter-sheet_sheet > .reset {
position: absolute;
top: -12px;
right: -12px;
}
.z-places-filter-bar {
pointer-events: all;
}
.z-places-filter-bar > .bar {
background: #fff;
background: var(--tertiary-0);
width: 100%;
min-height: 39px;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
box-sizing: border-box;
display: flex;
}
.z-places-filter-bar > .bar > .show {
font-family: Nunito Sans;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 0.4px;
color: rgba(0,0,0,0.38);
color: var(--bg-text-38);
cursor: pointer;
padding: 0 16px;
height: 34px;
position: relative;
display: flex;
align-items: center;
}
.z-places-filter-bar > .bar > .filters {
flex: 1;
min-height: 0;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
.z-places-filter-bar > .bar > .filters > .filter {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.32;
letter-spacing: 0.25px;
cursor: pointer;
display: inline-block;
background: #fff;
background: var(--tertiary-0);
border: 1px solid #e0e0e0;
border: 1px solid var(--tertiary-300);
border-radius: 16px;
margin: 0 4px 12px 4px;
padding: 6px 12px;
position: relative;
}
.z-places-filter-bar > .bar > .filters > .filter.has-value {
color: #e64a19;
color: var(--primary-700);
border: 1px solid #e64a19;
border: 1px solid var(--primary-700);
}
.z-places-filter-bar > .bar > .filters > .filter.has-value.has-more:after {
border-top: 4px solid var(--primary-700);
}
.z-places-filter-bar > .bar > .filters > .filter.has-more {
padding-right: 24px;
}
.z-places-filter-bar > .bar > .filters > .filter.has-more:after {
content: '';
position: absolute;
top: 50%;
margin-top: -2px;
right: 10px;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid var(--tertiary-800);
}
.z-places-filter-bar > .filter-type-selector {
transition: box-shadow 0.25s;
box-shadow: 0 1px 4px 0 rgba(0,0,0,0.12);
position: absolute;
display: none;
top: 64px;
left: 0;
min-width: 180px;
background: #fff;
background: var(--tertiary-0);
z-index: 1000;
border-radius: 2px;
}
.z-places-filter-bar > .filter-type-selector.is-visible {
display: block;
}
.z-places-filter-bar > .filter-type-selector > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.32;
letter-spacing: 0.1px;
padding: 8px;
}
.z-places-filter-bar > .filter-type-selector > .type {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.32;
letter-spacing: 0.25px;
padding: 8px;
cursor: pointer;
}
.z-places-filter-bar > .filter-type-selector > .type.is-selected {
background: #fbe9e7;
background: var(--primary-50);
}
.z-places-filter-bar > .filter-type-selector > .type.is-selected.amenity {
background: rgba(76, 175, 80, 0.26);
}
.z-places-filter-bar > .filter-type-selector > .type.is-selected.overnight {
background: rgba(33, 150, 243, 0.26);
}
.z-places-filter-bar > .filter-type-selector > .type.is-selected.low-clearance {
background: rgba(244, 67, 54, 0.26);
}
.z-places-filter-bar > .filter-type-selector > .type > .checkbox {
margin-right: 8px;
display: flex;
}
.z-places-filter-bar > .filter-type-selector > .type > .name {
display: flex;
align-items: center;
}
.z-places-filter-bar > .filter-type-selector > .type > .name > .key {
width: 10px;
height: 10px;
margin-right: 4px;
}
.z-places-filter-bar > .filter-type-selector > .all-filters {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.32;
letter-spacing: 0.1px;
border-top: 1px solid rgba(0, 0, 0, 0.12);
color: #e64a19;
color: var(--primary-700);
padding: 8px;
cursor: pointer;
}
.z-places-filters-overlay_reset-button {
margin-right: -16px;
}
.z-places-filters-overlay {
position: fixed;
z-index: 99;
top: 0;
left: 0;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
width: 100%;
height: 100%;
box-sizing: border-box;
background: #fff;
background: var(--tertiary-0);
overflow: auto;
-webkit-overflow-scrolling: touch;
display: flex;
flex-direction: column;
}
.z-places-filters-overlay.is-server-side {
display: none;
}
.z-places-filters-overlay.is-visible {
opacity: 1;
pointer-events: all;
}
.z-places-filters-overlay > .g-grid {
flex: 1;
min-height: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.z-places-filters-overlay_filter {
padding: 0 16px;
}
.z-places-filters-overlay_filter > .inner {
padding: 16px 0;
border-bottom: 1px solid var(--bg-text-12);
}
.z-places-filters-overlay_filter > .inner > .group-title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
}
.z-places-filters-overlay_filter > .inner > .description {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.32;
letter-spacing: 0.25px;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
margin-top: 4px;
margin-bottom: 20px;
}
.z-places-filters-overlay_filter > .inner > .warning {
font-family: Nunito Sans;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 0.4px;
color: rgba(0,0,0,0.38);
color: var(--bg-text-38);
background: #e0f2f1;
background: var(--secondary-50);
margin-top: 8px;
margin-bottom: 8px;
padding: 12px;
border-radius: 4px;
}
@media (min-width: 1280px) {
.z-places-filters-overlay_filter > .inner > .warning {
font-size: 15.2px;
}
}
.z-data-types-sheet_sheet > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
margin-bottom: 8px;
}
.z-data-types-sheet_sheet > .g-grid > .g-cols > .g-col > .type {
display: flex;
align-items: center;
padding: 12px 0;
cursor: pointer;
}
.z-data-types-sheet_sheet > .g-grid > .g-cols > .g-col > .type > .info > .name {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.5px;
margin-bottom: 2px;
}
.z-data-types-sheet_sheet > .g-grid > .g-cols > .g-col > .type > .info > .description {
font-family: Nunito Sans;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 0.4px;
color: rgba(0,0,0,0.38);
color: var(--bg-text-38);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media (min-width: 1280px) {
.z-data-types-sheet_sheet > .g-grid > .g-cols > .g-col > .type > .info > .description {
font-size: 15.2px;
}
}
.z-data-types-sheet_sheet > .g-grid > .g-cols > .g-col > .type > .toggle {
margin-left: auto;
}
@media (min-width: 768px) {
.z-data-types-sheet_sheet > .g-grid > .g-cols > .g-col > .type > .checkbox {
margin-left: 8px;
}
}
.z-search-input {
position: relative;
}
.z-search-input.has-on-click > .form > .input {
cursor: pointer;
}
.z-search-input.is-focused > .form > .input {
border: 1px solid rgba(0,0,0,0);
}
.z-search-input.is-server-side > .form > .input {
transition: none;
}
.z-search-input > .search-overlay {
position: absolute;
z-index: 2;
width: 100%;
top: 0;
left: 0;
height: 100%;
display: flex;
align-items: center;
box-sizing: border-box;
pointer-events: none;
}
.z-search-input > .search-overlay > .right-icon,
.z-search-input > .search-overlay > .left-icon {
pointer-events: auto;
}
.z-search-input > .search-overlay > .right-icon {
margin-left: auto;
margin-right: 4px;
}
.z-search-input > .form {
flex: 1;
min-height: 0;
display: flex;
position: relative;
z-index: 1;
}
.z-search-input > .form > .input {
flex: 1;
min-height: 0;
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 14px 14px 14px 68px;
border-radius: 4px;
border: 1px solid rgba(0,0,0,0.12);
border: 1px solid var(--bg-text-12);
box-sizing: border-box;
transition: border 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-webkit-tap-highlight-color: transparent;
margin: 0;
outline: none;
}
.z-search-input > .form > .input::placeholder {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
opacity: 1;
}
.z-search-input > .form > .input::-moz-placeholder {
line-height: 1em;
}
.z-search-input.is-search-on-submit > .form > .input {
padding-left: 16px;
}
.z-places-search > .input-container {
pointer-events: all;
background: #fff;
background: var(--tertiary-0);
margin-bottom: 4px;
}
.z-places-search > .input-container > .input {
padding: 8px 12px 8px 12px;
position: relative;
z-index: 99;
}
.z-places-search.is-server-side > .overlay {
transition: none;
opacity: 0;
}
.z-places-search.is-open > .overlay {
opacity: 1;
pointer-events: all;
}
.z-places-search.is-open > .input-container > .input {
transition: box-shadow 0.25s;
box-shadow: 0 1px 4px 0 rgba(0,0,0,0.12);
}
.z-places-search > .overlay {
position: absolute;
z-index: 98;
pointer-events: none;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding-bottom: 62px;
box-sizing: border-box;
background: #fff;
background: var(--tertiary-0);
opacity: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.z-places-search > .overlay > .overlay-inner {
padding: 8px;
padding-top: 56px;
}
.z-places-search > .overlay > .overlay-inner > .locations {
padding: 8px;
margin-top: 8px;
}
.z-places-search > .overlay > .overlay-inner > .locations > .location {
display: flex;
padding: 8px;
cursor: pointer;
height: 40px;
}
.z-places-search > .overlay > .overlay-inner > .locations > .location:hover {
background: #f8f8f8;
background: var(--tertiary-100);
}
.z-places-search > .overlay > .overlay-inner > .locations > .location > .icon {
margin-right: 16px;
}
.z-places-search > .overlay > .overlay-inner > .locations > .location > .content {
flex: 1;
min-height: 0;
height: 100%;
display: flex;
align-items: center;
border-bottom: 1px solid var(--bg-text-12);
overflow: hidden;
}
.z-places-search > .overlay > .overlay-inner > .locations > .location > .content > .text {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.z-places-search > .overlay > .overlay-inner > .locations > .location > .content > .locality {
margin-left: 8px;
color: rgba(0,0,0,0.54);
color: var(--bg-text-54);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.z-places-search > .overlay > .overlay-inner > .locations > .location > .content > .open {
margin-left: 16px;
}
@media (min-width: 768px) {
.z-places-search > .overlay > .overlay-inner > .data-types > .g-grid > .g-cols > .g-col > .type > .checkbox {
margin-left: 8px;
}
.z-places-search > .overlay {
padding-bottom: 0;
}
}
.z-places-map-container {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.z-places-map-container.is-shell > .search > .z-places-filter-bar > .bar > .filters {
display: none;
}
.z-places-map-container.is-shell > .search > .z-places-search > .overlay {
display: none;
}
.z-places-map-container > .counts-bar {
font-family: Nunito Sans;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 0.4px;
color: rgba(0,0,0,0.38);
color: var(--bg-text-38);
display: none;
text-align: center;
z-index: 1;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 4px;
box-sizing: border-box;
background: #fff;
background: var(--tertiary-0);
}
@media (min-width: 1280px) {
.z-places-map-container > .counts-bar {
font-size: 15.2px;
}
}
.z-places-map-container > .counts-bar.is-visible {
display: block;
}
.z-places-map-container > .map {
flex: 1;
min-height: 0;
display: flex;
position: relative;
}
.z-places-map-container > .map > .legend-fab {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.32;
letter-spacing: 0.25px;
transition: box-shadow 0.25s;
box-shadow: 0 1px 4px 0 rgba(0,0,0,0.12);
position: absolute;
bottom: 44px;
left: 12px;
background: #fff;
background: var(--tertiary-0);
border-radius: 8px;
padding: 6px 12px;
cursor: pointer;
}
.z-places-map-container > .map > .layers-fab {
position: absolute;
top: 16px;
right: 16px;
}
.z-places-map-container > .map > .layers,
.z-places-map-container > .map > .legend {
transition: box-shadow 0.25s;
box-shadow: 0 1px 4px 0 rgba(0,0,0,0.12);
position: absolute;
background: #fff;
background: var(--tertiary-0);
border-radius: 8px;
padding: 12px 16px;
z-index: 99;
opacity: 0;
min-width: 240px;
min-height: 220px;
box-sizing: border-box;
transform: scale(0.5);
opacity: 0;
pointer-events: none;
transform-origin: top right;
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.z-places-map-container > .map > .layers.is-visible,
.z-places-map-container > .map > .legend.is-visible {
pointer-events: all;
opacity: 1;
transform: scale(1);
}
.z-places-map-container > .map > .layers.is-visible > .content,
.z-places-map-container > .map > .legend.is-visible > .content {
opacity: 1;
}
.z-places-map-container > .map > .layers > .content,
.z-places-map-container > .map > .legend > .content {
opacity: 0;
transition: opacity 0.2s;
transition-delay: 0.2s;
}
.z-places-map-container > .map > .legend {
bottom: 44px;
left: 12px;
transform-origin: bottom left;
min-height: 80px;
}
.z-places-map-container > .map > .legend > .item {
font-family: Nunito Sans;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 0.4px;
color: rgba(0,0,0,0.38);
color: var(--bg-text-38);
display: flex;
align-items: center;
margin-bottom: 4px;
}
@media (min-width: 1280px) {
.z-places-map-container > .map > .legend > .item {
font-size: 15.2px;
}
}
.z-places-map-container > .map > .legend > .item > .icon {
margin-right: 8px;
width: 24px;
height: 24px;
}
.z-places-map-container > .map > .layers {
top: 16px;
right: 16px;
z-index: 1000;
}
.z-places-map-container > .map > .layers > .content > .top {
display: flex;
align-items: flex-start;
}
.z-places-map-container > .map > .layers > .content > .top > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
margin-bottom: 16px;
}
.z-places-map-container > .map > .layers > .content > .top > .settings {
margin-left: auto;
}
.z-places-map-container > .map > .layers > .content > .layer-icons > .g-grid > .g-cols > .layer-icon {
text-align: center;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
margin: 4px 0;
}
.z-places-map-container > .map > .layers > .content > .layer-icons > .g-grid > .g-cols > .layer-icon.is-visible > .icon {
border: 3px solid #e64a19;
border: 3px solid var(--primary-700);
}
.z-places-map-container > .map > .layers > .content > .layer-icons > .g-grid > .g-cols > .layer-icon.is-visible > .name {
color: #e64a19;
color: var(--primary-700);
}
.z-places-map-container > .map > .layers > .content > .layer-icons > .g-grid > .g-cols > .layer-icon:last-child {
margin-right: 0;
}
.z-places-map-container > .map > .layers > .content > .layer-icons > .g-grid > .g-cols > .layer-icon > .icon {
width: 50px;
height: 50px;
margin: 0 auto;
background-size: 100%;
border-radius: 4px;
border: 3px solid #fff;
border: 3px solid var(--tertiary-0);
box-sizing: content-box;
}
.z-places-map-container > .map > .layers > .content > .layer-icons > .g-grid > .g-cols > .layer-icon > .name {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 11px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.45;
letter-spacing: 0.34px;
margin-top: 4px;
width: 68px;
text-align: center;
}
@media (min-width: 1280px) {
.z-places-map-container > .map > .layers > .content > .layer-icons > .g-grid > .g-cols > .layer-icon > .name {
font-size: 13px;
}
}
.z-place-list-amenity {
flex: 1;
min-height: 0;
display: flex;
align-items: center;
}
.z-place-list-amenity > .info {
flex: 1;
min-height: 0;
min-width: 0;
}
.z-place-list-amenity > .info > .name {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
}
.z-place-list-amenity > .info > .caption {
font-family: Nunito Sans;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 0.4px;
color: rgba(0,0,0,0.38);
color: var(--bg-text-38);
}
@media (min-width: 1280px) {
.z-place-list-amenity > .info > .caption {
font-size: 15.2px;
}
}
.z-place-list-amenity > .info > .amenities {
margin-top: 8px;
height: 30px;
}
.z-place-list-amenity > .info > .amenities > .amenity {
font-family: Nunito Sans;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 0.4px;
color: rgba(0,0,0,0.38);
color: var(--bg-text-38);
float: left;
display: flex;
align-items: center;
margin-right: 4px;
margin-bottom: 4px;
padding: 2px 12px;
box-sizing: border-box;
border-radius: 2px;
}
.z-place-list-amenity > .info > .amenities > .amenity > .icon {
margin-right: 8px;
}
.z-place-list-amenity > .actions > .action {
margin-left: 8px;
}
.z-place-list-campground {
flex: 1;
min-height: 0;
display: flex;
align-items: center;
}
.z-place-list-campground > .thumbnail {
width: 100px;
height: 78px;
background-size: cover;
margin-right: 16px;
border-radius: 4px;
}
.z-place-list-campground > .info {
flex: 1;
min-height: 0;
min-width: 0;
}
.z-place-list-campground > .info > .name {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
}
.z-place-list-campground > .info > .caption {
font-family: Nunito Sans;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 0.4px;
color: rgba(0,0,0,0.38);
color: var(--bg-text-38);
}
@media (min-width: 1280px) {
.z-place-list-campground > .info > .caption {
font-size: 15.2px;
}
}
.z-place-list-campground > .actions > .action {
margin-left: 8px;
}
.z-place-list-item {
flex: 1;
min-height: 0;
display: flex;
align-items: center;
}
.z-place-list-item > .thumbnail {
width: 100px;
height: 78px;
background-size: 100%;
margin-right: 16px;
border-radius: 4px;
}
.z-place-list-item > .info {
flex: 1;
min-height: 0;
min-width: 0;
}
.z-place-list-item > .info > .name {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
}
.z-place-list-item > .info > .caption {
font-family: Nunito Sans;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 0.4px;
color: rgba(0,0,0,0.38);
color: var(--bg-text-38);
}
@media (min-width: 1280px) {
.z-place-list-item > .info > .caption {
font-size: 15.2px;
}
}
.z-place-list {
flex: 1;
min-height: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.z-place-list > .g-grid > .place {
padding: 8px 16px;
}
.z-place-list > .g-grid > .divider {
width: 100%;
height: 1px;
background: rgba(0,0,0,0.12);
background: var(--bg-text-12);
margin: 12px 0;
}
.z-place-nearby {
flex: 1;
min-height: 0;
display: flex;
min-width: 0;
flex-direction: column;
}
.z-place-nearby > .map {
flex: 1;
min-height: 0;
display: flex;
position: relative;
}
.z-place-nearby > .map > .toggle-cell-towers {
font-family: Nunito Sans;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 0.4px;
color: rgba(0,0,0,0.38);
color: var(--bg-text-38);
cursor: pointer;
position: absolute;
top: 8px;
left: 8px;
z-index: 100;
background: #fff;
background: var(--tertiary-0);
padding: 0 4px;
border-radius: 2px;
}
@media (min-width: 1280px) {
.z-place-nearby > .map > .toggle-cell-towers {
font-size: 15.2px;
}
}
.z-place-nearby > .place-list {
flex: 1;
min-height: 0;
display: flex;
}
.z-place-nearby > .place-list > .z-place-list {
padding-top: 16px;
}
.z-place-nearby > .fab {
position: fixed;
bottom: 16px;
right: 16px;
z-index: 50;
}
.z-reviews {
flex: 1;
min-height: 0;
padding: 0 16px 64px 16px;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.z-reviews > .g-grid > .search {
margin-bottom: 16px;
}
.z-reviews > .g-grid > .reviews > .review {
padding: 16px 0;
border-bottom: 1px solid var(--bg-text-12);
}
.z-author {
font-family: Nunito Sans;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 0.4px;
color: rgba(0,0,0,0.38);
color: var(--bg-text-38);
color: rgba(0,0,0,0.54);
color: var(--bg-text-54);
display: flex;
align-items: center;
cursor: pointer;
}
.z-author > .icon {
margin-right: 8px;
}
.z-author > .name {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.32;
letter-spacing: 0.1px;
color: rgba(0,0,0,0.7);
color: var(--bg-text);
}
.z-author > .icons {
display: flex;
align-items: center;
margin-left: 12px;
}
.z-author > .icons > .icon {
margin-right: 4px;
}
.z-author > .icons > .text {
margin-right: 4px;
}
.z-author > .time {
font-family: Nunito Sans;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 0.4px;
margin-left: auto;
}
.z-author > .time.is-aligned-left {
margin-left: 8px;
}
.z-author > .middot {
margin-left: 4px;
margin-right: 4px;
}
@media (min-width: 768px) {
.z-author > .time {
margin-left: 8px;
}
}
.z-attachments-list > .attachment-wrapper {
display: inline-block;
padding: 0 4px;
box-sizing: border-box;
}
.z-attachments-list > .attachment-wrapper > .attachment {
width: 100%;
height: 100%;
position: relative;
}
.z-attachments-list > .attachment-wrapper > .attachment > .more {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.54);
display: flex;
align-items: center;
justify-content: center;
}
.z-attachments-list > .attachment-wrapper > .attachment > .more > .text {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
color: #FFFFFF;
}
.z-attachments-list > .attachment-wrapper > .attachment > .icon {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.12);
display: flex;
align-items: center;
justify-content: center;
}
.z-attachments-list > .attachment-wrapper > .attachment > .img {
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
cursor: pointer;
}
.z-review > .rating {
margin-bottom: 4px;
}
.z-review > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
margin-bottom: 2px;
}
.z-review > .body {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.32;
letter-spacing: 0.25px;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
position: relative;
z-index: 2;
padding-right: 16px;
overflow: hidden;
}
.z-review > .attachments {
margin: 12px 0;
}
.z-review > .points {
display: flex;
align-items: center;
justify-content: flex-end;
margin-top: 16px;
}
.z-review > .points > .icon {
margin: 0 8px;
}
.z-place-review {
width: 100%;
box-sizing: border-box;
overflow: hidden;
position: relative;
}
.z-place-review > .top-info {
display: flex;
align-items: center;
margin-bottom: 8px;
}
.z-place-review > .top-info > .avatar {
margin-right: 16px;
cursor: pointer;
position: relative;
}
.z-place-review > .top-info > .author {
flex: 1;
min-height: 0;
}
.z-place-reviews {
flex: 1;
min-height: 0;
min-width: 0;
}
.z-place-reviews_empty > .add-review {
margin-top: 8px;
}
.z-place {
flex: 1;
min-height: 0;
display: flex;
}
.z-place > .fab {
position: fixed;
bottom: 16px;
right: 16px;
z-index: 50;
}
.z-review-thanks-dialog_dialog {
background: #fff;
background: var(--tertiary-0);
padding: 16px;
border-radius: 4px;
}
.z-review-thanks-dialog_dialog > .image {
height: 114px;
width: 160px;
background: url("https://fdn.uno/d/images/review_thanks.svg");
background-size: 100%;
margin: 0 auto 24px auto;
}
.z-review-thanks-dialog_dialog > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
color: #e64a19;
color: var(--primary-700);
text-align: center;
margin-bottom: 12px;
}
.z-review-thanks-dialog_dialog > .description {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.5px;
}
.z-review-thanks-dialog_dialog > .button {
display: flex;
margin-top: 24px;
}
.p-place {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.p-place_top-right {
display: flex;
align-items: center;
}
.z-attachments > .g-grid > .g-cols > .g-col > .attachment {
cursor: pointer;
position: relative;
}
.z-attachments > .g-grid > .g-cols > .g-col > .attachment > .more {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.54);
display: flex;
align-items: center;
justify-content: center;
}
.z-attachments > .g-grid > .g-cols > .g-col > .attachment > .more > .text {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
color: #FFFFFF;
}
.z-attachments > .g-grid > .g-cols > .g-col > .attachment > .image {
background-size: cover;
padding-bottom: 100%;
}
.z-place-attachments {
flex: 1;
min-height: 0;
padding: 16px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.p-place-attachments {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.z-check-in {
flex: 1;
min-height: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.z-check-in > .g-grid > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
padding: 16px;
}
.z-check-in > .g-grid > .place {
padding: 0 16px 16px 16px;
}
.z-check-in > .g-grid > .place > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
padding: 16px 0;
}
.z-check-in > .g-grid > .actions {
display: flex;
padding: 0 16px;
margin-top: 12px;
}
.z-check-in > .g-grid > .actions > .action {
flex: 1;
min-height: 0;
margin-right: 16px;
}
.z-check-in > .g-grid > .actions > .action:last-child {
margin-right: 0;
}
.z-check-in > .g-grid > .notes {
padding: 0 16px;
}
.z-check-in > .g-grid > .photos {
padding: 0 8px;
}
.p-new-check-in {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.p-new-check-in_top-right {
display: flex;
}
.z-conversation-input-textarea {
position: relative;
}
.z-conversation-input-textarea > .textarea {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.32;
letter-spacing: 0.25px;
width: 100%;
height: 54px;
padding: 16px 92px 16px 16px;
box-sizing: border-box;
max-height: 150px;
border: none;
outline: none;
resize: none;
display: block;
background: #fff;
background: var(--tertiary-0);
}
.z-conversation-input-textarea > .textarea::placeholder {
color: rgba(0,0,0,0.54);
color: var(--bg-text-54);
}
.z-conversation-input-textarea > .right-icons {
position: absolute;
right: 12px;
top: 0%;
height: 100%;
display: flex;
align-items: center;
cursor: pointer;
display: none;
}
.z-conversation-input-textarea > .right-icons.is-visible {
display: block;
}
.z-conversation-input-textarea > .right-icons > .send-icon {
height: 100%;
display: flex;
}
.z-conversation-input-gifs > .gifs {
white-space: nowrap;
overflow-x: auto;
padding: 8px 16px;
min-height: 135px;
}
.z-conversation-input-gifs > .gifs > .gif {
height: 100px;
margin-right: 8px;
cursor: pointer;
}
.z-conversation-input {
height: 86px;
display: flex;
flex-direction: column;
justify-content: flex-end;
pointer-events: none;
position: relative;
overflow: hidden;
}
.z-conversation-input > .locked {
position: absolute;
z-index: 900;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.87);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
flex-direction: column;
}
.z-conversation-input > .panel {
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
flex: 1;
min-height: 0;
max-height: 150px;
position: relative;
pointer-events: all;
margin-bottom: -100px;
}
.z-conversation-input > .panel > .require-verified {
position: absolute;
z-index: 900;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.87);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
flex-direction: column;
}
.z-conversation-input > .panel > .require-verified > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
}
.z-conversation-input > .panel > .require-verified > .description {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.5px;
}
.z-conversation-input > .panel-icons {
position: absolute;
top: 12px;
right: 0;
align-items: center;
width: 108px;
display: none;
pointer-events: all;
}
.z-conversation-input > .panel-icons.is-visible {
display: flex;
}
.z-conversation-input > .panel-icons > .icon {
position: relative;
width: 48px;
}
.z-conversation-input > .panel-icons > .icon > .upload-overlay {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
cursor: pointer;
}
.z-conversation-input > .panel-icons > .powered-by-giphy {
width: 140px;
height: 14px;
margin-left: auto;
margin-right: 8px;
background: url("https://fdn.uno/d/images/giphy_horiz_dark.png") no-repeat;
background-size: 100%;
display: none;
}
.z-conversation-input.is-gifs-panel > .bottom-icons > .powered-by-giphy {
display: block;
}
.z-action-message {
font-family: Nunito Sans;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 0.4px;
color: rgba(0,0,0,0.38);
color: var(--bg-text-38);
color: rgba(0,0,0,0.54);
color: var(--bg-text-54);
display: flex;
align-items: center;
cursor: pointer;
}
.z-action-message > .name {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.32;
letter-spacing: 0.1px;
color: rgba(0,0,0,0.7);
color: var(--bg-text);
}
.z-action-message > .message {
margin-left: 8px;
}
.z-action-message > .time {
margin-left: auto;
}
.z-action-message > .time.is-aligned-left {
margin-left: 4px;
}
@media (min-width: 768px) {
.z-action-message > .time {
margin-left: 8px;
}
}
.z-message {
display: flex;
width: 100%;
box-sizing: border-box;
overflow: hidden;
position: relative;
}
.z-message.is-me-mentioned > .content > .body {
background: #fff;
background: var(--tertiary-0);
border-left: 2px solid var(--primary-700);
border-radius: 2px;
padding-left: 4px;
}
.z-message.is-grouped {
padding-top: 4px;
}
.z-message.is-grouped > .avatar {
visibility: hidden;
}
.z-message > .avatar {
margin-right: 16px;
cursor: pointer;
position: relative;
}
.z-message > .avatar > .level {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 11px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.45;
letter-spacing: 0.34px;
position: absolute;
bottom: 0;
left: 0;
background: #f00;
border-radius: 50%;
color: rgba(0,0,0,0.7);
color: var(--bg-text);
padding: 4px;
}
@media (min-width: 1280px) {
.z-message > .avatar > .level {
font-size: 13px;
}
}
.z-message > .content {
flex: 1;
min-height: 0;
min-width: 0;
}
.z-message > .content > .body {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.32;
letter-spacing: 0.25px;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
position: relative;
z-index: 2;
padding-right: 16px;
overflow: hidden;
}
.z-message > .content > .body p:first-child {
margin-top: 0;
}
.z-message > .content > .body p:last-child {
margin-bottom: 0;
}
.z-message > .content > .body .link {
text-decoration: underline;
}
.z-message > .content > .action {
font-family: Nunito Sans;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 0.4px;
font-style: italic;
margin-top: 8px;
}
.z-message > .content > .custom-card {
margin-top: 12px;
}
.z-message > .content > .card {
position: relative;
display: block;
z-index: 2;
background: #fff;
background: var(--tertiary-0);
border: 1px solid rgba(0,0,0,0.12);
border: 1px solid var(--bg-text-12);
padding: 12px;
margin-top: 12px;
border-radius: 4px;
cursor: pointer;
max-width: 300px;
overflow: hidden;
}
.z-message > .content > .card > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.32;
letter-spacing: 0.1px;
}
.z-message > .content > .card > .description {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.32;
letter-spacing: 0.25px;
color: rgba(0,0,0,0.54);
color: var(--bg-text-54);
margin-top: 6px;
}
@media (min-width: 768px) {
.z-message > .content > .info > .name {
max-width: none;
}
}
.z-conversation-message {
padding: 10px 16px;
}
.is-firefox .z-conversation > .messages > .messages-inner {
min-height: 0;
}
.z-conversation {
display: flex;
flex: 1;
min-height: 0;
flex-direction: column;
width: 100%;
position: relative;
}
.z-conversation > .loading {
position: absolute;
z-index: 999;
top: 0;
left: 0;
right: 0;
height: 30px;
}
.z-conversation > .messages {
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
flex: 1;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
display: flex;
flex-direction: column-reverse;
will-change: transform;
width: 100%;
min-width: 0;
padding: 8px 0;
box-sizing: border-box;
padding-top: 30px;
margin-bottom: 64px;
}
.z-conversation > .messages > .messages-inner > .message-batch {
opacity: 0;
will-change: transform;
}
.z-conversation > .messages > .messages-inner > .message-batch.is-loaded {
opacity: 1;
}
.z-conversation > .bottom {
padding: 0 8px 8px 8px;
position: absolute;
border-top: 1px solid var(--bg-text-12);
bottom: -1px;
left: 0;
right: 0;
background: transparent;
}
.z-conversation > .bottom > .jump-new {
position: absolute;
left: 0;
top: -24px;
background: #e64a19;
background: var(--primary-700);
color: #fafafa;
color: var(--primary-900-text);
height: 24px;
width: 100%;
padding: 4px 16px;
box-sizing: border-box;
cursor: pointer;
}
.z-conversation > .bottom.is-gate {
transition: box-shadow 0.25s;
box-shadow: 0 -1px 4px 0 rgba(0,0,0,0.12);
background: #fff;
background: var(--tertiary-0);
padding: 16px;
}
.z-conversation > .bottom.is-gate > .text {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.5px;
text-align: center;
margin-bottom: 16px;
}
.z-conversation.use-iscroll > .messages {
overflow-y: hidden;
-webkit-overflow-scrolling: auto;
}
@media (min-width: 768px) {
.z-conversation > .textarea-container {
background: transparent;
}
.z-conversation > .bottom {
bottom: 0px;
}
}
.p-conversation {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.p-conversation > .g-grid {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.z-conversations {
flex: 1;
min-height: 0;
width: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
padding-top: 8px;
}
.z-conversations > .g-grid > .no-conversations {
text-align: center;
padding: 16px;
}
.z-conversations > .g-grid > .conversation {
display: flex;
padding: 14px 16px;
}
.z-conversations > .g-grid > .conversation.is-unread > .status {
border-radius: 50%;
background: #e64a19;
background: var(--primary-700);
}
.z-conversations > .g-grid > .conversation > .status {
width: 4px;
height: 4px;
margin: auto 8px auto 0;
}
.z-conversations > .g-grid > .conversation > .avatar {
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 16px;
}
.z-conversations > .g-grid > .conversation > .right {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.z-conversations > .g-grid > .conversation > .right > .info {
flex: 1;
min-height: 0;
display: flex;
align-items: center;
}
.z-conversations > .g-grid > .conversation > .right > .info > .name {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
margin-bottom: 8px;
}
.z-conversations > .g-grid > .conversation > .right > .info > .time {
font-family: Nunito Sans;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 0.4px;
color: rgba(0,0,0,0.38);
color: var(--bg-text-38);
margin-left: auto;
color: #e64a19;
color: var(--primary-700);
}
@media (min-width: 1280px) {
.z-conversations > .g-grid > .conversation > .right > .info > .time {
font-size: 15.2px;
}
}
.z-conversations > .g-grid > .conversation > .right > .last-message {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.32;
letter-spacing: 0.25px;
color: rgba(0,0,0,0.54);
color: var(--bg-text-54);
}
.p-conversations {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.z-check-in-tooltip {
transition: box-shadow 0.25s;
box-shadow: 0 1px 4px 0 rgba(0,0,0,0.12);
position: absolute;
z-index: 99;
opacity: 0;
pointer-events: none;
border-radius: 8px;
max-width: 300px;
min-height: 72px;
will-change: transform;
box-sizing: border-box;
cursor: pointer;
display: flex;
align-items: center;
background: #f8f8f8;
background: var(--tertiary-100);
display: flex;
align-items: center;
padding-right: 24px;
}
.z-check-in-tooltip::after {
content: '';
position: absolute;
border: 10px solid transparent;
}
.z-check-in-tooltip.anchor-top-center {
margin-top: 0;
}
.z-check-in-tooltip.anchor-top-center::after {
left: 50%;
top: -10px;
margin-left: -10px;
border-top: none;
border-bottom-color: var(--tertiary-100);
}
.z-check-in-tooltip.anchor-top-left {
margin-top: 0;
}
.z-check-in-tooltip.anchor-top-left::after {
left: 24px;
top: -10px;
margin-left: -10px;
border-top: none;
border-bottom-color: var(--tertiary-100);
}
.z-check-in-tooltip.anchor-top-right {
margin-top: 0;
}
.z-check-in-tooltip.anchor-top-right::after {
right: 24px;
top: -10px;
margin-left: -10px;
border-top: none;
border-bottom-color: var(--tertiary-100);
}
.z-check-in-tooltip.anchor-bottom-center {
margin-top: -20px;
}
.z-check-in-tooltip.anchor-bottom-center::after {
left: 50%;
bottom: -10px;
margin-left: -10px;
border-bottom: none;
border-top-color: var(--tertiary-100);
}
.z-check-in-tooltip.anchor-bottom-left {
margin-top: -20px;
}
.z-check-in-tooltip.anchor-bottom-left::after {
left: 24px;
bottom: -10px;
margin-left: -10px;
border-bottom: none;
border-top-color: var(--tertiary-100);
}
.z-check-in-tooltip.anchor-center-left {
margin-left: 10px;
margin-top: -10px;
}
.z-check-in-tooltip.anchor-center-left::after {
top: 50%;
left: -10px;
margin-top: -10px;
border-left: none;
border-right-color: var(--tertiary-100);
}
.z-check-in-tooltip.anchor-center-right {
margin-left: -10px;
margin-top: -10px;
}
.z-check-in-tooltip.anchor-center-right::after {
top: 50%;
right: -10px;
margin-top: -10px;
border-right: none;
border-left-color: var(--tertiary-100);
}
.z-check-in-tooltip.is-visible {
opacity: 1;
transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: all;
}
.z-check-in-tooltip > .close {
position: absolute;
top: 16px;
right: 16px;
}
.z-check-in-tooltip > .content {
flex: 1;
min-height: 0;
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.32;
letter-spacing: 0.25px;
padding: 16px;
color: var(--tertiary-100-text);
}
.z-check-in-tooltip > .content > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.32;
letter-spacing: 0.1px;
color: var(--tertiary-100-text);
padding-right: 24px;
margin-bottom: 8px;
}
.z-check-in-tooltip > .content > .title {
padding-right: 0;
margin-bottom: 0;
}
.z-check-in-tooltip > .actions {
display: flex;
}
.z-check-in-tooltip > .actions > .action {
margin: 0 8px;
text-align: center;
cursor: pointer;
}
.z-check-in-tooltip > .actions > .action > .icon {
margin-bottom: 2px;
}
.z-check-in-tooltip > .actions > .action > .text {
font-family: Nunito Sans;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 0.4px;
color: rgba(0,0,0,0.38);
color: var(--bg-text-38);
}
@media (min-width: 1280px) {
.z-check-in-tooltip > .actions > .action > .text {
font-size: 15.2px;
}
}
.z-coordinate-picker {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
background: #f8f8f8;
background: var(--tertiary-100);
}
.z-coordinate-picker > .map {
width: 100%;
flex: 1;
min-height: 0;
display: flex;
position: relative;
}
.z-coordinate-picker > .map > .search {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.z-coordinate-picker > .map > .toggle-satellite {
font-family: Nunito Sans;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 0.4px;
color: rgba(0,0,0,0.38);
color: var(--bg-text-38);
cursor: pointer;
position: absolute;
bottom: 80px;
left: 8px;
z-index: 97;
background: #fff;
background: var(--tertiary-0);
padding: 0 4px;
border-radius: 2px;
}
@media (min-width: 1280px) {
.z-coordinate-picker > .map > .toggle-satellite {
font-size: 15.2px;
}
}
.z-coordinate-picker > .map > .my-location-fab {
position: absolute;
bottom: 8px;
left: 8px;
}
.z-coordinate-picker-overlay {
width: 100%;
height: 100%;
position: absolute;
z-index: 999;
display: flex;
flex-direction: column;
background: #f8f8f8;
background: var(--tertiary-100);
}
.z-current-location {
display: flex;
align-items: center;
padding: 0 16px;
margin-bottom: 8px;
}
.z-current-location > .location {
margin-left: 16px;
}
.z-current-location > .location > .name {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
}
.z-current-location > .location > .location {
font-family: Nunito Sans;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 0.4px;
color: rgba(0,0,0,0.38);
color: var(--bg-text-38);
}
.z-current-location > .change {
margin-left: auto;
}
.z-dashboard {
flex: 1;
min-height: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
padding: 0;
}
.z-dashboard > .g-grid > .empty {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.32;
letter-spacing: 0.25px;
padding-top: 16px;
}
.z-dashboard > .g-grid > .empty > .info-card {
background: #e64a19;
background: var(--primary-700);
color: #fafafa;
color: var(--primary-900-text);
padding: 16px;
border-radius: 4px;
margin: 0 16px 16px 16px;
}
.z-dashboard > .g-grid > .empty > .info-card > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
color: #fafafa;
color: var(--primary-900-text);
margin-bottom: 4px;
}
.z-dashboard > .g-grid > .empty > .info-card > .description {
color: #fafafa;
color: var(--primary-900-text);
}
.z-dashboard > .g-grid > .empty > .info-card > .actions {
display: flex;
justify-content: flex-end;
margin-bottom: -8px;
}
.z-dashboard > .g-grid > .empty > .nearby {
transition: box-shadow 0.25s;
box-shadow: 0 1px 4px 0 rgba(0,0,0,0.12);
background: #fff;
background: var(--tertiary-0);
margin-bottom: 16px;
}
.z-dashboard > .g-grid > .empty > .nearby > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
padding: 16px;
border-bottom: 1px solid var(--bg-text-12);
}
.z-dashboard > .g-grid > .empty > .add {
padding: 0 16px;
}
.z-dashboard > .g-grid > .current-location {
padding-top: 16px;
padding-bottom: 8px;
background: #fff;
background: var(--tertiary-0);
}
.z-dashboard > .g-grid > .rating {
background: #fff;
background: var(--tertiary-0);
display: flex;
flex-direction: column;
align-items: center;
padding-bottom: 16px;
margin-bottom: 16px;
}
.z-dashboard > .g-grid > .rating > .text {
margin-top: 8px;
}
.z-dashboard > .g-grid > .rating > .action {
margin-top: 8px;
}
.z-dashboard > .g-grid > .card {
background: #fff;
background: var(--tertiary-0);
width: 100%;
box-sizing: border-box;
margin-bottom: 16px;
}
.z-dashboard > .g-grid > .card.has-padding {
padding: 16px;
}
.z-dashboard > .g-grid > .card.has-padding > .title {
padding: 0;
}
.z-dashboard > .g-grid > .card > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
padding: 16px 16px 0 16px;
margin-bottom: 16px;
}
.z-dashboard > .g-grid > .card > .view-more {
display: flex;
align-items: center;
margin-bottom: -16px;
padding: 0 16px;
}
.z-dashboard > .g-grid > .card > .view-more > .text {
color: rgba(0,0,0,0.7);
color: var(--bg-text-70);
}
.z-dashboard > .g-grid > .card > .view-more > .icon {
margin-left: auto;
padding: 16px;
}
.z-dashboard > .g-grid > .card > .weather {
border-radius: 8px;
padding: 16px 24px;
display: flex;
cursor: pointer;
}
.z-dashboard > .g-grid > .card > .weather.is-clear-day {
background-image: linear-gradient(282deg, #ffdea4, #ffc563);
}
.z-dashboard > .g-grid > .card > .weather.is-wind {
background-image: linear-gradient(119deg, #acb6e5, #86fde8);
}
.z-dashboard > .g-grid > .card > .weather.is-snow {
background-image: linear-gradient(119deg, #98c9e5, #b6fbff);
}
.z-dashboard > .g-grid > .card > .weather.is-sleet {
background-image: linear-gradient(119deg, #be94c5, #7bc6cc);
}
.z-dashboard > .g-grid > .card > .weather.is-tornado {
background-image: linear-gradient(119deg, #403a3e, #be5869);
}
.z-dashboard > .g-grid > .card > .weather.is-rain {
background-image: linear-gradient(119deg, #4ca1af, #c3e0e4);
}
.z-dashboard > .g-grid > .card > .weather.is-partly-cloudy-day {
background-image: linear-gradient(282deg, #ffdea4, #ffc563), linear-gradient(119deg, #70e1f5, #ffd194);
}
.z-dashboard > .g-grid > .card > .weather.is-fog {
background-image: linear-gradient(282deg, #ffdea4, #ffc563), linear-gradient(119deg, #767f9a, #d6dde8);
}
.z-dashboard > .g-grid > .card > .weather.is-hail {
background-image: linear-gradient(119deg, #1a2980, #25d0cd);
}
.z-dashboard > .g-grid > .card > .weather.is-cloudy {
background-image: linear-gradient(282deg, #ffdea4, #ffc563), linear-gradient(119deg, #536976, #bbd1c4);
}
.z-dashboard > .g-grid > .card > .weather.is-thunderstorm {
background-image: linear-gradient(119deg, #3c1553, #ad5389);
}
.z-dashboard > .g-grid > .card > .weather > .icon {
width: 100px;
height: 100px;
margin-left: -12px;
margin-right: 8px;
}
.z-dashboard > .g-grid > .card > .weather > .info {
color: #FFFFFF;
}
.z-dashboard > .g-grid > .card > .weather > .info > .date {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 26px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: inherit;
margin-bottom: 8px;
}
.z-dashboard > .g-grid > .card > .weather > .info > .text {
font-family: Nunito Sans;
font-size: 36.9px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: 0.25px;
text-align: center;
color: inherit;
margin-bottom: 8px;
}
.z-dashboard > .g-grid > .card > .weather > .info > .high-low,
.z-dashboard > .g-grid > .card > .weather > .info > .rain,
.z-dashboard > .g-grid > .card > .weather > .info > .wind {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
color: inherit;
display: flex;
margin-bottom: 4px;
}
.z-dashboard > .g-grid > .card > .weather > .info > .high-low > .icon,
.z-dashboard > .g-grid > .card > .weather > .info > .rain > .icon,
.z-dashboard > .g-grid > .card > .weather > .info > .wind > .icon {
margin-right: 4px;
}
.z-dashboard > .g-grid > .card > .weather > .info > .high-low > .divider,
.z-dashboard > .g-grid > .card > .weather > .info > .rain > .divider,
.z-dashboard > .g-grid > .card > .weather > .info > .wind > .divider {
margin: 0 4px;
}
.z-dashboard > .g-grid > .card > .weather > .info > .high-low > .high {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
color: inherit;
}
.z-dashboard > .g-grid > .card > .weather > .info > .high-low > .low {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
color: inherit;
}
.z-dashboard > .g-grid > .card > .weather > .info > .rain {
color: inherit;
}
.z-dashboard > .g-grid > .card > .weather > .info > .wind {
align-items: flex-start;
}
.z-dashboard > .g-grid > .card > .weather > .info > .wind > .info > .speed > .caption,
.z-dashboard > .g-grid > .card > .weather > .info > .wind > .info > .gust > .caption,
.z-dashboard > .g-grid > .card > .weather > .info > .wind > .info > .speed > .type,
.z-dashboard > .g-grid > .card > .weather > .info > .wind > .info > .gust > .type {
color: inherit;
}
.p-dashboard {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.z-stripe-form > .stored-info > .payment-errors {
font-family: Nunito Sans;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 0.4px;
color: rgba(0,0,0,0.38);
color: var(--bg-text-38);
color: #f61111;
}
@media (min-width: 1280px) {
.z-stripe-form > .stored-info > .payment-errors {
font-size: 15.2px;
}
}
.z-stripe-form > .stored-info > .edit {
font-family: Nunito Sans;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 0.4px;
color: rgba(0,0,0,0.38);
color: var(--bg-text-38);
margin-top: 8px;
cursor: pointer;
}
.z-stripe-form > .form > .payment-errors {
font-family: Nunito Sans;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 0.4px;
color: rgba(0,0,0,0.38);
color: var(--bg-text-38);
color: #f61111;
}
@media (min-width: 1280px) {
.z-stripe-form > .form > .payment-errors {
font-size: 15.2px;
}
}
.z-stripe-form > .form > .form-row {
margin: 8px 0;
}
.z-stripe-form > .form > .form-row.flex {
display: flex;
align-items: baseline;
}
.z-stripe-form > .form > .form-row.flex > .slash {
margin: 0 16px;
}
.z-donate-box {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.5px;
}
.z-donate-box > .donation-box > .thanks {
padding: 36px;
}
.z-donate-box > .donation-box > .thanks > .icon {
margin-bottom: 16px;
}
.z-donate-box > .donation-box > .thanks > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 26px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: #e64a19;
color: var(--primary-700);
text-align: center;
margin-bottom: 8px;
}
.z-donate-box > .tap-tabs {
border: 1px solid #e64a19;
border: 1px solid var(--primary-700);
border-radius: 4px;
display: flex;
max-width: 380px;
margin-bottom: 20px;
}
.z-donate-box > .tap-tabs > .tab {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
flex: 1;
min-height: 0;
cursor: pointer;
padding: 12px;
text-align: center;
text-transform: uppercase;
}
.z-donate-box > .tap-tabs > .tab:first-child {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.z-donate-box > .tap-tabs > .tab:last-child {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.z-donate-box > .tap-tabs > .tab.is-selected {
background: #e64a19;
background: var(--primary-700);
color: #fafafa;
color: var(--primary-900-text);
}
.z-donate-box > .donation-box {
border: 1px solid #e0e0e0;
border: 1px solid var(--tertiary-300);
border-radius: 4px;
}
.z-donate-box > .donation-box > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
padding: 20px;
text-align: center;
}
.z-donate-box > .donation-box > .title > .edit {
color: #e64a19;
color: var(--primary-700);
margin-left: 4px;
cursor: pointer;
}
.z-donate-box > .donation-box > .content {
background: #fff;
background: var(--tertiary-0);
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
padding: 20px;
}
.z-donate-box > .donation-box > .content > .amounts {
margin-bottom: 20px;
}
.z-donate-box > .donation-box > .content > .amounts > .amounts-line {
display: flex;
margin-bottom: 16px;
}
.z-donate-box > .donation-box > .content > .amounts > .amounts-line:last-child {
margin-bottom: 0;
}
.z-donate-box > .donation-box > .content > .amounts > .amounts-line > .amount {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
flex: 1;
min-height: 0;
min-width: 0;
padding: 16px 24px;
text-align: center;
background: #eee;
background: var(--tertiary-200);
border-radius: 4px;
margin: 0 8px;
cursor: pointer;
}
.z-donate-box > .donation-box > .content > .amounts > .amounts-line > .amount.input {
flex: 2;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: none;
border: none;
}
.z-donate-box > .donation-box > .content > .amounts > .amounts-line > .amount.input::placeholder {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
opacity: 1;
}
.z-donate-box > .donation-box > .content > .amounts > .amounts-line > .amount.is-selected {
background: #e64a19;
background: var(--primary-700);
color: #fafafa;
color: var(--primary-900-text);
}
.z-donate-box > .donation-box > .content > .amounts > .amounts-line > .amount.is-selected.input::placeholder {
color: #fafafa;
color: var(--primary-900-text);
}
.z-donate-box > .donation-box > .content > .stripe-form {
margin-top: -8px;
}
.z-donate-box > .donation-box > .content > .donate-button {
margin-top: 20px;
}
@media (min-width: 768px) {
.z-donate-box > .donation-box {
max-width: 380px;
}
}
.z-donate {
flex: 1;
min-height: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.z-donate > .top {
padding: 36px 16px;
width: 100%;
box-sizing: border-box;
}
.z-donate > .top > .art {
display: none;
}
.z-donate > .description {
background: #fff;
background: var(--tertiary-0);
padding: 36px 16px;
}
.z-donate > .description > .content {
text-align: center;
}
.z-donate > .description > .content > .title {
font-family: Nunito Sans;
font-size: 36.9px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: 0.25px;
text-align: center;
margin-bottom: 20px;
}
.z-donate > .tax-info {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
background: #4db6ac;
background: var(--secondary-300);
color: #fff;
color: var(--secondary-300-text);
padding: 36px 16px;
}
.z-donate > .tax-info > .content {
text-align: center;
}
@media (min-width: 768px) {
.z-donate > .top {
max-width: 720px;
margin: 0 auto;
padding: 72px 16px;
box-sizing: border-box;
display: flex;
align-items: center;
}
.z-donate > .top > .art {
display: block;
width: 243px;
height: 225px;
margin-left: auto;
background-image: url("https://fdn.uno/d/images/about/donation_illustration.svg");
}
.z-donate > .description > .content {
max-width: 650px;
margin: 0 auto;
padding: 76px;
}
.z-donate > .tax-info > .content {
max-width: 570px;
margin: 0 auto;
padding: 72px;
}
}
.p-donate {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.p-donate_top-right {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 1.06;
letter-spacing: 1.25px;
color: #4db6ac;
color: var(--secondary-300);
}
@media (min-width: 1280px) {
.p-donate_top-right {
font-size: 17.4px;
}
}
.z-edit-profile-about {
flex: 1;
min-height: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.z-edit-profile-about > .g-grid {
padding: 0 16px 16px 16px;
box-sizing: border-box;
}
.z-edit-profile-about > .g-grid > .section {
margin: 16px 0;
display: flex;
align-items: center;
max-width: 400px;
}
.z-edit-profile-about > .g-grid > .section > .icon {
margin-right: 32px;
}
.z-edit-profile-about > .g-grid > .section > .input {
flex: 1;
min-height: 0;
}
.z-edit-profile-about > .g-grid > .actions {
margin-top: 32px;
}
.z-edit-profile-about > .g-grid > .actions > .button {
display: inline-block;
}
.z-edit-rig-dialog_dialog > .block {
margin: 8px 0 16px 0;
}
.z-edit-rig-dialog_dialog > .block > .checkbox-label {
display: flex;
align-items: center;
}
.z-edit-rig-dialog_dialog > .block > .checkbox-label > .text {
margin-left: 8px;
}
.z-rig-info {
padding: 16px;
backrground: var(--tertiary-0);
border: 1px solid rgba(0,0,0,0.26);
border: 1px solid var(--bg-text-26);
max-width: 400px;
border-radius: 4px;
display: flex;
align-items: center;
}
.z-rig-info > .info > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
}
.z-rig-info > .edit {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 1.06;
letter-spacing: 1.25px;
color: #e64a19;
color: var(--primary-700);
cursor: pointer;
margin-left: auto;
}
@media (min-width: 1280px) {
.z-rig-info > .edit {
font-size: 17.4px;
}
}
.z-edit-profile-general {
flex: 1;
min-height: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.z-edit-profile-general > .g-grid {
padding: 0 16px 16px 16px;
box-sizing: border-box;
}
.z-edit-profile-general > .g-grid > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
margin-top: 24px;
}
.z-edit-profile-general > .g-grid > .section {
margin: 16px 0;
display: flex;
align-items: center;
max-width: 400px;
}
.z-edit-profile-general > .g-grid > .section > .icon {
margin-right: 32px;
}
.z-edit-profile-general > .g-grid > .section > .input {
flex: 1;
min-height: 0;
}
.z-edit-profile-general > .g-grid > .section > .input > .warning {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
color: #f61111;
cursor: pointer;
}
.z-edit-profile-general > .g-grid > .actions {
margin-top: 32px;
}
.z-edit-profile-general > .g-grid > .actions > .button {
display: inline-block;
}
.z-edit-profile-settings {
flex: 1;
min-height: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.z-edit-profile-settings > .g-grid {
padding: 0 16px 16px 16px;
box-sizing: border-box;
}
.z-edit-profile-settings > .g-grid > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
margin-top: 24px;
}
.z-edit-profile-settings > .g-grid > .section {
margin: 16px 0;
display: flex;
align-items: center;
max-width: 400px;
}
.z-edit-profile-settings > .g-grid > .section > .icon {
margin-right: 32px;
}
.z-edit-profile-settings > .g-grid > .section > .input {
flex: 1;
min-height: 0;
}
.z-edit-profile-settings > .g-grid > .actions {
margin-top: 32px;
}
.z-edit-profile-settings > .g-grid > .actions > .button {
display: inline-block;
}
.z-edit-profile {
flex: 1;
min-height: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.z-edit-profile > .top {
width: 100%;
display: flex;
padding: 16px;
box-sizing: border-box;
background: #fff;
background: var(--tertiary-0);
}
.z-edit-profile > .top > .avatar {
margin: auto;
width: 90px;
height: 90px;
position: relative;
}
.z-edit-profile > .top > .avatar > .edit {
width: 28px;
height: 28px;
border-radius: 50%;
border: 2px solid #4db6ac;
border: 2px solid var(--secondary-300);
position: absolute;
bottom: 0;
right: 0;
background: #fafafa;
background: var(--tertiary-50);
}
.z-edit-profile > .top > .avatar > .upload-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.p-edit-profile {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.p-edit-profile_top-right {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 1.06;
letter-spacing: 1.25px;
color: #fafafa;
color: var(--primary-900-text);
cursor: pointer;
}
@media (min-width: 1280px) {
.p-edit-profile_top-right {
font-size: 17.4px;
}
}
.z-change-place-type-dialog_dialog > .block {
margin: 8px 0 16px 0;
}
.z-duplicate-place-dialog_dialog > .block {
margin: 8px 0 16px 0;
}
.z-duplicate-place-dialog_dialog > .block > .checkbox-label {
display: flex;
align-items: center;
}
.z-duplicate-place-dialog_dialog > .block > .checkbox-label > .text {
margin-left: 8px;
}
.z-new-amenity {
flex: 1;
min-height: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.z-new-amenity > .g-grid > .or {
padding: 16px;
}
.z-new-amenity > .g-grid > .field {
padding: 16px;
display: block;
}
.z-new-amenity > .g-grid > .field > .name {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.5px;
margin-bottom: 4px;
}
.z-new-amenity > .g-grid > .amenities > .amenity > .label {
display: flex;
align-items: center;
}
.z-new-amenity > .g-grid > .amenities > .amenity > .label > .name {
margin-left: 8px;
}
.z-new-amenity > .g-grid > .amenities > .amenity > .price-input {
display: none;
width: 100px;
margin: 16px 0;
}
.z-new-amenity > .g-grid > .amenities > .amenity > .price-input.is-visible {
display: block;
}
.p-edit-place {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.z-edit-place {
flex: 1;
min-height: 0;
}
.z-edit-place > .g-grid > .actions {
padding: 16px;
display: flex;
}
.z-edit-place > .g-grid > .input {
padding: 16px;
}
.z-new-place-initial-info {
flex: 1;
min-height: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.z-new-place-initial-info > .g-grid > .field {
padding: 16px;
display: block;
}
.z-new-place-initial-info > .g-grid > .field.optional {
font-family: Nunito Sans;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 0.4px;
color: rgba(0,0,0,0.38);
color: var(--bg-text-38);
margin-top: 24px;
}
@media (min-width: 1280px) {
.z-new-place-initial-info > .g-grid > .field.optional {
font-size: 15.2px;
}
}
.z-new-place-initial-info > .g-grid > .field > .name {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.5px;
color: #e64a19;
color: var(--primary-700);
}
.z-new-place-initial-info > .g-grid > .field > .videos {
margin-top: 16px;
}
.z-new-place-initial-info > .g-grid > .field > .videos > .video {
display: flex;
align-items: center;
}
.z-new-place-initial-info > .g-grid > .field > .videos > .video > .remove {
margin-left: 8px;
}
.z-new-place-initial-info > .g-grid > .where > .form > .button {
margin-bottom: 8px;
}
.z-new-place-initial-info > .g-grid > .where > .form > .or {
text-align: center;
margin: 8px 0;
}
@media (min-width: 768px) {
.z-new-place-initial-info > .g-grid > .where > .form {
display: flex;
align-items: center;
}
.z-new-place-initial-info > .g-grid > .where > .form > .button {
margin-right: 8px;
}
.z-new-place-initial-info > .g-grid > .where > .form > .input {
flex: 1;
min-height: 0;
max-width: 360px;
}
.z-new-place-initial-info > .g-grid > .where > .form > .or {
margin: 0 16px;
}
}
.p-edit-check-in {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.z-new-trip {
flex: 1;
min-height: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.z-new-trip > .g-grid > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
margin-top: 32px;
padding: 0 16px;
}
.z-new-trip > .g-grid > .photos {
padding: 0 24px;
margin-top: 24px;
margin-left: 0;
box-sizing: border-box;
max-width: 640px;
}
.z-new-trip > .g-grid > .photos > .g-cols > .g-col {
margin-bottom: 24px;
}
.z-new-trip > .g-grid > .photos > .g-cols > .g-col:nth-child(3n + 2) > .photo {
margin: 0 auto;
}
.z-new-trip > .g-grid > .photos > .g-cols > .g-col:nth-child(3n + 3) > .photo {
margin-left: auto;
}
.z-new-trip > .g-grid > .photos > .g-cols > .g-col > .photo {
width: 90px;
height: 90px;
border-radius: 50%;
background-size: 90px;
background-position: center;
background-color: #fff;
background-color: var(--tertiary-0);
display: flex;
position: relative;
}
.z-new-trip > .g-grid > .photos > .g-cols > .g-col > .photo.is-selected {
border: 4px solid #4db6ac;
border: 4px solid var(--secondary-300);
}
.z-new-trip > .g-grid > .photos > .g-cols > .g-col > .photo.upload {
position: relative;
background-size: cover;
}
.z-new-trip > .g-grid > .photos > .g-cols > .g-col > .photo.upload.rotate-180 {
transform: rotate(180deg);
}
.z-new-trip > .g-grid > .photos > .g-cols > .g-col > .photo.upload.rotate-90 {
transform: rotate(90deg);
}
.z-new-trip > .g-grid > .photos > .g-cols > .g-col > .photo.upload.rotate-270 {
transform: rotate(270deg);
}
.z-new-trip > .g-grid > .photos > .g-cols > .g-col > .photo > .edit {
width: 28px;
height: 28px;
border-radius: 50%;
border: 2px solid #4db6ac;
border: 2px solid var(--secondary-300);
position: absolute;
bottom: 0;
right: 0;
background: #fafafa;
background: var(--tertiary-50);
}
.z-new-trip > .g-grid > .photos > .g-cols > .g-col > .photo > .upload-overlay,
.z-new-trip > .g-grid > .photos > .g-cols > .g-col > .photo > .edit > .upload-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: $zIndexUploadOverlay;
}
.z-new-trip > .g-grid > .field {
padding: 16px;
display: block;
}
.z-new-trip > .g-grid > .field > .name {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.5px;
margin-bottom: 4px;
}
.z-new-trip > .g-grid > .actions {
max-width: 260px;
margin: 0 auto;
padding: 16px;
margin-top: 24px;
}
.p-edit-trip {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.z-edit-trip-settings {
flex: 1;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.z-edit-trip-settings > .content {
padding: 16px;
}
.z-edit-trip-settings > .content > .g-grid > .field {
margin-bottom: 22px;
}
.z-edit-trip-settings > .content > .g-grid > .field > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
margin-bottom: 8px;
}
.z-edit-trip-settings > .content > .g-grid > .field > .content {
display: flex;
}
.z-edit-trip-settings > .content > .g-grid > .field > .content > .description {
font-family: Nunito Sans;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 0.4px;
color: rgba(0,0,0,0.38);
color: var(--bg-text-38);
}
@media (min-width: 1280px) {
.z-edit-trip-settings > .content > .g-grid > .field > .content > .description {
font-size: 15.2px;
}
}
.z-edit-trip-settings > .content > .g-grid > .field > .content > .input {
margin-left: auto;
}
.z-edit-trip-settings > .content > .g-grid > .field > .extras {
display: flex;
margin-top: 16px;
align-items: center;
}
.z-edit-trip-settings > .content > .g-grid > .field > .extras > .short-input {
max-width: 100px;
margin-right: 16px;
}
.z-edit-trip-settings > .content > .g-grid > .field > .extras > .dash {
margin-right: 16px;
}
.p-edit-trip-settings {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.z-share-map-dialog_dialog > .content > .preview {
width: 100%;
}
.z-share-map-dialog_dialog > .content > .actions > .action {
cursor: pointer;
display: block;
padding: 8px;
border-radius: 8px;
background: #fff;
background: var(--tertiary-0);
border: 1px solid rgba(0,0,0,0.12);
border: 1px solid var(--bg-text-12);
margin-bottom: 8px;
}
.z-travel-map {
flex: 1;
min-height: 0;
display: flex;
position: relative;
}
.z-travel-map.has-stats > .stats {
display: block;
}
.z-travel-map > .stats {
position: absolute;
display: none;
width: 100%;
padding: 4px 8px;
background: rgba(255, 255, 255, 0.70);
box-sizing: border-box;
}
.z-travel-map > .stats > .g-grid {
display: flex;
}
.z-travel-map > .stats > .g-grid > .distance {
margin-left: auto;
}
.z-elevation-chart {
width: 100%;
height: 100%;
position: relative;
}
.z-elevation-chart > svg {
position: absolute;
top: 0;
left: 0;
}
.z-elevation-chart > svg > text {
font-family: Nunito Sans;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 0.4px;
color: rgba(0,0,0,0.38);
color: var(--bg-text-38);
}
@media (min-width: 1280px) {
.z-elevation-chart > svg > text {
font-size: 15.2px;
}
}
.z-edit-trip-route-info-elevation {
flex: 1;
min-height: 0;
max-width: 400px;
margin: 0 auto;
}
.z-edit-trip-route-info-elevation > .elevations {
display: flex;
padding: 16px 16px 0 16px;
}
.z-edit-trip-route-info-elevation > .elevations > .main,
.z-edit-trip-route-info-elevation > .elevations > .alt {
display: flex;
align-items: center;
}
.z-edit-trip-route-info-elevation > .elevations > .main.alt,
.z-edit-trip-route-info-elevation > .elevations > .alt.alt {
margin-left: auto;
}
.z-edit-trip-route-info-elevation > .elevations > .main > .icon,
.z-edit-trip-route-info-elevation > .elevations > .alt > .icon {
margin-right: 4px;
}
.z-edit-trip-route-info-elevation > .elevations > .main > .text,
.z-edit-trip-route-info-elevation > .elevations > .alt > .text {
font-family: Nunito Sans;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 0.4px;
color: rgba(0,0,0,0.38);
color: var(--bg-text-38);
margin-right: 16px;
}
@media (min-width: 1280px) {
.z-edit-trip-route-info-elevation > .elevations > .main > .text,
.z-edit-trip-route-info-elevation > .elevations > .alt > .text {
font-size: 15.2px;
}
}
.z-edit-trip-route-info-elevation > .chart {
height: 120px;
}
.z-edit-trip-route-info-settings {
flex: 1;
min-height: 0;
padding: 8px 16px 4px 16px;
}
.z-edit-trip-route-info-settings > .field {
margin-bottom: 8px;
}
.z-edit-trip-route-info-settings > .field > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
margin-bottom: 4px;
}
.z-edit-trip-route-info-settings > .field > .content {
display: flex;
}
.z-edit-trip-route-info-settings > .field > .content > .description {
font-family: Nunito Sans;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 0.4px;
color: rgba(0,0,0,0.38);
color: var(--bg-text-38);
}
@media (min-width: 1280px) {
.z-edit-trip-route-info-settings > .field > .content > .description {
font-size: 15.2px;
}
}
.z-edit-trip-route-info-settings > .field > .content > .input {
margin-left: auto;
}
.z-google-maps-warning-dialog_dialog > .block {
margin: 8px 0;
}
.z-navigate-sheet_sheet {
padding-bottom: 16px;
}
.z-navigate-sheet_sheet > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
padding: 0 16px 8px 16px;
color: #e64a19;
color: var(--primary-700);
}
.z-navigate-sheet_sheet > .item {
display: flex;
padding: 16px;
align-items: center;
-webkit-tap-highlight-color: $transparent;
cursor: pointer;
}
.z-navigate-sheet_sheet > .item > .icon {
display: flex;
margin-right: 24px;
}
.z-navigate-sheet_sheet > .item > .text {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
}
.z-edit-trip-route-info {
position: absolute;
z-index: 9999;
bottom: 0;
left: 0;
width: 100%;
height: 358px;
transform: translateY(316px);
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.z-edit-trip-route-info.is-open {
background: #fff;
background: var(--tertiary-0);
transform: translateY(0);
}
.z-edit-trip-route-info.is-open > .header {
padding: 4px 16px;
background: #fff;
background: var(--tertiary-0);
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
}
.z-edit-trip-route-info.is-open > .header > .close-icon {
top: 4px;
}
.z-edit-trip-route-info > .header {
display: flex;
align-items: center;
justify-content: center;
padding: 8px 16px;
height: 42px;
box-sizing: border-box;
position: relative;
cursor: pointer;
background: #e64a19;
background: var(--primary-700);
color: #fafafa;
color: var(--primary-900-text);
}
.z-edit-trip-route-info > .header > .close-icon {
position: absolute;
top: 8px;
right: 16px;
}
.z-edit-trip-route-info > .header > .icon {
margin-left: 8px;
}
.z-edit-trip-route-info > .stats {
display: flex;
padding: 0 16px;
justify-content: center;
}
.z-edit-trip-route-info > .stats > .main.main,
.z-edit-trip-route-info > .stats > .alt.main {
color: #00796b;
color: var(--secondary-700);
}
.z-edit-trip-route-info > .stats > .main.main > .distance-time > .distance > .number,
.z-edit-trip-route-info > .stats > .alt.main > .distance-time > .distance > .number,
.z-edit-trip-route-info > .stats > .main.main > .distance-time > .time > .number,
.z-edit-trip-route-info > .stats > .alt.main > .distance-time > .time > .number {
color: #00796b;
color: var(--secondary-700);
}
.z-edit-trip-route-info > .stats > .main.alt,
.z-edit-trip-route-info > .stats > .alt.alt {
color: rgba(0, 0, 0, 0.54);
margin-left: auto;
}
.z-edit-trip-route-info > .stats > .main.alt > .distance-time > .distance > .number,
.z-edit-trip-route-info > .stats > .alt.alt > .distance-time > .distance > .number,
.z-edit-trip-route-info > .stats > .main.alt > .distance-time > .time > .number,
.z-edit-trip-route-info > .stats > .alt.alt > .distance-time > .time > .number {
color: rgba(0, 0, 0, 0.54);
}
.z-edit-trip-route-info > .stats > .main > .distance-time,
.z-edit-trip-route-info > .stats > .alt > .distance-time {
display: flex;
}
.z-edit-trip-route-info > .stats > .main > .distance-time > .distance,
.z-edit-trip-route-info > .stats > .alt > .distance-time > .distance,
.z-edit-trip-route-info > .stats > .main > .distance-time > .time,
.z-edit-trip-route-info > .stats > .alt > .distance-time > .time {
display: flex;
align-items: flex-end;
}
.z-edit-trip-route-info > .stats > .main > .distance-time > .distance > .number,
.z-edit-trip-route-info > .stats > .alt > .distance-time > .distance > .number,
.z-edit-trip-route-info > .stats > .main > .distance-time > .time > .number,
.z-edit-trip-route-info > .stats > .alt > .distance-time > .time > .number {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
margin-right: 4px;
}
.z-edit-trip-route-info > .stats > .main > .distance-time > .time,
.z-edit-trip-route-info > .stats > .alt > .distance-time > .time {
margin-left: 24px;
}
.z-edit-trip-route-info > .actions {
padding: 8px 16px;
}
@media (min-width: 768px) {
.z-edit-trip-route-info {
position: fixed;
bottom: 8px;
left: auto;
right: 8px;
width: 400px;
height: 400px;
transform: translateY(358px);
}
}
.z-clearance-warning-dialog_dialog > .block {
margin: 8px 0;
}
.z-overnight-warning-dialog_dialog > .block {
margin: 8px 0;
}
.z-places {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.z-places > .fab {
position: fixed;
bottom: 72px;
right: 16px;
z-index: 50;
}
@media (min-width: 1280px) {
.z-places > .fab {
bottom: 16px;
}
}
.p-edit-trip-add-stop {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.p-edit-trip-add-stop.has-trip-route {
padding-bottom: 42px;
}
@media (min-width: 768px) {
.p-edit-trip-add-stop.has-trip-route {
padding-bottom: 0;
}
}
.z-new-review-compose {
flex: 1;
min-height: 0;
width: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
display: flex;
flex-direction: column;
}
.z-new-review-compose > .g-grid {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
min-height: -webkit-min-content;
min-height: -moz-min-content;
min-height: min-content;
}
.z-new-review-compose > .g-grid > .rating {
padding: 16px;
}
.z-new-review-compose > .g-grid > .title {
width: 100%;
background: transparent;
padding: 16px;
margin: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
outline: none;
}
.z-new-review-compose > .g-grid > .title::placeholder {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.5px;
color: rgba(0,0,0,0.54);
color: var(--bg-text-54);
opacity: 1;
}
.z-new-review-compose > .g-grid > .textarea {
flex: 1;
min-height: 0;
min-height: 150px;
}
.z-new-review-compose > .g-grid > .attachments {
padding: 16px;
white-space: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.z-new-review-compose > .g-grid > .attachments > .attachment {
width: 64px;
height: 64px;
margin-left: 8px;
background-size: cover;
background-position: center;
display: inline-block;
vertical-align: top;
}
.z-new-review-compose > .g-grid > .attachments > .attachment > .progress {
display: none;
}
.z-new-review-compose > .g-grid > .attachments > .attachment.is-uploading {
opacity: 0.7;
}
.z-new-review-compose > .g-grid > .attachments > .attachment.is-uploading > .progress {
display: block;
height: 100%;
background: #e64a19;
background: var(--primary-700);
opacity: 0.54;
}
.z-new-review-compose > .g-grid > .divider {
width: 100%;
height: 1px;
background: rgba(0,0,0,0.12);
background: var(--bg-text-12);
margin: 0;
}
.z-new-place-review {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.z-dropdown-multiple {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.5px;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
min-height: 48px;
display: block;
outline: none;
text-align: inherit;
position: relative;
max-width: 360px;
cursor: pointer;
}
.z-dropdown-multiple.is-open > .wrapper {
display: block;
}
.z-dropdown-multiple.is-open > .current {
border-bottom: 1px solid var(--primary-700);
}
.z-dropdown-multiple.is-open > .current > .arrow {
border-top: none;
border-bottom: 5px solid var(--primary-700);
}
.z-dropdown-multiple.is-open > .options {
display: block;
}
.z-dropdown-multiple > .wrapper {
display: none;
position: fixed;
z-index: 2;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.z-dropdown-multiple > .current {
color: rgba(0,0,0,0.7);
color: var(--bg-text);
border-bottom: 1px solid var(--bg-text);
padding: 8px 0;
}
.z-dropdown-multiple > .current > .arrow {
position: absolute;
bottom: 24px;
right: 4px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid var(--primary-700);
}
.z-dropdown-multiple > .options {
transition: box-shadow 0.25s;
box-shadow: 0 1px 4px 0 rgba(0,0,0,0.12);
position: absolute;
z-index: 2;
background: #fff;
background: var(--tertiary-0);
width: 100%;
box-sizing: border-box;
cursor: pointer;
display: none;
}
.z-dropdown-multiple > .options > .option {
padding: 16px;
display: flex;
align-items: center;
color: rgba(0,0,0,0.7);
color: var(--bg-text);
}
.z-dropdown-multiple > .options > .option > .checkbox {
margin-left: auto;
}
.z-dropdown-multiple > .error {
font-family: Nunito Sans;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 0.4px;
color: rgba(0,0,0,0.38);
color: var(--bg-text-38);
color: #f61111;
margin-top: 8px;
position: absolute;
pointer-events: none;
background: transparent;
}
@media (min-width: 1280px) {
.z-dropdown-multiple > .error {
font-size: 15.2px;
}
}
.z-dropdown-multiple.is-focused > .underline {
height: 2px;
}
.z-dropdown-multiple.is-error > .underline {
background: #f61111;
}
.z-dropdown-multiple.is-disabled > .underline {
background: none;
border-bottom: 1px dashed #757575;
}
.z-place-new-review-extras {
flex: 1;
min-height: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.z-place-new-review-extras > .g-grid > .field,
.z-place-new-review-extras > .g-grid > .g-grid > .g-cols > .g-col > .field {
padding: 16px;
display: block;
}
.z-place-new-review-extras > .g-grid > .field > .name,
.z-place-new-review-extras > .g-grid > .g-grid > .g-cols > .g-col > .field > .name {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 11px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.45;
letter-spacing: 0.34px;
margin-bottom: 4px;
}
@media (min-width: 1280px) {
.z-place-new-review-extras > .g-grid > .field > .name,
.z-place-new-review-extras > .g-grid > .g-grid > .g-cols > .g-col > .field > .name {
font-size: 13px;
}
}
.z-place-new-review-extras > .g-grid > .when > .seasons,
.z-place-new-review-extras > .g-grid > .g-grid > .g-cols > .g-col > .when > .seasons {
display: flex;
}
.z-place-new-review-extras > .g-grid > .when > .seasons > .season,
.z-place-new-review-extras > .g-grid > .g-grid > .g-cols > .g-col > .when > .seasons > .season {
flex: 1;
min-height: 0;
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
color: #FFFFFF;
cursor: pointer;
text-align: center;
padding: 16px;
border-radius: 8px;
background: #aaa;
border: 6px solid #fff;
border: 6px solid var(--tertiary-0);
}
.z-place-new-review-extras > .g-grid > .when > .seasons > .season.spring,
.z-place-new-review-extras > .g-grid > .g-grid > .g-cols > .g-col > .when > .seasons > .season.spring {
background: url("https://fdn.uno/d/images/patterns/green.png");
}
.z-place-new-review-extras > .g-grid > .when > .seasons > .season.summer,
.z-place-new-review-extras > .g-grid > .g-grid > .g-cols > .g-col > .when > .seasons > .season.summer {
background: url("https://fdn.uno/d/images/patterns/yellow.png");
}
.z-place-new-review-extras > .g-grid > .when > .seasons > .season.fall,
.z-place-new-review-extras > .g-grid > .g-grid > .g-cols > .g-col > .when > .seasons > .season.fall {
background: url("https://fdn.uno/d/images/patterns/orange.png");
}
.z-place-new-review-extras > .g-grid > .when > .seasons > .season.winter,
.z-place-new-review-extras > .g-grid > .g-grid > .g-cols > .g-col > .when > .seasons > .season.winter {
background: url("https://fdn.uno/d/images/patterns/blue.png");
}
.z-place-new-review-extras > .g-grid > .when > .seasons > .season.is-selected,
.z-place-new-review-extras > .g-grid > .g-grid > .g-cols > .g-col > .when > .seasons > .season.is-selected {
border: 6px solid rgba(0,0,0,0.26);
border: 6px solid var(--bg-text-26);
position: relative;
}
.z-place-new-review-extras > .g-grid > .when > .seasons > .season.is-selected:before,
.z-place-new-review-extras > .g-grid > .g-grid > .g-cols > .g-col > .when > .seasons > .season.is-selected:before {
content: '';
position: absolute;
z-index: 1;
top: -4px;
left: -4px;
right: -4px;
bottom: -4px;
border: 4px solid #fff;
border: 4px solid var(--tertiary-0);
border-radius: 6px;
}
.p-edit-place-review {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.z-compose {
flex: 1;
min-height: 0;
width: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
display: flex;
flex-direction: column;
}
.z-compose > .g-grid {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.z-compose > .g-grid > .title {
width: 100%;
background: transparent;
padding: 16px;
margin: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
outline: none;
}
.z-compose > .g-grid > .title::placeholder {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.5px;
color: rgba(0,0,0,0.54);
color: var(--bg-text-54);
}
.z-compose > .g-grid > .textarea {
flex: 1;
min-height: 0;
}
.z-compose > .g-grid > .divider {
width: 100%;
height: 1px;
background: rgba(0,0,0,0.12);
background: var(--bg-text-12);
margin: 0;
}
.z-new-thread {
flex: 1;
min-height: 0;
width: 100%;
display: flex;
flex-direction: column;
}
.p-edit-thread {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.z-event {
flex: 1;
min-height: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
background: #fff;
background: var(--tertiary-0);
}
.z-event.is-image-loaded > .cover {
opacity: 1;
transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.z-event > .cover {
width: 100%;
height: 200px;
background-size: cover;
background-position: center;
position: relative;
opacity: 0;
}
.z-event > .g-grid {
padding: 16px;
box-sizing: border-box;
}
.z-event > .g-grid > .name {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 26px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
margin-bottom: 16px;
}
.z-event > .g-grid > .info > .section {
display: flex;
align-items: center;
margin-bottom: 16px;
}
.z-event > .g-grid > .info > .section > .text {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
margin-left: 16px;
overflow: hidden;
text-overflow: ellipsis;
}
.z-event > .g-grid > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
}
.z-event > .g-grid > .details {
margin-top: 8px;
}
.p-event {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.p-event_top-right {
display: flex;
}
.z-event-list > .event {
display: block;
padding: 16px 20px;
border-bottom: 1px solid var(--tertiary-200);
}
.z-event-list > .event > .g-grid {
display: flex;
}
.z-event-list > .event > .g-grid > .image {
width: 100px;
height: 78px;
margin-right: 16px;
border-radius: 4px;
background-size: 100%;
}
.z-event-list > .event > .g-grid > .content > .name {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
}
.z-event-list > .event > .g-grid > .content > .info {
font-family: Nunito Sans;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 0.4px;
color: rgba(0,0,0,0.38);
color: var(--bg-text-38);
}
@media (min-width: 1280px) {
.z-event-list > .event > .g-grid > .content > .info {
font-size: 15.2px;
}
}
.p-events {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.p-events > .events {
flex: 1;
min-height: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.z-giveaway {
flex: 1;
min-height: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
padding: 16px;
}
.z-giveaway > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
}
.z-giveaway > .description > .time-left {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
}
.z-giveaway > .entries {
margin-top: 24px;
}
.z-giveaway > .entries > .title {
margin-bottom: 8px;
}
.z-giveaway > .entries > .entry {
display: flex;
max-width: 250px;
}
.z-giveaway > .entries > .entry.total {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
}
.z-giveaway > .entries > .entry > .count {
margin-left: auto;
}
.p-about {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.z-group-edit-channel {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
padding: 16px;
}
.z-group-edit-channel > .g-grid > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
color: #e64a19;
color: var(--primary-700);
padding: 14px 0;
}
.z-group-edit-channel > .g-grid > .input {
margin-bottom: 8px;
}
.z-group-edit-channel > .g-grid > .input > .label {
display: flex;
margin-top: 16px;
}
.z-group-edit-channel > .g-grid > .input > .label > .text {
flex: 1;
min-height: 0;
}
.z-group-edit-channel > .g-grid > .actions {
display: flex;
justify-content: flex-end;
margin-top: 16px;
}
.z-group-edit-channel > .g-grid > .actions > .save-button {
margin-left: 8px;
}
.p-group-add-channel {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.z-group-app {
flex: 1;
min-height: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
padding: 16px;
}
.z-group-app > .open-in-app > .text {
font-family: Nunito Sans;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 0.4px;
color: rgba(0,0,0,0.38);
color: var(--bg-text-38);
margin-bottom: 8px;
text-align: center;
}
@media (min-width: 1280px) {
.z-group-app > .open-in-app > .text {
font-size: 15.2px;
}
}
.z-group-app > .or {
font-family: Nunito Sans;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 0.4px;
color: rgba(0,0,0,0.38);
color: var(--bg-text-38);
margin: 12px 0;
text-align: center;
}
@media (min-width: 1280px) {
.z-group-app > .or {
font-size: 15.2px;
}
}
.z-group-app > .dont-have {
margin-top: 40px;
}
.z-group-app > .dont-have > .text {
font-family: Nunito Sans;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 0.4px;
color: rgba(0,0,0,0.38);
color: var(--bg-text-38);
margin-bottom: 8px;
text-align: center;
}
@media (min-width: 1280px) {
.z-group-app > .dont-have > .text {
font-size: 15.2px;
}
}
.z-group-app > .dont-have > .badge {
display: block;
width: 135px;
height: 40px;
background-size: 100%;
margin: 0 auto;
cursor: pointer;
margin-bottom: 16px;
}
.z-group-app > .dont-have > .badge.ios {
background-image: url("https://fdn.uno/d/images/app_store.svg");
}
.z-group-app > .dont-have > .badge.android {
background-image: url("https://fdn.uno/d/images/google_play.svg");
}
.p-group-app {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.z-group-audit-log {
flex: 1;
min-height: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
padding: 16px;
}
.z-group-audit-log > .g-grid > .logs {
margin: 0;
padding: 0;
list-style-type: none;
max-width: 800px;
margin-top: 16px;
}
.z-group-audit-log > .g-grid > .logs > .log {
background: #eee;
background: var(--tertiary-200);
display: flex;
align-items: center;
padding: 16px;
margin-bottom: 2px;
}
.z-group-audit-log > .g-grid > .logs > .log > .avatar {
margin-right: 16px;
}
.z-group-audit-log > .g-grid > .logs > .log > .text {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.5px;
color: rgba(0,0,0,0.7);
color: var(--bg-text);
}
.z-group-audit-log > .g-grid > .logs > .log > .text > .time {
font-family: Nunito Sans;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 0.4px;
color: rgba(0,0,0,0.38);
color: var(--bg-text-38);
}
.p-group-audit-log {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.z-group-banned-users {
width: 100%;
padding: 16px;
flex: 1;
min-height: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.z-group-banned-users > .g-grid > .user {
display: flex;
padding: 10px 0;
cursor: pointer;
}
.z-group-banned-users > .g-grid > .user > .avatar {
margin-right: 16px;
}
.z-group-banned-users > .g-grid > .user > .right {
padding: 0 16px 20px 0;
flex: 1;
min-height: 0;
border-bottom: 1px solid var(--bg-text-12);
}
.z-group-banned-users > .g-grid > .user > .right > .name {
font-weight: 600;
margin-bottom: 8px;
}
.z-group-banned-users > .g-grid > .user > .right > .banned,
.z-group-banned-users > .g-grid > .user > .right > .reason {
font-weight: 400;
}
.p-group-banned-users {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.z-group-chat {
flex: 1;
min-height: 0;
display: flex;
min-width: 0;
flex-direction: column;
position: relative;
}
.z-channel-list {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.z-channel-list > .channel {
padding: 12px 16px;
display: flex;
align-items: flex-start;
cursor: pointer;
}
.z-channel-list > .channel.is-selected {
background: #fbe9e7;
background: var(--primary-50);
}
.z-channel-list > .channel > .hashtag {
margin-right: 24px;
}
.z-channel-list > .channel > .info > .name {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.32;
letter-spacing: 0.1px;
color: rgba(0,0,0,0.7);
color: var(--bg-text);
}
.z-channel-list > .channel > .info > .name > .notifications {
font-family: Nunito Sans;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 0.4px;
color: rgba(0,0,0,0.38);
color: var(--bg-text-38);
display: inline-block;
margin-left: 8px;
padding: 0 8px;
background: #e64a19;
background: var(--primary-700);
color: #fafafa;
color: var(--primary-900-text);
border-radius: 2px;
}
@media (min-width: 1280px) {
.z-channel-list > .channel > .info > .name > .notifications {
font-size: 15.2px;
}
}
.z-channel-list > .channel > .info > .description {
font-family: Nunito Sans;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 0.4px;
color: rgba(0,0,0,0.38);
color: var(--bg-text-38);
color: rgba(0,0,0,0.54);
color: var(--bg-text-54);
}
@media (min-width: 1280px) {
.z-channel-list > .channel > .info > .description {
font-size: 15.2px;
}
}
.z-channel-drawer_drawer {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.z-channel-drawer_drawer > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
padding: 16px;
}
.z-channel-drawer_drawer > .divider {
width: 100%;
height: 1px;
background: rgba(0,0,0,0.12);
background: var(--bg-text-12);
margin: 8px 0;
}
.z-channel-drawer_drawer > .manage-channels {
padding: 16px;
display: flex;
align-items: center;
cursor: pointer;
}
.z-channel-drawer_drawer > .manage-channels > .text {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.5px;
margin-left: 16px;
}
.z-group-user-settings-dialog_dialog > .title,
.z-group-user-settings-dialog_dialog > .links > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
color: #e64a19;
color: var(--primary-700);
margin-bottom: 8px;
}
.z-group-user-settings-dialog_dialog > .links {
margin-bottom: 16px;
}
.z-group-user-settings-dialog_dialog > .list,
.z-group-user-settings-dialog_dialog > .links > .list {
margin: 0;
padding: 0;
list-style-type: none;
}
.z-group-user-settings-dialog_dialog > .list > .item,
.z-group-user-settings-dialog_dialog > .links > .list > .item {
display: flex;
align-items: center;
padding: 16px 0;
cursor: pointer;
}
.z-group-user-settings-dialog_dialog > .list > .item.link,
.z-group-user-settings-dialog_dialog > .links > .list > .item.link {
padding: 8px 0;
}
.z-group-user-settings-dialog_dialog > .list > .item > .icon,
.z-group-user-settings-dialog_dialog > .links > .list > .item > .icon {
margin-right: 30px;
}
.z-group-user-settings-dialog_dialog > .list > .item > .text,
.z-group-user-settings-dialog_dialog > .links > .list > .item > .text {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.5px;
color: rgba(0,0,0,0.7);
color: var(--bg-text);
}
.z-group-user-settings-dialog_dialog > .list > .item > .toggle,
.z-group-user-settings-dialog_dialog > .links > .list > .item > .toggle {
margin-left: auto;
}
.p-group-chat {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.p-group-chat.should-show-bottom-bar {
position: fixed;
width: 100%;
height: 100%;
top: 0;
}
.p-group-chat.should-show-bottom-bar > .content {
position: relative;
margin-top: -64px;
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.p-group-chat > .content {
flex: 1;
min-height: 0;
display: flex;
}
.p-group-chat > .overlay {
position: fixed;
z-index: 999999;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.p-group-chat_top-right {
display: flex;
}
@media (min-width: 768px) {
.p-group-chat_top-right > .channels-icon {
display: none;
}
}
.p-group-chat_title {
padding: 12px;
margin-left: -12px;
position: relative;
}
.p-group-chat_title > .group {
font-family: Nunito Sans;
font-size: 8px;
color: rgba(0,0,0,0.54);
color: var(--bg-text-54);
text-transform: uppercase;
font-weight: 400;
line-height: 1.25;
color: undefined;
color: var(--header-500-text54);
margin-bottom: 2px;
}
@media (min-width: 1280px) {
.p-group-chat_title > .group {
font-size: 10px;
}
}
.z-group-role-permissions {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
padding: 16px 16px 92px 16px;
}
.z-group-role-permissions > .g-grid > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
color: #e64a19;
color: var(--primary-700);
padding: 14px 0;
}
.z-group-role-permissions > .g-grid > .label {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
display: flex;
align-items: center;
}
.z-group-role-permissions > .g-grid > .label > .dropdown {
margin-left: 8px;
}
.z-group-role-permissions > .g-grid > .list {
margin: 0;
padding: 0;
list-style-type: none;
max-width: 800px;
margin-top: 16px;
}
.z-group-role-permissions > .g-grid > .list > .item {
background: #eee;
background: var(--tertiary-200);
display: flex;
align-items: center;
padding: 16px;
margin-bottom: 2px;
}
.z-group-role-permissions > .g-grid > .list > .item > .icon {
margin-right: 30px;
}
.z-group-role-permissions > .g-grid > .list > .item > .text {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.5px;
color: rgba(0,0,0,0.7);
color: var(--bg-text);
}
.z-group-role-permissions > .g-grid > .list > .item > .toggle {
margin-left: auto;
}
.z-group-role-permissions > .g-grid > .delete-button {
display: inline-block;
margin-top: 16px;
}
.z-group-role-permissions > .g-grid > .actions {
display: flex;
justify-content: flex-end;
margin-top: 16px;
max-width: 800px;
}
.z-group-role-permissions > .g-grid > .actions > .save-button {
margin-left: 8px;
}
.z-group-edit-channel-permissions {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.z-group-edit-channel-permissions > .g-grid > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
color: #e64a19;
color: var(--primary-700);
padding: 14px 0;
}
.z-group-edit-channel-permissions > .g-grid > .list {
margin: 0;
padding: 0;
list-style-type: none;
max-width: 600px;
}
.z-group-edit-channel-permissions > .g-grid > .list > .item {
display: flex;
align-items: center;
padding: 16px;
cursor: pointer;
}
.z-group-edit-channel-permissions > .g-grid > .list > .item > .icon {
margin-right: 30px;
}
.z-group-edit-channel-permissions > .g-grid > .list > .item > .text {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.5px;
color: rgba(0,0,0,0.7);
color: var(--bg-text);
}
.z-group-edit-channel-permissions > .g-grid > .list > .item > .toggle {
margin-left: auto;
}
.z-group-edit-channel-permissions > .g-grid > .actions {
display: flex;
justify-content: flex-end;
margin-top: 16px;
max-width: 600px;
}
.z-group-edit-channel-permissions > .g-grid > .actions > .save-button {
margin-left: 8px;
}
.p-group-edit-channel {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.z-thread-preview {
width: 100%;
text-align: center;
}
.z-thread-preview > .image {
width: 100%;
height: auto;
}
.z-thread-list-item {
width: 100%;
box-sizing: border-box;
display: block;
}
.z-thread-list-item.has-padding {
padding: 8px 16px;
border-bottom: 1px solid var(--tertiary-200);
}
.z-thread-list-item.is-image-loaded {
opacity: 1;
transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.z-thread-list-item.is-image-loaded > .content > .image {
opacity: 1 !important;
transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.z-thread-list-item.is-pinned.z-thread-list-item.has-padding {
border-left: 4px solid var(--primary-700);
}
.z-thread-list-item > .content {
display: flex;
flex: 1;
min-height: 0;
}
.z-thread-list-item > .content > .image {
background-size: cover;
background-position: center;
width: 70px;
height: 70px;
margin-right: 16px;
opacity: 0;
flex-shrink: 0;
}
.z-thread-list-item > .content > .text-icon {
background: #e64a19;
background: var(--primary-700);
width: 70px;
height: 70px;
margin-right: 16px;
}
.z-thread-list-item > .content > .icon {
width: 34px;
margin-right: 16px;
}
.z-thread-list-item > .content > .info {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
min-width: 0;
}
.z-thread-list-item > .content > .info > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
word-break: break-word;
}
.z-thread-list-item > .content > .info > .bottom {
margin-top: auto;
}
.z-thread-list-item > .content > .info > .bottom > .author {
font-family: Nunito Sans;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 0.4px;
color: rgba(0,0,0,0.38);
color: var(--bg-text-38);
display: flex;
align-items: center;
}
.z-thread-list-item > .content > .info > .bottom > .author > .name {
whitespace: nowrap;
text-overflow: ellipsis;
overflow: hidden;
max-width: 25%;
}
.z-thread-list-item > .content > .info > .bottom > .author > .icon {
margin-left: 4px;
}
.z-thread-list-item > .content > .info > .bottom > .author > .middot {
margin: 0 4px;
}
.z-thread-list-item > .content > .info > .bottom > .author > .time {
margin-right: 8px;
}
.z-thread-list-item > .content > .info > .bottom > .author > .comments {
margin-left: auto;
}
.z-thread-list-item > .content > .info > .bottom > .author > .comments,
.z-thread-list-item > .content > .info > .bottom > .author > .points {
display: flex;
align-items: center;
}
.z-thread-list-item > .content > .info > .bottom > .author > .comments > .icon,
.z-thread-list-item > .content > .info > .bottom > .author > .points > .icon {
margin: 0 8px;
}
.z-thread-list-item > .preview {
width: 100%;
margin-top: 8px;
}
.z-threads {
flex: 1;
min-height: 0;
width: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
box-sizing: border-box;
will-change: transform;
}
.z-threads > .no-threads {
text-align: center;
padding: 16px;
}
.z-threads > .g-grid {
margin-top: 4px;
padding-bottom: 48px;
position: relative;
min-height: 100%;
}
.z-threads > .g-grid > .loading {
position: absolute;
width: 100%;
left: 0;
bottom: 16px;
}
.z-threads > .g-grid > .user-of-week {
background: #bf360c;
background: var(--primary-900);
padding: 8px;
margin: 16px;
border-radius: 2px;
}
.z-threads > .g-grid > .user-of-week > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 1.06;
letter-spacing: 1.25px;
}
@media (min-width: 1280px) {
.z-threads > .g-grid > .user-of-week > .title {
font-size: 17.4px;
}
}
.z-threads > .g-grid > .columns {
display: flex;
}
.z-threads > .g-grid > .columns > .column {
flex: 1;
min-height: 0;
margin: 0 8px;
}
.z-threads > .g-grid > .columns > .column:first-child {
margin-left: 0;
}
.z-threads > .g-grid > .columns > .column:last-child {
margin-right: 0;
}
.z-filter-threads-dialog_dialog > .subhead {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
color: #e64a19;
color: var(--primary-700);
margin-top: 16px;
}
.z-filter-threads-dialog_dialog > .subhead:first-child {
margin-top: 0;
}
.z-filter-threads-dialog_dialog > .option {
display: flex;
padding: 8px 0;
align-items: center;
}
.z-filter-threads-dialog_dialog > .option > .radio {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: none;
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid rgba(0,0,0,0.54);
border: 2px solid var(--bg-text-54);
box-sizing: border-box;
position: relative;
margin-right: 8px;
}
.z-filter-threads-dialog_dialog > .option > .radio:checked {
background: #e64a19;
background: var(--primary-700);
border: 2px solid #e64a19;
border: 2px solid var(--primary-700);
}
.z-filter-threads-dialog_dialog > .option > .radio:checked:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
border: 2px solid #fff;
border: 2px solid var(--tertiary-0);
box-sizing: border-box;
}
.z-filter-threads-dialog_dialog > .option > .text {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.5px;
}
.p-group-forum {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.p-group-forum > .fab {
position: fixed;
bottom: 16px;
right: 16px;
z-index: 50;
}
.z-group-info {
flex: 1;
min-height: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
background: #fff;
background: var(--tertiary-0);
}
.z-group-info.is-image-loaded > .cover {
opacity: 1;
transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.z-group-info > .cover {
width: 100%;
height: 200px;
background-size: cover;
background-position: center;
position: relative;
opacity: 0;
}
.z-group-info > .g-grid {
padding: 16px;
box-sizing: border-box;
}
.z-group-info > .g-grid > .name {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 26px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
margin-bottom: 16px;
}
.z-group-info > .g-grid > .info > .section {
display: flex;
align-items: center;
margin-bottom: 16px;
}
.z-group-info > .g-grid > .info > .section > .text {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
margin-left: 16px;
overflow: hidden;
text-overflow: ellipsis;
}
.z-group-info > .g-grid > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
}
.z-group-info > .g-grid > .details {
margin-top: 8px;
}
.p-group-info {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.z-group-manage-channels {
flex: 1;
min-height: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.z-group-manage-channels > .fab {
position: absolute;
bottom: 16px;
right: 16px;
}
.p-group-manage-member {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.z-group-manage-roles {
flex: 1;
min-height: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.z-group-manage-roles > .fab {
position: absolute;
bottom: 16px;
right: 16px;
}
.p-group-manage-roles {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.z-group-manage-member {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.z-group-manage-member > .content {
display: flex;
flex-direction: column;
}
.z-group-manage-member > .content > .info {
background: #fff;
background: var(--tertiary-0);
padding: 16px;
}
.z-group-manage-member > .content > .g-grid > .row {
padding: 16px;
display: flex;
}
.z-group-manage-member > .content > .g-grid > .row > .button {
margin-left: 8px;
}
.z-group-manage-member > .content > .g-grid > .row > .roles > .role {
display: inline-block;
margin-right: 4px;
background: #eee;
background: var(--tertiary-200);
padding: 4px;
cursor: pointer;
}
.z-group-manage-member > .content > .g-grid > .xp {
padding: 16px;
}
.z-group-manage-member > .content > .g-grid > .xp > .add-xp {
display: flex;
}
.p-group-manage-channels {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.z-group-settings {
flex: 1;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 8px;
}
.z-group-settings > .g-grid > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
color: #e64a19;
color: var(--primary-700);
padding: 16px 16px 12px 16px;
margin-bottom: 8px;
}
.z-group-settings > .g-grid > .input {
padding: 0 16px;
margin-bottom: 16px;
}
.z-group-settings > .g-grid > .list {
margin: 0;
padding: 0;
list-style-type: none;
}
.z-group-settings > .g-grid > .list > .item {
display: flex;
align-items: center;
padding: 16px;
cursor: pointer;
}
.z-group-settings > .g-grid > .list > .item > .icon {
margin-right: 30px;
}
.z-group-settings > .g-grid > .list > .item > .text {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.5px;
color: rgba(0,0,0,0.7);
color: var(--bg-text);
}
.z-group-settings > .g-grid > .list > .item > .toggle {
margin-left: auto;
}
.p-group-settings {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.z-product-guides {
padding: 16px;
flex: 1;
min-height: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.z-product-guides > .g-grid > .search,
.z-product-guides > .g-grid > .info-card {
margin-bottom: 16px;
}
.z-product-guides > .g-grid > .g-cols > .g-col > .card {
transition: box-shadow 0.25s;
box-shadow: 0 1px 4px 0 rgba(0,0,0,0.12);
border-radius: 4px;
display: block;
background: #fff;
background: var(--tertiary-0);
margin-bottom: 16px;
}
.z-product-guides > .g-grid > .g-cols > .g-col > .card > .top {
padding: 16px;
display: flex;
align-items: center;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.z-product-guides > .g-grid > .g-cols > .g-col > .card > .top > .icon {
width: 54px;
height: 54px;
margin-right: 12px;
background-size: 100%;
border-radius: 50%;
flex-shrink: 0;
}
.z-product-guides > .g-grid > .g-cols > .g-col > .card > .top > .content {
min-width: 0;
}
.z-product-guides > .g-grid > .g-cols > .g-col > .card > .top > .content > .name {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 21.7px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: 0.25px;
}
.z-product-guides > .g-grid > .g-cols > .g-col > .card > .top > .content > .products {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.5px;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.z-product-guides > .g-grid > .g-cols > .g-col > .card > .top > .chevron {
margin-left: auto;
flex-shrink: 0;
}
.z-product-guides > .g-grid > .g-cols > .g-col > .card > .description {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.32;
letter-spacing: 0.25px;
padding: 16px;
}
@media (min-width: 768px) {
.z-product-guides > .g-grid > .g-cols > .g-col > .category {
margin-bottom: 0;
}
}
.z-how-to-guides {
padding: 16px;
flex: 1;
min-height: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.z-how-to-guides > .g-grid > .g-cols > .g-col > .guide {
transition: box-shadow 0.25s;
box-shadow: 0 1px 4px 0 rgba(0,0,0,0.12);
border-radius: 2px;
display: block;
width: 100%;
height: 150px;
margin-bottom: 8px;
position: relative;
background: #FFFFFF;
}
.z-how-to-guides > .g-grid > .g-cols > .g-col > .guide > .background {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-size: auto 100%;
background-repeat: no-repeat;
background-position: center center;
}
.z-how-to-guides > .g-grid > .g-cols > .g-col > .guide > .background > .gradient {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.70);
border-radius: 2px;
}
.z-how-to-guides > .g-grid > .g-cols > .g-col > .guide > .overlay {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 2px;
padding: 16px;
box-sizing: border-box;
background-color: rgba(33, 150, 243, 0.26);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.z-how-to-guides > .g-grid > .g-cols > .g-col > .guide > .overlay > .name {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 26px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: #FFFFFF;
}
.z-how-to-guides > .g-grid > .g-cols > .g-col > .guide > .overlay > .description {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.5px;
text-align: center;
color: rgba(255, 255, 255, 0.70);
margin-top: 8px;
}
@media (min-width: 768px) {
.z-how-to-guides > .g-grid > .g-cols > .g-col > .guide {
margin-bottom: 0;
}
}
.z-product-guides-onboard {
flex: 1;
min-height: 0;
display: flex;
background: #fff;
background: var(--tertiary-0);
}
.z-product-guides-onboard > .intro {
flex: 1;
min-height: 0;
display: flex;
padding: 16px;
flex-direction: column;
text-align: center;
}
.z-product-guides-onboard > .intro > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 26px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
margin-top: auto;
color: #e64a19;
color: var(--primary-700);
}
.z-product-guides-onboard > .intro > .icon {
width: 100px;
height: 112px;
background-image: url("https://fdn.uno/d/images/guides/guides_onboarding_icon.svg");
background-size: 100%;
margin: 24px auto;
}
.z-product-guides-onboard > .intro > .description {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
margin-bottom: auto;
}
.z-product-guides-onboard > .intro > .actions > .action {
margin-top: 16px;
}
.z-product-guides-onboard_step {
width: 100%;
box-sizing: border-box;
padding: 0 16px;
}
.z-product-guides-onboard_step > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 26px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
text-align: center;
margin: 16px 0 32px 0;
}
.z-product-guides-onboard_step > .buttons {
max-width: 410px;
}
.z-product-guides-onboard_step > .buttons > .g-cols > .g-col > .button {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 26px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
cursor: pointer;
height: 110px;
max-width: 200px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: #e0f2f1;
background: var(--secondary-50);
color: rgba(0,0,0,0.87);
color: var(--secondary-100-text);
text-align: center;
border-radius: 4px;
}
.z-product-guides-onboard_step > .buttons > .g-cols > .g-col > .button.is-selected {
background: #4db6ac;
background: var(--secondary-300);
color: #fff;
color: var(--secondary-300-text);
}
.z-product-guides-onboard_step > .rig-types > .rig-type {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 21.7px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: 0.25px;
cursor: pointer;
color: #4db6ac;
color: var(--secondary-300);
border: 2px solid #4db6ac;
border: 2px solid var(--secondary-300);
border-radius: 4px;
padding: 12px 24px;
text-align: center;
margin-bottom: 16px;
}
.z-product-guides-onboard_step > .rig-types > .rig-type.is-selected {
background: #4db6ac;
background: var(--secondary-300);
color: #fff;
color: var(--secondary-300-text);
}
.p-guides {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.p-guides > .content {
flex: 1;
min-height: 0;
display: flex;
position: relative;
}
.p-guides > .content > .onboard {
position: absolute;
z-index: 99;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
}
.p-home {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.z-item-products {
padding: 16px;
flex: 1;
min-height: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.z-item-products > .g-grid > .g-cols > .g-col > .product {
transition: box-shadow 0.25s;
box-shadow: 0 1px 4px 0 rgba(0,0,0,0.12);
border-radius: 4px;
display: block;
background: #fff;
background: var(--tertiary-0);
margin-bottom: 12px;
}
.z-item-products > .g-grid > .g-cols > .g-col > .product > .content {
padding: 16px;
}
.z-item-products > .g-grid > .g-cols > .g-col > .product > .content > .image {
width: 150px;
height: 150px;
margin: 0 auto;
max-width: 100%;
background-size: 100%;
background-repeat: no-repeat;
background-position: center center;
}
.z-item-products > .g-grid > .g-cols > .g-col > .product > .content > .buy {
margin-top: 12px;
}
.z-item-products > .g-grid > .g-cols > .g-col > .product > .content > .name {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 21.7px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: 0.25px;
margin-top: 24px;
}
.z-item-products > .g-grid > .g-cols > .g-col > .product > .content > .description {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.32;
letter-spacing: 0.25px;
margin-top: 12px;
}
.z-item-products > .g-grid > .g-cols > .g-col > .product > .content > .pros-cons {
display: flex;
margin-top: 20px;
}
.z-item-products > .g-grid > .g-cols > .g-col > .product > .content > .pros-cons > .pros,
.z-item-products > .g-grid > .g-cols > .g-col > .product > .content > .pros-cons > .cons {
flex: 1;
}
.z-item-products > .g-grid > .g-cols > .g-col > .product > .content > .pros-cons > .pros > .title,
.z-item-products > .g-grid > .g-cols > .g-col > .product > .content > .pros-cons > .cons > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
margin-bottom: 4px;
text-transform: uppercase;
}
.z-item-products > .g-grid > .g-cols > .g-col > .product > .content > .pros-cons > .pros > .pro,
.z-item-products > .g-grid > .g-cols > .g-col > .product > .content > .pros-cons > .cons > .pro,
.z-item-products > .g-grid > .g-cols > .g-col > .product > .content > .pros-cons > .pros > .con,
.z-item-products > .g-grid > .g-cols > .g-col > .product > .content > .pros-cons > .cons > .con {
line-height: 1em;
margin-bottom: 8px;
}
.z-item-products > .g-grid > .g-cols > .g-col > .product > .content > .decisions {
margin-top: 8px;
}
.z-item-products > .g-grid > .g-cols > .g-col > .product > .content > .decisions > .decision {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
display: inline-block;
padding: 4px 12px;
border-radius: 6px;
margin-right: 12px;
margin-top: 8px;
}
.z-item-products > .g-grid > .g-cols > .g-col > .product > .content > .decisions > .decision:nth-child(3n) {
border: 1px solid #7388a0;
color: #7388a0;
}
.z-item-products > .g-grid > .g-cols > .g-col > .product > .content > .decisions > .decision:nth-child(3n+1) {
border: 1px solid #7eaf73;
color: #7eaf73;
}
.z-item-products > .g-grid > .g-cols > .g-col > .product > .content > .decisions > .decision:nth-child(3n+2) {
border: 1px solid #cd8022;
color: #cd8022;
}
.z-item-products > .g-grid > .g-cols > .g-col > .product > .bottom {
border-top: 1px solid rgba(0, 0, 0, 0.12);
display: flex;
align-items: center;
padding: 14px 16px;
}
.z-item-products > .g-grid > .g-cols > .g-col > .product > .bottom > .left {
display: flex;
cursor: pointer;
}
.z-item-products > .g-grid > .g-cols > .g-col > .product > .bottom > .left > .icon {
margin-right: 12px;
}
@media (min-width: 768px) {
.z-item-products {
padding: 16px;
}
}
.z-item-guide {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.32;
letter-spacing: 0.25px;
padding: 24px 16px;
flex: 1;
min-height: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.z-item-guide > .g-grid > .what,
.z-item-guide > .g-grid > .why,
.z-item-guide > .g-grid > .decisions {
margin-bottom: 16px;
}
.z-item-guide > .g-grid > .what > .title,
.z-item-guide > .g-grid > .why > .title,
.z-item-guide > .g-grid > .decisions > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
margin-bottom: 8px;
}
.z-item-guide > .g-grid > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
margin-bottom: 8px;
}
.z-item-guide > .g-grid > .decisions > .decision {
margin-bottom: 8px;
}
.z-item-guide > .g-grid > .decisions > .decision > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
margin-bottom: 4px;
}
.z-item-videos {
padding: 24px 16px;
flex: 1;
min-height: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.z-item-videos > .g-grid > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
margin-bottom: 24px;
}
.z-item-videos > .g-grid > .video {
margin-bottom: 16px;
}
.z-item-videos > .g-grid > .video > .name {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
margin-bottom: 8px;
}
.p-item {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.p-item_tab-guide-icon {
position: absolute;
left: 50%;
top: 100%;
width: 2px;
height: 1px;
margin-left: -1px;
}
.z-items {
padding: 8px 16px;
flex: 1;
min-height: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.z-items > .g-grid > .category-info {
padding: 24px 20px;
text-align: center;
}
.z-items > .g-grid > .category-info > .icon {
width: 90px;
height: 90px;
margin: 0 auto;
border-radius: 50%;
background-size: 100%;
}
.z-items > .g-grid > .category-info > .name {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 21.7px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: 0.25px;
margin-top: 8px;
}
.z-items > .g-grid > .category-info > .description {
margin-top: 4px;
}
.z-items > .g-grid > .g-cols > .item {
transition: box-shadow 0.25s;
box-shadow: 0 1px 4px 0 rgba(0,0,0,0.12);
border-radius: 4px;
display: block;
background: #fff;
background: var(--tertiary-0);
margin-bottom: 12px;
}
.z-items > .g-grid > .g-cols > .item > .top {
padding: 16px;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.z-items > .g-grid > .g-cols > .item > .top > .name {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
}
.z-items > .g-grid > .g-cols > .item > .products {
display: flex;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.z-items > .g-grid > .g-cols > .item > .products > .image {
width: 50%;
height: 150px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
border-right: 1px solid rgba(0, 0, 0, 0.12);
box-sizing: border-box;
}
.z-items > .g-grid > .g-cols > .item > .products > .image.has-more {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.z-items > .g-grid > .g-cols > .item > .products > .image.has-more > .count {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 26px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
position: relative;
z-index: 1;
}
.z-items > .g-grid > .g-cols > .item > .products > .image.has-more:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.70);
}
.z-items > .g-grid > .g-cols > .item > .products > .image:last-child {
border-right: none;
}
.z-items > .g-grid > .g-cols > .item > .bottom {
padding: 14px 16px;
display: flex;
align-items: center;
}
.z-items > .g-grid > .g-cols > .item > .bottom > .text {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
color: #e64a19;
color: var(--primary-700);
}
.z-items > .g-grid > .g-cols > .item > .bottom > .chevron {
margin-left: auto;
}
.p-items {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.p-login-link {
padding: 16px;
display: flex;
justify-content: center;
flex-direction: column;
}
.p-login-link > .loading {
text-align: center;
margin-top: 16px;
}
.p-login-link > .stuck {
display: block;
margin-top: 16px;
text-align: center;
}
.z-my-places {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
padding: 8px 0;
}
.z-my-places > .empty {
font-family: Nunito Sans;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 0.4px;
color: rgba(0,0,0,0.38);
color: var(--bg-text-38);
text-align: center;
padding: 8px 16px;
}
@media (min-width: 1280px) {
.z-my-places > .empty {
font-size: 15.2px;
}
}
.p-my-places {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.p-new-amenity {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.p-new-place-review {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.z-new-place {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.z-new-place > .step {
flex: 1;
min-height: 0;
display: flex;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.z-place-new-review-features {
flex: 1;
min-height: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
background: #fff;
background: var(--tertiary-0);
padding: 16px;
}
.z-place-new-review-features > .g-grid > .description {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.5px;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
text-align: center;
margin-bottom: 16px;
}
.z-place-new-review-features > .g-grid > .features {
text-align: center;
}
.z-place-new-review-features > .g-grid > .features > .feature {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
color: #4db6ac;
color: var(--secondary-300);
display: inline-block;
text-align: center;
padding: 4px 12px;
border: 1px solid #4db6ac;
border: 1px solid var(--secondary-300);
border-radius: 18px;
margin: 6px;
cursor: pointer;
}
.z-place-new-review-features > .g-grid > .features > .feature > .icon {
display: inline-block;
vertical-align: middle;
margin-right: 8px;
}
.z-place-new-review-features > .g-grid > .features > .feature.is-selected {
background: #4db6ac;
background: var(--secondary-300);
color: #fff;
color: var(--secondary-300-text);
}
.p-new-place {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.p-new-check-in {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.z-new-mvum {
flex: 1;
min-height: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.z-new-mvum > .g-grid > .saved {
padding: 16px;
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
}
.z-new-mvum > .g-grid > .notes {
padding: 16px;
font-family: Nunito Sans;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 0.4px;
color: rgba(0,0,0,0.38);
color: var(--bg-text-38);
}
@media (min-width: 1280px) {
.z-new-mvum > .g-grid > .notes {
font-size: 15.2px;
}
}
.z-new-mvum > .g-grid > .field {
padding: 16px;
display: block;
}
.z-new-mvum > .g-grid > .field > .name {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.5px;
margin-bottom: 4px;
}
.z-new-mvum > .g-grid > .actions {
max-width: 200px;
padding: 16px;
margin-top: 24px;
}
.p-new-mvum {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.p-new-thread {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.p-new-mvum {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.z-notification-settings-dialog_dialog > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
color: #e64a19;
color: var(--primary-700);
margin-bottom: 8px;
}
.z-notification-settings-dialog_dialog > .list {
margin: 0;
padding: 0;
list-style-type: none;
}
.z-notification-settings-dialog_dialog > .list > .item {
display: flex;
align-items: center;
padding: 16px 0;
cursor: pointer;
}
.z-notification-settings-dialog_dialog > .list > .item > .icon {
margin-right: 30px;
}
.z-notification-settings-dialog_dialog > .list > .item > .text {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.5px;
color: rgba(0,0,0,0.7);
color: var(--bg-text);
}
.z-notification-settings-dialog_dialog > .list > .item > .toggle {
margin-left: auto;
}
.z-notifications {
flex: 1;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
width: 100%;
}
.z-notifications > .g-grid > .notification {
display: flex;
padding-top: 16px;
}
.z-notifications > .g-grid > .notification.is-unread {
background: #fff;
background: var(--tertiary-0);
}
.z-notifications > .g-grid > .notification > .icon {
margin-right: 16px;
padding-left: 16px;
}
.z-notifications > .g-grid > .notification > .right {
flex: 1;
min-height: 0;
padding: 0 16px 20px 16px;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.z-notifications > .g-grid > .notification > .right > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.5px;
margin-bottom: 4px;
}
.z-notifications > .g-grid > .notification > .right > .time {
font-family: Nunito Sans;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 0.4px;
color: rgba(0,0,0,0.38);
color: var(--bg-text-38);
}
.z-notifications > .no-notifications {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-top: 48px;
text-align: center;
}
.z-notifications > .no-notifications > .message {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.5px;
margin-top: 16px;
color: transparent;
}
.p-notifications {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.z-place-map {
flex: 1;
min-height: 0;
display: flex;
position: relative;
}
.p-place-map-screenshot {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.p-places {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.z-preservation {
flex: 1;
min-height: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.z-preservation > .top {
padding: 0 16px 32px 16px;
text-align: center;
background-color: #b6d8d8;
}
.z-preservation > .top > .g-grid > .title {
font-family: Nunito Sans;
font-size: 36.9px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: 0.25px;
text-align: center;
margin: 32px 0;
}
.z-preservation > .top > .g-grid > .description {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
}
.z-preservation > .content {
background-color: #fff;
background-color: var(--tertiary-0);
padding: 16px 16px 32px 16px;
position: relative;
}
.z-preservation > .content:after {
content: '';
position: absolute;
top: 0;
left: 50%;
margin-left: -20px;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #b6d8d8;
}
.z-preservation > .content > .lesson {
margin-top: 40px;
}
.z-preservation > .content > .lesson > .g-grid > .icon {
width: 50px;
height: 50px;
background-size: 100%;
}
.z-preservation > .content > .lesson > .g-grid > .icon.pack-out {
background-image: url("https://fdn.uno/d/images/roam_with_care/apple_icon.svg");
margin: 0 auto;
}
.z-preservation > .content > .lesson > .g-grid > .icon.fire-safety {
background-image: url("https://fdn.uno/d/images/roam_with_care/fire_icon.svg");
margin: 0 auto;
}
.z-preservation > .content > .lesson > .g-grid > .icon.trails {
background-image: url("https://fdn.uno/d/images/roam_with_care/plant_icon.svg");
margin: 0 auto;
}
.z-preservation > .content > .lesson > .g-grid > .icon.rules {
background-image: url("https://fdn.uno/d/images/roam_with_care/date_icon.svg");
margin: 0 auto;
}
.z-preservation > .content > .lesson > .g-grid > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 26px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
margin: 16px 0 12px 0;
text-align: center;
}
.z-preservation > .content > .lesson > .g-grid > .bullets {
text-align: left;
}
.z-preservation > .content > .lesson > .g-grid > .bullets li {
list-style-type: circle;
margin-top: 8px;
}
.z-preservation > .content > .lesson > .g-grid > .button {
max-width: 148px;
margin: 24px auto 0 auto;
}
.p-preservation {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.z-profile-actions {
display: flex;
padding: 0 16px;
margin-top: 16px;
}
.z-profile-actions > .action {
flex: 1;
min-height: 0;
}
.z-profile-actions > .action:first-child {
margin-right: 16px;
}
.z-profile-boxes {
padding: 16px;
box-sizing: border-box;
margin-top: 8px;
}
.z-profile-boxes > .info-card {
margin-bottom: 16px;
}
.z-profile-boxes > .g-grid > .g-cols > .g-col .box {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
display: block;
height: 76px;
padding: 12px;
box-sizing: border-box;
border-radius: 4px;
display: flex;
align-items: center;
}
.z-profile-boxes > .g-grid > .g-cols > .g-col .box.reviews {
background-color: #f3a37e;
background-image: url("https://fdn.uno/d/images/patterns/profile_rust.png");
color: #ffffff;
}
.z-profile-boxes > .g-grid > .g-cols > .g-col .box.check-ins {
background-color: #30799e;
background-image: url("https://fdn.uno/d/images/patterns/profile_blue.png");
color: #ffffff;
}
.z-profile-boxes > .g-grid > .g-cols > .g-col .box.planned {
background-color: #f6b944;
background-image: url("https://fdn.uno/d/images/patterns/profile_yellow.png");
color: #ffffff;
}
.z-profile-boxes > .g-grid > .g-cols > .g-col .box.photos {
background-color: #ff7b45;
color: #FFFFFF;
}
.z-profile-boxes > .g-grid > .g-cols > .g-col .box > .info > .count,
.z-profile-boxes > .g-grid > .g-cols > .g-col .box > .info > .title {
color: inherit;
}
.z-profile-boxes > .g-grid > .g-cols > .g-col .box > .chevron {
margin-left: auto;
}
.z-user-list {
width: 100%;
}
.z-user-list > .user {
background: #fff;
background: var(--tertiary-0);
display: flex;
padding: 16px;
cursor: pointer;
}
.z-user-list > .user > .avatar {
margin-right: 16px;
}
.z-user-list > .user > .info {
margin: auto 0;
}
.z-user-list > .user > .info > .username {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
color: #000;
color: var(--tertiary-900-text);
}
.z-user-list > .user > .info > .actions {
display: flex;
margin-top: 8px;
}
.z-user-list > .user > .info > .actions > .action {
margin-right: 8px;
}
.z-user-list > .user > .right {
font-family: Nunito Sans;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 0.4px;
color: rgba(0,0,0,0.38);
color: var(--bg-text-38);
margin-left: auto;
display: flex;
align-items: center;
}
.z-user-list > .user > .right > .icon {
margin-right: 8px;
}
.z-profile {
flex: 1;
min-height: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.z-profile.is-image-loaded > .header > .cover {
opacity: 1;
transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.z-profile > .header {
width: 100%;
height: 180px;
padding: 8px 16px;
box-sizing: border-box;
position: relative;
}
.z-profile > .header > .cover {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #94c1e2;
background-size: auto 100%;
background-repeat: no-repeat;
background-position: center;
opacity: 0;
z-index: 0;
}
.z-profile > .header > .menu {
display: inline-block;
}
.z-profile > .header > .buttons {
position: absolute;
top: 8px;
right: 8px;
display: flex;
}
.z-profile > .header > .avatar {
position: absolute;
left: 50%;
margin-left: -44px;
bottom: -44px;
border-radius: 50%;
border: 4px solid #fff;
border: 4px solid var(--tertiary-0);
}
.z-profile > .section {
background: #fff;
background: var(--tertiary-0);
margin-bottom: 16px;
}
.z-profile > .section > .g-grid > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
padding: 16px;
}
.z-profile > .section > .g-grid > .title > .count {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.5px;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
margin-left: 8px;
}
.z-profile > .section > .g-grid > .divider {
width: 100%;
height: 1px;
background: rgba(0,0,0,0.12);
background: var(--bg-text-12);
margin: 12px 0;
}
.z-profile > .section > .g-grid > .see-all {
display: flex;
align-items: center;
padding: 16px;
}
.z-profile > .section > .g-grid > .see-all > .text {
color: rgba(0,0,0,0.54);
color: var(--bg-text-54);
}
.z-profile > .section > .g-grid > .see-all > .icon {
margin-left: auto;
}
.z-profile > .info.is-loading {
min-height: 200px;
padding-top: 100px;
}
.z-profile > .info > .g-grid > .karma {
font-family: Nunito Sans;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 0.4px;
color: rgba(0,0,0,0.38);
color: var(--bg-text-38);
padding: 16px;
display: flex;
align-items: center;
}
.z-profile > .info > .g-grid > .karma > .icon {
margin-right: 8px;
}
.z-profile > .info > .g-grid > .name,
.z-profile > .info > .g-grid > .bio {
text-align: center;
}
.z-profile > .info > .g-grid > .name.name,
.z-profile > .info > .g-grid > .bio.name {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
margin-bottom: 8px;
display: flex;
align-items: center;
justify-content: center;
}
.z-profile > .info > .g-grid > .name.name > .icon,
.z-profile > .info > .g-grid > .bio.name > .icon {
margin-left: 4px;
}
.z-profile > .info > .g-grid > .name.bio,
.z-profile > .info > .g-grid > .bio.bio {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.5px;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
padding: 0 16px;
}
.z-profile > .info > .g-grid > .bits {
padding: 0 16px;
}
.z-profile > .info > .g-grid > .bits > .bit {
display: flex;
align-items: center;
margin-bottom: 12px;
}
.z-profile > .info > .g-grid > .bits > .bit:last-child {
margin-bottom: 16px;
}
.z-profile > .info > .g-grid > .bits > .bit > .icon {
margin-right: 12px;
}
.z-profile > .info > .g-grid > .bits > .bit > .text {
color: rgba(0,0,0,0.54);
color: var(--bg-text-54);
}
.z-profile > .info > .g-grid > .links {
display: flex;
margin-top: 16px;
justify-content: center;
height: 32px;
}
.z-profile > .info > .g-grid > .links > .link {
margin: 0 16px;
}
.z-profile > .info > .g-grid > .links > .divider {
width: 1px;
height: 100%;
background: rgba(0,0,0,0.12);
background: var(--bg-text-12);
margin: 0 8px;
}
.p-profile {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.z-profile-attachments {
flex: 1;
min-height: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.z-profile-attachments > .empty {
padding: 16px;
}
.p-profile-attachments {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.p-profile-friends {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.z-profile-review {
display: flex;
width: 100%;
box-sizing: border-box;
overflow: hidden;
position: relative;
}
.z-profile-review > .thumbnail {
margin-right: 16px;
cursor: pointer;
position: relative;
}
.z-profile-review > .thumbnail > .img {
max-width: 100%;
}
.z-profile-review > .content {
flex: 1;
min-height: 0;
min-width: 0;
}
.z-profile-review > .content > .name {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
color: #e64a19;
color: var(--primary-700);
}
.z-profile-reviews {
flex: 1;
min-height: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.p-profile-reviews {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.p-profile-trips {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.z-privacy {
flex: 1;
min-height: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
padding: 0 16px 16px 16px;
}
.z-tos {
flex: 1;
min-height: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
padding: 0 16px 16px 16px;
}
.z-policies {
flex: 1;
min-height: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
padding: 16px;
display: flex;
flex-direction: column;
}
.z-policies > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 26px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
text-transform: uppercase;
margin: 32px 0;
text-align: center;
}
.z-policies > .description {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.5px;
margin-bottom: 32px;
}
.z-policies > .dropdown {
padding: 16px;
}
.z-policies > .dropdown > .block {
display: flex;
cursor: pointer;
}
.z-policies > .dropdown > .block > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
text-transform: uppercase;
}
.z-policies > .dropdown > .block > .icon {
margin-left: auto;
}
.z-policies > .dropdown > .content {
display: none;
}
.z-policies > .dropdown > .content.is-visible {
display: block;
}
.z-policies > .divider {
width: 100%;
height: 1px;
background: rgba(255, 255, 255, 0.12);
margin: 0;
}
.z-policies > .continue-button {
margin-top: auto;
}
.p-policies {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.p-privacy {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.z-settings > .g-grid {
padding: 0 16px;
box-sizing: border-box;
}
.z-settings > .g-grid > .section {
margin: 16px 0;
}
.z-settings > .g-grid > .section > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
text-transform: uppercase;
color: #e64a19;
color: var(--primary-700);
margin-bottom: 8px;
}
.z-settings > .g-grid > .section > .flex {
display: flex;
align-items: center;
}
.z-settings > .g-grid > .section > .actions {
margin-top: 16px;
}
.z-settings > .g-grid > .actions {
margin-top: 32px;
}
.z-settings > .g-grid > .actions > .button {
display: inline-block;
}
.p-settings {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.p-shell {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.z-find-friends {
display: flex;
flex-direction: column;
justify-content: center;
box-sizing: border-box;
position: absolute;
z-index: 99;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.z-find-friends > .overlay {
position: absolute;
z-index: 99;
width: 100%;
top: 0;
left: 0;
display: flex;
box-sizing: border-box;
pointer-events: none;
}
.z-find-friends > .overlay > .right-icon,
.z-find-friends > .overlay > .left-icon {
pointer-events: auto;
}
.z-find-friends > .overlay > .right-icon {
margin-left: auto;
}
.z-find-friends > .form {
height: 48px;
display: flex;
position: relative;
z-index: 98;
}
.z-find-friends > .form > .input {
transition: box-shadow 0.25s;
box-shadow: 0 1px 4px 0 rgba(0,0,0,0.12);
flex: 1;
min-height: 0;
margin: 8px;
padding-left: 64px;
border-radius: 2px;
border: none;
color: #0c0c0c;
box-sizing: border-box;
transition: margin 0.1s;
-webkit-tap-highlight-color: transparent;
}
.z-find-friends > .form > .input:focus {
outline: none;
}
.z-find-friends > .form > .input {
margin: 0;
box-shadow: none;
}
.z-find-friends > .results {
flex: 1;
min-height: 0;
background: #EEEEEE;
z-index: 97;
display: flex;
padding-top: 10px;
box-sizing: border-box;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.z-friends {
flex: 1;
min-height: 0;
width: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.z-friends > .empty {
text-align: center;
max-width: 300px;
margin: 40px auto 0 auto;
}
.z-friends > .empty > .image {
width: 190px;
height: 170px;
margin: 0 auto;
background: url("https://fdn.uno/d/images/illustrations/empty_state_friends.svg");
background-size: 100%;
}
.z-friends > .empty > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 26px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
margin-top: 24px;
margin-bottom: 4px;
}
.z-friends > .empty > .description {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.32;
letter-spacing: 0.25px;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
}
.z-friends > .g-grid > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
margin: 0;
padding: 16px 16px 8px 16px;
}
.z-users-nearby {
flex: 1;
min-height: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
padding: 16px 0;
}
.z-users-nearby > .g-grid > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
padding: 0 16px;
display: flex;
align-items: center;
margin-bottom: 8px;
}
.z-users-nearby > .g-grid > .title > .toggle {
margin-left: auto;
position: relative;
}
.z-users-nearby > .g-grid > .title > .toggle > .helper-arrow {
position: absolute;
top: 28px;
left: -56px;
width: 80px;
height: 88px;
background: url("https://fdn.uno/d/images/illustrations/arrow.svg");
background-size: 100%;
}
.z-users-nearby > .g-grid > .empty {
text-align: center;
max-width: 270px;
margin: 24px auto 0 auto;
}
.z-users-nearby > .g-grid > .empty > .image {
width: 170px;
height: 171px;
margin: 0 auto;
background: url("https://fdn.uno/d/images/illustrations/empty_state_location_off.svg");
background-size: 100%;
}
.z-users-nearby > .g-grid > .empty > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 26px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
margin-top: 24px;
margin-bottom: 4px;
}
.z-users-nearby > .g-grid > .empty > .description {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.32;
letter-spacing: 0.25px;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
}
.z-users-nearby > .g-grid > .users {
margin-top: 8px;
}
.z-users-nearby > .g-grid > .users > .empty {
text-align: center;
max-width: 320px;
margin: 24px auto 0 auto;
}
.z-users-nearby > .g-grid > .users > .empty > .image {
width: 170px;
height: 152px;
margin: 0 auto;
background: url("https://fdn.uno/d/images/illustrations/no_one_nearby.svg");
background-size: 100%;
}
.z-users-nearby > .g-grid > .users > .empty > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 26px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
margin-top: 24px;
margin-bottom: 4px;
}
.z-users-nearby > .g-grid > .users > .empty > .description {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.32;
letter-spacing: 0.25px;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
}
.z-users-nearby > .g-grid > .users > .user {
display: flex;
align-items: center;
padding: 16px;
cursor: pointer;
}
.z-users-nearby > .g-grid > .users > .user > .info {
margin-left: 16px;
}
.z-users-nearby > .g-grid > .users > .user > .info > .name {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
}
.z-users-nearby > .g-grid > .users > .user > .info > .location {
font-family: Nunito Sans;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 0.4px;
color: rgba(0,0,0,0.38);
color: var(--bg-text-38);
}
.z-users-nearby > .g-grid > .users > .user > .distance {
color: #e64a19;
color: var(--primary-700);
margin-left: auto;
}
.z-group-list > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
color: #e64a19;
color: var(--primary-700);
}
.z-group-list > .no-groups {
box-sizing: border-box;
padding: 16px;
text-align: center;
}
.z-group-list > .groups {
overflow: auto;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
padding-bottom: 4px;
}
.z-group-list > .groups > .group {
transition: box-shadow 0.25s;
box-shadow: 0 1px 4px 0 rgba(0,0,0,0.12);
background: #fff;
background: var(--tertiary-0);
border-radius: 2px;
display: inline-block;
width: 200px;
margin-right: 8px;
}
.z-group-list > .groups > .group:last-child {
margin-right: 0;
}
.z-group-list > .groups > .group > .image {
opacity: 0;
width: 100%;
height: 150px;
border-radius: 2px;
padding: 8px;
box-sizing: border-box;
background-size: 100% auto;
position: relative;
}
.z-group-list > .groups > .group > .image.is-image-loaded {
opacity: 1;
transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.z-group-list > .groups > .group > .image:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100px;
background-image: linear-gradient(to bottom, rgba(0,0,0,0) 33%, rgba(0, 0, 0, 0.12) 66%, rgba(0, 0, 0, 0.54));
z-index: 1;
}
.z-group-list > .groups > .group > .image > .name {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
position: absolute;
z-index: 2;
bottom: 6px;
left: 6px;
white-space: normal;
line-height: 1em;
width: 100%;
color: #FFFFFF;
}
.z-group-list > .groups > .group > .actions {
display: flex;
}
.z-group-list > .groups > .group > .actions > .chat {
margin-left: auto;
}
.z-groups {
flex: 1;
min-height: 0;
width: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
box-sizing: border-box;
}
.z-groups > .unread-invites {
display: flex;
align-items: center;
padding: 16px;
}
.z-groups > .unread-invites > .icon {
margin-right: 32px;
}
.z-groups > .unread-invites > .chevron {
margin-left: auto;
}
.z-groups > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
padding: 16px;
}
.z-groups > .group-list,
.z-groups > .events {
background: #fff;
background: var(--tertiary-0);
}
.z-groups > .group-list > .see-all,
.z-groups > .events > .see-all {
padding: 16px;
display: block;
}
.z-groups > .group-list > .see-all > .g-grid,
.z-groups > .events > .see-all > .g-grid {
display: flex;
align-items: center;
}
.z-groups > .group-list > .see-all > .g-grid > .text,
.z-groups > .events > .see-all > .g-grid > .text {
color: rgba(0,0,0,0.54);
color: var(--bg-text-54);
}
.z-groups > .group-list > .see-all > .g-grid > .icon,
.z-groups > .events > .see-all > .g-grid > .icon {
margin-left: auto;
}
.z-groups > .group-list {
padding: 0 16px;
height: 200px;
box-sizing: border-box;
}
.z-groups > .events > .event {
display: block;
padding: 16px 20px;
}
.z-groups > .events > .event > .g-grid > .name {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
}
.z-groups > .events > .event > .g-grid > .info {
font-family: Nunito Sans;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 0.4px;
color: rgba(0,0,0,0.38);
color: var(--bg-text-38);
}
@media (min-width: 1280px) {
.z-groups > .events > .event > .g-grid > .info {
font-size: 15.2px;
}
}
.p-social {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.p-social > .fab {
position: absolute;
bottom: 78px;
right: 16px;
}
@media (min-width: 768px) {
.p-social > .fab {
bottom: 16px;
}
}
.p-social_tab-users-nearby-icon {
position: absolute;
left: 50%;
top: 100%;
width: 2px;
height: 1px;
margin-left: -1px;
}
.z-comment {
width: 100%;
box-sizing: border-box;
overflow: hidden;
}
.z-comment > .comment {
display: flex;
}
.z-comment > .bottom {
display: flex;
}
.z-comment > .bottom > .actions {
margin-left: auto;
display: flex;
align-items: center;
}
.z-comment > .bottom > .actions > .reply {
cursor: pointer;
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 13px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 2px;
color: rgba(0,0,0,0.54);
color: var(--bg-text-54);
}
.z-comment > .bottom > .actions > .points {
display: flex;
align-items: center;
margin-left: 8px;
}
.z-comment > .bottom > .actions > .points > .icon {
margin: 0 8px;
}
.z-comment > .reply {
margin: 8px 0 16px 0;
}
.z-comment > .children {
border-left: 2px solid var(--bg-text-12);
padding-left: 16px;
margin: 8px 0;
}
.z-filter-comments-dialog_dialog > .subhead {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
color: #e64a19;
color: var(--primary-700);
margin-top: 16px;
}
.z-filter-comments-dialog_dialog > .subhead:first-child {
margin-top: 0;
}
.z-filter-comments-dialog_dialog > .option {
display: flex;
padding: 8px 0;
align-items: center;
}
.z-filter-comments-dialog_dialog > .option > .radio {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: none;
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid rgba(0,0,0,0.54);
border: 2px solid var(--bg-text-54);
box-sizing: border-box;
position: relative;
margin-right: 8px;
}
.z-filter-comments-dialog_dialog > .option > .radio:checked {
background: #e64a19;
background: var(--primary-700);
border: 2px solid #e64a19;
border: 2px solid var(--primary-700);
}
.z-filter-comments-dialog_dialog > .option > .radio:checked:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
border: 2px solid #fff;
border: 2px solid var(--tertiary-0);
box-sizing: border-box;
}
.z-filter-comments-dialog_dialog > .option > .text {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.5px;
}
.z-thread {
flex: 1;
min-height: 0;
width: 100%;
display: flex;
flex-direction: column;
background: #fff;
background: var(--tertiary-0);
margin: 0 auto;
}
.z-thread > .content {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
overflow: auto;
-webkit-overflow-scrolling: touch;
will-change: transform;
}
.z-thread > .content > .post {
padding: 16px;
}
.z-thread > .content > .post > .g-grid > .top {
display: flex;
}
.z-thread > .content > .post > .g-grid > .top > .author {
margin-left: 8px;
}
.z-thread > .content > .post > .g-grid > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
margin-top: 16px;
}
.z-thread > .content > .post > .g-grid > .body {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.32;
letter-spacing: 0.25px;
margin-top: 16px;
}
.z-thread > .content > .post > .g-grid > .body a {
color: #e64a19;
color: var(--primary-700);
text-decoration: underline;
}
.z-thread > .content > .stats {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 15.2px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.32;
letter-spacing: 0.25px;
padding-right: 16px;
}
.z-thread > .content > .stats > .g-grid {
display: flex;
align-items: center;
}
.z-thread > .content > .stats > .g-grid > .vote {
display: flex;
align-items: center;
}
.z-thread > .content > .stats > .g-grid > .score {
margin-left: auto;
}
.z-thread > .content > .stats > .g-grid > .filter-icon {
margin-left: 8px;
}
.z-thread > .content > .stats > .ad {
margin: 16px 0;
}
.z-thread > .content > .comments-wrapper {
flex: 1;
min-height: 0;
background: transparent;
}
.z-thread > .content > .comments-wrapper > .g-grid > .comments {
padding: 16px;
}
.z-thread > .content > .comments-wrapper > .g-grid > .no-comments {
padding: 16px;
}
.z-thread > .content > .comments-wrapper > .g-grid > .divider {
width: 100%;
height: 1px;
background: rgba(255, 255, 255, 0.12);
margin: 8px 0;
}
.z-thread > .content > .divider {
width: 100%;
height: 1px;
background: rgba(255, 255, 255, 0.12);
margin: 8px 0;
}
.z-thread > .fab {
position: fixed;
bottom: 16px;
right: 16px;
z-index: 50;
}
.z-thread_top-right {
display: flex;
}
.z-thread_top-right > .share.wiggle {
animation: z-thread-share-animation-wiggle 1s;
}
@keyframes z-thread-share-animation-wiggle {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(12deg) scale(1.3);
}
50% {
transform: rotate(-12deg) scale(1.3);
}
75% {
transform: rotate(12deg) scale(1.3);
}
100% {
transform: rotate(0deg);
}
}
.p-thread {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.p-trip {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.z-trip-itinerary {
flex: 1;
min-height: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
position: relative;
padding-bottom: 60px;
}
.z-trip-itinerary > .g-grid > .check-ins {
padding: 0 16px;
margin-top: 16px;
position: relative;
}
.z-trip-itinerary > .g-grid > .check-ins > .divider {
position: absolute;
top: 4px;
bottom: 118px;
left: 21px;
width: 2px;
background: #4db6ac;
background: var(--secondary-300);
}
.z-trip-itinerary > .g-grid > .check-ins > .placeholder {
text-align: center;
}
.z-trip-itinerary > .g-grid > .check-ins > .placeholder > .icon {
width: 145px;
height: 124px;
background-image: url("https://fdn.uno/d/images/empty_state/trip_empty.svg");
background-size: 100%;
margin: 48px auto 0 auto;
}
.z-trip-itinerary > .g-grid > .check-ins > .placeholder > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
margin-top: 16px;
color: #e64a19;
color: var(--primary-700);
}
.z-trip-itinerary > .g-grid > .check-ins > .placeholder > .description {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.5px;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
margin-top: 8px;
}
.z-trip-itinerary > .g-grid > .check-ins > .check-in {
display: flex;
align-items: flex-start;
cursor: pointer;
min-height: 122px;
position: relative;
}
.z-trip-itinerary > .g-grid > .check-ins > .check-in > .dot {
flex-shrink: 0;
width: 12px;
height: 12px;
margin-top: 4px;
border-radius: 50%;
background: #4db6ac;
background: var(--secondary-300);
position: relative;
z-index: 1;
}
.z-trip-itinerary > .g-grid > .check-ins > .check-in > .info {
flex: 1;
min-height: 0;
margin-left: 16px;
margin-bottom: 16px;
}
.z-trip-itinerary > .g-grid > .check-ins > .check-in > .info > .dates {
display: flex;
}
.z-trip-itinerary > .g-grid > .check-ins > .check-in > .info > .dates > .date {
font-family: Nunito Sans;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 0.4px;
color: rgba(0,0,0,0.38);
color: var(--bg-text-38);
}
@media (min-width: 1280px) {
.z-trip-itinerary > .g-grid > .check-ins > .check-in > .info > .dates > .date {
font-size: 15.2px;
}
}
.z-trip-itinerary > .g-grid > .check-ins > .check-in > .info > .place-list-item {
margin-top: 8px;
}
.z-trip-itinerary > .g-grid > .check-ins > .check-in > .info > .route {
margin-top: 8px;
}
.z-trip-itinerary > .g-grid > .check-ins > .check-in > .info > .route > .header {
display: flex;
}
.z-trip-itinerary > .g-grid > .check-ins > .check-in > .info > .route > .header > .plan-route {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
display: flex;
}
.z-trip-itinerary > .g-grid > .check-ins > .check-in > .info > .route > .header > .travel-time {
font-family: Nunito Sans;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 0.4px;
color: rgba(0,0,0,0.38);
color: var(--bg-text-38);
margin-left: auto;
display: flex;
align-items: center;
}
.z-trip-itinerary > .g-grid > .check-ins > .check-in > .info > .route > .header > .travel-time > .icon {
margin-right: 6px;
}
.z-trip-itinerary > .g-grid > .check-ins > .check-in > .info > .route > .content {
padding: 16px 0;
display: none;
}
.z-trip-itinerary > .g-grid > .check-ins > .check-in > .info > .route > .content.is-visible {
display: block;
}
.z-trip-itinerary > .g-grid > .check-ins > .check-in > .info > .route > .content > .stops > .stop {
padding: 16px 0;
position: relative;
}
.z-trip-itinerary > .g-grid > .check-ins > .check-in > .info > .route > .content > .stops > .stop > .delete {
position: absolute;
top: 8px;
right: 0;
}
.z-trip-itinerary > .g-grid > .check-ins > .check-in > .info > .route > .content > .actions {
display: flex;
}
.z-trip-itinerary > .g-grid > .check-ins > .check-in > .info > .route > .content > .actions > .action {
flex: 1;
margin-right: 16px;
}
.z-trip-itinerary > .g-grid > .check-ins > .check-in > .info > .route > .content > .actions > .action:last-child {
margin-right: 0;
}
.z-trip-itinerary > .g-grid > .check-ins > .check-in > .actions {
margin-left: auto;
}
@media (min-width: 768px) {
.z-trip-itinerary {
position: relative;
}
}
.z-trip-map {
flex: 1;
min-height: 0;
display: flex;
position: relative;
}
.z-trip-map > .places-along-route {
transition: box-shadow 0.25s;
box-shadow: 0 1px 4px 0 rgba(0,0,0,0.12);
position: absolute;
top: 8px;
right: 8px;
background: #fff;
background: var(--tertiary-0);
padding: 8px;
border-radius: 4px;
cursor: pointer;
}
.z-trip {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
position: relative;
}
.z-trip > .info {
background: #fff;
background: var(--tertiary-0);
text-align: center;
padding-bottom: 16px;
}
.z-trip > .info > .content {
margin-top: -32px;
position: relative;
z-index: 99;
display: inline-block;
}
.z-trip > .info > .content > .picture {
width: 90px;
height: 90px;
border-radius: 50%;
margin: 0 auto 16px auto;
background: #eee;
background: var(--tertiary-200);
background-size: cover;
}
.z-trip > .info > .content > .name {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 26px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
margin-bottom: 2px;
}
.z-trip > .info > .content > .name:before {
content: "\200B";
}
.z-trip > .info > .content > .stats {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.5px;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
}
.z-trip > .info > .content > .stats:before {
content: "\200B";
}
.z-trip > .info > .content > .follow {
margin-top: 12px;
}
.z-trip > .fab {
position: fixed;
bottom: 16px;
right: 16px;
z-index: 50;
}
.p-trip {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.p-trip_top-right {
display: flex;
}
.z-trips-mine {
flex: 1;
min-height: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
padding: 24px 16px;
}
.z-trips-mine > .trip-onboard {
display: flex;
flex-direction: column;
align-items: center;
}
.z-trips-mine > .trip-onboard > .placeholder {
text-align: center;
}
.z-trips-mine > .trip-onboard > .placeholder > .icon {
background-size: 100%;
margin: 48px auto 24px auto;
background-image: url("https://fdn.uno/d/images/illustrations/empty_state_trips.svg?11");
width: 320px;
height: 150px;
}
.z-trips-mine > .trip-onboard > .title {
font-family: Nunito Sans;
font-size: 36.9px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: 0.25px;
text-align: center;
text-align: center;
margin-bottom: 8px;
}
.z-trips-mine > .trip-onboard > .features {
margin: 0;
padding-left: 20px;
text-align: left;
max-width: 500px;
margin: 0 auto;
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.5px;
}
.z-trips-mine > .trip-onboard > .features > li {
margin-top: 8px;
list-style-type: circle;
}
.z-trips-mine > .trip-onboard > .actions {
display: flex;
margin-top: 24px;
}
.z-trips-mine > .trip-onboard > .actions > .action {
margin: 0 8px;
}
.z-trips-mine > .info-card {
margin-bottom: 24px;
}
.z-trips-mine > .create-button {
margin-bottom: 24px;
}
.z-trips-following {
flex: 1;
min-height: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
padding: 24px 16px;
}
.p-trips {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.p-tos {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.z-transactions {
flex: 1;
min-height: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.z-transactions > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
padding: 16px;
}
.z-transactions > .subscription {
background: #fff;
background: var(--tertiary-0);
padding: 16px;
}
.z-transactions > .subscription > .g-grid > .amount {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
}
.z-transactions > .subscription > .g-grid > .payments {
font-family: Nunito Sans;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 0.4px;
color: rgba(0,0,0,0.38);
color: var(--bg-text-38);
}
@media (min-width: 1280px) {
.z-transactions > .subscription > .g-grid > .payments {
font-size: 15.2px;
}
}
.z-transactions > .subscription > .g-grid > .actions {
display: flex;
justify-content: flex-end;
}
.z-transactions > .transaction {
background: #fff;
background: var(--tertiary-0);
padding: 16px;
border-bottom: 1px solid var(--tertiary-200);
}
.z-transactions > .transaction > .g-grid {
display: flex;
}
.z-transactions > .transaction > .g-grid > .icon {
width: 40px;
height: 40px;
margin-right: 16px;
background-size: 100%;
background-image: url("https://fdn.uno/d/images/about/donation_one_time.svg");
}
.z-transactions > .transaction > .g-grid > .icon.monthly {
background-image: url("https://fdn.uno/d/images/about/donation_monthly.svg");
}
.z-transactions > .transaction > .g-grid > .content > .name {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
}
.z-transactions > .transaction > .g-grid > .content > .info {
font-family: Nunito Sans;
color: rgba(0,0,0,0.6);
color: var(--bg-text-60);
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.23;
letter-spacing: 0.4px;
color: rgba(0,0,0,0.38);
color: var(--bg-text-38);
}
@media (min-width: 1280px) {
.z-transactions > .transaction > .g-grid > .content > .info {
font-size: 15.2px;
}
}
.z-transactions > .transaction > .g-grid > .amount {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
margin-left: auto;
}
.p-transactions {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.p-unsubscribe-email {
padding: 16px;
display: flex;
justify-content: center;
flex-direction: column;
}
.p-unsubscribe-email > .is-verified {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
text-align: center;
}
.p-unsubscribe-email > .is-verified > .home {
margin-top: 32px;
}
.p-unsubscribe-email > .loading {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
text-align: center;
margin-top: 16px;
}
.p-unsubscribe-email > .stuck {
display: block;
margin-top: 16px;
text-align: center;
}
.p-verify-email {
padding: 16px;
display: flex;
justify-content: center;
flex-direction: column;
}
.p-verify-email > .is-verified {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
text-align: center;
}
.p-verify-email > .is-verified > .home {
margin-top: 32px;
}
.p-verify-email > .loading {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
text-align: center;
margin-top: 16px;
}
.p-verify-email > .stuck {
display: block;
margin-top: 16px;
text-align: center;
}
.z-install-overlay {
background: rgba(230,74,25,0.96);
background: var(--primary-700-96);
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: flex;
flex-direction: column;
z-index: 300;
}
.z-install-overlay > .container {
padding: 16px;
display: flex;
}
.z-install-overlay > .container > .content {
width: 184px;
margin-left: auto;
padding-top: 42px;
}
.z-install-overlay > .container > .content > .title {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.15px;
color: #FFFFFF;
}
.z-install-overlay > .container > .content > .action {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.5px;
color: #FFFFFF;
margin-top: 16px;
display: flex;
}
.z-install-overlay > .container > .content > .action > .icon {
margin-left: 8px;
}
.z-install-overlay > .container > .content > .instructions {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.5px;
color: #FFFFFF;
margin-top: 16px;
}
.z-install-overlay > .container > .content > .button {
margin-top: 32px;
}
.z-install-overlay > .container > .arrow {
width: 96px;
height: 53px;
background: url("https://fdn.uno/d/images/add_home_arrow.svg") no-repeat;
background-size: 100%;
margin-left: 16px;
}
.z-get-app-dialog_dialog > .badge {
display: block;
width: 135px;
height: 40px;
background-size: 100%;
margin: 0 auto;
cursor: pointer;
margin-bottom: 16px;
}
.z-get-app-dialog_dialog > .badge.ios {
background-image: url("https://fdn.uno/d/images/app_store.svg");
}
.z-get-app-dialog_dialog > .badge.android {
background-image: url("https://fdn.uno/d/images/google_play.svg");
}
.z-get-app-dialog_dialog > .text {
font-family: Nunito Sans;
color: rgba(0,0,0,0.87);
color: var(--bg-text-87);
font-size: 17.4px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.61;
letter-spacing: 0.5px;
margin-top: 8px;
}