/* Global Area Style
============================================*/
body {
    font-family: $body-font-family;
}
a {
    transition: $transition;
    color: $body-color;
	&:hover {
       color: $primary;
	}
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    color: $secondary;
	font: {
		weight: 700;
	}
}
h3 {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 0;
}
p {
	margin-bottom: 15px;
    line-height: 1.3;

	&:last-child {
        margin-bottom: 0;
    }
} 
img {
    max-width: 100%;
    height: auto;
}
.card {
    transition: $transition;
}
.label {
    font-size: 15px;
    margin-bottom: 12px;
    color: $secondary;
}
.form-control {
	background-color: $white; 
	border: 1px solid #dae0ec; 
    height: 56px;
    color: $secondary !important;
	font-size: 16px;
	padding: 14px 15px;
	width: 100%;
	transition: $transition;
    border-radius: 5px;
	&::placeholder {
		color: $body-color;
		font-size: 16px;
	}
	&:focus {
		background-color: $white;
		box-shadow: unset;
		outline: 0;
        border-color: #dae0ec;
		border-bottom: 2px solid $primary;
        color: #8695AA;
	}
	&.form-select  {
		cursor: pointer;
        color: #8695AA;
	}
    &.file {
        padding-top: 12px;
    }
}
.form-floating > .form-control:focus ~ label::after, .form-floating > .form-control:not(:placeholder-shown) ~ label::after, .form-floating > .form-control-plaintext ~ label::after, .form-floating > .form-select ~ label::after {
    background-color: transparent;
}
.form-floating {
    label {
        font-size: 16px;
        padding: 14px 15px;
    }
}
textarea {   
    &.form-control {
        height: auto;
    }
}
.form-check {
    margin-bottom: 0;
    .form-check-input {
        border: 2px solid $body-color;
        width: 18px;
        height: 18px;
        cursor: pointer;
        border-radius: 2px;
        background-color: transparent;
        &:focus {
            box-shadow: none;
            border-color: $primary;
        }
    }
    .form-check-input:checked[type=checkbox] {
        border-color: $primary;
        background-color: $primary;
    }
    .form-check-label {
        padding-left: 5px;
    }
    .form-check-input:checked[type=radio] {
        border-color: $primary;
        background-color: $primary;
    }
}
.filter-check {
    .form-check {
        .form-check-input:checked[type=checkbox] {
            border-color: $primary !important;
            background-color: $primary !important;
        }
    }
}
.default-src-form {
    .form-control {
        height: 40px;
        background-color: $body-bg;
        border-color: $body-bg;
        padding-left: 35px;
    }
    .start-0 {
        left: 15px !important;
    }
}


/* BG Image Area Style
============================================*/
.bg-img {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.gradient-bg {
    background: linear-gradient(180deg, #5c4edb, #796df6)
}
.gradient-bg-2 {
    background: linear-gradient(93deg, #5034CE 0%, #5D41EA 100%);
}
.gradient-bg-3 {
    background: linear-gradient(180deg, #333B47 0%, #394453 100%);
}
.gradient-bg-4 {
    background: linear-gradient(180deg, #817EFB 0%, #412DA6 100%);
}

/* Preloader Area Style
============================================*/
#preloader {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    position: fixed;
    background-color: $white;

    .preloader {
        transform: translate(-50%, -50%);
        position: absolute;
        left: 50%;
        top: 50%;

        .loader {
            position: relative;
            overflow: hidden;
            display: block;
            height: 150px;
            width: 150px;
            margin: {
                left: auto;
                right: auto;
            };
            div {
                height: 100%;
            }
        }
        .loader, .loader div {
            padding: 8px;
            border-radius: 50%;
            border: 2px solid transparent;
            animation: rotate linear 3.5s infinite;
            border: {
                top-color: $primary;
                border-bottom: $primary;
            };
        }
        .waviy {
            position: relative;
            text-align: center;
            -webkit-box-reflect: below -47px linear-gradient(transparent, rgba(0, 0, 0, .2));
            font: {
                size: 50px;
                weight: 700;
            };
            span {
                position: relative;
                color: $dark;
                animation-delay: .1s;
                display: inline-block;
                animation: waviy 1s infinite;

                &:nth-child(2) {
                    animation-delay: .2s;
                }
                &:nth-child(3) {
                    animation-delay: .3s;
                }
                &:nth-child(4) {
                    animation-delay: .4s;
                }
                &:nth-child(5) {
                    animation-delay: .5s;
                }
            }
        }
    }
}
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@keyframes waviy {
    0%, 40%, 100% {
        transform: translateY(0)
    }
    20% {
        transform: translateY(-20px)
    }
}
/*
Action Opt Style
======================================================*/
.action-opt {
	.btn {
		border: none;
		svg {
			width: 20px;
            height: 20px;
			stroke: #8F9DBD;
            position: relative;
            top: -1.6px;
		}
		&:focus {
			border: none;
			box-shadow: none;
		}
        &.bg {
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background-color: #F3F6F9;
            border-radius: 4px;
            svg {
                margin-right: 0 !important;
                stroke: $body-color !important;
            }
        }
	}
	.dropdown-menu {
        box-shadow: 0 4px 34px #6560f01a;
		li {
			.dropdown-item {
				font-size: 16px;
                font-weight: 500;
                padding: 5px 15px;
                display: flex;
                align-items: center;
                gap: 8px;
                color: $secondary;
				i {
					color: $primary;
                    font-size: 16px;
				}
				&:hover {
					background: rgba(92, 97, 242, 0.05);
                    color: $primary;
					svg {
						color: $primary;
					}
				}
			}
            &:last-child {
                .dropdown-item {
                    svg {
                        top: 0;
                    }
                }
            }
		}
	}
	&.hover {
		.dropdown-menu {
			display: block !important;
			opacity: 0;
			transition: $transition;
		}
		&:hover {
			.dropdown-menu {
				opacity: 1;
			}
		}
	}
}
.select-dropdown {
    position: relative;
    right: -5px;
    .dropdown-toggle {
        padding: 0;
        border: 0;
        padding-right: 22px;
        position: relative;
        &::after {
            border: 0;
            top: 50%;
            right: 0;
            content: "\ea4e";
            margin-top: -.5px;
            position: absolute;
            color: $primary;
            transform: translateY(-50%);
            font-family: remixicon !important;
        }
        &.down-arrow-white {
            &::after {
                color: $white;
            }
        }
    }
    .dropdown-menu {
        box-shadow: 0 4px 34px #6560f01a !important;
        max-height: 300px;
        padding-top: 10px;
        padding-bottom: 10px;
        .dropdown-item {
            font-size: 16px;
            font-weight: 500;
            padding: 5px 15px;
            &:active {
                color: $white !important;
            }
        }
    }
    &.border-style {
        border: 1px solid $white;
        color: $white;
        padding: 2px 9.5px;
        border-radius: 3px;
        right: 0;
        .dropdown-toggle {
            &::after {
                color: $white;
            }
        }
        .dropdown-menu {
            .dropdown-item {
                font-size: 14px;
                color: $white;
                font-weight: 400;
            }
        }
    }
}
.btn {
    padding: 14px 35px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    border-radius: 4px;
    &.py-11 {
        padding-top: 12px;
        padding-bottom: 12px;
    }
}

/*
Custom Rounded Area Style
======================================================*/
.rounded-10 {
    border-radius: 10px;
}

/*
Custom Transition Area Style
======================================================*/
.transition {
    transition: $transition;
}
.transition-x {
    transition: $transition;
    &:hover {
        transform: translateX(-5px);
    }
}
.transition-x-right {
    transition: $transition;
    &:hover {
        transform: translateX(5px);
    }
}
.transition-y {
    transition: $transition;
    &:hover {
        transform: translateY(-5px);
    }
}
.transition-y-bottom {
    transition: $transition;
    &:hover {
        transform: translateY(5px);
    }
}
.transition-zoom-in {
    transition: $transition;
    &:hover {
        transform: scale(1.3);
    }
}

/*
Custom Font Size Area Style
======================================================*/
.fw-800 {
    font-weight: 800;
}
.fw-900 {
    font-weight: 900;
}
.fs-10 {
    font-size: 10px;
}
.fs-11 {
    font-size: 11px;
}
.fs-12 {
    font-size: 12px;
}
.fs-13 {
    font-size: 13px;
}
.fs-14 {
    font-size: 14px;
}
.fs-14-5 {
    font-size: 14.5px;
}
.fs-15 {
    font-size: 15px;
}
.fs-16 {
    font-size: 16px;
}
.fs-17 {
    font-size: 17px;
}
.fs-18 {
    font-size: 18px;
}
.fs-19 {
    font-size: 19px;
}
.fs-20 {
    font-size: 20px;
}
.fs-21 {
    font-size: 21px;
}
.fs-22 {
    font-size: 22px;
}
.fs-23 {
    font-size: 23px;
}
.fs-24 {
    font-size: 24px;
}
.fs-25 {
    font-size: 25px;
}
.fs-26 {
    font-size: 26px;
}
.fs-27 {
    font-size: 27px;
}
.fs-28 {
    font-size: 28px;
}
.fs-29 {
    font-size: 29px;
}
.fs-30 {
    font-size: 30px;
}
.fs-32 {
    font-size: 32px;
}
.fs-35 {
    font-size: 35px;
}
.fs-36 {
    font-size: 36px;
}
.fs-40 {
    font-size: 40px;
}
.fs-45 {
    font-size: 45px;
}
.fs-48 {
    font-size: 48px;
}
.fs-50 {
    font-size: 50px;
}
.fs-100 {
    font-size: 100px;
}


/*
Custom Padding & Margin Area Style
======================================================*/
.ms-10 {
    margin-left: 10px;
}
.p-20 {
    padding: 20px;
}
.p-30 {
    padding: 30px;
}
.p-40 {
    padding: 40px;
}
.py-30 {
    padding-top: 30px;
    padding-bottom: 30px;
}
.pt-15 {
    padding-top: 15px;
}
.pt-20 {
    padding-top: 20px;
}
.pb-20 {
    padding-bottom: 20px;
}
.px-20 {
    padding-left: 20px;
    padding-right: 20px;
}
.py-20 {
    padding-top: 20px;
    padding-bottom: 20px;
}
.py-50 {
    padding-top: 50px;
    padding-bottom: 50px;
}
.pe-10 {
    margin-right: 10px;
}
.pe-60 {
    padding-right: 60px;
}
.ps-20 {
    padding-left: 20px;
}
.ps-28 {
    padding-left: 28px;
}
.pb-10 {
    padding-bottom: 10px;
}
.mb-6 {
    margin-bottom: 6px;
}
.mb-9 {
    margin-bottom: 9.4px;
}
.mb-10 {
    margin-bottom: 10px;
}
.mb-11 {
    margin-bottom: 11px;
}
.mb-12 {
    margin-bottom: 12px;
}
.mb-14 {
    margin-bottom: 14px;
}
.mb-20 {
    margin-bottom: 20px;
}
.mb-25 {
    margin-bottom: 25px;
}
.mb-30 {
    margin-bottom: 30px;
}
.ms-12 {
    margin-left: 12px;
}
.me-12 {
    margin-right: 12px;
}
.ms-15 {
    margin-left: 15px;
}
.ms-30 {
    margin-left: 30px;
}
.ms-20 {
    margin-left: 20px;
}
.ms-80 {
    margin-left: 80px;
}
.ms-50 {
    margin-left: 50px;
}
.me-minus-10 {
    margin-right: -10px;
}
.me-minus-12 {
    margin-right: -12px;
}

/*
Line Height Area Style
======================================================*/
.lh-1-8 {
    line-height: 1.8;
}
.lh-1-7 {
    line-height: 1.7;
}

/*
Custom Hover Area Style
======================================================*/
.hover-text {
    transition: $transition;
    &:hover {
        color: $primary !important;
        i {
            color: $primary !important; 
        }
    }
}
.hover-text-danger {
    transition: $transition;
    &:hover {
        color: $danger !important;
        i {
            color: $danger !important; 
        }
    }
}
.hover-text-success {
    transition: $transition;
    &:hover {
        color: $success !important;
        i {
            color: $success !important; 
        }
    }
}
.hover-white {
    transition: $transition;
    &:hover {
        color: $white !important;
        i {
            color: $white !important; 
        }
    }
}
.hover-bg {
    transition: $transition;
    &:hover {
        background-color: $primary !important;
        color: $white !important;
        i {
            color: $white !important; 
        }
    }
}
.hover-bg-danger {
    transition: $transition;
    &:hover {
        background-color: $danger !important;
        color: $white !important;
        i {
            color: $white !important; 
        }
    }
}
.cursor {
    cursor: pointer;
}
.cursor-move {
    cursor: move;
}
.product-upload {
	input[type=file] {
		display: none;
	}
	.file-upload {
		display: inline-block;
		cursor: pointer;
		line-height: 40px;
		text-align: center;
		font-size: 16px;
		width: 100%;
	}
}
.top-1 {
    top: 1px;
}
.top-2 {
    top: 2px;
}
.top-3 {
    top: 3px;
}
.top-4 {
    top: 4px;
}
.top-5 {
    top: 5px;
}
.top-6 {
    top: 6px;
}
.top-7 {
    top: 7px;
}
.top-8 {
    top: 8px;
}
.top-9 {
    top: 9px;
}
.top-10 {
    top: 10px;
}
button {
    i {
        transition: $transition;
    }
    &:hover {
        i {
            color: $primary;
        }
    }
}
.btn-close {
    &:focus {
        box-shadow: none;
    }
}
.copy-btn {
    margin-top: 144px;
    margin-right: 35px;
    padding: 8px 15px;
    font-weight: normal;
    font-size: 14px;
    &:hover {
        background-color: $primary !important;
        color: $white;
    }
}
.carousel-control-prev {
    width: 38px;
    height: 38px;
    background-color: $primary;
    padding: 10px;
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    border-radius: 5px;
    opacity: 1;
}
.carousel-control-next {
    width: 38px;
    height: 38px;
    background-color: $primary;
    padding: 10px;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    border-radius: 5px;
    opacity: 1;
}
.rating {
    i {
        transition: $transition;
        font-size: 20px;
        cursor: pointer;
    }
    &.active {
        i {
            color: #f7d700;
        }
    }
}

/*
Scroll Bar Style
======================================================*/
.scroll-bar {
    margin-top: 0 !important;
    overflow: auto;
	padding-right: 5px;
    /* width */
    &::-webkit-scrollbar {
        width: 6px;
		height: 6px;
        transition: $transition;
		border-radius: 0;
    }
    /* Track */
    &::-webkit-scrollbar-track {
        background: #F0F0F4;
		transition: $transition;
		border-radius: 0;
    }
    /* Handle */
    &::-webkit-scrollbar-thumb {
        background: #e0e0e2;
		transition: $transition;
		border-radius: 0;
    }
    /* Handle on hover */
    &::-webkit-scrollbar-thumb:hover {  
        background: $primary;
		border-radius: 0;
    }
	&.active {
		&::-webkit-scrollbar-track {
			background: #F0F0F4;
			transition: $transition;
			border-radius: 0;
		}
		/* Handle */
		&::-webkit-scrollbar-thumb {
			background: $primary;
			transition: $transition;
			border-radius: 0;
		}
		/* Handle on hover */
		&::-webkit-scrollbar-thumb:hover {  
			background: $primary;
			border-radius: 0;
		}
	}
}
.tag-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px;
    .tag {
        background-color: $primary;
        color: $white;
        padding: 4px 8px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        cursor: pointer;
    }
    .tag-close {
        margin-left: 4px;
        cursor: pointer;
    }
}

/*
Theme Settings Style
======================================================*/
.offcanvas-backdrop {
    background-color: transparent;
}
.light {
    display: none;
}

.theme-settings-btn {
    animation: rotation 5s infinite linear;
    z-index: -9;
}
@keyframes rotation {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(359deg);
    }
}

/* Courses Area Style
============================================*/
.course-accordion {
    .accordion-button {
        padding: 17.5px 20px 17.5px 45px;
        &:focus {
            box-shadow: none;
        }
        &::after {
            position: absolute;
            left: 15px;
            content: "\ea4e";
            font-family: remixicon !important;
            background-image: unset;
            font-size: 24px;
            top: 13px;
            width: auto;
        }
        &:not(.collapsed) {
            box-shadow: none;
            &::after {
                top: 20px;
            }
        }
    }
}

/* Last Child None Area Style
============================================*/
.last-child-none {
    .child {
        &:last-child {
            border-bottom: 0 !important;
            padding-bottom: 0 !important;
            margin-bottom: 0 !important;
        }
    }
    li {
        &:last-child {
            border-bottom: 0 !important;
            padding-bottom: 0 !important;
            margin-bottom: 0 !important;
        }
    }
}
.last-child-only-border-none {
    .child {
        &:last-child {
            border-bottom: 0 !important;
        }
    }
    li {
        &:last-child {
            border-bottom: 0 !important;
        }
    }
}
.last-child-none-right {
    .child {
        &:last-child {
            border-bottom: 0 !important;
            padding-right: 0 !important;
            margin-right: 0 !important;
        }
    }
    li {
        &:last-child {
            border-bottom: 0 !important;
            padding-right: 0 !important;
            margin-right: 0 !important;
        }
    }
}

/*
simplebar Style
======================================================*/
.simplebar-scrollbar {
    width: 5px;
    border-radius: 0;
    right: 0;
    &::before {
        border-radius: 0;
        background-color: #cccccc;           
    }
}

/*
Tabs Default Active Style
======================================================*/
.tabs-default-active {
    .nav-item {
        .nav-link {
            &.active {
                background-color: $primary !important;
                color: $white !important;
                border-color: $primary !important;
                span {
                    color: $white !important;
                }
                i {
                    color: $white !important;
                }
            }
        }
    }
}
.tabs-default-active-text {
    .nav-item {
        .nav-link {
            &.active {
                color: $primary !important;
                border-color: $primary !important;
                span {
                    color: $white !important;
                }
                i {
                    color: $white !important;
                }
            }
        }
    }
}
.tabs-description {
    .nav-item {
        .nav-link {
            position: relative;
            &::before {
                content: "";
                position: absolute;
                bottom: 0;
                width: 0;
                right: 0;
                height: 3px;
                background-color: $primary;
                transition: $transition;
            }
            &.active {
                color: $primary !important;
                &::before {
                    background-color: $primary;
                    right: auto;
                    left: 0;
                    width: 100%;
                }
            }
        }
    }
}

/*
Swiper Pagination Style
======================================================*/
.swiper-pagination2 {
    .swiper-pagination-bullet {
        background-color: $white;
        opacity: 1;
        width: 5px;
        height: 5px;
        margin: 0 3px !important;
        &.swiper-pagination-bullet-active {
            background-color: $primary;
        }
    }
}

/*
Breadcrumb Style
======================================================*/
.breadcrumb {
    gap: 24px;
    .breadcrumb-item {
        position: relative;
        padding: 0;
        color: $body-color;
        &::before {
            display: none;
        }
        &::after {
            content: "";
            position: absolute;
            width: 5px;
            height: 5px;
            border-radius: 50px;
            background-color: #a0a0a0;
            right: -14px;
            top: 50%;
            transform: translateY(-50%);
        }
        &:last-child {
            margin-right: 0;
            &::after {
                display: none;
            }
        }
    }
}

/*
Countdown Add To cart Style
======================================================*/
.countdown-for-add-to-cart {
    border-radius: 3px;
    .plus-minus {
        width: 30px;
        height: 44px;
        font-size: 20px;
        border: none;
        cursor: pointer;
        color: $body-color;
        transition: $transition;
        &:hover {
            color: $primary;
        }
    }
    #count {
        font-size: 15px;
        width: 40px;
        height: 44px;
        line-height: 44px;
        text-align: center;
        color: $secondary;
    }
}

/* File Upload Area Style
============================================*/
.only-file-upload {
    .form__file {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        cursor: pointer;
        opacity: 0;
    }
    .form__files-container {
        display: flex;
        width: 100%;
        padding: 5px 0;
        justify-content: space-between;
        align-items: center;
        background-color: $border-color;
        padding: 10px;
        margin-top: 10px;
        border-radius: 6px;
    }
    .form__text {
        font-size: 14px;
        color: $secondary;
        max-width: 450px;
        whitespace: no-wrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .form__icon {
        font-size: 22px;
        color: $primary;
        text-decoration: none;
        background-color: rgba(31, 100, 241, 0.1);
        width: 35px;
        height: 35px;
        line-height: 35px;
        text-align: center;
        border-radius: 4px;
        display: inline-block;
        &:hover {
            background-color: $primary;
            color: $white;
        }
    }
}

/* Avatar Upload Area Style
============================================*/
.avatar-upload {
    position: relative;
    max-width: 210px;
    .avatar-edit {
        position: absolute;
        right: 4px;
        bottom: 4px;
        z-index: 1;
        input {
            display: none;
            + label {
                display: inline-block;
                width: 50px;
                height: 50px;
                line-height: 50px;
                margin-bottom: 0;
                border-radius: 100%;
                background: $white;
                border: 1px solid #dae0ec;
                cursor: pointer;
                font-weight: normal;
                transition: $transition;
                font-size: 20px;
                &:after {
                    content: "\eb31";
                    font-family: remixicon !important;
                    color: $secondary;
                    position: absolute;
                    top: 0;
                    left: 1px;
                    right: 0;
                    text-align: center;
                    margin: auto;
                }
            }
        }
    }
    .avatar-preview {
        width: 210px;
        height: 210px;
        position: relative;
        border-radius: 100px;
        border: 10px solid $white;
        background-color: $white;
        > div {
            width: 100%;
            height: 100%;
            border-radius: 4px;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            border-radius: 100px;
        }
    }
}

/* Wizard Area Style
============================================*/
.wizard-tabs {
    position: relative;
    z-index: 1;
    &::before {
        content: "";
        position: absolute;
        top: 25px;
        left: 0;
        right: 0;
        width: 100%;
        height: 1px;
        background-color: #A9A9C8;
        opacity: 0.1;
        z-index: -1;
    }
    .nav-item {
        .nav-link {
            background-color: #f1f2fd !important;
            &.active {
                background-color: $primary !important;
                span {
                    color: $white !important;
                }
            }
        }
    }
    .wh-48 {
        width: 48px;
        height: 48px;
    }
}
.wizard-tabs2 {
    position: relative;
    z-index: 1;
    &::before {
        content: "";
        position: absolute;
        top: 25px;
        left: 0;
        right: 0;
        width: 100%;
        height: 2px;
        background-color: #A9A9C8;
        opacity: 0.1;
        z-index: -1;
    }
    .nav-item {
        .nav-link {
            background-color: $white;
            padding: 0 30px !important;
            border: none;
            span {
                background-color: #f1f2fd !important;
                line-height: 48px;
            }
            &.active {
                span {
                    color: $white !important;
                    background-color: $primary !important;
                }
            }
        }
        &:first-child {
            .nav-link {
                padding-left: 0 !important;
            }
        }
        &:last-child {
            .nav-link {
                padding-right: 0 !important;
            }
        }
    }
    .wh-48 {
        width: 48px;
        height: 48px;
    }
}

/* FAQ Example Area Style
============================================*/
.example-one {
    &.course-accordion {
        .accordion-button {
            padding-left: 30px !important;
            &:not(.collapsed)::after {
                top: -2.5px;
                left: 0;
            }
            &::after {
                top: -2.5px;
                left: 0;
                font-size: 18px;
            }
        }
    }
}
.example-two {
    &.course-accordion {
        .accordion-button {
            padding-left: 30px !important;
            &:not(.collapsed)::after {
                top: 2px;
                left: 0;
            }
            &::after {
                top: 2px;
                left: 0;
            }
        }
    }
}

/* Countdown Area Style
============================================*/
.clockdiv {
    margin-top: 30px;
    margin-bottom: 30px;
    .time {
        color: $secondary;
        font-size: 50px;
        font-weight: 600;
        position: relative;
        &::before {
            content: ":";
            position: absolute;
            right: -30px;
            top: 50%;
            transform: translateY(-56%);

        }
        &:last-child {
            &::before {
                display: none;
            }
        }
    }
}

/* Default Badge Area Style
============================================*/
.default-badge {
    padding: 3px 10.24px; 
    border-radius: 3px;
    &.style-two {
        padding: 1px 11.5px; 
    }
}

/* Wish Style
============================================*/
.wish-btn {
    &.favorite-d {
        background-color: $danger !important;
        i {
            color: $white !important;
        }
    }
}

/* Schedule Tabs Style
============================================*/
.schedule-tabs {
    margin-bottom: 20px;
    padding-bottom: 20px;
    .nav-item {
        .nav-link {
            border: none;
            border-radius: 100px;
            padding: 18px 17px;
            background-color: #EFF3F9;
            span {
                transition: $transition;
            }
            &.active {
                background-color: $primary-50;
                span {
                    color: $white !important;
                }
            }
            &:hover {
                background-color: $primary-50;
                span {
                    color: $white !important;
                }
            }
        }
    }
}

/* Available Style
============================================*/
.available-bg {
    position: relative;
    z-index: 1;
    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 50%;
        background-color: #796DF6;
        z-index: -1;
        border-radius: 10px;
    }   
}
.quick-view-bg {
    position: relative;
    z-index: 1;
    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 50%;
        background-color: #2ED47E;
        z-index: -1;
        border-radius: 10px;
    } 
}


/* Max width 576px */
@media only screen and (max-width: 576px) {

    .ms-80 {
        margin-left: 0;
    }

}

/* Max width 767px */
@media only screen and (max-width: 767px) {

    h3 {
        font-size: 16px;
    }
    .fs-26 {
        font-size: 22px;
    }
    .fs-48 {
        font-size: 24px;
    }
    .py-50 {
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .for-mobile-width {
        width: 65px !important;
        height: 65px !important;
        line-height: 65px !important;
    }
    .p-20 {
        padding: 15px;
    }
    .p-30 {
        padding: 15px;
    }
    .btn {
        padding: 14px 20px;
    }
    .tracking-card {
        .fs-16 {
            font-size: 14px;
            font-weight: normal !important;
        }
    }
    .for-mobile-sellers {
        .bg-light {
            width: 80px !important;
            height: 80px !important;
            line-height: 80px !important;
        }
    }
    .label {
        font-size: 14px !important;
    }
    .coming-soon {
        &.vh-100 {
            height: 100% !important;
        }
        h2 {
            margin-bottom: 15px !important;
        }
        .main-content {
            min-height: 100% !important;
        }
    }
    .clockdiv .time {
        font-size: 20px;
        &::before {
            right: -10px;
        }
    }
    .zinnia-card {
        padding: 20px !important;
        .hospital-content {
            margin-bottom: 15px !important;
        }
    }
    .quick-view-bg {
        &.p-40 {
            padding: 15px !important;
        }
        .p-40 {
            padding: 15px !important;
        }
    }

}

/* Min width 1199px */
@media only screen and (max-width:1199px) {

    .fs-100 {
        font-size: 50px;
    }
    .pe-60 {
        padding-right: 0;
    }

}

/* Min width 1600px */
@media only screen and (max-width:1600px) {

    .for-responsive-board {
        overflow: auto;
        .width-1600 {
            width: 1280px;
            
        }
    }
    
}

/* Min width 768px to Max width 992px */
@media only screen and (min-width: 768px) and (max-width: 991px) {

    h3 {
        font-size: 16px;
    }
    .fs-26 {
        font-size: 22px;
    }
    .py-50 {
        padding-top: 20px;
        padding-bottom: 20px;
    }

}

/* Min width 992px to Max width 1199px */
@media only screen and (min-width: 992px) and (max-width: 1199px)  {

    .fs-100 {
        font-size: 50px;
    }

}

/* Min width 1200px to Max width 1399px */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {

    .fs-100 {
        font-size: 50px;
    }

}

/* Min width 1400px to Max width 1799px */
@media only screen and (min-width: 992px) and (max-width: 1599px) {

    .col-xxxl-12 {
        width: 100%;
    }
    .col-xxxl-6 {
        width: 50%;
    }
    .order-custom-3 {
        order: 3 !important;
    }
    .order-custom-2 {
        order: 2 !important;
    }

}

/* Min width 992px to Max width 1650px */
@media only screen and (min-width: 992px) and (max-width: 1650px)  {

    .col-xxxxl-12 {
        width: 100%;
    }

}

/* Min width 1200px to Max width 1700px */
@media only screen and (min-width: 1200px) and (max-width: 1700px)  {

    .col-xxxl-4 {
        width: 33.33%;
    }

}

/* Min width 1600px to Max width 1700px */
@media only screen and (min-width: 1600px) and (max-width: 1700px) {

    .schedule-tabs {
        .nav-item {
            .nav-link {
                padding: 18px 15px;
            }
        }
    }

}

/* Min width 992px to Max width 1840px */
@media only screen and (min-width: 768px) and (max-width: 1840px) {

    .col-xxxxl-6 {
        width: 50%;
    }
    .col-xxxxxl-12 {
        width: 100%;
    }

}

/* Min width 992px */
@media only screen and (min-width: 992px) {

    .w-930 {
        width: 930px;
    }
    .py-100 {
        padding-top: 100px;
        padding-bottom: 100px;
    } 
    .px-130 {
        padding-left: 130px;
        padding-right: 130px;
    }

}

/* 
Dark Mode SCSS 
===================================================*/
[data-theme=dark] {

    .light {
        display: inline-block;
        .material-symbols-outlined {
            color: $white !important;
        }
    }
    .dark {
        display: none;
    }

    background-color: $dark-body-bg !important;
    p {
        color: $dark-body-color !important;
    }
    ul {
        li {
            color: $dark-body-color !important;
        }
    }
    ol {
        li {
            color: $dark-body-color !important;
        }
    }
    .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
        color: $white;
    }
    .text-secondary {
        color: $white !important;
    }
    .text-dark {
        color: $white !important;
    }
    .text-body {
        color: $dark-body-color !important;
    }
    .card {
        background-color: $dark-card-bg !important;
        border: $dark-card-bg;
        .card-body {
            .nav-tabs {
                border-color: $dark-border;
                .nav-link {
                    &.active {
                        background-color: $dark-body-bg!important;
                        border-color: $dark-card-bg !important;
                        color: $white !important;
                    }
                    &:hover {
                        border-color: $dark-card-bg !important;
                    }
                }
            }
        }
    }
    .bg-primary {
        p {
            color: $white !important;
        }
    }
    .form-control {
        background-color: $dark-card-bg !important;
        border-color: $dark-input-bg !important;
        color: $white !important;
        &:focus {
            border-color: $primary !important;
        }
    }
    .border {
        border-color: $dark-border !important;
    }
    .border-top {
        border-color: $dark-border !important;
    }
    .border-bottom {
        border-color: $dark-border !important;
    }
    .border-start {
        border-color: $dark-border !important;
    }
    .offcanvas {
        background-color: $dark-card-bg !important;
        .offcanvas-header {
            background-color: $dark-border !important;
        }
        .btn-close {
            filter: invert(1);
            opacity: 1
        }
    }
    .border-white  {
        border-color: $dark-card-bg !important;
    }
    .card {
        border-color: $dark-card-bg !important;
        &.bg-body-bg {
            background-color: #28333f !important;
        }
    }
    .sidebar-area {
        border-color: $dark-card-bg !important;
    }
    .footer-area {
        border-color: $dark-card-bg !important;
    }
    .border-color-body-bg {
        border-color: $dark-card-bg !important;
    }
    .border-primary-50 {
        border-color: $dark-card-bg !important;
    }
    .border-border-color {
        border-color: $dark-border !important;
    }
    .icon-bg {
        .rounded-circle {
            background-color: #ffffff0d !important;
        }
    }
    .modal-content {
        background: $dark-card-bg !important;
    }
    .border-border-color-40 {
        border-color: $dark-input-bg !important;
    }
    .label {
        color: $white;
    }
    ::-webkit-calendar-picker-indicator{filter:invert(1)}
    .btn-close {
        opacity: 1;
        filter: invert(1);
    }
    .bg-light {
        &.bg-for-dark {
            background-color: $dark-body-bg !important;
        }
    }
    .bg-primary {
        &.bg-for-dark {
            color: $white !important;
        }
    }
    .select-dropdown {
        .dropdown-menu {
            background-color: $dark-body-bg !important;
            .dropdown-item {
                &:hover {
                    background-color: $dark-card-bg;
                }
                &:focus {
                    background-color: $primary;
                }
            }
        }
    }
    .action-opt {
        .dropdown-menu {
            background-color: $dark-body-bg !important;
            .dropdown-item {
                color: $white;
                &:hover {
                    background-color: $dark-card-bg;
                }
                &:focus {
                    background-color: $primary;
                    color: $white;
                    i {
                        color: $white;
                    }
                }
            }
        }
    }
    .border-border-color-50 {
        border-color: $dark-border !important;
    }
    .border-border-color-60 {
        border-color: $dark-border !important;
    }
    .ql-toolbar.ql-snow {
        border-color: $dark-border;
    }
    .ql-container.ql-snow {
        border-color: $dark-border !important;
    }
    .for-dark-bg-light {
        background-color: $dark-body-bg !important;
    }
    .btn {
        &.bg-white {
            background-color: $dark-card-bg !important;
            &:hover {
                background-color: $primary !important;
            }
        }
    }
    .progress {
        &.bg-light {
            background-color: $dark-body-bg !important;
        }
    }
    .btn-outline-border-color-50 {
        border-color: $dark-border;
        &:hover {
            background-color: $primary;
        }
    }
    .wish-btn {
        background-color: $dark-body-bg !important;
    }
    .countdown-for-add-to-cart {
        background-color: $dark-body-bg !important;
        #count {
            color: $white;
        }
    }
    .bg-for-dark-description {
        background-color: $dark-body-bg !important;
    }
    .order-tracking-for-dark {
        .bg-white {
            background-color: $dark-body-bg !important;
        }
    }
    .for-mobile-sellers {
        .bg-light {
            background-color: $dark-body-bg !important;
        }
    }
    .accordion-item {
        background-color: $dark-body-bg !important;
        .accordion-button {
            background-color: $dark-body-bg !important;
        }
        .accordion-body  {
            background-color: $dark-body-bg !important;
        }
    }
    .timeline-wrap .timeline-item-2 .text {
        background-color: $dark-body-bg;
    }
    .timeline-item .border-style-for-timeline {
        border-color: $dark-border;
    }
    .example-one {
        .accordion-item .accordion-button {
            background-color: $dark-card-bg !important;
        }
    }
    .example-two {
        .accordion-item .accordion-button {
            background-color: $dark-card-bg !important;
        }
    }
    .testimonials-dark {
        background-color: $dark-body-bg !important;
    }
    .coming-soon {
        .logo {
            filter: brightness(100);
        }
    }
    .clockdiv .time {
        color: $white !important;
    }
    .find-btn {
        .btn {
            background-color: $dark-btn-bg;
            border: $dark-border
        }
    }
    .dark-circles {
        .for-dark {
            background-color: $dark-body-bg !important;
        }
        .for-dark1 {
            background: conic-gradient(#1CDFF4 60%, #000 60%) !important;
        }
        .for-dark2 {
            background: conic-gradient(#FC7013 28%, #000 28%) !important;
        }
        .for-dark3 {
            background: conic-gradient(#2ECC71 10%, #000 10%) !important;
        }
        .for-dark4 {
            background: conic-gradient(#E74C3C 2%, #000 2%) !important;
        }
    }
    .schedule-card-for-dark {
        .p-20.mb-10 {
            background-color: $dark-body-bg !important;
            &.border-primary-50 {
                border-color: $primary-50 !important;
            }
            .bg-white {
                background-color: $dark-card-bg !important;
            }
        }
        .text-secondary-50 {
            color: $white !important;
        }
    }
    .for-dark-mode-report {
        .border-light-50 {
            border-color: $dark-border !important;
        }
        .rounded-1.d-flex {
            box-shadow: none !important;
            background-color: $dark-body-bg;
        }
    }
    .for-dark-bg-body-bg {
        background-color: $dark-body-bg !important;
    }
    .border-border-color-50 {
        border-color: $dark-border !important;
    }
    .schedule-tabs .nav-item .nav-link {
        background-color: $dark-body-bg;
        &.active {
            background-color: $primary;
        }
    }
}

/* RTL SCSS
===================================================*/
.rtl {
    direction: rtl;
    .ms-1 {
        margin-left: 0 !important;
        margin-right: 0.25rem !important;
    }
    .ms-2 {
        margin-left: 0 !important;
        margin-right: 0.5rem !important;
    }
    .ms-3 {
        margin-left: 0 !important;
        margin-right: 1rem !important;
    }
    .ms-4 {
        margin-left: 0 !important;
        margin-right: 1.5rem !important;
    }
    .ms-5 {
        margin-left: 0 !important;
        margin-right: 3rem !important;
    }
    .me-1 {
        margin-right: 0 !important;
        margin-left: 0.25rem !important;
    }
    .me-2 {
        margin-right: 0 !important;
        margin-left: 0.5rem !important;
    }
    .me-3 {
        margin-right: 0 !important;
        margin-left: 1rem !important;
    }
    .me-4 {
        margin-right: 0 !important;
        margin-left: 1.5rem !important;
    }
    .me-5 {
        margin-right: 0 !important;
        margin-left: 3rem !important;
    }
    .ms-xxl-3 {
        margin-left: 0 !important;
        margin-right: 1rem !important;
    }
    .ms-10 {
        margin-left: 0;
        margin-right: 10px;
    }
    .ms-12 {
        margin-left: 0;
        margin-right: 12px;
    }
    .me-12 {
        margin-right: 0;
        margin-left: 12px;
    }
    .ms-15 {
        margin-left: 0;
        margin-right: 15px;
    }
    .ms-30 {
        margin-left: 0;
        margin-right: 30px;
    }
    .ms-20 {
        margin-left: 0;
        margin-right: 20px;
    }
    .ms-sm-3 {
        margin-left: 0 !important;
        margin-right: 1rem !important;
    }
    .ms-80 {
        margin-left: 0;
        margin-right: 80px;
    }
    .ms-50 {
        margin-left: 0;
        margin-right: 50px;
    }
    .me-minus-10 {
        margin-right: 0;
        margin-left: -10px;
    }
    .me-minus-12 {
        margin-right: 0;
        margin-left: -12px;
    }
    .ps-1 {
        padding-left: 0 !important;
        padding-right: 0.25rem !important;
    }
    .ps-2 {
        padding-left: 0 !important;
        padding-right: 0.5rem !important;
    }
    .ps-3 {
        padding-left: 0 !important;
        padding-right: 1rem !important;
    }
    .ps-4 {
        padding-left: 0 !important;
        padding-right: 1.5rem !important;
    }
    .ps-5 {
        padding-left: 0 !important;
        padding-right: 3rem !important;
    }
    .ps-20 {
        padding-left: 0;
        padding-right: 20px;;
    }
    .ps-28 {
        padding-left: 0;
        padding-right: 28px;
    }
    .pe-1 {
        padding-right: 0 !important;
        padding-left: 0.25rem !important;
    }
    .pe-2 {
        padding-right: 0 !important;
        padding-left: 0.5rem !important;
    }
    .pe-3 {
        padding-right: 0 !important;
        padding-left: 1rem !important;
    }
    .pe-4 {
        padding-right: 0 !important;
        padding-left: 1.5rem !important;
    }
    .pe-xxl-4 {
        padding-right: 0 !important;
        padding-left: 1.5rem !important;
    }
    .pe-5 {
        padding-right: 0 !important;
        padding-left: 3rem !important;
    }
    .pe-60 {
        padding-right: 0;
        padding-left: 60px;
    }
    .ps-0 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .pe-10 {
        margin-right: 0;
        margin-left: 10px;
    }
    .ms-auto {
        margin-left: 0 !important;
        margin-right: auto !important;
    }
    .ps-xxl-4 {
        padding-left: 0 !important;
        padding-right: 1.5rem !important;
    }
    .text-start {
        text-align: right !important;
    }
    .text-end {
        text-align: left !important;
    }
    .text-sm-end {
        text-align: left !important;
    }
    .start-0 {
        left: auto !important;
        right: 0 !important;
    }
    .end-0 {
        right: auto !important;
        left: 0 !important;
    }
    .main-content {
        padding-left: 12px;
        padding-right: 270px;
    }
    .theme-settings-btn {
        right: auto !important;
        left: 24px !important;
    }
    .offcanvas {
        right: auto;
        left: 0;
        transform: translateX(-150%);
        &.show {
            transform: translateX(0);
        }
    }
    .global-right-list {
        li {
            margin-right: 0 !important;
            margin-left: -20px !important;
            &:first-child {
                margin-left: 0;
            }
        }
    }
    .form-floating > label {
        left: auto;
        right: 0;
    }
    .btn-close {
        margin-left: 0;
        margin-right: auto;
    }
    .last-child-none-right {
        li {
            &:last-child {
                margin-left: 0 !important;
            }
        }
    }
    .courses-slide {
        direction: ltr;
        .ms-4 {
            margin-right: 0 !important;
            margin-left: 24px !important;
        }
    }
    .breadcrumb .breadcrumb-item::after {
        right: auto;
        left: -14px;
    }
    .form-select {
        background-position: left 0.75rem center;
    }
    @media only screen and (max-width: 576px) {
        .ms-80 {
            margin-right: 0;
        }
        .ms-sm-3 {
            margin-right: 0 !important;
        }
    }
    .coming-soon {
        .shape {
            transform: scaleX(-1);
        }
        .time {
            &::before {
                right: auto;
                left: -30px;
            }
        }
    }
    .timeline-item {
        padding-left: 0;
        padding-right: 90px;
    }
    .timeline-item {
        .border-style-for-timeline {
            padding-left: 0;
            padding-right: 30px;
            border-left: none;
            border-right: 1px dashed #D5D9E2;
            &::before {
                left: auto;
                right: -6px;
            }
        }
        .time-line-date {
            left: auto;
            right: 0;
        }
    }
    i.password-toggle-icon.translate-middle-y.top-50.position-absolute.cursor.text-secondary.ri-eye-off-line {
        right: auto !important;
        left: 15px !important;
    }
    .quick-view-bg {
        .border-start {
            border-left: none !important;
            border-right: 1px solid !important;
            border-color: $border-color-90;
        }
    }
}