Penambahan FrontEnd All-New-Manufacture

public/scss/components/_components.scss

@@ -0,0 +1,9 @@
+@import "./app/apps";
+@import "./charts/charts";
+@import "./forms/forms";
+@import "./map/maps";
+@import "./uc/addons";
+@import "./ui/interfaces";
+@import "./widget/widgets";
+@import "./tables/table";
+

public/scss/components/app/_app-calender-event.scss

@@ -0,0 +1,274 @@
+/* =============
+   Calendar
+============= */
+
+.app-fullcalender {
+    button {
+        border-radius: 0rem;
+        color: $dark;
+    }
+    td{
+        border-color: $border;
+    }
+}
+
+.calendar {
+    float : #{$dlab-pos-left};
+    margin-bottom: 0;
+}
+
+.fc-view {
+    margin-top: 1.875rem;
+}
+
+.fc-toolbar {
+    margin-bottom: 0.3125rem;
+    margin-top   : 0.9375rem;
+
+    & .fc-left {
+        @include media-breakpoint-down(xs) {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 0.625rem;
+            float: none;
+        }
+    }
+
+    & .fc-right {
+        @include media-breakpoint-down(xs) {
+            display: flex;
+            justify-content: center;
+            float: none;
+            margin-bottom: 0.3125rem;
+        }
+    }
+
+    & .fc-center {
+        @include media-breakpoint-down(xs) {
+            display: flex;
+            justify-content: center;
+            * {
+                float: none;
+            }
+        }
+    }
+}
+
+.fc-toolbar h2 {
+    font-size     : 1rem;
+    font-weight   : 600;
+    line-height   : 1.875rem;
+    text-transform: uppercase;
+}
+
+
+.fc-toolbar .fc-state-active,
+.fc-toolbar .ui-state-active,
+.fc-toolbar .ui-state-hover,
+.fc-toolbar button:focus,
+.fc-toolbar button:hover {
+    z-index: 0;
+    box-shadow: none;
+}
+
+.fc-widget-header {
+    border: 0.0625rem solid $border;
+    border-bottom: 0 !important;
+}
+
+
+.fc th.fc-widget-header {
+    background    : $border!important;
+    font-size     : 0.875rem;
+    line-height   : 1.25rem;
+    padding       : 0.625rem 0;
+    text-transform: uppercase;
+}
+
+.fc-button {
+    border        : 0.0625rem solid $border;
+    text-transform: capitalize;
+    &.active{
+        box-shadow: none!important;
+    }
+}
+
+.fc-text-arrow {
+    font-family: inherit;
+    font-size  : 1rem;
+}
+
+
+
+.fc-event ,
+.external-event{
+    border-radius: 0.125rem;
+    border       : none;
+    cursor       : move;
+    font-size    : 0.8125rem;
+    margin       : 0.3125rem 0.4375rem;
+    padding      : 0.3125rem;
+    text-align   : center;
+}
+
+.external-event {
+    cursor : move;
+    margin : 0.625rem 0;
+    padding: 0.125rem 0;
+}
+
+.fc-basic-view td.fc-week-number span {
+    padding-#{$dlab-pos-right}: 0.3125rem;
+}
+
+.fc-basic-view td.fc-day-number {
+    padding-#{$dlab-pos-right}: 0.3125rem;
+}
+
+#drop-remove {
+    margin-#{$dlab-pos-right}: 0.5rem;
+    top   : 0.1875rem;
+}
+
+#add-category,
+#event-modal {
+
+    .modal-dialog {
+        max-width: 37.5rem;
+    }
+}
+
+.fc-content {
+    color: $white;
+}
+
+.fc th.fc-widget-header {
+    background: transparent !important;
+}
+.fc-button {
+    background: $white;
+}
+.fc-state-hover {
+    background: $white!important;
+}
+.fc-state-highlight {
+    background: $l-bg!important;
+    @at-root [data-theme-version="dark"] & {
+        color: $white!important;
+    }
+}
+.fc-cell-overlay {
+    background: $white!important;
+}
+.fc-unthemed .fc-today {
+    background: $l-bg!important;
+}
+
+.fc-day-top{
+    color: $dark !important;
+    @at-root [data-theme-version="dark"] & {
+        color: $white!important;
+    }
+}
+
+.external-event {
+    color: $white;
+    @at-root [data-theme-version="dark"] & {
+        color: $white!important;
+    }
+}
+.fc-basic-view .fc-body .fc-row {
+    min-height: 1rem;
+}
+
+.fc-scroller.fc-day-grid-container {
+    height: 30.625rem !important;
+}
+
+.fc-row.fc-week.fc-widget-content.fc-rigid {
+    height: 5.0625rem !important;
+}
+
+.email_left_pane {
+    @include custommq($max: 90rem) {
+        display: none;
+    }
+}
+
+
+
+#external-events{
+    
+	.external-event:before{
+		content: "";
+		display: block;
+		width: 0.875rem;
+		min-width:0.875rem;
+		height: 0.875rem;
+		border-radius: 50%;
+		margin-#{$dlab-pos-right}: .9rem;
+		position: relative;
+		top: 0.125rem;
+	}
+    [data-class="bg-primary"]{
+        @at-root [data-theme-version="dark"] & {
+            color: $white!important;
+        }
+        &::before{
+            background: var(--primary);
+        }
+    }
+    [data-class="bg-success"]{
+
+        &::before{
+            background: $success;
+        }
+    }
+    [data-class="bg-warning"]{
+        &::before{
+            background: $warning;
+        }
+    }
+    [data-class="bg-dark"]{
+        &::before{
+            background: $dark;
+        }
+    }
+    [data-class="bg-danger"]{
+        &::before{
+            background: $danger;
+        }
+    }
+    [data-class="bg-info"]{
+        &::before{
+            background: $info;
+        }
+    }
+    [data-class="bg-pink"]{
+        &::before{
+            background: $pink;
+        }
+    }
+	[data-class="bg-secondary"]{
+        &::before{
+            background: $secondary;
+        }
+    }
+}
+
+
+.fc .fc-row .fc-content-skeleton table, 
+.fc .fc-row .fc-content-skeleton td, 
+.fc .fc-row .fc-helper-skeleton td {
+    border-color: $border;
+    
+    @at-root [data-theme-version="dark"] & {
+        border-color: $d-border;
+    }
+}
+
+.fc-unthemed .fc-content, .fc-unthemed .fc-divider, .fc-unthemed .fc-list-heading td, .fc-unthemed .fc-list-view, .fc-unthemed .fc-popover, .fc-unthemed .fc-row, .fc-unthemed tbody, .fc-unthemed td, .fc-unthemed th, .fc-unthemed thead {
+    @at-root [data-theme-version="dark"] & {
+        border-color: $d-border;
+    }
+}

public/scss/components/app/_apps.scss

@@ -0,0 +1,6 @@
+@import "app-calender-date";
+@import "app-calender-event";
+@import "email";
+@import "profile";
+@import "chat";
+@import "edit-profile";

public/scss/components/app/_chat.scss

@@ -0,0 +1,208 @@
+
+.event-chat-ryt{
+
+    .chat-area{
+        .chat-reciver, 
+        .chat-sender {
+            margin-bottom: 1.875rem;
+            padding: 0;
+            img{
+                border-radius: 1.875rem;
+            }
+        }
+
+        .media {
+            position: relative;
+
+            &-body {
+
+                p {
+                    margin: 0;
+                    max-width: 100%;
+                    display: inline-block;
+                    position: relative;
+
+                    @include media-breakpoint-up(sm) {
+                        // max-width: 60%;
+                    }
+
+                    span {
+                        padding: 1rem;
+                        display: inline-block;
+                        top: 103%;
+                        position: relative;
+                        border: 0.0625rem solid $border;
+                    }
+                }
+            }
+        }
+    }
+
+    .chat-reciver{
+        padding: .5rem 1rem;
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-pack: end;
+            -ms-flex-pack: end;
+                justify-content: flex-end;
+
+        .media {
+            -webkit-box-flex: 1;
+                -ms-flex: 1;
+                    flex: 1;
+
+            .media-body {
+                margin-#{$dlab-pos-right}: 2rem;
+                text-align: #{$dlab-pos-right};
+
+                p {
+                    background: $white;
+                    margin-bottom: 0;
+                    border-radius: 0.3125rem 0.3125rem 0 0.3125rem;
+
+                    span {
+                        text-align: #{$dlab-pos-left};
+                        border: 0.0625rem solid $border;
+                        
+                        &::after{
+                            content: "";
+                            width: 1.25rem;
+                            height: 1.25rem;
+                            border-bottom: 0.0625rem solid $border;
+                            border-#{$dlab-pos-right}: 0.0625rem solid $border;
+                            position: absolute;
+                            #{$dlab-pos-right}: 0;
+                            bottom: 0;
+                            background: $white;
+                            -webkit-transform: rotate(-45deg) translateX(15px);
+                                    transform: rotate(-45deg) translateX(15px);
+
+                            @at-root [direction="rtl"] & {
+                                -webkit-transform: rotate(135deg) translateY(15px);
+                                transform: rotate(135deg) translateY(15px);
+                            }
+                        }
+                        
+                    }
+                    
+                    .time {
+                        position: absolute;
+                        font-size: 0.75rem;
+                        color: $body-color;
+                        font-weight: 400;
+                        bottom: 0;
+                        #{$dlab-pos-left}: -5rem;
+                    }
+                }
+            }
+        }
+    }
+
+    .chat-sender{
+        text-align: #{$dlab-pos-left};
+        padding: .5rem 1rem;
+
+        .media {
+
+            .media-body {
+                margin-#{$dlab-pos-left}: 2rem;
+
+                p {
+                    background-color: $white;
+                    margin-bottom: 0;
+                    span {
+                        
+                        &::after {
+                            content: "";
+                            width: 1.25rem;
+                            height: 1.25rem;
+                            border-bottom: 0.0625rem solid $border;
+                            border-#{$dlab-pos-left}: 0.0625rem solid $border;
+                            position: absolute;
+                            #{$dlab-pos-left}: 0;
+                            bottom: 0;
+                            background: $white;
+                            -webkit-transform: rotate(45deg) translateX(-15px);
+                                    transform: rotate(45deg) translateX(-15px);
+
+                            @at-root [direction="rtl"] & {
+                                -webkit-transform: rotate(-135deg) translateY(15px);
+                                transform: rotate(-135deg) translateY(15px);
+                            }
+                        }
+                    }
+
+                    .time {
+                        position: absolute;
+                        font-size: 0.625rem;
+                        color: $body-color;
+                        font-weight: 400;
+                        bottom: 0;
+                        #{$dlab-pos-right}: -5rem;
+                    }
+
+                }
+            }
+        }
+
+    }
+}
+
+.char-type{
+    padding-top: 1.875rem;
+    padding-bottom: 1.875rem;
+
+    form{
+        
+        .form-control{
+            height: 2.8125rem;
+            // border-radius: 1.875rem;
+            padding-#{$dlab-pos-left}: 1.125rem;
+            background: $body-bg;
+            border-#{$dlab-pos-right}: 0;
+        }
+
+        .input-group{
+
+            &-append{
+                i{
+                    color: $gray;
+                    font-size: 1.125rem;
+                }
+                .input-group-text{
+                    padding-#{$dlab-pos-left}: .7rem;
+                    padding-#{$dlab-pos-right}: .7rem;
+                    background: $body-bg;
+                    border-color: $border;
+                    border-#{$dlab-pos-left}: 0;
+
+                    &:last-child{
+                        // border-bottom-#{$dlab-pos-right}-radius: 1.875rem;
+                        // border-bottom-#{$dlab-pos-right}-radius: 1.875rem;
+                        padding-#{$dlab-pos-right}: 1.8rem;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.media-avatar{
+    padding: 1.5625rem 0;
+    border-bottom: 0.0625rem solid $border;
+    &:last-child{
+        border-bottom: 0rem;
+    }
+    p{
+        margin-bottom: 0;
+    }
+    .avatar-status{
+        position: relative;
+        i{
+            position: absolute;
+            #{$dlab-pos-right}: 0;
+            bottom: 0;
+        }
+    }
+}

public/scss/components/app/_edit-profile.scss

@@ -0,0 +1,158 @@
+.profile-form{
+	
+	.card-header{
+		border-color: $border-color;
+		padding: 30px;
+		.title{
+			position: relative;
+			margin-bottom: 0;
+			color: $dark;
+			&:after{
+				content: "";
+				height: 3px;
+				width: 100%;
+				background-color: var(--primary);
+				position: absolute;
+				bottom: -31px;
+				#{$dlab-pos-left}: 0;
+			}
+		}
+	}
+	.m-b30{
+		margin-bottom:30px;
+	}
+	.card-body{
+		padding: 40px 40px 10px;
+	}
+	.card-footer{
+		padding: 35px 40px 40px;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		.btn-lg{
+			padding: 18px 50px;
+			font-size: 15px;
+		}
+		.btn-link{
+			font-size: 15px;
+		}
+	}
+	@include respond('phone'){
+		.card-header{
+			padding: 25px;
+			.title{
+				&:after{
+					bottom: -26px;
+				}
+			}
+		}
+		.card-body{
+			padding: 25px 25px 0;
+		}
+		.card-footer{
+			padding: 25px 25px 25px;
+			.btn-lg{
+				padding: 18px 30px;
+			}
+		}
+	}
+}
+
+
+
+.author-profile{
+	text-align:center;
+	.card-body{
+		padding: 0;
+	}
+	.author-media{
+		position: relative;
+		margin-#{$dlab-pos-left}: auto;
+		margin-#{$dlab-pos-right}: auto;
+		margin-bottom: 20px;
+		display: inline-block;
+		img{
+			width: 130px;
+			border-radius: 100%;
+		}
+	}	
+	.author-info{
+		.title{
+			font-size:15px;
+			font-weight:500;
+			margin-bottom: 0;
+		}
+		span{
+			display:block;
+			color: $body-color;
+			@at-root [data-theme-version="dark"] & {
+				color:$white;
+			}
+		}
+	}
+	.info-list{
+		li{
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			font-size: 15px;
+			border-top: 1px solid $border-color;
+			padding: 18px 30px;
+			color: $dark;
+			a{
+				color: $dark;
+				@at-root [data-theme-version="dark"] & {
+					color: $white;
+				}
+			}
+			span{
+				color: $body-color;
+				font-weight: 500;
+				@at-root [data-theme-version="dark"] & {
+					color: $white;
+				}
+			}
+			@at-root [data-theme-version="dark"] & {
+				border-top: 1px solid $d-border;
+				
+			}
+		}
+	}
+	.card-footer {
+		padding: 30px;
+		display: block;
+		.form-control {
+			height: 45px;
+			border-color: $border-color;
+			overflow:hidden;
+			line-height: 30px;
+			@at-root [data-theme-version="dark"] & {
+				background-color: $dark-card;
+				border-color:$d-border; 
+			}
+		}
+	}
+	.upload-link {
+		position: absolute;
+		width: 35px;
+		height: 35px;
+		line-height: 32px;
+		background: var(--primary);
+		bottom: 0;
+		#{$dlab-pos-right}: 0px;
+		box-shadow: 0 0 10px 0 rgba(0, 24, 128, 0.1);
+		border-radius: 100%;
+		color: #fff;
+		overflow: hidden;
+		border: 2px solid #fff;
+		.update-flie {
+			position: absolute;
+			opacity: 0;
+			z-index: 0;
+			width: 100%;
+			cursor: pointer;
+			#{$dlab-pos-left}: 0;
+			height: 100%;
+		}
+	}
+}

public/scss/components/app/_email.scss

@@ -0,0 +1,538 @@
+.email-left-box {
+    width: 15rem;
+    float : #{$dlab-pos-left};
+    padding: 0 1.25rem 1.25rem 1rem;
+    border-top: 0;
+    border-#{$dlab-pos-left}: 0;
+
+    @include media-breakpoint-between(sm, md) {
+        width: 100%;
+		padding-bottom: 0px !important;
+    }
+
+    @include media-breakpoint-down(xs) {
+        width: 100%;
+        float: none;
+        border: none;
+		padding-bottom: 30px !important;
+    }
+}
+
+.intro-title{
+        background: var(--rgba-primary-1);
+        padding: 1rem;
+        margin: 1.875rem 0 1.25rem 0;
+
+        h5{
+            margin-bottom: 0;
+            color: var(--primary);
+            font-size: 14px;
+
+            i{
+                font-size: 0.75rem;
+                position: relative;
+                bottom: 1px;
+            }
+        }
+
+        i{
+            color: var(--rgba-primary-1);
+
+        }
+    }
+
+.email-right-box {
+    // padding-top: 1.875rem;
+    padding-#{$dlab-pos-left}: 15rem;
+    padding-#{$dlab-pos-right}: 1rem;
+
+    @include media-breakpoint-between(sm, md) {
+        padding-#{$dlab-pos-left}: 0;
+		padding-#{$dlab-pos-right}:0;
+		margin-#{$dlab-pos-left}: 0!important;
+		clear:both;
+	}
+
+    @include media-breakpoint-down(xs) {
+        padding-#{$dlab-pos-left}: 0;
+        padding-#{$dlab-pos-right}: 0;
+    }
+
+    .right-box-border{
+        border-#{$dlab-pos-right}: 2px solid var(--rgba-primary-1);
+    }
+
+    .right-box-padding{
+
+        @media screen and (min-width: 649px) and (max-width: 1200px){
+            padding-#{$dlab-pos-left}: 1.25rem;
+        }
+
+        @media(min-width: 1700px){
+            padding-#{$dlab-pos-left}: 0.9375rem;
+        }
+		@include media-breakpoint-between(sm, md) {
+			padding-#{$dlab-pos-left}: 0;			
+		}
+    }
+}
+
+.toolbar {
+    .btn-group {
+        .btn {
+            border: 0;
+        }
+        input{
+            position: relative;
+            top: 2px;
+        }
+    }
+}
+
+.read-content {
+    textarea {
+        height:150px;
+		padding: 15px 20px;
+    }
+
+    &-email{
+        font-size: 0.875rem;
+    }
+
+    h5{
+        color: #6a707e;
+    }
+
+    p{
+
+        strong{
+            color: #6a707e;
+        }
+    }
+
+    &-body{
+
+        p{
+            margin-bottom: 1.875rem;
+        }
+    }
+
+    &-attachment{
+        padding: 0.5rem 0;
+
+        h6{
+            font-size: 1.125rem;
+            color: #6a707e;
+
+            i{
+                padding-#{$dlab-pos-right}: 0.3125rem;
+            }
+        }
+
+        .attachment{
+
+            & > div:not(:last-child){
+                border-#{$dlab-pos-right}: 1px solid #DDDFE1;
+            }
+        }
+    }
+}  
+
+.compose-content {
+    .wysihtml5-toolbar {
+        border-color: $l-border;
+    }
+   
+    .dropzone {
+        background: $l-bg!important;
+    }
+
+    h5{
+        font-size: 1.0625rem;
+        color: #6a707e;
+
+        i{
+            font-size: 1.125rem;
+            transform: rotate(90deg);
+        }
+    }
+
+    .dropzone{
+        border: 1px dashed #DDDFE1;
+        min-height: 13.125rem;
+        position: relative;
+		border-radius:$radius;
+
+        .dlab-message{
+            margin: 0;
+            position: absolute;
+            top: 50%;
+            #{$dlab-pos-left}: 50%;
+            transform: translate(-50%, -50%);
+        }
+    }
+}
+
+.email-list {
+    display: block;
+    padding-#{$dlab-pos-left}: 0;
+
+    .message {
+        position: relative;
+        display: block;
+        height: 3.125rem;
+        line-height: 3.125rem;
+        cursor: default;
+        transition-duration: 0.3s;
+        a {
+            color: $l-ctl;
+        }
+
+        &-single{
+            .custom-checkbox{
+                margin-top: 2px;
+            }
+
+            i{
+                color: $muted;
+                font-size: 1.125rem;
+                padding-#{$dlab-pos-left}: .4rem;
+            }
+
+
+        }
+
+
+        &:hover {
+            transition-duration: 0.05s;
+            background: rgba(152, 166, 173, 0.15);
+        }
+
+        .col-mail {
+            float : #{$dlab-pos-left};
+            position: relative;
+        }
+
+        .col-mail-1 {
+            width: 5.625rem;
+
+            .star-toggle {
+                display: block;
+                float : #{$dlab-pos-left};
+                margin-top: 1.125rem;
+                font-size: 1rem;
+                margin-#{$dlab-pos-left}: 0.3125rem;
+            }
+
+            .email-checkbox {
+                display: block;
+                float : #{$dlab-pos-left};
+                margin: 0.9375rem 0.625rem 0 1.25rem;
+            }
+
+            .dot {
+                display: block;
+                float : #{$dlab-pos-left};
+                border: .4rem solid transparent;
+                border-radius: 6.25rem;
+                margin: 1.375rem 1.625rem 0;
+                height: 0;
+                width: 0;
+                line-height: 0;
+                font-size: 0;
+            }
+        }
+
+        .col-mail-2 {
+            position: absolute;
+            top: 0;
+            #{$dlab-pos-left}: 5.625rem;
+            #{$dlab-pos-right}: 0;
+            bottom: 0;
+
+            .subject {
+                position: absolute;
+                top: 0;
+                #{$dlab-pos-left}: 0;
+                #{$dlab-pos-right}: 5.5rem;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                white-space: nowrap;
+            }
+
+            .date {
+                position: absolute;
+                top: 0;
+                #{$dlab-pos-right}: 0;
+            }
+        }
+    }
+}
+
+.email-checkbox {
+    cursor: pointer;
+    height: 0.9375rem;
+    width: 0.9375rem;
+    position: relative;
+    display: inline-block;
+    border-radius: .1rem;
+    position: relative;
+    top: 0.3125rem;
+    box-shadow: inset 0 0 0 .1rem $l-ctl;
+
+    input {
+        opacity: 0;
+        cursor: pointer;
+
+        &:checked {
+            label {
+                opacity: 1;
+            }
+        }
+    }
+
+    label {
+        position: absolute;
+        top: .3rem;
+        #{$dlab-pos-left}: .3rem;
+        #{$dlab-pos-right}: .3rem;
+        bottom: .3rem;
+        cursor: pointer;
+        opacity: 0;
+        margin-bottom: 0 !important;
+        transition-duration: 0.05s;
+    }
+}
+
+.mail-list {
+
+    a {
+        vertical-align: middle;
+        padding: 0.625rem 0.9375rem;
+        display: block;
+        background: transparent;
+        color: $l-ctd;
+        font-weight: 600;
+    }
+
+    .list-group-item{
+        color: #6a707e;
+        padding: 0.75rem 1.0625rem;
+        &:hover{
+            color: var(--primary);
+        }
+
+        i{
+            font-size: 1rem;
+            padding-#{$dlab-pos-right}: 0.625rem;
+            color: #cccccc;
+        }
+
+        &.active{
+            color: $white;
+			background-color:var(--primary);
+			border-color:var(--primary);
+
+            i{
+                color: $white;
+            }
+        }
+    }
+}
+
+.chat-wrap{
+    padding: 1.0625rem 1.875rem;
+
+    .media{
+
+        .media-body{
+
+            h6{
+                font-size: 1.0625rem;
+                color: #6a707e;
+            }
+
+            p{
+                font-size: 0.875rem;
+            }
+        }
+    }
+}
+
+.email-filter{
+
+    @media (min-width: 648px){
+        padding-#{$dlab-pos-left}: 1.25rem;
+    }
+
+    @media(min-width: 1700px){
+        padding-#{$dlab-pos-left}: 1.875rem;
+    }
+
+    .input-group{
+
+        &-prepend{
+            
+            i{
+                font-size: 0.875rem;
+                color: $muted;
+            }
+
+            .input-group-text{
+                border: 0;
+                border-bottom: 1px solid #DDDFE1 !important;
+                background: transparent;
+            }
+        }
+
+        .form-control{
+            padding: 0 0 0 0.3125rem;
+            border: 0;
+            font-size: 0.875rem;
+            height: 1.875rem;
+            color: $muted;
+            border-bottom: 1px solid #DDDFE1;
+
+            &::placeholder{
+                font-size: 0.875rem;
+                color: $muted;
+            }
+        }
+
+        & > .form-control{
+            min-height: 1.875rem;
+        }
+    }
+}
+
+.single-mail{
+    display: block;
+    padding: 1.5625rem 0;
+
+    .media{
+        padding-#{$dlab-pos-left}: 1.25rem;
+        padding-#{$dlab-pos-right}: 1.25rem;
+
+        @media(min-width: 1700px){
+            padding-#{$dlab-pos-left}: 1.875rem;
+            padding-#{$dlab-pos-right}: 1.875rem;
+        }
+
+        img{
+            width: 55px;
+            height: 55px;
+            border-radius: 50%;
+            margin-#{$dlab-pos-right}: 0.9375rem;
+
+            @media(min-width: 1700px){
+                margin-#{$dlab-pos-right}: 1.875rem;
+            }
+        }
+
+        &-body{
+
+            h6{
+                color: #abafb3;
+            }
+
+            h4{
+                font-size: 1rem;
+                color: #6a707e;
+
+                button{
+
+                    i{
+                        font-size: 1.125rem;
+                        color: #abafb3;
+                        font-weight: bold;
+                        transform: rotate(90deg);
+                    }
+                }
+            }
+
+            p{
+                font-size: 0.875rem;
+                color: #abafb3;
+            }
+        }
+    }
+
+    &.active{
+        background: var(--primary);
+
+        h6,h4,p,i{
+            color: $white !important;
+        }
+    }
+}
+.email-list .message-single i.yellow{
+	color:$warning!important;
+}
+
+@include respond ('phone'){
+	.email-left-body{
+		width: 18rem;
+		position: fixed;
+		height: 100vh;
+		z-index: 2;
+		transition: all 0.5s;
+		#{$dlab-pos-left}: -22rem;
+		top: 0px;
+		z-index: 999;
+		&.active{
+			#{$dlab-pos-left}:0;
+			background: $white;
+			transition:all 0.5s;
+			overflow-y:scroll;
+		}
+	}
+}
+
+.email-tools-box{
+	display:inline-block;
+	width:40px;
+	height:40px;
+	line-height:40px;
+	text-align:center;
+	background-color:var(--rgba-primary-1);
+	border-radius:$radius;
+	color:var(--primary);
+	
+	&.active{
+		background-color:var(--primary);
+		color:$white;
+	}
+	
+	display:none!important;
+	@include respond ('phone'){
+		display:inline-block!important;
+		margin-#{$dlab-pos-left}:auto;
+	}
+	&.active{
+		&:before{
+			content: '';
+			display: block;
+			position: fixed;
+			top: 0;
+			#{$dlab-pos-left}: 0;
+			width: 100vh;
+			height: 100vh;
+			background-color: #000;
+			opacity: 0.2;
+			border-radius:0;
+			z-index: 4;
+		}
+	}
+}
+.email-left-box{
+	margin-bottom: 20px;
+	@include respond ('tab-land'){
+		margin-#{$dlab-pos-right}:-10px;
+	}
+	@include respond ('tab-port'){
+		margin:0;
+	}
+	@include respond ('phone'){
+		margin-top:20px;
+	}
+}

public/scss/components/app/_profile.scss

@@ -0,0 +1,207 @@
+.photo-content{
+    position: relative;
+    .cover-photo{
+        background: url(../images/profile/cover.jpg);
+        background-size: cover;
+        background-position: center;
+        min-height: 15.625rem;
+        width: 100%;
+
+    }
+
+}
+.profile .profile-photo {
+	max-width: 6.25rem;
+	position: relative;
+	z-index: 1;
+	margin-top: -4.5rem;
+	margin-#{$dlab-pos-right}: 0.625rem;
+    
+	@include respond('phone') {
+        margin-top: -2.5rem;
+		width: 5rem;
+		margin-#{$dlab-pos-left}: auto;
+		margin-#{$dlab-pos-right}: auto;
+		margin-bottom:1.25rem;
+	}
+}
+[direction="rtl"]{
+    
+	.profile .profile-photo {
+		#{$dlab-pos-left}: auto;
+		#{$dlab-pos-right}: 0;
+		margin-#{$dlab-pos-right}: 0;
+		margin-#{$dlab-pos-left}: 0.9375rem;
+		
+		@include respond('tab-land') {
+			#{$dlab-pos-right}: 0.9375rem;
+		}
+		@include respond('phone') {
+			width: 5rem;
+			#{$dlab-pos-right}: calc(50% - 2.5rem);
+			top: -6.25rem;
+			
+			
+		}
+	}
+}
+.profile-info{
+    padding: 0.9375rem 1.25rem;
+    // margin-bottom: 1.875rem;
+	@include respond('phone') {
+		padding: 0 0 1.25rem;
+		text-align:center;
+	}
+    h4 {
+        color: $l-ctd!important;
+    }
+
+    h4.text-primary {
+        color: var(--primary)!important;
+    }
+
+    p {
+        color: $l-ctl;
+    }
+
+    .prf-col{
+        min-width: 15.625rem;
+        padding: 0.625rem 3.125rem 0;
+    }
+}
+.profile-interest{
+    .row{
+        margin: 0 -0.0437rem;
+        .int-col{
+            padding: 0 0.0437rem;
+            .interest-cat{
+                margin-bottom: 0.0875rem;
+                position: relative;
+                display: block;
+                &:after{
+                    background: $black;
+                    bottom: 0;
+                    content: "";
+                    #{$dlab-pos-left}: 0;
+                    opacity: 0.5;
+                    position: absolute;
+                    #{$dlab-pos-right}: 0;
+                    top: 0;
+                    z-index: 0;
+                }
+                p{
+                    position: absolute;
+                    top: 0;
+                    width: 100%;
+                    height: 100%;
+                    padding: 0.3125rem;
+                    #{$dlab-pos-left}: 0;
+                    margin: 0;
+                    z-index: 1;
+                    color:white;
+                    font-size: 0.075rem;
+                }
+            }
+            
+        }
+    }
+}
+.profile-tab{
+    .nav-item{
+        .nav-link{
+            font-size: 1rem;
+            margin-#{$dlab-pos-right}: 1.875rem;
+            transition: all 0.5s ease-in-out;
+            border: none;
+            border-bottom: 0.0125rem solid transparent;
+            color: $l-ctl;
+
+            &:hover, &.active{
+                border: 0;
+                background: transparent;
+                background: transparent;
+                border-bottom: 0.0125rem solid var(--primary);
+                color: var(--primary);
+            }
+			@include respond ('phone'){
+				margin-#{$dlab-pos-right}:0rem;
+			}
+        }
+        
+    }
+}
+.profile-info{
+	display:flex;
+	@include respond('phone') {
+		display:block;
+	}
+	.profile-details {
+		display: flex;
+		width: 100%;
+		@include respond('phone') {
+			display:block;
+			.dropdown{
+				position: absolute;
+				top: 1.875rem;
+				#{$dlab-pos-right}: 1.875rem;
+			}
+		}
+	}
+}
+
+.post-input{
+    margin-bottom: 1.875rem;
+    .form-control{
+        /* height: 4.6875rem; */
+        font-weight: 400;
+        margin: 0.9375rem 0;
+    }
+	.btn-social{
+		font-size: 1.25rem;
+		height: 3.4375rem;
+		display:inline-block;
+		padding: 0;
+		text-align:center;
+		border-radius:$radius;
+		color:$white;
+		width: 3.4375rem;
+		line-height: 3.375rem;
+		&.facebook{
+			background-color: #3B5998;
+		}
+		&.google-plus{
+			background-color: #DE4E43;
+		}
+		&.linkedin{
+			background-color: #007BB6;
+		}
+		&.instagram{
+			background-color: #8A5A4E;
+		}
+		&.twitter{
+			background-color: #1EA1F3;
+		}
+		&.youtube{
+			background-color: #CE201F;
+		}
+		&.whatsapp{
+			background-color: #01C854;
+		}
+		i{
+			margin:0!important;
+		}
+	}
+    
+}  
+.profile-uoloaded-post{
+    
+    img{
+        margin-bottom: 1.25rem;
+    }
+    a{
+        h4{
+            margin-bottom: 0.625rem;
+            color: $l-ctd;
+        }
+    }
+}

public/scss/components/charts/_chart-amchart.scss

@@ -0,0 +1,176 @@
+#revenue-chart {
+    height: 27.7rem;
+}
+
+
+#duration-value-axis {
+    height: 27.6rem;
+    width: 100%;
+}
+
+#combined-bullet { 
+    height: 28.125rem;
+    width: 100%;
+}
+
+#zoomable-chart {
+    height: 28.125rem;
+    width: 100%;
+}
+
+#chartMap {
+    height: 28.125rem;
+    width: 100%;
+}
+
+#professional-candlesticks {
+    width: 100%;
+    height: 28.125rem;
+}
+
+#comparing-stock-indices {
+    width: 100%;
+    height: 28.125rem;
+}
+
+#multiple-panel-data {
+    width: 100%;
+    height: 28.125rem;
+}
+
+#depth-chart {
+    width: 100%;
+    height: 28.125rem;
+}
+
+.amcharts-export-menu {
+    display: none;
+}
+
+.amcharts-data-set-selector-div {
+    position: absolute;
+    #{$dlab-pos-left}: 0;
+    #{$dlab-pos-right}: 0;
+    text-align: center;
+    width: 16.875rem;
+    margin: 0 auto;
+    select {
+        border: 0;
+        margin-#{$dlab-pos-left}: 0.625rem;
+        background: #ddd;
+        color: $black;
+    }
+}
+
+.amChartsInputField {
+    border: 0;
+    background: var(--primary);
+    color: $white;
+    padding: 0.3125rem 0.9375rem;
+    margin: 0 0.9375rem;
+}
+
+.amcharts-data-set-select {
+    border: 0;
+    background: #ddd;
+    color: $black;
+}
+
+.amcharts-period-input,
+.amcharts-period-input-selected {
+    border: 0;
+    margin-#{$dlab-pos-left}: 0.625rem;
+    background: var(--primary);
+    color: $white;
+    padding: 0.3125rem 0.9375rem;
+}
+
+/////////////////////
+// CSS Animation
+///////////////////
+.amcharts-graph-g2 .amcharts-graph-stroke {
+    stroke-dasharray: 0.1875rem 0.1875rem;
+    stroke-linejoin: round;
+    stroke-linecap: round;
+    -webkit-animation: am-moving-dashes 1s linear infinite;
+    animation: am-moving-dashes 1s linear infinite;
+}
+
+@-webkit-keyframes am-moving-dashes {
+    100% {
+        stroke-dashoffset: -1.9375rem;
+    }
+}
+
+@keyframes am-moving-dashes {
+    100% {
+        stroke-dashoffset: -1.9375rem;
+    }
+}
+
+.lastBullet {
+    -webkit-animation: am-pulsating 1s ease-out infinite;
+    animation: am-pulsating 1s ease-out infinite;
+}
+
+@-webkit-keyframes am-pulsating {
+    0% {
+        stroke-opacity: 1;
+        stroke-width: 0px;
+    }
+    100% {
+        stroke-opacity: 0;
+        stroke-width: 3.125rem;
+    }
+}
+
+@keyframes am-pulsating {
+    0% {
+        stroke-opacity: 1;
+        stroke-width: 0px;
+    }
+    100% {
+        stroke-opacity: 0;
+        stroke-width: 3.125rem;
+    }
+}
+
+.amcharts-graph-column-front {
+    -webkit-transition: all .3s .3s ease-out;
+    transition: all .3s .3s ease-out;
+}
+
+.amcharts-graph-column-front:hover {
+    fill: #496375;
+    stroke: #496375;
+    -webkit-transition: all .3s ease-out;
+    transition: all .3s ease-out;
+}
+
+@-webkit-keyframes am-draw {
+    0% {
+        stroke-dashoffset: 500%;
+    }
+    100% {
+        stroke-dashoffset: 0%;
+    }
+}
+
+@keyframes am-draw {
+    0% {
+        stroke-dashoffset: 500%;
+    }
+    100% {
+        stroke-dashoffset: 0%;
+    }
+}
+
+.amChartsPeriodSelector {
+    &>fieldset>div {
+        @include respond('tab-port') {
+            float: none !important;
+            display: block !important;
+            margin-bottom: 0.625rem;
+        }
+    }
+}

public/scss/components/charts/_chart-c3.scss

@@ -0,0 +1,13 @@
+
+.c3{
+    height: 15.625rem;
+}
+.c3-legend-item {
+    fill: #9fabb1;
+ }
+
+ .c3 .c3-axis-x path, 
+ .c3 .c3-axis-x line, 
+ .c3 .c3-axis-y path, 
+.c3 .c3-axis-y line, 
+.tick text { stroke: $white; }

public/scss/components/charts/_chart-chartist.scss

@@ -0,0 +1,128 @@
+
+
+
+.ct-golden-section:before {
+    float: none;
+  }
+  .ct-chart {
+    max-height: 15.7rem;
+  }
+  .ct-chart .ct-label {
+    fill: #a3afb7;
+    color: #a3afb7;
+    font-size: 0.75rem;
+    line-height: 1;
+  }
+  .ct-grid {
+    stroke: rgba(49, 58, 70, 0.1);
+  }
+  .ct-chart.simple-pie-chart-chartist .ct-label {
+    color: #ffffff;
+    fill: #ffffff;
+    font-size: 0.625rem;
+  }
+  .ct-chart .ct-series.ct-series-a .ct-bar,
+  .ct-chart .ct-series.ct-series-a .ct-line,
+  .ct-chart .ct-series.ct-series-a .ct-point,
+  .ct-chart .ct-series.ct-series-a .ct-slice-donut {
+    stroke: var(--primary);
+  }
+  .ct-chart .ct-series.ct-series-b .ct-bar,
+  .ct-chart .ct-series.ct-series-b .ct-line,
+  .ct-chart .ct-series.ct-series-b .ct-point,
+  .ct-chart .ct-series.ct-series-b .ct-slice-donut {
+    stroke: $success;
+  }
+  .ct-chart .ct-series.ct-series-c .ct-bar,
+  .ct-chart .ct-series.ct-series-c .ct-line,
+  .ct-chart .ct-series.ct-series-c .ct-point,
+  .ct-chart .ct-series.ct-series-c .ct-slice-donut {
+    stroke: $warning;
+  }
+  .ct-chart .ct-series.ct-series-d .ct-bar,
+  .ct-chart .ct-series.ct-series-d .ct-line,
+  .ct-chart .ct-series.ct-series-d .ct-point,
+  .ct-chart .ct-series.ct-series-d .ct-slice-donut {
+    stroke: $danger;
+  }
+  .ct-chart .ct-series.ct-series-e .ct-bar,
+  .ct-chart .ct-series.ct-series-e .ct-line,
+  .ct-chart .ct-series.ct-series-e .ct-point,
+  .ct-chart .ct-series.ct-series-e .ct-slice-donut {
+    stroke: $info;
+  }
+  .ct-chart .ct-series.ct-series-f .ct-bar,
+  .ct-chart .ct-series.ct-series-f .ct-line,
+  .ct-chart .ct-series.ct-series-f .ct-point,
+  .ct-chart .ct-series.ct-series-f .ct-slice-donut {
+    stroke: $dark;
+  }
+  .ct-chart .ct-series.ct-series-g .ct-bar,
+  .ct-chart .ct-series.ct-series-g .ct-line,
+  .ct-chart .ct-series.ct-series-g .ct-point,
+  .ct-chart .ct-series.ct-series-g .ct-slice-donut {
+    stroke: #8d6e63;
+  }
+  .ct-series-a .ct-area,
+  .ct-series-a .ct-slice-pie {
+    fill: $secondary;
+  }
+  .ct-series-b .ct-area,
+  .ct-series-b .ct-slice-pie {
+    fill: #00A2FF;
+  }
+  .ct-series-c .ct-area,
+  .ct-series-c .ct-slice-pie {
+    fill: #ff9800;
+  }
+  .ct-series-d .ct-area,
+  .ct-series-d .ct-slice-pie {
+    fill: #ff9800;
+  }
+  .chartist-tooltip {
+    position: absolute;
+    display: inline-block;
+    opacity: 0;
+    min-width: 0.625rem;
+    padding: 0.125rem 0.625rem;
+    border-radius: 0.125rem;
+    background: #313a46;
+    color: #ffffff;
+    text-align: center;
+    pointer-events: none;
+    z-index: 1;
+    -webkit-transition: opacity .2s linear;
+    -moz-transition: opacity .2s linear;
+    -o-transition: opacity .2s linear;
+    transition: opacity .2s linear;
+  }
+  .chartist-tooltip.tooltip-show {
+    opacity: 1;
+  }
+
+
+
+
+
+  #donught_graph {
+    .ct-series.ct-series-a .ct-slice-donut {
+      stroke: #3FC6D4;
+    }
+    
+    .ct-series.ct-series-b .ct-slice-donut {
+      stroke: #333333;
+    }
+
+    .ct-series.ct-series-c .ct-slice-donut {
+      stroke: #F63465;
+    }
+  }
+
+
+#pie-chart .ct-label{
+	@include respond ('phone-land'){
+		color: #fff;
+		fill: #fff;
+	}
+}
+  

public/scss/components/charts/_chart-chartjs.scss

@@ -0,0 +1,92 @@
+
+#visitor_graph {
+    height: 15.8125rem !important;
+}
+
+#user_rating_graph {
+    height: 17.5rem !important;
+}
+
+#activity {
+    height: 20rem !important;
+}
+
+#visitorOnline{
+    height: 4.5rem !important;
+}
+#trendMeter{
+    height: 4.5rem !important;
+}
+#widget-revenue1,
+#widget-revenue2,
+#widget-revenue3{
+    height: 7.3125rem !important;
+}
+#widget-profit1,
+#widget-profit2,
+#widget-profit3{
+    height: 10rem !important;
+}
+
+#comparison-rate{
+    height: 14.375rem;
+}
+#session_day{
+    height: 10.9375rem;
+    width: auto!important;
+    margin: 0 auto;
+}
+
+#walet-status {
+    height: 8.75rem;
+}
+#bar1 {
+    height: 9.375rem;
+}
+#sold-product {
+    height: 14.375rem;
+}
+
+
+#chart-venue-expenses,
+#chart-online-sale,
+#chart-gross-sale{
+    height: 9.375rem !important;
+}
+
+
+#areaChart_3{
+    height: 18.4375rem !important;
+	width: 100% !important;
+}
+.chart-point{
+	display:flex;
+	align-items: center;
+	
+	.check-point-area{
+		width:6.25rem;
+		height: 6.25rem;
+		margin-top: -0.625rem;
+		margin-#{$dlab-pos-left}: -0.625rem;
+	}
+	.chart-point-list{
+		margin:0;
+		padding-#{$dlab-pos-left}: 0.3125rem;
+			
+		li{
+			list-style:none;
+			font-size: 0.8125rem;
+			padding: 0.125rem 0;
+			
+			i{
+				margin-#{$dlab-pos-right}: 0.3125rem;
+				font-size: 0.6875rem;
+				position: relative;
+				top: -0.0625rem;
+			}
+		}
+	}
+}
+
+
+

public/scss/components/charts/_chart-flot.scss

@@ -0,0 +1,39 @@
+
+
+.flot-chart{
+    height: 15.7rem;
+}
+
+.tooltipflot {
+    background-color: transparent;
+    font-size: 1.4rem;
+    padding: .5rem 1rem;
+    color: rgba(255, 255, 255, 0.7);
+    border-radius: .2rem; }
+  
+  .legendColorBox > div {
+    border: 0 !important;
+    padding: 0 !important;
+}
+  
+  .legendLabel {
+    font-size: 0.825rem;
+    padding-#{$dlab-pos-left}: .5rem;
+	@at-root [data-theme-version="dark"] & {	
+		color: $white;
+	}
+  }
+    
+.flotTip {
+  background: $black;
+  border: 0.0625rem solid $black;
+  color: $white;
+}
+
+.legend > div{
+  background: transparent!important;
+}
+
+#balance_graph {
+  height: 16.25rem;
+}

public/scss/components/charts/_chart-highcharts.scss

@@ -0,0 +1,11 @@
+.highcharts-root {
+    text {
+        font-weight: 300 !important;
+    }
+}
+
+
+.highcharts-credits {
+    display: none;
+}
+

public/scss/components/charts/_chart-morris.scss

@@ -0,0 +1,54 @@
+.morris-hover {
+	position: absolute;
+	z-index : 1;
+	background: var(--primary);
+	color: $white;
+}
+
+.morris-hover .morris-hover-point {
+	color: $white !important;
+	margin: 0.1875rem 0;
+	text-align: center;
+	padding: 0 1.5625rem;
+}
+
+.morris-hover .morris-hover-row-label {
+	background-color: $dark;
+	text-align: center;
+	padding: 0.3125rem;
+	margin-bottom: 0.3125rem;
+}
+
+.morris-hover.morris-default-style {
+	border-radius: 0.3125rem;
+	padding      : 0;
+	margin: 0;
+	border       : none;
+	overflow: hidden;
+}
+
+
+#morris_donught, 
+#morris_donught_2, 
+#line_chart_2, 
+#morris_bar, 
+#morris_bar_stalked, 
+#morris_bar_2, 
+#morris_area_2, 
+#morris_area {
+    height: 15rem !important;
+}
+
+#morris_line {
+	height: 17.375rem !important;
+}
+
+
+#crypto-btc-card, 
+#crypto-eth-card, 
+#crypto-rpl-card, 
+#crypto-ltc-card {
+    height: 9.375rem;
+}
+
+

public/scss/components/charts/_chart-sparkline.scss

@@ -0,0 +1,25 @@
+#daily-sales, #comparison-rate, #usage-chart, #walet-status {
+    width: 100%;
+    display: block;
+
+    canvas {
+        max-width: 100% !important;
+        width: 100% !important;
+    }
+}
+
+
+#sparkline-composite-chart, 
+#composite-bar, 
+#sparkline11, 
+#StackedBarChart, 
+#spark-bar, 
+#tristate {
+    canvas {
+        height: 6.25rem !important;
+    }
+}
+
+#sparkline11 canvas {
+    width: 6.25rem !important;
+}

public/scss/components/charts/_charts.scss

@@ -0,0 +1,10 @@
+@import "./chart-chartist";
+@import "./chart-chartjs";
+@import "./chart-c3";
+@import "./chart-flot";
+@import "./chart-morris";
+@import "./chart-sparkline";
+@import "./easy-pie-chart";
+@import "./chart-amchart";
+@import "./chart-highcharts";
+@import "./echarts";

public/scss/components/charts/_easy-pie-chart.scss

@@ -0,0 +1,23 @@
+.easy-pie-chart {
+    position: relative;
+    text-align: center;
+
+    .inner {
+        position: absolute;
+        #{$dlab-pos-left}: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        display: inline-block;
+    }
+
+    img {
+        width: 4.6875rem;
+        height: 4.6875rem;
+        border-radius: 50%;
+    }
+
+    canvas {
+        display: block;
+        margin: 0 auto;
+    }
+}

public/scss/components/charts/_echarts.scss

@@ -0,0 +1,4 @@
+#chart_employee_gender, #chart_employee_status {
+    width: auto;
+    height: 21.875rem;
+}

public/scss/components/forms/_form-addons-cropper.scss

@@ -0,0 +1,46 @@
+#image {
+  max-width: 100%;
+}
+
+.docs-options {
+  .dropdown-menu {
+    padding: 1.5rem;
+  }
+}
+
+.docs-preview {
+  margin-bottom: 3rem;
+
+  .img-preview {
+    float : #{$dlab-pos-left};
+    margin-#{$dlab-pos-right}: .5rem;
+    margin-bottom: .5rem;
+    overflow: hidden;
+    max-width: 100% !important;
+
+    &>img {
+      max-width: 100% !important;
+    }
+
+    &.preview-lg {
+      width: 16rem;
+      height: 9rem;
+    }
+
+    &.preview-md {
+      width: 8rem;
+      height: 4.5rem;
+    }
+
+    &.preview-sm {
+      width: 4rem;
+      height: 2.25rem;
+    }
+
+    &.preview-xs {
+      width: 2rem;
+      height: 1.125rem;
+      margin-#{$dlab-pos-right}: 0;
+    }
+  }
+}

public/scss/components/forms/_form-addons-select2.scss

@@ -0,0 +1,238 @@
+
+.select2-container--default .select2-selection--single {
+    border-radius: $radius;
+    border: 1px solid var(--border);
+    height: 2.8rem;
+    background: var(--card);
+		
+    &:hover,&:focus,&.active{
+        box-shadow: none;
+    }
+}
+
+.select2-container--default .select2-selection--single .select2-selection__rendered {
+    line-height: 2.8rem;
+	color:$body-color;
+	padding-#{$dlab-pos-left}: 15px;
+	min-height: 2.8rem;
+	text-align: #{$dlab-pos-left};
+}
+
+.select2-container--default .select2-selection--multiple {
+    border-color: $border;
+    border-radius: 0;
+	
+}
+
+.select2-dropdown {
+    border-radius: 0;
+}
+
+.select2-container--default .select2-results__option--highlighted[aria-selected] {
+    background-color: var(--primary);
+}
+
+.select2-container--default.select2-container--focus .select2-selection--multiple {
+    border-color: var(--border);
+    background: var(--card);
+	color: var(--text-dark);
+	text-align: #{$dlab-pos-left} !important;
+}
+.select2-container--default .select2-selection--single .select2-selection__arrow {
+    top: 10px;
+	#{$dlab-pos-left}: auto;
+    #{$dlab-pos-right}: 15px;
+}
+.select2-container .select2-selection--multiple{
+	min-height: 2.8rem;
+	color:var(--text);
+	border-radius: $radius;
+	border: 1px solid var(--border);
+	background-color: var(--card);
+}
+
+.select2-dropdown{
+	border-color: var(--border);
+	background-color: var(--card);
+}
+.swal2-popup .swal2-content{
+	color:var(--text);
+}
+
+
+
+.select2-selection__clear{
+	display:none;
+}
+.select2-container--classic .select2-results__option--highlighted.select2-results__option--selectable{
+	background-color:var(--primary);
+}
+.select2-container--classic.select2-container--open .select2-selection--multiple,.select2-container--classic.select2-container--open .select2-dropdown{
+	border-color:var(--primary);
+}
+.select2-container--open .select2-dropdown{
+	background-color:var(--card);
+	border-radius: $radius;
+	padding:1rem 0;
+	box-shadow:0px 0px 50px 0px rgba(82, 63, 105, 0.15);
+	&.select2-dropdown--above{
+		border-radius:$radius $radius 0 0;
+	}
+	&.select2-dropdown--below{
+		border-radius:0  0  $radius $radius;
+	}
+}
+.select2-container--default .select2-search--dropdown .select2-search__field{
+	border-radius:$radius;
+	padding: 0.5rem 1.25rem;
+	border-color: var(--border);
+    margin: 0 0 0.5rem 0;
+	background-color: var(--card);
+	color: var(--text-dark);
+	text-align: #{$dlab-pos-left};
+}
+.select2-search--dropdown{
+	padding: 0.5rem 1.25rem;
+	margin: 0 0 0.5rem 0;
+}
+.select2-results__options{
+	li{
+		padding: var(--dz-list-space-y) var(--dz-list-space-x);
+		font-size: var(--dz-list-size);
+		margin: 0 0;
+		background-color:var(--card);
+	}
+}
+
+.select2-container--default .select2-results__option--selected{
+	background-color: var(--light);
+	color: var(--primary);
+}
+.select2-container--default .select2-results__option--highlighted[aria-selected]{
+	background-color:var(--primary);
+	color:$white;
+}
+.select2-container .select2-search--inline .select2-search__field{
+	background:transparent;
+	color: var(--text-dark);
+}
+.select2-container--default .select2-selection--single .select2-selection__clear{
+	display:none;
+}
+.select2-container--default .select2-selection--multiple .select2-selection__choice,
+.select2-container--classic .select2-selection--multiple .select2-selection__choice{
+	border-radius: $radius;
+	border: 0;
+	background-color: var(--rgba-primary-1);
+	font-size: .85rem;
+	color: var(--primary);
+	padding: 5px 0;
+	padding-#{$dlab-pos-right}: 8px;
+	padding-#{$dlab-pos-left}: 32px;	
+	position: relative;
+}
+.select2-container--default .select2-selection--multiple .select2-selection__choice__remove,
+.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove{
+	height: 100%;
+	padding: 0 6px 0 8px;
+	font-size: 18px;
+	font-weight: 500;
+	border-#{$dlab-pos-right}: 1px solid;
+	border-color: #fff;
+	color: var(--primary);
+	position: absolute;
+	#{$dlab-pos-right}: auto;
+	#{$dlab-pos-left}: 0;
+	top: 0;
+	@at-root [data-theme-version="dark"] & {
+		border-color: rgba(255,255,255,.1);
+	}
+}
+.select2-container--default .select2-selection--multiple .select2-selection__choice__display{
+	display: block;
+    color: var(--primary);
+    font-size: 13px;
+    width: 100%;
+	padding-#{$dlab-pos-left}: 2px;
+    padding-#{$dlab-pos-right}: 5px;
+}
+
+.select2-label{
+	margin-bottom:0.5rem;
+	font-weight: 500;
+    color: var(--bs-heading-color);
+    font-size: 15px;
+}
+.select2-container--default.select2-container--disabled .select2-selection__choice{
+	padding: 5px 8px 5px 8px;
+}
+.select2-container--classic.select2-container--open .select2-selection--single,
+.select2-container--classic .select2-selection--single:focus{
+	border-color:var(--primary);
+}
+.select2-container {
+	width: 100%!important;
+}
+.select2-container--default .select2-results__option--selectable{
+	.select2-result-repository__avatar{
+		height:50px;
+		width : 50px;
+		margin-#{$dlab-pos-right}:12px;
+		img{
+			width : 100%;
+			height:100%;
+			border-radius:$radius;
+		}
+	}
+	&.select2-results__option--highlighted{
+		.select2-result-repository__title{
+			color : $white;
+		}
+		.select2-result-repository__forks,
+		.select2-result-repository__stargazers,
+		.select2-result-repository__watchers{
+			color:$white;
+		}
+	}
+	.select2-result-repository{
+		display:flex;
+		align-items:center;
+		
+	}
+	.select2-result-repository__meta{
+		flex:1;
+	}
+	.select2-result-repository__title{
+		font-size:.95rem;
+		color:#000;
+	}
+	.select2-result-repository__description{
+		font-size:.75rem;
+		margin-bottom:3px;
+	}
+	.select2-result-repository__statistics{
+		display:flex;
+	}
+	.select2-result-repository__forks,
+	.select2-result-repository__stargazers,
+	.select2-result-repository__watchers{
+		margin-#{$dlab-pos-right}:12px;
+		font-size:.75rem;
+		color:$headings-color;
+	}
+}
+
+.tagify.form-control{
+    @include respond('laptop'){
+        padding: 5px 5px;
+    }
+}
+.tagify__tag > div::before {
+    box-shadow: 0 0 0 20px var(--tag-bg) inset;
+}
+.tagify__tag__removeBtn:hover + div::before{
+	box-shadow: 0 0 0 20px var(--tag-remove-bg,rgba(211,148,148,.3)) inset !important;
+}
+.select2-results__options{
+    text-align: #{$dlab-pos-left};
+}

public/scss/components/forms/_form-advance-taginput.scss

@@ -0,0 +1,60 @@
+
+
+.tagsinput {
+    overflow-y           : auto;
+    display              : block;
+    width                : 100%;
+    height               : 3.4rem;
+    padding              : .6rem 1.2rem;
+    font-size            : 1.4rem;
+    line-height          : 1.42857143;
+    background-image     : none;
+    -webkit-border-radius: .4rem;
+    border-radius        : .4rem;
+
+    span.tag {
+        display              : block;
+        float                : left;
+        padding              : .3rem .8rem;
+        text-decoration      : none;
+        margin-right         : .5rem;
+        margin-bottom        : .5rem;
+        font-size            : 1.3rem;
+        -webkit-border-radius: .3rem;
+        border-radius        : .3rem;
+
+        a {
+            font-weight    : bold;
+            text-decoration: none;
+            font-size      : 1.1rem;
+        }
+    }
+
+    input {
+        width        : 8rem;
+        margin       : 0;
+        font-size    : 1.3rem;
+        border       : 1px solid transparent;
+        padding      : .5rem;
+        background   : transparent;
+        outline      : 0;
+        margin-right : .5rem;
+        margin-bottom: .5rem;
+    }
+
+    div {
+        display: block;
+        float  : left;
+    }
+}
+
+.tags_clear {
+    clear : both;
+    width : 100%;
+    height: 0;
+}
+
+.not_valid {
+    background: #FBD8DB !important;
+    color     : #90111A !important;
+}

public/scss/components/forms/_form-basic.scss

@@ -0,0 +1,398 @@
+
+// Basic Input
+
+.form-check{
+	padding: 0;
+	padding-#{$dlab-pos-left}: 1.5em;
+	.form-check-input{
+		float: #{$dlab-pos-left};
+    	margin-#{$dlab-pos-left}: -1.5em;
+	}
+}
+
+.form-control{
+    border: 1px solid var(--border);
+	padding: 0.3125rem 1.25rem;
+    color: var(--text-dark);
+	height: 2.85rem;
+	background-color: var(--card);
+	border-radius:$radius;
+	&::placeholder{
+		color: var(--text);
+	}
+	@include respond('laptop') {
+		height: 2.8rem;
+	}
+    &:hover,&:focus,&.active{
+		box-shadow: none;
+        background: var(--card);
+        color: var(--text-dark);
+    }
+	&.solid{
+		background-color: var(--light);
+		border: 1px solid var(--light);
+		&:hover,&:focus,&.active{
+			background-color: var(--light);
+		}
+	}
+	&:focus{
+		border-color:var(--rgba-primary-5);
+	}
+	&-lg {
+		min-height: 3.75rem;
+		padding: 0.5rem 1.1rem;
+		font-size: 1.09375rem;	
+		border-radius: $radius ;
+		line-height: 2.8125rem;
+	}
+	&-sm{
+		min-height: 2.5rem;
+		height: auto;
+		border-radius: $radius;
+	}
+		
+}
+.basic-form{
+	.btn.btn-primary{
+		flex: 0 0 auto;
+	
+		@media only screen and (max-width: 1699px) and (min-width: 1600px){
+			padding: 0.688rem 0.675rem;
+			font-size: 0.875rem;
+		}
+		@media only screen and (max-width: 1490px) and (min-width: 1199px){
+			padding: 0.688rem 0.5rem;
+			font-size: 0.675rem;
+			flex: 0 0 25%;
+		}
+	
+	}
+}
+.nice-select.form-control{
+	line-height: 2.2rem;
+	&-lg{
+		line-height:2.8125rem;
+	}
+	&-sm{
+		line-height:1.8rem;
+	}			
+}
+
+.form-control[type="file"] {
+    line-height: 2.2rem;
+    padding-#{$dlab-pos-left}: 10px;
+}
+.form-control-sm[type="file"] {
+    line-height: 2rem;
+    padding-#{$dlab-pos-left}: 8px;
+}
+.form-control-lg[type="file"] {
+    line-height: 2.6rem;
+    padding-#{$dlab-pos-left}: 8px;
+}
+
+.input-rounded {
+    border-radius: 6.25rem;
+}
+.input-group-append .input-group-text {
+    border-radius: 0;
+    border-bottom-#{$dlab-pos-right}-radius: $radius;
+    border-bottom-#{$dlab-pos-right}-radius: $radius;
+}
+
+.input-group.input-group-sm {
+	.form-control.form-control-sm{
+		border-bottom-#{$dlab-pos-right}-radius: $radius;
+		border-bottom-#{$dlab-pos-right}-radius: $radius;
+	}
+	
+	.input-group-text{
+		border-bottom-#{$dlab-pos-left}-radius: $radius;
+		border-bottom-#{$dlab-pos-left}-radius: $radius;
+	}	
+}
+.input-group.input-group-lg{
+	.form-control.form-control-lg{
+		border-bottom-#{$dlab-pos-right}-radius: $radius;
+		border-bottom-#{$dlab-pos-right}-radius: $radius;
+	}
+	
+	.input-group-text{
+		border-bottom-#{$dlab-pos-left}-radius: $radius;
+		border-bottom-#{$dlab-pos-left}-radius: $radius;
+	}	
+}
+
+// Input Color
+[data-theme-version="light"],
+[data-theme-version="dark"] {
+	.input-primary{
+		.form-control{
+			border-color:var(--primary);
+		}	
+		.input-group-text{
+			background-color:var(--primary);
+			color:$white;
+		}
+	}
+	.input-danger{
+		.form-control{
+			border-color:$danger;
+		}	
+		.input-group-text{
+			background-color:$danger;
+			color:$white;
+		}
+	}
+	.input-info{
+		.form-control{
+			border-color:$info;
+		}	
+		.input-group-text{
+			background-color:$info;
+			color:$white;
+		}
+	}
+	.input-success{
+		.form-control{
+			border-color:$success;
+		}	
+		.input-group-text{
+			background-color:$success;
+			color:$white;
+		}
+	}
+	.input-warning{
+		.form-control{
+			border-color:$warning;
+		}	
+		.input-group-text{
+			background-color:$warning;
+			color:$white;
+		}
+	}
+}
+// Input Outline
+[data-theme-version="light"],
+[data-theme-version="dark"] {
+	.input-primary-o{
+		.form-control{
+			border-color:var(--primary);
+			
+		}	
+		.input-group-text{
+			background-color:transparent;
+			border-color:var(--primary);
+			color:var(--primary);
+		}
+	}
+	.input-danger-o{
+		.form-control{
+			border-color:$danger;
+		}	
+		.input-group-text{
+			background-color:transparent;
+			border-color:$danger;
+			color:$danger;
+		}
+	}
+	.input-info-o{
+		.form-control{
+			border-color:$info;
+		}	
+		.input-group-text{
+			background-color:transparent;
+			border-color:$info;
+			color:$info;
+		}
+	}
+	.input-success-o{
+		.form-control{
+			border-color:$success;
+		}	
+		.input-group-text{
+			background-color:transparent;
+			border-color:$success;
+			color:$success;
+		}
+	}
+	.input-warning-o{
+		.form-control{
+			border-color:$warning;
+		}	
+		.input-group-text{
+			background-color:transparent;
+			border-color:$warning;
+			color:$warning;
+		}
+	}
+}
+
+
+.form-control-sm{
+    min-height: 2.25rem;
+}
+
+
+
+// Input Group
+.input-group-text{
+	background-color:var(--light);
+    border: 0.0625rem solid transparent;
+    min-width: 3.125rem;
+    display: flex;
+    justify-content: center;
+	padding: 0.532rem 0.75rem;
+	border-radius:$radius;
+	
+    i{
+        font-size: 1rem;
+    }
+}
+
+.form-file-label{
+    height: 2.5rem;
+	padding: 0.5rem 0.75rem;
+}
+.input-group-prepend .btn,
+.input-group-append .btn {
+    z-index: 0;
+}
+.custom-select{
+    background: none;
+    border-color: $border;
+    color: $dark;
+    &:focus{
+        box-shadow: none;
+        border-color: var(--primary);
+        color: var(--primary);
+    }
+}
+.form-file-label{
+	background: #656C73;
+	white-space: nowrap;
+	color: $white;
+	@at-root [data-theme-version="dark"] & {
+		background: $d-border;
+		border-color: $d-border;
+		color: $body-color;
+	}
+}
+
+.custom_file_input {
+    .form-file-label::after {
+        height: 100%;
+    }
+}
+
+
+.form-control:disabled,
+ .form-control[readonly] {
+    background: var(--light);
+    opacity: 1;
+}
+
+.form-file{
+	border: 0.0625rem solid $border;
+    background: $white;
+	@at-root [data-theme-version="dark"] & {
+        background: $d-bg;
+		border-color: $d-border;
+    }
+}
+.input-group{
+	> .form-control-plaintext,
+	  > .form-select,
+	  > .form-file {
+		position: relative; // For focus state's z-index
+		flex: 1 1 auto;
+		// Add width 1% and flex-basis auto to ensure that button will not wrap out
+		// the column. Applies to IE Edge+ and Firefox. Chrome does not require this.
+		width: 1%;
+		margin-bottom: 0;
+
+	  }
+	&> .form-file {
+		display: flex;
+		align-items: center;
+	  }
+}
+
+
+.select2-container--default 
+.select2-selection--multiple
+ .select2-selection__choice{
+	border-radius:$radius;
+}
+
+.form-file{
+	.form-control{
+		margin:0;
+		border-radius:0;
+		border:0;
+		height:auto;
+	}
+	.form-control[type="file"] {
+		line-height: 28px;
+		padding-#{$dlab-pos-left}: 10px;
+	}
+}
+
+.form-label{
+	font-size: .8375rem;
+	color: var(--text-dark);
+	font-weight: 500;
+	&.required{
+		color: var(--text-dark);
+		&::after{
+			content: "*";
+			color: $danger;
+			margin-#{$dlab-pos-left}: 3px;
+			transform: scale(1.3);
+			display: inline-block;
+		}
+	}
+}	
+.col-form-label{
+	color: var(--text-dark);
+}
+.input-hasicon{
+	position: relative;
+	.icon{
+		position: absolute;
+		height: 100%;
+		#{$dlab-pos-right}: 0;
+		top: 0;
+		width: 2rem;
+		display: flex;
+		align-items: center;
+		pointer-events: none;
+	}
+}
+.bootstrap-select.show-tick .dropdown-menu .selected span.check-mark {
+	#{$dlab-pos-right}: 15px;
+	#{$dlab-pos-left} : auto;
+}
+
+.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating){
+	border-top-#{$dlab-pos-right}-radius: 0 !important;
+	border-bottom-#{$dlab-pos-right}-radius: 0 !important;
+	border-top-#{$dlab-pos-left}-radius: $radius;
+	border-bottom-#{$dlab-pos-left}-radius: $radius;
+}
+.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
+    margin-#{$dlab-pos-left}: calc(var(--bs-border-width) * -1);
+    border-top-#{$dlab-pos-left}-radius: 0;
+    border-bottom-#{$dlab-pos-left}-radius: 0;
+	border-top-#{$dlab-pos-right}-radius: $radius;
+    border-bottom-#{$dlab-pos-right}-radius: $radius;
+}
+.input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n + 3){
+	border-top-#{$dlab-pos-right}-radius: 0;
+    border-bottom-#{$dlab-pos-right}-radius: 0;
+	border-top-#{$dlab-pos-left}-radius: $radius;
+    border-bottom-#{$dlab-pos-left}-radius: $radius;
+}
+.input-group button.dropdown-toggle.dropdown-toggle-split:nth-child(2){
+	border-radius: 0 !important;
+}

public/scss/components/forms/_form-checkbox.scss

@@ -0,0 +1,278 @@
+
+.form-check-label{
+    margin-#{$dlab-pos-left}: 0.3125rem;
+    margin-top: 0.1875rem;
+	@at-root [data-theme-version="dark"] & {
+		color:$white;
+	}   
+}
+.radio{
+	label{
+		@at-root [data-theme-version="dark"] & {
+			color:$white;
+		}
+	}
+}
+.radio.disabled{
+	label{
+		@at-root [data-theme-version="dark"] & {
+			color:$d-ctl;
+		}
+	}
+}
+.radio-inline{
+	@at-root [data-theme-version="dark"] & {
+		color:$white;
+	}
+}
+.form-check-input{
+	top:0.125rem;
+	border-width:0.125rem;
+	width: 1.25rem;
+	height: 1.25rem;
+	border-color: #e7e7e7;
+	@at-root [data-theme-version="dark"] & {
+	background:$d-bg;
+	border-color:$d-border;
+ }   
+}
+.rtl .form-check-label{
+	&:before,
+	&:after{
+		#{$dlab-pos-right}: -1.5rem !important;
+		#{$dlab-pos-left}: inherit;
+	}
+}
+.form-check {
+    line-height: normal;
+}
+
+// Toggle Switch
+.toggle-switch{
+	padding-#{$dlab-pos-left}:3.125rem;
+	line-height: 1.25;
+	display:inline-block;
+	color:$black;
+	font-weight: 600;
+	.form-check-input{
+		border: 0;
+		cursor:pointer;
+		background: #d8d8d8;
+		width: 2.3125rem;
+		border-radius: 1.25rem !important;
+		height: 0.875rem;
+		position:relative;
+		#{$dlab-pos-left}: -0.3125rem;
+		@include transitionFast;
+		background-image:none;
+		&:focus{
+			background-image:none!important;
+		}
+		&:checked{
+			background:var(--rgba-primary-2);
+			background-image:none!important;
+			&:after{
+				#{$dlab-pos-left}:1.25rem;
+				background:var(--primary);
+			}
+		}
+		&:focus{
+			box-shadow:none;
+		}
+		&:after{
+			width: 1.25rem;
+			background:#909090;
+			height: 1.25rem;
+			content:"";
+			position:absolute;
+			border-radius: 1.5rem;
+			top: -0.1875rem;
+			#{$dlab-pos-left}: 0;
+			box-shadow:0 0 0.3125rem rgba(0,0,0,0.3);
+			@include transitionFast;
+		}
+	}
+	&.text-end{
+		padding-#{$dlab-pos-right}:0rem;
+		padding-#{$dlab-pos-left}:0;
+		.form-check-input{
+			#{$dlab-pos-left}: auto;
+			margin-#{$dlab-pos-left}: 0;
+			float:right;
+			#{$dlab-pos-right}: 0rem;
+		}
+		.form-check-label{
+			margin-#{$dlab-pos-right}: 0.9375rem;
+			margin-#{$dlab-pos-left}:0;
+		}
+	}
+	.form-check-label{
+		cursor:pointer;
+	}
+}
+
+
+// CheckBox
+.form-check-input:focus ~ .form-check-label::before{
+	box-shadow:none !important;
+}
+.form-check-label::before{
+    background-color: transparent;
+    border-color: $light;
+	border-width: 0.125rem;
+	border-radius: 0.125rem !important;
+		
+	@at-root [data-theme-version="dark"] & {
+		background-color: transparent;
+		border-color: $d-border;
+	}
+}
+.check-xs{
+	.form-check-input{
+		width: 1.125rem;
+		height: 1.125rem;
+	}
+}
+.check-lg{
+	.form-check-input{
+		width: 1.5rem;
+		height: 1.5rem;
+	}
+}
+.check-xl{
+	.form-check-input{
+		width: 1.75rem;
+		height: 1.75rem;
+	}
+}
+.checkbox{
+	&-info{
+		.form-check-input{
+			&:focus{
+				border-color: $info;
+				outline: 0;
+				box-shadow: 0 0 0 0.25rem rgba($info , 0.25);
+			}
+			&:checked{
+				background-color: $info;
+				border-color: $info;
+				@at-root [data-theme-version="dark"] & {
+					background-color: $info;
+					border-color: transparent;
+				}
+			}
+		}
+	}
+	&-danger {
+		.form-check-input{
+			&:focus{
+				border-color: $danger;
+				outline: 0;
+				box-shadow: 0 0 0 0.25rem rgba($danger , 0.25);
+			}
+			&:checked{
+				background-color: $danger;
+				border-color: $danger;
+				@at-root [data-theme-version="dark"] & {
+					background-color: $danger;
+					border-color: transparent;
+				}
+			}
+		}
+	}
+	&-success{
+		.form-check-input{
+			&:focus{
+				border-color: $success;
+				outline: 0;
+				box-shadow: 0 0 0 0.25rem rgba($success , 0.25);
+			}
+			&:checked{
+				background-color: $success;
+				border-color: $success;
+				@at-root [data-theme-version="dark"] & {
+					background-color: $success;
+					border-color: transparent;
+				}
+			}
+		}
+	}
+	&-warning{
+		.form-check-input{
+			&:focus{
+				border-color: $warning;
+				outline: 0;
+				box-shadow: 0 0 0 0.25rem rgba($warning , 0.25);
+			}
+			&:checked{
+				background-color: $warning;
+				border-color: $warning;
+				@at-root [data-theme-version="dark"] & {
+					background-color: $warning;
+					border-color: transparent;
+				}
+			}
+		}
+	}
+	&-secondary{
+		.form-check-input{
+			&:focus{
+				border-color: $secondary;
+				outline: 0;
+				box-shadow: 0 0 0 0.25rem rgba($secondary , 0.25);
+			}
+			&:checked{
+				background-color: $secondary;
+				border-color: $secondary;
+				@at-root [data-theme-version="dark"] & {
+					background-color: $secondary-opacity;
+					border-color: transparent;
+				}
+			}
+		}
+	}
+}
+
+
+
+
+//Check Switch
+.check-switch{
+	padding-#{$dlab-pos-left}: 2.5rem;
+	.form-check-label{
+		line-height: 1.875rem;
+		font-weight: 500;
+		span{
+			line-height: 1;
+		}
+		&:after,&:before{
+			height:1.5rem;
+			width:1.5rem;
+			#{$dlab-pos-left}: -2rem;
+			border-radius: 3rem!important;
+			border-color:var(--rgba-primary-3);
+		}
+	}
+	.form-check-input:checked ~ .form-check-label::after{
+		background-image:url('../images/svg/check.svg');
+	}
+	.form-check-input:checked ~ .form-check-label::before{
+		background:$white;
+	}
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

public/scss/components/forms/_form-ckeditor.scss

@@ -0,0 +1,39 @@
+.custom-ekeditor{
+	ul{
+		padding-#{$dlab-pos-left}:1.25rem;
+		li{
+			list-style:unset;
+		}
+	}
+	ol{
+		li{
+			list-style:decimal;
+		}
+	}
+}
+
+.ck.ck-toolbar{
+	&>.ck-toolbar__items{
+		flex-flow: #{$dlab-row} !important; 
+	}
+	.ck-button{
+		justify-content: #{$dlab-pos-left} !important;
+	}
+}
+.ck.ck-media-form {
+	flex-flow: #{$dlab-row} !important; 
+	.ck.ck-label,.ck.ck-input{
+		text-align: #{$dlab-pos-left} !important;
+	}
+	.ck.ck-label{
+		#{$dlab-pos-left}: 0 !important;
+		#{$dlab-pos-right}:auto !important;
+	}
+}
+.ck.ck-content{
+	text-align: #{$dlab-pos-left} !important;
+}
+.ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_se {
+	#{$dlab-pos-left}: 0 !important;
+	#{$dlab-pos-right}: auto !important;
+}

public/scss/components/forms/_form-dropzone.scss

@@ -0,0 +1,3 @@
+
+
+

public/scss/components/forms/_form-editor-quill.scss

@@ -0,0 +1,3 @@
+.ql-container{
+    height: 25rem;
+}

public/scss/components/forms/_form-pickers.scss

@@ -0,0 +1,321 @@
+
+
+.asColorPicker-dropdown {
+    max-width: 26rem;
+}
+.asColorPicker-trigger {
+    overflow: hidden;
+    border-top-#{$dlab-pos-right}-radius: 0.5rem !important;
+    border-bottom-#{$dlab-pos-right}-radius: 0.5rem !important;
+}
+.asColorPicker-trigger {
+    border  : 0 none;
+    height  : 100%;
+    position: absolute;
+    #{$dlab-pos-right}: -8px;
+    #{$dlab-pos-left}:auto;
+    top     : 0;
+    width   : 2.1875rem;
+}
+.asColorPicker-clear {
+    display        : none;
+    position       : absolute;
+    #{$dlab-pos-right}: 1rem;
+    #{$dlab-pos-left}:auto;
+    text-decoration: none;
+    top            : .5rem;
+}
+.asColorPicker-buttons{
+    float: #{$dlab-pos-right};
+}
+
+.daterangepicker {
+    td.active {
+        background-color: var(--primary);
+		color:$white!important;
+
+        &:hover {
+            background-color: var(--primary);
+        }
+    }
+
+    button.applyBtn {
+        background-color: var(--primary);
+        border-color: var(--primary);
+    }
+}
+
+.datepicker {
+    &.datepicker-dropdown {
+		padding:1rem;
+        border-radius: $radius;
+        border: 0;
+		cursor:pointer;
+        td.day, th.next, th.prev {
+            height: 33px;
+            width: 33px !important;
+            text-align: center;
+            font-weight: 500;
+            border-radius: $radius-sm;
+            color: var(--text-dark);
+            &.old,&.new{
+                color: var(--text);
+            }   
+
+            &:hover {
+                color: var(--primary);
+            }
+        }
+
+        th.datepicker-switch, th.next, th.prev {
+            font-weight: 500;
+			font-size:14px;
+            color: $heading;
+			text-align:center;
+        }
+
+        th.dow {
+            font-weight: 400;
+            font-size: .75rem;
+            height: 2rem;
+            color: var(--text-dark);
+        }
+    }
+    table {
+
+        tr td.selected, tr td.active.active {
+            border: 0;
+			background:var(--primary) !important;
+			color:$white;
+            &:hover{
+                background: var(--primary)!important;
+                color: $white;
+            }
+        }
+
+        tr {
+            td.today {
+                background: var(--primary)!important;
+                color     : #ffffff!important;
+                &:hover {
+                    background: var(--primary)!important;
+                    color     : #ffffff;
+                }
+            }
+            td.today.disabled {
+                box-shadow: 0rem 0rem 1.875rem 0.3125rem rgba(243,30,122,0.3);
+                color     : #ffffff;
+
+                &:hover {
+                    box-shadow: 0rem 0rem 1.875rem 0.3125rem rgba(243,30,122,0.3);
+                    color     : #ffffff;
+                }
+            }
+        }
+    }
+}
+
+
+.picker {
+    &__select--month, &__select--year {
+        height: 2.5em;
+    }
+
+    &__input {
+        background-color: transparent !important;
+
+        @at-root [data-theme-version="dark"] & {
+            background-color: transparent !important;
+            border: 0.0625rem solid $d-border;
+        }
+    }
+}
+
+.asColorPicker-wrap{
+	.form-control{
+		border-bottom-#{$dlab-pos-right}-radius: 0;
+		border-bottom-#{$dlab-pos-right}-radius: 0;
+	}
+}
+// .daterangepicker td.available:hover, .daterangepicker th.available:hover{
+// 		color:var(--primary);
+// 		background-color:#f9f9f9;
+// }
+.daterangepicker .drp-calendar.left,
+.daterangepicker .drp-calendar.right{
+		padding:1rem 1rem;
+}
+.daterangepicker .calendar-table th, .daterangepicker .calendar-table td{
+	width:33px;
+	height:33px;
+	// border-radius:$radius-sm!important;
+	color:var(--text-dark);
+}
+// .daterangepicker td.in-range{
+// 	background-color:transparent;
+// 	color:#5E6278!important;
+// }
+.daterangepicker .calendar-table {
+    background-color: var(--card);
+    border-color: var(--border);
+    th{
+        font-size:14px;
+        font-weight:600;
+        color:var(--text);
+    }
+}
+button.cancelBtn.btn.btn-sm.btn-inverse{
+	background-color:var(--light);
+    &:active{
+        color: var(--text-dark);
+    }
+}
+.daterangepicker{
+    background-color: var(--card);
+	box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
+	border:0;
+    border-radius: $radius;
+
+    .drp-buttons{
+        border-color: var(--border);
+    }
+}
+.daterangepicker .calendar-table .next span, .daterangepicker .calendar-table .prev span{
+	border-width:0 1.9px 1.9px 0;
+	border-color:$light;
+}
+
+.daterangepicker td.in-range{
+    background-color: var(--light);
+    &.end-date{
+        background-color: var(--primary);
+    }
+}
+.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date{
+    background-color: var(--card);
+}
+
+
+
+.dtp .dtp-close{
+    top: 1rem;
+}
+.dtp > .dtp-content{
+    border-radius: $radius;
+    background-color: var(--card);
+    max-height: 570px;
+    & > .dtp-date-view{
+        & > header.dtp-header{
+            background-color: var(--primary-dark);
+            padding: .75rem 1rem;
+            border-top-#{$dlab-pos-left}-radius: $radius;
+            border-top-#{$dlab-pos-right}-radius: $radius;
+        }
+    } 
+    .dtp-buttons{
+        .btn{
+            font-size: .85rem;
+            padding: .35rem 1rem;
+        }
+        .dtp-btn-ok{
+            background: var(--rgba-primary-1);
+            color: var(--primary);
+        }
+        .dtp-btn-cancel{
+            &:hover{
+                color: $danger;
+            }
+        }
+    }
+}
+.dtp{
+    direction: ltr;
+    div.dtp-date,div.dtp-time{
+        background-color: var(--primary);
+    }
+    div.dtp-actual-year{
+        color: rgba($white,.8);
+        font-size: 1.2rem;
+    }
+    .p10 > a{
+        color: $white;
+    }
+    div.dtp-actual-num{
+        font-weight: 600;
+    }
+    div.dtp-date > div{
+        padding: 5px 0;
+    }
+    table.dtp-picker-days tr > td{
+        font-weight: 500;
+        font-size: .75rem;
+        &:last-child{
+            text-align: center;
+        }
+    }
+    div.dtp-picker-month{
+        padding-bottom: 10px!important;
+    }
+    table.dtp-picker-days tr > td > a, .dtp .dtp-picker-time > a{
+        color: var(--text-dark);
+        display: inline-block;
+        height: 1.8rem;
+        width: 1.8rem;
+    }
+    table.dtp-picker-days tr > th{
+        color: var(--text-gray);
+        font-weight: 600;
+        font-size: .875rem;
+        &:last-child{
+            text-align: center;
+        }
+    }
+    table.dtp-picker-days tr > td > a.selected{
+        background-color: var(--primary);
+    }
+}
+
+.datepicker table tr td.day.focused, .datepicker table tr td.day:hover,
+.datepicker .datepicker-switch:hover, .datepicker .next:hover, .datepicker .prev:hover, .datepicker tfoot tr th:hover{
+    background-color: var(--light);
+}
+
+.clockpicker-popover{
+    .clockpicker-button{
+        border-color: var(--border)!important;
+        &:active{
+            color: var(--text-dark)!important;
+        }
+    }
+}
+
+.asColorPicker-gradient-control {
+    float: #{$dlab-pos-right};
+}
+
+.picker__footer{
+    display: flex;
+    gap: 10px;
+    button{
+        transition: 0.4s;
+        &:last-child{
+            &:hover{
+                &::before{
+                    color: $white !important;
+                }
+            }
+            &::before{
+                top: 0em !important;
+                transition: 0.4s;
+            }
+        }
+    }
+    .picker__button--today{
+        background-color: var(--primary);
+        color: $white !important;
+        
+        &:before{
+            content: none!important
+        }
+    }
+}

public/scss/components/forms/_form-radio-button.scss

@@ -0,0 +1,11 @@
+.form-check-input{
+	&:checked {
+		background-color: var(--primary);
+		border-color: var(--primary);	
+		background-size: cover;
+	}
+	&:focus {
+		border-color: var(--primary);
+		box-shadow: var(--rgba-primary-1);
+	}
+}

public/scss/components/forms/_form-steps.scss

@@ -0,0 +1,192 @@
+
+
+// form-wizard
+.form-wizard{
+	border: 0;
+	.nav-wizard{
+		box-shadow: none!important;
+		margin-bottom: 2rem;
+		li{
+			.nav-link{
+				position: relative;
+				span{
+					border-radius: 3.125rem;
+					width: 3rem;
+					height: 3rem;
+					border: 0.125rem solid var(--primary);
+					display: block;
+					line-height: 3rem;
+					color: var(--primary);
+					font-size: 1.125rem;
+					margin: auto;
+					background-color: $white;
+					position: relative;
+					z-index: 1;
+				}
+				&:after{
+					position: absolute;
+					top: 50%;
+					#{$dlab-pos-left}: 50%;
+					height: 0.1875rem;
+					transform: translateY(-50%);
+					background: $dark-light;
+					z-index: 0;
+					width: 100%;
+				}
+				&.active{
+					&:after{
+						background: var(--primary)!important;
+					}
+					span{
+						background:var(--primary);
+						color:$white;
+					}
+				}
+				&.done{
+					&:after{
+						background: var(--primary)!important;						
+					}
+					span{
+						background-color: var(--primary);
+						color: $white;
+					}
+					
+				} 
+			}
+			&:last-child{
+				.nav-link{
+					&:after{
+						content: none;
+					}
+				}
+			}
+		}	
+	}
+	.toolbar-bottom{
+		.btn{
+			background-color: var(--primary);
+			border: 0;
+			padding: 0.75rem 1.125rem;
+		}
+	}
+	.tab-content{
+		.tab-pane{
+			padding: 0;
+		}
+	}
+	.emial-setup {
+        label.mailclinet {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+            width: 10rem;
+            height: 10rem;
+            border-radius: 50%;
+            cursor: pointer;
+            background-color: #EEF5F9;
+			text-align: center;
+			margin: auto;
+			@at-root [data-theme-version="dark"] & {
+				background-color: $d-bg;
+			}
+            @include respond(phone) {
+                width: 7rem;
+                height: 7rem;
+            }
+
+            .mail-icon {
+                font-size: 3rem;
+                display: inline-block;
+                line-height: 1;
+                margin-top: -1rem;
+
+                @include respond(phone) {
+                    font-size: 2rem;
+                }
+            }
+
+            .mail-text {
+                font-size: 1rem;
+                text-align: center;
+                margin-top: .5rem;
+
+                @include respond(phone) {
+                    font-size: 1rem;
+					line-height: 1.25rem;
+                }
+            }
+
+            input[type="radio"] {
+                display: none;
+            }
+        }
+    }
+	
+	// emial-setup
+	.emial-setup {
+        label.mailclinet {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+            width: 10rem;
+            height: 10rem;
+            border-radius: 50%;
+            cursor: pointer;
+            background-color: #EEF5F9;
+			text-align: center;
+			margin: auto;
+			@at-root [data-theme-version="dark"] & {
+				background-color: $d-bg;
+			}
+            @include respond(phone) {
+                width: 7rem;
+                height: 7rem;
+            }
+
+            .mail-icon {
+                font-size: 3rem;
+                display: inline-block;
+                line-height: 1;
+                margin-top: -1rem;
+
+                @include respond(phone) {
+                    font-size: 2rem;
+                }
+            }
+
+            .mail-text {
+                font-size: 1rem;
+                text-align: center;
+                margin-top: .5rem;
+
+                @include respond(phone) {
+                    font-size: 1rem;
+					line-height: 1.25rem;
+                }
+            }
+
+            input[type="radio"] {
+                display: none;
+            }
+        }
+    }
+	@include respond('phone-land') {
+		.nav-wizard{
+			flex-direction: unset!important;
+		}
+		.tab-content{
+			height: 100%!important;
+		}
+	}
+	@include respond('phone') {
+		.nav-wizard{
+			li{
+				.nav-link{
+					padding: 0;
+				}
+			}
+		}
+	}
+}

public/scss/components/forms/_form-switch.scss

@@ -0,0 +1,102 @@
+.js-switch {
+
+    & + .switchery {
+        border-radius: 3.125rem;
+        margin-#{$dlab-pos-right}: 4rem;
+
+        @include media-breakpoint-down(sm) {
+            margin-#{$dlab-pos-right}: 1rem;
+        }
+
+        &>small {
+            top: 0.125rem;
+        }
+    }
+
+    &.js-switch-lg  {
+        & + .switchery {
+            height: 2rem;
+            width: 4.5rem;
+
+            &>small {
+                width: 1.75rem;
+                height: 1.75rem;
+            }
+        }
+    }
+
+    &.js-switch-md  {
+        & + .switchery {
+            height: 1.5rem;
+            width: 3.5rem;
+
+            &>small {
+                width: 1.25rem;
+                height: 1.25rem;
+            }
+        }
+    }
+
+    &.js-switch-sm  {
+        & + .switchery {
+            height: 1rem;
+            width: 2.2rem;
+
+            &>small {
+                width: 0.875rem;
+                height: 0.875rem;
+                top: 0.0625rem;
+            }
+        }
+    }
+
+    &-square {
+
+        & + .switchery {
+            border-radius: 0;
+    
+            &>small {
+                border-radius: 0;
+                top: 0.125rem;
+            }
+        }
+
+        &.js-switch-lg  {
+            & + .switchery {
+                height: 2rem;
+                width: 4.5rem;
+    
+                &>small {
+                    width: 1.75rem;
+                    height: 1.75rem;
+                }
+            }
+        }
+
+        &.js-switch-md  {
+            & + .switchery {
+                height: 1.5rem;
+                width: 3.5rem;
+    
+                &>small {
+                    width: 1.25rem;
+                    height: 1.25rem;
+                }
+            }
+        }
+
+        &.js-switch-sm  {
+            & + .switchery {
+                height: 1rem;
+                width: 2.2rem;
+    
+                &>small {
+                    width: 0.875rem;
+                    height: 0.875rem;
+                    top: 0.0625rem;
+                }
+            }
+        }
+    }
+    
+}

public/scss/components/forms/_form-touchspin.scss

@@ -0,0 +1,18 @@
+.bootstrap-touchspin .input-group-btn-vertical>.btn {
+    height: 51%;
+
+    &.bootstrap-touchspin-up {
+        top: 0;
+    }
+}
+
+.bootstrap-touchspin {
+    button.btn {
+        border: none;
+    }
+
+    .input-group-text {
+        background-color: $info;
+        border-color: $info;
+    }
+}

public/scss/components/forms/_form-validation.scss

@@ -0,0 +1,67 @@
+/////////////////////////////
+// Bootstrap validation
+/////////////////////////////
+.form-control.is-valid {
+    border-color: $success !important;
+    border-#{$dlab-pos-right}: 0rem !important;
+    &:focus {
+        box-shadow: none;
+    }
+}
+
+.form-control.is-warning {
+    border-color: $warning !important;
+    border-#{$dlab-pos-right}: 0rem !important;
+    &:focus {
+        box-shadow: none;
+    }
+}
+
+.form-control.is-invalid {
+    border-color: $danger !important;
+    border-#{$dlab-pos-right}: 0rem !important;
+    &:focus {
+        box-shadow: none;
+    }
+}
+
+////////////////////////
+// Jquery Validation 
+////////////////////////
+.is-valid {
+    .input-group-prepend {
+        .input-group-text {
+            i {
+                color: $success;
+            }
+        }
+    }
+}
+
+.is-invalid {
+    .input-group-prepend {
+        .input-group-text {
+            i {
+                color: var(--rgba-primary-2);
+            }
+        }
+    }
+}
+
+// Show Pass
+.show-pass{
+	cursor:pointer;
+	
+	.fa-eye{
+		display:none;
+	}
+	
+	&.active{
+		.fa-eye-slash{
+			display:none;
+		}
+		.fa-eye{
+			display:inline-block;
+		}
+	}
+}

public/scss/components/forms/_forms.scss

@@ -0,0 +1,13 @@
+@import "./form-basic";
+@import "./form-checkbox";
+@import "./form-radio-button";
+@import "./form-switch";
+@import "./form-validation";
+@import "./form-pickers";
+@import "./form-addons-cropper";
+@import "./form-addons-select2";
+@import "./form-steps";
+@import "./form-dropzone";
+@import "./form-ckeditor";
+@import "./form-editor-quill";
+

public/scss/components/map/_map-datamap.scss

@@ -0,0 +1,23 @@
+#world-datamap {
+    padding-bottom: 46% !important;
+}
+
+.datamaps-hoverover {
+    background: $white;
+    padding: 0.3125rem;
+    border-radius: 0.3125rem;
+    font-family: 'Roboto' !important;
+    color: var(--primary);
+    border: 0.0625rem solid var(--rgba-primary-3);
+}
+
+.world_map_card {
+    ul.list-group {
+        @include custommq($max: 90rem) {
+            display: flex;
+            flex-wrap: wrap;
+            flex-direction: row;
+            margin-top: 2.1875rem;
+        }
+    }
+}

public/scss/components/map/_map-jqvmap.scss

@@ -0,0 +1,22 @@
+.jqvmap-zoomin,
+.jqvmap-zoomout {
+    height: 1.25rem;
+    width: 1.25rem;
+    line-height: 0.875rem;
+    background-color: var(--primary);
+    color: $white;
+}
+
+.jqvmap-zoomout {
+    top: 2.1875rem;
+}
+
+#world-map, #usa {
+    height: 25rem;
+	@include respond ('tab-port'){
+		height:21.875rem;
+	}
+	@include respond ('phone'){
+		height:14.375rem;
+	}
+}

public/scss/components/map/_maps.scss

@@ -0,0 +1,2 @@
+@import "./map-datamap";
+@import "./map-jqvmap";

public/scss/components/tables/_table-basic.scss

@@ -0,0 +1,332 @@
+//style for all basic tables
+.table-hover > tbody > tr:hover > * {
+	--bs-table-color-state: var(--text-dark);
+	--bs-table-bg-state: var(--light);
+}
+.table {
+	--bs-table-bg : var(--card);
+	strong{
+		color:$dark;
+	}
+    th, td {
+        border-color: var(--border);
+		padding: 0.9375rem 0.625rem;
+    }
+
+	&.shadow-hover tbody tr:hover{
+	    background-color:$white;
+		box-shadow: 0 0rem 1.875rem var(--rgba-primary-2);
+	}
+	&.tr-rounded{
+		tr{
+			td,th{
+				&:first-child{
+					border-radius:2.8125rem 0 0 2.8125rem;
+				}
+				&:last-child{
+					border-radius:0 2.8125rem 2.8125rem 0;
+				}
+			}
+		}
+	}
+	&.border-hover{
+		tr{
+			td{
+				border-width:0.0625rem 0 0.0625rem 0;
+				border-bottom:0.0625rem solid transparent;
+				border-color:transparent;
+				&:first-child{
+					border-width:0.0625rem 0 0.0625rem 0.0625rem;
+				}
+				&:last-child{
+					border-width:0.0625rem 0.0625rem 0.0625rem 0;
+				}
+			}
+			&:hover{
+				td{
+					border-color:$border-color;
+				}
+			}
+		} 
+	}
+	&.bg-primary-hover{
+		th,td{
+			border:none;
+			font-weight:500;
+		}
+		td{
+			color:$black;
+		}
+		th{
+			color:#6C6C6C;
+		}
+		tr:hover{
+			td,th{
+				background:var(--primary);
+				color:$white;
+			}
+		}	
+	}	
+	&.bg-secondary-hover{
+		th,td{
+			border:none;
+			font-weight:500;
+		}
+		td{
+			color:$black;
+		}
+		th{
+			color:#6C6C6C;
+		}
+		tr:hover{
+			td,th{
+				background:$secondary;
+				color:$white!important;
+			}
+		}	
+	}	
+	&.bg-info-hover{
+		th,td{
+			border:none;
+			font-weight:500;
+		}
+		td{
+			color:$black;
+		}
+		th{
+			color:#6C6C6C;
+		}
+		tr:hover{
+			td,th{
+				background:$info;
+				color:$white!important;
+			}
+		}	
+	}	
+	&.bg-warning-hover{
+		th,td{
+			border:none;
+			font-weight:500;
+		}
+		td{
+			color:$black;
+		}
+		th{
+			color:#6C6C6C;
+		}
+		tr:hover{
+			td,th{
+				background:$warning;
+				color:$white!important;
+			}
+		}	
+	}	
+	&.border-no{
+		td{
+			border:0;
+		}
+	}
+	&.short-one{
+		tr{
+			td,th{
+				&:first-child{
+					width:3.75rem
+				}
+			}
+		}
+	}
+    thead th {
+        border-bottom:1px solid var(--border);
+        text-transform: capitalize;
+        color: var(--text-dark) ;
+        font-size: 1rem;
+		white-space:nowrap;
+        font-weight: 500;
+        letter-spacing: 0.0313rem;
+        border-color: var(--border)!important;
+    }
+    tbody  tr td {
+        vertical-align: middle;
+        border-color: var(--border);
+		&:last-child{
+			text-align: #{$dlab-pos-right}; 	
+		}
+    }
+	
+	//delete header borders without '.borders tables'
+    &:not(.table-bordered) {
+        thead th {
+            border-top: none;
+        }
+    }
+
+    //heading background
+    .thead-primary th {
+        background-color: var(--primary);
+        color: $white;
+    }
+	.thead-info th {
+        background-color: $info;
+        color: $white;
+    }
+	.thead-warning th {
+        background-color: $warning;
+        color: $white;
+    }
+	.thead-danger th {
+        background-color: $danger;
+        color: $white;
+    }
+	.thead-success th {
+        background-color: $success;
+        color: $white;
+    }
+
+    //table border
+    &.primary-table-bordered {
+        border: 0.0625rem solid var(--border);
+    }
+
+    //table hover
+    &.primary-table-bg-hover {
+        thead th {
+            background-color: var(--primary-dark);
+            color: $white;
+            border-bottom: none;
+        }
+
+        tbody tr {
+            background-color: var(--primary);
+            transition: all .1s ease;
+			td,th{
+				background-color: transparent;
+				color: $white;
+			}
+            &:hover {
+                background-color: var(--rgba-primary-8);
+            }
+
+            &:not(:last-child) {
+                td, th {
+                    border-bottom: 0.0625rem solid var(--primary-dark);
+                }
+            }
+        }
+    }
+
+    //responsive table width
+    &-responsive {
+        &-tiny {
+			min-width: 18.75rem;
+        }
+
+        &-sm {
+			min-width: 30rem !important;
+        }
+
+        &-md {
+			min-width: 36rem !important;
+        }
+
+        &-lg {
+            min-width: 60.9375rem !important;
+        }
+
+        &-xl {
+            min-width: 70.9375rem !important;
+        }
+    }
+}
+.table-primary, 
+.table-primary > th, 
+.table-primary > td {
+	background-color: var(--rgba-primary-1);
+	color: var(--primary);
+	@at-root [data-theme-version="dark"] & {
+        background-color: var(--rgba-primary-1);
+    }
+}
+.table-success, 
+.table-success > th, 
+.table-success > td {
+	background-color: $success-light;
+	color: $success;
+	@at-root [data-theme-version="dark"] & {
+        background-color: $success-opacity;
+    }
+}
+.table-info, 
+.table-info > th, 
+.table-info > td {
+	background-color: $info-light;
+	color: $info;
+	@at-root [data-theme-version="dark"] & {
+        background-color: $info-opacity;
+    }
+}
+.table-warning, 
+.table-warning > th, 
+.table-warning > td {
+	background-color: $warning-light;
+	color: $warning;
+	@at-root [data-theme-version="dark"] & {
+        background-color: $warning-opacity;
+    }
+}
+.table-danger, 
+.table-danger > th, 
+.table-danger > td {
+	background-color: $danger-light;
+	color: $danger;
+	@at-root [data-theme-version="dark"] & {
+        background-color: $danger-opacity;
+    }
+}
+.table-active, 
+.table-active > th, 
+.table-active > td {
+    background-color: $l-bg;
+	@at-root [data-theme-version="dark"] & {
+        background-color: $d-bg;
+    }
+}
+
+
+
+.card-table{
+	th, td{
+        &:first-child,
+		&:last-child{
+			padding-#{$dlab-pos-left}:1.875rem;
+			padding-#{$dlab-pos-right}:1.875rem;
+			@include respond('phone') {
+				padding-#{$dlab-pos-left}: 0.9375rem;
+			}
+		}
+	
+    }
+} 
+.table thead tr th:last-child {
+	text-align: #{$dlab-pos-right} !important;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

public/scss/components/tables/_table-bootgrid.scss

@@ -0,0 +1,14 @@
+.bootgrid-header {
+    padding: 0 !important;
+    margin: 0;
+
+    @include respond(phone) {
+        .actionBar {
+            padding: 0;
+        }
+    
+        .search {
+            margin: 0 0 0.625rem 0;
+        }
+    }
+}

public/scss/components/tables/_table-datatable.scss

@@ -0,0 +1,327 @@
+//demo styles
+table#example{
+    padding: 0rem 0 2rem 0;
+}
+table.dataTable{
+    font-size: 0.875rem;
+	color:var(--text-gray);
+	.form-check{
+		display: inline-block;
+	}
+}
+#example2_wrapper {
+    .dataTables_scrollBody {
+        max-height: 33.25rem !important;
+    }
+}
+
+#employees, #custommers {
+    padding: .5rem 0 1rem 0;
+}
+//////////
+.dataTables_wrapper .dataTables_paginate{
+    padding-top: 0.75em;
+    padding-bottom: 0.75em;
+	@include respond ('phone'){
+		justify-content:start!important;
+	}
+}
+
+table.dataTable thead > tr > th.sorting::after, table.dataTable thead > tr > th.sorting_desc::after, table.dataTable thead > tr > th.sorting_asc::after {
+	content: "";
+	font-family: "Font Awesome 6 Free";
+	font-weight: 900;
+	background-image: none;
+	margin-#{$dlab-pos-left}: 5px;
+	font-size: calc(100% - 2px);
+	opacity: 0.5;
+}
+table.dataTable thead > tr > th.sorting{
+	&::after {
+		content: "\f0dc";
+	}
+	&.sorting_desc::after {
+		content: "\f0dd";
+		opacity: 0.5;
+	}
+	&.sorting_asc::after {
+		content: "\f0de";
+		opacity: 0.5;
+	}
+}
+table.dataTable thead > tr > th.sorting::before {
+	content: none;
+}
+
+table.dataTable thead th, table.dataTable thead td{
+    border-bottom: 0.125rem solid $border-color;
+    border-top: 0;
+}
+
+table.dataTable tfoot th, table.dataTable tfoot td{
+    border-top: 0;
+}
+table.dataTable tbody tr.selected > *{
+	color: var(--text-dark);
+	background: var(--light)!important;
+	border-color: var(--border)!important;
+}
+table.dataTable tbody tr, table.dataTable tbody td{
+    background: transparent !important;
+}
+table.dataTable.hover > tbody > tr.selected:hover > *, table.dataTable.display > tbody > tr.selected:hover > *{
+	box-shadow: unset!important;
+}
+
+table.dataTable thead th{
+    color: var(--text-dark);
+	white-space:nowrap;
+	font-size:.9375rem;
+	text-transform:capitalize;
+    font-weight: 500;
+	padding: 1.25rem 0.9375rem;
+   
+}
+table.dataTable{
+	& > thead > tr > th{
+		padding: 1rem 0.9375rem;
+		padding-#{$dlab-pos-right}: 26px;
+		padding-#{$dlab-pos-left}: 0.9375rem !important;
+		text-align: #{$dlab-pos-left};
+		background-color: transparent;
+		@include respond ('phone'){
+			padding-#{$dlab-pos-left}: 0.3125rem !important;
+		}
+	}
+}
+
+.dataTables_wrapper .dataTables_info{
+	padding-top: 1rem;
+	@include respond ('phone'){
+		text-align:left;
+	}
+}
+
+table.dataTable tbody td{
+    padding: .85rem 0.9375rem;
+	font-size:.875rem;
+	font-weight: 400;
+	border-bottom:0;
+	@include respond('phone') {
+		padding: 0.5rem 0.3125rem;
+	}
+}
+
+table.dataTable tr.selected{
+    color: var(--primary);
+}
+
+table.dataTable tfoot th{
+    color: var(--text-dark);
+    font-weight: 500;
+	font-size: .9375rem;
+	text-transform: capitalize;
+}
+table.dataTable > tfoot > tr > th, table.dataTable > tfoot > tr > td{
+	padding: 1rem 0.9375rem;
+	@include respond ('phone'){
+		padding: 0.5rem 0.3125rem;
+	}
+}
+td.text-ov {
+    white-space: nowrap;
+}
+
+.dataTables_wrapper .dataTables_paginate{
+	align-items: center;
+    display: flex;
+	flex-flow:wrap;
+	justify-content:center;
+	@include respond ('phone'){
+		flex-flow: nowrap;
+	}
+	.paginate_button.previous,.paginate_button.next{
+		font-size: 1rem;
+		height:2.5rem;
+		width: 2.5rem;
+		min-width: 2.5rem;
+		border:0.0625rem solid var(--primary);
+		border-radius:2.8125rem;
+		padding:0 0.85rem;
+		line-height:2.5rem;
+		margin:0 0.625rem;
+		display:inline-block;
+		color:var(--primary)!important;
+		&.current:hover,
+		&.previous:hover,
+		&.next:hover{
+			color:$white!important;
+			background:var(--primary)!important;
+		}
+		&.disabled{
+			color:var(--primary)!important;
+		}
+	}
+	span{
+		.paginate_button{
+			height:2.5rem;
+			width:2.5rem;
+			padding:0;
+			margin-#{$dlab-pos-left}: 0rem;
+			margin:0 0.125rem;
+			line-height:2.5rem;
+			text-align:center;
+			font-size:1.125rem;
+			border-radius:2.8125rem;
+			color:var(--primary)!important;
+			background:var(--rgba-primary-1);
+			&.current,&:hover{
+				color: #fff !important;
+				background:var(--primary);
+				border:1px solid transparent;	
+				&:hover{
+					color:$white!important;
+					background:var(--primary)!important;
+				}
+			}
+		}
+	}
+}
+
+.dataTables_wrapper {
+    input[type="search"], input[type="text"], select {
+        border: 1px solid var(--border);
+        padding: .3rem 0.5rem;
+		height: 2.5rem;
+        color: var(--text-dark);
+        border-radius: $radius;
+    }
+	.dataTables_length{
+		margin-bottom: 0.9375rem;
+		.bootstrap-select{
+			width: 5rem!important;
+			margin: 0 0.3125rem;
+		}
+	}
+}
+table.dataTable.no-footer{
+    border-bottom: 0;
+}
+
+
+.rounded-lg{
+	min-width:1.875rem;
+}
+.dataTables_scroll{
+    padding: 1rem 0;
+
+    &Foot{
+        padding-top: 1rem;
+    }
+}
+
+.dataTablesCard{
+	background-color:$white;
+	border-radius:$radius;
+	&.border-no{
+		td{
+			border-top:0!important;
+		}
+	}
+}
+
+.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter {
+    @include media-breakpoint-down(md) {
+        text-align: #{$dlab-pos-left};
+    }
+}
+
+.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, 
+.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, 
+.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active{
+	color: $body-color !important;
+}
+.dataTables_wrapper .dataTables_length, 
+.dataTables_wrapper .dataTables_filter, 
+.dataTables_wrapper .dataTables_processing, 
+.dataTables_wrapper .dataTables_paginate {
+    color: $body-color;
+	border-radius:1rem;
+	padding:0.125rem 0;
+	margin-bottom:1.25rem;
+	@at-root [data-theme-version="dark"] & {
+			color:$d-ctl;
+	}
+}
+.paging_simple_numbers.dataTables_paginate {
+	padding: 0.3125rem 0.3125rem;
+	@include respond ('phone'){
+		margin: 10px -10px;
+	}
+}
+.dataTables_wrapper .dataTables_paginate .paginate_button{
+	color: $body-color !important;
+}
+
+
+
+table.dataTable.row-border tbody th, 
+table.dataTable.row-border tbody td, 
+table.dataTable.display tbody th, 
+table.dataTable.display tbody td {
+    border-color: $border-color;
+	box-shadow: none!important;
+    @at-root [data-theme-version="dark"] & {
+        border-color: $d-border;
+	   color:rgba(255,255,255,0.7);
+    }
+}
+
+.dataTables_wrapper{
+	.dataTables_length{
+		.bootstrap-select{
+			.dropdown-toggle{
+				font-size: 0.813rem !important;
+				padding: 0.625rem 1rem;
+			}
+		}
+		@at-root [data-theme-version="dark"] & {
+			color:$d-ctl;
+		}
+	}
+}
+.dataTables_paginate.paging_simple_numbers{
+	span{
+		@include respond ('phone'){
+			display:flex;
+		}
+	}
+}
+/* #example_wrapper.dataTables_wrapper{
+	.paginate_button.previous,.paginate_button.next{
+		@include respond ('phone'){
+			min-width:7rem;
+		}
+	}
+} */
+
+table.dataTable.row-border > tbody > tr > th, 
+table.dataTable.row-border > tbody > tr > td, 
+table.dataTable.display > tbody > tr > th, 
+table.dataTable.display > tbody > tr > td{
+	border-color: var(--border);
+}
+
+table.dataTable thead > tr > th.sorting::before, table.dataTable thead > tr > th.sorting::after, table.dataTable thead > tr > th.sorting_asc::before, table.dataTable thead > tr > th.sorting_asc::after, table.dataTable thead > tr > th.sorting_desc::before, table.dataTable thead > tr > th.sorting_desc::after, table.dataTable thead > tr > th.sorting_asc_disabled::before, table.dataTable thead > tr > th.sorting_asc_disabled::after, table.dataTable thead > tr > th.sorting_desc_disabled::before, table.dataTable thead > tr > th.sorting_desc_disabled::after, table.dataTable thead > tr > td.sorting::before, table.dataTable thead > tr > td.sorting::after, table.dataTable thead > tr > td.sorting_asc::before, table.dataTable thead > tr > td.sorting_asc::after, table.dataTable thead > tr > td.sorting_desc::before, table.dataTable thead > tr > td.sorting_desc::after, table.dataTable thead > tr > td.sorting_asc_disabled::before, table.dataTable thead > tr > td.sorting_asc_disabled::after, table.dataTable thead > tr > td.sorting_desc_disabled::before, table.dataTable thead > tr > td.sorting_desc_disabled::after {
+	position: relative;
+	display: inline-block;
+	#{$dlab-pos-right}: 0;
+}
+table.dataTable > thead > tr > th, table.dataTable > thead > tr > td,
+table.dataTable > tfoot > tr > th, table.dataTable > tfoot > tr > td{
+	border-color: var(--border);
+}
+
+table.dataTable thead > tr > th.sorting_disabled::before{
+	content: none;
+}

public/scss/components/tables/_table-footable.scss

@@ -0,0 +1,4 @@
+.fooicon {
+    font-size: 1.25rem;
+    color: $dark;
+}

public/scss/components/tables/_table-jsgrid.scss

@@ -0,0 +1,25 @@
+.jsgrid-table{
+
+    .jsgrid-header-row{
+
+        & > .jsgrid-header-cell{
+            color: $dark;
+        }
+    }
+
+    & > tbody > tr > td{
+        padding: 1.2em;
+    }
+
+    .jsgrid-insert-row, .jsgrid-edit-row{
+
+        input, select{
+            border: 0.0625rem solid #DDDFE1;
+        }
+    }
+}
+
+.jsgrid .jsgrid-button{
+    border: 0 !important;
+    margin-#{$dlab-pos-left}: 0.625rem;
+}

public/scss/components/tables/_table.scss

@@ -0,0 +1,5 @@
+@import "table-basic";
+@import "table-bootgrid";
+@import "table-datatable";
+@import "table-footable";
+@import "table-jsgrid";

public/scss/components/uc/_addons.scss

@@ -0,0 +1,26 @@
+@import "uc-blockui";
+@import "uc-bootstrap-select";
+@import "uc-clipboard";
+@import "uc-ticker";
+@import "uc-typeahead";
+@import "uc-weather";
+@import "uc-noui-slider";
+@import "uc-nestable";
+@import "uc-pignose-calender";
+@import "uc-horizontal-timeline";
+@import "uc-toastr";
+@import "uc-lightgallery";
+@import "jqvmap";
+@import "perfect-scroll";
+@import "dropzone";
+@import "uc-calendar";
+@import "_uc-ckeditor";
+ 
+
+
+
+
+
+
+
+

public/scss/components/uc/_jqvmap.scss

@@ -0,0 +1,27 @@
+
+.jqvmap-zoomin, .jqvmap-zoomout
+{
+	position: absolute;
+	#{$dlab-pos-left}: 0.625rem;
+	-webkit-border-radius: 0.1875rem;
+	-moz-border-radius: 0.1875rem;
+	border-radius: 0.1875rem;
+	background: #000000;
+	padding: 0.1875rem;
+	color: white;
+	width: 1.0625rem;
+	height: 1.0625rem;
+	cursor: pointer;
+	line-height: 0.625rem;
+	text-align: center;
+}
+.jqvmap-zoomin
+{
+	top: 0.625rem;
+}
+.jqvmap-zoomout
+{
+	top: 1.875rem;
+}
+
+

public/scss/components/uc/_perfect-scroll.scss

@@ -0,0 +1,68 @@
+
+.ps__rail-x:hover,
+.ps__rail-y:hover,
+.ps__rail-x:focus,
+.ps__rail-y:focus,
+.ps__rail-x.ps--clicking,
+.ps__rail-y.ps--clicking {
+    background-color: transparent;
+    opacity: 0.9;
+}
+
+.ps__rail-y:hover>.ps__thumb-y,
+.ps__rail-y:focus>.ps__thumb-y,
+.ps__rail-y.ps--clicking .ps__thumb-y {
+    background-color: #DAE2F3;
+    width: 0.25rem;
+}
+
+.ps__thumb-y {
+    background-color: #DAE2F3;
+    width: 0.25rem;
+}
+
+.total-average {
+    position: relative;
+    height: 18.75rem;
+}
+
+.widget-chat {
+    position: relative;
+    height: 15.625rem;
+}
+
+.widget-todo {
+    position: relative;
+    height: 13.125rem;
+}
+
+.widget-team {
+    position: relative;
+    height: 17.8125rem;
+}
+
+.widget-timeline {
+    position: relative;
+}
+
+.widget-comments {
+    position: relative;
+    height: 25rem;
+}
+
+.sidebar-right-inner {
+    position: relative;
+    height: 100%;
+}
+
+.widget-team {
+    .ps .ps__rail-x:hover,
+    .ps .ps__rail-y:hover,
+    .ps .ps__rail-x:focus,
+    .ps .ps__rail-y:focus,
+    .ps .ps__rail-x.ps--clicking,
+    .ps .ps__rail-y.ps--clicking {
+        background-color: transparent!important;
+        opacity: 0.9;
+    }
+}

public/scss/components/uc/_uc-blockui.scss

@@ -0,0 +1,17 @@
+.blockUI.blockMsg.blockPage {
+    border: 0 !important;
+}
+
+#loginForm {
+    cursor: auto;
+}
+
+.blockMsg {
+    border: 0rem;
+    width: 20%!important;
+    h1{
+        font-size: 1rem;
+        padding: 0.5rem 0;
+        margin-bottom: 0;
+    }
+}

public/scss/components/uc/_uc-bootstrap-select.scss

@@ -0,0 +1,48 @@
+.bootstrap-select{
+    margin-bottom: 0;
+	&.solid{
+		.btn{
+			border: 0!important;
+		}
+	}
+   .btn {
+		border: 1px solid var(--border) !important;
+		background-color: transparent !important;
+		font-weight:400;
+		color: $body-color !important;
+       &:active,
+       &:focus,
+       &:hover {
+			outline: none !important;
+			outline-offset: 0;
+       }
+   }
+    .dropdown-menu{
+		border-color: $border !important;
+		box-shadow:$shadow;
+		
+		.dropdown-item{
+			padding: var(--dz-list-space-y) var(--dz-list-space-x);
+			font-size: var(--dz-list-size);
+		}
+	}
+	&.dashboard-select{
+		width: auto!important;
+		.dropdown-toggle{
+			background-color: var(--rgba-primary-1)!important;
+			color: var(--primary)!important;
+			border: 0 !important;
+			&:after {
+				margin-#{$dlab-pos-left}: .5rem;
+			}
+		}
+	}
+}
+.input-group > .bootstrap-select:not(:first-child) .dropdown-toggle{
+    border-bottom-#{$dlab-pos-left}-radius: 0;
+    border-bottom-#{$dlab-pos-left}-radius: 0;
+}
+.input-group > .bootstrap-select:not(:last-child) .dropdown-toggle{
+    border-bottom-#{$dlab-pos-right}-radius: 0;
+    border-bottom-#{$dlab-pos-right}-radius: 0;
+}

public/scss/components/uc/_uc-calendar.scss

@@ -0,0 +1,159 @@
+.fc-h-event,.fc-v-event{
+	background:var(--primary);
+	border-radius: .42rem;
+}
+.fc-h-event .fc-event-title{
+	color:$white;
+}
+.fc-theme-standard td, .fc-theme-standard th{
+	border-color: var(--border);
+	
+}
+.fc-unthemed .fc-h-event, .fc-unthemed .fc-event-dot {
+    padding: 0;
+    border-radius: .42rem;
+}
+.fc-theme-standard th{
+	padding: .75rem .5rem;
+    font-size: 1rem;
+    font-weight: 500;
+	color: #b5b5c3;
+	@include respond ('phone'){
+		font-size:14px;
+		font-weight:400;
+		padding:3px 0px;
+	}
+}
+.fc-theme-standard .fc-scrollgrid.fc-scrollgrid-liquid,.fc-scrollgrid ,table{
+	border-color: var(--border);
+}
+
+.fc-daygrid-dot-event{
+	background: #fff;
+    border: 1px solid var(--border);
+    -webkit-box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1);
+    box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1);
+	@at-root [data-theme-version="dark"] & {
+		background: $d-bg;
+	}
+	.fc-daygrid-event-dot{
+		border-color:var(--primary);
+	}
+}
+.fc-daygrid-dot-event .fc-event-title{
+	font-weight:500;
+}
+.fc-event.bg-primary
+,.fc-event.bg-success
+,.fc-event.bg-warning
+,.fc-event.bg-secondary
+,.fc-event.bg-dark
+,.fc-event.bg-info{
+	color:$white!important;
+	border-radius: 8px;
+	.fc-daygrid-event-dot{
+		border-color:$white;
+	}
+}
+
+.fc .fc-scroller-liquid-absolute,.fc-scroller{
+	position:relative;
+	overflow: visible!important;
+}
+
+.fc .fc-button-group{
+	&>.fc-button{
+		color: #b5b5c3;
+		background: 0 0;
+		border: 1px solid #ebedf3;
+		text-shadow: none!important;
+		-webkit-box-shadow: none!important;
+		box-shadow: none!important;
+		&:focus,&:active,&:hover,&.fc-button-active{
+			background:var(--primary);
+			color:$white;
+			border-color:var(--primary);
+		}
+	}
+}
+.fc-button.fc-button-primary.fc-today-button{
+	background:var(--primary);
+	color:$white;
+	border: 0;
+    opacity: 1;
+}
+.fc-unthemed .fc-toolbar .fc-button.fc-button-active, .fc-unthemed .fc-toolbar .fc-button:active, .fc-unthemed .fc-toolbar .fc-button:focus{
+	background: var(--primary);
+    color: #fff;
+    border: 1px solid var(--primary);
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    text-shadow: none;
+}
+.fc .fc-toolbar-title {
+    font-size: 20px;
+    margin: 0;
+}
+
+.external-event{
+	padding: 8px 10px;
+	display:flex;
+	align-items:center;
+    border-radius: 5px;
+	&:hover{
+		&:before{
+			background:$white!important;
+		}
+	}
+}
+.fc-event{
+	overflow:hidden;
+}
+
+.fc .fc-view-harness{
+	height: 800px!important;
+	overflow-y: auto;
+}
+.fc .fc-toolbar.fc-header-toolbar{
+	@include respond ('phone'){
+		display:block;
+		.fc-toolbar-chunk{
+			display:flex;
+			justify-content: center;
+			&:first-child{
+				justify-content:space-between;
+			}
+		}
+		.fc-toolbar-title{
+			margin-bottom: 8px;
+		}
+	}
+}
+
+#external-events{
+	.external-event{
+		text-align: #{$dlab-pos-left};
+		font-size: 16px;
+	}
+}
+
+.fc.app-fullcalendar{
+	@include respond ('phone'){
+		.fc-timegrid-slot-label{
+			width:40px!important;
+			font-size: 10px;
+		}
+		.fc-event, .external-event{
+			font-size: 10px;
+			margin:0;
+			padding: 2px 0;
+			text-align: center;
+			line-height: 1.3;
+		}
+		.fc-col-header-cell-cushion {
+			display: inline-block;
+			padding: 2px 4px;
+			font-size: 10px;
+		}
+	}
+}

public/scss/components/uc/_uc-ckeditor.scss

@@ -0,0 +1,129 @@
+// Ckeditor
+.ck.ck-editor{
+	.ck.ck-button{
+		padding: 8px 12px;
+		background-color: var(--card);
+		color: var(--text-gray);
+		font-weight: 700;
+		border-radius: 4px;	
+		cursor: pointer;
+		.ck-button__label{
+			line-height: 1.2;
+		}	
+		@include respond('laptop'){
+			padding: 6px 8px;
+			.ck-icon{
+				height: 16px;
+				width: 16px;
+			}
+			.ck-dropdown__arrow{
+				height: 10px;
+				width: 10px;
+			}
+		}
+	}
+	.ck.ck-toolbar{
+		background-color: var(--light);
+		border: 0;
+		padding: 5px 10px;
+		.ck.ck-button:not(.ck-on){
+			&:hover{
+				background-color: var(--rgba-primary-1);
+				span:not(.ck-tooltip__text){
+					color: var(--primary);
+				}
+				svg{
+					color: var(--primary);
+				}
+			}
+		}
+	}
+	.ck.ck-toolbar__separator{
+		display: none !important;
+	}
+	.ck-content{
+		background-color: #f7f7f7;
+		border-width: 1px 0 0;
+		border-color: #e7e5ef;
+	}
+	.ck-reset.ck-list {
+		.ck-list__item{
+			.ck.ck-button{
+				border-radius: 0;
+				
+			}
+			.ck-button.ck-on {
+				background: $primary;
+				
+			}
+		}
+	}
+}
+.ck.ck-button.ck-on:not(.ck-disabled):hover, a.ck.ck-button.ck-on:not(.ck-disabled):hover{
+	background-color: var(--card)!important;
+	.ck-button__label{
+		color: var(--text-dark);
+	}
+}
+.ck.ck-toolbar > .ck.ck-toolbar__grouped-dropdown > .ck.ck-button.ck-dropdown__button {
+  	padding-#{$dlab-pos-left}: 12px!important;
+  	@include respond('laptop'){
+		padding-#{$dlab-pos-left}: 8px!important;
+  	}
+}
+.ck-editor__editable{
+	background :$body-bg !important;
+	@at-root [data-theme-version="dark"] & {
+		background-color:$d-bg!important;
+	}	
+}
+.ck.ck-content.ck-editor__editable.ck-rounded-corners.ck-editor__editable_inline.ck-blurred {
+    border-color: $border-color;
+	padding: 0.865rem var(--ck-spacing-standard);
+}
+.ck.ck-toolbar .ck-toolbar__items .ck.ck-toolbar__separator {
+    background: $border-color;
+}
+.ck.ck-content.ck-editor__editable.ck-rounded-corners.ck-editor__editable_inline.ck-blurred {
+	min-height: 12.375rem;
+	background: $body-bg ;
+	@include respond('phone'){
+		min-height: 8rem;
+	}
+	@at-root [data-theme-version="dark"] & {
+		border-color: $d-border;
+		background: $d-bg;
+	}
+}
+button.ck.ck-button.ck-off:hover {
+    background-color: $border-color;
+}
+.ck.ck-editor__editable:not(.ck-editor__nested-editable).ck-focused{
+	min-height: 12.375rem;
+	border-color: var(--rgba-primary-4)!important;
+	@include respond('phone'){
+		min-height: 8rem;
+	}
+}
+
+.ck.ck-button.ck-on:not(.ck-disabled):hover, 
+a.ck.ck-button.ck-on:not(.ck-disabled):hover {
+    background-color: $primary ;
+}
+.ck.ck-reset.ck-dropdown__panel.ck-dropdown__panel_se.ck-dropdown__panel-visible {
+    box-shadow: none;
+    border: 0;
+}
+.ck.ck-dropdown .ck-dropdown__panel .ck-list .ck-list__item:first-child .ck-button {
+    border-bottom-#{$dlab-pos-left}-radius: 0 !important;
+	border-bottom-#{$dlab-pos-right}-radius: $radius !important;
+}
+.ck.ck-dropdown .ck-dropdown__panel .ck-list .ck-list__item:last-child .ck-button {
+    border-bottom-#{$dlab-pos-left}-radius: $radius !important;
+	border-bottom-#{$dlab-pos-right}-radius: $radius !important;
+}
+
+.ck-rounded-corners .ck.ck-editor__top .ck-sticky-panel .ck-toolbar, .ck.ck-editor__top .ck-sticky-panel .ck-toolbar.ck-rounded-corners,
+.ck-rounded-corners .ck.ck-editor__main > .ck-editor__editable, .ck.ck-editor__main > .ck-editor__editable.ck-rounded-corners{
+	--ck-border-radius : #{$radius};
+}

public/scss/components/uc/_uc-clipboard.scss

@@ -0,0 +1,10 @@
+
+
+.clipboard-btn {
+    transition: all .1s ease-in-out;
+
+    &:hover {
+        background-color: var(--primary);
+        color: $white;
+    }
+}

public/scss/components/uc/_uc-counterup.scss

@@ -0,0 +1,9 @@
+.counter-wrapper {
+    .counter {
+        font-size: 2rem;
+    }
+
+    span {
+        font-size: 1rem;
+    }
+}

public/scss/components/uc/_uc-horizontal-timeline.scss

@@ -0,0 +1,250 @@
+.cd-h-timeline {
+    opacity: 0;
+    transition: opacity 0.2s;
+  }
+
+  .cd-h-timeline--loaded { // show the timeline after dates position has been set (using JavaScript)
+    opacity: 1;
+  }
+
+  .cd-h-timeline__container {
+    position: relative;
+    height: 6.25rem;
+    max-width: 50rem;
+  }
+
+  .cd-h-timeline__dates {
+    position: relative;
+    height: 100%;
+    margin: 0 2.5rem;
+    overflow: hidden;
+
+    &::after, &::before { // these are used to create a shadow effect at the sides of the timeline
+      content: '';
+      position: absolute;
+      z-index: 2;
+      top: 0;
+      height: 100%;
+      width: 1.25rem;
+    }
+
+    &::before {
+      #{$dlab-pos-left}: 0;
+      background: var(--primary);
+    }
+
+    &::after {
+      #{$dlab-pos-right}: 0;
+      background: var(--primary);
+    }
+  }
+
+  .cd-h-timeline__line { // grey line
+    position: absolute;
+    z-index: 1;
+    #{$dlab-pos-left}: 0;
+    top: 3.0625rem;
+    height: 0.125rem; // width will be set using JavaScript
+    background-color: var(--primary);
+    transition: transform 0.4s;
+  }
+
+  .cd-h-timeline__filling-line { // green filling line
+    position: absolute;
+    z-index: 1;
+    #{$dlab-pos-left}: 0;
+    top: 0;
+    height: 100%;
+    width: 100%;
+    background-color: $success;
+    transform: scaleX(0);
+    transform-origin: left center;
+    transition: transform 0.3s;
+  }
+
+  .cd-h-timeline__date {
+    position: absolute;
+    bottom: 0; // left position will be set using JavaScript
+    z-index: 2;
+    text-align: center;
+    font-size: 0.8em;
+    padding-bottom: var(--space-sm);
+    color: var(--cd-color-1);
+    user-select: none; // improve swipe
+    text-decoration: none;
+
+    &::after { // this is used to create the event spot
+      content: '';
+      position: absolute;
+      #{$dlab-pos-left}: 50%;
+      transform: translateX(-50%);
+      bottom: -0.3125rem;
+      height: 0.75rem;
+      width: 0.75rem;
+      border-radius: 50%;
+      border-width: 0.125rem;
+      border-style: solid;
+      border-color: var(--rgba-primary-6);
+      background-color: var(--primary);
+      transition: background-color 0.3s, border-color .3s;
+    }
+
+    &:hover::after {
+      background-color: $success;
+      border-color: $success;
+    }
+  }
+
+
+
+  .cd-h-timeline__date--selected {
+    pointer-events: none;
+
+    &::after {
+      background-color: $success;
+      border-color: $success;
+    }
+  }
+
+  .cd-h-timeline__date--older-event::after {
+    border-color: $success;
+  }
+
+  .cd-h-timeline__navigation { // arrows to navigate the timeline
+    position: absolute;
+    z-index: 1;
+    top: 50%;
+    transform: translateY(-50%);
+    height: 2.125rem;
+    width: 2.125rem;
+    border-radius: 50%;
+    border-width: 0.125rem;
+    border-style: solid;
+    border-color: var(--rgba-primary-6);
+    transition: border-color 0.3s;
+    
+    &::after { // arrow icon
+      content: '';
+      position: absolute;
+      height: 1rem;
+      width: 1rem;
+      top: 50%;
+      #{$dlab-pos-left}: 50%;
+      transform: translateX(-50%) translateY(-50%);
+      background: url(../images/svg/cd-arrow.svg) no-repeat 0 0;
+    }
+
+    &:hover {
+      border-color: $success;
+    }
+  }
+
+  .cd-h-timeline__navigation--prev {
+    #{$dlab-pos-left}: 0;
+    transform: translateY(-50%) rotate(180deg);
+  }
+
+  .cd-h-timeline__navigation--next {
+    #{$dlab-pos-right}: 0;
+  }
+
+  .cd-h-timeline__navigation--inactive {
+    cursor: not-allowed;
+
+    &::after {
+      background-position: 0 -1rem;
+    }
+
+    &:hover {
+      border-color: var(--rgba-primary-6);
+    }
+  }
+
+  .cd-h-timeline__events { // container of events info
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+    transition: height .4s;
+  }
+
+  .cd-h-timeline__event { // single event info
+    position: absolute;
+    z-index: 1;
+    width: 100%;
+    #{$dlab-pos-left}: 0;
+    top: 0;
+    transform: translateX(-100%);
+    padding: 0.0625rem 5%;
+    opacity: 0;
+    animation-duration: 0.4s;
+    animation-timing-function: ease-in-out;
+  }
+
+  .cd-h-timeline__event--selected { // selected event info
+    position: relative;
+    z-index: 2;
+    opacity: 1;
+    transform: translateX(0);
+  }
+
+  .cd-h-timeline__event--enter-right, 
+  .cd-h-timeline__event--leave-right { // animate event info
+    animation-name: cd-enter-right;
+  }
+
+  .cd-h-timeline__event--enter-left,  
+  .cd-h-timeline__event--leave-left { // animate event info
+    animation-name: cd-enter-left;
+  }
+
+  .cd-h-timeline__event--leave-right, 
+  .cd-h-timeline__event--leave-left {
+    animation-direction: reverse;
+  }
+
+  .cd-h-timeline__event-content {
+    max-width: 50rem;
+  }
+
+  .cd-h-timeline__event-title {
+    color: var(--cd-color-1);
+    font-family: var(--font-secondary);
+    font-weight: 700;
+    font-size: var(--text-xxxl);
+  }
+
+  .cd-h-timeline__event-date {
+    display: block;
+    font-style: italic;
+    margin: var(--space-xs) auto;
+
+    &::before {
+      content: '- ';
+    }
+  }
+
+  @keyframes cd-enter-right {
+    0% {
+      opacity: 0;
+      transform: translateX(100%);
+    }
+  
+    100% {
+      opacity: 1;
+      transform: translateX(0%);
+    }
+  }
+  
+  @keyframes cd-enter-left {
+    0% {
+      opacity: 0;
+      transform: translateX(-100%);
+    }
+  
+    100% {
+      opacity: 1;
+      transform: translateX(0%);
+    }
+  }
+
+

public/scss/components/uc/_uc-lightgallery.scss

@@ -0,0 +1,46 @@
+/* Light Gallery */
+.lg-actions .lg-next, 
+.lg-actions .lg-prev, 
+.lg-sub-html, 
+.lg-toolbar{
+    background-color: rgba(30, 30, 30, .6);
+}
+.lg-outer{
+	.lg-toogle-thumb, 
+	.lg-thumb-outer,
+	.lg-img-wrap, 
+	.lg-item{
+		background-color: transparent;
+	}
+}
+.lg-thumb-outer.lg-grab,
+.lg-toogle-thumb.lg-icon{
+	background-color: rgba(30, 30, 30, .6);
+}
+.lg-backdrop {
+    background-color: rgba(30, 30, 30, 0.9);
+}
+.lg-outer .lg-toogle-thumb, 
+.lg-actions .lg-next, 
+.lg-actions .lg-prev, 
+.lg-toolbar .lg-icon,
+#lg-counter{
+    color: $white;
+}
+.lg-outer{
+	.lg-thumb-item{
+		&.active,
+		&:hover{
+			border-color: var(--primary);			
+		}
+	}
+}
+.lightimg{
+	cursor: pointer;
+}
+
+[dir='rtl']{
+	.lg-outer.lg-visible{
+		direction: ltr;
+	}
+}

public/scss/components/uc/_uc-nestable.scss

@@ -0,0 +1,31 @@
+
+
+.nestable-cart {
+    overflow: hidden;
+}
+.dd-handle {
+    color: $white;
+    background: var(--primary);
+    border-radius: 0.3125rem;
+	padding: 0.5rem 1rem;
+	height:auto;
+    border: 1px solid $border;
+	cursor:all-scroll;
+}
+.dd-handle:hover {
+    color: $white;
+    background: var(--primary);
+}
+
+.dd3-content:hover {
+    color: $white;
+    background: var(--primary);
+}
+.dd3-content {
+    color: $white;
+}
+.dd-item>button{
+	line-height:28px;
+	color:$white;
+    float: #{$dlab-pos-left};
+}

public/scss/components/uc/_uc-noui-slider.scss

@@ -0,0 +1,110 @@
+
+.noUi-target {
+    border-color: transparent; 
+    border-radius: 0;
+}
+
+.noUi-connect {
+    background-color: var(--primary);
+
+    &s {
+        background-color: $grey;
+    }
+
+    &.c-1-color {
+        background-color: $success;
+    }
+
+    &.c-2-color {
+        background-color: $info;
+    }
+
+    &.c-3-color {
+        background-color: var(--primary);
+    }
+
+    &.c-4-color {
+        background-color: $warning;
+    }
+}
+
+.noUi-vertical {
+    width: 0.375rem;
+}
+
+.noUi-horizontal {
+    height: 0.375rem;
+    margin-bottom: 10px;
+}
+
+.noUi-horizontal .noUi-handle, .noUi-vertical .noUi-handle {
+    height: 12px;
+    width: 12px;
+    border-radius: 50px;
+    box-shadow: none;
+    border: none;
+    background-color: var(--primary);
+
+    &::after, &::before {
+        display: none;
+    }
+}
+.noUi-vertical .noUi-handle {
+    right: -4px;
+	bottom: -11px;
+
+}
+.noUi-horizontal .noUi-handle {
+    top: -4px;
+}
+html:not([dir=rtl]) .noUi-horizontal .noUi-handle {
+    #{$dlab-pos-right}: -6px;
+}
+#slider-toggle {
+	height: 50px;
+}
+#slider-toggle.off .noUi-handle {
+	border-color: var(--primary);
+}
+
+
+.colorpicker-slider {
+    .sliders.noUi-target {
+
+
+        &#red, &#green, &#blue {
+            margin: 10px;
+            display: inline-block;
+            height: 200px;
+        }
+
+        &#red .noUi-connect {
+            background: #c0392b;
+        }
+
+        &#green .noUi-connect {
+            background: #27ae60;
+        }
+
+        &#blue .noUi-connect {
+            background: #2980b9;
+        }
+    }
+
+
+    #result {
+        margin: 60px 26px;
+        height: 100px;
+        width: 100px;
+        display: inline-block;
+        vertical-align: top;
+        color: rgb(127, 127, 127);
+        background: rgb(127, 127, 127);
+        border: 1px solid #fff;
+        box-shadow: 0 0 10px;
+    }
+}
+
+.slider-vertical {
+    height: 18rem;
+}

public/scss/components/uc/_uc-pignose-calender.scss

@@ -0,0 +1,32 @@
+.pignose-calendar {
+    box-shadow: none;
+    width: 100%;
+    max-width: none;
+    border-color: var(--primary);
+
+    .pignose-calendar-top-date {
+        background-color: var(--primary);
+
+        .pignose-calendar-top-month {
+            color: $white;
+        }
+    }
+}
+
+.pignose-calendar.pignose-calendar-blue .pignose-calendar-body .pignose-calendar-row .pignose-calendar-unit.pignose-calendar-unit-active a {
+    background-color: var(--primary);
+    box-shadow: none;
+}
+
+.pignose-calendar .pignose-calendar-top {
+    box-shadow: none;
+    border-bottom: 0;
+}
+
+.pignose-calendar.pignose-calendar-blue {
+    background-color: rgba(0, 0, 0, 0.15);
+}
+
+.pignose-calendar .pignose-calendar-unit {
+    height: 4.8em;
+}

public/scss/components/uc/_uc-tagsinput.scss

@@ -0,0 +1,30 @@
+
+
+.bootstrap-tagsinput {
+    flex: 1;
+    padding: 0;
+    padding-#{$dlab-pos-left}: .5rem;
+    border-radius: 0;
+    border-color: $border;
+    background-color: $white;
+    width: 100%;
+
+    .tag {
+        font-size: 0.875rem;
+        background-color: var(--primary);
+        border-radius: 0;
+        align-items: center;
+        border: 0.0625rem solid $border;
+    }
+
+    input[type="text"] {
+        flex: 1;
+        height: 2.1rem;
+        border-radius: 0;
+        border-color: $border;
+    }
+
+    label{
+        margin-bottom: .5rem;
+    }
+}

public/scss/components/uc/_uc-ticker.scss

@@ -0,0 +1,30 @@
+
+
+.bootstrap-tagsinput {
+    flex: 1;
+    padding: 0;
+    padding-#{$dlab-pos-left}: .5rem;
+    border-radius: 0;
+    border-color: $border;
+    background-color: $white;
+    width: 100%;
+
+    .tag {
+        font-size: 0.875rem;
+        background-color: var(--primary);
+        border-radius: 0;
+        align-items: center;
+        border: 0.0625rem solid $border;
+    }
+
+    input[type="text"] {
+        flex: 1;
+        height: 2.1rem;
+        border-radius: 0;
+        border-color: $border;
+    }
+
+    label{
+        margin-bottom: .5rem;
+    }
+}

public/scss/components/uc/_uc-toastr.scss

@@ -0,0 +1,63 @@
+.toast {
+    &-success {
+        background-color: var(--primary);
+    }
+
+    &-info {
+        background-color: $info;
+    }
+
+    &-warning {
+        background-color: $warning;
+    }
+
+    &-error {
+        background-color: $danger;
+    }
+}
+
+#toast-container {
+
+    &>div {
+        box-shadow: none;
+        border-radius: 0;
+        width: auto;
+        max-width: 15.625rem;
+        opacity: 1;
+        border-radius: $radius;
+
+        @at-root [direction="rtl"] & {
+            padding: 0.9375rem 3.125rem 0.9375rem 0.9375rem;
+            background-position: calc(100% - 0.9375rem);
+        }
+
+        &:hover {
+            box-shadow: none;
+        }
+    }
+
+    .toast-title {
+        margin-bottom: 0.3125rem;
+        font-weight: 600;
+    }
+
+    .toast-message {
+        font-size: 0.75rem;
+    }
+
+    .toast-close-button {
+        opacity: 1;
+        font-size: 1.25rem;
+        font-weight: normal;
+        text-shadow: none;
+    }
+
+
+}
+
+[direction="rtl"] {
+    .toast-top-right.demo_rtl_class {
+        #{$dlab-pos-left}: 0.75rem;
+        #{$dlab-pos-right}: auto;
+    }
+}

public/scss/components/uc/_uc-typeahead.scss

@@ -0,0 +1,25 @@
+
+
+.twitter-typeahead {
+    width: 100%;
+
+    .tt-dataset.tt-dataset-states {
+        border: 1px solid $border;
+    }
+
+    .tt-menu {
+        width: 100%;
+        background-color: $white;
+
+        .tt-suggestion {
+            padding: 0.625rem;
+            cursor: pointer;
+
+            &:hover {
+                background-color: var(--primary);
+                color: $white;
+            }
+        }
+    }
+}
+

public/scss/components/uc/_uc-weather.scss

@@ -0,0 +1,33 @@
+ // Variable.scss
+
+.weather-one {
+    i {
+        font-size: 8rem;
+        position : relative;
+        top      : .5rem;
+    }
+
+    h2 {
+        display  : inline-block;
+        float    : right;
+        font-size: 4.8rem;
+    }
+
+    .city {
+        position  : relative;
+        text-align: #{$dlab-pos-right};
+        top       : -2.5rem;
+    }
+
+    .currently {
+        font-size  : 1.6rem;
+        font-weight: 400;
+        position   : relative;
+        top        : 2.5rem;
+    }
+
+    .celcious {
+        text-align: #{$dlab-pos-right};
+        font-size : 2rem;
+    }
+}

public/scss/components/ui/_interfaces.scss

@@ -0,0 +1,26 @@
+@import "./ui-accordion";
+@import "./ui-alert";
+@import "./ui-badge";
+@import "./ui-breadcrumb";
+@import "./ui-button";
+@import "./ui-card";
+@import "./ui-carousel";
+@import "./ui-dropdown";
+@import "./ui-grid";
+@import "./ui-label";
+@import "./ui-list-group";
+@import "./ui-media";
+@import "./ui-menu";
+@import "./ui-modal";
+@import "./ui-pagination";
+@import "./ui-popover";
+@import "./ui-preloader";
+@import "./ui-progressbar";
+@import "./ui-ribbon";
+@import "./ui-scrollbar";
+@import "./ui-step";
+@import "./ui-tab";
+@import "./ui-tooltip";
+@import "./ui-timeline";
+
+

public/scss/components/ui/_ui-accordion.scss

@@ -0,0 +1,470 @@
+.accordion-button:not(.collapsed) {
+    color: inherit;
+    background: var(--card);
+	
+}
+.accordion-button.collapsed {
+    border-bottom-width: 1px;
+}
+
+.accordion {
+	// accordion primary
+	&-primary{
+		.accordion-button {
+			&.collapsed{
+				background: var(--rgba-primary-1);
+				border-color:var(--rgba-primary-1);
+				color: var(--primary);
+				box-shadow:none;
+			}
+			background:var(--primary);
+			border-color:var(--primary);
+			color: $white;
+			box-shadow: var(--rgba-primary-2) 0px 8px 24px;
+			
+		}
+	}
+	&-primary-solid{
+		.accordion-button {
+			&.collapsed{
+				background:var(--rgba-primary-1);
+				border-color:var(--rgba-primary-1);
+				color: var(--primary);
+				box-shadow:none;
+				border-bottom-#{$dlab-pos-left}-radius:$radius;
+				border-bottom-#{$dlab-pos-right}-radius:$radius;
+			}
+			background:var(--primary);
+			border-color:var(--primary);
+			color: $white;
+			box-shadow:0 -0.625rem 1.25rem 0 var(--rgba-primary-1);
+			border-bottom-#{$dlab-pos-left}-radius:0;
+			border-bottom-#{$dlab-pos-right}-radius:0;
+		}
+		.accordion-body {
+            border: 0.125rem solid var(--primary);
+            border-top: none;
+			box-shadow:0 0.9375rem 1.25rem 0 var(--rgba-primary-1);
+			border-bottom-#{$dlab-pos-left}-radius:$radius;
+			border-bottom-#{$dlab-pos-right}-radius:$radius;
+		}
+	}
+
+	&-danger{
+		.accordion-button {
+			&.collapsed{
+				background: $danger-light;
+				border-color: $danger-light;
+				color: #211c37;
+				box-shadow:none;
+			}
+			background:$danger;
+			border-color:$danger;
+			color: $white;
+			box-shadow:0 0.9375rem 1.25rem 0 rgba($danger, 0.15);
+		}
+	}
+	&-danger-solid{
+		.accordion-button {
+			&.collapsed{
+				background: $danger-opacity;
+				border-color: $danger-opacity;
+				color: var(--text-dark);
+				box-shadow:none;
+				border-bottom-#{$dlab-pos-left}-radius:$radius;
+				border-bottom-#{$dlab-pos-right}-radius:$radius;
+			}
+			background:$danger;
+			border-color:$danger;
+			color: $white;
+			box-shadow:0 -0.625rem 1.25rem 0 rgba($danger, 0.15);
+			border-bottom-#{$dlab-pos-left}-radius:0;
+			border-bottom-#{$dlab-pos-right}-radius:0;
+		}
+		.accordion-body {
+            border: 0.125rem solid $danger;
+            border-top: none;
+			box-shadow:0 0.2rem 1rem 0 rgba($danger, 0.15);
+			border-bottom-#{$dlab-pos-left}-radius:$radius;
+			border-bottom-#{$dlab-pos-right}-radius:$radius;
+		}
+	}
+
+
+    //a single accrodion
+    &-item {
+        margin-bottom: 1.25rem;
+        border: 0;
+        background-color: transparent;
+        &:first-of-type {
+            .accordion-button {
+                border-top-#{$dlab-pos-left}-radius : $radius;
+                border-top-#{$dlab-pos-right}-radius: $radius;
+            }
+        }
+        &:last-of-type {
+            .accordion-button.collapsed {
+                border-bottom-#{$dlab-pos-left}-radius : $radius;
+                border-bottom-#{$dlab-pos-right}-radius: $radius;
+            }
+        }
+    }
+
+    //accrodion header styles
+    &-button {
+        padding:.75rem 1.75rem;
+        border: 0.0625rem solid var(--border);
+        cursor: pointer;
+        position: relative;
+        color: var(--text-dark);
+        font-weight: 400;
+		border-radius:$radius;
+		--bs-accordion-btn-bg : var(--card);
+		@include transitionMedium;
+		&:focus{
+			z-index: 2;
+		}
+        @include respond('laptop'){
+			padding:.75rem 1.75rem;
+		}
+        
+
+        //set the indicator font family
+        &-indicator {
+            &.indicator_bordered {
+                display: inline-block;
+                width: 1.5625rem;
+                text-align: center;
+                height: 1.5625rem;
+                border: 0.0625rem solid var(--border);
+                border-radius: 50%;
+                line-height: 1.5625rem;
+            }
+        }
+
+        &:not(.collapsed){
+			&::after {
+				content: "\e622";
+				background-image:none;
+				transform: rotate(0) translateY(-50%);
+				
+			}
+
+			//icon style
+			&.style_two {
+				&::after {
+					content: "\e648";
+				}
+			}
+        }
+		&::after {
+			content: "\e61a";
+			font-family: 'themify';
+			position: absolute;
+			#{$dlab-pos-right}: 1.5625rem;
+			top: 50%;
+			transform: translateY(-50%);
+			background-image: none !important;
+			width: auto;
+			height: auto;
+		}
+        &.collapsed {
+			
+
+			//icon style
+			&.style_two {
+				&::after {
+					content: "\e64b";
+				}
+			}
+        }
+    }
+
+    //accordion body styles
+    &-body {
+            padding: 0.875rem 1.25rem;
+			    
+    }
+	&-collapse{
+		border: 0;
+	}
+    //accrodion with border
+    &-bordered {
+        .accordion-body {
+            border: 0.0625rem solid var(--border);
+            border-top: none;
+			border-bottom-#{$dlab-pos-left}-radius:$radius;
+			border-bottom-#{$dlab-pos-right}-radius:$radius;
+        }
+		.accordion-button.collapsed{
+			border-radius:$radius;
+		}
+		.accordion-button{
+			border-bottom-#{$dlab-pos-left}-radius:0;
+			border-bottom-#{$dlab-pos-right}-radius:0;
+		}
+		
+    }
+
+    //accrodion without space
+    &-no-gutter {
+        .accordion-item {
+            margin-bottom: 0;
+
+            .accordion-button {
+                &.collapsed {
+                    border-bottom: none;
+                }
+            }
+
+            &:last-child {
+                .accordion-button {
+                    border-bottom: 0.0625rem solid var(--border);
+                }
+            }
+            
+        }
+    }
+
+    //not gutter and bordered
+    &-no-gutter.accordion-bordered {
+		
+        .accordion-item {
+            &:not(:last-child) {
+                .accordion-body {
+                    border-bottom: none;
+                }
+            }
+			.accordion-button{
+				box-shadow:none;
+			}
+        }
+    }
+
+    //indicator in left positon
+    &-left-indicator {
+        .accordion-button {
+			box-shadow:none;
+            &-text {
+                padding-#{$dlab-pos-left}: 2.5rem;
+            }
+
+
+            &:after {
+                #{$dlab-pos-left}: 1rem;
+				#{$dlab-pos-right}: auto;
+            }
+			.accordion-header-text{
+				padding-#{$dlab-pos-left}:2rem;
+			}
+        }
+    }
+	&-bordered{
+		 .accordion-button {
+			box-shadow:none;
+		 }
+	}
+
+    //with icon
+    &-with-icon {
+        .accordion-button {
+			box-shadow:none;
+            &-text {
+                padding-#{$dlab-pos-left}: 2.5rem;
+            }
+
+           .accordion-header-icon {
+                position: absolute;
+                #{$dlab-pos-right}: auto;
+                #{$dlab-pos-left}: 1.5625rem;
+                font-family: 'themify';
+                &::before {
+                    content: "\e645";
+                }
+            }
+			.accordion-header-text{
+				padding-#{$dlab-pos-left}:2rem;
+			}
+        }
+
+    }
+
+    //with header background
+    &-header-bg {
+        .accordion-header {
+			.accordion-button{
+				
+				background-color: var(--light);
+			}
+            
+            
+            &-primary {
+				.accordion-button{
+					background-color: var(--primary);
+					color: $white;
+					border-color:var(--primary);
+				}
+            }
+            
+            &-info {
+				.accordion-button{
+					background-color: $info;
+					color: $white;
+					border-color:$info;
+				}
+            }
+
+            &-success {
+				.accordion-button{
+					background-color: $success;
+					color: $white;
+					border-color:$success;
+				}
+            }
+        }
+    }
+
+    //with header background and no space
+    &-header-bg.accordion-no-gutter {
+        .accordion-button {
+            border-color: transparent;
+			border-radius: 0;
+			box-shadow:none;
+        }
+		.accordion-item{
+			&:first-child{
+				.accordion-button{
+					border-top-#{$dlab-pos-left}-radius:$radius;
+					border-top-#{$dlab-pos-right}-radius:$radius;
+				}
+			}
+			&:last-child{
+				.accordion-button{
+					border-bottom-#{$dlab-pos-left}-radius:$radius;
+					border-bottom-#{$dlab-pos-right}-radius:$radius;
+				}
+			}
+		}
+    }
+	&.accordion-no-gutter {
+        .accordion-button {
+            border-radius: 0;
+			box-shadow:none;
+        }
+		.accordion-button.collapsed {
+			border-radius: 0;
+		}
+		.accordion-body{
+			border-radius: 0;
+		}
+		.accordion-item{
+			&:first-child{
+				.accordion-button{
+					border-top-#{$dlab-pos-left}-radius:$radius;
+					border-top-#{$dlab-pos-right}-radius:$radius;
+				}
+			}
+			&:last-child{
+				.accordion-button.collapsed{
+					border-bottom-#{$dlab-pos-left}-radius:$radius;
+					border-bottom-#{$dlab-pos-right}-radius:$radius;
+				}
+				.accordion-body{
+					border-bottom-#{$dlab-pos-left}-radius:$radius;
+					border-bottom-#{$dlab-pos-right}-radius:$radius;
+				}
+			}
+		}
+    }
+    //with solid background
+    &-solid-bg {
+        .accordion-button {
+			box-shadow:none;
+            border-color: transparent;
+            background-color:var(--rgba-primary-1);
+			border-bottom-#{$dlab-pos-left}-radius:0;
+			border-bottom-#{$dlab-pos-right}-radius:0;
+			
+			&.collapsed{
+				border-radius:$radius;
+			}
+        }
+		
+        .accordion-body {
+            border-color: transparent;
+            background-color:var(--rgba-primary-1);
+			border-bottom-#{$dlab-pos-left}-radius:$radius;
+			border-bottom-#{$dlab-pos-right}-radius:$radius;
+        }
+    }
+
+    //active header styles
+    &-active-header {
+        .accordion-button {
+			box-shadow:none;
+            &:not(.collapsed) {
+                background-color: $info;
+                border-color: $info;
+                color: $white;
+            }
+        }
+    }
+
+    //shadow in header
+    &-header-shadow {
+        .accordion-button {
+            border: none;
+            box-shadow: 0 0 0.9375rem -0.1875rem rgba($color: $black, $alpha: .3);
+        }
+    }
+
+    //stylishly rounded borders
+    &-rounded-stylish {
+        .accordion-button {
+            border-top-#{$dlab-pos-left}-radius: 0.375rem;
+            border-top-#{$dlab-pos-right}-radius: 0.375rem;
+			box-shadow:none;
+        }
+
+        .accordion-body {
+            border-bottom-#{$dlab-pos-left}-radius: 0.375rem;
+            border-bottom-#{$dlab-pos-right}-radius: 0.375rem;
+        }
+    }
+
+    //smothly rounded accrodion header
+    &-rounded {
+        .accordion-button {
+            border-radius: 0.3125rem;
+        }
+    }
+
+    //accordion gradient
+    &-gradient {
+        .accordion-button {
+            color: $white;
+            background-image: linear-gradient(to right, rgba(186, 1, 181, 0.85) 0%,rgba(103, 25, 255, .85) 100%);
+            border-color: transparent;
+			border-bottom-#{$dlab-pos-left}-radius: 0;
+            border-bottom-#{$dlab-pos-right}-radius: 0;
+			box-shadow:none;
+			&.collapsed{
+				border-bottom-#{$dlab-pos-left}-radius: 0.375rem;
+				border-bottom-#{$dlab-pos-right}-radius:0.375rem;
+			}
+        }
+
+        .accordion-body {
+            color: $white;
+            background-image: linear-gradient(to right, rgba(186, 1, 181, 0.85) 0%,rgba(103, 25, 255, .85) 100%);
+            border-color: transparent;
+        }
+    }
+	&-body{
+		font-size: .85rem;
+	}	
+} 
+
+.accordion-button:focus{
+	border-color: var(--rgba-primary-3);
+}

public/scss/components/ui/_ui-alert.scss

@@ -0,0 +1,358 @@
+
+
+.alert{
+    border-radius: $radius;
+    padding: .75rem 0;
+    padding-#{$dlab-pos-left}: 1.2rem;
+    padding-#{$dlab-pos-right}: 2.5rem;
+	p{
+		line-height:1.5;
+	}
+}
+.alert-square{
+	border-radius:0!important;
+}
+
+.alert-rounded{
+    border-radius: 1.875rem;
+}
+
+// Basic Alert
+
+
+.alert-primary{
+    background: var(--rgba-primary-1);
+    border-color: var(--rgba-primary-1);
+    color: var(--primary);
+}
+
+.alert-secondary{
+    background: $secondary-opacity;
+    border-color: $secondary-opacity;
+    color: $secondary;
+	@at-root [data-theme-version="dark"] & {
+		color:$white;
+	}
+}
+
+
+.alert-success{
+    background: $success-opacity;
+    border-color: $success-opacity;
+    color: darken($success,25%);
+	@at-root [data-theme-version="dark"] & {
+        color: $success;
+	}
+}
+
+.alert-warning{
+    background: $warning-opacity;
+    border-color: $warning-opacity;
+    color: darken($warning,25%);
+}
+
+.alert-danger{
+    background: $danger-opacity;
+    border-color: $danger-opacity;
+    color: $danger;
+}
+
+.alert-info{
+    background: $info-opacity;
+    border-color: $info-opacity;
+    color: $info;
+}
+
+.alert-dark{
+    background: $dark-opacity;
+    border-color: $dark-opacity;
+    color: $dark;
+	@at-root [data-theme-version="dark"] & {
+		color:$white;
+	}
+}
+.alert-light{
+    background: $light;
+    border-color:  $light;
+    color: $dark;
+	@at-root [data-theme-version="dark"] & {
+        background: rgba($light, 0.3);	
+		border-color:	rgba($light, 0.3);	
+        color: $white;
+	}
+	
+}
+
+
+// Alert alt
+
+.alert-alt.alert-primary{
+    border-#{$dlab-pos-left}: 0.25rem solid var(--primary);
+}
+
+.alert-alt.alert-secondary{
+    border-#{$dlab-pos-left}: 0.25rem solid $secondary;
+}
+
+
+.alert-alt.alert-success{
+    border-#{$dlab-pos-left}: 0.25rem solid $success
+}
+
+.alert-alt.alert-warning{
+    border-#{$dlab-pos-left}: 0.25rem solid $warning;
+}
+
+.alert-alt.alert-danger{
+    border-#{$dlab-pos-left}: 0.25rem solid $danger;
+}
+
+.alert-alt.alert-info{
+    border-#{$dlab-pos-left}: 0.25rem solid $info;
+}
+
+.alert-alt.alert-dark{
+    border-#{$dlab-pos-left}: 0.25rem solid $dark;
+}
+.alert-alt.alert-light{
+    border-#{$dlab-pos-left}: 0.25rem solid darken($light,15%);
+}
+
+
+
+// Alert alt with solid color
+
+.alert-alt.alert-primary.solid{
+    border-#{$dlab-pos-left}: 0.25rem solid var(--primary-dark)!important;
+}
+
+.alert-alt.alert-secondary.solid{
+    border-#{$dlab-pos-left}: 0.25rem solid darken($secondary,25%)!important;
+}
+
+
+.alert-alt.alert-success.solid{
+    border-#{$dlab-pos-left}: 0.25rem solid darken($success, 25%)!important;
+}
+
+.alert-alt.alert-warning.solid{
+    border-#{$dlab-pos-left}: 0.25rem solid darken($warning,25%)!important;
+}
+
+.alert-alt.alert-danger.solid{
+    border-#{$dlab-pos-left}: 0.25rem solid darken($danger,25%)!important;
+}
+
+.alert-alt.alert-info.solid{
+    border-#{$dlab-pos-left}: 0.25rem solid darken($info,25%)!important;
+}
+
+.alert-alt.alert-dark.solid{
+    border-#{$dlab-pos-left}: 0.25rem solid darken($dark,25%)!important;
+}
+.alert-alt.alert-light.solid{
+    border-#{$dlab-pos-left}: 0.25rem solid darken($light,25%)!important;
+}
+
+
+//Alert dismissable with solid color
+.alert-dismissible.solid:not(.alert-light),
+.alert-social{
+    .btn-close{
+        color: $white;
+        opacity: 1;
+        // &:hover{
+        //     color: $white;
+        // }
+    }
+}
+.alert-dismissible .btn-close{
+    padding: .85rem 1rem;
+}
+
+.alert-icon{
+    height: 1.25rem;
+    width: 1.25rem;
+    margin-#{$dlab-pos-right}: .25rem;
+}
+
+
+
+// Alert Solid 
+.alert.alert-primary.solid{
+    background: var(--primary);
+    color: $white;
+    border-color: var(--primary);
+}
+
+.alert.alert-secondary.solid{
+    background: $secondary;
+    color: $white;
+    border-color: $secondary;
+}
+.alert.alert-success.solid{
+    background: $success;
+    color: $white;
+    border-color: $success;
+}
+
+.alert.alert-warning.solid{
+    background: $warning;
+    color: $white;
+    border-color: $warning;
+}
+
+.alert.alert-danger.solid{
+    background: $danger;
+    color: $white;
+    border-color: $danger;
+}
+
+.alert.alert-info.solid{
+    background: $info;
+    color: $white;
+    border-color: $info;
+}
+
+
+.alert.alert-dark.solid{
+    background: $dark;
+    color: $white;
+    border-color: $dark;
+}
+
+
+.alert.alert-light.solid{
+    background: $light;
+    color: $dark;
+    border-color: $light;
+}
+
+
+
+
+// Alert right icon
+
+.alert-right-icon{
+    &>span i{
+        font-size: 1.125rem;
+        margin-#{$dlab-pos-right}: 0.3125rem;
+    }
+    .close{
+        i{
+            font-size: 1rem;
+        }
+    }
+}
+
+// Alert Outline
+.alert.alert-outline-primary{
+    background: transparent;
+    color: var(--primary);
+    border-color: var(--primary);
+}
+
+
+.alert.alert-outline-secondary{
+    background: transparent;
+    color: $body-color;
+    border-color: $secondary;
+}
+
+
+.alert.alert-outline-success{
+    background: transparent;
+    color: $success;
+    border-color: $success;
+}
+
+
+.alert.alert-outline-info{
+    background: transparent;
+    color: $info;
+    border-color: $info;
+}
+
+
+.alert.alert-outline-warning{
+    background: transparent;
+    color: $warning;
+    border-color: $warning;
+}
+
+.alert.alert-outline-danger{
+    background: transparent;
+    color: $danger;
+    border-color: $danger;
+}
+
+.alert.alert-outline-dark{
+    background: transparent;
+    color: $body-color;
+    border-color: $dark;
+}
+
+.alert.alert-outline-light{
+    background: transparent;
+    color: $dark;
+    border-color: $light;
+}
+
+
+
+// Alert Social
+.alert-social{
+    color: $white;
+    .alert-social-icon{
+        align-self: center;
+        margin-#{$dlab-pos-right}: 0.9375rem;
+        i{
+            font-size: 2.625rem;
+        }
+    }
+    &.facebook{
+        background-color: $facebook;
+    }
+    &.twitter{
+        background-color: $twitter;
+    }
+    &.linkedin{
+        background-color: $linkedin;
+    }
+    &.google-plus{
+        background-color: $google-plus;
+    }
+    .close{
+        &:hover{
+            opacity: 1!important;
+            color: $white!important;
+        }
+    }
+}
+
+
+// Alert left icon
+
+.left-icon-big{
+    .alert-left-icon-big{
+        align-self: center;
+        margin-#{$dlab-pos-right}: 0.9375rem;
+        i{
+            font-size: 2.1875rem;   
+			line-height: 1;
+        }
+    }
+}
+div:where(.swal2-container) div:where(.swal2-popup){
+	background: var(--card)!important;
+    color: var(--text-dark)!important;
+}
+
+.alert-dismissible .btn-close{
+    top: 0;
+    #{$dlab-pos-right}: 0;
+    #{$dlab-pos-left}: auto;
+}
+
+
+

public/scss/components/ui/_ui-badge.scss

@@ -0,0 +1,205 @@
+.badge{
+    line-height: 1.5;
+    border-radius: 0.5rem;
+    padding: 0.2rem 0.5rem;
+	border:0.0625rem solid transparent;
+	min-width: 23px;
+    min-height: 23px;
+	font-weight:600;
+}
+
+.badge-rounded{
+    border-radius: 1.25rem;
+    padding:0.1875rem 0.8125rem ;
+}
+.badge-circle{
+    border-radius: 6.25rem;
+    padding: 0.1875rem 0.4375rem;
+}
+
+
+
+
+
+.badge-outline-primary{
+    border: 0.0625rem solid var(--primary);
+    color: var(--primary);
+}
+.badge-outline-secondary{
+    border: 0.0625rem solid $secondary;
+    color: $secondary;
+}
+.badge-outline-success{
+    border: 0.0625rem solid $success;
+    color: $success;
+}
+.badge-outline-info{
+    border: 0.0625rem solid $info;
+    color: $info;
+}
+.badge-outline-warning{
+    border: 0.0625rem solid $warning;
+    color: $warning;
+}
+.badge-outline-danger{
+    border: 0.0625rem solid $danger;
+    color: $danger;
+}
+.badge-outline-light{
+    border: 0.0625rem solid $border;
+    color: $dark;
+	@at-root [data-theme-version="dark"] & {
+		color:$body-color;
+	}
+}
+.badge-outline-dark{
+    border: 0.0625rem solid $dark;
+    color: $dark;
+	@at-root [data-theme-version="dark"] & {
+		color:$body-color;
+	}
+}
+
+
+
+.badge-xs {
+	padding: 0px 8px;
+    line-height: 14px;
+    border-radius: 0.375rem;
+    font-weight: 500;
+    height: 16px;
+    min-height: 16px;
+    font-size: .58rem;
+	
+	&.style-1{
+		margin-#{$dlab-pos-left}:6px;
+	}
+}
+
+.badge-sm {
+	font-size: 0.6rem;
+    padding: 0.3rem 0.5rem;
+    line-height: 0.6rem;
+    min-height: 20px;
+    height: 20px;
+}
+
+.badge-lg {
+    font-size: 0.875rem;
+    padding: 0rem 0.625rem;
+    line-height: 1.875rem;
+}
+
+
+.badge-xl {
+    font-size: 1rem;
+    padding: 0rem 0.9375rem;
+    line-height: 2.1875rem;
+}
+.badge-default{
+    background: #ADB6C7;
+}
+.badge-success {
+    background-color: $success;
+}
+.badge-secondary {
+    background-color: $secondary;
+}
+.badge-info {
+    background-color: $info;
+}
+.badge-primary {
+    background-color: var(--primary);
+}
+.badge-warning {
+    background-color: $warning;
+}
+.badge-danger {
+    background-color: $danger;
+}
+.badge-dark {
+    background-color: $dark;
+}
+.badge-light {
+    background-color: $light;
+    color: $text-dark;
+}
+
+
+
+.light.badge-default{
+    background: #ADB6C7;
+}
+.light.badge-success {
+    background-color: $success-opacity;
+	color:$success;
+}
+.light.badge-info {
+    background-color: $info-opacity;
+	color:$info;
+}
+.light.badge-primary {
+    background-color: var(--rgba-primary-1);
+	color:var(--primary);
+}
+.light.badge-secondary {
+    background-color: $secondary-light;
+	color:$secondary;
+}
+.light.badge-warning {
+    background-color: $warning-opacity;
+	color:$warning;
+}
+.light.badge-danger {
+    background-color: $danger-opacity;
+	color:$danger;
+}
+.light.badge-dark {
+    background-color: $dark-opacity;    
+	color:$dark;
+}
+.light.badge-light {
+    background-color:  $light;
+	color:$text-dark;
+}
+
+
+
+
+
+//
+
+.bootstrap-label{
+    .label{
+        display: inline-block;
+        margin-#{$dlab-pos-right}: 1rem;
+
+        &:last-child{
+            margin-#{$dlab-pos-right}: 0;
+        }
+    }
+}
+
+.badge-demo{
+
+    .badge{
+        margin-#{$dlab-pos-right}: 0.3125rem;
+        margin-bottom: 0.3125rem;
+
+        &:last-child{
+            margin-#{$dlab-pos-right}: 0;
+        }
+    }
+}
+
+.bootstrap-badge-buttons{
+
+    button{
+        margin-#{$dlab-pos-right}: .2rem;
+        margin-bottom: 1rem;
+
+        &:last-child{
+            margin-#{$dlab-pos-right}: 0;
+        }
+    }
+}

public/scss/components/ui/_ui-breadcrumb.scss

@@ -0,0 +1,98 @@
+.breadcrumb{
+	font-size:1.1875rem;
+	.breadcrumb-item{
+		&.active{
+			a{
+				color:var(--primary);
+			}
+		}
+	}
+	.breadcrumb-item + .breadcrumb-item{
+        padding-#{$dlab-pos-left}: 0.5rem;
+        &::before{
+            color:var(--primary);
+            float: #{$dlab-pos-left};
+            padding-#{$dlab-pos-right} : 0.5rem;
+        }
+    }
+}
+
+.page-titles {
+	padding: 0.75rem 1.5rem;
+    background: var(--card);
+    margin-bottom: 1.875rem;
+	border-radius: $radius;
+    margin-top: 0;
+    margin-#{$dlab-pos-left}: 0;
+    margin-#{$dlab-pos-right}: 0;
+	
+	@include respond ('phone'){
+		padding:0.75rem 1.075rem;
+	}
+
+    .justify-content-sm-end{
+        align-items: center;
+    }
+
+    h4 {
+        margin-bottom: 0;
+        margin-top: 0;
+        color: var(--primary);
+        font-size: 1.25rem;
+        span {
+            font-size: 0.875rem;
+            font-weight: 400;
+        }
+    }
+    .breadcrumb {
+        margin-bottom: 0;
+        font-size: 1rem;
+        padding: 0;
+        background: transparent;
+        li {
+            margin-top: 0;
+            margin-bottom: 0;
+
+            a{
+               color: $l-ctl; 
+			   @include respond ('phone'){
+					font-size:0.875rem;
+			   }
+
+            }
+
+            &.active{
+                color:var(--primary);
+				font-weight: 500;
+				
+            }
+        }
+        
+       
+
+        &-datepicker{
+            font-size: 0.75rem;
+            color: $muted;
+
+            &__icon{
+                font-size: 0.875rem;
+            }
+        }
+    }
+
+    .breadcrumb-widget{
+        .border-dark{
+            border-color: $gray-300!important;
+        }
+        h4{
+            color: $strong;
+            font-weight: 600;
+        }
+        @include respond('phone') {
+            text-align: #{$dlab-pos-left}!important;
+            margin-bottom: 0.9375rem;
+        }
+    }
+    
+}
+

public/scss/components/ui/_ui-card.scss

@@ -0,0 +1,239 @@
+.card {
+    margin-bottom: 1.875rem;
+    background-color: var(--card);
+    transition: all .5s ease-in-out;
+    position: relative;
+    border: 0rem solid transparent;
+    border-radius: $radius;
+    box-shadow: 0rem 0.3125rem 0.3125rem 0rem rgba(82,63,105,0.05);
+	height: calc(100% - 30px);
+	
+	@include custommq($max: 35.9375rem) {
+		margin-bottom:0.938rem;
+		height: calc(100% - 0.938rem);
+	}
+
+    &-body {
+        padding: 1.875rem;
+		@include respond('phone') {
+			padding: 1rem;
+		}
+    }
+
+    &-title {
+        font-size: 1.25rem;
+        font-weight: 600;
+        color: var(--text-dark);
+        text-transform: capitalize;
+    
+        &--large{
+            font-size: 1.5rem;
+        }
+    
+        &--medium{
+            font-size: 1rem;
+        }
+    
+        &--small{
+            font-size: 0.875rem;
+        }
+    }
+
+    &-header {
+        border-color: var(--border);
+        position: relative;
+        background: transparent;
+        padding:1.5rem 1.875rem 1.25rem;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+		@include respond('phone') {
+			padding: 1.25rem 1rem 1.25rem;
+		}
+
+        .card-title{
+            margin-bottom: 0rem;
+        }
+        .subtitle{
+            padding-top: 0.3125rem;
+            font-size: 0.875rem;
+			line-height: 1.5;
+        }
+    }
+
+    &-footer {
+        border-color: var(--border);
+        background: transparent;
+        padding: 1.25rem 1.875rem 1.25rem;
+        @include respond('phone') {
+			padding: 1rem;
+		}
+    }    
+    &-link{
+        &:hover{
+            color: var(--primary);
+        }
+    }
+}
+
+.transparent-card{
+    &.card{
+        background: transparent;
+        border: 0.0625rem solid transparent;
+        box-shadow: none;
+    }
+}
+
+
+
+
+///////////////////
+//  Card action
+///////////////////
+.card-action {
+    > a {
+        display: inline-block;
+        width: 1.875rem;
+        height: 1.875rem;
+        line-height: 1.875rem;
+        border-radius: 0.3125rem;
+        border-color: transparent;
+        text-align: center;
+        background: var(--primary-dark);
+        color: $white;
+        margin-#{$dlab-pos-right}: 0.5rem;
+
+        @at-root [data-theme-version="dark"] & {
+            background: $d-bg;
+        }
+
+        &:last-child{
+            margin-#{$dlab-pos-right}: 0;
+        }
+        &:hover,&:focus{
+            background: var(--primary-dark);
+
+            @at-root [data-theme-version="dark"] & {
+                background: $d-bg;
+            }
+        }
+
+
+        i,span{
+            font-size: 1rem;
+        }
+    }
+
+    .dropdown{
+        width: 1.875rem;
+        height: 1.875rem;
+        border-radius: 0.3125rem;
+        border-color: transparent;
+        text-align: center;
+        margin-#{$dlab-pos-right}: 0.5rem;
+        top: -0.125rem;
+        position: relative;
+        display: inline-block;
+        background: var(--primary-dark);
+        color: var(--primary);
+
+        @at-root [data-theme-version="dark"] & {
+            background: $d-bg;
+        }
+        
+        &:hover,&:focus{
+            background: var(--primary-dark);
+
+            @at-root [data-theme-version="dark"] & {
+                background: $d-bg;
+            }
+        }
+
+        .btn{
+            padding: 0;
+            line-height: 1.6875rem;
+            color: $white;
+
+            &:focus{
+                box-shadow: none;
+            }
+        }
+    }
+}
+
+.card-fullscreen {
+    position: fixed;
+    top: 0;
+    #{$dlab-pos-left}: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 99999999;
+    overflow: auto;
+}
+
+.card-loader {
+    position: absolute;
+    top: 0;
+    #{$dlab-pos-left}: 0;
+    width: 100%;
+    height: 100%;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    background-color: rgba(0, 0, 0, 0.75);
+    z-index: 999
+}
+
+.card-loader i {
+    margin: 0 auto;
+    background: var(--primary-dark);
+    padding: 0.625rem;
+    border-radius: 50%;
+    color: $white;
+    font-size: 1rem
+}
+
+.rotate-refresh {
+    -webkit-animation: mymove 0.8s infinite linear;
+    animation: mymove 0.8s infinite linear;
+    display: inline-block
+}
+
+.card-header {
+    .date_picker {
+        display: inline-block;
+        padding: 0.5rem;
+        border: 0.0625rem solid $border;
+        cursor: pointer;
+        border-radius: .375rem;
+    }
+	.border-0{
+		padding-bottom:0;
+	}
+}
+
+
+@-webkit-keyframes mymove {
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg)
+    }
+    100% {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg)
+    }
+}
+
+@keyframes mymove {
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg)
+    }
+    100% {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg)
+    }
+}

public/scss/components/ui/_ui-carousel.scss

@@ -0,0 +1,53 @@
+    .carousel-custom{
+
+    &-prev, &-next{
+        width: 2.5rem;
+        height: 2.5rem;
+        line-height: 2.5rem;
+        display: inline-block;
+        border-radius: 50%;
+        background: $white;
+        text-align: center;
+
+        i{
+            font-size: 1rem;
+        }
+
+        &:hover{
+            background: linear-gradient(to right, rgba(245, 60, 121, 0.99) 0%, rgba(246, 104, 47, 0.99) 100%);
+            color: $white;
+        }
+    }
+
+    &-next{
+        position: absolute;
+        top: 50%;
+        #{$dlab-pos-right}: 30px;
+        transform: translateY(-50%);
+    }
+
+    &-prev{
+        position: absolute;
+        top: 50%;
+        #{$dlab-pos-left}: 30px;
+        transform: translateY(-50%);
+    }
+}
+
+
+.carousel-caption{
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.78);
+	z-index:1;
+	background: rgba($black,0.6);
+    h5{
+        color: $white;
+        font-size: 1.8rem;
+    }
+
+    p{
+        margin-bottom: 0;
+    }
+}
+.carousel-indicators{
+    z-index:1;
+}

public/scss/components/ui/_ui-dropdown.scss

@@ -0,0 +1,123 @@
+.dropdown-toggle:focus {
+    box-shadow: none!important;
+  }
+
+  .dropdown-outline{
+      border: .1rem solid var(--primary);
+  }
+
+.dropdown-menu{
+	font-size: inherit;
+	border: 0;
+	z-index: 3;
+	overflow:hidden;
+	border-radius:$radius;
+	box-shadow: 0 0 3.125rem 0 rgba(82, 63, 105, 0.15);
+	margin-top:0;
+	padding: 0.5rem 0rem;
+	background-color: var(--card);
+	@at-root [data-theme-version="dark"] & {
+		box-shadow: 0rem 2rem 2.5rem 0rem rgba(0, 0, 0, 0.4);
+	}
+	.dropdown-item{
+		font-size: var(--dz-list-size);
+		color:var(--text);
+		padding: var(--dz-list-space-y) var(--dz-list-space-x);
+		text-align: #{$dlab-pos-left};
+
+		&:hover,
+		&:focus,
+		&:active,
+		&.active{
+			color: var(--text-gray);
+			background-color: var(--light);
+		}
+		&.active, 
+		&:active{
+			color: var(--primary);
+			background:var(--rgba-primary-1);
+		}
+	}
+	&.show{
+		#{$dlab-pos-right}: 0;
+		#{$dlab-pos-left}: auto;
+	}
+}
+
+////////////////////
+// Custom Dropdown
+///////////////////
+.dropdown-toggle-split {
+    padding: 0 0.625rem;
+    opacity: 0.85;
+	&:after{
+		margin-#{$dlab-pos-left}:0 !important;
+	}
+	&:active,
+	&:focus,
+	&:hover{
+		opacity:1;
+	}
+}
+
+.dropright .dropdown-toggle::after {
+	content:none;
+}
+.custom-dropdown{
+    display: inline-block;
+    margin-bottom: 1rem;
+
+    .dropdown-menu{
+        border: 0rem;
+        min-width: 10rem;
+    }
+}
+.card-action{
+    .custom-dropdown{
+        margin: 0rem;
+        background: var(--rgba-primary-1);
+        &.show,&:focus,&:hover{
+            background: var(--primary);
+            color: $white;
+        }
+
+        i{
+            display: inline-block;
+            padding-top: 0.5625rem;
+        }
+    }
+}
+
+.dropdown{
+	.dropdown-dots{
+		position: relative;
+		height: 0.3125rem;
+		width: 0.3125rem;
+		background: rgba($dark, 0.4);
+		border-radius: 0.3125rem;
+		display: block;	
+		&:after,
+		&:before{
+			content: "";
+			height: 0.3125rem;
+			width: 0.3125rem;
+			background: rgba($dark, 0.4);
+			position: absolute;
+			border-radius: 0.3125rem;
+		}
+		&:after{
+			#{$dlab-pos-right}: -0.5rem;
+		}
+		&:before{
+			#{$dlab-pos-left}: -0.5rem;			
+		}
+		
+		&.text-white{
+			background: rgba($white, 0.7);
+			&:after,
+			&:before{
+				background: rgba($white, 0.7);				
+			}
+		}
+	}
+}

public/scss/components/ui/_ui-grid.scss

@@ -0,0 +1,19 @@
+.grid-col {
+    padding: 0.5rem !important;
+    background:$l-bg;
+
+ 
+}
+
+.row.grid {
+    margin-bottom: 1.5rem;
+    text-align: center;
+}
+
+.row.grid .grid-col:first-child{
+    text-align: #{$dlab-pos-left};
+}
+
+
+
+

public/scss/components/ui/_ui-label.scss

@@ -0,0 +1,154 @@
+.label {
+    display: inline-block;
+    text-align: center;
+    font-size: 0.75rem;
+    padding: .2rem .8rem;
+
+    &-fixed {
+        width: 7.5rem;
+        padding: .6rem 0;
+
+        &-lg {
+            width: 9.5rem;
+            padding: .6rem 0;
+        }
+    }
+
+    &-big {
+        width: 16.8rem;
+        font-size: 1.4rem;
+        padding: 1.1rem 0;
+    }
+
+    &-xl {
+        width: 10.5rem;
+        padding: 1.1rem 0;
+        font-size: 1.5rem;
+    }
+
+    &-lg {
+        width: 9.5rem;
+        padding: 1.1rem 0;
+    }
+
+    &-md {
+        width: 8.5rem;
+        padding: 1.1rem 0;
+    }
+
+    &-sm {
+        width: 7.5rem;
+        padding: 1.1rem 0;
+    }
+}
+
+.label-default{
+    background: #ADB6C7;
+}
+
+.label-primary{
+    background: var(--primary);
+    color: $white;
+}
+
+.label-secondary{
+    background: $secondary;
+    color: $white;
+}
+
+.label-info{
+    background: $info;
+    color: $white;
+}
+
+.label-success{
+    background: $success;
+    color: $white;
+}
+
+.label-warning{
+    background: $warning;
+    color: $white;
+}
+
+.label-danger{
+    background: $danger;
+    color: $white;
+}
+
+
+.label-light{
+    background: $light;
+    color: $black;
+}
+
+
+.label-dark{
+    background: $dark;
+    color: $white;
+}
+
+
+
+code{
+    word-break: break-word;
+    padding: 0.125rem 0.3125rem;
+    border-radius: 0.1875rem;
+	background-color:var(--rgba-primary-1);
+    color: $danger;
+	@at-root [data-theme-version="dark"] & {
+		background: rgba($danger, 0.1);
+	}
+}
+
+.heading-labels{
+    color: #333333;
+
+    & > *{
+        margin-bottom: .8rem;
+    }
+
+    h1{
+        .label{
+            font-size: 1.125rem;
+            font-weight: normal;
+            padding: .4rem .9rem;
+        }
+    }
+
+    h2{
+        .label{
+            font-size: 1rem;
+            font-weight: normal;
+            padding: 0.3rem .9rem;
+        }
+    }
+
+    h3{
+        .label{
+            font-size: 0.875rem;
+            font-weight: normal;
+        }
+    }
+
+    h4{
+        .label{
+            font-size: 0.75rem;
+            font-weight: normal;
+        }
+    }
+
+    h5{
+        .label{
+            font-size: 0.75rem;
+            font-weight: normal;
+        }
+    }
+
+    h6{
+        .label{
+            font-size: 0.75rem;
+            font-weight: normal;
+        }
+    }
+}

public/scss/components/ui/_ui-list-group.scss

@@ -0,0 +1,46 @@
+.list-group-item {
+    background-color: rgba(255,255,255,0);
+    border: 1px solid var(--border);
+	padding: 1rem 1.5rem;
+	--bs-list-group-color : var(--text-dark);
+	&.active{
+		background-color :var(--primary);
+		border-color :var(--primary);
+	}
+}
+.list-group{
+	border-radius: $radius;
+}
+.list-group-item.disabled, .list-group-item:disabled {
+    color: #fff;
+    background-color: $secondary;
+    border-color: $secondary;
+}
+[class*="bg-"]{
+	.list-group-item{
+		border-color:rgba($white, 0.05);
+	}
+}
+.bg-warning{
+	.list-group-item{
+		border-color:rgba($black, 0.05);
+	}
+}
+.list-group-item-primary{
+	color: var(--primary);
+}
+.list-group-item-secondary{
+	color: $secondary;
+}
+.list-group-item-success{
+	color: $success;
+}
+.list-group-item-danger{
+	color: $danger;
+}
+.list-group-item-warning{
+	color: $warning;
+}
+.list-group-item-info{
+	color: $info;
+}

public/scss/components/ui/_ui-media.scss

@@ -0,0 +1,5 @@
+.media{
+    img{
+        border-radius: 0.1875rem;
+    }
+}

public/scss/components/ui/_ui-menu.scss

@@ -0,0 +1,136 @@
+.vertical-card__menu {
+
+    &:hover {
+        box-shadow: none;
+    }
+
+    &--image {
+        text-align: center;
+
+        img {
+            width: 100%;
+            border-bottom-#{$dlab-pos-left}-radius: 0.25rem;
+            border-bottom-#{$dlab-pos-right}-radius: 0.25rem;
+        }
+    }
+
+    &--status {
+        &.closed {
+            background: $danger;
+
+            &:after {
+                border-top: 0.625rem solid $danger;
+            }
+
+            .ribbon-curve {
+                border-top: 0.6875rem solid $danger;
+                border-bottom: 0.625rem solid $danger;
+            }
+        }
+    }
+
+    &--desc {
+
+        p {
+            margin-bottom: 0.625rem;
+        }
+    }
+
+    &--price {
+        font-size: 1.25rem;
+        margin: 0;
+        font-weight: 700;
+    }
+
+    &--rating {
+        font-size: 0.75rem;
+    }
+
+    &--title {
+        font-weight: 700;
+    }
+
+    &--button {
+        button {
+            font-size: 0.75rem;
+        }
+    }
+
+
+    .card-footer {
+        padding: 0.9375rem 1.25rem;
+        background-color: $border;
+        border-top: none;
+
+        @include custommq($min: 75rem, $max: 90rem) {
+            padding: 0.9375rem;
+        }
+
+        span{
+            color: $dark;
+            margin-#{$dlab-pos-right}: 0.3125rem;
+        }
+    }
+}
+
+.horizontal-card__menu {
+    box-shadow: 0 0 0.4375rem rgba(173, 173, 173, 0.32);
+    display: flex;
+    flex-direction: row;
+
+    @include media-breakpoint-down(xs) {
+        display: block;
+    }
+
+    .card-body {
+        padding: 0;
+        padding: 1.25rem 1.875rem;
+    }
+
+
+
+    &--image {
+        flex-basis: 30%;
+        max-width: 30%;
+
+        img {
+            height: 100%;
+            width: 100%;
+        }
+
+        @include media-breakpoint-down(xs) {
+            max-width: unset;
+            flex-basis: 100%;
+        }
+    }
+
+    &--title {
+        font-size: 1rem;
+        font-weight: 700;
+        margin-bottom: 0.3125rem;
+    }
+
+    &--fav {
+        margin-#{$dlab-pos-right}: 0.5rem;
+    }
+
+    &--price {
+        margin: 0;
+        font-size: 1rem;
+        font-weight: 700;
+    }
+
+    &--rating {
+        font-size: 0.625rem;
+    }
+
+    &--footer {
+        margin-top: 0.625rem;
+    }
+}
+
+.prev_price {
+    text-decoration: line-through;
+    font-size: 80%;
+    opacity: 0.5;
+}

public/scss/components/ui/_ui-modal.scss

@@ -0,0 +1,31 @@
+
+.modal-header{
+	padding: 1rem 1.875rem;
+
+	.close{
+		padding: 0.875rem 1.815rem;
+		margin: 0;
+		position: absolute;
+		#{$dlab-pos-right}: 0;
+		float: none;
+		top: 0;
+		font-size: 1.875rem;
+		font-weight: 100;
+	}
+}
+.modal-body{
+	padding: 1.875rem;
+}
+.modal-footer{
+	padding: 1rem 1.875rem;
+}
+.modal-content{
+	border-radius:$radius;
+	background-color: var(--card);
+}
+.modal-backdrop{
+    z-index: 10!important;
+}
+.modal .required:not(.form-label) {
+	color:$danger;
+}

public/scss/components/ui/_ui-pagination.scss

@@ -0,0 +1,310 @@
+.pagination .page-item{
+	.page-link{	
+		&:hover{
+			background: var(--primary);
+			border-color: var(--primary);
+			color:$white;
+		}
+	}
+	&.active .page-link{
+		background: var(--primary);
+		border-color: var(--primary);
+		color:$white;
+	}
+}
+.pagination {
+    margin-bottom: 1.25rem;
+
+    .page-item {
+		&:first-child{
+			.page-link{
+				border-radius: 0;
+				border-top-#{$dlab-pos-left}-radius : $radius;
+				border-bottom-#{$dlab-pos-left}-radius : $radius;
+			}
+		}
+		&:last-child{
+			.page-link{
+				border-radius: 0;
+				border-top-#{$dlab-pos-right}-radius : $radius;
+				border-bottom-#{$dlab-pos-right}-radius : $radius;
+			}
+		}
+
+        &.page-indicator .page-link {
+            padding: .65rem .8rem;
+            font-size: 0.875rem;
+        }
+
+        &.page-indicator:hover{
+            .page-link{
+                color: $dark;
+            }
+        }
+
+        .page-link {
+            text-align: center;
+			z-index:1;
+            padding: 0.55rem 1rem;
+            font-size: 1rem;
+			background-color:var(--card);
+            color: var(--text-gray);
+            border: 0.0625rem solid var(--border);
+            &:hover i,span{
+                color: $white;
+            }
+
+            &:focus{
+                outline: 0;
+                box-shadow: none;
+            }
+
+            &:hover{
+                background: var(--primary);
+                color: $white;
+                border-color: var(--primary);
+            }
+        }
+
+        &.active .page-link {
+            background-color: var(--primary);
+            border-color: var(--primary);
+            color: $white;
+			box-shadow:0 0.625rem 1.25rem 0rem var(--rgba-primary-2);
+			@at-root [data-theme-version="dark"] & {
+				color:$white;
+			}
+        }
+
+        .page-link {
+            color: $dark;
+			@include transitionMedium;
+        }
+
+        &:last-child .page-link{
+            margin-#{$dlab-pos-right}: 0;
+        }
+    }
+	&.no-bg{
+		li:not(.page-indicator):not(.active) .page-link{
+		 	background:transparent;
+		 	border-color:transparent;
+			
+		}
+		&.pagination-primary{
+			li:not(.page-indicator):not(.active):hover .page-link{
+				background:var(--primary);
+				border-color:var(--primary);
+				@at-root [data-theme-version="dark"] & {
+					background:var(--primary);
+					border-color:var(--primary);
+				}
+			}
+		}
+		&.pagination-danger{
+			li:not(.page-indicator):not(.active):hover .page-link{
+				background:$danger;
+				border-color:$danger;
+				@at-root [data-theme-version="dark"] & {
+					background:$danger;
+					border-color:$danger;
+				}
+			}
+		}
+		&.pagination-info{
+			li:not(.page-indicator):not(.active):hover .page-link{
+				background:$info;
+				border-color:$info;
+				@at-root [data-theme-version="dark"] & {
+					background:$info;
+					border-color:$info;
+				}
+			}
+		}
+		&.pagination-warning{
+			li:not(.page-indicator):not(.active):hover .page-link{
+				background:$warning;
+				border-color:$warning;
+				@at-root [data-theme-version="dark"] & {
+					background:$warning;
+					border-color:$warning;
+				}
+			}
+		}
+	}
+	&-primary{
+		.page-item{
+			.page-link{
+				background:var(--rgba-primary-1);
+				border-color:var(--rgba-primary-1);
+				color:var(--primary);
+			}
+			&:hover,
+			&.active{
+				.page-link{
+					background:var(--primary);
+					border-color:var(--primary);
+					box-shadow:0 0.625rem 1.25rem 0rem var(--rgba-primary-2);
+					
+				}
+			}
+		}
+	}
+	&-danger{
+		.page-item{
+			.page-link{
+				background:$danger-opacity;
+				border-color:$danger-opacity;
+				color:$danger;
+			}
+			&:hover,
+			&.active{
+				.page-link{
+					background:$danger;
+					border-color:$danger;
+					color: $white;
+					box-shadow:0 0.625rem 1.25rem 0rem rgba($danger, 0.2);
+					
+				}
+			}
+		}
+	}
+	&-info{
+		.page-item{
+			.page-link{
+				background:$info-opacity;
+				border-color:$info-opacity;
+				color:$info;
+			}
+			&:hover,
+			&.active{
+				.page-link{
+					background:$info;
+					border-color:$info;
+					color: $white;
+					box-shadow:0 0.625rem 1.25rem 0rem rgba($info, 0.2);
+				}
+			}
+		}
+	}
+	&-warning{
+		.page-item{
+			.page-link{
+				background:$warning-opacity;
+				border-color:$warning-opacity;
+				color:$warning;
+			}
+			&:hover,
+			&.active{
+				.page-link{
+					background:$warning;
+					border-color:$warning;
+					color: $white;
+					box-shadow:0 0.625rem 1.25rem 0rem rgba($warning, 0.2);
+				}
+			}
+		}
+	}
+	
+    &-gutter{
+
+        .page-item{
+            margin-#{$dlab-pos-right}: 0.4375rem;
+            
+            .page-link{
+                border-radius: $radius !important;
+            }
+        }
+    }
+
+    &-circle{
+        .page-item{
+            margin-#{$dlab-pos-right}: 0.4375rem;
+            
+            .page-link,  .page-link{
+                width: 2.5rem;
+                height: 2.5rem;
+                padding: 0;
+                line-height: 2.5rem;
+                border-radius: 50% !important;
+                padding: 0;
+            }
+			&.page-indicator{
+				.page-link{
+					width: 2.5rem;
+					border: 1px solid var(--rgba-primary-1);
+					border-radius: 22px!important;
+					line-height: 1.2rem;
+					height: 2.5rem;	
+					background:var(--rgba-primary-1);
+					color:var(--primary);
+					&:hover{
+						color:$white;
+						background:var(--primary);
+					}
+				}	
+			}
+        }
+    }
+
+    &.pagination-md{
+
+        .page-item{
+
+            .page-link{
+                width: 1.875rem;
+                height: 1.875rem;
+                line-height: 1.875rem;
+                font-size: 0.875rem;
+            }
+        }
+    }
+
+    &.pagination-sm{
+
+        .page-item{
+
+            &.page-indicator .page-link {
+                font-size: 0.75rem;
+            }
+
+            .page-link{
+                padding: 0;
+                width: 1.875rem;
+                height: 1.875rem;
+                line-height: 1.775rem;
+                font-size: 0.875rem;
+            }
+        }
+    }
+
+    &.pagination-xs{
+
+        .page-item{
+
+            &.page-indicator .page-link {
+                font-size: 0.625rem;
+            }
+
+            .page-link{
+                padding: 0;
+                width: 1.5625rem;
+                height: 1.5625rem;
+                line-height: 1.4625rem;
+                font-size: 0.75rem;
+            }
+        }
+    }
+
+    
+}
+
+
+
+
+
+
+
+
+
+

public/scss/components/ui/_ui-popover.scss

@@ -0,0 +1,73 @@
+.popover{
+    border: 0.125rem solid rgba($secondary, 0.1);
+    min-width: 13.125rem;
+    box-shadow: 0 0 1.875rem 0 rgba(0,0,0,0.1);
+	@at-root [data-theme-version="dark"] & {
+        background-color: $d-bg;
+    }
+    &-header{
+        background: $secondary;
+        color: $white;
+        font-weight: 300;
+
+        &::before{
+            border-bottom: 0 !important;
+        }
+    }
+
+    &-body{
+        font-size: 0.75rem;
+		@at-root [data-theme-version="dark"] & {
+			color:#828690 ;
+		}
+    }
+	.popover-header{
+		@at-root [data-theme-version="dark"] & {
+			border-color: $dark-card;
+		}
+    }
+	@include respond ('phone-land'){
+		z-index:1;
+	}
+}
+
+.bootstrap-popover-wrapper{
+    .bootstrap-popover:not(:last-child){
+        margin-#{$dlab-pos-right}: 0.5rem;
+    }
+
+    .bootstrap-popover{
+        margin-bottom: .5rem;
+
+        button:hover,button:focus{
+            background: var(--primary);
+            color: $white;
+            box-shadow: none;
+        }
+    }
+}
+
+
+.bs-popover-top .arrow::after, .bs-popover-auto[x-placement^="top"] .arrow::after {
+    bottom: 0rem;
+    border-top-color: $secondary;
+}
+
+.bs-popover-left .arrow::after, .bs-popover-auto[x-placement^="left"] .arrow::after {
+    #{$dlab-pos-right}: 0rem;
+    border-left-color: $secondary;
+}
+
+.bs-popover-right .arrow::after, .bs-popover-auto[x-placement^="right"] .arrow::after {
+    #{$dlab-pos-left}: 0rem;
+    border-right-color: $secondary;
+}
+
+.bs-popover-bottom .arrow::after, .bs-popover-auto[x-placement^="bottom"] .arrow::after {
+    top: 0rem;
+    border-bottom-color: $secondary;
+}
+
+.note-popover{
+    display: none;
+}

public/scss/components/ui/_ui-pricing.scss

@@ -0,0 +1,183 @@
+.pricing-wrapper {
+    margin-top: 7rem;
+    
+    .pricing-heading-text {
+        text-align: center;
+        margin-bottom: 6rem;
+
+        h2 {
+            font-size: 4.5rem;
+            line-height: 1.2;
+            color: $pale-sky;
+
+            span {
+                display: block;
+            }
+        }
+
+        p {
+            margin-bottom: 0;
+        }
+
+        a{
+            color: $pale-sky;
+            text-decoration: underline;
+        }
+
+        .plan-swither {
+            display: flex;
+            justify-content: center;
+            align-items: flex-end;
+            margin-top: 3rem;
+
+            &>* {
+                margin-#{$dlab-pos-left}: 1rem;
+                margin-#{$dlab-pos-right}: 1rem;
+            }
+
+            .switch label {
+                margin-bottom: 0;
+            }
+            
+            .badge {
+                height: 5.5rem;
+                width: 5.5rem;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                font-size: 1.4rem;
+            }
+
+        }
+    }
+
+    .single-pricing-table {
+        position: relative;
+        text-align: center;
+        min-height: 89rem;
+
+        .upper-border {
+            height: 1.5rem;
+            border-bottom-#{$dlab-pos-right}-radius: .5rem;
+            border-bottom-#{$dlab-pos-left}-radius: .5rem;
+            
+            &.style-1 {
+                @extend %gradient-1;
+            }
+
+            &.style-2 {
+                @extend %gradient-2;
+            }
+
+            &.style-3 {
+                @extend %gradient-3;
+            }
+        }
+
+        .plan-name {
+            margin-top: 2rem;
+            color: #6a707e;
+        }
+
+        .plan-price {
+            padding: 2.8rem 0;
+            margin: 3rem 0;
+            display: flex;
+            color: $white;
+            justify-content: center;
+            
+            &.style-1 {
+                @extend %gradient-1;
+            }
+
+            &.style-2 {
+                @extend %gradient-2;
+            }
+
+            &.style-3 {
+                @extend %gradient-3;
+            }
+            
+            h2 {
+                font-size: 6rem;
+                color: $white;
+                margin: 0;
+                line-height: 1;
+                font-weight: normal;
+            }
+
+            .currency-timeplan {
+                align-self: flex-end;
+            }
+        }
+
+        .plan-icon {
+            margin-top: 3rem;
+        }
+        
+        .plan-specification {
+            ul {
+                margin: 0;
+
+                li {
+                    margin: 2.5rem 0;
+
+                    del{
+                        color: $athensGray;
+                    }
+                }
+            }
+        }
+
+        .btn {
+            width: 80%;
+            margin: 0 auto;
+            border: .1rem solid $border;
+            margin-top: 4.5rem;
+            margin-bottom: 1.5rem;
+            color: #2290ff;
+            transition: all .2s;
+            padding: 0.9rem 1.8rem;
+            font-size: 1.7rem;
+            font-weight: 600;
+
+            &:hover {
+                color: $white;
+
+                &.style-1 {
+                    @extend %gradient-1;
+                }
+
+                &.style-2 {
+                    @extend %gradient-2;
+                }
+
+                &.style-3 {
+                    @extend %gradient-3;
+                }
+            }
+        }
+    }
+
+    .pricing-footer-text {
+        margin-bottom: 7rem;
+
+        p {
+            margin-bottom: 4rem;
+
+            b{
+                border-bottom: 1px solid $sky;
+            }
+        }
+
+        .btn{
+            font-size: 1.6rem;
+            font-weight: 600;
+            padding: .95rem 2.5rem;
+
+            i{
+                padding-#{$dlab-pos-right}: .5rem;
+            }
+        }
+    }
+}

public/scss/components/ui/_ui-progressbar.scss

@@ -0,0 +1,81 @@
+ // Variable.scss
+ .progress-bar {
+    background-color: var(--primary);
+ }
+ 
+ .progress-bar-primary {
+     background-color: var(--primary);
+ }
+ 
+ .progress-bar-success {
+     background-color: $success;
+ }
+ 
+ .progress-bar-info {
+     background-color: $info;
+ }
+ 
+ .progress-bar-danger {
+     background-color: $danger;
+ }
+ 
+ .progress-bar-warning {
+     background-color: $warning;
+ }
+ 
+ .progress-bar-pink {
+     background-color: $pink;
+ }
+ 
+.progress {
+	height: 6px;
+	background-color:var(--light);
+    overflow: hidden;
+    &-bar{
+        border-radius: $radius;
+    }
+}
+ 
+ .progress-vertical {
+     display: inline-block;
+     margin-bottom: 0;
+     margin-#{$dlab-pos-right}: 2rem;
+     min-height: 17rem;
+     position: relative;
+
+     @include media-breakpoint-down(md) {
+        margin-#{$dlab-pos-right}: 1rem;
+     }
+ }
+ 
+ .progress-vertical-bottom {
+     display: inline-block;
+     margin-bottom: 0;
+     margin-#{$dlab-pos-right}: 2rem;
+     min-height: 17rem;
+     position: relative;
+     transform: rotate(180deg);
+     
+     @include media-breakpoint-down(md) {
+        margin-#{$dlab-pos-right}: 1rem;
+     }
+ }
+ 
+ .progress-animated {
+     animation-duration: 5s;
+     animation-name: myanimation;
+     transition: all 5s ease 0s;
+ }
+ 
+ @keyframes myanimation {
+     0% {
+         width: 0;
+     }
+ }
+ 
+ @keyframes myanimation {
+     0% {
+         width: 0;
+     }
+ }
+ 

public/scss/components/ui/_ui-ribbon.scss

@@ -0,0 +1,144 @@
+.ribbon {
+    position: absolute;
+    z-index: 1;
+    text-transform: uppercase;
+
+    &__one {
+        top: 0.9375rem;
+        #{$dlab-pos-left}: -0.6875rem;
+        min-height: 1.25rem;
+        min-width: 3.25rem;
+        text-align: center;
+        padding: 0.1875rem 0.625rem;
+        background: #3AB54B;
+        color: #fff;
+        font-size: 0.625rem;
+
+        &::after {
+            position: absolute;
+            width: 0;
+            height: 0;
+            border-top: 0.625rem solid #239132;
+            border-#{$dlab-pos-left}: 0.6875rem solid transparent;
+            #{$dlab-pos-left}: 0;
+            content: "";
+            bottom: -0.625rem;
+        }
+    }
+
+    &__two {
+        width: 3.125rem;
+        height: 3.125rem;
+        display: inline-block;
+        background: $warning;
+        line-height: 3.125rem;
+        text-align: center;
+        font-size: 1rem;
+        color: $white;
+        #{$dlab-pos-right}: 0.9375rem;
+        top: 0.9375rem;
+        border-radius: 0.1875rem;
+    }
+
+    &__three {
+        #{$dlab-pos-left}: -1.875rem;
+        top: 0.875rem;
+        width: 6.875rem;
+        height: 1.5625rem;
+        background-color: $danger;
+        clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
+        transform: rotate(-45deg);
+        color: $white;    
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 0.875rem;
+    }
+
+    &__four {
+        #{$dlab-pos-left}: 0.5rem;
+        top: -0.5rem;
+        width: 6.875rem;
+        height: 3.125rem;
+        background-color: var(--primary);
+        z-index: auto;
+        color: $white;
+        font-size: 1rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        
+        &:after {
+            #{$dlab-pos-right}: -0.3125rem;
+        }
+
+        &:before {
+            #{$dlab-pos-left}: -0.3125rem;
+        }
+
+        &:after, &:before {
+            z-index: -1;
+            background-color: var(--rgba-primary-1);
+            top: 0.1875rem;
+            transform: rotate(45deg);
+            content: "";
+            height: 0.625rem;
+            width: 0.625rem;
+            position: absolute;
+        }
+    }
+
+    &__five {
+        #{$dlab-pos-left}: -1.875rem;
+        top: 0.625rem;
+        width: 6.875rem;
+        height: 1.875rem;
+        background-color: var(--primary);
+        transform: rotate(-45deg);
+        font-size: 0.75rem;
+        color: $white;
+        padding-bottom: 0.3125rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 1rem;
+
+        &::before {
+            position: absolute;
+            content: "";
+            width: 0;
+            height: 0;
+            border-style: solid;
+            border-width: 0 3.125rem 3.125rem 3.125rem;
+            border-color: transparent transparent var(--primary) transparent;
+            #{$dlab-pos-left}: 0.25rem;
+            top: -2.8125rem;
+        }
+    }
+
+    &__six {
+        #{$dlab-pos-left}: 0;
+        top: 1.125rem;
+        width: 6.875rem;
+        height: 2.375rem;
+        background-color: var(--primary);
+        -webkit-clip-path: polygon(0 0, 100% 0%, 100% 0, 85% 50%, 100% 100%, 100% 100%, 0 100%);
+        clip-path: polygon(0 0, 100% 0%, 100% 0, 85% 50%, 100% 100%, 100% 100%, 0 100%);
+        display: flex;
+        font-size: 1.25rem;
+        align-items: center;
+        justify-content: center;
+        color: $white;
+    }
+
+    &-curve {
+        position: absolute;
+        top: 0;
+        #{$dlab-pos-right}: -0.375rem;
+        width: 0.625rem;
+        height: 0.6875rem;
+        border-top: 0.6875rem solid #3AB54B;
+        border-bottom: 0.625rem solid #3AB54B;
+        border-#{$dlab-pos-right}: 0.3125rem solid transparent;
+    }
+}

public/scss/components/ui/_ui-scrollbar.scss

@@ -0,0 +1,21 @@
+.jsgrid-grid-body, 
+.dataTables_scrollBody, 
+.table-responsive {
+    &::-webkit-scrollbar {
+        background-color: #f5f5f5;
+        width: 0.5rem;
+        height: 0.5rem;
+    }
+
+    &::-webkit-scrollbar-track {
+        -webkit-box-shadow: inset 0 0 0.375rem rgba(0,0,0,0.3);
+        border-radius: 0.625rem;
+        background-color: #f5f5f5;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        border-radius: 0.625rem;
+        -webkit-box-shadow: inset 0 0 0.375rem rgba(0,0,0,.3);
+        background-color: var(--primary);
+    }
+}

public/scss/components/ui/_ui-step.scss

@@ -0,0 +1,98 @@
+
+
+
+%remain-steps {
+    &:before {
+        content: counter(stepNum);
+        font-family: inherit;
+        font-weight: 400;
+    }
+
+    &:after {
+        background-color: $border;
+    }
+}
+
+.multi-steps {
+    display: table;
+    table-layout: fixed;
+    width: 100%;
+
+    >li {
+        counter-increment: stepNum;
+        text-align: center;
+        display: table-cell;
+        position: relative;
+        color: var(--primary);
+
+        @include media-breakpoint-down(xs) {
+            font-size: 0.75rem;
+        }
+
+        &:before {
+            content: '\2713';
+            display: block;
+            margin: 0 auto 0.25rem;
+            background-color: $white;
+            width: 1.5625rem;
+            height: 1.5625rem;
+            line-height: 1.375rem;
+            text-align: center;
+            font-weight: bold;
+            position: relative;
+            z-index: 1;
+
+            @include media-breakpoint-down(xs) {
+                width: 1.5625rem;
+                height: 1.5625rem;
+                line-height: 1.3125rem;
+            }
+
+            border: {
+                width: 0.125rem;
+                style: solid;
+                color: var(--primary);
+                radius: 0.3125rem;
+            }
+        }
+
+        &:after {
+            content: '';
+            height: 0.125rem;
+            width: 100%;
+            background-color: var(--primary);
+            position: absolute;
+            top: 0.75rem;
+            #{$dlab-pos-left}: 50%;
+
+            @include media-breakpoint-down(xs) {
+                top: 0.75rem;
+            }
+        }
+
+        &:last-child {
+            &:after {
+                display: none;
+            }
+        }
+
+        &.is-active {
+            @extend %remain-steps;
+
+            &:before {
+                background-color: $white;
+                border-color: var(--primary);
+            }
+
+            ~li {
+                color: $body-color;
+                @extend %remain-steps;
+
+                &:before {
+                    background-color: $border;
+                    border-color: $border;
+                }
+            }
+        }
+    }
+}

public/scss/components/ui/_ui-tab.scss

@@ -0,0 +1,112 @@
+.nav-tabs{
+	--bs-nav-tabs-border-color: var(--border);
+	.nav-link{
+		color: var(--text);
+	}
+}
+.nav-pills {
+    .nav-link {
+		border-radius: $radius;
+	    padding: 0.75rem 1.25rem;
+		color: var(--text-dark);
+	}
+}
+
+.default-tab{
+    .nav-link{
+        background: transparent;
+        border-radius: 0rem;
+        font-weight: 500;
+		border-radius: $radius $radius 0 0;
+		i{
+			display:inline-block;
+			transform:scale(1.3);
+			color:var(--primary);
+			
+		}
+		
+		&:focus,
+		&:hover,
+		&.active{
+			color: #495057;
+			background-color: transparent;
+			border-color: var(--border) var(--border) var(--card) var(--border);
+			color:var(--primary);
+		}
+    }
+}
+
+
+.nav-tabs.style-1{
+	border:0;
+	border-radius:$radius;
+	background-color:var(--light);
+	padding: 4px;
+	.nav-item{
+		.nav-link{
+			border:0;
+			border-radius:$radius;
+			margin: 0;
+			color: var(--text-gray);
+			padding: 0.5rem 1.125rem;
+			font-weight: 500;
+			&.active{
+				background:var(--primary);
+				color:$white;
+				&:hover{
+					color:$white;
+				}
+			}	
+			&:hover{
+				color:var(--primary);
+			}
+		}	
+	}
+}	
+
+
+.custom-tab-1{
+    .nav-link{
+        background: transparent;
+        border-radius: 0rem;
+        font-weight: 500;
+		border-bottom:0.1875rem solid transparent;
+		border-width: 0 0rem 0.1875rem 0;
+		
+		i{
+			display:inline-block;
+			transform:scale(1.5);
+			color:var(--primary);
+		}
+		&:focus,
+		&:hover,
+		&.active{
+			color: #495057;
+			background-color: transparent;
+			border-color:var(--primary) ;
+			border-radius:0;
+			color: var(--primary);
+			border-width: 0 0rem 0.1875rem 0;
+		}
+    }
+	
+}
+.nav-pills{
+	
+	&.light{
+	
+		.nav-link.active, 
+		.show > .nav-link{
+			background:var(--rgba-primary-1);
+			color:var(--primary);
+			box-shadow:none;
+		}	
+	
+	}
+	.nav-link.active, 
+	.show > .nav-link{
+		background-color:var(--primary);
+		box-shadow:0 0 1.25rem 0 var(--rgba-primary-2);
+	}
+}
+

public/scss/components/ui/_ui-timeline.scss

@@ -0,0 +1,286 @@
+
+.widget-timeline{
+
+	.timeline {
+		list-style: none;
+		position: relative;
+		&:before {
+			top: 1.25rem;
+			bottom: 0;
+			position: absolute;
+			content: " ";
+			width: 0.1875rem;
+			#{$dlab-pos-left}: 0.5625rem;
+			margin-#{$dlab-pos-right}: -0.0938rem;
+			background: $light;
+			@at-root [data-theme-version="dark"] & {
+				background: $d-border;
+			}
+			
+		}
+		> li {
+			margin-bottom: 0.9375rem;
+			position: relative;
+			&:before {
+				content: " ";
+				display: table;
+			}
+			&:after {
+				content: " ";
+				display: table;
+				clear: both;
+			}
+			> {
+				.timeline-panel {
+					border-radius: $radius;
+					padding: 0.9375rem 1.25rem;
+					position: relative;
+					display:block;
+					margin-#{$dlab-pos-left}: 2.5rem;
+					border-width:0.0625rem;
+					border-style:solid;
+					span{
+						font-size: 0.75rem;
+						display: block;
+						margin-bottom: 0.3125rem;
+						opacity: 0.8;
+						letter-spacing: 0.0625rem;
+					}
+					p{
+						font-size:0.875rem;
+					}
+					&:after{
+						content: "";
+						width: 0.625rem;
+						height: 0.625rem;
+						background: inherit;
+						border-color: inherit;
+						border-style: solid;
+						border-width: 0rem 0rem 0.0625rem 0.0625rem;
+						display: block;
+						position: absolute;
+						#{$dlab-pos-left}: -0.3125rem;
+						transform: rotate(45deg);
+						top: 0.9375rem;
+					}
+				}
+				.timeline-badge {
+					border-radius: 50%;
+					height: 1.375rem;
+					#{$dlab-pos-left}: 0;
+					position: absolute;
+					top: 0.625rem;
+					width: 1.375rem;
+					border-width: 0.125rem;
+					border-style: solid;
+					background:$white;
+					padding:0.25rem;
+					@at-root [data-theme-version="dark"] & {
+						background-color: $dark-card;
+					}
+					&:after{
+						content:"";
+						width:0.625rem;
+						height:0.625rem;
+						border-radius:100%;
+						display:block;
+					}
+				}
+			}
+		}
+	}
+	
+	.timeline-body > p {
+		font-size: 0.75rem;
+	}
+  
+  .timeline-badge {
+    &.primary{
+		border-color: var(--rgba-primary-1);
+		@at-root [data-theme-version="dark"] & {
+			border-color: var(--rgba-primary-1);
+		}
+		&:after{
+			background-color: var(--primary);
+			box-shadow:0 0.3125rem 0.625rem 0 var(--rgba-primary-2);
+		}
+		& + .timeline-panel{
+			background:var(--rgba-primary-1);
+			border-color:var(--rgba-primary-1);
+			@at-root [data-theme-version="dark"] & {
+				border-color: transparent;
+				background-color: var(--rgba-primary-1);
+			}
+		}
+    }
+    &.success{
+		border-color:$success-light;
+		@at-root [data-theme-version="dark"] & {
+			border-color: $success-opacity;
+		}
+		&:after{
+			background-color: $success !important;
+			box-shadow:0 0.3125rem 0.625rem 0 rgba($success, 0.2);
+		}
+		& + .timeline-panel{
+			background:$success-light;
+			border-color:$success-light;
+			@at-root [data-theme-version="dark"] & {
+				background-color: $success-opacity;
+				border-color: transparent;
+			}
+		}
+    }
+    &.warning{
+		border-color:$warning-light;
+		@at-root [data-theme-version="dark"] & {
+			border-color: $warning-opacity;
+		}
+		&:after{
+			background-color: $warning !important;
+			box-shadow:0 0.3125rem 0.625rem 0 rgba($warning, 0.2);
+		}
+		& + .timeline-panel{
+			background:$warning-light;
+			border-color:$warning-light;
+			@at-root [data-theme-version="dark"] & {
+				background-color: $warning-opacity;
+				border-color: transparent;
+			}
+		}
+    }
+    &.danger{
+		border-color:$danger-light;
+		@at-root [data-theme-version="dark"] & {
+			border-color: $danger-opacity;
+		}
+		&:after{
+		  background-color: $danger !important;
+		  box-shadow:0 0.3125rem 0.625rem 0 rgba($danger, 0.2);
+		}
+		& + .timeline-panel{
+			background:$danger-light;
+			border-color:$danger-light;
+			@at-root [data-theme-version="dark"] & {
+				background-color: $danger-opacity;
+				border-color: transparent;
+			}
+		}
+    }
+	
+    &.info{
+		border-color:$info-light;
+		@at-root [data-theme-version="dark"] & {
+			border-color: $info-opacity;
+		}
+		&:after{
+			background-color: $info !important;
+			box-shadow:0 0.3125rem 0.625rem 0 rgba($info, 0.2);
+		}
+		& + .timeline-panel{
+			background:$info-light;
+			border-color:$info-light;
+			@at-root [data-theme-version="dark"] & {
+				background-color: $info-opacity;
+				border-color: transparent;
+			}
+		}
+    }
+    &.dark{
+		border-color:$dark-light;
+		@at-root [data-theme-version="dark"] & {
+			border-color: $dark-opacity;
+		}
+		&:after{
+		  background-color: $dark !important;
+		  box-shadow:0 0.3125rem 0.625rem 0 rgba($dark, 0.2);
+		}
+		& + .timeline-panel{
+			background:$dark-light;
+			border-color:$dark-light;
+			@at-root [data-theme-version="dark"] & {
+				background-color: $dark-opacity;
+				border-color: transparent;
+			}
+		}
+    }
+  }
+	
+	&.style-1{
+		.timeline-panel{
+			background:transparent;
+		}
+		.timeline {
+			.timeline-badge {
+				&.timeline-badge{
+					& + .timeline-panel{
+						background: transparent !important;
+						border: 0;
+						border-#{$dlab-pos-left} : 0.3125rem solid;
+						border-radius: 0;
+						padding: 0.3125rem 0.625rem 0.3125rem 0.9375rem;
+						&:after{
+							border:0;
+							#{$dlab-pos-left}: -0.5625rem;
+							width: 0.4375rem;
+							height: 0.4375rem;
+						}
+					}
+				}
+				&.primary{
+					& + .timeline-panel{
+						border-color:var(--primary);
+						&:after{
+							background:var(--primary);
+						}
+					}
+				}
+				&.success{
+					& + .timeline-panel{
+						border-color:$success;
+						&:after{
+							background:$success;
+						}
+					}
+				}
+				&.warning{
+					& + .timeline-panel{
+						border-color:$warning;
+						&:after{
+							background:$warning;
+						}
+					}
+				}
+				&.danger{
+					& + .timeline-panel{
+						border-color:$danger;
+						&:after{
+							background:$danger;
+						}
+					}
+				}
+				&.info{
+					& + .timeline-panel{
+						border-color:$info;
+						&:after{
+							background:$info;
+						}
+					}
+				}
+				&.dark{
+					& + .timeline-panel{
+						border-color:$dark;
+						&:after{
+							background:$dark;
+						}
+					}
+				}
+			}
+		}
+	
+	}  
+  
+}
+
+  
+  

public/scss/components/ui/_ui-tooltip.scss

@@ -0,0 +1,85 @@
+.tooltip{
+    margin-bottom: 6px!important;
+    &-wrapper{
+
+        button:not(:last-child){
+            margin-#{$dlab-pos-right}: 0.5rem;
+        }
+
+        button:hover{
+            background: var(--primary);
+            color: $white;
+        }
+
+        button{
+            margin-bottom: .5rem;
+
+            &:focus{
+                box-shadow: none;
+            }
+        }
+    }
+
+    &-inner{
+        border-radius: 0;
+        background: #333333;
+        font-size: 0.75rem;
+        font-weight: 300;
+        padding: 0.35rem 0.7rem;
+    }
+
+    
+}
+.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before{
+    // border-width: 0 0.6rem 0.6rem;
+    border-bottom-color: #333333;
+}
+
+.bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before{
+    border-right-color: #333333;
+}
+
+.bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before{
+    border-left-color: #333333;
+}
+
+.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before{
+    border-top-color: #333333;
+}
+
+.tooltip-inner {
+    background-color:var(--rgba-primary-1);
+    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
+    color: var(--primary);
+    font-weight:400;
+    width:auto;
+    border-radius:$radius;
+    &:before{
+        background-color:$white!important;
+    }
+        
+}
+.tooltip .arrow{
+    border-top-color: #008ec3!important;
+    background-color:$white!important;
+}
+
+.tooltip.bs-tooltip-top .tooltip-arrow::before {
+    border-top-color:var(--primary); /* Set arrow color to red */
+    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
+}
+
+.tooltip.bs-tooltip-bottom .tooltip-arrow::before {
+    border-bottom-color: var(--primary); /* Set arrow color to red */
+    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
+}
+
+.tooltip.bs-tooltip-start .tooltip-arrow::before {
+    border-left-color:var(--primary); /* Set arrow color to red */
+    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
+}
+
+.tooltip.bs-tooltip-end .tooltip-arrow::before {
+    border-right-color:var(--primary); /* Set arrow color to red */
+    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
+}

public/scss/components/widget/_widget-card-list.scss

@@ -0,0 +1,68 @@
+.card-list{
+	overflow: unset;
+	height: calc(100% - 50px);
+	
+	.card-header{
+		padding-top: 0;		
+		padding-bottom: 0;
+		
+		.photo{
+			overflow: hidden;
+			border-radius: 0.3125rem;
+			width: 100%;
+		}
+	}
+	
+	@include respond('tab-land') {
+		height: calc(100% - 40px);
+	}
+
+	&.list-left{
+		margin-top: 0.9375rem;
+		margin-#{$dlab-pos-left}: 0.9375rem;
+		
+		.card-header{
+			padding-#{$dlab-pos-left}: 0;
+			
+			.photo{
+				margin: -0.9375rem 0.9375rem 0 -0.9375rem;
+			}
+		}
+	}
+	
+	&.list-right{
+		margin-top: 0.9375rem;
+		margin-#{$dlab-pos-right}: 0.9375rem;
+		text-align: #{$dlab-pos-right};
+		
+		.card-header{
+			padding-#{$dlab-pos-right}: 0;
+			
+			.photo{
+				margin: -0.9375rem -0.9375rem 0 0.9375rem;
+				img{
+					width:100%;
+				}
+			}
+		}
+	}
+	
+	&.list-center{
+		margin-top: 0.9375rem;
+		
+		.card-header{
+			
+			.photo{
+				margin: -0.9375rem 0 0 0;
+			}
+		}
+	}
+	.photo img{
+		width:100%;
+	}
+}
+.card-profile{
+	.profile-photo{
+		margin-top: -1.25rem;
+	}
+}

public/scss/components/widget/_widget-chart.scss

@@ -0,0 +1,124 @@
+#chart_widget_4 {
+    height: 15.9375rem !important;
+}
+
+#chart_widget_5 {
+    .ct-series-a .ct-line, 
+    .ct-series-a .ct-point {
+        stroke: #46ffc8;
+    }
+
+    .ct-line {
+        stroke-width: 0.0625rem;
+    }
+
+    .ct-point {
+        stroke-width: 0.125rem;
+    }
+
+    .ct-series-a .ct-area {
+        fill: #20dea6;
+    }
+
+    .ct-area {
+        fill-opacity: 1;
+    }
+}
+
+#chart_widget_6 {
+    .ct-series-a .ct-line, 
+    .ct-series-a .ct-point {
+        stroke: $info;
+    }
+
+    .ct-line {
+        stroke-width: 0.125rem;
+    }
+
+    .ct-point {
+        stroke-width: 0.3125rem;
+    }
+
+    .ct-series-a .ct-area {
+        fill: $info;
+    }
+
+    .ct-area {
+        fill-opacity: .5;
+    }
+}
+
+#chart_widget_8 {
+    height: 15.9375rem;
+
+    .ct-series-a .ct-line, 
+    .ct-series-a .ct-point {
+        stroke: $info;
+    }
+
+    .ct-line {
+        stroke-width: 0.125rem;
+    }
+
+    .ct-point {
+        stroke-width: 0.3125rem;
+    }
+
+    .ct-series-a .ct-area {
+        fill: $info;
+    }
+
+    .ct-area {
+        fill-opacity: .5;
+    }
+}
+
+#chart_widget_9, #chart_widget_10 {
+    height: 15.625rem !important;
+}
+
+#chart_widget_11, #chart_widget_12, #chart_widget_13 {
+    .ct-slice-donut {
+        stroke-width: 1.5625rem !important;
+    }
+}
+
+
+#chart_widget_11 {
+    height: 16.875rem !important;
+	margin-bottom: -10px;
+}
+
+#chart_widget_17 {
+    height: 9.375rem !important;
+}
+
+
+.chart_widget_tab_one {
+    .nav-link {
+        border: 0.0625rem solid #ddd;
+
+        &.active {
+            background-color: var(--primary);
+            border: 0.0625rem solid var(--primary);
+            color: $white;
+
+            &:hover {
+                border: 0.0625rem solid var(--primary);
+            }
+        }
+
+        &:hover {
+            border: 0.0625rem solid #ddd;
+        }
+    }
+}
+
+.ccc-widget {
+    &>div {
+        @at-root [data-theme-version="dark"] & {
+            background: $dark-card !important;
+            border-color: $d-border !important;
+        }
+    }
+}

public/scss/components/widget/_widget-media.scss

@@ -0,0 +1,86 @@
+.widget-media{
+	.timeline{
+		.timeline-panel{
+			display: flex;
+			align-items: center;
+			border-bottom:0.0625rem solid $l-border;
+			padding-bottom: 0.9375rem;
+			margin-bottom: 0.9375rem;
+			
+			.media{
+				width: 3.125rem;
+				height: 3.125rem;
+				background: #eee;
+				border-radius: 0.75rem;
+				overflow: hidden;
+				font-size: 1.25rem;
+				text-align: center;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				font-weight: 700;
+				align-self: start;
+					
+				&-primary{
+					background:var(--rgba-primary-1);
+					color:var(--primary);
+					@at-root [data-theme-version="dark"] & {
+						background-color: var(--rgba-primary-1);
+					}
+				}
+				&-info{
+					background:$info-light;
+					color:$info;
+					@at-root [data-theme-version="dark"] & {
+						background-color: $info-opacity;
+					}
+				}
+				&-warning{
+					background:$warning-light;
+					color:$warning;
+					@at-root [data-theme-version="dark"] & {
+						background-color: $warning-opacity;
+					}
+				}
+				&-danger{
+					background:$danger-light;
+					color:$danger;
+					@at-root [data-theme-version="dark"] & {
+						background-color: $danger-opacity;
+					}
+				}
+				&-success{
+					background:$success-light;
+					color:$success;
+					@at-root [data-theme-version="dark"] & {
+						background-color: $success-opacity;
+					}
+				}
+			}
+			.media-body{
+				p{
+					font-size: 0.875rem;
+					line-height:1.5;
+				}
+			}
+			.dropdown {
+				align-self: self-end;
+				margin-top: 0.3125rem;
+			}
+		}
+		li:last-child {
+			.timeline-panel{
+				margin-bottom:0;
+				border-bottom:0;
+				padding-bottom:0;
+			}
+		}
+	}
+}
+.card[class*="bg-"]{
+	.timeline{
+		.timeline-panel{
+			border-color:rgba(255,255,255,0.2) !important;
+		}
+	}
+}

public/scss/components/widget/_widget-messages.scss

@@ -0,0 +1,6 @@
+.widget-message {
+	p{
+		font-size: 0.875rem;
+		line-height: 1.5;
+	}
+}

public/scss/components/widget/_widget-pickadate.scss

@@ -0,0 +1,151 @@
+.picker{
+	.picker__frame {
+		min-width: 28.125rem;
+		max-width: 28.125rem;
+		height: 100%;
+		top: 0;
+		max-height: 100%;
+		align-items: center;
+		display: flex;
+		.picker__wrap{
+			height: auto;
+		}
+		.picker__box{
+			padding: 1.25rem;
+			border: 0;
+			box-shadow: 0 0.3125rem 0.625rem rgba(0,0,0,0.1);
+			
+			.picker__header{
+				margin-top: 0;
+				
+				.picker__year{
+					color: var(--primary);
+					font-style: inherit;
+					font-size: 1.25rem;
+				}
+			
+				.picker__nav--prev,
+				.picker__nav--next{
+					width: 2.5rem;
+					height: 2.5rem;
+					padding: 0;
+					line-height: 2.5rem;
+					border-radius: 0.125rem;
+					&:before{
+						content: none!important
+					}
+					&:after{
+						font-family: "Font Awesome 5 Free";
+						border: 0;
+						margin: 0 auto;
+						font-size: 1.375rem;
+						font-weight: 700;
+					}
+					&:hover{
+						background-color: var(--primary);
+						color: $white;
+					}
+				}
+				.picker__nav--prev{
+					transition: 0.4s;
+					left: 0;
+					&:after{
+						content: "\f0d9";
+					}
+				}
+				.picker__nav--next{
+					transition: 0.4s;
+					right: 0;
+					&:after{
+						content: "\f0da";
+					}
+				}
+			}
+			
+			.picker__table{
+				.picker__weekday {
+					padding: 0.625rem 0;
+					font-size: 1rem;
+				}
+				.picker__day {
+					width: 2.5rem;
+					height: 2.5rem;
+					border-radius: 3.125rem;
+					padding: 0!important;
+					font-size: 1rem;
+					line-height: 2.5rem;
+					margin: auto;
+					border: 0!important;
+					
+					&.picker__day--today{
+						&:before {
+							content: none !important;
+						}
+					}
+					
+					&.picker__day--highlighted {
+						border: 0!important;
+						padding: 0;
+						background-color: var(--primary);
+						color: $white!important;
+					}
+					
+					&:hover{
+						background-color: var(--primary);
+						color: $white !important;
+					}
+				}
+			}
+			
+			.picker__footer{
+				display: flex;
+  				gap: 5px;
+				.picker__button--today{
+					background-color: var(--primary);
+					color: $white !important;
+					
+					&:before{
+						content: none!important
+					}
+				}
+				
+				.picker__button--clear, 
+				.picker__button--close, 
+				.picker__button--today{
+					border: 0;
+					border-radius: 0.125rem;
+					font-size: 1rem;
+					&:hover{
+						background-color:var(--primary);
+						color: $white !important;
+						&::before{
+							border-color: $white;
+							color: $white;
+						}
+					}
+				}
+			}
+			
+		}
+				
+		@include respond('phone') {
+			min-width: 100%!important;
+			max-width: 100%!important;
+			
+			.picker__box{
+				padding: 0.9375rem;
+				margin: 0 0.625rem;
+			}
+		}
+	}
+	
+}
+
+.picker__button--clear:before{
+	margin: 0;
+	margin-#{$dlab-pos-right}: 0.45em;
+}
+.picker__button--close:before{
+	margin: 0;
+	margin-#{$dlab-pos-right}: 0.35em;
+}

public/scss/components/widget/_widget-social.scss

@@ -0,0 +1,102 @@
+.social-icon{
+    display: inline-block;
+    width: 2.5rem;
+    height: 2.5rem;
+    line-height: 2.5rem;
+    border-radius: 0.25rem;
+    text-align: center;
+    background: $body-bg;
+    margin-bottom: 0.5rem;
+    font-size: 1.25rem;
+
+    i{
+        // font-size: 0.875rem; 
+        color: $white
+    }
+    &.youtube{
+        background: $youtube;
+    }
+    &.facebook{
+        background: $facebook;
+    }
+    &.twitter{
+        background: $twitter;
+    }
+}
+.social-graph-wrapper {
+    text-align: center;
+    padding: 1.25rem;
+    position: relative;
+    color: $white;
+    border-bottom-#{$dlab-pos-left}-radius: 0.25rem;
+    border-bottom-#{$dlab-pos-right}-radius: 0.25rem;
+	
+    &.widget-facebook {
+        background-color: $facebook;
+    }
+    &.widget-twitter {
+        background-color: $twitter;
+    }
+    &.widget-linkedin {
+        background-color: $linkedin;
+    }
+    &.widget-googleplus {
+        background-color: $google-plus;
+    }
+    .s-icon {
+        font-size: 1.5rem;
+        position: relative;
+        // top: 0.625rem;
+        padding: 0 0.625rem;
+    }
+}
+
+.social-icon2{
+    a{
+        border: .1rem solid var(--primary);
+        display: block;
+        padding: 1rem;
+        margin-top: 1.5rem;
+        margin-bottom: .5rem;
+        border-radius: .3rem;
+        font-size: 1.6rem;
+    }
+
+    i{
+        font-size: 0.75rem;
+        color: var(--primary);
+    }
+}
+
+.social-icon3{
+    ul{
+        li{
+            display: inline-block;
+            a{
+                display: block;
+                i{
+                    font-size: 1.4rem;
+                    padding: 1rem .7rem;
+                    color: $l-ctd;
+                }
+                &:hover{
+                    i{
+                        color: var(--primary);
+                    }
+                }
+            }
+        }
+    }
+}
+
+.social-icons-muted{
+    ul li a i{
+        color: $muted;
+    }
+}
+
+.social-links {
+    a {
+        padding: .5rem;
+    }
+}

public/scss/components/widget/_widget-stat.scss

@@ -0,0 +1,195 @@
+.widget-stat {
+    .media {
+        padding: 0rem 0;
+        align-items: center;
+        &>span {
+            height: 5.3125rem;
+            width: 5.3125rem;
+            border-radius: 3.125rem;
+            padding: 0.625rem 0.75rem;
+            font-size: 2rem;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            color: $l-ctd;
+            min-width:5.3125rem;
+        }
+        @include custommq($min: 36rem) {}
+        .media-body {
+            p {
+                text-transform: uppercase;
+                font-weight: 500;
+                font-size: 0.875rem;
+                @at-root [data-theme-version="dark"] & {
+                    color: $white;
+                }
+            }
+            h3{
+				font-size: 2.5rem;
+				font-weight: 600;
+				margin: 0;
+				line-height: 1.2;
+			}
+            h4 {
+                font-size: 1.5rem;
+                display: inline-block;
+				vertical-align: middle;
+            }
+            span {
+                margin-#{$dlab-pos-left}: 0.3125rem;
+                
+            }
+        }
+    }
+	&[class*="bg-"] .media > span{
+		background-color:rgba(255,255,255,0.25);
+		color:$white;
+	}
+	&[class*="bg-"] .progress{
+		background-color:rgba(255,255,255,0.25) !important;
+	}
+	
+}
+[direction="rtl"] {
+	.widget-stat .media .media-body span{
+		margin-#{$dlab-pos-left}: 0;
+		margin-#{$dlab-pos-right}: 0.625rem;
+	}
+}
+.dez-widget-1{
+    .card {
+        background: #FFE7DB;
+        .card-body {
+            p {
+                color: #f87533;
+            }
+        }
+    }
+	.icon{
+		float : #{$dlab-pos-right};
+		width: 3.125rem;
+		height: 3.125rem;
+		display: flex;
+		align-items:center;
+		justify-content:center;
+		border-radius: 0.375rem;
+		font-size: 1.75rem;
+	}
+}
+.bgl-primary{
+    background: var(--rgba-primary-1);
+    border-color: var(--rgba-primary-1);
+	@at-root [data-theme-version="dark"] & {
+		background-color: var(--rgba-primary-1);
+		border-color: var(--rgba-primary-1);
+	}
+}
+.bgl-secondary{
+    background: $secondary-light;
+    border-color: $secondary-light;
+	@at-root [data-theme-version="dark"] & {
+		background-color: $secondary-opacity;
+		border-color: $secondary-opacity;
+	}
+
+}
+.bgl-success{
+    background: $success-light;
+    border-color: $success-light;
+	@at-root [data-theme-version="dark"] & {
+		background-color: $success-opacity;
+		border-color: $success-opacity;
+	}
+
+}
+.bgl-warning{
+    background: $warning-light;
+    border-color: $warning-light;
+	@at-root [data-theme-version="dark"] & {
+		background-color: $warning-opacity;
+		border-color: $warning-opacity;
+	}
+
+}
+.bgl-danger{
+    background: $danger-light;
+    border-color: $danger-light;
+	@at-root [data-theme-version="dark"] & {
+		background-color: $danger-opacity;
+		border-color: $danger-opacity;
+	}
+
+}
+.bgl-info{
+    background: $info-light;
+    border-color: $info-light;
+	@at-root [data-theme-version="dark"] & {
+		background-color: $info-opacity;
+		border-color: $info-opacity;
+	}
+
+}
+.bg-primary-light{
+    background: var(--rgba-primary-5);
+	@at-root [data-theme-version="dark"] & {
+		background-color: var(--rgba-primary-1);
+	}
+}
+.bg-secondary-light{
+   background: rgba($secondary-light, 0.5);
+   @at-root [data-theme-version="dark"] & {
+		background-color: rgba($secondary, 0.05);
+	}
+}
+.bg-success-light{
+   background:  rgba($success-light, 0.5);
+   @at-root [data-theme-version="dark"] & {
+		background-color: rgba($success, 0.05);
+	}
+}
+.bg-warning-light{
+   background:  rgba($warning-light, 0.5);
+   @at-root [data-theme-version="dark"] & {
+		background-color: rgba($warning, 0.05);
+	}
+}
+.bg-danger-light{
+   background:  rgba($danger-light, 0.5);
+	@at-root [data-theme-version="dark"] & {
+		background-color: rgba($danger, 0.05);
+	}
+}
+.bg-info-light{
+    background:  rgba($info-light, 0.5);
+	@at-root [data-theme-version="dark"] & {
+		background-color: rgba($info, 0.05);
+	}
+}
+
+
+.bgl-dark{
+    background: $dark-light;
+    border-color: $dark-light;
+}
+.bgl-light{
+    background: $light;
+    border-color: $light;
+}
+.overlay-box{
+	position:relative;
+	z-index:1;
+	&:after{
+		content:"";
+		width:100%;
+		height:100%;
+		#{$dlab-pos-left}:0;
+		top:0;;
+		position:absolute;
+		opacity:0.85;
+		background:var(--primary);
+		z-index: -1;
+	}
+}
+.rating-bar{
+    font-size: 0.8125rem;
+}

public/scss/components/widget/_widget-todo-list.scss

@@ -0,0 +1,115 @@
+.tdl-holder {
+  margin: 0 auto;
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+  li {
+    background-color: $white;
+    border-bottom: 0.0625rem solid $border;
+    // color: #252525;
+    list-style: none none;
+    margin: 0;
+    padding: 0;
+    span {
+      margin-#{$dlab-pos-left}: 2.1875rem;
+      // color: $l-ctd;
+      font-size: 1rem;
+      // font-weight: 600;
+      vertical-align: middle;
+      transition: all 0.2s linear;
+    }
+  }
+  label {
+    cursor: pointer;
+    display: block;
+    line-height: 3.125rem;
+    padding-#{$dlab-pos-left}: 1.5rem;
+    position: relative;
+    margin: 0 !important;
+
+    &:hover {
+      background-color: #eef1f6;
+      color: $dark;
+
+      
+
+      a {
+        color: $danger;
+      }
+      
+    }
+
+    a {
+      color: $white;
+      display: inline-block;
+      line-height: normal;
+      height: 100%;
+      text-align: center;
+      text-decoration: none;
+      width: 3.125rem;
+      -webkit-transition: all .2s linear;
+      -moz-transition: all .2s linear;
+      -o-transition: all .2s linear;
+      transition: all 0.2s linear;
+      padding: 1.125rem 0rem;
+      font-size: 1.125rem;
+      position: absolute;
+      #{$dlab-pos-right}: 0;
+    }
+  }
+  input {
+    &[type=checkbox] {
+      cursor: pointer;
+      opacity: 0;
+      position: absolute;
+      + i {
+        background-color: #fff;
+        border: 0.0625rem solid #e7e7e7;
+        display: block;
+        height: 1.25rem;
+        position: absolute;
+        top: 0.9375rem;
+        width: 1.25rem;
+        z-index: 1;
+        border-radius: 0rem;
+		font-size: 0.6875rem;
+		border-radius: 0.25rem;
+      }
+      &:checked {
+
+        + i {
+          background: var(--primary);
+          border-color: transparent;
+		  
+        }
+
+        + i::after {
+          content: "\f00c";
+          font-family: 'fontAwesome';
+          display: block;
+          #{$dlab-pos-left}: 0.125rem;
+          position: absolute;
+          top: -0.875rem;
+          z-index: 2;
+          color: $white;
+        }
+        ~ span {
+          text-decoration: line-through;
+          position: relative;
+        }
+      }
+    }
+    &[type=text] {
+      background-color: $white;
+      height: 3.125rem;
+      margin-top: 1.8125rem;
+      border-radius: 0.1875rem;
+
+      &::placeholder {
+        color: $dark;
+       }
+    }
+  }
+}

public/scss/components/widget/_widgets.scss

@@ -0,0 +1,8 @@
+@import "./widget-chart";
+@import "./widget-social";
+@import "./widget-stat";
+@import "./widget-todo-list";
+@import "./widget-messages";
+@import "./widget-pickadate";
+@import "./widget-card-list";
+@import "./widget-media";