@visns-studio/visns-components 4.7.0 → 4.7.2

package/components/crm/styles/Navigation.module.css

@@ -1,978 +0,0 @@
-.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);
-}