@visns-studio/visns-components 4.10.48 → 5.0.1-8.1

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

@@ -1,17 +1,19 @@
 .hwrap {
-    width: 100%;
-    display: flex;
+    display: grid;
+    grid-template-columns: auto auto 1fr auto;
     align-items: center;
+    gap: var(--padding);
+    width: 100%;
 
     .logo {
-        width: 130px;
-        padding: 0 2rem 0 2rem;
+        width: var(--logo-width);
+        padding: 0;
         margin: 0;
         line-height: 1.45;
+        margin-right: 1rem;
 
         img {
             width: 100%;
-            max-width: 180px;
             height: auto;
             display: block;
             margin: 0 auto;
@@ -21,16 +23,16 @@
     .branding {
         margin: 0;
         padding: 0;
-        font-weight: 700;
+        font-weight: var(--title-weight);
         letter-spacing: -1px;
         text-align: center;
 
         .highlight {
-            color: white;
+            color: var(--tertiary-color);
         }
 
         .light {
-            font-weight: 300;
+            font-weight: var(--para-weight);
             color: var(--secondary-color);
         }
     }
@@ -44,308 +46,247 @@
     display: flex;
     flex-wrap: nowrap;
     flex-direction: row;
-    padding: 0.85rem 0;
+    gap: 0.5rem;
     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);
-}
+    .nav-item,
+    .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-alternate > ul li:hover a {
-    background: rgba(var(--alternate-background-color-rgb), 1.05);
-    color: var(--alternate-highlight-color);
-}
+        a,
+        span {
+            font-size: 1rem;
+            display: flex;
+            flex-wrap: nowrap;
+            align-items: center;
+            gap: 0.25rem;
+            box-sizing: border-box;
+            padding: 0.35em 0.5em;
+            margin: 0;
+            line-height: 1;
+            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 > 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);
-}
+        &.nav-item {
+            a,
+            span {
+                color: var(--tertiary-color);
+            }
 
-.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);
-}
+            svg {
+                color: var(--secondary-color);
+                display: none;
+                visibility: hidden;
+            }
 
-.app-nav .nav-item:hover > ul,
-.app-nav .nav-item-alternate:hover > ul {
-    display: block;
-    opacity: 1;
-}
+            &:hover a,
+            &.active a,
+            &:hover span,
+            &.active span {
+                background: rgba(var(--nav-active-rgb), 1);
+                color: var(--highlight-color);
+            }
 
-.navscrolled .nav-item span {
-    padding: 0.25em 1em;
-    transition: all 0.15s cubic-bezier(0.25, 0.8, 0.25, 1);
-}
+            &:hover svg,
+            &.active svg {
+                color: var(--highlight-color);
+            }
 
-.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 {
+                width: 200px;
+                position: absolute;
+                height: auto;
+                margin: 0;
+                padding: 0;
+                list-style: none;
+                display: none;
+                opacity: 0;
+                background: rgba(var(--primary-rgb), 0.75);
+                border-radius: var(--br);
+
+                li {
+                    display: block;
+                    position: relative;
+                    margin: 1px 0;
+
+                    &:last-of-type {
+                        margin-bottom: 0;
+                    }
+
+                    a {
+                        width: 100%;
+                        padding: 8px 20px;
+                        box-sizing: border-box;
+                        display: block;
+                        text-decoration: none;
+                        border-radius: var(--br);
+                        transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
+                        outline: none;
+                        margin: 0;
+                        background: rgba(var(--primary-rgb), 1);
+                        color: var(--tertiary-color) !important;
+                    }
+
+                    &:hover a {
+                        background: rgba(var(--primary-rgb), 1);
+                        color: var(--tertiary-color);
+                    }
+
+                    svg {
+                        transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
+                    }
+                }
+            }
 
-    > ul li {
-        margin: 0 5px;
-    }
+            &:hover > ul {
+                display: block;
+                opacity: 1;
+            }
+        }
 
-    > 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;
-    }
+        &.nav-item-alternate {
+            a,
+            span {
+                color: var(--paragraph-color);
+                background: var(--tertiary-color);
+            }
 
-    /* Hover and Active States for <a> */
-    > ul a:hover,
-    > ul a.active {
-        background: var(--primary-color-lighter);
-        transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
-    }
+            svg {
+                color: var(--secondary-color);
+            }
 
-    > ul a:hover svg,
-    > ul a.active svg {
-        color: var(--highlight-color);
-        transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
-    }
+            &:hover a,
+            &.active a,
+            &:hover span,
+            &.active span {
+                background: rgba(238, 238, 238, 0.5);
+                color: var(--paragraph-color);
+            }
 
-    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;
-    }
+            &:hover svg,
+            &.active svg {
+                color: var(--secondary-color);
+            }
 
-    /* Hover and Active States for button */
-    button:hover,
-    button.active {
-        background: var(--primary-color-lighter);
-        transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
-    }
+            > ul {
+                width: 200px;
+                position: absolute;
+                height: auto;
+                margin: 0;
+                padding: 0;
+                list-style: none;
+                display: none;
+                opacity: 0;
+                background: rgba(var(--primary-rgb), 0.9);
+                border-radius: var(--br);
+
+                li {
+                    display: block;
+                    position: relative;
+                    margin-bottom: 2px;
+
+                    &:last-of-type {
+                        margin-bottom: 0;
+                    }
+
+                    a {
+                        width: 100%;
+                        padding: 8px 20px;
+                        box-sizing: border-box;
+                        display: block;
+                        text-decoration: none;
+                        background: rgba(var(--primary-rgb), 0.9);
+                        color: var(--paragraph-color);
+                    }
+
+                    &:hover a {
+                        background: rgba(var(--primary-rgb), 1.05);
+                        color: var(--secondary-color);
+                    }
+                }
+            }
 
-    button:hover svg,
-    button.active svg {
-        color: var(--highlight-color);
-        transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
+            &:hover > ul {
+                display: block;
+                opacity: 1;
+            }
+        }
     }
 }
 
-.hactions-alternate {
+.hactions {
+    width: max-content;
+    justify-self: end;
+
     > ul {
         list-style: none;
         display: flex;
-        padding: 0 1rem 0 0;
+        padding: 0;
         margin: 0;
         flex-wrap: nowrap;
         flex-direction: row;
         align-items: center;
         justify-content: center;
-    }
 
-    > ul li {
-        margin: 0 5px;
-    }
+        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;
-    }
+        a {
+            color: var(--tertiary-color);
+            box-sizing: border-box;
+            padding: 0.35rem;
+            text-decoration: none;
+            background: none;
+            border: 2px solid var(--primary-color);
+            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);
-    }
+            &:hover {
+                background: var(--primary-color);
 
-    > ul a:hover svg {
-        color: var(--highlight-color);
-        transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
-    }
+                svg {
+                    color: var(--secondary-color);
+                }
+            }
+        }
 
-    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 {
+            color: var(--tertiary-color);
+            box-sizing: border-box;
+            padding: 0.35rem;
+            text-decoration: none;
+            background: none;
+            border: 1px solid var(--primary-color);
+            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);
-    }
+            &:hover {
+                background: var(--primary-color);
 
-    button:hover svg {
-        color: var(--highlight-color);
-        transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
+                svg {
+                    color: var(--secondary-color);
+                }
+            }
+        }
     }
 }
 
-/** Simple Layout */
 .cwrap {
     display: flex;
 }
@@ -356,164 +297,144 @@
     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;
-}
+    &--open {
+        transform: translateX(0);
+        transition: all 0.55s cubic-bezier(0.25, 0.8, 0.25, 1);
+    }
 
-.aside--cms .awrap .navwrap .app-nav .nav-item > ul li:last-of-type {
-    margin-bottom: 0;
-}
+    .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;
+    }
 
-.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;
-}
+    .awrap {
+        width: 100%;
+        position: relative;
+        padding: var(--padding) 0;
 
-.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);
+        .navwrap {
+            width: 100%;
+            position: relative;
+
+            .app-nav {
+                width: 100%;
+                display: flex;
+                flex-wrap: wrap;
+                flex-direction: column;
+                padding: 0;
+                margin: 0;
+                list-style: none;
+
+                .nav-item {
+                    width: 100%;
+                    cursor: pointer;
+                    box-sizing: border-box;
+                    position: relative;
+                    border-radius: var(--br);
+                    overflow: hidden;
+                    padding: 0.15rem 0.45rem;
+
+                    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);
+                    }
+
+                    svg {
+                        position: relative;
+                        right: 8px;
+                        opacity: 1;
+                        transition: opacity 0.65s
+                            cubic-bezier(0.25, 0.8, 0.25, 1);
+                        color: var(--secondary-color);
+                    }
+
+                    &:hover a,
+                    &.active a {
+                        background: rgba(var(--tertiary-color-rgb), 0.05);
+                        color: var(--secondary-color);
+                    }
+
+                    &:hover svg,
+                    &.active svg {
+                        opacity: 1;
+                    }
+
+                    span {
+                        display: block;
+                        color: rgba(var(--paragraph-rgb), 0.3);
+                        box-sizing: border-box;
+                        padding: 1.25em 0.85em;
+                        line-height: 1.25;
+                        text-decoration: none;
+                        background: var(--primary-color);
+
+                        &:hover {
+                            background: rgba(var(--primary-rgb), 1.05);
+                        }
+                    }
+
+                    > 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;
+
+                        li {
+                            display: block;
+                            position: relative;
+                            margin-bottom: 2px;
+
+                            &:last-of-type {
+                                margin-bottom: 0;
+                            }
+
+                            a {
+                                width: 100%;
+                                padding: 8px 20px;
+                                box-sizing: border-box;
+                                display: block;
+                                text-decoration: none;
+                                background: rgba(var(--primary-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;
+                            }
+
+                            &:hover a {
+                                background: rgba(var(--secondary-rgb), 0.75);
+                                color: var(--primary-color);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
 }
 
 .content {
@@ -525,7 +446,7 @@
         box-sizing: border-box;
         padding: 0.15rem;
         height: 50px;
-        box-shadow: 1px 0px 0px rgba(255, 255, 255, 1);
+        box-shadow: var(--box-shadow-small);
         display: flex;
         flex-wrap: nowrap;
         justify-content: space-between;
@@ -534,7 +455,7 @@
 
     .content-title {
         width: max-content;
-        padding: 0 1rem;
+        padding: 0 var(--padding);
 
         h1 {
             padding: 0;
@@ -542,7 +463,7 @@
             font-size: 1em;
             line-height: 1.25;
             color: var(--paragraph-color);
-            font-weight: 300;
+            font-weight: var(--para-weight);
         }
 
         .mobmenu {
@@ -582,23 +503,7 @@
     }
 }
 
-@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;
@@ -827,7 +732,7 @@
         background: rgba(var(--primary-color), 0.15);
         margin: 0;
         font-weight: bold;
-        border-bottom: 1px solid #e7e7e7;
+        border-bottom: 1px solid var(--border-color);
     }
 
     .dassigned__emp h2 > div {
@@ -841,7 +746,7 @@
     .dassigned__emp h2 > div small {
         font-size: 0.7rem;
         color: var(--paragraph-color);
-        font-weight: 300;
+        font-weight: var(--para-weight);
         display: block;
         padding-right: 5px;
     }
@@ -869,10 +774,6 @@
 }
 
 @media (max-width: 960px) {
-    .padding {
-        padding: 0.15rem;
-    }
-
     .userdetails {
         display: none;
         visibility: hidden;
@@ -880,14 +781,14 @@
 
     .subtitle h2 {
         font-size: 1em;
-        line-height: 1.45;
+        line-height: var(--title-height);
     }
 
     .dashlist a {
         width: 100%;
         height: auto;
         margin: 0.25rem 0 0.25rem 0;
-        padding: 0.65rem;
+        padding: var(--padding);
     }
 
     .dashlist a:nth-child(3n) {
@@ -903,7 +804,7 @@
     }
 
     .pagination {
-        padding: 0 1rem;
+        padding: 0 var(--padding);
     }
 }
 
@@ -920,65 +821,13 @@
         border: none;
         background: var(--primary-color);
         appearance: none;
-        border-radius: 0.375rem;
+        border-radius: var(--br);
 
         svg {
             display: block;
-            color: white;
+            color: var(--tertiary-color);
             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;
-
-    &:hover {
-        background-color: rgba(var(--paragraph-color-rgb), 0.065);
-    }
-}