@visns-studio/visns-components 4.7.2 → 4.7.3

package/src/components/crm/styles/Navigation.module.scss

@@ -0,0 +1,978 @@
+.hwrap {
+    width: 100%;
+    display: flex;
+    align-items: center;
+}
+
+.hwrap .logo {
+    width: var(--logo-width, 100px);
+    padding: 0 2rem;
+    margin: 0;
+    line-height: 1.45;
+}
+
+.hwrap .logo img {
+    width: 100%;
+    max-width: var(--logo-max-width, 180px);
+    height: auto;
+    display: block;
+    margin: 0 auto;
+}
+
+.branding {
+    margin: 0;
+    padding: 0;
+    font-weight: 700;
+    letter-spacing: -1px;
+    text-align: center;
+}
+
+.branding .highlight {
+    color: white;
+}
+
+.branding .light {
+    font-weight: 300;
+    color: var(--secondary-color);
+}
+
+.navwrap {
+    flex: 1;
+}
+
+.app-nav {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    padding: 0.85rem 0;
+    margin: 0;
+    list-style: none;
+    align-items: center;
+}
+
+.app-nav .nav-item,
+.app-nav .nav-item-alternate {
+    cursor: pointer;
+    transition: all 0.15s cubic-bezier(0.25, 0.8, 0.25, 1);
+    box-sizing: border-box;
+    position: relative;
+}
+
+.app-nav .nav-item a,
+.app-nav .nav-item-alternate a,
+.app-nav .nav-item span,
+.app-nav .nav-item-alternate span {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    gap: 0.25rem;
+    box-sizing: border-box;
+    padding: 0.5em;
+    margin: 0.25em;
+    text-decoration: none;
+    outline: none;
+    border-radius: var(--br);
+    transition: all 0.15s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+.app-nav .nav-item a,
+.app-nav .nav-item span {
+    color: var(--tertiary-color);
+    background: var(--primary-color);
+}
+
+.app-nav .nav-item a svg,
+.app-nav .nav-item span svg {
+    color: var(--highlight-color);
+}
+
+.app-nav .nav-item-alternate a,
+.app-nav .nav-item-alternate span {
+    color: var(--paragraph-color);
+    background: white;
+}
+
+.app-nav .nav-item-alternate a svg,
+.app-nav .nav-item-alternate span svg {
+    color: var(--highlight-color);
+}
+
+.app-nav .nav-item:hover a,
+.app-nav .nav-item.active a,
+.app-nav .nav-item:hover span,
+.app-nav .nav-item.active span {
+    background: var(--primary-color-lighter);
+    color: var(--highlight-color);
+}
+
+.app-nav .nav-item:hover a svg,
+.app-nav .nav-item.active a svg,
+.app-nav .nav-item:hover span svg,
+.app-nav .nav-item.active span svg {
+    color: var(--highlight-color);
+}
+
+.app-nav .nav-item-alternate:hover a,
+.app-nav .nav-item-alternate.active a,
+.app-nav .nav-item-alternate:hover span,
+.app-nav .nav-item-alternate.active span {
+    background: rgba(238, 238, 238, 0.5);
+    color: var(--paragraph-color);
+}
+
+.app-nav .nav-item-alternate:hover a svg,
+.app-nav .nav-item-alternate.active a svg,
+.app-nav .nav-item-alternate:hover span svg,
+.app-nav .nav-item-alternate.active span svg {
+    color: var(--highlight-color);
+}
+
+.app-nav .nav-item > ul,
+.app-nav .nav-item-alternate > ul {
+    width: 200px;
+    position: absolute;
+    height: auto;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: none;
+    opacity: 0;
+    background: rgba(var(--primary-color-rgb), 0.75);
+    border-radius: 5px;
+}
+
+.app-nav .nav-item > ul li,
+.app-nav .nav-item-alternate > ul li {
+    display: block;
+    position: relative;
+    margin: 1px 0;
+}
+
+.app-nav .nav-item > ul li:last-of-type,
+.app-nav .nav-item-alternate > ul li:last-of-type {
+    margin-bottom: 0;
+}
+
+.app-nav .nav-item > ul li a,
+.app-nav .nav-item-alternate > ul li a {
+    width: 100%;
+    padding: 8px 20px;
+    box-sizing: border-box;
+    display: block;
+    text-decoration: none;
+    border-radius: 3px;
+    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
+    outline: none;
+    margin: 0;
+}
+
+.app-nav .nav-item > ul li a {
+    background: rgba(var(--primary-color-rgb), 0.9);
+    color: var(--tertiary-color) !important;
+}
+
+.app-nav .nav-item-alternate > ul li a {
+    background: rgba(var(--alternate-background-color-rgb), 0.9);
+    color: var(--alternate-paragraph-color);
+}
+
+.app-nav .nav-item > ul li:hover a,
+.app-nav .nav-item-alternate > ul li:hover a {
+    background: rgba(var(--primary-color-rgb), 1.05);
+    color: var(--highlight-color);
+}
+
+.app-nav .nav-item-alternate > ul li:hover a {
+    background: rgba(var(--alternate-background-color-rgb), 1.05);
+    color: var(--alternate-highlight-color);
+}
+
+.app-nav .nav-item > ul li:hover a svg,
+.app-nav .nav-item-alternate > ul li:hover a svg {
+    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+.app-nav .nav-item::before,
+.app-nav .nav-item a::before .navscrolled .nav-item a {
+    padding: 0.25em 1em;
+    transition: all 0.15s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+.app-nav .nav-item:hover > ul,
+.app-nav .nav-item-alternate:hover > ul {
+    display: block;
+    opacity: 1;
+}
+
+.navscrolled .nav-item span {
+    padding: 0.25em 1em;
+    transition: all 0.15s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+.hactions {
+    > ul {
+        list-style: none;
+        display: flex;
+        padding: 0 1rem 0 0;
+        margin: 0;
+        flex-wrap: nowrap;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+    }
+
+    > ul li {
+        margin: 0 5px;
+    }
+
+    > ul a {
+        color: var(--tertiary-color);
+        box-sizing: border-box;
+        padding: 0.35rem;
+        text-decoration: none;
+        background: none;
+        border: 2px solid var(--primary-color-lighter);
+        border-radius: 100%;
+        transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
+        display: flex;
+        align-items: center;
+    }
+
+    > ul a:hover {
+        background: var(--primary-color-lighter);
+        transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
+    }
+
+    > ul a:hover svg {
+        color: var(--highlight-color);
+        transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
+    }
+
+    button {
+        color: var(--tertiary-color);
+        box-sizing: border-box;
+        padding: 0.35rem;
+        text-decoration: none;
+        background: none;
+        border: 1px solid var(--primary-color-lighter);
+        border-radius: 100%;
+        transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
+        display: flex;
+        align-items: center;
+        outline: none;
+        appearance: none;
+    }
+
+    button:hover {
+        background: var(--primary-color-lighter);
+        transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
+    }
+
+    button:hover svg {
+        color: var(--highlight-color);
+        transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
+    }
+}
+
+.hactions-alternate {
+    > ul {
+        list-style: none;
+        display: flex;
+        padding: 0 1rem 0 0;
+        margin: 0;
+        flex-wrap: nowrap;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+    }
+
+    > ul li {
+        margin: 0 5px;
+    }
+
+    > ul a {
+        color: var(--paragraph-color);
+        box-sizing: border-box;
+        padding: 0.35rem;
+        text-decoration: none;
+        background: none;
+        border: 2px solid var(--primary-color-lighter);
+        border-radius: 100%;
+        transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
+        display: flex;
+        align-items: center;
+    }
+
+    > ul a:hover {
+        background: var(--primary-color-lighter);
+        transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
+    }
+
+    > ul a:hover svg {
+        color: var(--highlight-color);
+        transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
+    }
+
+    button {
+        color: var(--paragraph-color);
+        box-sizing: border-box;
+        padding: 0.35rem;
+        text-decoration: none;
+        background: none;
+        border: 1px solid var(--primary-color-lighter);
+        border-radius: 100%;
+        transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
+        display: flex;
+        align-items: center;
+        outline: none;
+        appearance: none;
+    }
+
+    button:hover {
+        background: var(--primary-color-lighter);
+        transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
+    }
+
+    button:hover svg {
+        color: var(--highlight-color);
+        transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
+    }
+}
+
+/** Simple Layout */
+.cwrap {
+    display: flex;
+}
+
+.aside--cms {
+    background: var(--nav-bg);
+    position: fixed;
+    overflow: hidden;
+    height: 100%;
+    width: var(--sidebar-width);
+}
+
+.aside--cms--open {
+    transform: translateX(0);
+    transition: all 0.55s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+.aside--cms .logo {
+    width: 100%;
+    position: relative;
+    background: rgba(var(--tertiary-color-rgb), 0.95);
+    height: 50px;
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: center;
+    align-items: center;
+}
+
+.cwrap .logo img {
+    width: 100%;
+    max-width: 90px;
+    height: auto;
+    display: block;
+    margin: 0 auto;
+}
+
+.awrap {
+    width: 100%;
+    position: relative;
+    padding: 1rem 0;
+}
+
+.navwrap {
+    width: 100%;
+    position: relative;
+}
+
+.aside--cms .awrap .navwrap .app-nav {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+}
+
+.aside--cms .awrap .navwrap .app-nav .nav-item {
+    width: 100%;
+    cursor: pointer;
+    box-sizing: border-box;
+    position: relative;
+    border-radius: var(--br);
+    overflow: hidden;
+    padding: 0.15rem 0.45rem;
+}
+
+.aside--cms .awrap .navwrap .app-nav .nav-item a {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    color: var(--tertiary-color);
+    box-sizing: border-box;
+    padding: 0.5rem 1rem;
+    line-height: 1.25;
+    text-decoration: none;
+    background: var(--nav-bg);
+    outline: none;
+    border-radius: var(--br);
+    transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+.aside--cms .awrap .navwrap .app-nav .nav-item a > svg {
+    position: relative;
+    right: 8px;
+    opacity: 1;
+    transition: opacity 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
+    color: var(--highlight-color);
+}
+
+.aside--cms .awrap .navwrap .app-nav .nav-item:hover a,
+.aside--cms .awrap .navwrap .app-nav .nav-item.active a {
+    transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
+    background: rgba(var(--tertiary-color-rgb), 0.05);
+    color: var(--highlight-color);
+}
+
+.aside--cms .awrap .navwrap .app-nav .nav-item:hover a > svg,
+.aside--cms .awrap .navwrap .app-nav .nav-item.active a > svg {
+    opacity: 1;
+    transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+.aside--cms .awrap .navwrap .app-nav .nav-item:hover ul {
+    display: block;
+    opacity: 1;
+}
+
+.aside--cms .awrap .navwrap .app-nav .nav-item.active a {
+    background: rgba(var(--tertiary-color-rgb), 0.075);
+    color: var(--highlight-color);
+}
+
+.aside--cms .awrap .navwrap .app-nav .nav-item span {
+    display: block;
+    color: rgba(var(--paragraph-color-rgb), 0.3);
+    box-sizing: border-box;
+    padding: 1.25em 0.85em;
+    line-height: 1.25;
+    text-decoration: none;
+    background: var(--primary-color);
+}
+
+.aside--cms .awrap .navwrap .app-nav .nav-item span:hover {
+    transition: all 0.15s cubic-bezier(0.25, 0.8, 0.25, 1);
+    background: rgba(var(--primary-color-rgb), 1.05);
+}
+
+.aside--cms .awrap .navwrap .app-nav .nav-item > ul {
+    width: 200px;
+    position: absolute;
+    height: auto;
+    margin: 0;
+    padding: 0.25em;
+    list-style: none;
+    display: none;
+    opacity: 0;
+    background: var(---primary-color);
+    border-radius: 5px;
+}
+
+.aside--cms .awrap .navwrap .app-nav .nav-item > ul li {
+    display: block;
+    position: relative;
+    margin-bottom: 2px;
+}
+
+.aside--cms .awrap .navwrap .app-nav .nav-item > ul li:last-of-type {
+    margin-bottom: 0;
+}
+
+.aside--cms .awrap .navwrap .app-nav .nav-item > ul li a {
+    width: 100%;
+    padding: 8px 20px;
+    box-sizing: border-box;
+    display: block;
+    text-decoration: none;
+    background: rgba(var(--primary-color-rgb), 0.92);
+    color: var(---tertiary-color);
+    border-radius: 3px;
+    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
+    outline: none;
+}
+
+.aside--cms .awrap .navwrap .app-nav .nav-item > ul li:hover a {
+    background: rgba(var(--secondary-color-rgb), 0.75);
+    color: var(---primary-color);
+    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+.content {
+    margin-left: var(--sidebar-width);
+    flex-grow: 1;
+
+    .content-header {
+        background: var(--tertiary-color);
+        box-sizing: border-box;
+        padding: 0.15rem;
+        height: 50px;
+        box-shadow: 1px 0px 0px rgba(255, 255, 255, 1);
+        display: flex;
+        flex-wrap: nowrap;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .content-title {
+        width: max-content;
+        padding: 0 1rem;
+
+        h1 {
+            padding: 0;
+            margin: 0;
+            font-size: 1em;
+            line-height: 1.25;
+            color: var(--paragraph-color);
+            font-weight: 300;
+        }
+
+        .mobmenu {
+            display: none;
+            visibility: hidden;
+        }
+    }
+
+    .content-actions {
+        width: max-content;
+
+        ul {
+            display: flex;
+            padding: 0;
+            margin: 0;
+            list-style: none;
+            justify-content: flex-end;
+
+            li {
+                padding: 0 10px;
+                text-align: center;
+
+                i {
+                    font-size: 1.25em;
+                }
+
+                a {
+                    text-decoration: none;
+                    color: var(--paragraph-color);
+                }
+            }
+        }
+    }
+
+    .content-main {
+        background: rgba(var(--tertiary-color-rgb), 1.05);
+    }
+}
+
+@media (max-width: 1600px) {
+    body {
+        font-size: 90%;
+    }
+
+    .grid {
+        width: 100%;
+        max-width: 1150px;
+        margin: 0 auto;
+    }
+}
+
+@media (max-width: 1024px) {
+    body {
+        font-size: 85%;
+    }
+
+    .app-container {
+        width: 100%;
+        min-height: 100vh;
+    }
+
+    .aside--cms {
+        width: 100%;
+        transform: translateX(-2000px);
+        transition: all 0.55s cubic-bezier(0.25, 0.8, 0.25, 1);
+        will-change: transform;
+        z-index: 600;
+    }
+
+    .aside--cms--open {
+        transform: translateX(0);
+        transition: all 0.55s cubic-bezier(0.25, 0.8, 0.25, 1);
+    }
+
+    .content .content-title .mobmenu {
+        display: block;
+        visibility: visible;
+    }
+
+    .mobmenu {
+        width: 60px;
+        height: 45px;
+        position: absolute;
+        margin: 0;
+        transform: rotate(0deg) scale(0.4);
+        transition: 0.5s ease-in-out;
+        cursor: pointer;
+        border: none;
+        outline: none;
+        background: none;
+        appearance: none;
+        top: 5px;
+        left: 5px;
+        z-index: 999;
+    }
+
+    .mobmenu span {
+        display: block;
+        position: absolute;
+        height: 5px;
+        width: 50%;
+        background: var(--secondary-color);
+        opacity: 1;
+        transform: rotate(0deg);
+        transition: 0.25s ease-in-out;
+    }
+
+    .mobmenu span:nth-child(even) {
+        left: 50%;
+        border-radius: 0 9px 9px 0;
+    }
+
+    .mobmenu span:nth-child(odd) {
+        left: 0px;
+        border-radius: 9px 0 0 9px;
+    }
+
+    .mobmenu span:nth-child(1),
+    .mobmenu span:nth-child(2) {
+        top: 0px;
+    }
+
+    .mobmenu span:nth-child(3),
+    .mobmenu span:nth-child(4) {
+        top: 18px;
+    }
+
+    .mobmenu span:nth-child(5),
+    .mobmenu span:nth-child(6) {
+        top: 36px;
+    }
+
+    .mobmenu--open span:nth-child(1),
+    .mobmenu--open span:nth-child(6) {
+        transform: rotate(45deg);
+    }
+
+    .mobmenu--open span:nth-child(2),
+    .mobmenu--open span:nth-child(5) {
+        transform: rotate(-45deg);
+    }
+
+    .mobmenu--open span:nth-child(1) {
+        left: 5px;
+        top: 7px;
+    }
+
+    .mobmenu--open span:nth-child(2) {
+        left: calc(50% - 5px);
+        top: 7px;
+    }
+
+    .mobmenu--open span:nth-child(3) {
+        left: -50%;
+        opacity: 0;
+    }
+
+    .mobmenu--open span:nth-child(4) {
+        left: 100%;
+        opacity: 0;
+    }
+
+    .mobmenu--open span:nth-child(5) {
+        left: 5px;
+        top: 29px;
+    }
+
+    .mobmenu--open span:nth-child(6) {
+        left: calc(50% - 5px);
+        top: 29px;
+    }
+
+    .content {
+        margin-left: 0;
+    }
+
+    .popup-content {
+        width: 90%;
+    }
+
+    .modalwrap .modal__header .modal__close {
+        padding: 5px;
+    }
+
+    .djobs {
+        flex-wrap: wrap;
+    }
+
+    .djobs__item {
+        width: 100%;
+        padding: 0.25rem 0.25rem;
+    }
+
+    .djobs__item--select {
+        flex-basis: 100%;
+        padding: 0.25rem 0.25rem;
+    }
+
+    .djobs__item--select select {
+        width: 100%;
+        cursor: pointer;
+        font-size: 0.95rem;
+        padding: 0.25rem 0.75rem;
+    }
+
+    .djobs__item--date {
+        flex-basis: 100%;
+        padding: 0.25rem 0.25rem;
+    }
+
+    .djobs__item--date input {
+        width: 100%;
+        cursor: pointer;
+        font-size: 0.95rem;
+        padding: 0.25rem 0.75rem !important;
+    }
+
+    .djobs__item--btns {
+        width: 100%;
+        margin-left: 0;
+        display: flex;
+        flex-wrap: nowrap;
+    }
+
+    .djobs__item--btns button {
+        width: 100%;
+        padding: 0.25rem 0.75rem;
+        font-size: 0.75rem;
+        margin-left: 5px;
+    }
+
+    .dassigned {
+        flex-wrap: wrap;
+    }
+
+    .dassigned__left {
+        flex: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: flex-start;
+        min-height: auto;
+        height: auto;
+        margin-right: 0;
+    }
+
+    .dassigned__left h1 {
+        font-size: 0.85rem;
+        padding: 0.75rem;
+    }
+
+    .dassigned__right {
+        flex: 100%;
+        height: auto;
+        overflow-y: auto;
+    }
+
+    .dassigned__table {
+        width: 100%;
+        display: block;
+    }
+
+    .dassigned__table table tr td {
+        font-size: 0.75rem;
+        padding: 5px 5px 5px 5px;
+    }
+
+    .dassigned__emp {
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+    }
+
+    .dassigned__emp h2 {
+        font-size: 1rem;
+        display: flex;
+        flex-wrap: nowrap;
+        align-items: center;
+        width: 100%;
+        padding: 0.25rem;
+        background: rgba(var(--primary-color), 0.15);
+        margin: 0;
+        font-weight: bold;
+        border-bottom: 1px solid #e7e7e7;
+    }
+
+    .dassigned__emp h2 > div {
+        width: max-content;
+        margin-left: auto;
+        display: flex;
+        align-items: center;
+        flex-wrap: nowrap;
+    }
+
+    .dassigned__emp h2 > div small {
+        font-size: 0.7rem;
+        color: var(--paragraph-color);
+        font-weight: 300;
+        display: block;
+        padding-right: 5px;
+    }
+
+    .dassigned__emp h2 > div button {
+        display: flex;
+        align-items: center;
+        appearance: none;
+        border: none;
+        padding: 0;
+        margin: 0;
+        outline: none;
+        background: none;
+    }
+
+    .dassigned__emp h2 > div button svg {
+        width: 100%;
+        max-width: 28px;
+        height: auto;
+    }
+
+    .dassigned__emp h2 > div button .toff {
+        opacity: 0.5;
+    }
+}
+
+@media (max-width: 960px) {
+    .padding {
+        padding: 0.15rem;
+    }
+
+    .userdetails {
+        display: none;
+        visibility: hidden;
+    }
+
+    .subtitle h2 {
+        font-size: 1em;
+        line-height: 1.45;
+    }
+
+    .dashlist a {
+        width: 100%;
+        height: auto;
+        margin: 0.25rem 0 0.25rem 0;
+        padding: 0.65rem;
+    }
+
+    .dashlist a:nth-child(3n) {
+        margin: 0.25rem 0 0.25rem 0;
+    }
+
+    .dashlist a:nth-child(-n + 3) {
+        margin: 0.25rem 0 0.25rem 0;
+    }
+
+    .grid__subcontent {
+        flex: 100%;
+    }
+
+    .pagination {
+        padding: 0 1rem;
+    }
+}
+
+.globalsearch {
+    display: flex;
+    flex-wrap: nowrap;
+    align-content: center;
+    width: 50%;
+
+    button {
+        width: max-content;
+        padding: 0.15rem 0.65rem;
+        margin: 0 0.5rem;
+        border: none;
+        background: var(--primary-color);
+        appearance: none;
+        border-radius: 0.375rem;
+
+        svg {
+            display: block;
+            color: white;
+            width: 100%;
+            max-width: 20px;
+        }
+    }
+}
+
+.AutocompletePlace-results {
+    z-index: 999;
+}
+
+.AutocompletePlace {
+    position: relative;
+
+    > svg {
+        position: absolute;
+        right: 0.5em;
+        top: 0.5em;
+        color: var(--paragraph-color);
+        cursor: pointer;
+    }
+
+    .toggleActive {
+        color: var(--highlight-color);
+    }
+}
+
+.AutocompletePlace-input {
+    padding: 0.65rem 3rem 0.65rem 0.95rem !important;
+    height: 38px;
+}
+
+.AutocompletePlace-results {
+    width: 400px;
+    position: absolute;
+    background-color: white;
+    padding: 0;
+    margin: 0;
+    border: 1px solid rgba(var(--primary-color), 0.25);
+    border-radius: var(--br);
+    overflow: hidden;
+
+    ul {
+        padding: 0;
+        margin: 0;
+    }
+}
+
+.AutocompletePlace-items {
+    list-style: none;
+    border-bottom: 1px solid rgba(var(--primary-color-rgb), 0.1);
+    cursor: pointer;
+    padding: 10px 10px;
+}
+
+.AutocompletePlace-items:hover {
+    background-color: rgba(var(--paragraph-color-rgb), 0.065);
+}