@font-face {
    font-family: "ntsomic-regular";
    src: url("../fonts/NTSomic-Regular-22e605a10f23da29c6567da40e3b876e.woff2");
}

@font-face {
    font-family: "ntsomic-medium";
    src: url("../fonts/NTSomic-Medium-6e2785d81c11725bb1c8471e288982bd.woff2");
}

@font-face {
    font-family: "ntsomic-semibold";
    src: url("../fonts/NTSomic-Semibold-7c70035018fae60c0200e70686d4dfde.woff2");
}

@font-face {
    font-family: "ntsomic-bold";
    src: url("../fonts/NTSomic-Bold-3daa505e4280fced3b8f204bd29cec36.woff2");
}

:root {
    --color-primary: #87C1EB;
    --color-primary-light: rgba(135, 193, 235, 0.6);
    --color-primary-lighter: rgba(135, 193, 235, 0.2);
    --color-primary-dark: #628FAF;
    --color-secondary: #F8ABD8;
    --color-secondary-light: rgba(248, 171, 216, 0.6);
    --color-secondary-lighter: rgba(248, 171, 216, 0.2);
    --color-accent: #FA6259;
    --color-accent-light: rgba(250, 98, 89, 0.6);
    --color-accent-lighter: rgba(250, 98, 89, 0.2);
    --color-accent-filter: invert(49%) sepia(9%) saturate(4100%) hue-rotate(315deg) brightness(106%) contrast(96%);
    --color-success: #D1EECC;
    --color-success-dark: #6B8367;
    --color-warning: #FFD12F;
    --color-warning-dark: #7D724B;
    --color-dark: #000000;
    --color-light: #FFFFFF;
    --color-bg: #F5F0F0;
    --font-small: 0.9rem;
    --spacing-1: 5px;
    --spacing-2: 8px;
    --spacing-3: 10px;
    --spacing-4: 15px;
    --spacing-5: 20px;
    --spacing-6: 30px;
    --spacing-7: 40px;
    --spacing-8: 50px;
    --spacing-9: 75px;
    --spacing-10: 100px;
    --spacing-11: 120px;
    --spacing-12: 150px;
    --spacing-13: 200px;
    --radius-1: 5px;
    --radius-2: 10px;
    --radius-3: 15px;
    --radius-4: 20px;
    --radius-5: 25px;
    --radius-6: 35px;
    --radius-7: 50px;
    --radius-8: 75px;
    --radius-9: 100px;
    --box-shadow-default: 0 5px 10px 0 #00000040;
    --transition-buttons: 0.15s;
}




/*------------------------------------*\
  ------------- #RESET -------------
\*------------------------------------*/

* {
    box-sizing: border-box;
    margin:  0;
    padding: 0;
    font-family: "ntsomic-regular", sans-serif;
    font-size: 1rem;
}

body {
    background-color: #F5F0F0;
}

p, span {
    line-height: 1.3rem;
}

a {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

button {
    border: none;
    background-color: unset;
    cursor: pointer;
    color: black;
}

input {
    color: black;
}

input[type="text"], input[type="search"], input[type="button"], input[type="password"] {
    border: none;
    background-color: transparent;
    -webkit-appearance: none;
    text-align: left;
}

input::placeholder {
    color: gray;
}

select {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background-color: transparent;
    cursor: pointer;
    color: black;
}

input:focus, textarea:focus, select:focus {
    outline: none;
}

textarea {
    resize: none;
}

fieldset {
    border: none;
}

h1, h2, h3, h4, h5, h6, div, p, span, li {
    font-weight: normal;
    word-break: break-word;
}

li {
    list-style: none;
}

h1 {
    font-family: "ntsomic-bold", sans-serif;
    font-size: 3rem;
}

h2 {
    font-family: "ntsomic-bold", sans-serif;
    font-size: 2rem;
}

h4 {
    font-family: "ntsomic-semibold", sans-serif;
    font-size: 1.1rem;
}



/*------------------------------------*\
  ------------- #CONTENT -------------
\*------------------------------------*/

/* @HEADER-BANNER */
.header-banner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--color-accent);
    color: white;
    text-align: center;
    padding: var(--spacing-2) 0;
    z-index: 999;
}

.header-banner a {
    color: white;
    text-decoration: underline;
}

/* @HEADER */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    z-index: 1000;
    top: var(--spacing-5);
    left: var(--spacing-8);
    right: var(--spacing-8);
    padding: var(--spacing-4) var(--spacing-7);
    border-radius: 130px;
    background-color: var(--color-light);
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
}

.header-logo {
    display: block;
}

.header-nav ul {
    display: flex;
    align-items: center;
    gap: var(--spacing-7);
}

.header-nav li {
    display: block;
}

.header-nav li > * {
    display: block;
}

.header-nav-mobile {
    display: none;
    align-items: center;
    gap: var(--spacing-4);
}

li.header-activities-li img {
    margin-bottom: 3px;
}

li.header-activities-li a {
    display: flex;
    align-items: center;
    gap: 4px;
}

.header-nav-notifications {
    position: relative;
    margin-right: 0;
}

.header-nav-notifications--mobile {
    display: none;
}

.header-notification-wrapper {
    display: block;
    position: relative;
}

.header-notification-wrapper .circle-to-read {
    position: absolute;
    right: -7px;
    top: -6px;
}

.header-notification-wrapper img {
    display: block;
}

.notification-popup {
    width: max-content;
    position: absolute;
    left: 50%;
    top: 70px;
    transform: translateX(-50%);
}

.notification-popup__notification {
    display: flex;
    align-items: stretch;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
}

.notification-popup__notification:last-of-type {
    margin-bottom: 0;
}

.notification-popup * {
    word-break: normal;
}

.notification-popup img {
    width: 40px;
    height: 40px;
    display: block;
    border-radius: 50%;
    object-fit: cover;
}

.notification-popup__title {
    font-family: "ntsomic-bold", sans-serif;
    font-size: 0.9rem;
    margin-bottom: var(--spacing-1);
}

.notification-popup__body {
    font-size: 0.8rem;
}

.notification-popup__right {
    flex-grow: 1;
    text-align: right;
    gap: 3px;
}

.notification-popup__right span {
    font-size: 0.9rem;
    vertical-align: middle;
}

.header-nav__lang-dropdown {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.header-nav__profile-img {
    width: 45px;
    height: 45px;
    object-fit: cover;
    border-radius: 50%;
}

#burger-menu {
    display: none;
    background-color: var(--color-accent);
    transition: var(--transition-buttons);
    padding: var(--spacing-5);
    cursor: pointer;
}

#header-profile-menu {
    display: none;
    align-items: center;
    border-radius: 100px;
    background-color: #F5F0F0;
    transition: var(--transition-buttons);
    padding: 0 0 0 var(--spacing-3);
    cursor: pointer;
}

#header-profile-menu span {
    margin-right: var(--spacing-2);
}

#header-profile-menu .btn {
    background-color: var(--color-accent);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    padding: unset;
    border: unset;
    position: relative;
}

#header-profile-menu .btn img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.mobile-nav {
    width: 100%;
    position: relative;
    z-index: 999;
    height: 100vh;
    background-color: var(--color-light);
}

.mobile-nav.closed {
    display: none;
}

.mobile-nav.opened {
    display: block;
}

.mobile-nav ul {
    max-width: 90%;
    width: 350px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -45%);
    text-align: center;
}

.mobile-nav__prices {
    margin-bottom: var(--spacing-6);
}

.mobile-nav__currency {
    margin-bottom: var(--spacing-5);
}

.mobile-nav__login, .mobile-nav__sitter {
    margin-bottom: var(--spacing-8);
}

.mobile-nav__sitter {
    margin-bottom: var(--spacing-10);
}

.mobile-nav__prices a, .mobile-nav__login a {
    font-family: "ntsomic-bold", sans-serif;
    font-size: 1.3rem;
}

.mobile-nav__login a {
    font-size: 1.5rem;
}

.mobile-nav__lang  {
    display: flex;
    justify-content: center;
}

/* @FOOTER */
footer {
    background-color: var(--color-secondary);
}

footer > div {
    padding: var(--spacing-12) 0 var(--spacing-5);
}

.footer-content {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--spacing-9);
}

.footer-content__section {
    flex-basis: calc(100% / 4);
}

.footer-content__section--video {
    display: flex;
    justify-content: center;
}

.footer-content__nav {
    display: flex;
    justify-content: center;
}

.footer-content__sitter {
    flex-basis: 30%;
    min-width: 365px;
    margin-right: var(--spacing-8);
    margin-top: -10px;
}

.footer-content h2 {
    margin-bottom: var(--spacing-6);
}

.footer-content li {
    margin-bottom: var(--spacing-2);
}

.footer-content__socials li a {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
}

.footer-content__video-wrapper {
    position: relative;
    width: 150px;
    height: 150px;
    z-index: 1;
}

.footer-content__video {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.footer-content__video-decor {
    position: absolute;
    top: -45px;
    right: -15px;
    z-index: 2;
}

.footer-lower-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.footer-lower-bar * {
    font-size: var(--font-small);
}

.footer-lower-bar span {
    padding: 0 var(--spacing-3);
    border-right: 1px solid var(--color-dark);
}

.footer-lower-bar span:first-of-type {
    padding-left: 0;
}

.footer-lower-bar span:last-of-type {
    padding-right: 0;
    border-right: unset;
}

/* @HOME */
.home-hero {
    padding: var(--spacing-13) 0 var(--spacing-10);
}

.home-hero--sitter {
    padding-bottom: 150px;
}

.home-hero > div {
    display: flex;
    justify-content: space-between;
}

.home-hero__left {
    position: relative;
    flex-shrink: 0;
}

.home-hero__right {
    position: relative;
    flex-basis: 40%;
}

.home-hero h1, .home-hero__sitters, .home-hero__postings {
    margin-bottom: var(--spacing-6);
}

.home-hero__sitters, .home-hero__postings {
    display: flex;
    gap: var(--spacing-4);
}

.home-hero__sitter {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.home-hero__sitter-1 {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-image: url("../images/photos/home-hero-profile-1-1ef1043a0beda362e07accfa4e75d44e.png");
    background-size: cover;
}

.home-hero__sitter-2 {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-image: url("../images/photos/home-hero-profile-2-fb14079c9b6187b0072bc37a0c3c1c1c.png");
    background-size: cover;
}

.home-hero__sitter-3 {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-image: linear-gradient(235.49deg, #F5F0F0 21.24%, rgba(245, 240, 240, 0) 82.54%),
    url("../images/photos/home-hero-profile-3-67eef201b5b6f471b3ef87d493ca719d.png");
    background-size: cover;
}

.home-hero__postings-img {
    width: 40px;
}

.home-hero__switchers {
    display: flex;
    align-items: center;
    gap: var(--spacing-6);
    margin-bottom: var(--spacing-6);
}

.home-hero__switcher {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    padding: var(--spacing-5);
    border-radius: var(--radius-8);
    transition: background-color 0.2s, box-shadow 0.2s;
}

.home-hero__switcher .text {
    font-family: "ntsomic-semibold", sans-serif;
}

.home-hero__switcher--active {
    background-color: var(--color-primary);
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.15);
}

.home-hero__search-card .input-box:last-of-type {
    margin-bottom: 0;
}

.home-hero__search-card .btn--accent {
    margin-top: var(--spacing-6);
}

.home-hero__arrow-right {
    position: absolute;
    top: 33px;
    right: -120px;
    z-index: 1;
}

.home-hero__img-wrapper {
    position: relative;
}

.home-hero__img-decor-wrapper {
    position: absolute;
    bottom: 30px;
    left: 30px;
    width: 80px;
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: var(--color-secondary);
}

.home-hero__img-decor-wrapper--sitter {
    bottom: 50px;
    left: 50px;
}

.home-hero__img-decor {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    transform: translate(-50%, -50%);
}

.home-hero__img {
    width: 450px;
    height: 450px;
}

.home-hero__arrow-down {
    position: absolute;
    bottom: -50px;
    left: 50px;
}

.home-hero__arrow-down--sitter {
    bottom: -135px;
}

.title-header {
    text-align: center;
    margin-bottom: var(--spacing-12);
}

.title-header__main-title {
    position: relative;
    display: inline-block;
}

.title-header__decor {
    position: absolute;
    z-index: -1;
    scale: 0.8;
}

.home-why .title-header__decor--1 {
    position: absolute;
    top: -40px;
    left: 0;
}

.home-why__features {
    display: flex;
    gap: var(--spacing-7);
    margin-bottom: var(--spacing-11);
}

.home-why__feature {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-basis: calc(100% / 3 - var(--spacing-7));
    text-align: center;
}

.switcher-owner .home-why__feature .card-img {
    margin-left: var(--spacing-6);
}

.switcher-sitter .home-why__feature--1 .card-img {
    width: 60px;
    margin-bottom: var(--spacing-5);
}

.switcher-sitter .home-why__feature--2 .card-img {
    width: 90px;
}

.home-why__feature--2 .card-text--primary {
    margin-bottom: var(--spacing-4);
}

.home-why__feature--2 .card-img {
    width: 80px;
}

.home-why__feature--3 {
    position: relative;
}

.home-why__feature-video {
    position: absolute;
    top: -135px;
    right: -45px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
}

.btn.home-why__btn-signup {
    padding-left: var(--spacing-9);
    padding-right: var(--spacing-9);
}


.home-partners {
    padding: var(--spacing-12) 0 var(--spacing-10);
}

.home-partners__main-title {
    margin-bottom: var(--spacing-7);
}

.home-partners__logos {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-7);
    width: 80%;
    margin: 0 auto;
}

.home-partners__logo-wrapper {
    width: calc(100% / 7 - var(--spacing-7));
    text-align: center;
}

.home-partners__logo-wrapper img {
    max-width: 100%;
    max-height: 60px;
}

.home-how {
    padding: var(--spacing-11) 0;
    background-color: var(--color-primary);
}

.home-how__main-title {
    margin-bottom: var(--spacing-10);
}

.home-how__steps {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.home-how__steps-left {
    position: relative;
    flex-basis: 35%;
}

.home-how__illustration {
    position: absolute;
    width: 150px;
}

.home-how__illustration--1 {
    top: -100px;
    left: -30px;
    z-index: 5;
}

.home-how__illustration--2 {
    bottom: -70px;
    right: -90px;
    z-index: 5;
}

.home-how__video-wrapper {
    position: relative;
    width: 387px;
    height: 394px;
    overflow: hidden;
}

.home-how__video-wrapper img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
    z-index: 3;
}

.home-how__video {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
}

.home-how__steps-right {
    position: relative;
    z-index: 500;
    flex-basis: 60%;
    display: flex;
    flex-direction: column;
    row-gap: var(--spacing-6);
}

.home-how__step {
    position: relative;
    display: flex;
    align-items: center;
    width: 400px;
    height: 120px;
    padding: var(--spacing-6) var(--spacing-10);
    border-radius: var(--radius-3);
    background-color: var(--color-light);
    text-align: center;
}

.home-how__step-2 {
    margin: auto;
}

.home-how__step-3 {
    margin-left: auto;
}

.home-how__step-text {
    font-family: "ntsomic-semibold", sans-serif;
    line-height: 1.6rem;
}

.home-how__step-number-wrapper {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: var(--radius-3);
    background-color: var(--color-secondary);
}

.home-how__step-number {
    position: absolute;
    color: var(--color-accent);
    font-family: "ntsomic-bold", sans-serif;
    font-size: 2.5rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.home-how__step-1 .home-how__step-number-wrapper {
    top: -20px;
    left: -30px;
    rotate: 20deg;
}

.home-how__step-1 .home-how__step-number {
    rotate: -20deg;
    left: 52%;
    top: 48%;
}

.home-how__step-2 .home-how__step-number-wrapper {
    top: 45%;
    transform: translateY(-50%);
    left: -50px;
    rotate: -20deg;
}

.home-how__step-2 .home-how__step-number {
    rotate: 20deg;
    left: 47%;
    top: 54%;
}

.home-how__step-3 .home-how__step-number-wrapper {
    bottom: -20px;
    left: -30px;
    rotate: 20deg;
}

.home-how__step-3 .home-how__step-number {
    rotate: -20deg;
    left: 52%;
    top: 48%;
}

.home-clients {
    padding: var(--spacing-11) 0;
}

.home-clients .title-header {
    margin-bottom: var(--spacing-10);
}

.home-clients .title-header__decor--1 {
    left: -60px;
    top: -45px;
    scale: 0.7;
}

.home-clients .title-header__decor--2 {
    bottom: -55px;
    right: -90px;
    scale: 0.7;
}

.home-clients__reviews {
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--spacing-7);
    padding-left: var(--spacing-11);
    padding-right: var(--spacing-11);
}

.home-clients__reviews .generic-review {
    flex-basis: calc(100% / 2 - var(--spacing-5));
}

.home-cities {
    padding: var(--spacing-10) 0;
    background-color: var(--color-primary);
}

.home-cities__list {
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
    margin-top: var(--spacing-10);
    row-gap: var(--spacing-5);
}

.home-cities__city {
    flex-basis: calc(100% / 5);
    padding: 0 var(--spacing-4);
}

.home-cities__city button,
.home-cities__city a {
    font-family: "ntsomic-bold", sans-serif;
}

/* @POPUPS */
.popup-work-type-choice {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000;
    width: 85%;
    max-width: 900px;
    padding: var(--spacing-8);
    border-radius: var(--radius-5);
    margin: 0 auto;
    background-color: var(--color-light);
}

.popup-work-type-choice .title-med {
    font-size: 1.4rem;
    margin-bottom: var(--spacing-3);
}

.popup-work-type-choice fieldset:last-of-type {
    margin-bottom: var(--spacing-5);
}

.popup-close-button {
    position: absolute;
    right: 15px;
    top: 15px;
}

.popup-work-type-choice__title {
    margin-bottom: var(--spacing-5);
    font-family: "ntsomic-bold", sans-serif;
    font-size: 1.4rem;
}

.popup-work-type-choice fieldset {
    margin-bottom: var(--spacing-7);
}

.popup-work-type-choice__work-types-list {
    display: flex;
    justify-content: space-between;
}

.popup-work-type-choice__work-types-list p {
    margin-bottom: var(--spacing-5);
}

.popup-work-type-choice__place {
    flex-basis: calc(100% / 2 - var(--spacing-3));
}

.work-type-selection.card {
    display: block;
    box-shadow: unset;
    cursor: pointer;
    padding: var(--spacing-5);
}

.work-type-selection.work-type-selection--selected {
    background-color: #fbcde8;
    border-color: #fbcde8;
}

.work-type-selection:first-of-type {
    margin-bottom: var(--spacing-5);
}

.work-type-selection .d-flex {
    align-items: center;
    gap: var(--spacing-5);
}

.work-type-selection__right span {
    display: block;
}

.work-type-selection__name {
    margin-bottom: var(--spacing-2);
    font-family: "ntsomic-bold", sans-serif;
    font-size: 1.1rem;
}

.sitters-list {
    background-color: var(--color-primary-light);
}

.sitters-list .posting-card--link {
    margin-bottom: var(--spacing-5);
}

.posting-edit .back-header {
    margin-bottom: var(--spacing-6);
}



/* @OWNER-SIGNUP */
.owner-signup-title {
    margin-bottom: var(--spacing-8);
    font-size: 1.8rem;
    text-align: center;
}

.owner-signup__sitters-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-6);
    justify-content: center;
    overflow-x: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.owner-signup__sitters-list .sitter-mini-card {
    margin-left: var(--spacing-4);
    margin-right: var(--spacing-4);
    flex-shrink: 0;
    background-color: white;
    padding: 35px 25px;
    border-radius: 20px;
}

.owner-signup__login {
    text-align: center;
    margin-top: var(--spacing-3);
    margin-bottom: var(--spacing-7);
}

.owner-signup__text {
    text-align: center;
    margin-bottom: var(--spacing-7);
}

.owner-signup__bottom-bar {
    display: flex;
    justify-content: end;
    align-items: center;
    gap: var(--spacing-6);
}

.bottom-bar-sticky--owner-signup {
    box-shadow: var(--box-shadow-default);
}

.sitter-mini-card {
    display: flex;
    align-items: stretch;
    gap: var(--spacing-4);
}

.sitter-mini-card__name {
    font-family: "ntsomic-bold", sans-serif;
    margin-bottom: 3px;
}

.sitter-mini-card__img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.sitter-mini-card__body {
    flex-shrink: 0;
}

.sitter-mini-card__rating {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    margin-top: 3px;
}

.sitter-mini-card__rating img {
    width: 12px;
    height: 12px;
}



/* @PLANS */
.continue-for-free.card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-4);
    background-color: transparent;
    margin-top: var(--spacing-7);
    padding: var(--spacing-8) var(--spacing-7);
    box-shadow: unset;
}

.continue-for-free .plan__feature {
    margin-bottom: 0;
    align-items: center;
}

.continue-for-free .plan__feature img {
    margin-top: 0;
}

.plans-title {
    max-width: 500px;
    margin: 0 auto;
    text-align: center;
}

.plans-switcher-wrapper {
    max-width: 220px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: var(--spacing-8) auto;
}

.plans-switcher-wrapper * {
    flex-shrink: 0;
}

.plans-switcher__text {
    cursor: default;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
}

.plans-switcher {
    width: 48px;
    height: 24px;
    position: relative;
    border-radius: var(--radius-5);
    background-color: var(--color-accent);
    cursor: pointer;
}

.plans-switcher__dot {
    width: 16px;
    height: 16px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    background-color: var(--color-light);
    transition: left 0.1s, right 0.1s;
}

.plans-switcher__dot.quarterly {
    right: unset;
    left: 4px;
}

.plans-switcher__dot.annual {
    left: unset;
    right: 4px;
}

.plans-list {
    display: flex;
    align-items: stretch;
    gap: var(--spacing-6);
}

.plan {
    flex-basis: calc(100% / 3);
    position: relative;
    display: flex;
    flex-direction: column;
}

.plans-list--sitter {
    justify-content: center;
}

.plans-list--sitter .plan {
    flex-basis: calc(100% / 2);
}

.plan--free .plan__decoration, .plan--unlimited .plan__decoration {
    position: absolute;
    top: 0;
    right: 10%;
    transform: translateY(-50%);
}

.plan__head-chip.chip {
    width: 65%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    padding-left: 0;
    padding-right: 0;
}

.plan--pro .plan__decoration {
    position: absolute;
    top: 46%;
    right: 5%;
    width: 70px;
}

.plan__title {
    font-family: "ntsomic-bold", sans-serif;
    font-size: 2rem;
    margin-bottom: var(--spacing-5);
}

.plan__features {
    margin-bottom: var(--spacing-8);
}

.plan__feature {
    display: flex;
    align-items: start;
    gap: var(--spacing-5);
    margin-bottom: var(--spacing-3);
}

.plan__feature img {
    width: 17px;
    margin-top: var(--spacing-1);
}

.plan__feature p {
    line-height: 1.7rem;
}

.plan__footer {
    margin-top: auto;
}

.plan__prices {
    display: flex;
    align-items: end;
    justify-content: space-between;
}

.plan__price-left {
    font-size: 1.1rem;
    color: var(--color-secondary);
}

.plan__price-right {
    font-family: "ntsomic-bold", sans-serif;
    font-size: 1.1rem;
    text-align: right;
}

.plan__price-right .txt-normal {
    font-size: 1.1rem;
}

.plan__price-bill {
    text-align: right;
    font-size: var(--font-small);
    font-style: italic;
    margin-bottom: var(--spacing-4);
}

.plan__price-bill span {
    font-size: inherit;
    font-family: inherit;
}

.plan-price {
    font-family: inherit;
    font-size: inherit;
}

.plan__cancel {
    margin-top: var(--spacing-4);
    margin-bottom: -15px;
    text-align: center;
    font-size: var(--font-small);
}




/* @POSTINGS */
.postings, .applications {
    padding-top: var(--spacing-8);
}

.activities-postings--assigned {
    margin-top: var(--spacing-8);
}

.activities-postings--not-assigned {
    opacity: 0.6;
}

.postings-address {
    margin-top: var(--spacing-3);
    margin-bottom: var(--spacing-4);
    font-family: "ntsomic-bold", sans-serif;
    font-size: 2rem;
    text-align: center;
}

.postings-available {
    padding: var(--spacing-9);
    background-color: #96CBF299;
}

.postings-filters {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-6);
}

#posting-filter {
    font-family: "ntsomic-semibold", sans-serif;
}

.postings-filters__right {
    display: flex;
    align-items: center;
    gap: var(--spacing-5);
}

.postings-filters__right .btn {
    width: 70px;
    padding: var(--spacing-1) 0  7px;
    font-size: var(--font-small);
}

.posting-list .posting-card {
    margin-bottom: var(--spacing-7);
}

.posting-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-4) var(--spacing-5) var(--spacing-5) var(--spacing-8);
    border-radius: var(--radius-5);
    background-color: var(--color-light);
}

.posting-card__left {
    display: flex;
    align-items: center;
    gap: var(--spacing-7);
}

.posting-card__img {
    width: 70px;
    height: 70px;
}

.posting-card__img img {
    width: 30px;
    height: 30px;
}

.posting-card__title {
    font-family: "ntsomic-bold", sans-serif;
    margin-bottom: var(--spacing-2);
}

.posting-card__subtitle {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-3);
}

.posting-card__subtitle * {
    font-size: var(--font-small);
}

.posting-card__author-rating img {
    width: 13px;
}

.posting-card__dates {
    margin-top: var(--spacing-3);
    font-size: var(--font-small);
}

.posting-card__dates * {
    vertical-align: baseline;
}

.posting-card__dates img {
    width: 15px;
    margin-right: var(--spacing-2);
}

.posting-card__tags {
    display: flex;
    justify-content: end;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-4);
}

.posting-card__application {
    display: flex;
    align-items: center;
    gap: var(--spacing-6);
    flex-wrap: wrap;
}

.posting-card__earnings {
    font-family: "ntsomic-bold", sans-serif;
    font-size: 1.5rem;
    margin: var(--spacing-3) 0 var(--spacing-3);
}

.sitter-card .posting-card__title,
.sitter-card .posting-card__locality {
    margin-bottom: var(--spacing-1);
}

/* POSTING-CHAT */
.chat-hero {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    padding: var(--spacing-6) 0;
    margin-bottom: var(--spacing-7);
    background-color: white;
}

.chat-hero-back {
    display: flex;
    align-items: start;
    justify-content: space-between;
}

.chat-hero-back .title-med {
    margin-bottom: 0;
    font-size: 1.5rem;
}

.chat-hero-back .back-header {
    margin-bottom: var(--spacing-5);
}

.chat-user-img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 50%;
}

.chat {
    padding-top: var(--spacing-13);
    padding-bottom: var(--spacing-12);
}

.chat-message-block {
    margin-bottom: var(--spacing-5);
}

.chat-message {
    max-width: 60%;
    display: inline-block;
}

.chat-message__content {
    margin-bottom: var(--spacing-5);
    text-align: left;
}

.chat-message__content.card {
    padding: var(--spacing-6);
}

.chat-message__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-message__date {
    margin-left: var(--spacing-3);
}

.chat-message__read-check {
    width: 28px;
    margin-left: 10px;
}

.chat-message-block--user {
    text-align: right;
}

.chat-message-block--user .card--shadow-secondary {
    box-shadow: 10px 10px 0 0 var(--color-primary);
}

.chat-footer {
    padding: var(--spacing-7) 0;
    background-color: white;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
}

.input-box--chat.input-box {
    margin-bottom: 0;
}

.input-box--chat.input-box:last-of-type {
    margin-bottom: 0;
}

.input-box--chat .input-wrapper {
    height: 58px;
    border: 2px solid var(--color-dark);
    background-color: var(--color-light);
}

.input-box--chat .input-wrapper__input::placeholder {
    color: rgba(0, 0, 0, 0.6);
}

.input-box--chat .input-wrapper__logo-wrapper {
    cursor: pointer;
}

/* @USER-PROFILE */
.user-profile-header h1 {
    margin-bottom: var(--spacing-6);
}

.user-profile-header.hero {
    padding-bottom: var(--spacing-9);
}

.user-profile-navbar {
    display: flex;
    justify-content: space-between;
}

.user-profile-navbar ul {
    display: flex;
    align-items: center;
    gap: var(--spacing-8);
}

.user-profile-navbar-link {
    font-size: 1.1rem;
}

.user-profile-navbar-link img {
    vertical-align: bottom;
}

.user-profile-navbar-link--active {
    font-family: "ntsomic-bold", sans-serif;
    text-decoration: underline;
    text-underline-offset: 7px;
}

.user-profile-details,
.user-profile-payments,
.user-profile-pets,
.user-profile-activities {
    padding-bottom: var(--spacing-12);
}

.user-profile-sitter {
    padding-bottom: var(--spacing-10);
}

.user-profile-details-right .d-flex-spaced {
    align-items: end;
}

/* @PROFILE-DETAILS */
.user-profile-details .container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: var(--spacing-7);
}
.user-profile-details-image-wrapper {
    width: 150px;
    height: 150px;
    position: relative;
    border-radius: 50%;
    flex-shrink: 0;
    margin-right: var(--spacing-6);
}

.user-profile-details-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.user-profile-details-image-wrapper .btn--edit {
    position: absolute;
    right: -20px;
    bottom: 20px;
    padding: 0 var(--spacing-3) 2px;
    background-color: var(--color-light);
}

.user-profile-details-right {
    /*flex-basis: 75%;*/
    /*width: 100%;*/
}

.user-profile-details-info-form {
    margin-bottom: var(--spacing-8);
}

.user-profile-details-info-form .input-wrapper__input {
    padding: var(--spacing-4);
}

.user-profile-details-info-form > div:first-of-type,
.user-profile-details-password-form > div:first-of-type {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
}

.user-profile-details-info-form .input-box,
.user-profile-details-password-form .input-box {
    width: calc(100% / 3);
    margin-bottom: 0;
}

.user-profile-details-info-form .input-wrapper {
    border-radius: var(--radius-4);
}

.user-profile-details-info-form .input-box:last-of-type,
.user-profile-details-password-form .input-box:last-of-type {
    margin-bottom: 0;
}

.user-profile-details-password-form:not(:last-of-type) {
    margin-bottom: var(--spacing-8);
}

/* @PROFILE-PAYMENTS */
.user-profile-payments .container {
    display: flex;
    justify-content: space-between;
    align-items: start;
}

.card--payments.card {
    position: relative;
    flex-basis: 60%;
    height: 400px;
    padding: var(--spacing-6);
    box-shadow: unset;
}

.payments-scroll {
    height: 100%;
    overflow-y: scroll;
}

.card--payments > div::-webkit-scrollbar {
    background-color: #f5f5f5;
    border-radius: 10px;
    width: 6px;
}

.card--payments > div::-webkit-scrollbar-thumb {
    background-color: #000000;
    border-radius: 10px;
}

.card--payments .head,
.card--payments .row {
    display: flex;
}

.card--payments .head {
    margin-bottom: var(--spacing-7);
}

.card--payments .head .cell {
    font-family: "ntsomic-bold", sans-serif;
    font-size: 1.2rem;
}

.card--payments .cell {
    flex-basis: calc(100% / 3);
}

.card--payments .row {
    margin-bottom: var(--spacing-4);
}

.empty-state-payments {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    height: unset;
    overflow-y: hidden;
}

.empty-state-payments img {
    width: 100px;
    height: 100px;
    margin-bottom: var(--spacing-4);
}

.empty-state-payment-methods {
    text-align: center;
    margin: var(--spacing-6) 0 var(--spacing-8);
}

.empty-state-payment-methods img {
    width: 100px;
    height: 100px;
    margin-bottom: var(--spacing-4);
}

.user-profile-payment-methods__title {
    margin-bottom: var(--spacing-6);
    font-family: "ntsomic-bold", sans-serif;
    font-size: 1.4rem;
    text-align: center;
}

.card--payment-method.card {
    max-width: 100%;
    width: 300px;
    margin-bottom: var(--spacing-5);
    box-shadow: unset;
}

.card--payment-method.card:last-of-type {
    margin-bottom: var(--spacing-7);
}

.card--payment-method .title {
    margin-bottom: var(--spacing-4);
}

.card--payment-method__add {
    text-align: center;
}

.card--payment-method__add * {
    vertical-align: middle;
}

.card--payment-method__add span {
    margin-left: var(--spacing-3);
    font-family: "ntsomic-bold", sans-serif;
}

.posting-details .card--payment-method__add span {
    margin-right: var(--spacing-3);
    margin-left: 0;
}

/* @PROFILE-PETS */
.pets-list {
    display: grid;
    grid-template-columns: calc(100% / 3 - var(--spacing-5)) calc(100% / 3 - var(--spacing-5)) calc(100% / 3 - var(--spacing-5));
    gap: var(--spacing-6);
    margin-bottom: var(--spacing-9);
}

.card-pet.card {
    display: flex;
    gap: var(--spacing-4);
    position: relative;
    padding: var(--spacing-6);
    box-shadow: unset;
}

.card-pet__info {
    max-width: 80px;
}

.card-pet img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}

.card-pet__name {
    font-family: "ntsomic-bold", sans-serif;
    margin-bottom: var(--spacing-1);
}

.card-pet__name .chip.chip--primary {
    position: unset;
    margin-left: var(--spacing-1);
}

.card-pet__breed {
    margin-bottom: var(--spacing-1);
    word-break: normal;
}

.card-pet__breed, .card-pet__age {
    font-size: var(--font-small);
    text-transform: capitalize;
}

.card-pet .chip {
    position: absolute;
    top: var(--spacing-3);
    right: var(--spacing-3);
    padding: var(--spacing-1) var(--spacing-4);
}

.label-checkmark {
    display: flex;
    gap: var(--spacing-2);
    align-items: center;
}

.card-pet a, .card-pet .label-checkmark {
    position: absolute;
    bottom: var(--spacing-3);
    right: var(--spacing-4);
}

.card-pet-selection.card-pet-selection--selected {
    background-color: #fbcde8;
}

.card-pet-selection img {
    border: 1px solid rgba(0, 0, 0, 0.15);
}

.card-work-type-selection.card-work-type-selection--selected {
    background-color: #fbcde8;
}

.label-checkmark__input {
    appearance: none;
    -webkit-appearance: none;
    background-color: #fff;
    margin: 0;
    font: inherit;
    color: currentColor;
    width: 19px;
    height: 19px;
    border: 0.15em solid currentColor;
    border-radius: 0.3em;
    display: grid;
    place-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.label-checkmark__input::after {
    background-image: url("../images/icons/check-77a6921e8f45ab04cbb2d972d642c005.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 13px;
    width: 20px;
    height: 20px;
    content: "";
    display: none;
}

.label-checkmark__input:checked::after {
    display: block;
}

.card-pet .card-pet__edit-img {
    width: 24px;
    height: 24px;
    border-radius: unset;
}

label.card-pet {
    cursor: pointer;
}

/* @PROFILE-ACTIVITIES */
.user-profile-activities__switcher {
    display: inline-block;
    background-color: var(--color-light);
    padding: var(--spacing-2);
    border-radius: var(--spacing-6);
}

.user-profile-activities__switcher button {
    width: 160px;
    padding: var(--spacing-3) 0;
    border-radius: var(--spacing-6);
    font-family: "ntsomic-semibold", sans-serif;
    vertical-align: middle;
}

.user-profile-activities__switcher button span {
    display: none;
}

.switcher-postings {
    margin-right: var(--spacing-2);
}

.switcher-postings.switcher--active,
.switcher-reviews-received.switcher--active {
    background-color: var(--color-primary);
}

.switcher-applications.switcher--active,
.switcher-reviews-given.switcher--active {
    background-color: var(--color-secondary);
}

.user-profile-activities .posting-card:not(.user-profile-activities .posting-card:last-of-type) {
    margin-bottom: var(--spacing-5);
}

.user-profile-activities .posting-card__application {
    text-align: right;
}

.posting-card__application .btn {
    padding: var(--spacing-3) var(--spacing-5);
    border-radius: var(--radius-3);
    margin-bottom: var(--spacing-3);
}

.activities-postings .title-small {
    margin-top: var(--spacing-8);
}

.activities-postings--assigned .title-small {
    margin-top: 0;
}

.activities-postings--expired .posting-card .btn--accent {
    display: none;
}

/* @POSTING-COMPLETE */
.posting-complete-title {
    max-width: 700px;
    margin: 0 auto var(--spacing-5);
    font-size: 1.6rem;
}

.posting-complete-subtitle {
    max-width: 550px;
    margin: 0 auto;
}

.posting-complete, .posting-review {
    padding-bottom: var(--spacing-9);
}

.posting-complete .container,
.posting-review .container {
    padding: var(--spacing-9);
    border-radius: var(--radius-5);
    background-color: var(--color-light);
}

.posting-review__tags {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
}

.posting-complete-section {
    padding: var(--spacing-5) 0 var(--spacing-7);
    border-bottom: 1px solid var(--color-dark);
}

.posting-complete-section:first-of-type {
    padding-top: 0;
}

.posting-complete-section--preferences {
    border-bottom: unset;
}

.posting-complete-section__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-7);
}

.posting-complete .title-small {
    margin-bottom: 0;
}

.posting-complete__toggle-section {
    margin-top: 5px;
}

.posting-complete-section--pets .posting-complete-section__content > div:first-of-type {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: var(--spacing-5);
    margin-bottom: var(--spacing-7);
}

.posting-complete-section__content .card-pet {
    flex-basis: calc(100% / 2 - var(--spacing-3));
    border: 2px solid var(--color-dark);
}

.posting-complete-section__content--pets .card-pet__info {
    max-width: unset;
}

.posting-complete-section--preferences .label-checkmark {
    margin-top: var(--spacing-6);
}

.posting-complete-section__content-row {
    display: flex;
    justify-content: space-between;
}

.posting-complete-section__content-row--first,
.posting-complete-section__content-row--second {
    margin-bottom: var(--spacing-6);
}

.posting-complete-section__content-row > div {
    flex-basis: 55%;
}

.posting-complete-section__content-row > div:first-of-type {
    flex-basis: 39%;
}

.posting-complete-section__content-left {
    flex-basis: 39%;
}

.posting-complete-section__content-right {
    flex-basis: 59%;
}

.posting-complete-section__content-row .d-flex {
    justify-content: space-between;
}

.posting-complete-section__content-row .input-box,
.posting-complete-section__content-row .input-box:last-of-type {
    margin-bottom: 0;
}

.d-flex .label-checkmark {
    display: flex;
}

.d-flex.posting-complete-section__recurring {
    align-items: start;
    padding-top: var(--spacing-6);
}

.d-flex .posting-complete-section__recurring-days {
    display: flex;
    align-items: center;
    gap: var(--spacing-6);
    opacity: 0.4;
    pointer-events: none;
}

.d-flex .posting-complete-section__recurring-days--edit {
    opacity: 1;
    pointer-events: auto;
}

.d-flex .posting-complete-section__recurring-days--active {
    opacity: 1;
    pointer-events: auto;
}

.posting-complete-section__recurring-days .label-checkmark {
    display: block;
    text-align: center;
}

.posting-complete-section__recurring-days .day {
    font-size: 0.8rem;
}

.posting-complete-section__recurring-days .label-checkmark__input {
    margin: 0 auto var(--spacing-1);
}

.posting-confirmed {
    background-color: var(--color-light);
}

.posting-confirmed video {
    width: 170px;
    height: 170px;
    object-fit: cover;
    border-radius: 50%;
    margin: var(--spacing-6) 0;
}

/* @POSTING-REVIEW */
.posting-review-section {
    padding: var(--spacing-7) 0;
    border-bottom: 1px solid var(--color-dark);
}

#last-reviews {
    scroll-margin-top: var(--spacing-13);
}

.posting-review-section:last-of-type {
    border-bottom: 0;
}

.posting-review .title-big {
    font-size: 2.4rem;
    margin-bottom: var(--spacing-2);
}

.posting-review-section--price .title-small {
    margin-bottom: var(--spacing-3);
}

.posting-review-section__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.posting-review-section__header .title-med {
    display: flex;
    align-items: center;
    gap: var(--spacing-6);
    margin-bottom: 0;
}

.posting-review-section__header-left {
    display: flex;
    gap: var(--spacing-4);
}

.posting-review-section__header-right {
    flex-shrink: 0;
}

.posting-review-section__header-left img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}

.posting-review__review {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.posting-review__published-by {
    margin-bottom: var(--spacing-2);
}

.posting-review__author {
    margin-bottom: var(--spacing-2);
    font-family: "ntsomic-medium", sans-serif;
    font-size: 1.1rem;
}

.posting-review__review img {
    width: 100%;
    height: 100%;
}

.posting-review-section--header .posting-review-section__header:first-of-type {
    margin-bottom: var(--spacing-8);
}

.posting-review-section--header .posting-review-section__header:last-of-type {
    align-items: start;
}

.posting-review-section__main-info,
.posting-review-section__dates {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: var(--spacing-5);
}

.posting-review-section__main-info .title-small {
    margin-top: var(--spacing-4);
}

.posting-review-section__main-info > div:first-of-type,
.posting-review-section__dates > div:first-of-type {
    flex-basis: 350px;
}


.posting-review-section__date-specific {
    display: flex;
    gap: var(--spacing-6);
}

.posting-review-section__date > div {
    margin-bottom: var(--spacing-4);
}

.posting-review-section__date > div img {
    width: 16px;
    vertical-align: middle;
    margin-bottom: 3px;
    margin-right: var(--spacing-3);
}

.posting-review-section__date .d-flex {
    gap: var(--spacing-2);
}

.posting-review-section__date-recurring .chip {
    width: 70px;
}

.posting-review-section__description-title {
    margin-bottom: var(--spacing-4);
}

.posting-review-section__description-body {
    line-height: 1.8rem;
}

.posting-review-section--animals .pets-list {
    margin: var(--spacing-8) 0 0;
}

.posting-review-section--animals .card-pet {
    padding: unset;
}

.price-estimation-bar {
    padding: var(--spacing-5) var(--spacing-6);
    border-radius: var(--radius-7);
    margin-top: var(--spacing-5);
    background: linear-gradient(90deg, rgba(248, 171, 216, 0.5) 0%, rgba(135, 193, 235, 0.5) 52%, rgba(248, 171, 216, 0.5) 100%);
}

.price-estimation-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.price-estimation-bar .d-flex {
    align-items: center;
    gap: var(--spacing-5);
}

.price-estimation-bar .title-small {
    margin: unset;
    font-size: 1.1rem;
    text-align: center;
    padding: 0 var(--spacing-4);
}

.price-estimation-bar__info {
    text-align: center;
}

.price-estimation-bar__price {
    font-family: "ntsomic-bold", sans-serif;
    font-size: 1.6rem;flex-shrink: 0;
}

.price-estimation-bar__info {
    font-size: 0.8rem;
}

.posting-review-section--location img {
    width: 100%;
    height: auto;
}

.reviews-list .review:not(:last-of-type) {
    margin-bottom: var(--spacing-7);
}

.review__body {
    margin-top: var(--spacing-4);
}

/* @PET-NEW */
.pet-new .container {
    padding: var(--spacing-9);
    border-radius: var(--radius-5);
    background-color: var(--color-light);
}

.pet-new-section {
    padding: var(--spacing-7) 0;
    border-bottom: 1px solid var(--color-dark);
}

.pet-new-section__header {
    margin-bottom: var(--spacing-6);
}

.pet-new-section__header .pet-new-flex {
    gap: var(--spacing-6);
    align-items: center;
}

.pet-new-flex {
    display: flex;
    gap: var(--spacing-4);
}

#select-pet-breed .input-wrapper__logo-wrapper {
    cursor: pointer;
}

.input-wrapper select {
    background: url("../images/icons/chevron-down-2925a127a5f6a2ee82820c48e300d108.svg");
    background-repeat: no-repeat;
    background-position: 95%;
    cursor: pointer;
}

.select2-container--default .select2-selection--single {
    background-color: transparent !important;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    padding-right: 30px !important;
}

.select2-container--default .select2-selection--single {
    border: unset !important;
    padding-left: 10px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    background-image: url("../images/icons/chevron-down-2925a127a5f6a2ee82820c48e300d108.svg");
    background-size: cover;
    right: 5% !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border: unset !important;
}

.pet-new-flex .input-box {
    flex-basis: 300px;
}

.pet-new-flex .input-label {
    margin-left: 0;
}

.pet-new-flex .input-wrapper {
    border-radius: var(--radius-4);
}

.pet-edit .container {
    padding: var(--spacing-9);
    border-radius: var(--radius-5);
    background-color: var(--color-light);
}

.pet-edit.hero {
    padding-bottom: 0;
    margin-bottom: var(--spacing-8);
}

.pet-details .input-wrapper {
    background-color: #F7F7F7;
    cursor: default;
}

.pet-details .input-wrapper select {
    cursor: default;
    background: #F7F7F7;
    pointer-events: none;
}

.pet-details img:not(.visible-img) {
    display: none;
}

.pet-delete-wrapper {
    margin-bottom: var(--spacing-10);
}


.btn--circle .header-nav__profile-img {
    width: 100%;
    height: 100%;
}

#location-map {
    height: 400px;
    border-radius: var(--radius-3);
}

a[href^="http://maps.google.com/maps"]{display:none !important}
a[href^="https://maps.google.com/maps"]{display:none !important}

.gmnoprint a, .gmnoprint span, .gm-style-cc {
    display: none;
}
.gmnoprint div {
    background: none !important;
}

/* @USER-POSTING-DETAILS */
.posting-details__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--spacing-6);
    flex-wrap: wrap;
    gap: var(--spacing-4);
}

.posting-details__header .card--payment-method__add {
    margin-top: -10px;
}

.posting-details__header .title-small {
    margin-bottom: var(--spacing-4);
}

.back-header--small .back-header__arrow {
    gap: var(--spacing-3);
    text-align: left;
}

.posting-details__actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-7);
}

.btn--dark-outline.card--payment-method__add:hover {
    background-color: transparent;
    color: var(--color-dark);
}

.posting-details__title {
    font-family: "ntsomic-bold", sans-serif;
    margin: var(--spacing-7) 0 var(--spacing-4);
}

.posting-details__no-applications {
    margin-top: var(--spacing-8);
    text-align: center;
}

.posting-details__no-applications .empty-state-posting,
.posting-details__no-applications .empty-state-posting-text {
    text-align: center;
}

.empty-state-posting-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-4);
}

.empty-state-posting-details .empty-state-posting-text {
    max-width: 300px;
}

.posting-details__no-applications img {
    width: 100px;
    margin-left: 0;
}

.posting-details-views__list {
    padding: var(--spacing-6) 0 var(--spacing-10);
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-4);
    row-gap: var(--spacing-6);
}

.sitter-user-mini-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.sitter-user-mini-card__img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}

.sitter-user-mini-card__name {
    font-family: "ntsomic-bold", sans-serif;
    font-size: 1.1rem;
    margin-bottom: 3px;
}

.sitter-user-mini-card__locality {
    margin-bottom: 3px;
}

.sitter-user-mini-card__stars img {
    width: 12px;
    height: 12px;
}

.posting-details-views__list .sitter-user-mini-card {
    flex-basis: calc(100% / 4 - var(--spacing-4));
    justify-content: center;
}

/* @SITTER */
.sitter-details {
    padding: var(--spacing-10) 0;
    background-color: var(--color-primary-light);
}

.sitter-details__pets-cared .label-checkmark__input,
.sitter-details__dogs .label-checkmark__input {
    border: unset;
}

.sitter-details__section {
    border-bottom: 1px solid var(--color-dark);
    padding-bottom: var(--spacing-8);
}

.sitter-details__info .flex {
    display: flex;
    justify-content: space-between;
}

.sitter-details__info-left,
.sitter-details__info-right {
    flex-basis: calc(100% / 2 - var(--spacing-9));
}

.sitter-details__info-left .input-box {
    margin-top: var(--spacing-6);
}

.sitter-details__info-left .input-box:first-of-type {
    margin-top: 0;
}

.sitter-details__info-left .input-box:last-of-type {
    margin-bottom: 0;
}

.sitter-details__info-right {
    display: flex;
    flex-direction: column;
}

.sitter-details .input-wrapper {
    background-color: var(--color-light);
    border-radius: var(--radius-4);
}

.sitter-details__pets-cared .label-checkmark {
    margin-bottom: var(--spacing-5);
    border: unset;
}

.sitter-details__pets-cared > .title-small,
.sitter-details__plan > .title-small {
    font-family: "ntsomic-regular", sans-serif;
    font-size: 1rem;
}

.sitter-details__plan {
    display: block;
    width: 300px;
    margin-top: auto;
}

.sitter-details__plan .flex {
    width: 300px;
}

.sitter-details__edit-img {
    width: 18px;
    height: 18px;
    margin-bottom: 1px;
    margin-left: var(--spacing-1);
    vertical-align: middle;
}

.sitter-plan-card.card {
    width: 300px;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    padding: var(--spacing-5);
}

.sitter-plan-card .title-small {
    margin: 0;
    font-size: 1.6rem;
}

.sitter-plan-card img {
    width: 80px;
    margin: var(--spacing-5) 0;
}

.sitter-plan-card > div {
    display: flex;
    flex-direction: column;
}

.sitter-plan-card .plan__price-right {
    margin-top: auto;
    font-size: 1.4rem;
    text-align: left;
}

.sitter-details__work-types,
.sitter-details__dogs {
    padding-top: var(--spacing-7);
}

.sitter-details__work-types-list {
    display: grid;
    grid-template-columns: auto auto;
    gap: var(--spacing-6);
}

.sitter-details__work-types .card-pet {
    margin: 0;
    border: 2px solid black;
}

.card-work-type .card--circle {
    background-color: var(--color-secondary);
}

.card-work-type .card--circle img {
    width: 50%;
    height: auto;
    border-radius: unset;
}

.card-work-type .card-pet__info {
    max-width: 250px;
}

.card-work-type__prices {
    font-family: "ntsomic-bold", sans-serif;
}

.sitter-details__dogs .label-checkmark {
    margin-bottom: var(--spacing-5);
}

.sitter-details__dogs .label-checkmark:last-of-type {
    margin-bottom: 0;
}

.sitter-details__socials {
    padding-top: var(--spacing-7);
}

.sitter-details__socials-list {
    display: grid;
    grid-template-columns: auto auto;
    gap: var(--spacing-7);
}

.sitter-details__socials-list .left {
    flex-shrink: 0;
}

.sitter-details__socials-list .input-box.input-box--flex {
    margin-bottom: 0;
}

.sitter-details__photos-list {
    display: flex;
    flex-wrap: wrap;
    row-gap: var(--spacing-5);
}

.sitter-details__photos .chip--warning,
.sitter-details .chip--warning {
    margin-left: var(--spacing-2);
    font-family: "ntsomic-bold", sans-serif;
}

.sitter-images {
    display: flex;
    gap: var(--spacing-5);
    flex-wrap: wrap;
    margin-right: var(--spacing-5);
}

.sitter-image {
    position: relative;
    border-radius: var(--spacing-5);
    width: 170px;
    height: 170px;
    overflow: hidden;
}

#image-new-label-wrapper {
    margin-left:var(--spacing-4);
}

.sitter-details__photos.sitter-details__section {
    padding-top: var(--spacing-7);
    background-color: var(--color-light);
    border-bottom: unset;
}

.sitter-image img {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.sitter-image .btn--delete {
    position: absolute;
    right: var(--spacing-1);
    bottom: var(--spacing-1);
    z-index: 2;
    padding: var(--spacing-2);
    background-color: var(--color-light);
}

.sitter-upload-image-label {
    display: block;
    width: 170px;
    height: 170px;
    position: relative;
    border: 3px dashed var(--color-dark);
    border-radius: var(--radius-5);
    text-align: center;
    cursor: pointer;
}

.sitter-upload-image-label > .txt-center {
    width: 90%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.sitter-upload-image-label .img-uploaded {
    margin-bottom: var(--spacing-1);
}

#post-sitter-btn {
    margin-left: var(--spacing-3);
    margin-top: var(--spacing-7);
}

.sitter-streams {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 40px;
}

.sitter-streams__chart {
    /*width: 100%;*/
    max-width: 580px;
    height: 300px;
}

#sitter-streams-chart {
    height: 100%;
    width: 100%;
}

.sitter-streams__data-list {
    width: 580px;
    flex-shrink: 0;
    display: grid;
    grid-template-columns: auto auto;
    gap: var(--spacing-5);
}

.sitter-streams__data.card {
    position: relative;
    box-shadow: unset;
    padding-top: var(--spacing-6);
    padding-bottom: var(--spacing-6);
}

.sitter-streams__data .card--circle {
    width: 35px;
    height: 35px;
    position: absolute;
    top: var(--spacing-1);
    right: var(--spacing-1);
    background-color: var(--color-secondary-light);
}

.sitter-streams__data .card--circle img {
    width: 60%;
}

.sitter-streams__data .title-small {
    margin-bottom: 0;
}

.sitter-streams__card-name {
    margin-bottom: var(--spacing-3);
}

.posting-details__applications-list {
    margin-top: var(--spacing-6);
}

.posting-details__sitters-list {
    display: grid;
    grid-template-columns: calc(50% - var(--spacing-5)) calc(50% - var(--spacing-5));
    gap: var(--spacing-7);
    margin-top: var(--spacing-6);
}

.posting-details__sitters-list .posting-card {
    padding: var(--spacing-5);
    gap: var(--spacing-5);
}

.posting-details__sitters-list .posting-card__application .btn {
    flex-shrink: 0;
}

.posting-card--application .posting-card__left > img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.posting-card--application .posting-card__title {
    display: flex;
    align-items: center;
    gap: var(--spacing-5);
}

.posting-card__title-name {
    font-family: inherit;
    font-size: inherit;
}

.posting-card__title a {
    font-size: var(--font-small);
}

.posting-card--application.posting-card {
    padding-top: var(--spacing-5);
}

.posting-card--application .posting-card__application .btn {
    margin-bottom: 0;
}

.posting-card--application .posting-card__subtitle {
    margin-bottom: 0;
}

/* @REVIEWS */
.review .card {
    padding: var(--spacing-8);
}

.review-form-rating__label {
    margin-bottom: var(--spacing-3);
}

.review-form-star {
    cursor: pointer;
}

/* @SITTER-DETAIL */
.sitter.hero {
    padding-top: var(--spacing-12);
}

.sitter-hero {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-8);
}

.sitter-hero__left {
    flex-basis: 350px;
    max-width: 350px;
    height: 350px;
    position: relative;
    border-radius: var(--radius-5);
    overflow: hidden;
    flex-shrink: 0;
}

.sitter-hero__left .btn--circle {
    width: 45px;
    height: 45px;
    padding: unset;
    position: absolute;
    background-color: #f8abd8;
    z-index: 300;
}

.sitter-hero__left .btn--circle img {
    width: 50%;
    height: 50%;
}

.sitter-hero__left .btn--left {
    left: var(--spacing-4);
    top: 50%;
    transform: translateY(-50%);
}

.sitter-hero__left .btn--right {
    right: var(--spacing-4);
    top: 50%;
    transform: translateY(-50%);
}

.sitter-hero__carousel {
    position: relative;
    display: flex;
}

.sitter-img {
    display: inline-block;
    min-width: 350px;
    min-height: 350px;
    object-fit: cover;
}

.sitter-hero__user-img {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    margin-bottom: var(--spacing-2);
    object-fit: cover;
}

.sitter-hero__user-name {
    font-family: "ntsomic-bold", sans-serif;
    font-size: 1.2rem;
}

.sitter-hero__info {
    display: flex;
    align-items: start;
    gap: var(--spacing-9);
    margin-bottom: var(--spacing-4);
}

.sitter-hero__balloon {
    width: 280px;
    background-color: var(--color-primary-light);
    padding: var(--spacing-5) var(--spacing-6);
    border-radius: var(--radius-4);
}

.sitter-hero__position {
    display: flex;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-5);
}

.sitter-hero__reviews {
    display: flex;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-4);
}

.sitter-hero__stars {
}

.sitter-hero__reviews img {
    width: 16px;
    height: 16px;
    margin-top: 2px;
}

.sitter-hero__socials {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-7);
    padding: var(--spacing-5) 0 var(--spacing-6);
}

.sitter-hero__socials * {
    vertical-align: middle;
}

.sitter-hero__actions {
    padding-top: var(--spacing-5);
}

.sitter-hero__invite {
    margin-top: var(--spacing-5);
    text-align: center;
}

.sitter h2 {
    font-size: 1.2rem;
}

.sitter-work-types, .sitter-description, .sitter-accepts, .sitter-pets, .sitter-location, .sitter-reviews {
    padding: var(--spacing-10) 0 var(--spacing-8);
    border-bottom: 1px solid var(--color-dark);
}

.sitter-work-type {
    flex-basis: calc(100% / 4 - var(--spacing-4));
}

.sitter-work-types__list {
    display: flex;
    gap: var(--spacing-3);
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: var(--spacing-6);
}

.sitter-work-type__img-wrapper.btn {
    margin-bottom: var(--spacing-3);
    background-color: var(--color-secondary);
    cursor: default;
}

.sitter-work-type__name {
    font-family: "ntsomic-bold", sans-serif;
    margin-bottom: var(--spacing-3);
}

.sitter-description,
.sitter-accepts,
.sitter-pets,
.sitter-location,
.sitter-reviews {
    padding-top: var(--spacing-8);
}

.sitter-location {
    border-bottom: unset;
}

.sitter-description p {
    margin-top: var(--spacing-6);
}

.sitter-accepts__list {
    display: flex;
    gap: var(--spacing-7);
    row-gap: var(--spacing-5);
    flex-wrap: wrap;
    margin-top: var(--spacing-6);
}

.sitter-accepts__list img {
    vertical-align: middle;
    margin-right: var(--spacing-2);
}

.sitter-accepts__list span {
    font-family: "ntsomic-bold", sans-serif;
}

.sitter-pets__list {
    display: flex;
    gap: var(--spacing-9);
    margin-top: var(--spacing-7);
}

.sitter-pets__list .card-pet {
    display: flex;
    gap: var(--spacing-4);
}

.sitter-pets__list .card-pet__info {
    max-width: unset;
}

.sitter-location #location-map {
    margin-top: var(--spacing-7);
    border: 2px solid var(--color-light);
}

.sitter-reviews {
    border-bottom: 1px solid var(--color-dark);
}

.sitter-reviews__list {
    display: grid;
    grid-template-columns: auto auto auto;
    gap: var(--spacing-4);
    margin-top: var(--spacing-7);
    margin-bottom: var(--spacing-7);
}

.sitter-review {
    padding: var(--spacing-6);
    border-radius: var(--radius-5);
    background-color: var(--color-light);
}

.sitter-review--given {
    position: relative;
}

.sitter-review__edit {
    position: absolute;
    right: var(--spacing-5);
    bottom: var(--spacing-5);
}

.sitter-review__header {
    display: flex;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-4);
}

.sitter-review__name {
    margin-bottom: var(--spacing-1);
}

.sitter-review__rating {
    display: flex;
    gap: var(--spacing-2);
}

.sitter-review__rating .star-review-img {
    width: 16px;
    height: 16px;
}

.sitter-review__img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

/* #ERROR-PAGE */
.error-page-info-title {
    margin: var(--spacing-8) 0 var(--spacing-5);
}

.error-page-info-subtitle {
    font-size: 1.4rem;
    font-family: "ntsomic-bold", sans-serif;
}

.error-page-info-text {
    margin: var(--spacing-3) 0 var(--spacing-6);
}

.error-page-content a span {
    margin-left: 7px;
}










/*------------------------------------*\
  ------------- #UTILITIES -------------
\*------------------------------------*/
/* @CONTAINERS */
.container {
    width: 85%;
    max-width: 1200px;
    margin: 0 auto;
}

.container--medium {
    max-width: 992px;
}

.container--small {
    max-width: 768px;
}

/* @BORDER */
.brd-bottom-none {
    border-bottom: unset;
}

/* @PADDING */
.pad-bottom-none {
    padding-bottom: unset;
}

.pad-top-none {
    padding-top: unset;
}

/* @FLEX */
.d-flex-spaced {
    display: flex;
    justify-content: space-between;
}

/* @BUTTONS */
.btn {
    display: inline-block;
    padding: var(--spacing-4) var(--spacing-6);
    border: 1px transparent solid;
    border-radius: var(--radius-4);
    cursor: pointer;
    text-align: center;
}

.btn--block {
    display: block;
    width: 100%;
}

.btn--large {
    padding: var(--spacing-4) var(--spacing-8);
}

.btn--accent {
    color: var(--color-light);
    background-color: var(--color-accent);
    transition: var(--transition-buttons);
}

.btn--edit {
    background-color: transparent;
}

.btn--edit-posting {
    vertical-align: middle;
}

.btn--edit-posting span {
    margin-right: var(--spacing-3);
    font-family: "ntsomic-bold", sans-serif;
}

.btn--circle {
    position: relative;
    border-radius: 50%;
    padding: var(--spacing-6);
}

.btn--circle * {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.btn--accent:hover {
    color: var(--color-accent);
    background-color: var(--color-light);
    border: 1px solid var(--color-accent);
}

.btn--dark-outline {
    color: var(--color-dark);
    border: 2px solid var(--color-dark);
    font-family: "ntsomic-semibold", sans-serif;
    transition: var(--transition-buttons);
}

.btn--dark-outline:hover {
    color: var(--color-light);
    background-color: var(--color-dark);
}

.btn--select .d-flex {
    align-items: center;
    gap: var(--spacing-5);
}

.btn--edit,
.btn--delete {
    padding: var(--spacing-1) var(--spacing-4) calc(var(--spacing-1) + 2px);
    color: var(--color-dark);
    border: 2px solid var(--color-dark);
    font-family: "ntsomic-semibold", sans-serif;
}

.btn--delete {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.btn--edit img {
    width: 16px;
    vertical-align: middle;
}

.btn--delete img {
    position: unset;
    width: 16px;
    height: auto;
}

.btn--edit span,
.btn--delete span {
    vertical-align: middle;
}

.btn--radius {
    color: var(--color-dark);
    border: 2px solid var(--color-dark);
    font-family: "ntsomic-semibold", sans-serif;
    transition: var(--transition-buttons);
}

.btn--radius-selected {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
}

.btn--logout img {
    margin-right: var(--spacing-3);
}

.btn--logout * {
    vertical-align: middle;
}

.btn--disabled {
    opacity: 0.2;
    pointer-events: none;
}

.btn--impersonator {
    position: fixed;
    right: 50px;
    bottom: 50px;
    z-index: 1000;
}

/* @CHIPS */
.chip {
    display: inline-block;
    padding: var(--spacing-2) var(--spacing-4) var(--spacing-2);
    border-radius: var(--radius-7);
    font-size: var(--font-small);
    text-align: center;
}

.chip--large {
    padding-left: var(--spacing-7);
    padding-right: var(--spacing-7);
}

.chip--primary {
    color: var(--color-primary-dark);
    background-color: #87C1EB33;
}

.card-pet-selection .chip--primary {
    background-color: #E7F3FB;
}

.chip--secondary {
    color: var(--color-light);
    background-color: var(--color-secondary);
}

.chip--success {
    color: var(--color-success-dark);
    background-color: var(--color-success);
}

.chip--warning {
    color: var(--color-warning-dark);
    background-color: var(--color-warning);
}

.chip--danger {
    color: var(--color-accent);
    background-color: #FF767633;
}

/* @CARDS */
.card {
    padding: var(--spacing-5);
    border-radius: var(--radius-4);
    background-color: var(--color-light);
    box-shadow: var(--box-shadow-default);
}

.card--unlock-contacts {
    position: relative;
    background-color: #FFE4E4;
    box-shadow: unset;
    max-width: 320px;
    text-align: center;
    margin-right: 20px;
    margin-left: 20px;
}

.card--unlock-contacts .pro-tag {
    position: absolute;
    right: 12px;
    top: 7px;
    color: var(--color-accent);
}

.card--unlock-contacts .title {
    font-family: "ntsomic-semibold", sans-serif;
    text-decoration: underline;
}

.card--unlock-contacts .subtitle {
    font-size: 0.7rem;
    margin-top: var(--spacing-3);
    margin-bottom: var(--spacing-3);
}

.card--unlock-contacts img {
    width: 16px;
    vertical-align: middle;
}

.card--unlock-contacts span {
    font-size: 0.95rem;
    vertical-align: middle;
}

.card--unlock-contacts .email-icon {
    margin-right: 2px;
}

.card--no-shadow {
    box-shadow: unset;
}

.card--outline {
    padding: var(--spacing-7);
    border: 2px solid var(--color-dark);
    box-shadow: unset;
}

.card--shadow-primary {
    box-shadow: 10px 10px 0 0 var(--color-primary);
}

.card--shadow-secondary {
    box-shadow: 10px 10px 0 0 var(--color-secondary);
}

.card-img {
    width: 130px;
}

.card-title {
    margin-bottom: var(--spacing-5);
}

.card-text--primary {
    line-height: 1.9rem;
}

.card--secondary {
    background-color: var(--color-secondary);
}

.card--circle {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    box-shadow: unset;
}

.card--circle * {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.card--sitter-status {
    max-width: 450px;
    position: relative;
    padding: var(--spacing-8);
    margin: 0 auto;
    text-align: center;
}

.card--sitter-status h2 {
    margin-bottom: var(--spacing-5);
    font-size: 1.2rem;
    line-height: 1.8rem;
}

.card--sitter-status p {
    line-height: 1.6rem;
    margin-bottom: var(--spacing-6);
}

.card--sitter-status video {
    width: 150px;
    height: 150px;
    object-fit: cover;
    object-position: center;
    position: absolute;
    right: 0;
    top: 0;
    transform: translate(50%, -50%);
    border-radius: 50%;
}

.card--sitter-status-approval video {
    left: 0;
    top: calc(var(--spacing-8) - 20px);
    transform: translateX(-50%);
}

.card--sitter-status-approval p {
    margin: var(--spacing-6) 0;
}

.card--sitter-status-approval .txt-small {
    font-size: 0.8rem;
}

/* @INPUTS */
.input-box {
    margin-bottom: var(--spacing-4);
}

.input-box--flex {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
}

.input-box--flex .input-wrapper {
    flex-grow: 1;
}

.input-box--flex .input-label--flex {
    width: 120px;
}

.input-box:last-of-type {
    margin-bottom: var(--spacing-6);
}

.input-label {
    display: inline-block;
    margin: 0 var(--spacing-2) var(--spacing-2);
}

.input-label--flex {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    margin: 0;
}

.input-label--flex span {
    display: block;
    flex-shrink: 0;
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: var(--radius-8);
    background-color: var(--color-primary-lighter);
    height: 52px;
    overflow: hidden;
}

.input-wrapper--select {
    cursor: pointer;
    padding: 0;
}

.input-wrapper--textarea {
    height: unset;
    border-radius: var(--radius-5);
}

.input-wrapper__input {
    flex-grow: 1;
    padding: var(--spacing-4) 50px var(--spacing-5) var(--spacing-5);
}

.input-wrapper__textarea, .input-wrapper__date {
    width: 100%;
    display: block;
    padding: var(--spacing-6);
    border: unset;
    background-color: transparent;
}

.input-wrapper__date {
    cursor: pointer;
}

.input-wrapper__date::-webkit-calendar-picker-indicator {
    cursor: pointer !important;
}

.input-wrapper--disabled {
    background-color: #0000001A;
}

.input-wrapper--disabled input {
    color: rgba(0, 0, 0, 0.5);
}

.input-wrapper__logo-wrapper {
    position: absolute;
    right: 20px;
}

.input-wrapper__logo-wrapper img {
    display: block;
}

#select-service-wrapper .input-wrapper__logo-wrapper {
    top: 15px;
    cursor: pointer;
}

.input-wrapper__logo-wrapper--password-eye {
    cursor: pointer;
}

.input-wrapper__logo-wrapper--password-eye .eye-off {
    display: none;
}

fieldset {
    margin-bottom: var(--spacing-7);
}

fieldset input {
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    margin: 0;
    font: inherit;
    color: currentColor;
    width: 1.15em;
    height: 1.15em;
    border: 0.15em solid currentColor;
    border-radius: 50%;
    display: grid;
    place-content: center;
}

fieldset input::before {
    content: "";
    width: 0.65em;
    height: 0.65em;
    border-radius: 50%;
    transform: scale(0);
    transition: 60ms transform ease-in-out;
    box-shadow: inset 1em 1em var(--color-dark);
}

fieldset input:checked::before {
    transform: scale(0.9);
}

.fieldset-title {
    margin-bottom: var(--spacing-5);
}

.fieldset-flex {
    display: flex;
    align-items: center;
    gap: var(--spacing-7);
}

.fieldset-label {
    font-family: "ntsomic-regular", sans-serif;
    font-size: 1rem;
    line-height: 1.1;
    display: grid;
    grid-template-columns: 1em auto;
    gap: 0.7em;
}

.fieldset-block__group {
    display: block;
    margin-bottom: var(--spacing-6);
}

.fieldset-label__title {
    font-family: "ntsomic-bold", sans-serif;
    font-size: 1.1rem;
}

.fieldset-label__description {
    display: block;
    word-break: normal;
    margin-top: var(--spacing-2);
    margin-left: 27px;
}

.fieldset-block__group .fieldset-label__title {
    margin-top: -3px;
}

.fieldset-block {
    margin-top: var(--spacing-5);
}

.pet-upload-image-wrapper {
    margin-left: var(--spacing-8);
}

.pet-upload-image-label {
    display: inline-block;
    width: 80px;
    height: 80px;
    position: relative;
    border: 3px dashed var(--color-dark);
    border-radius: 50%;
    vertical-align: middle;
    cursor: pointer;
    overflow: hidden;
}

.pet-upload-image-label img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

label.title-small {
    display: inline-block;
    margin-bottom: unset;
    margin-left: var(--spacing-2);
    font-size: 1.1rem;
    vertical-align: middle;
}

#pet-image-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* @DISPLAY */
.d-none {
    display: none !important;
}

.d-flex {
    display: flex;
}

.d-flex > * {
    display: block;
}

/* @TEXT */
.txt-left {
    text-align: left;
}

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

.txt-right {
    text-align: right;
}

.txt-normal {
    font-family: "ntsomic-regular", sans-serif;
    font-size: 1rem;
}

.txt-bold {
    font-family: "ntsomic-semibold", sans-serif;
}

.txt-underlined {
    text-decoration: underline;
}

.txt-lined {
    color: inherit;
    font-size: inherit;
    text-decoration: line-through;
}

.txt-limit-reached {
    color: var(--color-accent);
    margin-right: var(--spacing-4);
}

.txt-col-primary {
    color: var(--color-primary-dark);
}

.txt-col-accent {
    color: var(--color-accent);
}

.title-small {
    display: block;
    margin-bottom: var(--spacing-6);
    font-family: "ntsomic-bold", sans-serif;
    font-size: 1.2rem;
}

.title-small span {
    font-family: inherit;
}

.title-med {
    display: block;
    margin-bottom: var(--spacing-6);
    font-family: "ntsomic-bold", sans-serif;
    font-size: 1.8rem;
}

.title-big {
    display: block;
    font-family: "ntsomic-bold", sans-serif;
    font-size: 3rem;
    margin-bottom: var(--spacing-9);
}

.subtitle {
    /*font-family: "ntsomic-semibold", sans-serif;*/
    margin-bottom: var(--spacing-7);
}

/* @REVIEWS */
.generic-review.card--outline {
    display: flex;
    gap: var(--spacing-4);
    padding: var(--spacing-8);
}

.generic-review__img {
    width: 55px;
}

.generic-review__header {
    margin-bottom: var(--spacing-4);
}

.generic-review__reviewer {
    font-family: "ntsomic-semibold", sans-serif;
    font-size: var(--font-small);
    margin-bottom: var(--spacing-3);
}

.generic-review__reviewed-wrapper {
    display: inline-block;
    align-items: center;
    gap: var(--spacing-2);
    padding: 5px 5px;
    border-radius: var(--radius-3);
    background-color: var(--color-accent-lighter);
}

.generic-review__reviewed-name {
    font-family: "ntsomic-semibold", sans-serif;
    font-size: var(--font-small);
}

.generic-review__reviewed-rating {
    display: flex;
    align-items: center;
    gap: 3px;
}

.generic-review__reviewed-rating img {
    display: flex;
    align-items: center;
    gap: 3px;
    width: 16px;
}

.generic-review__body {
    line-height: 1.5rem;
}

/* @OVERFLOW */
.overflow-hidden {
    overflow: hidden;
}

.overflow-unset {
    overflow: unset;
}

/* @POINTER-EVENTS */
.pointer-events-none {
    pointer-events: none;
}

/* @BOTTOM-BAR */
.bottom-bar-sticky {
    width: 100%;
    position: sticky;
    left: 0;
    bottom: 0;
    padding: var(--spacing-6);
    background-color: var(--color-light);
}

.bottom-bar-sticky .container {
    display: flex;
    justify-content: end;
    gap: var(--spacing-4);
}

/* @MISC */
.hero {
    padding: var(--spacing-13) 0 var(--spacing-10);
}

.popup-shadow {
    box-shadow: 0 0 0 3000px rgba(0, 0, 0, 0.5);
}

#select-service-wrapper {
    cursor: pointer;
}

#select-service {
    cursor: none;
    pointer-events: none;
}

.back-header {
    display: flex;
    justify-content: center;
    text-align: center;
    gap: var(--spacing-4);
}

.back-header--small {
    justify-content: start;
}

.back-header__arrow {
    display: flex;
    align-items: center;
}

.back-header__text {
    display: block;
    font-family: "ntsomic-bold", sans-serif;
    font-size: 1.6rem;
    line-height: 1.8rem;
}

.back-header--small .back-header__text {
    font-family: "ntsomic-regular", sans-serif;
    font-size: 1rem;
    line-height: 1.2rem;
}

.back-header__text * {
    font-family: inherit;
    font-size: inherit;
}

.header-currency,
.footer-language {
    padding: var(--spacing-1) 25px var(--spacing-1) var(--spacing-2);
    border-radius: var(--radius-4);
    border: 1px solid var(--color-dark);
    font-size: var(--font-small);
    background-color: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("../images/icons/chevron-down-2925a127a5f6a2ee82820c48e300d108.svg");
    background-size: 12px;
    background-repeat: no-repeat;
    background-position-x: 80%;
    background-position-y: 50%;
    cursor: pointer;
}

.currency-symbol {
    font-size: inherit;
    font-family: inherit;
}

.footer-lang {
    position: relative;
    margin-top: var(--spacing-5);
}

.footer-lang button {
    cursor: pointer;
}

.footer-lang img {
    vertical-align: middle;
    margin-bottom: 3px;
    width: 12px;
    height: 12px;
}

.dropdown-lang {
    display: none;
    position: absolute;
    left: 0;
    bottom: -67px;
    list-style: none;
    width: 80px;
    z-index: 10;
    background-color: var(--color-secondary);
}

.loader-wrapper {
    text-align: center;
    padding: var(--spacing-9) 0 3px;
}

#dev-flag {
    background-color: var(--color-success);
    padding: var(--spacing-4);
    border-radius: var(--radius-5);
}

.posting-list .empty-state-posting {
    margin-top: var(--spacing-9);
}

.empty-state-posting-img {
    width: 90px;
    margin-left: var(--spacing-5);
}

.posting-list .empty-state-posting-img {
    margin-left: 0;
}

.empty-state-posting-text {
    font-size: var(--font-small);
}

.empty-state-pet {
    margin-bottom: var(--spacing-6);
}

.empty-state-pet-img {
    width: 500px;
    max-width: 100%;
}

.loader-img {
    height: 1rem;
}

.loader-full-page {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10000;

    width: 100vw;
    height: 100vh;
}

.loader-full-page img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 3000px rgba(0, 0, 0, 0.5);
    padding: var(--spacing-2);
    background-color: var(--color-primary);
    border-radius: 50%;
}

.star-review-img {
    border-radius: unset !important;
    object-fit: contain !important;
}

.circle-to-read {
    display: none;
    width: 12px;
    height: 12px;
    background-color: var(--color-accent);
    border-radius: 50%;
    box-shadow: 0 0 0 0 var(--color-accent);
    transform: scale(1);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(0.9);
        box-shadow: 0 0 0 0 rgba(250, 98, 89, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 8px rgba(250, 98, 89, 0);
    }

    100% {
        transform: scale(0.9);
        box-shadow: 0 0 0 0 rgba(250, 98, 89, 0);
    }
}

.circle-to-read.active {
    display: inline-block;
}





/* Rating */
.review-rating-btn-stars {
    display: flex;
    align-items: center;
    border-radius: var(--radius-5);
    box-shadow: none;
    cursor: default;
}

.review-rating-btn {
    display: block;
    color: var(--color-light);
    font-size: 1.4rem;
    text-align: center;
    text-transform: uppercase;
}

.review-rating-bakery-reviews-header .btn-stars-text {
    padding: 10px;
    font-size: 1.6rem;
}

.review-rating-bakery-reviews-header-rating-text {
    margin-right: 0;
}
.review-rating-btn-stars-text {
    margin-right: 15px;
    font-family: "ntsomic-regular", sans-serif;
    font-size: 1.1rem;
    word-break: keep-all;
}

.review-rating-bakery-reviews-header-wrapper {
    position: relative;
}

.review-rating-btn-stars-fill {
    position: absolute;
    z-index: 2;
    height: 100%;
    background-color: var(--color-bg);
    opacity: 85%;
    right: 0;
}

.review-rating-btn-stars-fill--white {
    background-color: var(--color-light);
}

.review-rating-bakery-reviews-header-icons {
    display: flex;
}

.bakery-reviews-header .btn-stars-icon {
    width: 24px;
    height: 24px;
}

.review-rating-stars-icon {
    width: 18px;
    height: 18px;
}

.review-rating-btn-stars-icon {
    margin-top: 0;
}

.review-rating-btn-stars-icon img {
    width: 100%;
    border-radius: unset;
    object-fit: unset;
}