html {
    margin: 0;
    padding: 0;
    /* Imortant! This helps to avoid screen jumping when refreshing the page
    if the header has positition absolute. */
    overflow-anchor: none;
    position: relative;
}

body {
    background: #f4f3f2;
    color: #3f3f3f;
    font: 300 14px/23px 'Inter', sans-serif;
    margin: 0;
    padding: 0;
}

@media (min-width: 640px) {
    body {
        display: flex;
        justify-content: center;
        min-width: 980px;
    }
}

@media (max-width: 640px) {
    body {
        font-weight: 400;
    }
}

form {
    font: inherit;
}

a {
    color: #007ce6;
    text-decoration: none;
}

b {
    font-weight: 500;
}

ul {
    list-style: none;
}

img,
ul,
li {
    margin: 0;
    padding: 0;
}

label {
    display: block;
    clear: both;
    cursor: pointer;
}

/* Basic UI kit */

:active, :hover, :focus {
    outline: 0;
    outline-offset: 0;
}

input[type=radio],
input[type=checkbox] {
  display: none;
  margin-right: 8px;
}

input[type=radio] + label:before,
input[type=checkbox] + label:before {
    background: white;
    border: 1px #a7a8a9 solid;
    content: '';
    cursor: pointer;
    display: inline-block;
    height: 14px;
    margin: -2px 8px 0 0;
    vertical-align: middle;
    width: 14px;
}

input[type=checkbox] + label:before {
    border-radius: 4px;
}

input[type=radio] + label {
    margin-bottom: 10px;
    width: 270px;
}

input[type=radio] + label:before {
    border-radius: 10px;
}

input[type=radio]:checked + label:before {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="16097 2362 6 6"><circle cx="3" cy="3" r="3" fill="%23495668" transform="translate(16097 2362)"/></svg>') no-repeat center center;
}

input[type=checkbox]:checked + label:before {
    background: url('data:image/svg+xml,<svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 1L3 5L1 3" stroke="%23828385" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center center;
}

input[type=date],
input[type=email],
input[type=number],
input[type=password],
input[type=text],
textarea {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: #eeeff1;
    border: 0;
    border-radius: 8px;
    box-shadow: inset 0 2px 3px 0 rgba(47, 48, 51, 0.1);
    box-sizing: border-box;
    color: #2f3033;
    font: inherit;
    height: 40px;
    line-height: 38px;
    margin: 4px 0 6px;
    padding: 0 16px 2px;
    width: 260px;
}

textarea {
    display: block;
    height: 116px;
    line-height: 23px;
    margin-bottom: 8px;
    padding: 10px 16px;
    scrollbar-width: none;
    width: 100%;
}

input[type=date]:focus,
input[type=email]:focus,
input[type=number]:focus,
input[type=password]:focus,
input[type=text]:focus,
textarea:focus,
input.invalid {
    background-color: white;
    border: solid 2px #8eb1f9;
    box-shadow: inset 0 2px 3px 0 rgba(47, 48, 51, 0.1);
    padding: 0 14px 2px;
}

textarea:focus {
    padding: 8px 14px;   
}

input.invalid {
    border-color: #ff9da7;
}

.password-eye {
    cursor: pointer;
    height: 22px;
    left: 50%;
    margin: 0 0 -22px 96px;
    position: relative;
    top: -37px;
    width: 20px;
}

input[name=password],
input[name=password_confirmation] {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 13"><path d="M7.9 0c0.4 0 0.8 0.3 0.8 0.8l0 1.4c1.2 0.1 2.3 0.4 3.3 0.9l0.5-1.2c0.2-0.4 0.6-0.6 1-0.4 0.4 0.2 0.6 0.6 0.4 1l-0.6 1.4c0.9 0.7 1.7 1.6 2.3 2.6l0 0 0.4 0.7 -0.6 1c-1.6 2.5-4.4 4.1-7.4 4.1 -3.1 0-6-1.7-7.6-4.3l0 0 -0.4-0.7 0.4-0.7c0.6-1 1.3-1.8 2.2-2.5l-0.7-1.5c-0.2-0.4 0-0.8 0.4-1 0.4-0.2 0.8 0 1 0.4l0.6 1.3c1-0.5 2.1-0.9 3.2-1l0-1.5C7.2 0.3 7.5 0 7.9 0zM4.8 4.7L4.8 4.7c-1.2 0.6-2.1 1.5-2.8 2.7l0.1-0.2 0 0.1c1.2 1.9 3.4 3.2 5.7 3.3l0 0 0.3 0c2.5 0 4.8-1.3 6-3.5l0 0 -0.1 0.2 0-0.1c-0.7-1.1-1.6-1.9-2.7-2.5 0.2 0.4 0.3 0.9 0.3 1.4 0 1.9-1.6 3.5-3.5 3.5 -2 0-3.5-1.6-3.5-3.5C4.5 5.7 4.6 5.2 4.8 4.7zM8 4.4c-1 0-1.8 0.8-1.8 1.8 0 1 0.8 1.8 1.8 1.8 1 0 1.8-0.8 1.8-1.8C9.8 5.2 9 4.4 8 4.4z" fill="%23828385"/></svg>');
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px 13px;
}

input[type=password] {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 8"><g transform="translate(-814.000000, -483.000000)"><g transform="translate(590.000000, 466.000000)"><path fill="%23828385" d="M232.1,25c-0.4,0-0.8-0.4-0.8-0.8l0-1.5c-1.2-0.1-2.3-0.4-3.4-1l-0.5,1.2 c-0.2,0.4-0.6,0.6-1,0.4c-0.4-0.2-0.6-0.6-0.4-1l0.6-1.4c-0.9-0.7-1.6-1.5-2.2-2.4l-0.3-0.6l1.6-0.9l0.2,0.3 c1.3,2.2,3.7,3.6,6.3,3.6c2.5,0,4.8-1.3,6.1-3.4l0.3-0.5l1.6,0.9l-0.2,0.3c-0.6,1-1.4,1.9-2.3,2.6l0.7,1.5 c0.2,0.4,0,0.9-0.4,1.1c-0.4,0.2-0.9,0-1.1-0.4l-0.6-1.3c-1,0.5-2.2,0.9-3.3,1l0,1.5C232.9,24.6,232.5,25,232.1,25z"/></g></g></svg>');
    background-size: 16px 8px;
    background-position: right 16px top 18px;
}

input[name=password]:focus,
input[name=password_confirmation]:focus {
    background-position: right 14px center;
}

input[type=password]:focus {
    background-position: right 14px top 16px;
}

input[type=submit],
input[type=reset] {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
}

.pushme,
.pushblue {
    background-color: #10c680;
    border: 0;
    border-radius: 8px;
    color: white;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    font-weight: 400;
    flex-shrink: 0;
    height: 36px;
    line-height: 36px;
    padding: 0 16px;
    user-select: none;
    vertical-align: middle;
}

.pushblue {
    background-color: #1e63f3;
}

.pushme.red {
    background-color: #fc4949;
}

.pushme:disabled {
    background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M 1.3 10 A 8.7 8.7 0 0 1 18.7 10" fill="none" stroke="%23ffffff" stroke-width="2.6" stroke-linecap="round"><animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s" from="0 10 10" to="360 10 10" repeatCount="indefinite" /></path></svg>');
    background-position: center center;
    background-repeat: no-repeat;
    box-shadow: none;
    color: transparent;
    cursor: default;
}

.reset {
    background: #fff;
    border: 1px #d4d6da solid;
    border-radius: 8px;
    color: #2f3033;
    cursor: pointer;
    display: inline-block;
    font: inherit;
    height: 36px;
    line-height: 35px;
    margin-left: 10px;
    padding: 0 16px;
    text-align: center;
    vertical-align: middle;
}

.reset:hover,
.reset:focus {
    box-shadow: 0 5px 5px -3px rgba(47, 48, 51, 0.15);
}

.pushme.basic,
.reset.basic {
    margin-top: 30px;
    padding: 0;
    width: 110px;
}

.pushme.add {
    background-image: url('data:image/svg+xml,<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path d="M6 1V11M1 6H11" stroke="white" stroke-width="2" stroke-linecap="round"/></svg>');
    background-repeat: no-repeat;
    background-position: 14px center;
    background-size: 12px 12px;
    padding: 0 16px 0 36px;
}

#join-button {
    background-image: url('data:image/svg+xml,<svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 4H9" stroke="white" stroke-width="2" stroke-linecap="round"/><path d="M6 1L9 4L6 7" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 10px 8px;
    padding: 0 34px 0 16px;
}

.text-button {
    color: #262729;
    cursor: pointer;
    font-size: 12px;
    font-weight: 400;
    line-height: 36px;
    padding: 0 16px;
}

#mask {
    background: #191919;
    bottom: 0;
    display: none;
    left: 0;
    opacity: 0.9;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 100;
}

.popup {
    background: white;
    border-radius: 8px;
    box-shadow: 0 10px 20px -3px #151515;
    box-sizing: border-box;
    display: none;
    left: auto;
    padding: 30px;
    position: fixed;
    top: 70px;
    z-index: 150;
}

.popup .title {
    color: #262729;
    display: block;
    font-size: 18px;
    margin-bottom: 24px;
}

.close {
    background: url('data:image/svg+xml,<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.5 1.5L8.5 8.5M8.5 1.5L1.5 8.5" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center center;
    cursor: pointer;
    height: 24px;
    position: absolute;
    width: 24px;
}

#filters > .close,
.popup > .close {
    background-color: #828385;
    border-radius: 12px;
    box-shadow: 2px 2px 4px 0 rgba(47, 48, 51, 0.3);
    right: -10px;
    top: -11px;
}

.error-popup,
.success-popup {
    background: #ff4558;
    color: #fff;
    left: 0;
    padding: 20px;
    position: fixed;
    right: 0;
    text-align: center;
    top: 0;
    z-index: 200;
}

.success-popup {
    background: #02c768;
}

.error-popup .close,
.success-popup .close {
    right: 20px;
    top: 20px;
}

.message-alert {
    display: inline-block;
    color: #ff4558;
    width: 100%;
}

.message-success {
    color: #258e25;
    display: inline-block;
    font-weight: 400;
    margin-bottom: 15px;
    width: 100%;
}

.message-alert:empty,
.message-success:empty {
    display: none;
}

.simple,
.arrowdown {
    background: url('data:image/svg+xml,<svg width="7" height="4" viewBox="0 0 7 4" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1L3.5 3L6 1" stroke="%23A7A8A9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center center;
}

.arrowdown:hover {
    background-image: url('data:image/svg+xml,<svg width="7" height="4" viewBox="0 0 7 4" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1L3.5 3L6 1" stroke="%232f3033" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

.selector {
    height: 40px;
    margin: 4px 0 6px;
    position: relative;
    width: 260px;
}

.simple {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: white;
    background-position: right 15px top 18px;
    border: solid 1px #d4d6da;
    border-radius: 8px;
    border: solid 1px #d4d6da;
    color: #2f3033;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    height: 100%;
    line-height: 20px;
    padding: 0 15px;
    width: 100%;
}

.simple:hover,
.simple:active,
.simple:focus {
    box-shadow: 0 5px 5px -3px rgba(47, 48, 51, 0.1);
}

select.simple::-ms-expand {
    display: none;
}

.select-country .simple {
    padding: 0 15px 0 46px;
}

.flag-icon {
    background-color: #edeef0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 19px 19px;
    border: 2px white solid;
    border-radius: 12px;
    box-shadow: 2px 2px 4px 0 rgba(47, 48, 51, 0.1);
    height: 19px;
    overflow: hidden;
    width: 19px;
}

.selector .flag-icon {
    left: 14px;
    position: absolute;
    top: 8px;
}

.dark {
    color: #2f3033;
}

h1,
.goal-title {
    color: #262729;
    display: block;
    font-weight: 300;
    margin: 0;
    padding: 0;
}

.avatar {
    background-color: #eee;
    border-radius: 20px;
    color: #fff;
    display: inline-block;
    font-size: 16px;
    height: 40px;
    line-height: 41px;
    margin-right: 10px;
    overflow: hidden;
    padding: 0;
    text-align: center;
    text-shadow: 1px 1px 2px rgba(47, 48, 51, 0.15);
    text-transform: uppercase;
    vertical-align: middle;
    width: 40px;
}

.avatar img {
    display: block;
    width: 100%;
}

.avatar.yellow {
    background-image: linear-gradient(to bottom, #ffdb72, #ffb53e);
}

.avatar.red {
    background-image: linear-gradient(to bottom, #ff7b91, #ff4558);
}

.avatar.purple {
    background-image: linear-gradient(to bottom, #95abf1, #5c72df);
}

.avatar.blue {
    background-image: linear-gradient(to bottom, #27c4ff, #1191ff);
}

@media (min-width: 640px) {
    .pushme:hover,
    .pushme:focus,
    .pushblue:hover,
    .pushblue:focus {
        box-shadow: 0 5px 5px -3px rgba(47, 48, 51, 0.35);
    }

    .popup > .close:hover {
        background-color: #2f3033;
    }
}

/* Decorators  */

.grecaptcha-badge {
    z-index: 5;
}

.goal .name,
.goal-progress,
.article-date,
.article-author {
    margin-right: 7px;
    padding-right: 12px;
    position: relative;
}

.goal .name:after,
.goal-progress:after,
.article-author:after,
.article-date:after {
    background: #d0d0d0;
    content: '';
    display: block;
    height: 11px;
    position: absolute;
    right: 0;
    top: 6px;
    width: 1px;
}

/* Environment */

header {
    background: white;
    box-shadow: rgba(0, 0, 0, 0.1) 0 1px 0 0;
    height: 60px;
    left: 0;
    min-width: 980px;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 4;
}

header > div {
    height: 100%;
    margin: 0px auto;
    width: 940px;
}

#logo {
    color: #2f2f33;
    display: inline-block;
    float: left;
    font-size: 21px;
    font-weight: 500;
    height: 36px;
    line-height: 34px;
    margin: 12px 0 0 25px;
}

#logo:hover {
    color: #2f2f33;
}

#logo svg {
    height: 36px;
    margin-right: 8px;
    vertical-align: top;
    width: 36px;
}

#userinfo {
    float: right;
    height: 40px;
    margin: 10px 25px 0 0;
}

#login-button {
    display: inline-block;
    font-size: 14px;
    margin: 2px 0 0 0;
    vertical-align: middle;
}

#join-button {
    margin: 2px 0 0 6px;
}

#userinfo span {
    border-right: 1px #e1e1e2 solid;
    color: #262729;
    display: inline-block;
    font-weight: 500;
    height: 25px;
    line-height: 25px;
    margin-right: 10px;
    padding-right: 20px;
    vertical-align: middle
}

#userinfo .add {
    margin-left: 10px;
}

.arrowdown {
    cursor: pointer;
    display: inline-block;
    height: 25px;
    vertical-align: middle;
    width: 20px;
}

.drop-down,
#autocomplete {
    background: white;
    border-radius: 8px;
    box-shadow: 0 0 10px -3px #00000060;
    box-sizing: border-box;
    display: none;
    padding: 10px 0;
    position: absolute;
    width: 160px;
    z-index: 5;
}

.drop-down:after {
    border-style: solid;
    border-width: 0 6px 6px 6px;
    border-color: transparent transparent white transparent;
    content: "";
    display: block;
    height: 0;
    position: absolute;
    right: 15px;
    top: -4px;
    width: 0;
}

.drop-down a,
.drop-down span,
#autocomplete > div > div {
    color: #262729;
    display: block;
    font-size: 14px;
    height: 38px;
    line-height: 38px;
    padding: 0 20px;
}

.drop-down a:hover,
.drop-down span:hover,
#autocomplete > div > div:hover {
    background-color: #e9f0fe;
    color: #007ce6;
    cursor: pointer;
}

.drop-down hr {
    border: none;
    border-top: 1px #e1e1e2 solid;
    margin: 8px auto;
    width: 120px;
}

.arrowdown:hover .drop-down {
    display: block;
}

.arrowdown .drop-down {
    margin: 25px 0 0 -130px;
}

.column-stycky > div {
    background: white;
    border-radius: 8px;
}

#right-column .hint {
    display: none;
    padding-bottom: 28px;
    padding-top: 25px;
}

nav a {
    color: #262729;
    display: block;
    font-size: 15px;
    line-height: 46px;
    padding: 0 0 0 32px;
}

.to-goals {
    background: url('data:image/svg+xml,<svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 18H7" stroke="%23828385" stroke-width="2" stroke-linecap="round"/><path d="M3 17.5V1" stroke="%23828385" stroke-width="2" stroke-linecap="round"/><path d="M15.83 3H3.1C3.04477 3 3 3.04477 3 3.1V11.9C3 11.9552 3.04477 12 3.1 12H15.83C15.9063 12 15.9545 11.9181 15.9175 11.8514L13.527 7.54856C13.5102 7.51836 13.5102 7.48164 13.527 7.45144L15.9175 3.14856C15.9545 3.08191 15.9063 3 15.83 3Z" stroke="%23828385" stroke-width="2"/></svg>') no-repeat 1px 13px;
}

.to-info {
    background: url('data:image/svg+xml,<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 1C7 5.69442 4.31371 9.5 1 9.5C4.31371 9.5 7 13.3056 7 18C7 13.3056 9.68629 9.5 13 9.5C9.68629 9.5 7 5.69442 7 1Z" stroke="%23828385" stroke-width="2" stroke-linejoin="round"/><path d="M16 12C16 13.6569 15.1046 15 14 15C15.1046 15 16 16.3431 16 18C16 16.3431 16.8954 15 18 15C16.8954 15 16 13.6569 16 12Z" stroke="%23828385" stroke-width="2" stroke-linejoin="round"/><path d="M16 1C16 2.65685 15.1046 4 14 4C15.1046 4 16 5.34315 16 7C16 5.34315 16.8954 4 18 4C16.8954 4 16 2.65685 16 1Z" stroke="%23828385" stroke-width="2" stroke-linejoin="round"/></svg>') no-repeat left 13px;
}

.to-articles {
    background: url('data:image/svg+xml,<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 1H15C16.1046 1 17 1.89543 17 3V15C17 16.1046 16.1046 17 15 17H12V18.6123L7.31641 17.0518L7.16211 17H3C1.89543 17 1 16.1046 1 15V3C1 1.89543 1.89543 1 3 1Z" stroke="%23828385" stroke-width="2"/><rect x="4" y="4" width="6" height="2" rx="1" fill="%23828385"/><rect x="4" y="8" width="10" height="2" rx="1" fill="%23828385"/><rect x="4" y="12" width="9" height="2" rx="1" fill="%23828385"/></svg>') no-repeat left 13px;
}

.goal,
.universal,
.article-preview {
    background: white;
    border: 1px #dfdfdf solid;
    margin-top: 18px;
}

@media (min-width: 640px) {
    .goal,
    .universal,
    .article-preview {
        border-radius: 8px;
    }

    #right-column {
        margin-left: 18px;
        order: 3;
        padding: 18px 0 60px;
        width: 270px;
    }

    #right-column .hint .dark {
        text-transform: uppercase;
    }

    #right-column .hint.active {
        display: block;
    }

    .column-stycky {
        position: sticky;
        position: -webkit-sticky;
        top: 78px;
    }

    .column-stycky > div {
        border: 1px #dfdfdf solid;
        padding: 20px 32px 25px;
    }

    nav a:hover,
    nav .checked,
    .text-button:hover {
        background-color: #e9f0fe;
        border-radius: 8px;
        color: #007ce6;
    }

    nav a:hover,
    nav .checked {
        margin: 0 -11px 0;
        padding: 0 0 0 43px;
    }

    .to-articles:hover,
    .to-articles.checked {
        background: #e9f0fe url('data:image/svg+xml,<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 1H15C16.1046 1 17 1.89543 17 3V15C17 16.1046 16.1046 17 15 17H12V18.6123L7.31641 17.0518L7.16211 17H3C1.89543 17 1 16.1046 1 15V3C1 1.89543 1.89543 1 3 1Z" stroke="%231e63f3" stroke-width="2"/><rect x="4" y="4" width="6" height="2" rx="1" fill="%231e63f3"/><rect x="4" y="8" width="10" height="2" rx="1" fill="%231e63f3"/><rect x="4" y="12" width="9" height="2" rx="1" fill="%231e63f3"/></svg>') no-repeat 11px 13px;
    }

    .to-goals:hover,
    .to-goals.checked {
        background: #e9f0fe url('data:image/svg+xml,<svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 18H7" stroke="%231e63f3" stroke-width="2" stroke-linecap="round"/><path d="M3 17.5V1" stroke="%231e63f3" stroke-width="2" stroke-linecap="round"/><path d="M15.83 3H3.1C3.04477 3 3 3.04477 3 3.1V11.9C3 11.9552 3.04477 12 3.1 12H15.83C15.9063 12 15.9545 11.9181 15.9175 11.8514L13.527 7.54856C13.5102 7.51836 13.5102 7.48164 13.527 7.45144L15.9175 3.14856C15.9545 3.08191 15.9063 3 15.83 3Z" stroke="%231e63f3" stroke-width="2"/></svg>') no-repeat 12px 13px;
    }

    .to-info:hover,
    .to-info.checked {
        background: #e9f0fe url('data:image/svg+xml,<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 1C7 5.69442 4.31371 9.5 1 9.5C4.31371 9.5 7 13.3056 7 18C7 13.3056 9.68629 9.5 13 9.5C9.68629 9.5 7 5.69442 7 1Z" stroke="%231e63f3" stroke-width="2" stroke-linejoin="round"/><path d="M16 12C16 13.6569 15.1046 15 14 15C15.1046 15 16 16.3431 16 18C16 16.3431 16.8954 15 18 15C16.8954 15 16 13.6569 16 12Z" stroke="%231e63f3" stroke-width="2" stroke-linejoin="round"/><path d="M16 1C16 2.65685 15.1046 4 14 4C15.1046 4 16 5.34315 16 7C16 5.34315 16.8954 4 18 4C16.8954 4 16 2.65685 16 1Z" stroke="%231e63f3" stroke-width="2" stroke-linejoin="round"/></svg>') no-repeat 11px 13px;
    }

    #get-on-google,
    #download-on-apple {
        background: unset;
        color: #262729;
        display: block;
        padding: 6px 10px 6px 40px;
    }

    #download-on-apple {
        background: url('data:image/svg+xml,<svg width="18" height="21" viewBox="0 0 18 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.5889 6.07727L12.626 6.08118L12.6621 6.08215C13.2659 6.10104 13.8573 6.26071 14.3887 6.54797C14.6383 6.68292 14.8709 6.8449 15.084 7.02942C14.6664 7.42297 14.3069 7.87715 14.0215 8.38C13.541 9.2266 13.2831 10.1811 13.2705 11.1544H13.2695V11.1691C13.2708 12.2707 13.5969 13.3478 14.2061 14.2657C14.6385 14.9173 15.202 15.4655 15.8545 15.8839C15.5793 16.5652 15.2282 17.2146 14.8037 17.8165L14.7969 17.8263L14.79 17.837C14.3524 18.4917 13.9686 19.0347 13.5518 19.424C13.1555 19.7938 12.7966 19.9605 12.4023 19.9669H12.3955C11.9357 19.9775 11.6477 19.8582 11.1553 19.6486C10.6353 19.4272 9.965 19.1457 8.95605 19.1456C7.9536 19.1456 7.2805 19.4034 6.74023 19.629C6.2177 19.8473 5.92282 19.979 5.46289 19.9982C5.16418 20.0079 4.81158 19.8658 4.3584 19.4406C3.90351 19.0136 3.47554 18.4247 3.02344 17.7784C2.21017 16.5902 1.47031 14.8846 1.15723 13.1095C0.842815 11.3268 0.978724 9.59768 1.75195 8.25891L1.75977 8.24524C2.10633 7.62248 2.60833 7.09972 3.2168 6.72864C3.8216 6.35985 4.51096 6.15212 5.21875 6.12708L5.21973 6.12805C5.68483 6.11848 6.17938 6.27681 6.76953 6.50989C7.03547 6.61492 7.36109 6.7511 7.64844 6.84973C7.93552 6.94825 8.29933 7.05181 8.67871 7.05188C9.07516 7.05188 9.47323 6.92338 9.7666 6.8175C10.0406 6.71861 10.4674 6.54331 10.7422 6.43958C11.4179 6.18451 12.027 6.0184 12.5889 6.07727Z" stroke="%23828385" stroke-width="2"/><path d="M11.6357 3.36624C12.4184 2.42675 12.8039 1.21919 12.7106 0C11.5149 0.125579 10.4105 0.697022 9.61728 1.60047C9.22946 2.04182 8.93244 2.55529 8.74319 3.11151C8.55394 3.66772 8.47617 4.25579 8.51432 4.84208C9.11236 4.84823 9.704 4.71861 10.2447 4.46297C10.7854 4.20733 11.261 3.83234 11.6357 3.36624Z" fill="%23828385"/></svg>') no-repeat 8px 5px;
        margin: 0 0 1px -8px;
    }

    #get-on-google {
        background: url('data:image/svg+xml,<svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.04631 2.41181L8.1357 9.49999M8.1357 9.49999L11.7895 13.1531M8.1357 9.49999L1.04631 16.5875M8.1357 9.49999L11.7776 5.85874M1.06477 16.5875C1.28091 17.3985 2.0225 18 2.90156 18C3.25253 18 3.58301 17.9048 3.8659 17.7383L15.2092 11.1907C15.8054 10.8689 16.2105 10.2403 16.2105 9.5152C16.2105 8.79475 15.812 8.17014 15.2211 7.84693L3.8844 1.27166C3.59689 1.09914 3.26112 1 2.90222 1C2.02316 1 1.28091 1.59949 1.06477 2.41182C1.02247 2.56781 1 2.73173 1 2.90093V16.0991C1 16.2683 1.02181 16.4322 1.06477 16.5875Z" stroke="%23828385" stroke-width="2" stroke-linecap="round"/></svg>') no-repeat 9px 8px;
        margin: -4px  0 6px -8px;
    }

    #get-on-google:hover, 
    #download-on-apple:hover {
        background-color: #e9f0fe;
        color: #007ce6;;
        border-radius: 6px;
        mix-blend-mode: darken;
    }

    #get-on-google:hover {
        background-image: url('data:image/svg+xml,<svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.04631 2.41181L8.1357 9.49999M8.1357 9.49999L11.7895 13.1531M8.1357 9.49999L1.04631 16.5875M8.1357 9.49999L11.7776 5.85874M1.06477 16.5875C1.28091 17.3985 2.0225 18 2.90156 18C3.25253 18 3.58301 17.9048 3.8659 17.7383L15.2092 11.1907C15.8054 10.8689 16.2105 10.2403 16.2105 9.5152C16.2105 8.79475 15.812 8.17014 15.2211 7.84693L3.8844 1.27166C3.59689 1.09914 3.26112 1 2.90222 1C2.02316 1 1.28091 1.59949 1.06477 2.41182C1.02247 2.56781 1 2.73173 1 2.90093V16.0991C1 16.2683 1.02181 16.4322 1.06477 16.5875Z" stroke="%231e63f3" stroke-width="2" stroke-linecap="round"/></svg>');
    }

    #download-on-apple:hover {
        background-image: url('data:image/svg+xml,<svg width="18" height="21" viewBox="0 0 18 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.5889 6.07727L12.626 6.08118L12.6621 6.08215C13.2659 6.10104 13.8573 6.26071 14.3887 6.54797C14.6383 6.68292 14.8709 6.8449 15.084 7.02942C14.6664 7.42297 14.3069 7.87715 14.0215 8.38C13.541 9.2266 13.2831 10.1811 13.2705 11.1544H13.2695V11.1691C13.2708 12.2707 13.5969 13.3478 14.2061 14.2657C14.6385 14.9173 15.202 15.4655 15.8545 15.8839C15.5793 16.5652 15.2282 17.2146 14.8037 17.8165L14.7969 17.8263L14.79 17.837C14.3524 18.4917 13.9686 19.0347 13.5518 19.424C13.1555 19.7938 12.7966 19.9605 12.4023 19.9669H12.3955C11.9357 19.9775 11.6477 19.8582 11.1553 19.6486C10.6353 19.4272 9.965 19.1457 8.95605 19.1456C7.9536 19.1456 7.2805 19.4034 6.74023 19.629C6.2177 19.8473 5.92282 19.979 5.46289 19.9982C5.16418 20.0079 4.81158 19.8658 4.3584 19.4406C3.90351 19.0136 3.47554 18.4247 3.02344 17.7784C2.21017 16.5902 1.47031 14.8846 1.15723 13.1095C0.842815 11.3268 0.978724 9.59768 1.75195 8.25891L1.75977 8.24524C2.10633 7.62248 2.60833 7.09972 3.2168 6.72864C3.8216 6.35985 4.51096 6.15212 5.21875 6.12708L5.21973 6.12805C5.68483 6.11848 6.17938 6.27681 6.76953 6.50989C7.03547 6.61492 7.36109 6.7511 7.64844 6.84973C7.93552 6.94825 8.29933 7.05181 8.67871 7.05188C9.07516 7.05188 9.47323 6.92338 9.7666 6.8175C10.0406 6.71861 10.4674 6.54331 10.7422 6.43958C11.4179 6.18451 12.027 6.0184 12.5889 6.07727Z" stroke="%231e63f3" stroke-width="2"/><path d="M11.6357 3.36624C12.4184 2.42675 12.8039 1.21919 12.7106 0C11.5149 0.125579 10.4105 0.697022 9.61728 1.60047C9.22946 2.04182 8.93244 2.55529 8.74319 3.11151C8.55394 3.66772 8.47617 4.25579 8.51432 4.84208C9.11236 4.84823 9.704 4.71861 10.2447 4.46297C10.7854 4.20733 11.261 3.83234 11.6357 3.36624Z" fill="%231e63f3"/></svg>');
    }
}

.navtitle {
    border-top: 1px #e1e1e2 solid;
    color: #8c8d8e;
    font-size: 12px;
    margin: 20px 0 13px;
    padding-top: 12px;
}

.award-quick {
    border-bottom: 1px #e1e1e2 solid;
    margin: 0 0 18px;
    padding-bottom: 18px;
}

.award-quick:last-child {
    border: unset;
    margin: 0 0 14px;
    padding: unset;
}

.award-quick a:first-child {
    color: #262729;
    display: block;
    margin-bottom: 7px;
}

.award-quick .avatar {
    margin-right: 12px;
}

.wreath-right {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 22"><g transform="translate(-59.000000, -25.000000)"><g transform="translate(20.000000, 20.000000)"><path style="fill:%23D4D6DA;" d="M44.3,24.9c-1-0.6-2.5,0-3.6,1.2C41.5,27,43.3,26.5,44.3,24.9z M40.1,22.2 c-0.7,1.1-0.8,2.5,0,3.4l0,0l0,0C41.3,24.4,41.1,22.8,40.1,22.2z M45.9,21.9c-1.1-0.4-2.4,0.5-3.3,1.9 C43.5,24.5,45.2,23.7,45.9,21.9z M41.2,20.1c-0.5,1.2-0.3,2.6,0.7,3.2l0,0l0,0C42.8,22,42.3,20.5,41.2,20.1z M46.8,18.7 c-1.1-0.2-2.3,1-2.8,2.4C45,21.6,46.4,20.6,46.8,18.7z M41.9,17.9c-0.2,1.2,0.2,2.6,1.3,3C43.8,19.4,43,18,41.9,17.9z M47,15.4 c-1.2,0.1-2,1.4-2.3,2.9l0,0l0,0C45.8,18.6,47.1,17.3,47,15.4z M43.9,18.2c0.3-1.5-0.7-2.8-1.9-2.7C42.1,16.8,42.8,18,43.9,18.2 z M44.2,15.5c0-1.6-1.2-2.6-2.3-2.3C42.1,14.4,43,15.5,44.2,15.5z M46.6,12.1c-1.1,0.3-1.7,1.8-1.7,3.3l0,0l0,0 C46.1,15.5,47,14,46.6,12.1z M43.8,12.7c-0.3-1.6-1.7-2.3-2.8-1.8C41.6,12.1,42.7,12.9,43.8,12.7z M45.6,8.9 c-1,0.5-1.3,2.1-1,3.7l0,0l0,0C45.7,12.4,46.4,10.7,45.6,8.9z M42.9,9.9c-0.7-1.3-2.2-1.8-3-1.1c0.8,1.1,2,1.7,3.1,1.3l0,0 L42.9,9.9z M43.9,5.9c-0.9,0.7-0.8,2.4-0.2,3.8C44.8,9.3,45,7.5,43.9,5.9z M39.8,5c0.4,1.4,1.4,2.6,2.7,3.3 C42.7,6.9,41.3,5.2,39.8,5z"/></g></g></svg>') no-repeat left center;
    background-size: 8px 22px;
}

.wreath-left {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 22"><g transform="translate(-22.000000, -25.000000)"><g transform="translate(20.000000, 20.000000)"><path fill="%23D4D6DA" d="M4.7,24.9c1-0.6,2.5,0,3.6,1.2C7.5,27,5.7,26.5,4.7,24.9z M8.8,22.2 c0.7,1.1,0.8,2.5,0,3.4l0,0l0,0C7.7,24.4,7.8,22.8,8.8,22.2z M3.1,21.9c1.1-0.4,2.4,0.5,3.3,1.9C5.5,24.5,3.8,23.7,3.1,21.9z M7.8,20.1c0.5,1.2,0.3,2.6-0.7,3.2l0,0l0,0C6.2,22,6.7,20.5,7.8,20.1z M2.2,18.7c1.1-0.2,2.3,1,2.8,2.4 C4,21.6,2.6,20.6,2.2,18.7z M7.1,17.9c0.2,1.2-0.2,2.6-1.3,3C5.2,19.4,6,18,7.1,17.9z M2,15.4c1.2,0.1,2,1.4,2.3,2.9l0,0l0,0 C3.2,18.6,1.9,17.3,2,15.4z M5.1,18.2c-0.3-1.5,0.7-2.8,1.9-2.7C6.9,16.8,6.2,18,5.1,18.2z M4.8,15.5c0-1.6,1.2-2.6,2.3-2.3 C6.9,14.4,6,15.5,4.8,15.5z M2.4,12.1c1.1,0.3,1.7,1.8,1.7,3.3l0,0l0,0C2.9,15.5,1.9,14,2.4,12.1z M5.1,12.7 c0.3-1.6,1.7-2.3,2.8-1.8C7.4,12.1,6.3,12.9,5.1,12.7z M3.4,8.9c1,0.5,1.3,2.1,1,3.7l0,0l0,0C3.2,12.4,2.6,10.7,3.4,8.9z M6.1,9.9c0.7-1.3,2.2-1.8,3-1.1c-0.8,1.1-2,1.7-3.1,1.3l0,0L6.1,9.9z M5.1,5.9C6,6.6,5.9,8.3,5.3,9.7C4.2,9.3,3.9,7.5,5.1,5.9z M9.2,5C8.8,6.4,7.8,7.6,6.5,8.3C6.3,6.9,7.7,5.2,9.2,5z"/></g></g></svg>') no-repeat left center;
    background-size: 8px 22px;
}

.award-label {
    background-position: 39px center;
    color: #8c8d8e;
    font-size: 12px;
    margin-left: -3px;
    margin-top: -8px;
}

.award-label .wreath-left {
    display: inline-block;
    padding-left: 7px;
}

.award-info {
    margin: 0 0 35px;
}

.award-info:last-child {
    margin: 0 0 10px;
}

.award-info .award-label {
    float: left;
    margin: -6px 0 0 0;
}

.award-icon {
    background: #eee;
    border: 2px white solid;
    border-radius: 20px;
    display: inline-block;
    height: 29px;
    margin-right: 18px;
    vertical-align: middle;
    width: 29px;
}

.award-story {
    background: #ffe46b url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 14" style="enable-background:new 0 0 16 14;" xml:space="preserve"><g transform="translate(-37.000000, -28.000000)"><g transform="translate(20.000000, 20.000000)"><g id="awards"><path fill="%23BC9E28" d="M26.3,8.9c0.6,0,1.2,0.3,1.5,0.9l0,0l0.4,0.8h1.6c1.3,0,2.4,1,2.5,2.4l0,0v6.2 c0,1.3-1.1,2.4-2.4,2.4l0,0H19.6c-1.3,0-2.4-1.1-2.4-2.4l0,0V13c0-1.3,1.1-2.4,2.4-2.4l0,0h1.6l0.4-0.8c0.3-0.5,0.8-0.9,1.5-0.9 l0,0H26.3z M24.8,12.6c-1.7,0-3.2,1.4-3.2,3.2s1.4,3.2,3.2,3.2c1.7,0,3.2-1.4,3.2-3.2S26.6,12.6,24.8,12.6z M24.9,14 c1,0,1.7,0.8,1.7,1.7s-0.8,1.7-1.7,1.7s-1.7-0.8-1.7-1.7S23.9,14,24.9,14z M29.3,12.4c-0.3,0-0.6,0.3-0.6,0.6 c0,0.3,0.3,0.6,0.6,0.6c0.3,0,0.6-0.3,0.6-0.6C29.9,12.6,29.6,12.4,29.3,12.4z"/></g></g></g></svg>') no-repeat 7px 6px;
    background-size: 16px 14px;
}

.award-power {
    background: #fcd5ad url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 15"><g transform="translate(-40.000000, -67.000000)"><g transform="translate(20.000000, 59.000000)"><linearGradient id="lt-icon" gradientUnits="userSpaceOnUse" x1="-582.1692" y1="374.9333" x2="-582.1692" y2="373.9333" gradientTransform="matrix(9.0003 0 0 -15 5264.1997 5632)"><stop offset="0" style="stop-color:%23DCA972"/><stop offset="1" style="stop-color:%23B7703E"/></linearGradient><path id="lt-icon" fill="url(%23lt-icon)" d="M28.9,14.3c-0.1-0.2-0.3-0.3-0.4-0.3h-3.4l1.3-5.4c0.1-0.2-0.1-0.5-0.3-0.6 c-0.2-0.1-0.5,0-0.6,0.2l-5.5,8c-0.1,0.2-0.1,0.4,0,0.5c0.1,0.2,0.3,0.3,0.4,0.3h2.9l-0.9,5.4c0,0.2,0.1,0.5,0.3,0.5 c0.1,0,0.1,0,0.2,0c0.2,0,0.3-0.1,0.4-0.2l5.5-8C29,14.6,29,14.4,28.9,14.3z"/></g></g></svg>') no-repeat center center;
    background-size: 9px 15px;
}

.award-mgoals {
    background: #dbe3ff url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 15"><g transform="translate(-39.000000, -106.000000)"><g transform="translate(20.000000, 98.000000)"><g transform="translate(9.087610, 0.000000)"><linearGradient id="flg-icon" gradientUnits="userSpaceOnUse" x1="-608.5032" y1="374.9333" x2="-608.5032" y2="373.9333" gradientTransform="matrix(11.8421 0 0 -15 7221.7925 5632)"><stop offset="0" style="stop-color:%2395ABF1"/><stop offset="1" style="stop-color:%235C72DF"/></linearGradient><path style="fill-rule:evenodd;clip-rule:evenodd;fill:url(%23flg-icon);" d="M11.5,19.1v3.2c0,0.4-0.4,0.8-0.8,0.8c-0.4,0-0.8-0.4-0.8-0.8l0,0v-3.2H11.5z M21.8,10.4 l-1.2,3.2c-0.2,0.5-0.2,1,0,1.4l1.2,3.2H9.9v-1.6l2.4,0v-4.7l-2.4,0v-1.6H21.8z M11.5,12.7v3.2H9.9v-3.2H11.5z M10.7,8 c0.4,0,0.8,0.4,0.8,0.8l0,0v0.8H9.9V8.8C9.9,8.4,10.3,8,10.7,8z"/></g></g></g></svg>') no-repeat center center;
    background-size: 12px 15px;
}

.award-mdoom {
    background: #ded299 url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 12"><g transform="translate(-37.000000, -146.000000)"><g transform="translate(20.000000, 137.000000)"><linearGradient id="cw-icon" gradientUnits="userSpaceOnUse" x1="-612.3266" y1="365.7273" x2="-612.3266" y2="364.7273" gradientTransform="matrix(15.2581 0 0 -11 9367.5459 4032.5)"><stop offset="0" style="stop-color:%23C1B87E"/><stop offset="1" style="stop-color:%239C8F51"/></linearGradient><path fill="url(%23cw-icon)" d="M24.6,9.5c-0.5,0-0.9,0.4-0.9,0.9s0.4,0.9,0.9,0.9c0.5,0,0.9-0.4,0.9-0.9S25.1,9.5,24.6,9.5z M24.3,11.6l-2.7,3.8l-3.2-1.2c-0.1,0.1-0.3,0.2-0.4,0.3l1.6,4.7h9.9l1.6-4.7c-0.2-0.1-0.3-0.1-0.4-0.3l-3.2,1.2L25,11.6 c-0.1,0-0.2,0-0.3,0C24.5,11.6,24.4,11.6,24.3,11.6L24.3,11.6z M17.7,12.7c-0.4,0-0.7,0.3-0.7,0.7c0,0.4,0.3,0.7,0.7,0.7 s0.7-0.3,0.7-0.7C18.4,13,18.1,12.7,17.7,12.7z M31.5,12.7c-0.4,0-0.7,0.3-0.7,0.7c0,0.4,0.3,0.7,0.7,0.7s0.7-0.3,0.7-0.7 C32.3,13,31.9,12.7,31.5,12.7z M19.7,19.4v1.1h9.9v-1.1H19.7z"/></g></g></svg>') no-repeat center 7px;
    background-size: 16px 12px;
}

.award-travel {
    background: #cee8ff url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 13"><g transform="translate(-38.000000, -185.000000)"><g transform="translate(20.000000, 176.000000)"><linearGradient id="ap-icon" gradientUnits="userSpaceOnUse" x1="-605.5014" y1="371" x2="-605.5014" y2="370" gradientTransform="matrix(13.0004 0 0 -13 7896.2349 4832.0005)"><stop offset="0" style="stop-color:%2327C4FF"/><stop offset="1" style="stop-color:%231191FF"/></linearGradient><path fill="url(%23ap-icon)" d="M20.7,19.7C20.7,19.8,20.8,19.8,20.7,19.7l0.7,1.8c0.1,0.2,0.3,0.2,0.4,0.1 c0.7-0.7,0.8-0.7,0.7-0.9l-0.3-1.6c0-0.1-0.2-0.5-0.1-0.5c0.8-0.5,2.7-1.9,3.2-2.4c0,0,0.1,0,0.1,0c0,0,0.1,0,0.1,0.1l2.4,5.5 c0,0,0.1,0.1,0.1,0.1c0,0,0.1,0,0.1,0l0.6-0.6c0.3-0.3,0.4-0.6,0.3-1L28,14.2c0-0.1,0-0.2,0.1-0.3l1.8-1.8 c0.5-0.5,1.5-2.3,1-2.9c0,0,0,0-0.1-0.1c0,0-0.1-0.1-0.1-0.1c-0.6-0.6-2.3,0.4-2.9,1L26,11.9C26,12,25.9,12,25.8,12l-6.1-1.2 c-0.4-0.1-0.7,0-1,0.3L18,11.8c0,0,0,0.1,0,0.1c0,0,0,0.1,0.1,0.1l5.5,2.4c0,0,0.1,0.1,0.1,0.1c0,0,0,0.1,0,0.1 c-0.4,0.5-1.9,2.4-2.4,3.2c-0.1,0.1-0.4,0-0.5-0.1l-1.6-0.3c-0.2,0-0.2,0-0.9,0.7c-0.1,0.1-0.1,0.3,0.1,0.4l1.8,0.7 c0,0,0,0,0.1,0L20.7,19.7L20.7,19.7z"/></g></g></svg>') no-repeat center center;
    background-size: 13px 13px;
}

.award-sport {
    background: #bbefdb url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><g transform="translate(-38.000000, -224.000000)"><g transform="translate(20.000000, 215.000000)"><g transform="translate(9.087610, 0.000000)"><linearGradient id="rn-icon" gradientUnits="userSpaceOnUse" x1="-615.0803" y1="374.1429" x2="-615.0803" y2="373.1429" gradientTransform="matrix(13.3644 0 0 -14 8235.7676 5247.0005)"><stop offset="0" style="stop-color:%2373D7AD"/><stop offset="1" style="stop-color:%2310C680"/></linearGradient><path fill="url(%23rn-icon)" d="M10,17l2.1,0.5l1-1.3c0,0,0.1-0.1,0.1-0.1c0.1,0,0.1,0,0.1,0.1c0.1,0.4,0.2,0.7,0.5,1 l0.3,0.4c0.1,0.1,0.1,0.2,0,0.3L13.1,19c-0.2,0.2-0.5,0.3-0.8,0.3l-2.7-0.6c-0.2-0.1-0.4-0.2-0.5-0.4C8.9,18,8.9,17.8,9,17.5 C9.1,17.1,9.5,16.9,10,17z M19.2,12.1c0.8,0.2,1.7-0.3,1.9-1.2c0.1-0.6-0.1-1.3-0.6-1.6s-1.2-0.4-1.7,0s-0.8,1-0.7,1.6 C18.1,11.4,18.6,11.9,19.2,12.1L19.2,12.1z M14.4,10.4c-0.2-0.1-0.5,0-0.7,0.2l-1.8,1.8c-0.3,0.3-0.3,0.7-0.1,1 c0.1,0.1,0.3,0.2,0.5,0.2c0.2,0,0.4-0.1,0.5-0.2l1.5-1.5l1.2,0.6l-1.3,1.9c-0.4,0.7-0.4,1.6,0.2,2.2l1.8,2.3L15,21.8 c-0.2,0.3-0.1,0.8,0.2,1c0.1,0.1,0.2,0.2,0.4,0.2c0,0,0.1,0,0.1,0c0.4,0,0.7-0.2,0.9-0.5l1.5-3.3c0.1-0.3,0.1-0.6-0.1-0.9 l-1.2-2.2l1.1-1.9l0.5,1.1c0.1,0.2,0.3,0.4,0.5,0.4l0.1,0l2.5,0.3c0.2,0,0.4,0,0.5-0.1c0.1-0.1,0.2-0.3,0.3-0.5 c0-0.4-0.3-0.7-0.6-0.7l-2.1-0.3L19,13.1c-0.1-0.3-0.4-0.6-0.7-0.8c-1.1-0.8-2.4-1.4-3.7-1.8L14.4,10.4z"/></g></g></g></svg>') no-repeat center 7px;
    background-size: 14px 14px;
}

.open-photo,
.goal-more {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5 8"><path d="M1.9 0.8l2.7 2.7c0.1 0.1 0.1 0.1 0.1 0.2 0.1 0.2 0.1 0.5-0.1 0.7l-2.7 2.7c-0.2 0.2-0.6 0.2-0.8 0 -0.2-0.2-0.2-0.6 0-0.8l2.3-2.3L1 1.7c-0.2-0.2-0.2-0.6 0-0.8S1.6 0.6 1.9 0.8z" fill="%23A7A8A9"/></svg>') no-repeat right center;
    background-size: 5px auto;
    color: #8c8d8e;
    font-size: 12px;
    padding-right: 10px;
}

.open-photo:hover,
.goal-more:hover {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5 8"><path d="M1.9 0.8l2.7 2.7c0.1 0.1 0.1 0.1 0.1 0.2 0.1 0.2 0.1 0.5-0.1 0.7l-2.7 2.7c-0.2 0.2-0.6 0.2-0.8 0 -0.2-0.2-0.2-0.6 0-0.8l2.3-2.3L1 1.7c-0.2-0.2-0.2-0.6 0-0.8S1.6 0.6 1.9 0.8z" fill="%232f3033"/></svg>');
    color: #2f3033;
}

.border-header-mobile {
    display: none;
}

footer {
    color: #8c8d8e;
    font-size: 12px;
    margin-top: 20px;
    padding: 0 32px;
    width: 70%;
}

footer a {
    color: #8c8d8e;
    margin-right: 10px;
    text-wrap: nowrap;
}

footer a:hover {
    color: #2f3033;
}

main,
#content {
    align-self: stretch;
    box-sizing: border-box;
    padding: 60px 0 20px;
    width: 602px;
}

/* Goals */

.goal {
    padding: 24px 30px 27px;
    position: relative;
}

.goal .avatar {
    float: left;
    margin: 3px 15px 0 0;
}

.goal .wreath-right {
    background-position: right center;
    float: left;
    margin: 9px 13px 0 -20px;
    padding-right: 0px;
}

.goal .wreath-right div {
    margin-right: 7px;
}

.goal-title {
    font-size: 18px;
}

.goal-title a,
.article-preview a {
    color: #262729;
}

.goal .name {
    line-height: 22px;
}

.goal-subheader {
    align-items: flex-start;
    display: flex;
    margin-top: 2px;
}

.goal-progress {
    color: #8c8d8e;
    white-space: nowrap;
}

.goal-progress span {
    display: inline-block;
    font-size: 12px;
    vertical-align: top;
}

.goal-progress div {
    color: #2f3033;
    display: inline-block;
    font-weight: 500;
    line-height: 22px;
    margin: 0 0 0 4px;
    vertical-align: top;
}

.goal-menu {
    background: url('data:image/svg+xml,<svg width="14" height="4" viewBox="0 0 14 4" xmlns="http://www.w3.org/2000/svg"><circle cx="2" cy="2" r="2" fill="%23A7A8A9"/><circle cx="12" cy="2" r="2" fill="%23A7A8A9"/></svg>') no-repeat right center;
    background-size: 14px 4px;
    cursor: pointer;
    flex-shrink: 0;
    font-weight: 400;
    height: 23px;
    width: 25px;
}

.goal-menu:hover {
    background-image: url('data:image/svg+xml,<svg width="14" height="4" viewBox="0 0 14 4" xmlns="http://www.w3.org/2000/svg"><circle cx="2" cy="2" r="2" fill="%232F3033"/><circle cx="12" cy="2" r="2" fill="%232F3033"/></svg>');
}

.goal-menu .drop-down {
    margin: 24px 0 0 -125px;
    width: 170px;
}

.goal-menu:hover .drop-down {
    display: block;
}

.goal-date {
    color: #8c8d8e;
    display: inline-block;
    flex-grow: 1;
    font-size: 12px;
    margin-left: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.poster {
    background: #f3f3f3;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    margin: 10px 0 0;
    max-height: 600px;
    overflow: hidden;
    position: relative;
}

.blur {
    background-color: #f3f3f3;
    background-position: center;
    background-size: 100%;
    display: block;
    filter: blur(8px);
    height: 102%;
    opacity: 0.75;
    position: absolute;
    top: -5px;
    width: 102%;
}

.poster img {
    display: block;
    height: auto;
    max-height: 600px;
    max-width: 100%;
    z-index: 1;
}

.goal-details {
    height: 34px;
    line-height: 34px;
    margin: 5px 0 6px;
}

.like {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="18" viewBox="0 0 20 18"><path d="M10.1 17L10.9 16.2C15.7 11.8 17.2 10.3 18.3 8.4 18.8 7.4 19 6.5 19 5.5 19 4.4 18.5 3.2 17.7 2.3 16.8 1.5 15.7 1 14.5 1 13.1 1 11.7 1.7 10.8 2.7L10 3.6 9.3 2.7C8.3 1.7 7 1 5.5 1 4.3 1 3.2 1.5 2.3 2.3 1.5 3.2 1 4.4 1 5.5 1 6.5 1.3 7.3 1.8 8.4 2.8 10.3 4.3 11.9 9.1 16.2L10.1 17Z" style="stroke-width:2;stroke:%23828385;fill:none"/></svg>') no-repeat 1px center;
    background-size: auto 18px;
}

.like {
    color: #646464;
    cursor: pointer;
    display: inline-block;
    font-weight: 400;
    height: 34px;
    margin-left: -1px;
    padding-left: 28px;
    vertical-align: middle
}

.like:empty {
    padding-left: 24px;
}

.like:active {
    background-size: auto 20px;
    background-position: left center;
}

.like.liked {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="18" viewBox="0 0 20 18"><path d="M10.1 17L10.9 16.2C15.7 11.8 17.2 10.3 18.3 8.4 18.8 7.4 19 6.5 19 5.5 19 4.4 18.5 3.2 17.7 2.3 16.8 1.5 15.7 1 14.5 1 13.1 1 11.7 1.7 10.8 2.7L10 3.6 9.3 2.7C8.3 1.7 7 1 5.5 1 4.3 1 3.2 1.5 2.3 2.3 1.5 3.2 1 4.4 1 5.5 1 6.5 1.3 7.3 1.8 8.4 2.8 10.3 4.3 11.9 9.1 16.2L10.1 17Z" style="fill:%23FF4558;stroke-width:2;stroke:%23FF4558"/></svg>');
}

.like-avatars,
.comment-like-avatars {
    display: inline-block;
    margin: 0 0 0 3px;
    user-select: none;
    vertical-align: middle;
}

.like-avatars .avatar,
.comment-like-avatars .avatar {
    font-size: 11px;
    line-height: 21px;
    border: 2px solid white;
    float: none;
    height: 20px;
    margin-right: -8px;
    margin-top: -2px;
    position: relative;
    width: 20px;
}

.like-avatars .avatar:first-child,
.comment-like-avatars .avatar:first-child {
    z-index: 3;
}

.like-avatars .avatar:nth-child(2),
.comment-like-avatars .avatar:nth-child(2) {
    z-index: 2;
}

.like-avatars .avatar:last-child,
.comment-like-avatars .avatar:last-child {
    margin-right: 0px;
    z-index: 1;
}

.like-avatars .avatar:hover,
.comment-like-avatars .avatar:hover {
    position: relative;
    z-index: 4;
}

.comment-counter {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="18" viewBox="0 0 20 18"><path d="M3.4 17L7.3 15.2 7.6 15.3C8.4 15.5 9.2 15.6 10 15.6 15 15.6 19 12.3 19 8.3 19 4.3 15 1 10 1 5 1 1 4.3 1 8.3 1 10.2 1.9 12 3.4 13.3L3.8 13.8 3.4 17Z" style="stroke-width:2;stroke:%23828385;fill:none;"/></svg>') no-repeat left center;
    background-size: auto 18px;
}

.comment-counter {
    color: #646464;
    display: inline-block;
    font-weight: 400;
    height: 34px;
    margin-left: 20px;
    padding-left: 27px;
    vertical-align: middle
}

.comment-counter:empty {
    padding-left: 22px;
}

.comment-counter:hover {
    color: #646464;
}

.photo-counter {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="21" height="18" viewBox="0 0 21 18" fill="none"><path d="M17.7 3.4H15.4C15 3.4 14.6 3.2 14.4 2.8L13.9 1.7C13.6 1.3 13.2 1 12.7 1H8.3C7.8 1 7.4 1.2 7.1 1.7L6.6 2.8C6.4 3.2 6 3.4 5.6 3.4H3.3C2 3.4 1 4.5 1 5.7V14.7C1 16 2 17 3.3 17H17.7C18.9 17 20 16 20 14.7V5.7C20 4.5 19 3.4 17.7 3.4ZM10.7 13.3C8.8 13.3 7.4 11.7 7.4 9.9 7.4 7.9 8.8 6.4 10.7 6.4 12.6 6.4 14.1 8 14.1 9.9 14.1 11.8 12.5 13.3 10.7 13.3Z" style="stroke-width:2;stroke:%23828385"/></svg>') no-repeat left center;
    background-size: auto 18px;
    color: #646464;
    display: inline-block;
    height: 34px;
    margin-left: 21px;
    padding-left: 32px;
    vertical-align: middle
}

.photo-counter:empty {
    display: none;
}

.share-button {
    background: url('data:image/svg+xml,<svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 11V1" stroke="%23828385" stroke-width="2" stroke-linecap="round"/><path d="M5 5L9 1L13 5" stroke="%23828385" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M1 12V13.5C1 14.8807 2.11929 16 3.5 16H14.5C15.8807 16 17 14.8807 17 13.5V12" stroke="%23828385" stroke-width="2" stroke-linecap="round"/></svg>') no-repeat right center;
    cursor: pointer;
    display: inline-block;
    float: right;
    height: 34px;
    vertical-align: middle;
    width: 28px;
}

.goal-description {
    border-top: 1px #e1e1e2 solid;
    font-size: 14px;
    padding: 11px 0 0;
}

.goal-description:empty {
    padding-top: 10px;
}

.goal-description:last-child:empty {
    border-top: 1px solid white;;
    margin: -6px 0;
    padding: 0;
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 15px 10px;
    margin: 17px 0 0;
}

#right-column .tags {
    margin: 16px 0 34px;
}

.tags a {
    border: 1px #dfdfdf solid;
    border-radius: 8px;
    color: #262729;
    display: inline-block;
    font-size: 12px;
    font-weight: 400;
    line-height: 30px;
    padding: 0 12px;
    user-select: none;
}

.tags a:hover {
    box-shadow: 0 5px 5px -3px rgba(47, 48, 51, 0.15);
}

.tag-title {
    font-weight: 400;
    margin: 18px 0 0;
    padding: 0;
}

.subtitle {
    color: #262729;
    font-size: 18px;
    margin-top: 20px;
    padding: 0 0 27px;
}

.load-items {
    display: block;
    font-size: 13px;
    margin: 18px 0;
    text-align: center;
}

/* Filters & Introduction */

#filters-button {
    background: url('data:image/svg+xml,<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><path d="M2.5 1V13" stroke="%23828385" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M11.5 1V13" stroke="%23828385" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><rect y="7" width="5" height="4" rx="1" fill="%23828385"/><rect x="9" y="3" width="5" height="4" rx="1" fill="%23828385"/></svg>') no-repeat 4px center;
    left: 50%;
    position: fixed;
    top: 12px;
    z-index: 5;
}

#filters {
    background: #fff;
    border-radius: 8px;
    left: 50%;
    margin: -130px 0 0 -130px;
    padding: 35px 30px 30px;
    position: fixed;
    text-align: center;
    top: 50%;
    width: 200px;
    z-index: 150
}

#filters .selector {
    margin: 0 0 10px;
    width: 100%
}

#filters .pushme {
    margin-top: 10px
}

.universal {
    padding: 18px 30px;
}

.text a:hover {
    background: #f0f2f7;
    border-radius: 4px;
    margin: 0 -3px;
    mix-blend-mode: darken;
    padding: 4px 3px;
}

#introduction {
    min-height: unset;
    padding-bottom: 44px;
    padding-top: 32px;
    position: relative;
}

#introduction h1 {
    font-size: 20px;
    line-height: 21px;
    margin: 0 0 24px;
}

#tag-intro {
    min-height: unset;
    padding-bottom: 18px;
    padding-top: 18px;
}

#tag-intro h1 {
    display: inline-block;
    font-size: 20px;
    margin: 0;
}

.tag-details {
    color: #8c8d8e;
    display: inline-block;
    font-size: 12px;
    margin: 7px 0 0 20px;
    vertical-align: top;
}

@media (min-width: 640px) {
    #filters-button {
        background-position: 15px center;
        margin-left: -176px;
        padding-left: 39px;
    }

    #filters-button:hover {
        background: #e9f0fe url('data:image/svg+xml,<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><path d="M2.5 1V13" stroke="%231e63f3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M11.5 1V13" stroke="%231e63f3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><rect y="7" width="5" height="4" rx="1" fill="%231e63f3"/><rect x="9" y="3" width="5" height="4" rx="1" fill="%231e63f3"/></svg>') no-repeat 15px center;
    }

    #introduction img {
        border-radius: 5px;
        float: left;
        margin: 3px 24px 0 0;
        width: 158px;
    }

    #introduction .text-button {
        position: absolute;
        right: 30px;
        top: 28px;
    }
}

/* Comments */

.comments {
    padding-bottom: 10px;
}

#comment-start {
    background: #eeeff1;
    border-radius: 9px;
    box-shadow: inset 0 2px 3px 0 rgba(47, 48, 51, 0.1);
    box-sizing: border-box;
    color: #828385;
    cursor: pointer;
    height: 50px;
    line-height: 50px;
    padding-left: 24px;
}

#comment-form {
    display: none;
    position: relative;
}

#comment-form textarea {
    margin-top: 0;
    padding-left: 24px;
    padding-top: 14px;
}

#comment-form textarea:focus {
    padding-left: 22px;
    padding-top: 12px;
}

.align-right {
    margin-top: 2px;
    text-align: right;
}

#comment-form .pushme {
    margin-top: 6px;
}

.comment-group {
    border: 1px #e1e1e2 solid;
    border-radius: 8px;
    margin-top: 20px;
    padding: 8px 20px 7px;
}

.comment-group #comment-form {
    margin-top: 12px;
}

.comment {
    color: #2f3033;
    padding: 10px 0 6px;
    position: relative;
}

.comment-header {
    display: flex;
    margin-bottom: 6px;
}

.comment .avatar {
    margin-top: 2px;
}

.comment .time {
    color: #a7a8a9;
    display: block;
    font-size: 12px;
}

.comment-reply,
.comment-like {
    color: #a7a8a9;
    cursor: pointer;
    display: inline-block;
    font-size: 12px;
    margin: 4px 16px 0 0;
    user-select: none;
}

.comment-reply:hover,
.comment-like:hover {
    color: #2f3033;
}

.comment-like.liked {
    color: #ff4558;
}

.comment-like .avatar:first-child {
    margin-left: 6px;
}

.inherit-1,
.inherit-2,
.inherit-3,
.inherit-4 {
    border-left: 1px #d4d6da solid;
    padding-left: 20px;
}

.inherit-2 {
    margin-left: 20px;
}

.inherit-3,
.inherit-4 {
    margin-left: 40px;
}

.inherit-2:before,
.inherit-3:before,
.inherit-3:after,
.inherit-4:before,
.inherit-4:after {
    border-left: 1px #d4d6da solid;
    bottom: 0;
    content: '';
    display: block;
    height: 100%;
    margin-left: -41px;
    position: absolute;
    top: 0;
    width: 0;
}

.inherit-3:after,
.inherit-4:after {
    margin-left: -61px;
}

.inherit-1:last-child,
.inherit-2:last-child,
.inherit-3:last-child,
.inherit-4:last-child {
    margin-bottom: 9px;
}

/* Emoji */

.align-right .pushme {
    margin-left: 10px;
    margin-top: 0;
}

span.emoji-add {
    border-radius: 16px;
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
    height: 30px;
    line-height: 32px;
    margin: 0;
    padding: 0;
    text-align: center;
    vertical-align: middle;
    width: 30px;
}

.emoji-add:hover {
    background-color: #e9f0fe;
}

#more-emoji {
    background-position: center;
    border: 0;
    display: inline-block;
    float: none;
    vertical-align: middle;
}

#emojipicker {
    height: 260px;
    margin-top: -130px;
    padding: 10px;
    text-align: center;
    top: 50%;
    width: 320px;
}

#emojipicker > div:first-child {
    height: 100%;
    overflow-y: scroll;
    scrollbar-width: none;
}

/* Popups */

#login,
#join {
    text-align: center;
}

@media (min-width: 640px) {
    #login {
        background: #fff url(https://storage.googleapis.com/goalposters.io/ui/goalposters.io-login-illustration.jpg) no-repeat top left;
        background-size: 340px auto;
        margin-top: -235px;
        padding: 38px 40px 42px 380px;
        top: 50%;
        width: 680px;
    }

    #join {
        background: #fff url(https://storage.googleapis.com/goalposters.io/ui/goalposters.io-join-illustration.jpg) no-repeat top left;
        background-size: 352px auto;
        margin-top: -322px;
        padding: 30px 40px 38px 392px;
        top: 50%;
        width: 692px;
    }
}

#join .selector {
    margin-left: auto;
    margin-right: auto;
}

.popup-logo {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 450 450"><path d="M450 175v51.3l0 2.2 0 0.1 0 0.1c0 0.1 0 0.2 0 0.3l0 2.2 0 0.5c0 1-0.1 2-0.1 3l0 0.7 0 0.2c0 0.4 0 0.8-0.1 1.2l-0.1 0.9 -0.1 1c0 0.7-0.1 1.3-0.1 2l-0.1 1 0 0.2c0 0.7-0.1 1.3-0.2 2l0 0.1 -0.1 0.7c-10 113.7-104.5 203.2-220.4 205.1l-3.7 0V350c51.3 0 95.3-30.9 114.6-75L225 275V175H450z" fill="%2348DD8F"/><path d="M225 0v100c-68.3 0-123.9 54.9-125 122.9l0 2.1H0C0 100.7 100.7 0 225 0z" fill="%232F3033"/></svg>') no-repeat left center;
    background-size: 36px 36px;
    color: #2f2f33;
    display: inline-block;
    font-size: 21px;
    font-weight: 500;
    height: 36px;
    line-height: 34px;
    margin: 0 0 20px;
    padding-left: 50px;
    text-align: left;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2),
        only screen and (min-aspect-ratio: 2) { 
    #login {background-image: url(https://storage.googleapis.com/goalposters.io/ui/goalposters.io-login-illustration_x2.jpg);}
    #join {background-image: url(https://storage.googleapis.com/goalposters.io/ui/goalposters.io-join-illustration_x2.jpg);}
}

.apple-login,
.google-login {
    border: 1px solid #d4d6da;
    border-radius: 8px;
    color: #262729;
    cursor: pointer;
    display: inline-block;
    font-size: 13px;
    height: 38px;
    line-height: 37px;
    user-select: none;
    width: 260px;
}

.apple-login:before,
.google-login:before {
    display: inline-block;
    content: '';
    height: 20px;
    margin: -2px 8px 0 0;
    vertical-align: middle;
    width: 20px;
}

.apple-login:before {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="814" height="1000"><path d="M788.1 340.9c-5.8 4.5-108.2 62.2-108.2 190.5 0 148.4 130.3 200.9 134.2 202.2-.6 3.2-20.7 71.9-68.7 141.9-42.8 61.6-87.5 123.1-155.5 123.1s-85.5-39.5-164-39.5c-76.5 0-103.7 40.8-165.9 40.8s-105.6-57-155.5-127C46.7 790.7 0 663 0 541.8c0-194.4 126.4-297.5 250.8-297.5 66.1 0 121.2 43.4 162.7 43.4 39.5 0 101.1-46 176.3-46 28.5 0 130.9 2.6 198.3 99.2zm-234-181.5c31.1-36.9 53.1-88.1 53.1-139.3 0-7.1-.6-14.3-1.9-20.1-50.6 1.9-110.8 33.7-147.1 75.8-28.5 32.4-55.1 83.6-55.1 135.5 0 7.8 1.3 15.6 1.9 18.1 3.2.6 8.4 1.3 13.6 1.3 45.4 0 102.5-30.4 135.5-71.3z"/></svg>') no-repeat center center;
    background-size: auto 17px;
    background-position-y: 0px;
}

.google-login:before {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="2443" height="2500" preserveAspectRatio="xMidYMid" viewBox="0 0 256 262"><path fill="%234285F4" d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027"></path><path fill="%2334A853" d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1"></path><path fill="%23FBBC05" d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782"></path><path fill="%23EB4335" d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251"></path></svg>') no-repeat center center;
    background-size: 16px 16px;    
}

.apple-login {
    margin-top: 10px;
}

.apple-login:hover,
.google-login:hover {
    box-shadow: 0 5px 5px -3px rgba(47, 48, 51, 0.1);
}

.or {
    border-top: 1px #e1e1e2 solid;
    display: inline-block;
    margin: 20px 0 23px;
    height: 0px;
    width: 260px;
}

.or div {
    background: white;
    color: #828385;
    font-size: 13px;
    height: 20px;
    line-height: 20px;
    margin: -11px auto 0;
    width: 36px;
}

#login .pushme,
#join .pushme {
    height: 40px;
    line-height: 40px;
    margin-top: 15px;
    width: 260px;
}

.login-bottom {
    color: #828385;
    font-size: 12px;
    margin: 16px auto 0;
}

.login-bottom span {
    color: #007ce6;
    cursor: pointer;
}

.login-bottom span,
.login-bottom a {
    margin: 0 5px;
}

.terms-agree {
    font-size: 12px;
    margin: 8px 0 -2px;
}

.terms-agree label {
    display: inline-block;
}

/* Profile */

.universal {
    min-height: 700px;
    padding: 30px;
}

.profile {
    min-height: unset !important;
    padding: 22px 30px 31px;
}

.profile .avatar {
    border-radius: 40px;
    float: left;
    font-size: 26px;
    height: 80px;
    line-height: 80px;
    margin: 0 20px 0 0;
    width: 80px;
}

.profile .name {
    color: #2f3033;
    display: block;
    font-size: 18px;
    margin: 8px 0 13px;
}

.profile .country {
    display: inline-block
}

.profile .flag-icon {
    background-size: 26px 26px;
    border-radius: 15px;
    box-shadow: none;
    display: inline-block;
    height: 26px;
    margin: -2px 5px 0 -2px;
    vertical-align: middle;
    width: 26px;
}

.profile .wreath-left {
    background-position: 17px center;
    border-left: 1px #edeef0 solid;
    display: inline-block;
    margin: -3px 0 -3px 14px;
    padding-left: 24px;
}

.profile .wreath-right {
    background-position: right center;
    padding-right: 9px;
}

.profile .award-icon {
    margin-right: -2px;
}

.profile .wreath-left span {
    display: none;
}

.settings-icon {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path d="M5.5 1c0.5 0 0.9 0.4 0.9 0.9 0 0.5-0.4 0.9-0.8 0.9l-0.1 0h-3.1c-0.3 0-0.6 0.2-0.6 0.5l0 0.1v6.1c0 0.3 0.2 0.6 0.5 0.6l0.1 0h6.1c0.3 0 0.6-0.2 0.6-0.5l0-0.1v-3c0-0.5 0.4-0.9 0.9-0.9 0.5 0 0.9 0.4 0.9 0.8l0 0.1v3c0 1.3-1 2.4-2.3 2.4l-0.2 0h-6.1c-1.3 0-2.4-1-2.4-2.3l0-0.2v-6.1c0-1.3 1-2.4 2.3-2.4l0.2 0H5.5zM5 5.6l1.4 1.4 -1.5 0.5c-0.2 0.1-0.3 0-0.4-0.2 0-0.1 0-0.1 0-0.2L5 5.6zM11.7 0.3c0.4 0.4 0.4 1 0 1.4l-4.9 4.9 -1.4-1.4 4.9-4.9C10.7-0.1 11.3-0.1 11.7 0.3z" fill="%23828385"/></svg>') no-repeat center center;
    background-size: 12px 12px;
    display: inline-block;
    float: right;
    height: 12px;
    margin: 2px 0 0 0;
    width: 12px;
}

.thumbs {
    min-height: 550px;
}

.thumbs-tabs {
    border-bottom: 1px #e1e1e2 solid;
    clear: both;
    margin: 0px 0 25px;
}

.thumbs-tabs > div {
    display: inline-block;
    cursor: pointer;
    font-size: 13px;
    line-height: 22px;
    padding: 0 23px 14px 45px;
}

.thumbs-tabs > div:first-child {
    background: url('data:image/svg+xml,<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="3" cy="3" r="2" stroke="%23828385" stroke-width="2"/><circle cx="11" cy="3" r="2" stroke="%23828385" stroke-width="2"/><circle cx="3" cy="11" r="2" stroke="%23828385" stroke-width="2"/><circle cx="11" cy="11" r="2" stroke="%23828385" stroke-width="2"/></svg>') no-repeat 21px 3px;
    background-size: 14px 14px;
}

.thumbs-tabs > div:last-child {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><path d="M11.4 0c0.4 0 0.7 0.2 0.9 0.5l1.6 2.9C14 3.5 14 3.7 14 3.9V5c0 0.6-0.4 1-1 1v7c0 0.6-0.4 1-1 1H2c-0.6 0-1-0.4-1-1V6C0.4 6 0 5.6 0 5V3.9c0-0.2 0-0.3 0.1-0.5l1.6-2.9C1.9 0.2 2.2 0 2.6 0H11.4zM11 6H3v6h8V6zM8.5 7C8.8 7 9 7.2 9 7.5S8.8 8 8.5 8h-3C5.2 8 5 7.8 5 7.5S5.2 7 5.5 7H8.5zM10.8 2H3.2L2.1 4h9.9L10.8 2z" fill="%23828385"/></svg>') no-repeat 21px 3px;
    background-size: 14px 14px;
}

.thumbs-tabs > div span {
    background: #ff4558;
    border-radius: 8px;
    color: white;
    display: inline-block;
    font-size: 11px;
    height: 14px;
    line-height: 15px;
    margin: -2px 0 0 5px;
    padding: 0 4px;
    text-align: center;
    vertical-align: middle;
}

.thumbs-tabs > .active {
    border-bottom: 2px #1e63f3 solid;
    margin-bottom: -2px;
}

.goals-tab {
    align-items: flex-start;
    display: none;
    flex-wrap: wrap;
    justify-content: left;
}

.goals-tab.active {
    display: flex;
}

.thumbs .goal {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.thumbs .goal:nth-child(3n) {
    margin-right: 0;
}

.thumbs .goal-date {
    margin-left: 0;
}

.thumbs .poster:hover .poster-menu {
    display: flex;
}

.nothumbs {
    margin: 60px auto 0;
}

.poster-menu {
    align-items: center;
    bottom: 0;
    display: none;
    justify-content: center;
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
}

.poster-menu:before {
    background: #2f3033;
    content: "";
    display: block;
    height: 100%;
    opacity: 0.9;
    position: absolute;
    width: 100%;
    z-index: 10;
}

.poster-menu > div {
    background: white;
    border-radius: 5px;
    display: inline-block;
    cursor: pointer;
    height: 35px;
    margin: 0 4px;
    position: relative;
    width: 35px;
    z-index: 11;
}

.poster-menu > div:first-child div {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 6"><path d="M2.8 5.5L0.7 3.4c-0.4-0.4-0.4-1 0-1.4s1-0.4 1.4 0l1.4 1.4L6.4 0.6c0.4-0.4 1-0.4 1.4 0s0.4 1 0 1.4L4.2 5.5C4.1 5.7 3.8 5.8 3.6 5.8H3.5C3.2 5.8 3 5.7 2.8 5.5z" fill="%23ffffff"/></svg>');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 8px 6px;
}

.poster-menu > div:first-child div {
    background-color: #2f3033;
    border-radius: 9px;
    height: 16px;
    margin: 10px auto;
    width: 16px;
}

.poster-menu > div:last-child {
    background: white url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19 16"><path d="M15.9 3.1h-2c-0.4 0-0.7-0.2-0.9-0.5l-0.5-1 0 0c-0.2-0.3-0.6-0.6-1-0.6h-4c-0.4 0-0.8 0.2-1 0.6L6 2.6C5.8 2.9 5.5 3.1 5.1 3.1h-2l0 0C1.9 3.1 1 4 1 5.1V13c0 1.1 0.9 2 2.1 2h12.8c1.1 0 2.1-0.9 2.1-2V5.1C18 4 17.1 3.1 15.9 3.1z" style="fill:none;stroke-width:2;stroke:%232F3033"/><path d="M9.6 4.7c0.6 0 1 0.4 1 1v2l2 0c0.6 0 1 0.4 1 1s-0.4 1-1 1h-2v2c0 0.6-0.4 1-1 1 -0.6 0-1-0.4-1-1v-2h-2c-0.6 0-1-0.4-1-1s0.4-1 1-1h2v-2C8.6 5.1 9 4.7 9.6 4.7z" fill="%232F3033"/></svg>') no-repeat center center;
    background-size: 19px 16px;
}

.thumbs .photo-counter,
.thumbs .comment-counter {
    margin-left: 14px;
}

@media (min-width: 640px) {
    .thumbs .goal {
        border-bottom: 1px #e1e1e2 solid;
        margin: 0 19px 35px 0;
        padding: 0 0 7px 0;
        width: 200px;
    }

    .thumbs .goal-title {
        font-size: 14px;
        margin: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .thumbs .avatar,
    .thumbs .name {
        display: none;
    }

    .thumbs .poster {
        margin-top: 8px;
    }

    .thumbs .goal-details {
        margin: 5px 0 0 0;
    }
}

/* Share */

#share {
    left: 50%;
    margin: -115px 0 0 -142px;
    padding: 26px 30px 30px;
    position: fixed;
    text-align: center;
    top: 50%;
    width: 230px;
}

#share .list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 18px;
}

.list > * {
    background-color: #edeef0;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 8px;
    cursor: pointer;
    display: inline-block;
    height: 60px;
    width: 60px;
}

.twitter {
    background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.9027 8.46429L19.3482 0H17.5838L11.119 7.34942L5.95547 0H0L7.8082 11.1136L0 19.9897H1.76443L8.59152 12.2285L14.0445 19.9897H20L11.9023 8.46429H11.9027ZM9.48608 11.2115L8.69495 10.1049L2.40018 1.29901H5.11025L10.1902 8.40562L10.9813 9.51229L17.5847 18.7498H14.8746L9.48608 11.212V11.2115Z" fill="black"/></svg>');
    background-size: 19px auto;
}

.twitter:hover {
    background-color: #000;
    background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.9027 8.46429L19.3482 0H17.5838L11.119 7.34942L5.95547 0H0L7.8082 11.1136L0 19.9897H1.76443L8.59152 12.2285L14.0445 19.9897H20L11.9023 8.46429H11.9027ZM9.48608 11.2115L8.69495 10.1049L2.40018 1.29901H5.11025L10.1902 8.40562L10.9813 9.51229L17.5847 18.7498H14.8746L9.48608 11.212V11.2115Z" fill="white"/></svg>');
}

.facebook {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M15 0H0.9c-0.5 0-0.9 0.4-0.9 0.9V15c0 0.5 0.4 0.9 0.9 0.9h7.6v-6.2h-2.1v-2.4h2.1v-1.8c0-2.1 1.3-3.2 3.1-3.2 0.9 0 1.6 0.1 1.9 0.1v2.2l-1.3 0c-1 0-1.2 0.5-1.2 1.2v1.5h2.4l-0.3 2.4H11v6.2H15c0.5 0 0.9-0.4 0.9-0.9V0.9C15.9 0.4 15.5 0 15 0z" fill="%234267b2"/></svg>');
    background-size: 20px auto;
}

.facebook:hover {
    background-color: #4267b2;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M15 0H0.9c-0.5 0-0.9 0.4-0.9 0.9V15c0 0.5 0.4 0.9 0.9 0.9h7.6v-6.2h-2.1v-2.4h2.1v-1.8c0-2.1 1.3-3.2 3.1-3.2 0.9 0 1.6 0.1 1.9 0.1v2.2l-1.3 0c-1 0-1.2 0.5-1.2 1.2v1.5h2.4l-0.3 2.4H11v6.2H15c0.5 0 0.9-0.4 0.9-0.9V0.9C15.9 0.4 15.5 0 15 0z" fill="%23ffffff"/></svg>');
}

.pinterest {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 16"><path d="M11.3 1.6c-1.1-1.1-2.7-1.6-4.4-1.6 -2.6 0-4.2 1-5.1 1.9C0.6 3 0 4.4 0 5.8c0 1.8 0.8 3.1 2.1 3.7 0.1 0 0.2 0.1 0.3 0.1 0.3 0 0.5-0.2 0.6-0.4 0-0.2 0.1-0.5 0.2-0.7 0.1-0.3 0-0.5-0.2-0.7 -0.4-0.4-0.5-0.9-0.5-1.6 0-2 1.5-4 4.3-4 2.2 0 3.6 1.2 3.6 3.2 0 1.2-0.3 2.4-0.8 3.2 -0.3 0.6-1 1.3-1.9 1.3 -0.4 0-0.8-0.2-1-0.4 -0.2-0.3-0.3-0.6-0.2-1 0.1-0.4 0.2-0.8 0.4-1.2 0.2-0.7 0.5-1.4 0.5-2 0-1-0.6-1.6-1.5-1.6 -1.2 0-2.1 1.1-2.1 2.6 0 0.7 0.2 1.2 0.3 1.4 -0.1 0.6-1 4.1-1.2 4.8C2.6 12.7 2 15.7 3 16c1.1 0.3 2-2.7 2.1-3.1 0.1-0.3 0.4-1.3 0.5-2 0.5 0.5 1.3 0.8 2.1 0.8 1.5 0 2.9-0.7 3.8-1.8 0.9-1.2 1.4-2.8 1.4-4.5C13 4 12.4 2.6 11.3 1.6z" fill="%23c8232c"/></svg>');
    background-size: 18px auto;
}

.pinterest:hover {
    background-color: #c8232c;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 16"><path d="M11.3 1.6c-1.1-1.1-2.7-1.6-4.4-1.6 -2.6 0-4.2 1-5.1 1.9C0.6 3 0 4.4 0 5.8c0 1.8 0.8 3.1 2.1 3.7 0.1 0 0.2 0.1 0.3 0.1 0.3 0 0.5-0.2 0.6-0.4 0-0.2 0.1-0.5 0.2-0.7 0.1-0.3 0-0.5-0.2-0.7 -0.4-0.4-0.5-0.9-0.5-1.6 0-2 1.5-4 4.3-4 2.2 0 3.6 1.2 3.6 3.2 0 1.2-0.3 2.4-0.8 3.2 -0.3 0.6-1 1.3-1.9 1.3 -0.4 0-0.8-0.2-1-0.4 -0.2-0.3-0.3-0.6-0.2-1 0.1-0.4 0.2-0.8 0.4-1.2 0.2-0.7 0.5-1.4 0.5-2 0-1-0.6-1.6-1.5-1.6 -1.2 0-2.1 1.1-2.1 2.6 0 0.7 0.2 1.2 0.3 1.4 -0.1 0.6-1 4.1-1.2 4.8C2.6 12.7 2 15.7 3 16c1.1 0.3 2-2.7 2.1-3.1 0.1-0.3 0.4-1.3 0.5-2 0.5 0.5 1.3 0.8 2.1 0.8 1.5 0 2.9-0.7 3.8-1.8 0.9-1.2 1.4-2.8 1.4-4.5C13 4 12.4 2.6 11.3 1.6z" fill="%23ffffff"/></svg>');
}

.whatsapp {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8 0L8 0c-4.4 0-8 3.6-8 8 0 1.8 0.6 3.4 1.5 4.7l-1 3 3.1-1c1.3 0.8 2.8 1.3 4.4 1.3 4.4 0 8-3.6 8-8S12.4 0 8 0zM12.7 11.3c-0.2 0.5-1 1-1.6 1.1 -0.4 0.1-1 0.2-2.8-0.6 -2.4-1-3.9-3.4-4-3.5 -0.1-0.2-1-1.3-1-2.4 0-1.1 0.6-1.7 0.8-1.9 0.2-0.2 0.5-0.3 0.8-0.3 0.1 0 0.2 0 0.3 0 0.2 0 0.4 0 0.5 0.4 0.2 0.5 0.7 1.6 0.7 1.7 0.1 0.1 0.1 0.3 0 0.4 -0.1 0.2-0.1 0.2-0.3 0.4S6 6.8 5.9 7c-0.1 0.1-0.2 0.3-0.1 0.5 0.1 0.2 0.6 1 1.3 1.6 0.9 0.8 1.6 1 1.9 1.2 0.2 0.1 0.4 0.1 0.6-0.1 0.2-0.2 0.4-0.5 0.6-0.8 0.2-0.2 0.4-0.3 0.6-0.2 0.2 0.1 1.4 0.6 1.6 0.8 0.2 0.1 0.4 0.2 0.4 0.3C12.9 10.3 12.9 10.8 12.7 11.3z" fill="%2325d366"/></svg>');
    background-size: 20px auto;
}

.whatsapp:hover {
    background-color: #25d366;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8 0L8 0c-4.4 0-8 3.6-8 8 0 1.8 0.6 3.4 1.5 4.7l-1 3 3.1-1c1.3 0.8 2.8 1.3 4.4 1.3 4.4 0 8-3.6 8-8S12.4 0 8 0zM12.7 11.3c-0.2 0.5-1 1-1.6 1.1 -0.4 0.1-1 0.2-2.8-0.6 -2.4-1-3.9-3.4-4-3.5 -0.1-0.2-1-1.3-1-2.4 0-1.1 0.6-1.7 0.8-1.9 0.2-0.2 0.5-0.3 0.8-0.3 0.1 0 0.2 0 0.3 0 0.2 0 0.4 0 0.5 0.4 0.2 0.5 0.7 1.6 0.7 1.7 0.1 0.1 0.1 0.3 0 0.4 -0.1 0.2-0.1 0.2-0.3 0.4S6 6.8 5.9 7c-0.1 0.1-0.2 0.3-0.1 0.5 0.1 0.2 0.6 1 1.3 1.6 0.9 0.8 1.6 1 1.9 1.2 0.2 0.1 0.4 0.1 0.6-0.1 0.2-0.2 0.4-0.5 0.6-0.8 0.2-0.2 0.4-0.3 0.6-0.2 0.2 0.1 1.4 0.6 1.6 0.8 0.2 0.1 0.4 0.2 0.4 0.3C12.9 10.3 12.9 10.8 12.7 11.3z" fill="%23ffffff"/></svg>');
}

.copy-link {
    border: 1px #d4d6da solid;
    border-radius: 8px;
    box-sizing: border-box;
    color: #2f3033;
    cursor: pointer;
    height: 36px;
    line-height: 34px;
    margin: 20px auto 0;
    text-align: center;
    user-select: none;
    width: 130px;
}

.copy-link.copied:before {
    background: #10c680 url('data:image/svg+xml,<svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 1L3 5L1 3" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center center;
    border-radius: 7px;
    content: '';
    display: inline-block;
    height: 14px;
    margin: -2px 8px 0 -3px;
    vertical-align: middle;
    width: 14px;
}

.copy-link:hover {
    box-shadow: 0 5px 5px -3px rgba(47, 48, 51, 0.15);
}

/**/

@keyframes rotate {
    from {transform: rotateZ(0deg)}
    to {transform: rotateZ(360deg)}
}

.spinner,
.photo-viewport:before,
.loader-progress:before {
    animation: rotate 0.7s infinite linear;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60"><path d="M30 0C13.4 0 0 13.4 0 30H5C5 16.2 16.2 5 30 5 43.8 5 55 16.2 55 30H60C60 13.4 46.6 0 30 0Z" fill="%23999"/></svg>') no-repeat center center;
    content: "";
    display: block;
    height: 60px;
    left: 50%;
    margin: -30px 0 0 -30px;
    position: absolute;
    top: 50%;
    width: 60px;
    z-index: -1;
}

.spinner {
    z-index: 1;
}

.slider,
.cr-slider {
    background-color: #e1e1e2 !important;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #1e63f3), color-stop(100%, #1e63f3)) !important;
    background-repeat: no-repeat;
    background-size: 0 100%;
    cursor: pointer;
    height: 2px !important;
    outline: none;
    padding: 0 !important;
    vertical-align: middle;
    -webkit-appearance: none;
}

.cr-slider::-webkit-slider-runnable-track {
    background: rgba(0, 0, 0, 0) !important;
}

.slider::-webkit-slider-thumb,
.cr-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background: #1e63f3 !important;
    border: 6px white solid !important;
    border-radius: 50% !important;
    box-shadow: 1px 1px 6px 0 rgba(47, 48, 51, 0.4);
    cursor: pointer;
    height: 20px !important;
    width: 20px !important;
}

.slider::-moz-range-thumb,
.cr-slider::-moz-range-thumb {
    background: #1e63f3 !important;
    border: 6px white solid !important;
    border-radius: 50% !important;
    box-shadow: 1px 1px 6px 0 rgba(47, 48, 51, 0.4);
    cursor: pointer;
    height: 20px !important;
    width: 20px !important;
}

/* Photo stories */

.stories {
    position: relative;
}

.stories.forgoal {
    margin-bottom: -30px;
}

.story {
    width: calc(50% - 10px);
}

.story:nth-child(n+4) {
    border-top: 1px #e1e1e2 solid;
    padding-top: 10px;
}

.forgoal .story {
    margin-bottom: 34px;
}

.story .img {
    border-radius: 5px;
    cursor: pointer;
    display: block;
    margin-bottom: 11px;
    width: 100%;
}

.story-body > a:first-child {
    color: #2f3033;
    display: block;
    line-height: 22px;
    margin-bottom: 4px;
}

.story-body .avatar {
    font-size: 14px;
    height: 20px;
    line-height: 20px;
    margin: 1px 10px 13px 0;
    width: 20px;
    vertical-align: middle;
}

.story-body .description span,
.goal-description > span {
    margin-right: 7px;
}

.story-body .description:empty {
    margin-top: -4px;
    height: 1px;
}

.story-body .full-description {
    display: none;
}

.open-photo,
.goal-more {
    background-position: right 5px;
    cursor: pointer;
    font-size: 14px;
}

.story-body .time {
    background-position: left 3px;
    color: #8c8d8e;
    font-size: 12px;
    margin-top: 3px;
    padding: 0 0 10px 25px;
}

.story.add-photo-link {
    background-position: center 40px;
    background-size: 60px auto;
    border: 2px #d4d6da dashed;
    color: #2f3033;
    cursor: pointer;
    margin-bottom: 40px;
    padding: 100px 25px 44px;
    text-align: center;
}

.add-story-desc {
    color: #828385;
    display: none;
    margin-left: 220px;
}

.stories.empty:hover .add-story-desc {
    display: block;
}

#addstory {
    margin-top: -356px;
    position: fixed;
    top: 50%;
    width: 460px;
}

#addstory form {
    text-align: center;
}

#addstory #image-crop-wrap {
    display: block;
    margin-bottom: 50px;
}

#addstory .croppie-container .cr-slider-wrap {
    left: 50%;
    margin: 15px 0 0 -150px;
    position: absolute;
}

@media (max-width: 640px) {

    #addstory #image-crop-wrap {
        margin-bottom: 20px;
    }

    #addstory .croppie-container .cr-slider-wrap {
        display: none;
    }

}

#storyfileupload {
    display: none;
}

/* Photo story viewr */

#photoviewer {
    top: 10vh;
}

#photoviewer > div:first-child {
    display: flex;
}

.photo-viewport {
    background: #f3f3f3;
    border-radius: 5px;
    min-height: 200px;
    min-width: 200px;
    overflow: hidden;
    position: relative;
}

.photo-viewport img {
    display: block;
    margin: auto;
    max-height: 70vh;
    max-width: 70vw;
    position: relative;
}

#photo-previous,
#photo-next {
    background: #000;
    background-repeat: no-repeat;
    border-radius: 20px;
    cursor: pointer;
    display: none;
    height: 40px;
    margin-top: -20px;
    opacity: 0.2;
    position: absolute;
    top: 50%;
    width: 40px;
}

#photo-previous {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="9" height="14" viewBox="0 0 9 14"><path d="M0.9 7.8C0.4 7.4 0.4 6.6 0.9 6.2L7 0.9C7.5 0.4 8.3 0.6 8.6 1.2L8.6 1.3C8.9 1.7 8.7 2.2 8.4 2.5L3 7 8.4 11.5C8.7 11.8 8.9 12.3 8.6 12.7L8.6 12.8C8.3 13.4 7.5 13.6 7 13.1L0.9 7.8Z" fill="white"/></svg>');
    background-position: 14px center;
    left: 20px;
}

#photo-next {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="9" height="14" viewBox="0 0 9 14"><path d="M8.1 7.8C8.6 7.4 8.6 6.6 8.1 6.2L2 0.9C1.5 0.4 0.7 0.6 0.4 1.2L0.4 1.3C0.1 1.7 0.3 2.2 0.6 2.5L6 7 0.6 11.5C0.3 11.8 0.1 12.3 0.4 12.7L0.4 12.8C0.7 13.4 1.5 13.6 2 13.1L8.1 7.8Z" fill="white"/></svg>');
    background-position: 17px center;
    right: 20px;
}

.photo-viewport:hover #photo-previous,
.photo-viewport:hover #photo-next {
    display: block;
}

#photo-previous.disabled,
#photo-previous.disabled:hover{
    opacity: 0;
}
#photo-previous:hover,
#photo-next:hover {
    opacity: 1;
}

.photo-details {
    box-sizing: border-box;
    margin-top: -3px;
    padding-left: 20px;
    position: relative;
    width: 280px;
}

.photo-details .avatar {
    float: left;
    margin: 3px 12px 0 0;
}

.photo-details .time {
    background-position: left 4px;
    background-size: 14px 14px;
    display: block;
    margin-left: 0;
}

.photo-details .goal-menu {
    border: unset;
    margin: 0;
    position: absolute;
    right: 0;
    top: 22px;
}

.photo-description {
    border-top: 1px #e1e1e2 solid;
    bottom: 0;
    left: 20px;
    overflow-y: auto;
    padding-top: 20px;
    position: absolute;
    right: 0;
    top: 60px;
}

@media (min-width: 640px) {
    #editstory {
        margin-top: -130px;
        top: 50%;
    }
}

/* Text pages */

article.universal.text {
    font-size: 15px;
    line-height: 28px;
    padding: 33px 30px 40px;
}

.universal h1 {
    font-size: 26px;
    line-height: 35px;
    margin: -4px 0 35px;
}

article.text h1 {
    border-bottom: 1px #e1e1e2 solid;
    margin-bottom: 10px;
    padding-bottom: 26px;
}

article.text img {
    border-radius: 5px;
    margin: 11px 0 26px;
}

.article-meta {
    color: #8c8d8e;
    font-size: 12px;
    line-height: 23px;
}

.article-meta > * {
    display: inline-block;
}

.article-meta a {
    font-weight: 400;
}

h2 {
    color: #302e33;
    display: block;
    font-size: 18px;
    font-weight: 500;
    margin: 40px 0 24px;
    padding: 0;
}

article img + h2 {
    margin-top: 25px;
}

article table + h2 {
    margin-top: 45px;
}

article table {
    border-collapse: collapse;
    border-spacing: 1px;
    margin: 34px 0;
    width: 100%;
}

article td,
article th {
    border: 1px #ccc solid;
    padding: 4px 10px;
    vertical-align: top;
}

article th {
    background: #fafafa;
    font-weight: 500;
    text-align: left;
}

.no-border {
    border-spacing: 0;
    margin: 0 0 31px;
}

.no-border td {
    border: 0;
    padding: 0;
}

.text p,
.text ul {
    margin: 0 0 25px;
}

.text p:last-of-type {
    margin: 0;
}

.text ul {
    list-style: disc inside;
}

.text img {
    width: 100%;
}

.article-preview img {
    border-radius: 5px;
    display: block;
}

.mobile-only {
    display: none;
}

#scroll {
    overflow: hidden;
    touch-action: none;
}

@media (min-width: 640px) {
    .article-preview {
        align-items: flex-start;
        display: flex;
        line-height: 28px;
        padding: 27px 30px;
    }

    .article-preview img {
        margin-right: 20px;
        width: 200px;
    }

    .article-title {
        font-size: 20px;
        line-height: 31px;
        margin-bottom: 5px;
    }

    .article-meta {
        margin: 0 0 30px;
    }
}

@media (max-width: 640px) {

    /* Mobile layout */

    .desktop-only {
        display: none;
    }

    .mobile-only {
        display: inline-block;
    }

    header {
        min-width: unset;
    }

    header > div {
        width: 100%;
    }

    #logo {
        font-size: 18px;
        line-height: 35px;
        margin-left: 20px;
    }

    #userinfo {
        margin-right: 20px;
        line-height: 38px;
    }

    #userinfo .arrowdown,
    #userinfo .add,
    #userinfo #join-button,
    #userinfo span {
        display: none
    }

    #login-button {
        background-color: #10c680;
        border-radius: 8px;
        color: white;
        font-size: 14px;
        flex-shrink: 0;
        height: 36px;
        line-height: 36px;
        padding: 0 16px;
    }

    #userinfo .avatar {
        height: 36px;
        margin-right: -2px;
        width: 36px;
    }

    #menu-button {
        background: url('data:image/svg+xml,<svg width="19" height="14" viewBox="0 0 19 14" xmlns="http://www.w3.org/2000/svg"><path d="M1 1H18M1 7H18M1 13H18" stroke="%23828385" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat right center;
        cursor: pointer;
        display: inline-block;
        height: 24px;
        margin-left: 12px;
        width: 24px;
        vertical-align: middle;
    }

    #right-column {
        display: none;
        left: 50%;
        margin: -220px 0 0 -130px;
        position: fixed;
        top: 50%;
        width: 260px;
        z-index: 101;
    }

    #right-column.authorized {
        margin-top: -270px;
    }

    .column-stycky {
        height: 100%;
        position: relative;
    }

    .column-stycky > div {
        box-sizing: border-box;
        height: 100%;
        padding: 30px 45px;
        text-align: center;
    }

    #userinfo2 {
        border-bottom: 1px #e1e1e2d1 solid;
        padding-bottom: 18px;
        margin-bottom: 15px;
        width: 100%;
    }

    #userinfo2 .avatar.anonymous {
        background-image: url('data:image/svg+xml,<svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="6" r="5" stroke="%23828385" stroke-width="2"/><path d="M18.7769 18C17.8674 13.992 14.2831 11 9.99988 11C5.71671 11 2.13236 13.992 1.2229 18" stroke="%23828385" stroke-width="2" stroke-linecap="round"/></svg>');
        background-position: center 10px;
        background-repeat: no-repeat;
        margin: 0;
    }

    #userinfo2 span {
        display: block;
        font-size: 13px;
        margin-top: 6px;
    }

    nav {
        margin: 0 auto;
        
    }

    nav a {
        height: unset;
        line-height: 38px;
        margin: 0 auto;
        text-align: left;
        width: 77px;
    }

    .to-goals,
    .to-info {
        background-position-y: 9px;
    }

    .to-articles {
        background-position-y: 10px;
    }

    #to-create,
    #to-contacts {
        position: relative;
    }

    #to-create:before {
        background: url('data:image/svg+xml,<svg width="9" height="9" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.5 1V8M8 4.5H1" stroke="%23828385" stroke-width="2" stroke-linecap="round"/></svg>') no-repeat 3px 3px;
        border: 2px #828385 solid;
        border-radius: 10px;
        box-sizing: border-box;
        content: '';
        display: block;
        height: 19px;
        left: 0;
        position: absolute;
        top: 9px;
        width: 19px;
    }

    #to-settings {
        background: url('data:image/svg+xml,<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="9" cy="9" r="2.5" stroke="%23828385" stroke-width="2"/><path d="M15.1128 9.78878L16.8429 11.1032C17.0222 11.2284 17.0479 11.4037 16.92 11.6291L15.267 14.4085C15.1645 14.5837 14.9979 14.6338 14.7671 14.5587L12.7295 13.77C12.1912 14.1455 11.7299 14.4084 11.3455 14.5587L11.038 16.6619C10.9866 16.8873 10.8583 17 10.6533 17H7.34691C7.14188 17 7.01366 16.8873 6.96227 16.6619L6.65471 14.5587C6.16782 14.3584 5.70649 14.0955 5.27073 13.77L3.23309 14.5587C3.00235 14.6338 2.83573 14.5837 2.73321 14.4085L1.08022 11.6291C0.952002 11.4037 0.9777 11.2284 1.15731 11.1032L2.8874 9.78878C2.8617 9.61359 2.84885 9.35066 2.84885 9C2.84885 8.64934 2.8617 8.38641 2.8874 8.21122L1.15731 6.89685C0.977973 6.77159 0.952275 6.59626 1.08022 6.37086L2.73321 3.59149C2.83573 3.41629 3.00235 3.36622 3.23309 3.44126L5.27073 4.23005C5.80901 3.85455 6.27034 3.59162 6.65471 3.44126L6.96227 1.33811C7.01366 1.1127 7.14188 1 7.34691 1H10.6533C10.8583 1 10.9866 1.1127 11.038 1.33811L11.3455 3.44126C11.8324 3.64156 12.2937 3.90449 12.7295 4.23005L14.7671 3.44126C14.9979 3.36622 15.1645 3.41629 15.267 3.59149L16.92 6.37086C17.0482 6.59626 17.0225 6.77159 16.8429 6.89685L15.1128 8.21122C15.1385 8.38641 15.1514 8.64934 15.1514 9C15.1514 9.35066 15.1385 9.61359 15.1128 9.78878Z" stroke="%23828385" stroke-width="2"/></svg>') no-repeat left center;
    }

   #to-contacts:before {
        color: #828385;
        content: '@';
        font-size: 19px;
        font-weight: 500;
        left: 0px;
        position: absolute;
        top: -2px;
    }

    #auth-buttons {
        border-top: 1px #e1e1e2d1 solid;
        color: #262729;
        display: block;
        margin-top: 15px;
        padding-top: 26px;
        width: 100%;
    }

    #auth-buttons a {
        color: #262729;
    }

    #auth-buttons div:nth-child(2) {
        margin-top: 12px;
    }

    #get-on-google,
    #download-on-apple {
        background-repeat: no-repeat;
        background-size: 135px auto;
        content-visibility: hidden;
        display: block;
        height: 40px;
        left: 50%;
        margin-left: -67px;
        position: absolute;
        width: 135px;
    }

    #get-on-google {
        background-image: url('/img/google_play.png');
        bottom: -70px;        
    }

    #download-on-apple {
        background-image: url('/img/app_store.png');
        bottom: -125px;
    }

    .navtitle,
    .award-quick,
    #right-column .tags,
    footer {
        display: none;
    }

    /* Mobile content */

    main,
    #content {
        padding: 61px 0 5px;
        width: 100%;
    }

    #open-filter {
        background-position: center center;
        box-sizing: border-box;
        color: transparent;
        height: 38px;
        overflow: hidden;
        padding: 0;
        width: 36px;
    }

    .goal,
    .article-preview {
        border-left: 0;
        border-right: 0;
        margin-top: 5px;
    }

    .goal {
        padding: 17px 20px 18px;
    }

    .goal-header {
        display: flex;
        flex-wrap: wrap;
        margin-top: -2px;
    }

    .goal-header .avatar {
        margin: 0 14px 0 0;
        order: 1;
    }

    .goal-header .wreath-right {
        order: 4;
    }

    .goal-header .goal-title {
        font-size: 16px;
        margin: 7px 0 0;
        order: 3;
        width: 100%;
    }

    .goal-subheader {
        flex-grow: 1;
        flex-wrap: wrap;
        margin-top: -1px;
        order: 2;
    }

    .goal-header .name {
        display: block;
        flex-grow: 1;
        order: 1;
    }

    .goal-header .name:after {
        display: none;
    }

    .goal-subheader > *:not(.name) {
        line-height: 23px;
        height: 23px;
    }

    .goal-date.time {
        margin: -1px 0 0;
        height: 18px;
        line-height: 18px;
        order: 4;
        width: 100%;
    }

    .time {
        font-weight: 300;
    }

    .goal-progress span {
        display: none;
    }

    .goal-progress {
        order: 2;
    }

    .goal-menu {
        order: 3;
    }

    .circular-chart {
        margin: -2px 5px 0;
        width: 22px;
    }

    .goal-details,
    .thumbs .goal-details {
        margin: 3px 0;
    }

    .poster {
        border-radius: 0;
        margin: 8px -20px 0;
    }

    .goal-description {
        font-weight: 300;
        line-height: 21px;
        margin-top: 4px;
        padding-top: 11px;
    }

    .open-photo,
    .goal-more {
        font-size: 13px;
    }

    .tags {
        margin-top: 13px;
    }

    .tag-title {
        font-size: 18px;
        margin: 14px 20px 15px 20px;
        text-align: center;
    }

    .comment-content {
        font-weight: 300;
    }

    .universal {
        border-bottom: 1px #e1e1e2d1 solid;
        border-left: 0;
        border-right: 0;
        border-radius: 0;
        line-height: 21px;
        margin-top: 5px;
        min-height: 520px;
        padding: 18px 20px 19px;
    }

    .universal.text {
        padding-bottom: 35px;
        padding-top: 30px;
    }

    .text {
        font-weight: 300;
    }

    .article-preview {
        line-height: 28px;
        padding: 20px 20px 15px;
    }

    .article-preview img {
        display: block;
        margin-bottom: 12px;
        width: 100%;
    }

    .article-title {
        font-size: 19px;
        line-height: 27px;
        margin-bottom: 2px;
    }

    article .article-meta,
    .text p,
    .text ul,
    article table {
        margin: 0 0 20px;
    }

    h2 {
        margin: 35px 0 19px;
    }

    article.text img {
        margin-bottom: 22px;
    }

    article img + h2 {
        margin-top: 20px;
    }

    #filters-button {
        color: transparent;
        height: 36px;
        margin-left: -2px;
        overflow: hidden;
        padding: 0;
        width: 22px;
    }

    #introduction {
        font-weight: 300;
        padding-bottom: 10px;
        padding-top: 19px;
    }

    #introduction img {
        display: none;
    }

    #introduction .text-button {
        display: inline-block;
        margin: 18px 0 0 -16px;
    }

    #tag-intro {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .story {
        margin-bottom: 20px;
        margin-right: 20px;
        width: 150px;
    }

    .stories.empty:hover .add-story-desc {
        display: none;
    }

    .story-body > a:first-child {
        line-height: 21px;
        margin-bottom: 2px;
    }

    .story-body .avatar {
        margin-bottom: 11px;
    }

    .story-body .description {
        font-size: 13px;
        line-height: 19px;
    }

    .story-body .time {
        margin-top: 2px;
    }

    #comment-form .align-right > span {
        display: none;
    }

    /* Profile */

    .universal.thumbs {
        min-height: 350px;
    }

    .profile {
        padding: 12px 20px 20px;
    }

    .thumbs .goal {
        margin: 0 0 25px 0;
        padding: 0;
        width: 100%;
    }

    .thumbs .goal:last-child {
        margin: 0 0 -5px 0;
    }

    .thumbs .goal-subheader {
        flex-wrap: wrap;
    }

    .thumbs .poster {
        margin-top: 7px;
        width: auto;
    }

    .thumbs .photo-counter,
    .thumbs .comment-counter {
        margin-left: 21px;
    }

    /* Popups */

    .popup {
        box-shadow: none;
    }

    .mobile-fullscreen {
        align-content: center;
        border-radius: unset;
        bottom: 0;
        height: unset;
        left: 0;
        margin: unset;
        overflow-y: scroll;
        padding: 20px;
        right: 0;
        text-align: center;
        top: 0;
        width: unset;
    }

    .popup-wrapper {
        bottom: 60px;
        left: 0;
        overflow-x: hidden;
        overflow-y: scroll;
        padding: 30px;
        position: absolute;
        right: 0;
        top: 0;
    }

    .error-popup,
    .success-popup {
        padding: 14px;
    }

    .error-popup .close,
    .success-popup .close {
        top: 14px;
    }

    #login,
    #join {
        background: #fff;
    }

    #login .popup-wrapper {
        bottom: unset;
        margin-top: -237px;
        top: 50%;
    }

    #join .popup-wrapper {
        bottom: unset;
        margin-top: -334px;
        top: 50%;
    }

    #changeprogress {
        margin: -220px 0 0 -190px;
    }

    #changeprogress .pushme {
        margin-bottom: 20px;
        margin-top: 20px;
    }

    #mask {
        opacity: 0.8;
    }

    #mask:not(.default) {
        background: #fff;
        opacity: 1;
    }

    .popup > .close {
        border-radius: 15px;
        bottom: -11px;
        box-shadow: none;
        height: 30px;
        margin-right: -15px;
        opacity: 0.5;
        right: 50%;
        top: unset;
        width: 30px;
    }

    .mobile-fullscreen .close {
        bottom: 15px;
        position: fixed;
    }

    /* Add story */

    .story-croper .basic {
        margin-top: 10px;
    }

    /* Photo viewer */

    #photoviewer div.popup-wrapper {
        display: block;
        padding: 30px;
    }

    .photo-viewport {
        min-height: 100px;
        width: 100%;
    }

    .photo-viewport img {
        max-height: unset;
        max-width: unset;
        width: 100%;
    }

    .photo-details {
        padding: 20px 0 0;
        width: 100%;
    }

    .photo-details .goal-menu {
        top: 42px;
    }

    .photo-description {
        display: block;
        margin: 17px 0 0;
        position: unset; 
    }

    #photoviewer .close {
        bottom: 15px;
        position: fixed;
    }

    #editstory textarea {
        height: 60vh;
    }

    /* Text pages */

    .text h1 {
        margin-bottom: 25px;
    }

    .texteditor{
        padding-top: 1px;
    }
}

.hiden{
    display: none;
}
input,
textarea,
[contenteditable] {
    -webkit-user-select: text;
    user-select: text;
}

.text-center {
    text-align: center;
}