/*
==================================
Table of content
==================================

1. global
2. Header
3. Loader
4. Icons
5. Landing
6. Swiper
7. Footer
8. Forms
9. Card
10. Filter
11. Product
12. Menu
13. Color settings
14. Chart
15. Lists
16. Offers
17. Responsive
18. Responsive
19. Button
20. darkmode
21. rtl
22. responsive
*/
/*------ 1. Global -------*/
html {
    width: 100%;
}

@font-face {
    font-family: "BoingSemiBold";
    src: url("../fonts/boing_bold.woff2") format("woff");
}

@font-face {
    font-family: "Poppins-medium";
    src: url("../fonts/poppins-medium.otf") format("otf");
}

@font-face {
    font-family: "Poppins-bold";
    src: url("../fonts/Poppins-Bold.otf") format("otf");
}

@font-face {
    font-family: "Poppins-light";
    src: url("../fonts/Poppins-Light.otf") format("otf");
}

@font-face {
    font-family: "Poppins-thin";
    src: url("../fonts/Poppins-Thin.otf") format("otf");
}

@font-face {
    font-family: "Poppins-regular";
    src: url("../fonts/Poppins-Regular.otf") format("otf");
}

.font-poppins-light {
    font-family: "Poppins-light", serif !important;
}

.font-poppins-thin {
    font-family: "Poppins-thin", serif !important;
}

.font-poppins-regular {
    font-family: "Poppins-regular", serif !important;
}

.font-poppins-medium {
    font-family: "Poppins-medium", serif !important;
}

.font-poppins-bold {
    font-family: "Poppins-bold", serif !important;
}

body {
    font-size: 16px;
    font-family: "Roboto", sans-serif;
    color: #222222;
    background-position: center top;
    background-size: cover;
    overflow-x: hidden;
}

html, body, main, .modal main, .modal footer {
    /* background: #f5f5f6 !important; */
    /*background: #ededed;*/
    /*background: #f5f5f5;*/
}

/* chris fixing */

.card-header{
    background-color:transparent;
}

.modal main{
    max-height: calc(100vh - 4rem);
    overflow-y: scroll;
}

h1,
h2,
h3,
h4,
h5,
h6,
.btn {
    font-family: "Poppins-medium", sans-serif;
    font-weight: 500;
}

h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child,
h6:last-child,
.btn:last-child {
    margin-bottom: 0;
}

p:last-child {
    margin-bottom: 0;
}

.w-50 {
    width: 50%;
}

.opacity-0 {
    opacity: 0;
}

.base-input, .base-text-field {
    width: 100%;
    color: #495057;
    font-size: 15px;
    min-height: 50px;
    font-weight: 500;
    background-color: #fff;
    background-clip: padding-box;
    border-radius: 4px !important;
    border: 1px solid #eee !important;
    font-family: 'Poppins-light', serif;
}

.base-input {
    padding: 10px 15px;
    height: auto;
    line-height: 24px;
}

.base-input[disabled] {
    background-color: #e9ecef;
}

.base-text-field {
    resize: none;
}

.container {
    padding-left: 15px;
    padding-right: 15px;
}

.container .container {
    overflow: hidden;
}

.bg-dark {
    background-color: #2f2d51 !important;
}

.bg-none {
    background: transparent !important;
}

.link {
    color: #2f2d51;
}

.text-secondary {
    color: #999999 !important;
}

.text-danger {
    color: #ff97b5 !important;
}

.font-weight-medium {
    font-weight: 500;
}

.bg-info-gradient {
    background: #696cd4;
    background: -moz-linear-gradient(45deg, #696cd4 0%, #80d4ff 100%);
    background: -webkit-linear-gradient(45deg, #696cd4 0%, #80d4ff 100%);
    background: linear-gradient(45deg, #696cd4 0%, #80d4ff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#696cd4', endColorstr='#80d4ff', GradientType=1);
}

.w-300 {
    max-width: 360px;
    width: 300px;
}

.bottom-center {
    position: fixed;
    bottom: 30px;
    left: 0;
    right: 0;
    width: auto;
    z-index: 999;
    margin: 0 auto;
}

.background {
    background-position: center center;
    background-size: cover;
    height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.small-font {
    font-size: 14px;
    line-height: 22px;
}

.transition,
.header,
main,
.floating-form-group > .floating-label,
.floating-form-group .floating-input,
.filter,
.menu-push-content .main-menu,
.btn.colorsettings,
.sidebar-right {
    transition: all ease 0.5s;
    -webkit-transition: all ease 0.5s;
    -moz-transition: all ease 0.5s;
    -ms-transition: all ease 0.5s;
}

.vm {
    vertical-align: middle;
}

.border-color,
table.no-border tfoot tr td,
.menu-active main {
    border-color: rgba(47, 45, 81, 0.05) !important;
}

.z-1 {
    z-index: 1;
}

/* map view */
.map-view-map {
    position: fixed;
    z-index: 0;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    border: 0;
}

.map-view {
    position: absolute;
    width: 100%;
    height: auto;
    bottom: 30px;
    left: 0;
}

.map-box {
    width: 100%;
    height: 250px;
    border-radius: 15px;
    overflow: hidden;
}

.top-30 {
    top: -30px;
    position: relative;
}

/*----------------- Table  stlye --------------------*/
table.no-border tr td {
    border: 0;
}

table.no-border tfoot tr td {
    border-top: 2px solid #000;
}

/*----------------- dowpdown stlye --------------------*/
.no-caret:after {
    display: none;
}

/*----------------- select stlye --------------------*/
.select-tip > .select-panel {
    width: 100%;
    display: flex;
    padding: 0 20px;
    cursor: pointer;
    color: #7a7a7a;
    font-size: 14px;
    min-width: 80px;
    min-height: 50px;
    border-radius: 4px;
    position: relative;
    align-items: center;
    border: 1px solid #eee;
    justify-content: flex-start;
    font-family: "Poppins-light", serif;
}

.select-tip {
    position: relative;
}

.select-tip[disabled] .select-panel {
    cursor:auto;
    background-color: #dedede;
}

.select-tip > .options {
    width: 100%;
    z-index: 999;
    display: none;
    background: #fff;
    position: absolute;
    max-height: 150px;
    overflow-y: scroll;
    border: 1px solid #eee;
}

.select-panel > i {
    right: 13px;
    color: #969696;
    font-size: 20px;
    font-weight: 600;
    position: absolute;
    transition: .5s ease;
}

.select-tip .options span {
    width: 100%;
    cursor: pointer;
    min-height: 50px;
    padding:15px 20px;
    display: inline-block;
}

.select-tip .options span:hover {
    background: #f9f9f9;
}

.dropdown-menu {
    border: 0;
    border-radius: 15px;
    padding: 15px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    -ms-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

.dropdown-menu .dropdown-item {
    border-radius: 15px;
}

::-webkit-scrollbar {
    width: 0px;
    height: 2px;
}

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background: rgba(97, 33, 210, 0.3);
}

::-webkit-scrollbar-track {
    border-radius: 5px;
    background: rgba(97, 33, 210, 0.05);
}

/*------ 2. Header -------*/
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 8px 15px;
    z-index: 99;
    backdrop-filter: blur(10px);
}

.header .navbar-brand {
    padding: 0;
}

.header .navbar-brand > img {
    max-height: 44px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
}

.header .navbar-brand h4 {
    font-size: 20px;
    color: #2f2d51;
    vertical-align: middle;
    display: inline-block;
    margin: 0;
    margin-left: 10px;
}

.header.active {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
    -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05);
    -ms-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05);
}

main {
    background-size: cover;
    /*padding-top: 60px;*/
    display: block;
    width: 100%;
    top: 0;
    /*padding-top: 60px;*/
    z-index: 1;
}

/*------ 3. Loader -------*/
.logo-loading {
    text-align: center;
}

.logo-loading img {
    max-width: 100px;
    margin-bottom: 15px;
}

.logo-loading h3 {
    color: #2f2d51;
    font-size: 30px;
}

.loader-ellipsis {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

.loader-ellipsis div {
    position: absolute;
    top: 30px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #2f2d51;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.loader-ellipsis div:nth-child(1) {
    left: 8px;
    animation: loader-ellipsis1 0.6s infinite;
}

.loader-ellipsis div:nth-child(2) {
    left: 8px;
    animation: loader-ellipsis2 0.6s infinite;
}

.loader-ellipsis div:nth-child(3) {
    left: 32px;
    animation: loader-ellipsis2 0.6s infinite;
}

.loader-ellipsis div:nth-child(4) {
    left: 56px;
    animation: loader-ellipsis3 0.6s infinite;
}

@keyframes loader-ellipsis1 {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes loader-ellipsis3 {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0);
    }
}

@keyframes loader-ellipsis2 {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(24px, 0);
    }
}

.loader-display {
    position: fixed;
    top: 0;
    left: 0;
    background: url("../img/background2.png") #f3f7fa fixed;
    background-position: center top;
    background-size: cover;
    z-index: 9999;
}

/*------ 4. Icons -------*/
.icon-size-16 {
    width: 18px;
}

.icon-size-12 {
    width: 12px;
}

.icon-size-24 {
    width: 24px;
}

.icon-size-32 {
    width: 32px;
}

.icon-size-40 {
    width: 40px;
}

.icon-size-48 {
    width: 48px;
}

.icon-size-96 {
    width: 96px;
}

.icon {
    border-radius: 50%;
    display: inline-block;
    position: relative;
    overflow: hidden;
    text-align: center;
    vertical-align: middle;
}

.icon > span {
    vertical-align: middle;
}

.icon.icon-44 {
    height: 44px;
    width: 44px;
    line-height: 40px;
}

.icon.icon-44 > span {
    font-size: 22px;
}

.icon.icon-100 {
    height: 100px;
    width: 100px;
    line-height: 100px;
}

.icon.icon-100 > span {
    font-size: 50px;
}

.icon.rounded {
    border-radius: 15px;
}

.text-dark svg path,
.text-dark svg polyline,
.text-dark svg line,
.text-dark svg rect,
.text-dark svg circle,
.text-dark svg polygon {
    stroke: #2f2d51 !important;
    fill: #2f2d51;
}

.text-white svg path,
.text-white svg polyline,
.text-white svg line,
.text-white svg rect,
.text-white svg circle,
.text-white svg polygon {
    stroke: #ffffff !important;
    fill: #fff;
}

.text-danger svg path,
.text-danger svg polyline,
.text-danger svg line,
.text-danger svg rect,
.text-danger svg circle,
.text-danger svg polygon {
    stroke: #ff97b5 !important;
    fill: #ff97b5;
}

.text-secondary svg path,
.text-secondary svg polyline,
.text-secondary svg line,
.text-secondary svg rect,
.text-secondary svg circle,
.text-secondary svg polygon {
    stroke: #999999 !important;
    fill: #999999;
}

/*------ 5. Landing -------*/
.image-circle {
    text-align: center;
    width: 100%;
    padding: 20px 15px 40px 15px;
    margin-bottom: 20px;
    position: relative;
}

.image-circle > figure {
    height: 300px;
    width: 300px;
    display: inline-block;
    margin: 0 auto;
    border-radius: 150px;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.15);
    -webkit-box-shadow: 0 10px 15px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0 10px 15px rgba(0, 0, 0, 0.15);
    -ms-box-shadow: 0 10px 15px rgba(0, 0, 0, 0.15);
    vertical-align: top;
}

.image-circle > .icon {
    position: absolute;
    bottom: 50px;
    left: 0;
    right: 0;
    margin: 0 auto -40px auto;
}

/*------ 6. Swiper -------*/
.swiper-pagination-bullets .swiper-pagination-bullet {
    opacity: 0.35;
    height: 10px;
    width: 10px;
}

.swiper-pagination-bullets
    .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #2f2d51;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    opacity: 1;
}

/*------ 7. Footer -------*/
.footer {
    padding: 15px 0px 25px 0;
    z-index: 0;
    position: relative;
}

.full-height {
    height: calc(100vh - 73.53px);
}

.full-height-m {
    height: 100vh;
}

/*------ 8. Forms -------*/
/* input fields */
input:focus,
select:focus,
textarea:focus,
.form-control:focus {
    outline: none;
    -webkit-outline: none;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
}

.form-control {
    padding: 10px 15px;
    line-height: 24px;
    font-size: 15px;
    height: auto;
}

.form-control::placeholder {
    color: rgba(153, 153, 153, 0.4);
    font-weight: 400;
}

.floating-form-group {
    position: relative;
    padding-top: 15px;
    z-index: 1;
}

.floating-form-group > .floating-label {
    position: absolute;
    left: 0;
    top: 22px;
    color: rgba(153, 153, 153, 0.4);
    z-index: -1;
}

.floating-form-group .floating-input {
    background: transparent;
    border-radius: 0;
    border-width: 0px;
    border-bottom: 1px solid rgba(153, 153, 153, 0.3);
    padding: 10px 0px;
    line-height: 24px;
    z-index: 2;
}

.floating-form-group .floating-input:focus,
.floating-form-group .floating-input:focus:active {
    border-bottom: 1px solid #ff97b5;
}

.floating-form-group .floating-input:focus + .floating-label,
.floating-form-group .floating-input:focus:active + .floating-label {
    color: #ff97b5;
    top: 0;
    font-size: 13px;
}

.floating-form-group.active > .floating-label {
    color: #999999;
    top: 0;
    font-size: 13px;
}

.search {
    border: 0;
    border-radius: 30px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
    -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05);
    -ms-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05);
}

/* boxed checkbox */
.checkbox-boxed {
    display: none;
}

.checkbox-boxed + .checkbox-lable {
    cursor: pointer;
    background: none;
    display: block;
    width: 100%;
    text-align: center;
    border-radius: 15px;
    color: #999999;
    margin-bottom: 0;
}

.checkbox-boxed + .checkbox-lable span {
    display: block;
}

.checkbox-boxed + .checkbox-lable .image-boxed {
    height: 80px;
    line-height: 78px;
    width: 100%;
    /*border-radius: 15px;*/
    overflow: hidden;
    position: relative;
    display: block;
    background: #2f2d51;
}

.checkbox-boxed + .checkbox-lable .p {
    padding: 5px 0;
    line-height: 16px;
    font-size: 12px;
    display: block;
    margin: 0;
}

.checkbox-boxed:checked + .checkbox-lable {
    background: #80d4ff;
    color: #ffffff;
}

.checkbox-boxed:checked + .checkbox-lable .image-boxed {
    background: #2f2d51;
}

.custom-control-input:checked ~ .custom-control-label::before {
    color: #ffffff;
    border-color: #2f2d51;
    background-color: #2f2d51;
}

/* range picker slider */
.noUi-target {
    background: none;
    box-shadow: none;
    -webkit-box-shadow: none;
    border: 1px solid rgba(153, 153, 153, 0.2);
}

.noUi-target.noUi-horizontal {
    height: 10px;
}

.noUi-target .noUi-origin .noUi-handle {
    height: 30px;
    width: 30px;
    top: -11px;
    border: 0;
    box-shadow: 0 35x 7px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 5px 7px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 5px 7px rgba(0, 0, 0, 0.1);
    -ms-box-shadow: 0 5px 7px rgba(0, 0, 0, 0.1);
    border-radius: 15px;
    border: 1px solid rgba(153, 153, 153, 0.2);
}

.noUi-target .noUi-origin .noUi-handle:before {
    display: none;
}

.noUi-target .noUi-origin .noUi-handle:after {
    display: none;
}

.noUi-target .noUi-connect {
    background: #80d4ff;
}

/* switch customized */
.switch-wrap {
    cursor: pointer;
    background: rgba(0, 0, 0, 0.05);
    width: 60px;
    height: 30px;
    border-radius: 15px;
}

.switch-wrap input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.switch-wrap .switch {
    height: 100%;
    transition: 0.2s;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -ms-transition: 0.2s;
    position: relative;
    width: 100%;
    border-radius: 15px;
}

.switch-wrap .switch::after {
    content: "";
    border-radius: 50%;
    background: #ccc;
    transition: 0.2s;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -ms-transition: 0.2s;
    position: absolute;
    left: 2px;
    top: 2px;
    height: 26px;
    width: 26px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

.switch-wrap.switch-success input:checked + .switch {
    background-color: #6be3a2;
}

.switch-wrap.switch-info input:checked + .switch {
    background-color: #80d4ff;
}

.switch-wrap.switch-danger input:checked + .switch {
    background-color: #ff97b5;
}

.switch-wrap.switch-primary input:checked + .switch {
    background-color: #63abff;
}

.switch-wrap.switch-warning input:checked + .switch {
    background-color: #ffdd6d;
}

.switch-wrap input:checked + .switch::after {
    background-color: #ffffff;
    left: 32px;
}

.custom-control-input.switch-success:checked + .custom-control-label:before {
    background-color: #6be3a2;
    border-color: #6be3a2;
}

.custom-control-input.switch-info:checked + .custom-control-label:before {
    background-color: #80d4ff;
    border-color: #80d4ff;
}

.custom-control-input.switch-danger:checked + .custom-control-label:before {
    background-color: #ff97b5;
    border-color: #ff97b5;
}

.custom-control-input.switch-primary:checked + .custom-control-label:before {
    background-color: #63abff;
    border-color: #63abff;
}

.custom-control-input.switch-warning:checked + .custom-control-label:before {
    background-color: #ffdd6d;
    border-color: #ffdd6d;
}

/*------ 9. Card -------*/
.header-title {
    font-size: 15px;
    font-weight: 400;
}

.card {
    border: 0;
    border-radius: 15px;
    z-index: 1;
}

.card .card-header {
    padding: 10px 15px 0px 15px;
}

.card-header-action {
    color: #c5c5c5;
    font-size: 25px;
    display: none;
    cursor: pointer;
    transition: .5s ease;
}

.card .subtitle {
    font-weight: 500;
    font-size: 1rem;
    margin-bottom: 20px;
    font-family: "Poppins-medium", sans-serif !important;
}

.sub-content {
    color: #7b7b7b;
    font-size: 14px;
    font-family: "Poppins-light", sans-serif !important;
}

@media only screen and (max-width: 595px) {
    .card-header-action {
        display: inline-block;
    }

    .card .subtitle {
        font-weight: 500;
        font-size: 14px;
        line-height: inherit;
        margin-left: 0 !important;
        font-family: "Poppins-light", serif !important;
    }
}

.active .card-header-action {
    transform: rotate(180deg);
}

.card .card-footer {
    border: 0;
    border-radius: 0 0 15px 15px;
    background: transparent;
    padding: 10px 15px;
}

.card .card-body-wrap {
    border: 1px dashed rgba(255, 255, 255, 0.5);
    margin: 5px;
    display: block;
    border-radius: 15px;
}

.card .card-body {
    border: 0;
    padding: 20px 20px;
}

.payment-card-large {
    width: 300px;
    min-width: 300px;
}

/*------ 10. Filter -------*/
.filter {
    position: fixed;
    z-index: 999;
    width: 300px;
    right: -320px;
    height: 100%;
    overflow-y: auto;
    padding: 10px;
}

.filter > .filters-container {
    background: #ffffff;
    border-radius: 15px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    -ms-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    min-height: 100%;
    position: relative;
    padding-top: 15px;
    padding-bottom: 15px;
}

.filter.active {
    right: 0px;
}

.filter-btn.close {
    position: absolute;
    right: 20px;
    top: 20px;
    opacity: 1;
}

.filter-backdrop {
    background: rgba(128, 212, 255, 0.25);
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 998;
    display: none;
}

.required-label:after {
    content:" *";
    color: red;
}

/*------ 11. Product -------*/
.swiper-products {
    margin-bottom: -10px;
}

.swiper-products .swiper-slide {
    width: auto;
    margin: 0 20px 10px 0px;
}

/*.swiper-products .swiper-slide:first-child {*/
/*  padding-left: 30px;*/
/*}*/

/*.swiper-products .swiper-slide:last-child {*/
/*  padding-right: 30px;*/
/*}*/

.product-card-large {
    width: 300px;
    height: auto;
    overflow: hidden;
}

.product-card-large .product-image-large {
    /*border-radius: 15px;*/
    overflow: hidden;
    height: 150px;
    width: 100%;
    display: block;
    position: relative;
}

.product-card-large .product-image-large .tag-images-count {
    position: absolute;
    bottom: 5px;
    left: 5px;
    z-index: 1;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 12px;
}

.product-card-large .product-image-large .tag-images-count span {
    margin-left: 5px;
}

.product-card-large .product-image-large .small-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 1;
}

.swiper-slide a {
    display: block;
    height: 200px;
}

.product-card-small .product-image-small {
    /*border-radius: 15px;*/
    overflow: hidden;
    height: 80px;
    width: 80px;
    display: block;
    position: relative;
}

.product-card-small .product-image-small .tag-images-count {
    position: absolute;
    bottom: 5px;
    left: 5px;
    z-index: 1;
    padding: 5px 10px;
    /*border-radius: 15px;*/
    font-size: 12px;
}

.product-card-small .product-image-small .tag-images-count span {
    margin-left: 5px;
}

.product-card-small .product-image-small .small-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 1;
}

.product-image-top {
    margin-top: -60px;
    border-radius: 0 0 15px 15px;
    overflow: hidden;
    height: 330px;
    width: 100%;
    display: block;
    position: relative;
}

.product-image-top:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 200px;
    width: 100%;
    background: -moz-linear-gradient(
        0deg,
        rgba(255, 255, 255, 0) 0%,
        #ff97b5 100%
    );
    background: -webkit-linear-gradient(
        0deg,
        rgba(255, 255, 255, 0) 0%,
        #ff97b5 100%
    );
    background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, #ff97b5 100%);
    z-index: 1;
}

.product-image-top .tag-images-count {
    position: absolute;
    bottom: 50px;
    left: 30px;
    z-index: 1;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 12px;
}

.product-image-top .tag-images-count span {
    margin-left: 5px;
}

.product-image-top .small-btn-wrap {
    position: absolute;
    bottom: 50px;
    right: 30px;
    z-index: 1;
}

/*------ 12. Menu -------*/
.menu-overlay .menu-layout .main-menu {
    top: 0;
    left: 0;
    z-index: 999;
    display: flex;
    position: fixed;
    transition: .5s ease;
    transform: translateX(-520px);
}

.menu-overlay .menu-layout.active .main-menu {
    transform: translateX(0);
}

.menu-overlay .menu-layout .main-menu {
    width: 100%;
    height: 100vh;
    max-width: 340px;
}

.menu-mobile-scroll-wrapper.guest {
    overflow-y: unset;
}
    .menu-mobile-scroll-wrapper {
        height: 80vh;
        overflow-y: scroll;
    }
    .menu-main-content-wrapper {
        height: 100%;
    }
    .terms-privacy {
        height: 35%;
    }
@media only screen and (max-width: 425px) {
    .menu-overlay .menu-layout .main-menu {
        width: 80%;
    }

    .menu-overlay .menu-layout .close-wrapper {
        min-height: 85px;
    }

    .menu-container {
        border-top-right-radius: 35px;
    }

    .menu-container .close {
        top: 40px !important;
    }

    .menu-overlay .menu-layout.active .mobile-blur {
        width: 100%;
        height: 100vh;
        backdrop-filter: blur(5px);
    }

    .menu-overlay .main-menu .menu-container .nav-pills {
        margin-top: 0 !important;
    }
    .menu-overlay .brand-bordered {
        margin-bottom: 45px
    }

    .menu-overlay .menu-main-content-wrapper {
        min-height: 700px;
        position: relative;
    }
    .menu-mobile-scroll-wrapper::-webkit-scrollbar {
        width: 3px;
        height: 5px;
    }
    .menu-mobile-scroll-wrapper::-webkit-scrollbar-button {
        width: 0px;
        height: 0px;
    }
    .menu-mobile-scroll-wrapper::-webkit-scrollbar-thumb {
        background: #b0b0b0;
        border: 0px none #ffffff;
        border-radius: 50px;
    }
    .menu-mobile-scroll-wrapper::-webkit-scrollbar-thumb:hover {
        background: #ffffff;
    }
    .menu-mobile-scroll-wrapper::-webkit-scrollbar-thumb:active {
        background: #000000;
    }
    .menu-mobile-scroll-wrapper::-webkit-scrollbar-track {
        background: #ddd;
        border: 0px none #eee;
        border-radius: 16px;
    }
    .menu-mobile-scroll-wrapper::-webkit-scrollbar-track:hover {
        background: #666666;
    }
    .menu-mobile-scroll-wrapper::-webkit-scrollbar-track:active {
        background: #b3adad;
    }
    .menu-mobile-scroll-wrapper::-webkit-scrollbar-corner {
        background: transparent;
    }

}

@media screen and (min-height: 870px) {
    .menu-mobile-scroll-wrapper {
        overflow-y: unset;
    }
}

@media screen and (max-height: 720px) {
    .menu-mobile-scroll-wrapper {
        overflow-y: scroll;
    }
}

@media screen and (max-height: 617px) {
    .menu-mobile-scroll-wrapper {
        height: 98%;
    }
}

@media screen and (max-height: 600px) {
    .menu-mobile-scroll-wrapper {
        height: 90%;
    }
}

@media screen and (max-height: 550px) {
    .menu-mobile-scroll-wrapper {
        height: 80%;
    }
}
@media screen and (max-height: 450px) {
    .menu-mobile-scroll-wrapper {
        height: 70%;
    }
}
@media screen and (max-height: 405px) {
    .menu-mobile-scroll-wrapper {
        height: 60%;
    }
}

@media screen and (max-height: 350px) {
    .menu-mobile-scroll-wrapper {
        height: 50%;
    }
}

@media screen and (max-height: 300px) {
    .menu-mobile-scroll-wrapper {
        height: 43%;
    }
}

.menu-overlay .main-menu .menu-container {
    width: 100%;
    margin: 0 auto;
    max-width: 800px;
    background: #ffffff;
    text-align: center;
    position: relative;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
    -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05);
    -ms-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05);
}

.menu-overlay .main-menu .menu-container > .icon {
    margin: 0 auto;
    border: 2px solid #ffffff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
    -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05);
    -ms-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05);
}

.menu-overlay .main-menu .menu-container .nav-pills {
    margin-top: 45px;
    padding: 0 15px;
}

.menu-overlay .main-menu .menu-container .nav-pills .nav-item .has-arrow {
    position: relative;
}
.menu-overlay .main-menu .menu-container .nav-pills .nav-item .has-arrow::after {
    position: absolute;
    content: '';
    width: .5em;
    height: .5em;
    border-width: 1.5px 0 0 1.5px;
    border-style: solid;
    border-color: #606060;
    right: 18px;
    transform: rotate(135deg) translate(0, -50%);
    transform-origin: top;
    top: 48%;
}
.menu-overlay .main-menu .menu-container .nav-pills .nav-item .has-arrow::before {
    position: absolute;
    content: '';
    width: 16px;
    height: 16px;
    right: 12px;
    background: transparent;
    transform-origin: top;
    top: 13px;
}


.menu-overlay .main-menu .menu-container .nav-pills .nav-item .nav-link,
.logout-property {
    border-radius: 15px;
    line-height: 24px;
    padding: 10px 15px;
    font-size: 16px;
    text-align: left;
    position: relative;
    color: #222222;
}

.logout-property {
    padding: 0 30px;
    align-items: center;
    transform: translateY(20px);
}

.logout-property:hover {
    color: #222222;
    text-decoration: none;
}

.logout-property svg {
    margin-right: 5px;
    vertical-align: unset;
    transform: rotateY(180deg);
}

.menu-overlay .main-menu .menu-container .nav-pills .nav-item .nav-link .arrow {
    position: absolute;
    top: 12px;
    bottom: 0;
    right: 10px;
    stroke: rgba(153, 153, 153, 0.3);
}

.brand-bordered {
    height: 90px;
    width: 90px;
    margin: auto;
}

.brand-bordered > img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.menu-overlay .main-menu .menu-container > .close {
    margin: 0 auto;
    position: absolute;
    bottom: -18px;
    left: 0;
    right: 0;
    opacity: 1;
    box-shadow: none;
    background: #fff;
}

.menu-overlay .main-menu .menu-container > .close:hover {
    opacity: 1;
}

.nav-pills .nav-link.active {
    background: none;
    text-decoration: underline;
}

.menu-push-content .main-menu {
    background: #ffffff;
    background-size: cover;
    padding: 60px 0 50px 0;
    height: 100%;
    width: 300px;
    margin-left: -320px;
    overflow-y: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    display: block;
}

.menu-push-content .main-menu .menu-container {
    background: #ffffff;
    max-width: 300px;
    border-radius: 15px;
    padding: 40px;
    margin: 0 auto;
    text-align: center;
    position: relative;
}

.menu-push-content .main-menu .menu-container > .icon {
    margin: 0 auto;
    margin-top: -90px;
    border: 2px solid #ffffff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
    -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05);
    -ms-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05);
}

.menu-container .close-wrapper {
    min-height: 50px;
}

.menu-layout.active {
    width: 100%;
    height: 100vh;
    z-index: 999;
    background-color: rgba(0,0,0,0.1);
}

.menu-layout .terms-privacy {
    transform: translateY(45px);
}

.menu-layout .terms-privacy ul {
    list-style: none;
    text-align: left;
    padding-left: 30px;
}

.menu-layout .terms-privacy ul > li:first-child {
    margin-bottom: 8px;
}

.menu-layout .terms-privacy a {
    color: #929292;
    border-bottom: 1px solid #adadad;
}

.menu-layout .terms-privacy a:hover {
    text-decoration: none;
}

.menu-container .close {
    color: #000;
    top: 15px;
    right: -20px;
    position: absolute;
    opacity: unset !important;
    background-color: #fff !important;
}

.menu-push-content .main-menu .menu-container .nav-pills {
    margin-top: 20px;
}

.menu-push-content .main-menu .menu-container .nav-pills .nav-item .nav-link {
    border-radius: 15px;
    line-height: 24px;
    padding: 10px 15px;
    font-size: 16px;
    text-align: left;
    position: relative;
    color: #2f2d51;
}

.menu-push-content
    .main-menu
    .menu-container
    .nav-pills
    .nav-item
    .nav-link
    .arrow {
    position: absolute;
    top: 12px;
    bottom: 0;
    right: 10px;
    stroke: rgba(153, 153, 153, 0.3);
}

.menu-push-content
    .main-menu
    .menu-container
    .nav-pills
    .nav-item
    .nav-link.active {
    background: #2f2d51;
    border-bottom: 5px solid #80d4ff;
    color: #ffffff;
}

.menu-push-content
    .main-menu
    .menu-container
    .nav-pills
    .nav-item
    .nav-link.active
    .arrow {
    stroke: #ffffff;
}

.menu-push-content .main-menu .menu-container > .close {
    margin: 0 auto;
    position: absolute;
    bottom: -18px;
    left: 0;
    right: 0;
    opacity: 1;
}

.menu-active {
    background: #ffffff;
    background-image: none;
}

.menu-active .main-menu {
    margin-left: 0;
}

.menu-active main {
    border-radius: 15px;
    transform: scale(0.9);
    margin-left: 300px;
    height: 100%;
    box-shadow: 0 1px 15px rgba(0, 0, 0, 0.05);
    -webkit-box-shadow: 0 1px 15px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: 0 1px 15px rgba(0, 0, 0, 0.05);
    -ms-box-shadow: 0 1px 15px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    border: 1px solid #f4f4f4;
}

.menu-active .footer,
.menu-active .colorsettings,
.menu-active .sidebar-right {
    display: none;
}

.menu-open {
    overflow: hidden;
    width: 100%;
}

/*------ 13. Color settings -------*/
.btn.colorsettings {
    position: fixed;
    bottom: 15px;
    top: auto;
    right: 15px;
    border-radius: 30px;
    padding: 0px;
    height: 44px;
    width: 44px;
    text-align: center;
    line-height: 40px;
    z-index: 99;
}

.btn.colorsettings span {
    display: inline-block;
    vertical-align: middle;
    margin: 0px;
}

.btn.colorsettings.active {
    right: 95px;
}

/* sidebar */
.sidebar-right {
    width: 65px;
    position: fixed;
    right: -85px;
    top: 15px;
    bottom: 15px;
    border-radius: 15px;
    padding: 15px 0px;
    overflow-y: auto;
    z-index: 9999;
    background-color: #ffffff;
    color: #2f2d51;
    box-shadow: 0 0px 10px rgba(0, 0, 0, 0.15);
    -webkit-box-shadow: 0 0px 10px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0 0px 10px rgba(0, 0, 0, 0.15);
    -ms-box-shadow: 0 0px 10px rgba(0, 0, 0, 0.15);
    text-align: center;
}

.sidebar-right.active {
    right: 15px;
}

#visitor-main .select2-container--default .select2-selection--single {
    height: 50px;
    padding: 8px 1px;
}
#visitor-main .select2-container--default .select2-selection--single .select2-selection__arrow {
    display: none;
}

/* Color select */
.colorselect,
.colorselect2 {
    margin: 0;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    border-radius: 24px;
    overflow: hidden;
    border: 4px solid transparent;
}

.colorselect input[type="radio"],
.colorselect2 input[type="radio"] {
    display: none;
}

.colorselect input[type="radio"] + label,
.colorselect2 input[type="radio"] + label {
    display: block;
    height: 34px;
    line-height: 34px;
    width: 34px;
    color: #ffffff;
    margin-bottom: 0;
    cursor: pointer;
    border-radius: 4px;
    border: 4px solid rgba(255, 255, 255, 0);
}

.colorselect input[type="radio"] + label i,
.colorselect2 input[type="radio"] + label i {
    font-size: 16px;
    display: none;
    height: 24px;
    width: 24px;
    border-radius: 50%;
    text-align: center;
    line-height: 24px;
    background-color: #80d4ff;
    vertical-align: middle;
}

.colorselect input[type="radio"]:checked + label,
.colorselect2 input[type="radio"]:checked + label {
    border: 4px solid rgba(0, 0, 0, 0.5);
    border-radius: 30px;
}

.colorselect input[type="radio"]:checked + label i,
.colorselect2 input[type="radio"]:checked + label i {
    display: inline-block;
}

.colorselect.active,
.colorselect2.active {
    position: relative;
    border: 4px solid rgba(0, 0, 0, 0.1);
}

.selectoption {
    margin: 0 0;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    border: 4px solid rgba(0, 0, 0, 0.1);
    font-size: 10px;
    border-radius: 24px;
    text-align: center;
    background-color: #ffffff;
}

.selectoption input[type="checkbox"] {
    display: none;
}

.selectoption input[type="checkbox"] + label {
    display: block;
    height: 34px;
    line-height: 28px;
    width: 34px;
    color: #666666;
    margin-bottom: 0;
    cursor: pointer;
    border-radius: 18px;
    border: 4px solid rgba(255, 255, 255, 0);
}

.selectoption input[type="checkbox"]:checked + label {
    color: #ffffff;
    background-color: #000000;
    border: 4px solid rgba(255, 255, 255, 0.3);
}

.selectoption input[type="checkbox"]:checked + label i {
    display: inline-block;
}

.selectoption.active {
    position: relative;
    border: 4px solid rgba(0, 0, 0, 0.1);
}

/* colors */
.bg-dark-blue {
    background-color: #122a73;
}

.bg-dark-purple {
    background-color: #491879;
}

.bg-maroon {
    background-color: #ad162b;
}

.bg-dark-gray {
    background-color: #475861;
}

.bg-dark-pink {
    background-color: #e92063;
}

.bg-dark-brown {
    background-color: #795448;
}

.bg-dark-green {
    background-color: #00b491;
}

.bg-red {
    background-color: #f94620;
}

.bg-pink {
    background-color: #e91e63;
}

.bg-purple {
    background-color: #6121d2;
}

.bg-blue {
    background-color: #143be0;
}

.bg-teal {
    background-color: #00bcd4;
}

.bg-skyblue {
    background-color: #0faff7;
}

.bg-amber {
    background-color: #ffc107;
}

.bg-gray {
    background-color: #607d8b;
}

.bg-slate {
    background-color: #22262b;
    color: #ffffff;
}

/*------ 14. Chart -------*/
.chart-area {
    height: 150px;
    margin-top: 50px;
}

/*------ 15. Lists -------*/
.lists {
    padding-left: 15px;
}

.lists li {
    line-height: 26px;
}

/*------ 16. Offers -------*/
.offers {
    width: auto;
    position: absolute;
    left: -10px;
    top: 20px;
    background: #80d4ff;
    color: #ffffff;
    text-align: left;
    padding: 5px 15px;
    z-index: 3;
    border-radius: 0 5px 5px 0px;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.15);
}

.offers:before {
    content: "";
    height: 10px;
    width: 10px;
    position: absolute;
    left: 0px;
    top: -10px;
    border-right: 10px solid #000;
    border-top: 10px solid transparent;
}

.offers:after {
    content: "";
    height: 10px;
    width: 10px;
    position: absolute;
    left: 0px;
    bottom: -10px;
    border-right: 10px solid #000;
    border-bottom: 10px solid transparent;
}

.upcoming {
    width: auto;
    position: absolute;
    left: -5px;
    top: 100px;
    background: #80d4ff;
    color: #ffffff;
    text-align: left;
    padding: 3px 10px;
    z-index: 3;
    border-radius: 3px 3px 3px 0px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.upcoming p {
    font-size: 12px;
}

.upcoming:after {
    content: "";
    height: 5px;
    width: 5px;
    position: absolute;
    left: 0px;
    bottom: -5px;
    border-right: 5px solid #000;
    border-bottom: 5px solid transparent;
}

/*------ 18. responsive -------*/
.avatar {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    overflow: hidden;
    position: relative;
    border-radius: 4px;
    border-radius: 50%;
    z-index: 0;
    background: rgba(47, 45, 81, 0.15);
}

.avatar img {
    width: 100%;
}

.avatar-20 {
    width: 20px;
    min-width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 10px;
}

.avatar-26 {
    width: 26px;
    min-width: 26px;
    height: 26px;
    line-height: 26px;
    font-size: 20px;
}

.avatar-30 {
    width: 30px;
    min-width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 15px;
}

.avatar-36 {
    width: 36px;
    min-width: 36px;
    height: 36px;
    line-height: 32px;
    font-size: 15px;
}

.avatar-40 {
    width: 40px;
    min-width: 40px;
    height: 40px;
    line-height: 40px;
}

.avatar-50 {
    width: 50px;
    min-width: 50px;
    height: 50px;
    line-height: 50px;
}

.avatar-60 {
    width: 60px;
    min-width: 60px;
    height: 60px;
    line-height: 60px;
}

.avatar-70 {
    width: 70px;
    min-width: 70px;
    height: 70px;
    line-height: 70px;
}

.avatar-80 {
    width: 80px;
    min-width: 80px;
    height: 80px;
    line-height: 80px;
}

.avatar-90 {
    width: 90px;
    height: 90px;
    line-height: 90px;
}

.avatar-100 {
    width: 100px;
    height: 100px;
    line-height: 100px;
}

.avatar-110 {
    width: 110px;
    height: 110px;
    line-height: 110px;
}

.avatar-120 {
    width: 120px;
    height: 120px;
    line-height: 120px;
}

.avatar-130 {
    width: 130px;
    height: 130px;
    line-height: 130px;
}

.avatar-140 {
    width: 140px;
    height: 140px;
    line-height: 140px;
}

.avatar-150 {
    width: 150px;
    height: 150px;
    line-height: 150px;
}

.avatar-160 {
    width: 160px;
    height: 160px;
    line-height: 160px;
}

.avatar-170 {
    width: 170px;
    height: 170px;
    line-height: 170px;
}

.avatar-180 {
    width: 180px;
    height: 180px;
    line-height: 180px;
}

.avatar-190 {
    width: 190px;
    height: 190px;
    line-height: 190px;
}

.avatar-200 {
    width: 200px;
    height: 200px;
    line-height: 200px;
}

/*------ 19. Button -------*/
/*---------------- button -------------*/
.btn {
    border: 0;
    border-radius: 30px;
    text-transform: uppercase;
    font-weight: 500;
    outline: none;
    -webkit-outline: none;
    font-size: 14px;
    line-height: 31px;
    padding: 6px 20px;
}

.btn.btn-sm {
    font-size: 12px;
    padding: 3px 15px;
}

.btn i,
.btn .material-icons {
    vertical-align: middle;
}

.btn.btn-link-default {
    color: #2f2d51;
}

.btn.menu-btn,
.btn.sqaure-btn {
    height: 44px;
    line-height: 40px;
    vertical-align: middle;
    width: 44px;
    text-align: center;
    padding: 0;
}

.btn.small-btn {
    height: 34px;
    line-height: 30px;
    vertical-align: middle;
    width: 34px;
    text-align: center;
    padding: 0;
}

.btn.btn-info {
    background-color: #80d4ff;
    box-shadow: 0 3px 10px rgba(128, 212, 255, 0.5);
    -webkit-box-shadow: 0 3px 10px rgba(128, 212, 255, 0.5);
    -moz-box-shadow: 0 3px 10px rgba(128, 212, 255, 0.5);
    -ms-box-shadow: 0 3px 10px rgba(128, 212, 255, 0.5);
}

.btn.btn-info:hover,
.btn.btn-info:focus {
    background-color: #4dc3ff;
    box-shadow: 0 3px 10px rgba(128, 212, 255, 0.75);
    -webkit-box-shadow: 0 3px 10px rgba(128, 212, 255, 0.75);
    -moz-box-shadow: 0 3px 10px rgba(128, 212, 255, 0.75);
    -ms-box-shadow: 0 3px 10px rgba(128, 212, 255, 0.75);
}

.btn.btn-info:focus:active,
.btn.btn-info:active,
.btn.btn-info:not(:disabled).active {
    background-color: #34baff;
}

.btn.btn-danger {
    background-color: #ff97b5;
    box-shadow: 0 3px 10px rgba(255, 151, 181, 0.5);
    -webkit-box-shadow: 0 3px 10px rgba(255, 151, 181, 0.5);
    -moz-box-shadow: 0 3px 10px rgba(255, 151, 181, 0.5);
    -ms-box-shadow: 0 3px 10px rgba(255, 151, 181, 0.5);
}

.btn.btn-danger:hover,
.btn.btn-danger:focus {
    background-color: #ff7ea3;
    box-shadow: 0 3px 10px rgba(255, 151, 181, 0.75);
    -webkit-box-shadow: 0 3px 10px rgba(255, 151, 181, 0.75);
    -moz-box-shadow: 0 3px 10px rgba(255, 151, 181, 0.75);
    -ms-box-shadow: 0 3px 10px rgba(255, 151, 181, 0.75);
}

.btn.btn-danger:focus:active,
.btn.btn-danger:active {
    background-color: #ff6491;
}

.btn.btn-primary {
    background-color: #63abff;
    box-shadow: 0 3px 10px rgba(99, 171, 255, 0.5);
    -webkit-box-shadow: 0 3px 10px rgba(99, 171, 255, 0.5);
    -moz-box-shadow: 0 3px 10px rgba(99, 171, 255, 0.5);
    -ms-box-shadow: 0 3px 10px rgba(99, 171, 255, 0.5);
}

.btn.btn-primary:hover,
.btn.btn-primary:focus {
    background-color: #4a9dff;
    box-shadow: 0 3px 10px rgba(99, 171, 255, 0.75);
    -webkit-box-shadow: 0 3px 10px rgba(99, 171, 255, 0.75);
    -moz-box-shadow: 0 3px 10px rgba(99, 171, 255, 0.75);
    -ms-box-shadow: 0 3px 10px rgba(99, 171, 255, 0.75);
}

.btn.btn-primary:focus:active,
.btn.btn-primary:active {
    background-color: #3090ff;
}

.btn.btn-secondary {
    background-color: #999999;
    box-shadow: 0 3px 10px rgba(153, 153, 153, 0.5);
    -webkit-box-shadow: 0 3px 10px rgba(153, 153, 153, 0.5);
    -moz-box-shadow: 0 3px 10px rgba(153, 153, 153, 0.5);
    -ms-box-shadow: 0 3px 10px rgba(153, 153, 153, 0.5);
}

.btn.btn-secondary:hover,
.btn.btn-secondary:focus {
    background-color: #8c8c8c;
    box-shadow: 0 3px 10px rgba(153, 153, 153, 0.75);
    -webkit-box-shadow: 0 3px 10px rgba(153, 153, 153, 0.75);
    -moz-box-shadow: 0 3px 10px rgba(153, 153, 153, 0.75);
    -ms-box-shadow: 0 3px 10px rgba(153, 153, 153, 0.75);
}

.btn.btn-secondary:focus:active,
.btn.btn-secondary:active {
    background-color: #ff6491;
}

.btn.btn-success {
    background-color: #6be3a2;
    box-shadow: 0 3px 10px rgba(107, 227, 162, 0.5);
    -webkit-box-shadow: 0 3px 10px rgba(107, 227, 162, 0.5);
    -moz-box-shadow: 0 3px 10px rgba(107, 227, 162, 0.5);
    -ms-box-shadow: 0 3px 10px rgba(107, 227, 162, 0.5);
}

.btn.btn-success:hover,
.btn.btn-success:focus {
    background-color: #56df95;
    box-shadow: 0 3px 10px rgba(107, 227, 162, 0.75);
    -webkit-box-shadow: 0 3px 10px rgba(107, 227, 162, 0.75);
    -moz-box-shadow: 0 3px 10px rgba(107, 227, 162, 0.75);
    -ms-box-shadow: 0 3px 10px rgba(107, 227, 162, 0.75);
}

.btn.btn-success:focus:active,
.btn.btn-success:active {
    background-color: #40db87;
}

.btn.btn-warning {
    background-color: #ffdd6d;
    box-shadow: 0 3px 10px rgba(255, 221, 109, 0.5);
    -webkit-box-shadow: 0 3px 10px rgba(255, 221, 109, 0.5);
    -moz-box-shadow: 0 3px 10px rgba(255, 221, 109, 0.5);
    -ms-box-shadow: 0 3px 10px rgba(255, 221, 109, 0.5);
}

.btn.btn-warning:hover,
.btn.btn-warning:focus {
    background-color: #ffd754;
    box-shadow: 0 3px 10px rgba(255, 221, 109, 0.75);
    -webkit-box-shadow: 0 3px 10px rgba(255, 221, 109, 0.75);
    -moz-box-shadow: 0 3px 10px rgba(255, 221, 109, 0.75);
    -ms-box-shadow: 0 3px 10px rgba(255, 221, 109, 0.75);
}

.btn.btn-warning:focus:active,
.btn.btn-warning:active {
    background-color: #ffd13a;
}

.btn.btn-light {
    background-color: #f7f7f7;
    box-shadow: 0 3px 10px rgba(247, 247, 247, 0.5);
    -webkit-box-shadow: 0 3px 10px rgba(247, 247, 247, 0.5);
    -moz-box-shadow: 0 3px 10px rgba(247, 247, 247, 0.5);
    -ms-box-shadow: 0 3px 10px rgba(247, 247, 247, 0.5);
}

.btn.btn-light:hover,
.btn.btn-light:focus {
    background-color: #eaeaea;
    box-shadow: 0 3px 10px rgba(247, 247, 247, 0.75);
    -webkit-box-shadow: 0 3px 10px rgba(247, 247, 247, 0.75);
    -moz-box-shadow: 0 3px 10px rgba(247, 247, 247, 0.75);
    -ms-box-shadow: 0 3px 10px rgba(247, 247, 247, 0.75);
}

.btn.btn-light:focus:active,
.btn.btn-light:active {
    background-color: #dedede;
}

.btn.btn-dark {
    background-color: #2f2d51;
    box-shadow: 0 3px 10px rgba(47, 45, 81, 0.5);
    -webkit-box-shadow: 0 3px 10px rgba(47, 45, 81, 0.5);
    -moz-box-shadow: 0 3px 10px rgba(47, 45, 81, 0.5);
    -ms-box-shadow: 0 3px 10px rgba(47, 45, 81, 0.5);
}

.btn.btn-dark:hover,
.btn.btn-dark:focus {
    background-color: #252441;
    box-shadow: 0 3px 10px rgba(47, 45, 81, 0.75);
    -webkit-box-shadow: 0 3px 10px rgba(47, 45, 81, 0.75);
    -moz-box-shadow: 0 3px 10px rgba(47, 45, 81, 0.75);
    -ms-box-shadow: 0 3px 10px rgba(47, 45, 81, 0.75);
}

.btn.btn-dark:focus:active,
.btn.btn-dark:active {
    background-color: #1c1b30;
}

.btn.btn-lg {
    padding: 17px 20px;
    line-height: 20px;
    font-size: 16px;
}

/*------ 20. darkmode -------*/
body.darkmode {
    background: #222;
    color: #ffffff;
}

body.darkmode main,
body.darkmode .loader-display {
    background: #222222;
    color: #ffffff;
}

body.darkmode .text-dark {
    color: #ffffff !important;
}

body.darkmode .text-secondary {
    color: #aaaaaa !important;
}

body.darkmode .text-dark svg path,
body.darkmode .text-dark svg polyline,
body.darkmode .text-dark svg line,
body.darkmode .text-dark svg rect,
body.darkmode .text-dark svg circle,
body.darkmode .text-dark svg polygon {
    stroke: #ffffff !important;
    fill: #ffffff;
}

body.darkmode .text-white svg path,
body.darkmode .text-white svg polyline,
body.darkmode .text-white svg line,
body.darkmode .text-white svg rect,
body.darkmode .text-white svg circle,
body.darkmode .text-white svg polygon {
    stroke: #ffffff !important;
    fill: #fff;
}

body.darkmode .text-danger svg path,
body.darkmode .text-danger svg polyline,
body.darkmode .text-danger svg line,
body.darkmode .text-danger svg rect,
body.darkmode .text-danger svg circle,
body.darkmode .text-danger svg polygon {
    stroke: #ff97b5 !important;
    fill: #ff97b5;
}

body.darkmode .text-secondary svg path,
body.darkmode .text-secondary svg polyline,
body.darkmode .text-secondary svg line,
body.darkmode .text-secondary svg rect,
body.darkmode .text-secondary svg circle,
body.darkmode .text-secondary svg polygon {
    stroke: #999999 !important;
    fill: #999999;
}

body.darkmode .header .navbar-brand h4 {
    color: #ffffff;
}

body.darkmode .header.active {
    background-color: rgba(34, 34, 34, 0.8);
}

body.darkmode .menu-btn img {
    content: url(../img/icons/menu-outline-white.svg);
}

body.darkmode .card {
    background-color: #333333;
}

body.darkmode .list-group .list-group-item {
    background-color: #383838;
    color: #ffffff;
}

body.darkmode .main-menu {
    background: #000000;
}

body.darkmode .main-menu .menu-container {
    background: #222222;
}

body.darkmode .main-menu .menu-container .nav .nav-item .nav-link {
    color: #ffffff;
}

body.darkmode.menu-push-content.menu-open {
    background: #000000;
}

body.darkmode.menu-push-content .main-menu {
    background: #000000;
}

body.darkmode.menu-push-content .main-menu .menu-container {
    background: #000000;
}

body.darkmode .footer {
    background: #333 !important;
}

body.darkmode .border-color,
body.darkmode table.no-border tfoot tr td,
table.no-border tfoot tr body.darkmode td,
body.darkmode .menu-active main,
.menu-active body.darkmode main,
body.darkmode table.no-border tfoot tr td,
body.darkmode .menu-active main {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

body.darkmode .form-control {
    background: #333333;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

body.darkmode .form-control::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

body.darkmode .form-control option {
    color: #000000;
}

body.darkmode .floating-form-group > .floating-label {
    color: rgba(255, 255, 255, 0.5);
}

body.darkmode .floating-form-group .floating-input {
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

.accept-web-cookies-modal{
    position: fixed;
    bottom: 0;
    min-height: 60px;
    width: 100%;
    z-index: 1;
}

.accept-web-cookies-modal p {
    margin: 0;
}
.accept-web-cookies-modal a:not(.custom-btn) {
    text-decoration: underline;
}

body.darkmode .floating-form-group .floating-input:focus,
body.darkmode .floating-form-group .floating-input:focus:active {
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

body.darkmode .floating-form-group .floating-input:focus + .floating-label,
body.darkmode
    .floating-form-group
    .floating-input:focus:active
    + .floating-label {
    color: #ffffff;
}

body.darkmode .floating-form-group.active > .floating-label {
    color: #aaaaaa;
}

body.darkmode .filter .filters-container {
    background-color: #222222;
}

body.darkmode .noUi-target {
    border-color: rgba(255, 255, 255, 0.3);
}

body.darkmode .sidebar-right {
    background: #444444;
    color: #ffffff;
}

body.darkmode .custom-control-input:checked ~ .custom-control-label::before {
    border: 1px solid rgba(255, 255, 255, 0.3);
}

body.darkmode .checkbox-boxed + .checkbox-lable {
    padding: 1px;
}

body.darkmode .link {
    color: #ffffff;
}

/*------ 21. rtl -------*/
.rtl {
    direction: rtl;
    text-align: right;
}

.rtl .float-right {
    float: left !important;
}

.rtl .text-left {
    text-align: right !important;
}

.rtl .text-right {
    text-align: left !important;
}

.rtl .pl-0 {
    padding-right: 0 !important;
    padding-left: 15px !important;
}

.rtl .ml-0,
.rtl .mx-0 {
    margin-right: 0 !important;
}

.rtl .pl-2,
.rtl .px-2 {
    padding-left: inherit !important;
    padding-right: 0.5rem !important;
}

.rtl .mr-auto {
    margin-right: 0 !important;
    margin-left: auto !important;
}

.rtl .ml-auto {
    margin-left: 0 !important;
    margin-right: auto !important;
}

.rtl .mx-auto {
    margin-right: auto !important;
    margin-left: auto !important;
}

.rtl .mr-2,
.rtl .mx-2 {
    margin-left: 0.5rem !important;
}

.rtl .ml-2 {
    margin-right: 0.5rem !important;
    margin-left: 0 !important;
}

.rtl .mr-3,
.rtl .mx-3 {
    margin-right: 0 !important;
    margin-left: 1rem !important;
}

.rtl .ml-3,
.rtl .mx-3 {
    margin-left: 0 !important;
    margin-right: 1rem !important;
}

.rtl .mr-0,
.rtl .mx-0 {
    margin-left: 0 !important;
}

.rtl .swiper-container {
    direction: ltr;
}

.rtl .swiper-container .swiper-slide {
    direction: rtl;
}

/*------ 22. responsive -------*/
/* responsive */
@media screen and (min-width: 992px) {
    main,
    body {
        background-size: cover;
    }
}

@media screen and (max-width: 370px) {
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .swiper-products .swiper-slide:first-child {
        padding-left: 15px;
    }

    .swiper-products .swiper-slide:last-child {
        padding-right: 15px;
    }

    .product-card-large {
        width: 290px;
        height: auto;
    }

    .mt-4,
    .my-4 {
        margin-top: 1rem !important;
    }

    .mb-4,
    .my-4 {
        margin-bottom: 1rem !important;
    }

    .image-circle > figure {
        height: 200px;
        width: 200px;
    }

    .image-circle {
        padding: 0px 15px 20px 15px;
    }

    .image-circle > .icon {
        margin: 0 auto -60px auto;
    }
}

.col-6 .card-grid {
    height: 200px;
}

.col-12 .card-grid {
    height: 500px;
}

.col-6 .card-grid,
.col-12 .card-grid {
    object-fit: cover;
}

.page2-img {
    width: 125px;
    height: 125px;
    object-fit: cover;
}

.arrow-right {
    position: absolute;
    content: "";
    width: 30px;
    height: 30px;
    right: 15px;
    top: 43%;
}

.no-style-href {
    text-decoration: none;
    color: inherit;
}

.no-style-href:hover {
    text-decoration: none;
    color: inherit;
}

.modal-body-margin {
    margin-bottom: -8px;
}

.close-button {
    border: none;
    display: inline-block;
    padding: 8px 16px;
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none;
    color: white;
    background-color: inherit;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    z-index: 1;
    opacity: 0.9;
    font-size: 2rem;
}

.close-button:hover {
    opacity: 0.2;
    color: white;
}

.topright {
    position: absolute;
    right: 0;
    top: 0;
}

.modal-page-content > iframe {
    justify-content: center;
    min-height: 100vh !important;
    height: 100vh !important;
    min-width: 100vw !important;
    width: 100vw !important;
}

.modal-dialog:not(.auth):not(.bookingErrorModal) {
    margin: 0;
    max-width: inherit;
}

.modal {
    width: 100vw;
    height: 100vh;
    overflow-y: hidden !important;
}

.grid-cards {
    display: grid;
    grid-template-columns: repeat(4, 274px);
    grid-auto-rows: 274px;
    grid-gap: 5px;
}

.grid-card {
    position: relative;
}

.grid-card-big {
    grid-column: span 2;
    grid-row: span 2;
}

.grid-card-wide {
    grid-column: span 2;
}

.grid-card-very-wide {
    grid-column: span 4;
}

.grid-img {
    /*object-fit: cover;*/
    height: 100%;
    width: 100%;
}

.grid-card-text {
    font-weight: 600;
}

.grid-container {
    position: relative;
    text-align: center;
    color: white;
}

.top-left {
    position: absolute;
    top: 8px;
    left: 16px;
}

.card-block {
    margin-right: 40px;
}
.card-block-arrow:after {
    position: absolute;
    right: 27px;
    top: 43%;
    width: 12px;
    height: 12px;
    content: '';
    border-bottom: 3px solid #000;
    border-right: 3px solid #000;
    -webkit-transform: rotate(-45deg); /* Safari and Chrome */
    -moz-transform: rotate(-45deg); /* Firefox */
    -ms-transform: rotate(-45deg); /* IE 9 */
    -o-transform: rotate(-45deg); /* Opera */
    transform: rotate(-45deg); /* W3C */
}

@media screen and (max-width: 1200px) {
    .grid-cards {
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: 200px;
    }
}

@media screen and (max-width: 992px) {
    .grid-cards {
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: 150px;
    }
}

@media screen and (max-width: 768px) {
    .grid-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-card-big {
        grid-column: auto;
        grid-row: auto;
    }

    .grid-card-wide {
        grid-column: auto;
    }

    .grid-card-very-wide {
        grid-column: auto;
    }
}

@media screen and (max-width: 575px) {
    .grid-cards {
        grid-template-columns: repeat(2, minmax(100px, 1fr));
    }
}

@media (max-width: 576px) {
    .card-columns {
        column-count: 2;
    }
}

@media (min-width: 576px) {
    .card-columns {
        column-count: 2;
    }
}

@media (min-width: 768px) {
    .card-columns {
        column-count: 3;
    }
}

.cc-style .card {
    margin-bottom: 1.25rem;
}

div .img-border {
    border-radius: 15px 0 0 15px !important;
}

@media (max-width: 576px) {
    .cc-style .card {
        margin-bottom: 0.5rem;
        overflow: hidden;
        border-radius: 0px;
    }

    .card-columns {
        column-gap: 8px;
    }

    .page-container-custom {
        padding-left: 8px;
        padding-right: 8px;
        overflow-x: hidden;
    }

    .modal main{
        max-height: calc(100vh - 2rem);
    }
}

.category_with_button .card-body {
    z-index: 1;
}

.category_with_button .product-card-small {
    overflow: hidden;
    justify-content: center;
    background-color: white;
}

.category_with_button .card-img-top {
    height: 200px;
    object-fit: cover;
}

.single-card {
    overflow: hidden;
    min-height: 87vh;
}

.page-container-title-text {
    position: relative;
}

.page-container-title-text img {
    height: 200px;
    object-fit: cover;
}

.page-container-title-text .card {
    overflow: hidden;
}

.single-card .image-container {
    max-height: 540px;
    height: auto;
    overflow: hidden;
    padding: 20px;
    position: relative;
    width: 100%;
}

.single-card .custom-img {
    display: block;
    overflow: hidden;
    object-position: top;
    max-height: 500px;
    max-width: 100%;
    object-fit: contain;
    width: auto;
    margin: 0 auto;
}

.single-card div.custom-img {
    height: 500px;
}
@media (max-width: 992px) {
    .single-card div.custom-img {
        height: 430px;
    }
}
@media (max-width: 768px) {
    .single-card div.custom-img {
        height: 310px;
    }
}
@media (max-width: 576px) {
    .single-card div.custom-img {
        height: 300px;
    }
}
@media (max-width: 450px) {
    .single-card div.custom-img {
        height: 250px;
    }
}
@media (max-width: 350px) {
    .single-card div.custom-img {
        height: 180px;
    }
}

.single-card .content p {
    margin-bottom: 0;
}
.single-card .page-block:not(:last-child) {
    border-bottom: 1px solid rgba(0,0,0,.125);
}
.swiper-wrapper {
    margin: 0 20px 0 0;
}

@media (max-width: 576px) {
    .single-card .image-container {
        /*height: 330px;*/
        overflow: hidden;
    }
}

@media (min-width: 577px) and (max-width: 761px) {
    .single-card .image-container {
        /*height: 410px;*/
        overflow: hidden;
    }
}

.small-block-radius {
    overflow: hidden;
}

@media screen and (max-width: 768px) {
    .owl-carousel-container-none {
        display: none;
    }

    .owl-carousel-container-active {
        display: block;
    }
}

@media screen and (min-width: 768px) {
    .owl-carousel-container-none {
        display: block;
    }

    .owl-carousel-container-active {
        display: none;
    }
}

.card-img-overlay {
    display: flex;
    z-index: 1;
}

.discover-more-btn {
    color: black;
    text-decoration: none;
}

.image-block-9 .custom-img {
    height: 100%;
    width: 100%;
    min-height: 300px;
}

.image-block-9 .btn-row {
    position: relative;
}

.image-block-9 .btn-row .btn-container {
    width: 92%;
    position: absolute;
    bottom: 0px;
}

.image-block-9 .custom-text {
    margin-bottom: 27px;
}

.image-block-9 {
    min-height: 300px;
    margin-bottom: 100px;
}

@media screen and (min-width: 900px) {
    .img-row {
        padding: 0 70px;
    }

    .btn-row {
        padding: 120px 70px 70px 20px;
    }

    .discover-more-btn {
        color: black;
        text-decoration: none;
    }

    .image-block-9 .custom-img {
        height: 100%;
        width: 100%;
        min-height: 300px;
    }

    .image-block-9 .btn-row {
        position: relative;
    }

    .image-block-9 .btn-row .btn-container {
        width: 92%;
        position: absolute;
        bottom: 120px;
    }

    .image-block-9 .custom-text {
        margin-bottom: 27px;
    }

    .image-block-9 {
        min-height: 510px;
        margin-bottom: 100px;
    }
}

.video-popup {
    margin: 0 auto;
    position: relative;
    max-width: 1024px;
}

.video-popup video {
    margin: 0 auto;
    background: white;
    max-width: 100%;
    width: 100%;
    min-height: 100%;
}

@media screen and (max-width: 1200px) {
    .video-popup {
        max-width: 80%;
    }
}

#register-modal .modal-body {
    max-height: 800px;
    overflow-y: auto;
    border-radius: 20px;
}
@media screen and (max-width: 767px) {
    #register-modal .modal-body {
        max-height: 650px;
        overflow-y: auto;
        border-radius: 20px;
    }
}

@media screen and (max-width: 768px) {
    .mfp-container {
        background: #fff;
        padding: 0;
    }

    .video-popup {
        max-width: 100%;
        height: 100vh;
    }

    .video-popup video {
        overflow: visible;
    }

    .mfp-container,
    .mfp-bg {
        background-color: white !important;
        background-color: white !important;
        opacity: 1 !important;
        position: fixed !important;
    }

    button.mfp-close,
    button.mfp-arrow {
        margin-top: 39px !important;
        font-size: 40px !important;
        color: black;
        background-color: white !important;
    }
}

.full-container-auth {
    min-height: 380px;
}

#loginForm .btn-login {
    width: 250px;
    margin: auto;
}

.auth .modal-body {
    padding: 5px;
}
.auth .modal-content {
    border-radius: 20px;
}
.is-invalid {
    border: 1px solid #ff97b5 !important;
}

.flex-1 {
    flex: 1;
}

.text-black {
    color: #000 !important;
}

.hidden {
    display: none;
}

.cursor-pointer {
    cursor: pointer;
}

.disable-login-btn {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
    color: #51506e;
    background: #dcf1fd;
}
.phone-label-reg {
    padding-left: 15px;
}

.badge {
    padding: 6px 10px;
    line-height: 10px;
    font-weight: 100;
    white-space: inherit;
    text-transform: capitalize;
}

.my-order-container a {
    color: #000;
}

.my-order-container .img-container,
.my-order-container .img-container > .service-image {
    width: 110px;
    height: 110px;
}

.my-order-container .img-container {
    border-radius: 3px;
}
.my-order-container .img-container > .service-image {
    object-fit: cover;
}

.my-order-container .card-header .col-auto .badge {
    position: absolute;
    top: 2px;
    right: 36px;
}

.my-order-container .title-mobile {
    display: none;
    padding-bottom: 15px;
    font-family: "Poppins-thin", serif;
    border-bottom: 1px solid #eee;
}

.orders-filter-feature {
    gap: 12px;
    min-height: 80px;
    align-items: center;
}

.orders-filter-feature > .filters {
    gap: 12px;
    width: 100%;
    font-weight: 400;
    overflow-x: scroll;
}

.orders-filter-feature > .filters::-webkit-scrollbar {
   display: none;
}

.orders-filter-feature > .filters > span {
    font-size: 15px;
    cursor: pointer;
    padding: 3px 15px;
    white-space: nowrap;
    border: 1px solid #e1e1e1;
    border-radius: 15px 15px 15px 15px;
}

.orders-filter-feature > .filters span:not(.filter-selected) {
    color: #808080;
}

.order-is-ready {
    padding: 10px;
    margin-left: 0;
    max-width: 120px;
    border-radius: 6px;
    border: 1px solid #eee;
}

.order-is-ready .indicator {
    height:20px;
    width:20px;
    display: flex;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    border: 1px solid #8c802a;
}

.order-is-ready .indicator > .layout {
    height:12px;
    width: 12px;
    border-radius: 50%;
    background: #8c802a;
    display: inline-block;
}

.filter-selected {
    color: #fff;
    background: #907e27;
}

.checkbox-wrapper {
    width: 30px;
    float: right;
    margin-bottom: 10px;
}

.checkbox-wrapper-tcs label {
    width: 30px;
    float: left;
}

.checkbox-wrapper-tcs .checkbox-text {
    padding-top: 6px;
    padding-left: 6px;
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.checkbox-wrapper-tcs {
    position: relative;
    width: 100%;
    margin-bottom: 0;
    float: left !important;
}

.checkbox__icon {
    fill: white;
    width: 30px;
    height: 30px;
}

.checkbox-wrapper input[type="checkbox"] {
    display: none;
}

.checkbox-wrapper input[type="checkbox"] + label {
    border: 2px solid #dadada;
    background-color: #fff;
    border-radius: 20%;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.checkbox-wrapper input[type="checkbox"]:checked + label {
    background-color: gray;
    border-color: transparent;
}

.checkbox-wrapper input[type="checkbox"] + label .checkbox__icon {
    display: none;
}

.checkbox-wrapper input[type="checkbox"]:checked + label .checkbox__icon {
    display: block;
}
.visitor-information-detail-checkbox {
    font-size: 15px;
    line-height: 32px;
}

.visitor-validation-massage {
    font-size: 12px;
    float: left;
}
.custom-text-broadcast {
    max-height: 100px;
    overflow: hidden;
}
.custom-text-broadcast-show {
    max-height: 100%;
    overflow: auto;
}
.auth .modal-content {
    background: url(../img/background-tablet.png) #f3f7fa fixed;
    background-size: cover;
}
.new-message-badge {
    height: 10px;
    font-size: 7px !important;
    position: absolute !important;
}

#preloader,
.preloader,
#preloader_cost {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
    width: 100%;
    height: 100%;
    overflow: visible;
    background-image: url("//cdnjs.cloudflare.com/ajax/libs/file-uploader/3.7.0/processing.gif");
    background-color: rgba(255, 255, 255, 0.6);
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
#preloader span,
.preloader span,
#preloader_cost span {
    font-size: 18px;
    margin-top: 55px;
}
.hidden-preloader {
    display: none !important;
}

.header-title-wrapper {
    padding: 15px 15px;
}

@media screen and (max-width: 576px) {
    .header-title-wrapper {
        padding-left: 50px;
    }
}

.my-message-header {
    position: relative;
    background: #fff;
}

.my-message-header.active {
    background: #f5f5f6;
}

.header-menu-icon {
    position: absolute;
    left: 30px;
    top: 15px;
}

.header-menu-icon:focus {
    outline: none;
}

.header-menu-notifications-icon {
    position: absolute;
    right: 10px;
    top: 13px;
}

.custom-menu-arrow,
.custom-menu-burger {
    width: 24px;
}

.custom-heading-my-messages .custom-heading {
    padding-top: 0;
    padding-left: 0;
    font-size: 23px !important;
    font-family: "Poppins-medium", serif !important;
}

.my-messages-body {
    /*background: #f5f5f5;*/
    overflow-x: hidden;
    /*min-height: 100vh;*/
}

.my-message-header.active {
    box-shadow: none;
}

.flex {
    display: flex;
}

.items-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.default-text {
    color: #7b7b7b;
}

.list-style-none {
    list-style: none;
}

.w-full {
    width: 100%;
}

.gap-1 {
    gap: 0.25rem; /* 4px */
}

.gap-1-5 {
    gap: 0.375rem; /* 6px */
}

.gap-2 {
    gap: 0.5rem; /* 8px */
}

.gap-2-5 {
    gap: 0.625rem; /* 10px */
}

.gap-3 {
    gap: 0.75rem; /* 12px */
}

.gap-3-5 {
    gap: 0.875rem; /* 14px */
}

.gap-5 {
    gap: 1.25rem; /* 20px */
}

.gap-6 {
    gap: 1.875rem; /* 30px 0 */
}

.gap-10 {
    gap: 45px;
}

.gap-y-6 {
    gap: 1.875rem 0px; /* 30px 0 */
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.font-normal {
    font-weight: 400 !important;
}

.font-medium {
    font-weight: 500 !important;
}

.font-semibold {
    font-weight: 600;
}

.px-12 {
    padding-left: 12px;
    padding-right: 12px;
}

.font-circular-loom {
    font-family: "Circular-Loom", serif !important;
}

.text-sm {
    font-size: 0.875rem; /* 14px */
}

.text-base {
    font-size: 1rem; /* 16px */
}

.text-silver {
    color: #7d7d7d;
}

.text-sm {
    font-size: 0.9375rem !important; /*15px */
}

.order-details {
    font-family: "Poppins-light", serif;
}

.order-details .property-name,
.order-cost,
.schedule-time-value,
.scheduled-at-value,
.order-date-value {
    font-weight: 400;
    font-size: 15px;
}

.my-order-container .card .small {
    min-width: 190px;
}
@media only screen and (max-width: 1200px) {
    .my-order-container .card .small {
        min-width: 140px;
    }
}

.my-order-container .content-footer {
    min-height: 90px;
}

#order-messages .chat-message {
    word-break: break-word;
}

.container-fluid .swiper-products-mobile {
    overflow: visible;
}

.swiper-products .swiper-button-next,
.swiper-products .swiper-button-prev{
    background-image: unset;
    top: -10px;
    width: 24px;
    height: 24px;
    font-size: 1.4rem;
    border-radius: 50%;
}
.swiper-products-mobile .swiper-button-next,
.swiper-products-mobile .swiper-button-prev {
    background-image: unset;
    top: -10%;
    width: 24px;
    height: 24px;
    font-size: 1.4rem;
    border-radius: 50%;
}
.swiper-products .swiper-button-prev,
.swiper-products-mobile .swiper-button-prev {
    left: calc(100% - 70px);
}
.swiper-products .swiper-button-next>svg,
.swiper-products .swiper-button-prev>svg,
.swiper-products-mobile .swiper-button-next>svg,
.swiper-products-mobile .swiper-button-prev>svg {
    margin: 0 0 3px 1px;
}

.container-fluid .swiper-products {
    overflow: visible;
    overflow-x: clip;
}

.order-details-content .my-request-details-card .property-name {
    min-width: calc(150px);
}
.order-details-content .payment-details-person-details .my-request-details-card .card-body {
    padding: 10px !important;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .items-per-page {
        display: none;
    }

    .my-order-container .content-footer {
        min-height: 0;
        justify-content: center !important;
    }
    .my-order-container .card .small {
        min-width: 185px
    }
    .order-details .property-name,
    .order-cost, .schedule-time-value,
    .scheduled-at-value, .order-date-value {
        font-size: 12px;
    }

    .my-order-container .card .small i {
        font-size: 10px;
    }

    .my-order-container .fa-file-alt,
    .fa-calendar-check{
        padding-left: .5px;
    }

    .my-order-container .card .small svg {
        height: 10px;
        width: 10px;
    }
    .order-details-content .my-request-details-card .property-name {
        min-width: calc(135px);
    }
}

@media only screen and (max-width: 1024px) {
    main {
        background: unset;
    }

    .navbar-title {
        display: block;
    }

    .order-details {
        max-width: 65.222%;
        padding-right: 30px;
    }

    .order-details i {
        width: 12px;
        height: 12px;
    }

    .my-order-container .img-container > .service-image,
    .my-order-container .img-container {
        width: 100px;
        height: 100px;
    }

    .my-order-container .title-desktop {
        display: none;
    }

    .title-desktop h5 {
        font-family: "Poppins-bold", serif !important;
    }

    .my-order-container .card-body {
        padding: 0;
    }

    .my-order-container .title-mobile {
        gap:5px;
        display: flex;
        padding: 15px 20px;
    }

    .my-order-container .title-mobile h5 {
        font-weight: 500;
        font-size: 14px;
        line-height: inherit;
        font-family: "Poppins-light";
    }

    .resource-controller {
        min-width: 375px;
        margin-top: 20px;
        flex-wrap: nowrap;
        white-space: nowrap;
        padding: 0 25px 20px 20px;
        align-items: flex-start !important;
    }

    .order-information-content {
        gap:6px;
        margin: 0 !important;
        flex-direction: column;
    }

    .my-order-container .card .split-section {
        gap:6px;
        flex-direction: column;
    }

    .my-order-container .card .small > span:nth-child(2) {
        width: calc(70px);
    }

    .my-order-container .card .small > span:nth-child(1) {
        min-width: calc(127px);
    }

    .my-order-container .card .small {
        display: flex;
        justify-content: space-between;
    }
}

/* Extra small devices (390px and less) */
@media only screen and (max-width: 375px) {
    .my-order-container .order-details {
        margin-left: 10px;
    }
    .my-order-container .card .small {
        flex-flow: column;
        align-items: start !important;
    }
    .my-order-container .card .small > span:nth-child(2) {
        margin-left: 16px !important;
    }
}

/* Extra small devices (390px and less) */
@media only screen and (max-width: 300px) {
    .my-order-container .order-details {
        margin-left: 0px;
    }
    .my-order-container .my-request-card .col-auto {
        padding: 0px 5px;
    }
    .order-details-content .card .card-body,
    .card:not(.request-intro).active .card-body {
        padding: 10px !important;
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 992px) {
    .header-title-wrapper {
        min-width: calc(25%);
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    .header-title-wrapper {
        min-width: unset;
    }
}

/*Customize Pagination*/
.pagination {
    gap: 10px;
}

li.page-item {

    display: none;
}

.page-item:first-child,
.page-item:last-child,
.page-item.active,
.page-item.disabled {
    display: flex;
}

.page-link, .page-item.disabled > .page-link {
    background-color: unset !important;
}

.page-item.active {
    background: #907e27;
}

.page-item.active .page-link {
    border-color: #949494 !important;
}

.page-item .page-link,
.page-item.disabled,
.page-item.active .page-link {
    border: unset;
    color: #414146 !important;
    background-color: unset !important;
}

.page-item.active {
    border: unset;
}

.page-item.active > .page-link {
    color: #fff !important;
}

.page-item:first-child, .page-item:last-child {
    font-size: 25px;
    font-weight: bold;
    color: #3e3f44 !important;
}

.page-item, .page-item.disabled {
    width: 40px;
    height: 40px;
    display: flex;
    outline: none;
    border-radius: 6px;
    align-items: center;
    justify-content: center;
    border: 1px solid #949494;
}
/*Quill text editor styles applying on Front*/
.ql-align-right {
    text-align: right;
}
.ql-align-center {
    text-align: center;
}
.ql-align-left {
    text-align: left;
}
.ql-align-justify {
    text-align: justify;
}

.steps form {
    padding-bottom: 30px;
}

.my-account-activation-button:not(.add-more-building):not(.delete-building) {
    position: absolute;
    bottom: 20px;
    right: 40px;
}

@media screen and (max-width: 768px) {
    button.next.my-account-activation-button {
        width: calc(100% - 60px) !important;
        right: 30px;
    }
}


@media screen and ( max-width: 400px ){

    li.page-item {

        display: none;
    }

    .page-item:first-child,
    .page-item:nth-child( 2 ),
    .page-item:nth-last-child( 2 ),
    .page-item:last-child,
    .page-item.active,
    .page-item.disabled {
        display: flex;
    }
}

.items-per-page {
    color: #606263;
}

/*CUSTOM SELECT*/

select {
    /* styling */
    cursor: pointer;
    border: thin solid #a5a5a5;
    border-radius: 8px;
    color: #68696b;
    display: inline-block;
    line-height: 1.5em;
    padding: 0.5em 2.3em 0.5em 1em;

    /* reset */

    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
}


/* arrows */
select.round {
    background-image:
        linear-gradient(45deg, transparent 50%, gray 50%),
        linear-gradient(135deg, gray 50%, transparent 50%),
        radial-gradient(transparent 70%, transparent 72%);
    background-position:
        calc(100% - 20px) calc(1em + 2px),
        calc(100% - 15px) calc(1em + 2px),
        calc(100% - .5em) .5em;
    background-size:
        5px 5px,
        5px 5px,
        1.5em 1.5em;
    background-repeat: no-repeat;
}

select.round:focus {
    background-image:
        linear-gradient(45deg, gray 50%, transparent 50%),
        linear-gradient(135deg, transparent 50%, gray 50%),
        radial-gradient(transparent 70%, transparent 72%);
    background-position:
        calc(100% - 15px) 1em,
        calc(100% - 20px) 1em,
        calc(100% - .5em) .5em;
    background-size:
        5px 5px,
        5px 5px,
        1.5em 1.5em;
    background-repeat: no-repeat;
    outline: 0;
}

select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}
form#visitor-main .floating-input:disabled,
.steps form .floating-input:disabled {
    cursor: default;
}
.disabled{
    background: #f3f3f3!important;
}
.style-hint{
    color: #ff1863;
    font-size: 13px;
    padding: 10px;
}
.card-header-action-container{
    height: 25px;
    width: 50px;
    text-align: right;
}

.file-error-message{
    font-size: 11px;
    color: #d30606;
}
.max-width-100{
    max-width: 100px;
}
.img-container-icon{
    width: 80px;
    float: left;
}
 .password-div-account,
 .password-div,
 .password-div-login,
 .password-div-reset {
     position: relative;
 }
.password-div-account i, .password-div-account svg {
    position: absolute;
    right: 13px;
    top: 33px;
}

.password-div-reset i, .password-div-reset svg {
    position: absolute;
    right: 13px;
    top: 60px;
}

.password-div-login i, .password-div-login svg{
    position: absolute!important;
    right: 13px!important;
    top: 62px!important;
}
.password-div i, .password-div svg  {
    position: absolute;
    right: 13px;
    bottom: 18px;
}