first commit

scss/layout/_container.scss

@@ -0,0 +1,44 @@
+html {
+    overflow-y: auto;
+}
+@media (max-width: 1279px) {
+    .v-main {
+        margin: 0 10px;
+    }
+}
+
+.cursor-pointer {
+    cursor: pointer;
+}
+
+.page-wrapper {
+    min-height: calc(100vh - 100px);
+    padding: 24px 24px 30px 24px !important;
+    @media screen and (max-width: 767px) {
+        padding: 20px 10px !important;
+    }
+}
+
+.maxWidth {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
+    @media screen and (max-width: 1368px) {
+        padding: 0 0px !important;
+    }
+    @media screen and (max-width: 1199px) {
+        padding: 0 8px !important;
+    }
+}
+
+
+.fixed-width {
+    max-width: 1300px;
+}
+
+.right-pos-img {
+    position: absolute;
+    right: 0;
+    top: 0;
+    height: 100%;
+}

scss/layout/_customizer.scss

@@ -0,0 +1,100 @@
+.v-btn.customizer-btn {
+    position: fixed;
+    bottom: 30px;
+    right: 30px;
+    border-radius: 50%;
+    z-index: 5;
+
+    .icon {
+        animation: progress-circular-rotate 1.4s linear infinite;
+        transform-origin: center center;
+        transition: all 0.2s ease-in-out;
+    }
+}
+
+.btn-group-custom {
+    &.v-btn-group {
+        height: 66px !important;
+        overflow: unset !important;
+
+        .v-btn {
+            height: 66px;
+            padding: 0 20px;
+            border: 1px solid rgb(var(--v-theme-borderColor), 0.7);
+            transition: all 0.1s ease-in 0s;
+
+            &:hover {
+                transform: scale(1.05);
+            }
+
+            &.text-primary {
+                .v-btn__overlay {
+                    background: transparent !important;
+                }
+
+                .icon {
+                    color: rgb(var(--v-theme-primary)) !important;
+                }
+            }
+        }
+    }
+}
+
+.hover-btns {
+    transition: all 0.1s ease-in 0s;
+
+    &:hover {
+        transform: scale(1.05);
+    }
+}
+
+// all template colors
+.v-avatar.themeBlue,
+.v-avatar.themeDarkBlue {
+    background: #635BFF;
+}
+
+.v-avatar.themeAqua,
+.v-avatar.themeDarkAqua {
+    background: #0074ba;
+}
+
+.v-avatar.themePurple,
+.v-avatar.themeDarkPurple {
+    background: #763ebd;
+}
+
+.v-avatar.themeGreen,
+.v-avatar.themeDarkGreen {
+    background: #0a7ea4;
+}
+
+.v-avatar.themeCyan,
+.v-avatar.themeDarkCyan {
+    background: #01c0c8;
+}
+
+.v-avatar.themeOrange,
+.v-avatar.themeDarkOrange {
+    background: #fa896b;
+}
+
+.DARK_BLUE_THEME, .DARK_AQUA_THEME, .DARK_ORANGE_THEME, .DARK_PURPLE_THEME, .DARK_GREEN_THEME, .DARK_CYAN_THEME {
+    .togglethemeBlue {
+        display: block !important;
+    }
+
+    .togglethemeDarkBlue {
+        display: none !important;
+    }
+}
+
+.BLUE_THEME, .AQUA_THEME, .ORANGE_THEME, .PURPLE_THEME, .GREEN_THEME, .CYAN_THEME {
+    .togglethemeDarkBlue {
+        display: block !important;
+    }
+
+    .togglethemeBlue {
+        display: none !important;
+    }
+}

scss/layout/_dark.scss

@@ -0,0 +1,73 @@
+// theme : dark
+div[class*='v-theme--DARK_'] {
+    .smallCap {
+        color: rgb(var(--v-theme-textSecondary));
+    }
+
+    .elevation-10 {
+        box-shadow: none !important;
+    }
+
+    .v-field__outline {
+        --v-field-border-opacity: 0.38 !important;
+    }
+
+    #vector-map .dxm-layers path {
+        fill: #7C8FAC !important;
+    }
+
+    .svgMap-map-wrapper {
+        .svgMap-country {
+            stroke: transparent;
+            fill: #43516a !important;
+
+            &#svgMap-map-country-IN {
+                fill: rgb(var(--v-theme-primary)) !important;
+            }
+
+            &#svgMap-map-country-AF {
+                fill: rgb(var(--v-theme-error)) !important;
+            }
+
+            &#svgMap-map-country-US {
+                fill: rgb(var(--v-theme-secondary)) !important;
+            }
+        }
+
+        .svgMap-map-controls-zoom {
+            background: #43516a !important;
+
+            .svgMap-control-button.svgMap-zoom-button:before,
+            .svgMap-control-button.svgMap-zoom-in-button:after {
+                background: #9b9898 !important;
+            }
+        }
+
+        .svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button:after,
+        .svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button:before {
+            background: #9b9898 !important;
+        }
+
+    }
+
+    .dark-table {
+        background-color: rgb(var(--v-theme-light)) !important;
+    }
+
+    .authentication {
+        background-color: rgba(var(--v-theme-light)) !important;
+    }
+    .front-wraper{
+        .bg-darkgray{
+            background-color: #0a2540 !important;
+        }
+        .text-hover-sky {
+            color: rgb(var(--v-theme-white));
+        
+            &:hover {
+                color: rgb(var(--v-theme-primary));
+            }
+        }
+    }
+}
+

scss/layout/_horizontal.scss

@@ -0,0 +1,208 @@
+.horizontalLayout{
+    .v-main{
+        margin: 0 16px !important;
+        @media screen and (max-width: 767px) {
+            margin: 0 10px !important;
+        }
+    }
+}
+.horizontal-header {
+    &.v-app-bar .v-toolbar__content {
+        padding: 0;
+        display: flex;
+        justify-content: space-between;
+    }
+    .maxWidth{
+        padding: 0 20px !important;
+        @media screen and (max-width: 1199px) {
+            padding: 0 8px !important;
+        }
+    }
+
+}
+
+.ddMenu{
+    &.ddLevel-1{
+        .navItem{
+            .navItemLink{
+                .dot {
+                    height: 6px;
+                    width: 6px;
+                    background-color: rgb(var(--v-theme-textSecondary));
+                    border-radius: 50%;
+                    margin-inline-end: 8px !important;
+                }
+            }
+
+            &:hover{
+                .dot { 
+                    background-color: rgb(var(--v-theme-primary));
+                }
+            }
+        }
+    }
+    &.ddLevel-2{
+        .navItem{
+            .navItemLink{
+                .dot {
+                    height: 6px;
+                    width: 6px;
+                    background-color: rgb(var(--v-theme-textSecondary));
+                    border-radius: 50%;
+                    margin-inline-end: 8px !important;
+                }
+            }
+            &:hover{
+                .dot { 
+                    background-color: rgb(var(--v-theme-primary));
+                }
+            }
+        }
+    }
+}
+
+
+.horizontalMenu {
+    .v-toolbar__content {
+        max-width: 1270px;
+        margin: 0 auto;
+    }
+    .navItem:has(.ddMenu.ddLevel-1 li a.router-link-active) {
+        background-color: rgb(var(--v-theme-primary)) !important;
+        border-radius: 12px ;
+        .navcollapse{
+            color: rgba(255,255,255);
+        }
+    }
+  
+}
+
+.mobile-menu {
+    .v-navigation-drawer {
+        margin-top: -70px !important;
+        height: 100vh !important;
+        z-index: 2000 !important;
+        
+    }
+}
+
+@media (min-width: 960px) {
+    .horizontalMenu {
+        margin-top: 70px;
+        margin-bottom: -70px;
+
+        .maxWidth {
+            .horizontal-navbar {
+                max-width: 1160px;
+            }
+        }
+    }
+
+    .horizontal-navbar {
+        padding: 16px 0;
+        margin: 0px auto;
+        align-items: center;
+        display: flex;
+        z-index: 11;
+        font-size: 0.875rem;
+        position: relative;
+
+        ul {
+            padding: 0px;
+            margin: 0px;
+        }
+
+        .ddMenu{
+            li{
+                a{
+                    color: rgb(var(--v-theme-textPrimary)) !important; 
+                }
+            }
+        }
+
+        li {
+            list-style: none;
+
+            a {
+                text-decoration: none;
+                display: flex;
+                align-items: center;
+                padding: 10px 13px;
+                height: 40px;
+
+                .navIcon {
+                    margin-right: 10px;
+                    display: flex;
+                }
+
+                .ddIcon {
+                    margin-top: 2px;
+                }
+
+                &.router-link-exact-active {
+                    background-color: rgb(var(--v-theme-primary));
+                    color: white !important;
+
+                    .dot{
+                        background-color: rgba(255,255,255)   !important;
+                    }
+                }
+
+                &:hover {
+                    color: rgb(var(--v-theme-primary));
+                }
+            }
+        }
+
+        .navItem {
+            position: relative;
+        }
+
+        .ddMenu {
+            position: absolute;
+            width: 230px;
+            display: none;
+            top: 40px;
+            padding: 10px;
+            z-index: 1;
+            background-color: rgb(var(--v-theme-surface));
+            box-shadow: $box-shadow;
+            border-radius: $border-radius-root;
+
+            li {
+                margin-bottom: 3px;
+            }
+        }
+
+        .ddLevel-2,
+        .ddLevel-3 {
+            top: -5px;
+            left: 212px;
+        }
+
+        .navItem:hover {
+
+            >.ddMenu {
+                display: block;
+            }
+        }
+
+        >li:hover {
+            background-color: rgb(var(--v-theme-lightprimary));
+            border-radius: $border-radius-root + 4px;
+
+            >.navItemLink {
+                color: rgb(var(--v-theme-primary));
+                opacity: 1;
+            }
+        }
+
+        .router-link-exact-active {
+            color: rgb(var(--v-theme-primary));
+            font-weight: 500;
+            background-color: rgb(var(--v-theme-lightprimary));
+            border-radius: $border-radius-root;
+        }
+    }
+}
+

scss/layout/_reboot.scss

@@ -0,0 +1,122 @@
+.h-100 {
+    height: 100%;
+}
+.w-100 {
+    width: 100%;
+}
+
+.h-100vh {
+    height: 100vh;
+}
+
+.gap-2 {
+    gap: 8px;
+}
+
+.gap-3 {
+    gap: 16px;
+}
+
+.gap-4 {
+    gap: 24px;
+}
+
+.text-white {
+    color: rgb(255, 255, 255) !important;
+}
+
+// border
+.border-bottom {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.opacity-1 {
+    opacity: 1 !important;
+}
+
+.opacity-20 {
+    opacity: 0.2;
+}
+.opacity-30 {
+    opacity: 0.3;
+}
+.opacity-50 {
+    opacity: 0.5;
+}
+.opacity-80 {
+    opacity: 0.8;
+}
+
+.z-auto.v-card {
+    z-index: auto;
+}
+
+.obj-cover {
+    object-fit: cover;
+}
+.cursor-move{
+    cursor: move;
+}
+.z-index-2{
+    z-index: 2;
+}
+h1,h2,h3,h4,h5,h6{
+    font-weight: 600 !important;
+}
+.lh-30{
+    line-height: 30px;
+}
+.lh-0{
+    line-height: 0;
+}
+
+.heading{
+    color:rgba(var(--v-theme-textPrimary));
+}
+body{
+    font-size: 14px;
+    color: rgb(var(--v-theme-textSecondary));
+}
+.hover-link-primary{
+    &:hover{
+        color:rgba(var(--v-theme-primary)) !important;
+    }      
+}
+
+//Date time picker
+input[type="date"],input[type="time"] { 
+    display:block !important;
+  }
+  
+  input[type="date"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator  {
+    display:block !important;
+  }
+
+  .ProseMirror{
+    min-height: 150px;
+  }
+
+  .upload-btn-wrapper{
+    width: 150px;
+    height: 140px;
+    margin: 0 auto;
+    box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.075);
+    input[type=file] {
+        position: absolute;
+        left: 0;
+        top: 0;
+        opacity: 0;
+        height: 100%;
+        width: 100%;
+    } 
+  }
+
+  .bg-transparent{
+    background-color: transparent !important;
+  }
+
+  @media screen and (max-width:1368px) and (min-width:1200px){
+    .space-20{
+        padding: 30px 20px !important;
+    }
+  }

scss/layout/_rtl.scss

@@ -0,0 +1,296 @@
+.v-locale--is-rtl {
+    .v-btn.customizer-btn {
+        left: 30px;
+        right: unset;
+    }
+
+    .leftSidebar {
+        border-left: 0;
+        border-right: unset;
+        left: auto;
+        right: 0;
+    }
+
+    .mini-sidebar {
+        .v-main {
+            margin-right: 15px !important;
+        }
+    }
+
+    .ml-1 {
+        margin-left: unset !important;
+        margin-right: 4px;
+    }
+
+    .ml-2 {
+        margin-left: unset !important;
+        margin-right: 8px;
+    }
+
+    .mr-1 {
+        margin-right: unset !important;
+        margin-left: 4px;
+    }
+
+    .mr-2 {
+        margin-right: unset !important;
+        margin-left: 8px;
+    }
+
+    .mr-3 {
+        margin-right: unset !important;
+        margin-left: 12px !important;
+    }
+
+    .mr-4 {
+        margin-right: unset !important;
+        margin-left: 16px !important;
+    }
+
+    .ml-3 {
+        margin-left: unset !important;
+        margin-right: 12px;
+    }
+
+    .ml-4 {
+        margin-left: unset !important;
+        margin-right: 16px;
+    }
+
+    .ml-5 {
+        margin-left: unset !important;
+        margin-right: 20px;
+    }
+
+    .ml-6 {
+        margin-left: unset !important;
+        margin-right: 24px;
+    }
+
+    .ml-10 {
+        margin-left: unset !important;
+        margin-right: 40px;
+    }
+
+    .pl-1 {
+        padding-left: unset !important;
+        padding-right: 4px !important;
+    }
+
+    .pl-2 {
+        padding-left: unset !important;
+        padding-right: 8px !important;
+    }
+
+    .pr-2 {
+        padding-left: 8px !important;
+    }
+
+    .pr-4 {
+        padding-left: 16px !important;
+        padding-right: unset !important;
+    }
+
+    .pl-4 {
+        padding-left: unset !important;
+        padding-right: 16px !important;
+    }
+
+    .pl-5 {
+        padding-left: unset !important;
+        padding-right: 20px !important;
+    }
+
+    .right-pos-img {
+        right: unset;
+        left: 0;
+        transform: scaleX(-1);
+        top: 0;
+    }
+
+    .badg-dotDetail {
+        left: 0;
+        right: -8px;
+    }
+
+    .badg-dot {
+        left: 12px;
+    }
+
+    .text-right {
+        text-align: left !important;
+    }
+
+    .text-sm-right,
+    .text-md-right {
+        text-align: left !important;
+    }
+
+    .text-sm-left {
+        text-align: right !important;
+    }
+
+    .text-left {
+        text-align: right !important;
+    }
+
+    .ml-auto,
+    .ml-sm-auto {
+        margin-left: unset !important;
+        margin-right: auto !important;
+    }
+
+    .mr-auto {
+        margin-right: unset !important;
+        margin-left: auto;
+    }
+
+    .authentication .auth-header {
+        left: unset;
+        right: 0;
+    }
+
+    .horizontal-navbar {
+        li {
+            margin-right: 0;
+            margin-left: 15px;
+
+            a {
+                padding-left: 10px;
+                padding-right: 10px;
+
+                .navIcon {
+                    margin-right: unset;
+                    margin-left: 10px;
+                }
+            }
+        }
+    }
+
+
+
+    /*RTL Horizontal dropdown menu*/
+    .horizontal-navbar {
+
+        .ddLevel-2,
+        .ddLevel-3 {
+            top: -5px;
+            left: unset;
+            right: 212px;
+        }
+
+        .ddMenu {
+            padding-left: 0;
+        }
+    }
+
+    .slider-group {
+        animation: slider 45s linear infinite;
+    }
+
+    @keyframes slider {
+        0% {
+            transform: translate3d(100%, 0, 0);
+        }
+
+        100% {
+            transform: translate3d(0, 0, 0);
+        }
+    }
+
+    .ps--active-y>.ps__rail-y {
+        right: unset !important;
+        left: 0;
+    }
+
+    .left-customizer {
+        .ps__rail-y {
+            right: 0 !important;
+        }
+    }
+
+    @media screen and (max-width:1279px) {
+        .mini-sidebar {
+            .v-navigation-drawer.v-navigation-drawer--right {
+                width: 260px !important;
+            }
+
+            .v-navigation-drawer.v-navigation-drawer--left {
+                width: 320px !important;
+            }
+        }
+
+    }
+
+    @media screen and (max-width:1199px) {
+        .leftSidebar.v-navigation-drawer--active {
+            right: 80px !important;
+            left: auto !important;
+        }
+    }
+
+    .logo {
+        img {
+            transform: scaleX(-1);
+        }
+    }
+
+    .rtlImg {
+        transform: scaleX(-1);
+    }
+
+    .marquee1-group {
+        animation: marquee-rtl 45s linear infinite;
+    }
+
+    .marquee2-group {
+        animation: marquee2-rtl 45s linear infinite;
+    }
+
+    @keyframes marquee-rtl {
+        0% {
+            transform: translate3d(0, 0, 0);
+        }
+
+        100% {
+            transform: translate3d(2086px, 0, 0);
+        }
+    }
+
+    @keyframes marquee2-rtl {
+        0% {
+            transform: translate3d(2086px, 0, 0);
+        }
+
+        100% {
+            transform: translate3d(0, 0, 0);
+        }
+    }
+
+    .front-wraper {
+        .testimonials {
+            .slide-counter {
+                left: -50px;
+            }
+
+            .carousel__prev {
+                right: -74%;
+                left: unset;
+
+                .rtlnav {
+                    transform: scaleX(-1);
+                }
+            }
+
+            .carousel__next {
+                right: -60%;
+                left: unset;
+
+                .rtlnav {
+                    transform: scaleX(-1);
+                }
+
+            }
+        }
+    }
+}

scss/layout/_sidebar.scss

@@ -0,0 +1,285 @@
+/*This is for the logo*/
+.miniicons{
+    .miniicons-list{
+        &:nth-child(3),&:nth-child(6){
+            border-bottom: 1px solid rgb(var(--v-theme-borderColor)); 
+            padding-bottom: 12px;
+            margin-bottom: 3px;
+        }
+        .v-btn{
+            &:hover{
+                background-color: rgb(var(--v-theme-lightprimary));
+                color: rgb(var(--v-theme-primary)) !important;
+            }
+            &.opacity-1{
+                &:hover{
+                    background-color: rgb(var(--v-theme-lightprimary));
+                    color: white !important;
+                } 
+            }
+        }
+    }
+}
+
+.leftSidebar {
+    box-shadow: none !important;
+    left: 70px;
+
+    .logo {
+        padding-left: 7px;
+    }
+
+    .mini-icon {
+        display: none;
+    }
+
+    .mini-text {
+        display: block;
+        font-size: 12px;
+        font-weight: 600;
+        letter-spacing: 1.5px;
+        text-transform: uppercase;
+        color: inherit;
+    }
+
+    .v-list--density-default .v-list-subheader {
+        padding-inline-start: 0 !important;
+    }
+
+}
+
+.mini-sidebar{
+    .v-main{
+        margin-left: 15px !important;
+    }
+}
+
+/*This is for the Vertical sidebar*/
+.miniscrollnavbar {
+    height: calc(100vh - 100px);
+}
+.scrollnavbar {
+    height: calc(100vh - 100px);
+
+    .userbottom {
+        position: fixed;
+        bottom: 0px;
+        width: 100%;
+    }
+
+    .smallCap {
+        padding: 20px 0px 10px !important;
+        font-size: 0.875rem;
+        font-weight: 500;
+        margin-top: 24px;
+        color: rgb(var(--v-theme-textPrimary));
+
+        &:first-child {
+            margin-top: 0 !important;
+        }
+    }
+
+
+
+    /*General Menu css*/
+
+    .v-list-group__items {
+        .v-list-item {
+            min-height: 35px !important;
+            padding-inline-start: calc(12px + var(--indent-padding) / 10) !important;
+
+            .v-list-item__prepend .dot {
+                height: 6px;
+                width: 6px;
+                background-color: rgb(var(--v-theme-textSecondary));
+                border-radius: 50%;
+                margin-inline-end: 8px !important;
+            }
+
+            .v-list-item-title {
+                font-size: 14px !important;
+
+            }
+
+            &:hover {
+                color: rgb(var(--v-theme-primary));
+
+                .v-list-item__prepend .dot {
+                    background-color: rgb(var(--v-theme-primary));
+                }
+            }
+
+            &.v-list-item--active {
+                .v-list-item__prepend .dot {
+                    background-color: rgb(var(--v-theme-primary));
+                }
+            }
+
+        }
+    }
+
+    .v-list-group__items .v-list-item,
+    .v-list-item {
+        border-radius: $border-radius-root + 4;
+        color: rgba(var(--v-theme-textPrimary), 0.8);
+        margin: 0 0 2px;
+
+        &:hover {
+            color: rgb(var(--v-theme-primary));
+        }
+
+        .v-list-item__prepend {
+            margin-inline-end: 13px;
+        }
+
+        .v-list-item__append {
+            font-size: 15px;
+
+            .v-icon {
+                margin-inline-start: 0px;
+            }
+        }
+        .v-list-item__content{
+            overflow: visible;
+        }
+
+        .v-list-item-title {
+            font-size: 15px;
+            text-overflow: unset;
+
+        }
+
+
+    }
+
+    /*This is for the dropdown*/
+    .v-list {
+        color: rgb(var(--v-theme-textSecondary));
+
+        >.v-list-item.v-list-item--active,
+        .v-list-item--active>.v-list-item__overlay {
+            background: rgb(var(--v-theme-primary));
+            color: white;
+            box-shadow: 0 17px 20px -8px rgba(var(--v-theme-primary), 0.2);
+        }
+
+        >.v-list-group {
+            position: relative;
+
+            >.v-list-item--active,
+            >.v-list-item--active:hover {
+                background: rgb(var(--v-theme-primary));
+                color: white;
+                box-shadow: 0 17px 20px -8px rgba(var(--v-theme-primary), 0.2);
+            }
+
+            .v-list-group__items .v-list-item.v-list-item--active,
+            .v-list-group__items .v-list-item.v-list-item--active>.v-list-item__overlay {
+                background: transparent;
+                color: rgb(var(--v-theme-primary));
+            }
+        }
+    }
+
+
+    .sidebar-menus{
+        .v-list{
+            border-bottom: 1px solid rgb(var(--v-theme-borderColor));
+            &:last-child{
+                border-bottom:0; 
+            }
+        }
+    }
+}
+
+.v-list-item--density-default:not(.v-list-item--nav).v-list-item--one-line {
+    padding-inline: 14px;
+}
+
+.v-navigation-drawer--rail {
+
+    .scrollnavbar .v-list .v-list-group__items,
+    .hide-menu {
+        opacity: 1;
+    }
+
+
+    .leftPadding {
+        margin-left: 0px;
+    }
+}
+
+@media only screen and (min-width: 1170px) {
+    .mini-sidebar {
+        .logo {
+            width: 40px;
+            overflow: hidden;
+            padding-left: 0;
+        }
+
+        .leftSidebar .v-list--density-default .v-list-subheader {
+            padding-inline-start: 14px !important;
+        }
+
+        .scrollnavbar .v-list-group__items .v-list-item {
+            padding-inline-start: 20px !important;
+        }
+
+
+        .smallCap {
+            padding: 3px 16px !important;
+        }
+
+        .mini-icon {
+            display: block;
+        }
+
+        .sidebarchip.hide-menu {
+            opacity: 0;
+        }
+
+        .userbottom .hide-menu {
+            opacity: 0;
+        }
+
+        .mini-text {
+            display: none;
+        }
+
+        .v-list {
+            padding: 14px !important;
+        }
+    }
+}
+
+// scrollbar 
+.ps__rail-y {
+    z-index: 9;
+}
+
+.v-navigation-drawer {
+    box-shadow: none !important;
+    border-right: 0 !important;
+}
+
+.v-menu {
+    &.mobile_popup {
+        .v-overlay__content {
+            width: 100%;
+
+        }
+
+        .v-btn.search {
+            color: rgba(var(--v-theme-textSecondary), 0.8) !important;
+        }
+    }
+}
+
+@media screen and (max-width:1199px) {
+    .leftSidebar {
+        &.v-navigation-drawer--active {
+            left: 80px !important;
+            z-index: 9999 !important;
+        }
+    }
+}

scss/layout/_text.scss

@@ -0,0 +1,136 @@
+$sizes: (
+    'display-1': 44px,
+    'display-2': 40px,
+    'display-3': 30px,
+    'h1': 36px,
+    'h2': 30px,
+    'h3': 21px,
+    'h4': 18px,
+    'h5': 16px,
+    'h6': 14px,
+    'text-10': 10px,
+    'text-12': 12px,
+    'text-13': 13px,
+    'text-14': 14px,
+    'text-15': 15px,
+    'text-16': 16px,
+    'text-17': 17px,
+    'text-18': 18px,
+    'text-20': 20px,
+    'text-22': 22px,
+    'text-24': 24px,
+    'text-28': 28px,
+    'text-34': 34px,
+    'text-44': 44px,
+    'text-48': 48px,
+    'text-50': 50px,
+    'text-56': 56px,
+    'text-64': 64px
+);
+
+@each $pixel, $size in $sizes {
+    .#{$pixel} {
+        font-size: $size;
+        line-height: $size + 10;
+    }
+}
+
+$height: (
+    'h-10': 10px,
+    'h-30': 20px,
+    'h-55': 55px
+);
+
+@each $pixel, $size in $height {
+    .#{$pixel} {
+        height: $size;
+    }
+}
+
+@media screen and (max-width: 767px) {
+    @each $pixel, $size in $sizes {
+        .#{$pixel} {
+            @if ($pixel == 'text-12' or $pixel == 'text-10') {
+                font-size: $size; // No change for .text-12 and .text-10
+            }
+            @if ($pixel == 'text-44' or $pixel == 'text-50' or $pixel == 'text-64') {
+                font-size: $size - 10px; // No change for .text-12 and .text-10
+            }
+           
+        }
+    }
+}
+
+
+
+.textSecondary {
+    color: rgb(var(--v-theme-textSecondary)) !important;
+}
+
+.textPrimary {
+    color: rgb(var(--v-theme-textPrimary)) !important;
+}
+
+// line height
+
+.lh-md {
+    line-height: 1.57;
+}
+
+.lh-inherit {
+    line-height: inherit;
+}
+
+.lh-zero {
+    line-height: 0;
+}
+
+.lh-normal {
+    line-height: normal;
+}
+
+
+.font-weight-semibold {
+    font-weight: 600;
+}
+
+// hover text
+.text-hover-primary {
+    color: rgb(var(--v-theme-textPrimary));
+
+    &:hover {
+        color: rgb(var(--v-theme-primary));
+    }
+}
+
+.text-hover-sky {
+    color: rgb(var(--v-theme-darkgray));
+
+    &:hover {
+        color: rgb(var(--v-theme-primary));
+    }
+}
+
+.text-hover-muted {
+    color: rgb(var(--v-theme-muted));
+
+    &:hover {
+        color: rgb(var(--v-theme-primary));
+    }
+}
+
+.link {
+    color: rgb(var(--v-theme-textSecondary));
+    text-decoration: none;
+
+    &:hover {
+        color: rgb(var(--v-theme-primary));
+    }
+}
+
+.hover-primary {
+    &:hover {
+        color: rgb(var(--v-theme-primary)) !important;
+        opacity: 1;
+    }
+}

scss/layout/_topbar.scss

@@ -0,0 +1,56 @@
+.v-app-bar {
+    .v-toolbar__content {
+        padding: 0 24px 0 10px;
+        display: flex;
+        gap:8px;
+
+        >.v-btn:first-child {
+            margin-inline-start: 0;
+        }
+
+        .v-btn {
+            &.custom-hover-primary{
+                .iconify{
+                    color: rgba(var(--v-theme-textPrimary), 0.7) !important;
+                }
+                &:hover{
+                    background-color: rgb(var(--v-theme-lightprimary)) ;
+                    .iconify{
+                        color: rgb(var(--v-theme-primary)) !important;
+                    }   
+                   
+                }
+                
+            }
+            
+        }
+    }
+}
+
+.mobile_popup{
+    .v-btn {
+        &.custom-hover-primary{
+            .iconify{
+                color: rgba(var(--v-theme-textPrimary), 0.7) !important;
+            }
+        }
+    }
+}
+
+.custom-text-primary {
+    &:hover {
+        .custom-title {
+            color: rgb(var(--v-theme-primary)) !important;
+        }
+    }
+}
+
+
+
+@media screen and (max-width:1279px) {
+    .mini-sidebar {
+        .v-navigation-drawer.v-navigation-drawer--left {
+            width: 260px !important;
+        }
+    }
+}