@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Square+Peg&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Euphoria+Script&display=swap"); 

:root {
  --theme-color: #2f3b60; /* default blue */
  --swiper-navigation-size: 16px;
  --swiper-theme-color: #2f3b60;
  --theme-rgb: 47, 59, 96;
  --black: 0, 0, 0;
  --bs-primary-rgb: var(--theme-rgb);
  --bs-link-color: #2f3b60;
  --bs-link-hover-color: var(--theme-color);
  --bs-body-font-size: 0.875rem;
}

:root {
    --bs-blue: #2f3b60;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-primary: #2f3b60;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    --bs-font-sans-serif: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    --bs-font-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --bs-body-font-size: 0.875rem;
}

body {
  font-family: "Poppins", sans-serif;
  font-size: 14px !important;
  font-weight: 400;
  background-color: rgba(var(--theme-rgb), 0.1);
}
.form-control {
  font-size: 0.875rem !important;
}
.btn{
  --bs-btn-font-size: 0.875rem;
}
img{
    max-width: 100%;
}
a{
    color: var(--theme-color);
    text-decoration: none;
}
.debug{
	border:2px dashed #ff0000 !important;
}
strong {
    font-weight: 600;
}
@media (min-width: 1400px) {
    .container,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl {
        max-width:1140px
    }
}
.file-footer-caption {
	display: none !important;
}
.avatar-xs{
	width:32px;
	height:32px;
	min-width:32px;
	min-height:32px;
	border-radius:50%;
	display: inline-flex;
}
.avatar{
	width:44px;
	height:44px;
	min-width:44px;
	min-height:44px;
	border-radius:50%;
	display: inline-flex;
}
.avatar-sm{
	width:58px;
	height:58px;
	min-width:58px;
	min-height:58px;
	border-radius:50%;
	display: inline-flex;
}
.avatar-lg{
	width:80px;
	height:80px;
	min-width:80px;
	min-height:80px;
	border-radius:50%;
	display: inline-flex;
}
.avatar{
	width:32px;
	height:32px;
	border-radius:50%;
}

.avatar img{
	width:100%;
	height:100%;
	object-fit:cover;
	border-radius:50%;
}
.line-after::after {
    width: 40px;
    height: 6px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    content: "";
    border-radius: 8px;
    background-color: var(--theme-color);
}
.change-item {
    position: absolute;
}
#dots-content {
    width: 100%;
    height: 100%;
}
.dot {
    width: 25px;
    height: 25px;
    text-align: center;
    background: var(--theme-color);
    color: #ffffff;
    line-height: 24px;
    font-size: 9px;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    cursor: pointer;
}

.tooltip-inner {
  background-color: #fff !important;   /* White background */
  color: #000 !important;              /* Black text */
  border: 1px solid #ddd;              /* Optional border */
  box-shadow: 0 2px 6px rgba(0,0,0,0.1); /* Optional shadow */
}

.tooltip.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before,
.tooltip.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: #fff !important;
}

.tooltip.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before,
.tooltip.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: #fff !important;
}

.tooltip.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before,
.tooltip.bs-tooltip-start .tooltip-arrow::before {
  border-left-color: #fff !important;
}

.tooltip.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before,
.tooltip.bs-tooltip-end .tooltip-arrow::before {
  border-right-color: #fff !important;
}

.tooltip.tooltip-lg .tooltip-inner{
	max-width: 350px;
}

.form-control{
    padding: 0.575rem 0.75rem;
}
.dropdown-menu{
    --bs-dropdown-font-size: 0.875rem;
    --bs-dropdown-link-active-bg: var(--theme-color);
}
.btn{
    --bs-btn-padding-x: .75rem;
    --bs-btn-padding-y: 0.475rem;
}
.btn-link{
    text-decoration: none;
}
.form-control:focus{
    border-color: var(--theme-color);
    outline: none;
    box-shadow: none;
}
.bg-primary {
    background-color: var(--theme-color) !important;
}
.btn-primary {
    color: #fff;
    background-color: var(--theme-color);
    border-color: var(--theme-color);
    --bs-btn-active-bg: color-mix(in srgb, var(--theme-color) 90%, black);
    --bs-btn-disabled-bg: var(--theme-color);
    --bs-btn-disabled-border-color: var(--theme-color);
}
.btn-primary:hover {
    color: #fff;
    background-color: var(--theme-color);
    border-color: var(--theme-color);
}
.btn-primary:focus {
    color: #fff;
    background-color: var(--theme-color);
    border-color: var(--theme-color);
}

.btn-outline-primary {
	--bs-btn-color: var(--theme-color);
	--bs-btn-border-color: var(--theme-color);
	--bs-btn-hover-bg: var(--theme-color);
	--bs-btn-hover-border-color: var(--theme-color);
	--bs-btn-active-bg: var(--theme-color);
	--bs-btn-active-border-color: var(--theme-color);
	--bs-btn-disabled-color: var(--theme-color);
	--bs-btn-disabled-border-color: var(--theme-color);
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--theme-color);
}
.form-check-input {
    border: var(--bs-border-width) solid var(--theme-color);
}
.form-check-input:checked {
    background-color: var(--theme-color);
    border-color: var(--theme-color);
}


main {
    min-height: calc(100% - 195px);
}
.grayscale {
  filter: grayscale(100%);
}
.bg-light {
    background-color: rgba(var(--theme-rgb), 0.1) !important;
}
.page-header {
    background: var(--theme-color);
    padding-bottom: 65px;
    padding-top: 50px;
}
.navbar-brand img {
    height: 55px !important;
    width: 100% !important;
    min-width: 55px !important;
}
.page-header .main-heading{
    color: #ffffff;
}
.page-header .sub-heading{
    color: #ffffff;
}
.page-header-inner h3{
    color: #ffffff;
}
.background-strip {
    position: relative;
}
.background-strip::before {
    background-color: var(--theme-color);
    height: 130px;
    position: absolute;
    width: 100%;
    width: 100%;
    content: "";
    top: 0;
    left: 0;
    z-index: 1;
}
.globle-card {
    background: #ffffff;
    position: relative;
    z-index: 1;
    border-radius: 15px;
    box-shadow: 0 4px 14px rgba(var(--theme-rgb), 0.1);
}
.toolbar-color {
    padding: 0;
    z-index: 9999;
    display: flex;
    font-size: 13px;
    align-items: center;
    background-color: var(--theme-color);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    min-width: 30px;
    margin: 10px;
}
input#colorPicker {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid  var(--theme-color);
    background-color: var(--theme-color);
    opacity: 0;
}

.toolbar-color label {
    width: 78px;
    line-height: 14px;
}
.mt-n5{
  margin-top: -200px;
}
.layout-header-1{
    min-height: 250px;
    height: 50vh;
}
.layout-theme-color{
    background-color: var(--theme-color);
}
.theme-header img {
    height: 120px;
}
.before-after {
    position: absolute;
    background: rgba(255,255,255,0.8);
    color: #000;
    padding: 4px 12px;
    bottom: 10px;
    left: 10px;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 500;
}
.before-after.after-r {
    right: 10px;
    left: inherit;
}

.how-it-work{
    background-color: rgba(var(--theme-rgb), 0.1);
}

.howitwork-box {
    text-align: center;
    padding: 24px;
}

.howitwork-box p {
    font-weight: 500;
    margin: 0;
}

.howitwork-box img {
    width: 90px;
}


.price-bg{
    background-color: rgba(var(--theme-rgb), 0.1);
}

ul.pricelist {
    margin: 0;
    padding: 0 0 0 14px;
}

ul.pricelist li {
    font-size: 14px;
    font-weight: 400;
    padding: 5px 0;
}
.card-footer.price-footer p {
    font-size: 14px;
    text-align: center;
    font-weight: 400;
}

.card-footer.price-footer {
    text-align: center;
}

.swiper-button-next, .swiper-button-prev {
    background-color: var(--theme-color);
    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
    border-radius: 50%;
    border: 1px solid #fff;
    box-shadow: 0 0 14px rgba(0,0,0,0.1);
}
.swiper-button-next:after, .swiper-button-prev:after{
    font-size: 11px !important;
    color: #fff !important;
}
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled{
    opacity: 0 !important;
}
.swiper-pagination-bullet-active {
    background: var(--theme-color) !important;
}
/* .topservice-prev.swiper-button-prev {
    left: -52px;
}
.topservice-next.swiper-button-next {
    right: -52px;
} */

.recent-projects{
    background-color: rgba(var(--theme-rgb), 0.1);
}
.recent-projects-row .swiper-slide {
  height: 180px;
}
.recent-projects-row .swiper-slide .projects-box {
  height: 100%;
}
.recent-projects-row .swiper-slide .projects-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.how-it-work-layout2{
    background: url("../img/banner.jpg") no-repeat top center;
    background-size: cover;
}
.how-it-work-layout2-inn{
    background-color: rgba(var(--black), 0.8);
}


.layout2-price-bg{
    background-color: var(--theme-color);
}
.theme-header{
    background-color: #fff;
}
.pricelist.pricelist-layout2{
    padding: 0;
    list-style: none;
}
.pricelist.pricelist-layout2 li{
    display: flex;
    gap: 15px;
}

.pricelist.pricelist-layout2 li i{
    color: var(--theme-color);
}

ul.layout-3list {
    margin: 0;
    list-style: none;
    padding: 0;
}

ul.layout-3list li {
    padding: 10px 0;
    font-size: 16px;
    font-weight: 400;
    display: flex;
    gap: 14px;
    position: relative;
}
ul.layout-3list li::before {
    width: 2px;
    height: 100%;
    position: absolute;
    left: 12px;
    top: 38px;
    content: "";
    background: rgba(var(--theme-rgb), 0.3);;
}
ul.layout-3list li:last-child::before {
    display: none;
}
ul.layout-3list li span {
    width: 28px;
    min-width: 28px;
    height: 28px;
    background: var(--theme-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-radius: 50%;
}

.checkmark__circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 2;
  stroke-miterlimit: 10;
  stroke: #ffffff;
  fill: none;
  -webkit-animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
          animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: none;
  stroke-width: 2;
  stroke: #fff;
  stroke-miterlimit: 10;
  margin: 10% auto;
  box-shadow: inset 0px 0px 0px var(--theme-color);
  -webkit-animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
          animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 99;
}

.checkmark__check {
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  -webkit-animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
          animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@-webkit-keyframes stroke {
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes stroke {
  100% {
    stroke-dashoffset: 0;
  }
}
@-webkit-keyframes scale {
  0%, 100% {
    transform: none;
  }
  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
}
@keyframes scale {
  0%, 100% {
    transform: none;
  }
  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
}
@-webkit-keyframes fill {
  100% {
    box-shadow: inset 0px 0px 0px 30px var(--theme-color);
  }
}
@keyframes fill {
  100% {
    box-shadow: inset 0px 0px 0px 30px var(--theme-color);
  }
}

.number-icon{
    width: 24px;
    height: 24px;
    min-width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--theme-color);
    border-radius: 50%;
    font-weight: 500;
    color:  var(--theme-color);
}
.number-icon.number-icon-lg{
  width: 48px;
  height: 48px;
  min-width: 48px;
}

.custom-checkbox{
    width: 100%;
    position: relative;
}
.custom-checkbox h5{
    font-weight: 400;
    color:  var(--theme-color);
}
.custom-checkbox .form-check-label{
    cursor: pointer;
  }
.custom-checkbox .custom-checkbox-img{
    position: relative;
    border: 4px solid transparent;
}
.custom-checkbox .custom-checkbox-img img{
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
}
.aspect-ratio-sm img{
    aspect-ratio: 1.8/1 !important;
}
.aspect-ratio-full img{
    aspect-ratio: inherit !important;
    height: auto;
}
.custom-checkbox .form-check-input{
    position: absolute;
    opacity: 0;
}

.custom-checkbox input[type="checkbox"]:checked + label .checkmark{
    display: block;
}
.custom-checkbox input[type="checkbox"]:checked + label .custom-checkbox-img{
    border-color: var(--theme-color);
}
.custom-checkbox input[type="radio"]:checked + label .checkmark{
  display: block;
}
.custom-checkbox input[type="radio"]:checked + label .custom-checkbox-img {
    border-color: var(--theme-color);
}

.material-box {
    width: 100%;
    height: 100%;
    aspect-ratio: 1/1;
    position: relative;
    filter: grayscale(100%);
}
.material-box.active{
    filter: grayscale(0%);
}
.material-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.material-box label {
    height: 100%;
}

.checkbox-col{
    position: relative;
}
.checkbox-col input{
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    pointer-events: none;
}
.checkbox-col input[type="checkbox"]:checked + label .checkmark{
    display: block;
}
.checkbox-col input[type="radio"]:checked + label .checkmark{
    display: block;
}




.file-preview .file-drop-zone{
    min-height:100px !important;
    margin: 0 !important;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}
.file-drop-zone-title {
    font-size: 13px !important;
    padding: 10px !important;
}      
/* .fileinput-remove{
    z-index: 1 !important;
    width: 22px;
    height: 22px;
    background-size: 9px;
    padding: 0;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 7px;
    top: 8px !important;
    right: 10px !important;
} */
.fileinput-remove {
    display: none !important;
}
.krajee-default.file-preview-frame{
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    float: inherit !important;
    text-align: center !important;
    aspect-ratio: 1/1;
}
.krajee-default.file-preview-frame .kv-file-content{
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 1/1;
}
.krajee-default.file-preview-frame .kv-file-content img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    font: inherit !important;
    border-radius: 8px;
}
.kv-upload-progress .progress-bar.bg-success.progress-bar-success i {
	display: flex;
	font-size: 27px;
}
.krajee-default .file-thumbnail-footer{
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 5px;
}
.krajee-default .file-thumbnail-footer .file-footer-caption{
    margin-bottom: 0 !important;
}
.kv-upload-progress {
  display: none ;
}
.file-preview{
    margin: 0px;
}
.file-preview-status {
    position: absolute;
}
.aspect-small-input .file-preview .file-drop-zone{
    aspect-ratio: 1.8/1;
}
.aspect-small-input .krajee-default.file-preview-frame{
    aspect-ratio: 1.8/1;
}
.aspect-small-input .krajee-default.file-preview-frame .kv-file-content{
    aspect-ratio: 1.8/1;
}

.aspect-medium-input .file-preview .file-drop-zone{
    aspect-ratio: 1.4/1;
}
.aspect-medium-input .krajee-default.file-preview-frame{
    aspect-ratio: 1.4/1;
}
.aspect-medium-input .krajee-default.file-preview-frame .kv-file-content{
    aspect-ratio: 1.4/1;
}

.modal .btn-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 9;
}
.modal-custom-header {
    position: relative;
}
.modal-custom-header img {
    width: 150px;
}
.modal-custom-header::after {
    position: absolute;
    content: "";
    height: 4px;
    width: 100px;
    background: var(--theme-color);
    left: 0;
    right: 0;
    margin: auto;
    bottom: 0;
    border-radius: 4px;
}
.modal-custom-header.white-after::after {
    background: #fff;
}
.my-portfolio .portfolio-nav .nav-item .nav-link {
    position: relative;
}
.my-portfolio .portfolio-nav .nav-item .nav-link::after {
    width: 2px;
    height: 15px;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    content: "";
    background: var(--theme-color);
}
.my-portfolio .portfolio-nav .nav-item:last-child .nav-link::after {
    display: none;
}
.my-portfolio .portfolio-nav .nav-item .nav-link.active {
    color: var(--theme-color);
}
.my-portfolio .project-box{
	padding: 0;
	border: none;
	height: auto;
	min-height: auto;
	max-height: inherit;
    position: relative;
}
.my-portfolio-new .globle-card .create-new-project {
    height: auto;
    min-height: 355px;
    border-radius: 8px;
    box-shadow: -5px 5px 3px rgba(0, 0, 0, 0.1);
}
.my-portfolio .create-new-project {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 15px;
    background: #fff;
    border: 1px dotted #455048;
    height: 100%;
    min-height: 229px;
}
.my-portfolio .project-box .project-box-inner{
	border-radius: 8px;
	padding: 6px;
	border: 1px solid var(--theme-color);
	box-shadow: -5px 5px 3px rgba(0,0,0,0.1);
	overflow: hidden;
	min-height: 290px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.my-portfolio .project-box .project-box-inner .edit-address{
	position: absolute;
	z-index: 99;
	top: -5px;
	right: -5px;
	background: #d40c0c;
	border: none;
	color: #fff;
	width: 28px;
	height: 28px;
	border-radius: 50%;
}
.my-portfolio .project-box .project-box-img {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    flex-direction: column;
    text-align: center;
}
.my-portfolio .project-box .project-box-footer {
    padding: 10px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

.my-portfolio-new .globle-card .project-box .project-box-inner .project-box-img img {
    border-radius: 5px;
    aspect-ratio: 1/1;
    height: auto;
    width: 100%;
}
.my-portfolio .project-box .project-box-img img::before{
	background: rgba(255,255,255,0.5);
}

.my-portfolio .project-stage{
    margin: 10px 0 5px 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 10px 5px;
    flex-wrap: wrap;
}
.my-portfolio .project-stage li{
    margin: 0;
    padding:0;
    display: flex;
    align-items: center;
    font-weight: 500;
    width: auto;
    font-size: 11px;
}
.my-portfolio .project-stage li:nth-child(odd) {
    width: 58%;
}

.my-portfolio .project-stage li span{
    width: 18px;
    height: 18px;
    min-width: 18px;
    border-radius: 50%;
    border: 1px solid var(--theme-color);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    font-size: 10px;
    line-height: 8px;
}
.my-portfolio .project-stage li span{
    color: var(--theme-color);
}
.my-portfolio .project-stage li span i{
    display: none;
}

.my-portfolio .project-stage.active span{
    background: var(--theme-color);
}

.my-portfolio .project-stage.active span strong{
    display: none;
}
.my-portfolio .project-stage.active span i{
    display: block;
    color: #fff;
}
.my-portfolio .project-box .project-box-img .btn-hover-show {
    position: absolute;
    opacity: 0;
    transition: all 0.2s ease-in-out;
}
.my-portfolio .project-box:hover .btn-hover-show {
    opacity: 1;
}
.my-portfolio .project-box .project-box-img .viewdesign-btn {
  position: absolute;
  display: none;
}
.my-portfolio .project-box:hover .viewdesign-btn {
  display: block;
}
.dashboard-clident{
    background: url("../img/dashboard-bg.jpg") no-repeat top center;
    background-size: cover;
    min-height: auto;
}
.invitation-dashboard{
    background: url("../img/dashboard-bg.jpg") no-repeat top center;
    background-size: cover;
    min-height: 715px;
}
.setup-team-password-bg{
    background: url("../img/setup-team-password-bg.jpg") no-repeat top center;
    background-size: cover;
    min-height: 715px;
}
.design-package-con-top {
    position: relative;
}
.iconarrow {
    position: absolute;
    left: -22px;
    top: 50px;
}
.computer-box {
    position: relative;
}
.computer-box .iconarrow-down {
    position: absolute;
    top: 0;
    right: -50px;
}

.portfolio-body-inner {
    position: relative;
    top: -40px;
}
.portfolio-top {
    position: relative;
}

.portfolio-logo {
    position: absolute;
    top: -95px;
    left: 0;
    right: 0;
    margin: auto;
    width: 150px;
    height: 150px;
}

.portfolio-logo-inner {
    position: relative;
}

.portfolio-logo-inner img {
    aspect-ratio: 1/1;
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid var(--theme-color);
    background: #fff;
}

.editlogo {
    position: absolute;
    right: 0;
    bottom: 19px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #b9b9b9;
    border-radius: 50%;
}
.portfolio-social-icon span {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--theme-color);
    border-radius: 50%;
    color: #fff;
    font-size: 18px;
}
.portfolio-banner {
    height: 325px;
}
.portfolio-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}



.custom-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4); /* overlay */
    z-index: 1050;
  }

  .popover-modal {
    position: absolute;
    background: #fff;
    border-radius: 0.5rem;
    padding: 1rem;
    min-width: 250px;
    max-width: 90vw;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.25);
    animation: fadeIn 0.2s ease-out;
    z-index: 1060;
  }

  .popover-header {
    border-bottom: 1px solid #ddd;
    margin-bottom: 0.5rem;
  }

  @keyframes fadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
  }

.IroBox {
    border-radius: 0 !important;
}
.IroSlider {
    border-radius: 0 !important;
    margin-top: 0 !important;
}
.IroSliderGradient {
    border-radius: 0 !important;
}
.backdrop-image-box{
    position: relative;
}
.backdrop-image-box input {
    position: absolute;
    opacity: 0;
    left: 0;
    top: 0;
}
.backdrop-image-box .backdrop-img{
    position: relative;
    border: 2px solid transparent;
    border-radius: 8px;
    overflow: hidden;
}
.backdrop-image-box .backdrop-img img{
    aspect-ratio: 1/1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.pattern_items .backdrop-image-box .backdrop-img img {
	aspect-ratio: 1/1;
	width: auto;
	height: 100%;
	object-fit: cover;
	display: block;
	min-height: 88px;
}
.pattern_items .backdrop-image-box .backdrop-img {
	background: #ddd;
}
.backdrop-image-box input[type="radio"]:checked + label .checkmark{
    display: block;
}
.backdrop-image-box input[type="radio"]:checked + label .backdrop-img{
    border-color: var(--theme-color);
}

.desired-membership-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 30px;
	border-radius: 8px;
	border: 1px solid var(--theme-color);
	position: relative;
}
.desired-membership-box small {
	font-weight: 500;
	border: 0;
	position: absolute;
	top: -11px;
	background: #fff;
	padding: 3px 15px;
	border-radius: 28px;
}
.overlay-layout-theme {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
    z-index: 1;
}

.overlay-layout-inner .caption {
  background: rgba(0,0,0,0.5);
  padding: 30px 15px;
  width: 100%;
  color: #fff;
  text-align: center;
}
.action-btn .btn {
    min-width: 130px;
}
.backbtn{
    min-width: 60px;
    white-space: nowrap;
}
.nextbtn{
    min-width: 60px;
}
.globle-card-footer {
    position: relative;
    height: 40px;
}
.action-btn {
    position: absolute;
    width: 70%;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.st-cropper-select-btn {
        width: 100%;
        height: 100%;
        aspect-ratio: 1/1;
        background: #f9f9f9;
        border: 1px dashed #959595;
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 12px;
    }

    .st-cropper-select-btn:hover{
         border: 1px solid #959595 !important;
    }
    .st-cropper-select-btn i {
        font-size: 40px;
        line-height: 40px;
    }
    #deleteButton {
        position: absolute;
        color: #fff;
        top: 20px;
        font-size: 22px;
    }

    .company-logo.modal-dialog{
        margin-right: auto;
        margin-left: calc(50% + 80px);
        margin-top: 8%;
    }
    .profile-banner.modal-dialog{
        margin-left: 30px;
        margin-right: calc(50% + 100px);
        margin-top: 8%;
    }
    .social-links.modal-dialog{
        margin-right: auto;
        margin-left: calc(50% + 90px);
        margin-top: 7%;
    }
    .primary-work.modal-dialog{
        margin-right: auto;
        margin-left: calc(50% + 90px);
        margin-top: 5%;
    }
    .biography.modal-dialog{
        margin-right: auto;
        margin-left: calc(50% + 80px);
        margin-top: 11%;
    }
    .highlight-section {
        box-shadow: rgba(33, 33, 33, 0.8) 0px 0px 1px 2px, rgba(33, 33, 33, 0.5) 0px 0px 0px 5000px;
    }
    .portfolio-image img {
        width: 100%;
        object-fit: cover;
        aspect-ratio: 1.8/1;
    }
    .banner-sec-row {
        aspect-ratio: 1.9/1;
        width: 100%;
    }
    .banner-sec-row img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .back-profile-settings {
        position: absolute;
        top: 28px;
    }
	.modal-custom-header.small-logo {
	  padding-bottom: 0 !important;
	}
	.modal-custom-header.small-logo::after {
	  display: none;
	}
    .small-logo .modal-title img{
		height: 120px;
		width: auto !important;
		border: 2px solid var(--theme-color);
		padding: 10px;
		border-radius: 50%;
    	aspect-ratio: 1 / 1;
    	background-color: rgba(255, 255, 255, 0.5);
	}
	.small-logo .company-logo img{
		height: 120px;
		width: auto !important;
		border: 10px solid var(--theme-color);
		padding: 10px;
		border-radius: 50%;
    	aspect-ratio: 1 / 1;
    	background-color: rgba(255, 255, 255, 1);
	}
	.small-logo.small-logo-xs img{
		height: 80px;
	}
    .custom-ba-size {
        max-height: 300px;
    }
    .order-items{
      margin: 0;
      padding: 0;
      max-height: 280px;
      overflow: auto;
    }
    .order-items li{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
        background: #fff;
        padding: 10px 15px;
        list-style: none;
        margin-bottom: 0;
        position: relative;
        border: 1px solid #E5F4F9;
        border-bottom: none;
    }
    .order-items li:last-child{
        border-bottom: 1px solid #E5F4F9;
    }
    .order-items li .price{
        font-weight: 500;
        color: var(--theme-color);
        text-align: right;
    }
    .order-items li p{
        margin-bottom: 0;
        font-weight: 500;
    }
      

    .total-price {
      text-align: right;
      padding: 15px 15px 0 15px;
    }
    .total-price h5{
        font-weight: 500;
    }
    .total-price h5 span{
        color: var(--theme-color);
        text-align: right;
    }
    .remove-ext {
        font-size: 12px;
        padding: 1px 5px;
    }
    .hide {
        display: none !important;
    }
    
    .desired-membership-box.onhover:hover {
        box-shadow: 0 4px 14px rgba(0,0,0,0.2);
        border-width: 2px;
        cursor: pointer;
    }
    .desired-membership-box.active {
        border-color: #10d842;
        box-shadow: 0 4px 14px rgba(0,0,0,0.2);
    }
    .desired-membership-box .pkg-selected {
        font-size: 20px;
        color: #1bc3cb;
        position: absolute;
        z-index: 1;
        background-color: #fff;

    }


    .globleoverlay {
        position: fixed;
        background: rgba(0,0,0,0.8);
        z-index: 999999;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
    }
    .globleoverlay .text-center {
        text-align: center!important;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }
    .globleoverlay .loader-payment {
        display: inline-flex;
        width: 62px;
        height: 62px;
        background: #fff;
        align-items: center;
        justify-content: center;
        padding: 14px;
        border-radius: 50%;
        margin-bottom: 10px;
    }
    .globleoverlay h4{
        display: flex;
        align-items: center;
        flex-direction: column;
        font-weight: 300;
    }

    .usercircle {
        width: 150px;
        min-width: 150px;
        height: 150px;
    }


/*----------------- My Portfolio ----------------*/
.my-portfolio .globle-card {
  background: #efece3;
  box-shadow: none;
}
.my-portfolio .create-new-project {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 15px;
  background: #fff;
  border: 1px dotted #455048;
  height: 100%;
  min-height: 229px;
}
.my-portfolio .create-new-project:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}
.my-portfolio .create-new-project i {
  color: #000;
  font-size: 36px;
}
.my-portfolio .create-new-project p {
  margin-bottom: 0;
  font-size: 16px;
  font-weight: 500;
}
.my-portfolio .project-box {
  padding: 10px 10px 44px 10px;
  background: #ffffff;
  border: 1px solid #455048;
  position: relative;
  height: 100%;
  min-height: 256px;
  max-height: 256px;
}
.my-portfolio .project-box:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}
.my-portfolio .project-box .notification {
  background: #ff0000;
  position: absolute;
  top: 15px;
  right: 15px;
  padding: 4px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  z-index: 9;
  color: #ffffff;
}
.my-portfolio .project-box .notification a.icon {
  color: #ffffff;
}
.my-portfolio .project-box .notification .dropdown-menu li {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  padding: 0 0 5px 0;
  margin-bottom: 5px;
}
.my-portfolio .project-box .notification .dropdown-menu li a {
  font-size: 13px;
  color: #0a0a0a;
  line-height: 16px !important;
  display: block;
}
.my-portfolio .project-box .notification .dropdown-menu li a:hover {
  color: var(--theme-color)
}
.my-portfolio .project-box .notification .dropdown-menu li:last-child {
  margin: 0;
  padding: 0;
  border: none;
}
.my-portfolio .project-box .notification .dropdown-menu-end {
  top: 22px;
  right: 0;
  min-width: 200px;
  border: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.my-portfolio .project-box .project-box-img {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  flex-direction: column;
  text-align: center;
}
.my-portfolio .project-box .project-box-img img {
  min-width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.my-portfolio .project-box .project-box-img p {
  margin-bottom: 0;
}
.my-portfolio .project-box .project-box-img .btn-hover-show {
  position: absolute;
  display: none;
}
.my-portfolio .project-box .project-box-img.reviewing-img {
  min-height: 290px;
}
.my-portfolio .project-box .project-box-img .home-sketch {
  min-height: 290px;
}
.my-portfolio .project-box .project-box-img .sketch-model {
  min-height: 290px;
}
.my-portfolio .project-box .project-box-footer {
  padding: 10px;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
.my-portfolio .project-box .project-box-footer .project-title {
  position: relative;
  width: calc(100% - 30px);
  display: flex;
  align-items: center;
}
.my-portfolio .project-box .project-box-footer .project-title span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.my-portfolio .project-box .project-box-footer .project-title i {
  color: var(--theme-color)
}
.my-portfolio .project-box .project-box-footer .project-title span input {
  border: none;
  background-color: transparent;
  font-size: 14px;
  font-weight: 300;
}
.my-portfolio .project-box .project-box-footer .dropdown-menu {
  min-width: 217px;
  max-width: 217px;
}
.my-portfolio .project-box .project-box-footer .dropdown-menu li {
  font-size: 13px;
  text-align: center;
  width: 100%;
  border-right: 1px solid #ddd;
}
.my-portfolio .project-box .project-box-footer .dropdown-menu li:last-child {
  border: none;
}
.my-portfolio .project-box .project-box-footer .dropdown-menu li a {
  padding: 2px 10px;
}
.my-portfolio .project-box .project-box-footer .dropdown-menu.show {
  display: flex;
  align-items: center;
}
.my-portfolio .project-box .progress-overlay::before {
  background: rgba(0, 0, 0, 0.2);
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
}
.my-portfolio .project-box .inprogress-overlay::before {
  background: rgba(0, 0, 0, 0.2);
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.my-portfolio .project-box .inprogress-overlay .btn-hover-show {
  display: block;
}
.my-portfolio .project-box:hover .btn-hover-show {
  display: block;
}
.my-portfolio .project-box:hover .progress-overlay::before {
  opacity: 1;
}
.my-portfolio .portfolio-nav .nav-item .nav-link {
  color: rgba(0, 0, 0, 0.5);
  font-weight: 500;
  position: relative;
}
.my-portfolio .portfolio-nav .nav-item .nav-link.active {
  color: var(--theme-color)
}
.my-portfolio .portfolio-nav .nav-item .nav-link::after {
  width: 2px;
  height: 15px;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  content: "";
  background: var(--theme-color)
}
.my-portfolio .portfolio-nav .nav-item:last-child .nav-link::after {
  display: none;
}

.my-portfolio-new .globle-card {
  background-color: #ffffff;
}
.my-portfolio-new .globle-card .create-new-project {
  height: auto;
  min-height: 340px;
  border-radius: 8px;
  box-shadow: -5px 5px 3px rgba(0, 0, 0, 0.1);
}
.my-portfolio-new .globle-card .project-box {
  padding: 0;
  border: none;
  height: auto;
  min-height: auto;
  max-height: inherit;
}
.my-portfolio-new .globle-card .project-box .project-box-inner {
  border-radius: 8px;
  padding: 6px;
  border: 1px solid var(--theme-color);
  box-shadow: -5px 5px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.my-portfolio-new .globle-card .project-box .project-box-inner .edit-address {
  position: absolute;
  z-index: 99;
  top: -5px;
  right: -5px;
  background: #d40c0c;
  border: none;
  color: #ffffff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
}
.my-portfolio-new .globle-card .project-box .project-box-inner .project-box-img img {
  border-radius: 5px;
  aspect-ratio: 1/1;
  height: auto;
}
.my-portfolio-new .globle-card .project-box .project-box-inner .project-box-img::before {
  background: rgba(255, 255, 255, 0.5);
}
.my-portfolio-new .globle-card .project-box:hover {
  box-shadow: none;
}
.my-portfolio-new .globle-card .project-box .in-progress-icon {
  width: 40px;
  min-width: 80px !important;
  height: 80px !important;
}
.my-portfolio-new .globle-card .project-box .btn.btn-primary.btn-in-progress {
  background: transparent;
  border: none;
  color: var(--theme-color);
  font-size: 16px;
  padding: 0;
  font-weight: 500;
  position: relative;
  z-index: 999;
  cursor: default;
}
.my-portfolio-new .globle-card .project-box .btn.btn-primary.btn-in-progress:hover {
  box-shadow: none;
}
.my-portfolio-new .statusmenu {
  max-width: 320px;
  margin: 0 auto;
}
.my-portfolio-new .statusmenu .statusSwiper .centermode {
  justify-content: start;
}
.my-portfolio-new .statusmenu .statusSwiper .swiper-slide {
  width: auto;
}
.my-portfolio-new .statusmenu .statusSwiper .swiper-slide button {
  padding: 4px 15px;
  position: relative;
  display: block;
  border: none;
  background: transparent;
}
.my-portfolio-new .statusmenu .statusSwiper .swiper-slide button::before {
  position: absolute;
  right: 0;
  top: 9px;
  width: 1px;
  height: 11px;
  background: var(--theme-color);
  content: "";
}
.my-portfolio-new .statusmenu .statusSwiper .swiper-slide button.active::after {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 2px;
  background: var(--theme-color);
  content: "";
  margin: 0 auto;
}
.my-portfolio-new .statusmenu .statusSwiper .swiper-slide:last-child button::before {
  display: none;
}
.my-portfolio-new .status-progress {
  border-bottom: 2px solid var(--theme-color);
  padding-bottom: 50px;
}
.my-portfolio-new .status-progress ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.my-portfolio-new .status-progress ul li {
  width: 33.33%;
  text-align: center;
  position: relative;
}
.my-portfolio-new .status-progress ul li h6 {
  color: var(--theme-color);
  font-size: 14px;
  height: 33px;
  align-items: end;
  display: flex;
  width: 100%;
  text-align: center;
  justify-content: center;
}
.my-portfolio-new .status-progress ul li span {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--theme-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 500;
  color: var(--theme-color);
  position: relative;
  z-index: 9;
  background: #ffffff;
  outline: 6px solid #fff;
}
.my-portfolio-new .status-progress ul li.active span {
  background: var(--theme-color);
  color: #ffffff;
}
.my-portfolio-new .status-progress ul li.active::after {
  background: var(--theme-color);
}
.my-portfolio-new .status-progress ul li::after {
  position: absolute;
  bottom: 15px;
  width: 100%;
  content: "";
  height: 2px;
  background: rgba(109, 69, 90, 0.3);
  left: 50%;
}
.my-portfolio-new .status-progress ul li:last-child::after {
  display: none;
}
.my-portfolio-new .status-progress ul li:nth-child(3)::after {
  display: none;
}
.my-portfolio-new .divider-right {
  position: relative;
}
.my-portfolio-new .divider-right::after {
  position: absolute;
  width: 2px;
  height: 100%;
  content: "";
  background: #293849;
  top: 0;
  right: 0;
}
.disable-area {
    opacity: 0.5;
    pointer-events: none;
}
.my-portfolio .project-box .project-box-footer .project-title {
  position: relative;
  width: calc(100% - 30px);
  display: flex;
  align-items: center;
}
.my-portfolio .project-box .project-box-footer .project-title span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.my-portfolio .project-box .project-box-footer .project-title i {
  color: var(--theme-color);
}
.project-stage li.active span {
  background: var(--theme-color);
}
.project-stage li.active span strong {
  display: none;
}
.project-stage li.active span i {
  display: block;
  color: #ffffff;
}

.modal-custom-header img {
    max-height: 120px;
    width: auto;
}
.modal-header img {
    width: auto;
    max-height: 65px;
}
.defualt-dzinly-logo .modal-title img {
	max-width: 200px;
}
.main-loader {
    position: fixed;
    bottom: 0px;
    left: 0;
    right: 0;
    top: 0;
    margin: auto;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    padding: 10px;
    background: #ffffff;
    overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	border:1px solid rgba(0,0,0,0.15);
	box-shadow: 0 0 18px rgba(0,0,0,0.1);
}

.own-home .own-home-text h4 span {
  background: #293849;
  width: 50px;
  height: 50px;
  color: #ffffff;
  display: inline-flex;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
}
.number-list-items.padding-right {
  padding-right: 28px;
}
.number-list-items .number {
  width: 18px;
  height: 18px;
  min-width: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--theme-color);
  border-radius: 50%;
  font-weight: 500;
  color: var(--theme-color);
}
.upload-select-file .form-group {
  margin-bottom: 10px;
  width: 100%;
  padding-right: 50px;
  position: relative;
}
.btn-primary.bluebtn:hover {
  background-color: #293849;
  border-color: #293849;
}
.upload-select-file .add_more_ue, .upload-select-file .remove_ue {
  height: 38px;
  padding: 8px;
  width: 38px;
  font-size: 15px;
  display: flex;
  align-items: center;
  border-radius: 4px;
  justify-content: center;
  position: absolute;
  top: 0;
  right: 0;
}
.acknowlage-wrapper ul, .commercial-acknowlage-wrapper ul {
  margin: 0;
  padding: 0;
}
.acknowlage-wrapper ul li, .commercial-acknowlage-wrapper ul li {
  list-style: none;
  display: flex;
  align-items: start;
  margin-top: 40px;
}
.acknowlage-wrapper ul li span, .commercial-acknowlage-wrapper ul li span {
  background: #293849;
  background-color: rgb(41, 56, 73);
  min-width: 36px;
  min-height: 36px;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-right: 10px;
}
.acknowlage-wrapper ul li p, .commercial-acknowlage-wrapper ul li p {
  margin: 0;
}
.cad-expect p strong {
  color: var(--theme-color);
  border-bottom: 1px solid var(--theme-color);
}
.upload-picbox .add-additional-photo-box .file-drop-zone-title {
    aspect-ratio: 1 / 1;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
}
.add-additional-photo-box .file-drop-zone-title {
    padding: 42px 10px;
    font-size: 11px !important;
}
.btn.btn-kv {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.pricebox-sec {
    border-radius: 12px;
}
.package-plan {
    padding: 5px 14px 5px 10px;
    background: #293849;
    color: #fff;
    font-weight: 600;
    position: absolute;
    left: -11px;
    top: 11px;
    border-top-right-radius: 20px;
	font-size: 12px;
}

.package-plan::after {
     width: 0;
     height: 0;
     border-top: 0px solid transparent;
     border-right: 12px solid #989898;
     border-bottom: 12px solid transparent;
     position: absolute;
     content: "";
     left: 0px;
     bottom: -12px;
}
.fs-7 {
	font-size: 0.8rem !important;
}
.list-acrd .accordion-item .accordion-button:not(.collapsed) {
	background: transparent;
	color: var(--theme-color);
	box-shadow: none;
}
.arch-box-item {
  width: 100%;
}
.arch-box-item .form-check-input {
  position: absolute;
  opacity: 0;
}
.view-mode {
  padding: 0;
  display: flex;
  align-items: center;
}

.view-mode a {
  color: #293849;
  padding: 0px 10px;
  font-size: 14px;
  font-weight: 500;
}
.design-container {
  background: rgba(0, 0, 0, 0.02);
  position: relative;
}
.layer-photo-container-wrapper {
  position: relative;
}
.layer-photo-container-wrapper .parent-img {
  position: relative;
}
.layer-photo-container-wrapper .fullview {
  position: absolute;
  z-index: 99;
  right: 5px;
  top: 5px;
  background: rgba(0, 0, 0, 0.5);
  max-width: 24px;
  width: 24px;
  height: 24px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 12px;
}
.design-view-right .design-view-modal-outer .design-view-action-box {
  background: #ffffff;
  margin: 0;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}
.design-view-right .design-view-modal-outer .design-view-action-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
  background: var(--theme-color);
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
.design-view-right .design-view-modal-outer .design-view-action-box ul li a {
  padding: 10px;
  display: flex;
  position: relative;
  gap: 5px;
  align-items: center;
  color: #ffffff;
}
.design-view-right .design-view-modal-outer .design-view-action-box ul li a::after {
  width: 1px;
  height: 12px;
  background: #ffffff;
  content: "";
  position: absolute;
  right: 0;
}
.design-view-right .design-view-modal-outer .design-view-action-box .design-view-action-con p {
  margin: 3px;
    margin-bottom: 3px;
  color: var(--theme-color);
}
.current-stage-box img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  pointer-events: none;
}
.builder-service-box {
  height: auto;
}
.builder-service-box {
  position: relative;
}
.builder-service-box img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.builder-service-box img {
  border: 1px solid #455048;
}
.builder-service-box i {
  position: absolute;
  right: 10px;
  bottom: 10px;
  background: #ffffff;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #293849;
}
.design-areabox {
  height: 100%;
  position: relative;
}
.design-areabox img {
  -o-object-fit: cover;
  object-fit: cover;
  border: 1px solid rgba(0, 0, 0, 0.1);
  aspect-ratio: 1/1;
}
.design-areabox .palette-specs {
  font-size: 12px;
  position: absolute;
  bottom: 2px;
  left: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 12px;
  background: var(--theme-color);
  color: #ffffff;
  width: calc(100% - 2px);
}
.design-areabox span {
  text-align: center;
  font-size: 10px;
  width: 100%;
  display: block;
  color: var(--theme-color);
  cursor: pointer;
}
.select-area-img.active {
  position: relative;
}

.swiper-button-disabled {
  opacity: 0 !important;
  pointer-events: none;
}
.globle-swiper-button-next {
  right: 0;
  padding-left: 3px;
}
.globle-swiper-button-prev {
  left: 0;
  padding-right: 3px;
}
.globle-swiper-button-prev, .globle-swiper-button-next {
  position: absolute;
  width: 24px;
  height: 24px;
  top: 0;
  bottom: 0;
  margin: auto;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: #293849;
  border-radius: 50%;
  z-index: 1;
}
.sm-swiper-btn {
  width: 18px;
  height: 18px;
}
.sm-swiper-btn i {
  font-size: 10px;
}

.approved-palettes-designer {
  border: 1px solid #ddd;
  margin-bottom: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  position: relative;
  padding: 14px;
}
.approved-palettes-designer ul {
  margin: 0;
  padding: 0;
  display: flex;
}
.approved-palettes-designer ul li {
  list-style: none;
  width: 25%;
  text-align: center;
  padding: 6px;
}
.approved-palettes-designer ul li .designer-pic {
  text-align: center;
}
.approved-palettes-designer ul li .designer-pic span {
  width: 55px;
  height: 55px;
  display: inline-block;
}
.approved-palettes-designer ul li .designer-pic span img {
  border-radius: 50%;
  width: 100%;
  height: 100%;
}
.approved-palettes-designer ul li .designer-pic p {
  margin-bottom: 0;
  color: #0a0a0a;
  font-size: 12px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  margin-top: 6px;
  padding-bottom: 6px;
  position: relative;
}
.approved-palettes-box {
  border: 1px solid #ddd;
  margin-bottom: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  position: relative;
  padding: 0;
}
.approved-palettes-box .approved-palettes-header {
  padding: 0px;
  border-bottom: 1px solid #ddd;
}
.approved-palettes-box .approved-palettes-header .approved-palettes-next {
  position: absolute;
  right: 2px;
  width: 15px;
  top: 6px;
}
.approved-palettes-box .approved-palettes-header .approved-palettes-prev {
  position: absolute;
  left: 2px;
  width: 15px;
  top: 6px;
}
.approved-palettes-box .approved-palettes-body {
  min-height: 150px;
  padding: 15px 5px;
  width: 100%;
}
.approved-palettes-box .approved-palettes-footer {
  padding: 10px;
  border-top: 1px solid #ddd;
}
.approved-palettes-box .approved-palettes-header .swiper-slide {
  display: inline-flex;
  width: auto;
}
.approved-palettes-box .approved-palettes-header a.active {
  background: #293849;
  color: #ffffff;
}
.approved-palettes-box .approved-palettes-header a {
  padding: 4px 10px;
  border-right: 1px solid #293849;
}
.approved-palettes-box .approved-palettes-body .swiper-container {
  width: calc(100% - 0px) !important;
}
.approved-palettes-box .approved-palettes-body .swiper-slide {
  padding: 13px;
}
.approved-palettes-box .approved-palettes-body .areabox {
  position: relative;
}
.areabox {
  height: 90px;
  width: 90px;
  border: 1px solid var(--theme-color);
  position: relative;
}
.areabox.view-area-palette img {
  border: 1px solid #ddd;
}
.approved-palettes-box .approved-palettes-body .areabox .area-image {
  position: absolute;
  top: 12px;
  right: -12px;
  width: calc(100% - 0px);
  border: 1px solid rgba(0, 0, 0, 0.02);
}
.area-image {
  height: 81px;
  width: 90px;
  overflow: hidden;
  border: 1px solid #eee;
  border-bottom: 0;
  margin-top: 8px;
  margin-left: -10px;
  background-size: cover;
  background-repeat: no-repeat;
}
.approved-palettes-box .approved-palettes-body .areabox h6 {
  text-align: center;
  font-size: 10px;
  padding: 17px 6px 5px;
  margin: 0 -12px 0 0;
  position: relative;
  color: var(--theme-color);
}
.swatch-spec-box {
  position: absolute;
  top: 0;
  z-index: 9999;
  left: 0;
  background: #fff;
  min-height: 236px;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 30px;
  border-radius: 4px;
  flex-direction: column;
}


.fullview-image {
  position: absolute;
  width: calc(100% - 48px);
}

.layer-photo-container-wrapper {
  position: relative;
}
.layer-photo-container-wrapper .fullview {
  position: absolute;
  z-index: 99;
  right: 5px;
  top: 5px;
  background: rgba(0, 0, 0, 0.5);
  max-width: 24px;
  width: 24px;
  height: 24px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 12px;
}
.layer-photo-container-wrapper .parent-img {
  position: relative;
}
.layer-photo-container-wrapper .layer-photo-container-inner {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}
.layer-photo-container-wrapper .layer-photo-container-inner img {
  position: absolute;
  width: 100%;
  height: 100%;
  margin-top: 0px;
  top: 0;
  left: 0;
}

#ToggleYourSwatches .area-element {
  padding: 0;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
}
#ToggleYourSwatches .highlights-layer {
  position: absolute;
  z-index: 99;
  display: block;
  top: 0;
  left: 0;
}
#ToggleYourSwatches .highlights-layer img {
  filter: brightness(0) invert(1);
}
.layer-photo-container-wrapper .layer-photo-container-inner img {
  position: absolute;
  width: 100%;
  height: 100%;
  margin-top: 0px;
  top: 0;
  left: 0;
}
.area-element {
  padding: 8px;
}
.myCombination ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.swiper.myCombination .swiper-slide {
  width: auto;
}
.myCombination li {
  padding: 0 8px;
  position: relative;
}
.myCombination li a.active {
  color: var(--theme-color);
  font-weight: 500;
}
.myCombination li a {
  padding: 0;
  color: #293849;
  font-size: 13px;
  position: relative;
}
.your-design-view .my-combination .selected-combination {
  padding: 10px;
}
.your-design-view .my-combination .selected-combination .selected-combination-header {
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.selectedSwiper .globle-swiper-button-next {
  right: 5px;
  border: 2px solid rgba(255, 255, 255, 0.1);
}
.selectedSwiper .globle-swiper-button-prev {
  left: 5px;
  border: 2px solid rgba(255, 255, 255, 0.1);
}
.design-view-right .design-view-modal-outer .design-view-action-box {
  background: #ffffff;
  margin: 0;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}
.design-view-right .design-view-modal-outer .design-view-action-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
  background: var(--theme-color);
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
.design-view-right .design-view-modal-outer .design-view-action-box ul li a {
  padding: 10px;
  display: flex;
  position: relative;
  gap: 5px;
  align-items: center;
  color: #ffffff;
}
design-view-right .design-help {
  background: #EFF8FB;
  padding: 10px 10px 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 4px;
}
.your-design-view .mymaterials {
  border: 1px solid #ddd;
  margin-bottom: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  position: relative;
}
.your-design-view .mymaterials .mymaterials-toggle {
  max-height: 238px;
}
.your-design-view .mymaterials .my-area-box-row {
  position: relative;
}
.your-design-view .mymaterials .my-area-box-row-header {
  margin-bottom: 0px;
  display: flex;
  padding: 5px 15px;
  background: #efece3;
    background-color: rgb(239, 236, 227);
}
.your-design-view .mymaterials .my-area-box-row-header .designer-title {
  font-size: 13px;
  margin: 0;
}
.designer-title {
  width: 100%;
  align-items: center;
  display: flex;
  padding: 5px 15px;
  font-weight: 500;
  white-space: nowrap;
  flex-wrap: wrap;
}
.your-design-view .mymaterials .my-area-box {
  padding: 15px;
  padding-top: 15px;
}
.your-design-view .mymaterials .my-area-box-row::after {
  width: 90%;
  height: 2px;
  content: "";
  position: absolute;
  margin: auto;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--theme-color);
}
.your-design-view .mymaterials .my-area-box .buynow-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  aspect-ratio: 1/1;
  min-width: 44px;
  padding: 0 15px;
  text-align: center;
  max-height: 44px;
  line-height: 12px;
  font-size: 12px;
  font-weight: 400;
  margin-right: 10px;
}
.myareaSwiper .globle-swiper-button-next {
  top: -12px;
  right: 5px;
  border: 2px solid rgba(255, 255, 255, 0.1);
}
.myareaSwiper .globle-swiper-button-prev {
  top: -12px;
  left: 5px;
  border: 2px solid rgba(255, 255, 255, 0.1);
}
.design-areabox .new_item {
  position: absolute;
  background: #ff0;
  display: inline-block;
  font-size: 11px;
  padding: 0 6px;
  border-radius: 2px;
  left: 3px;
  top: 3px;
}
.design-areabox.active img {
  border: 2px solid var(--theme-color);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
.design-areabox img {
  -o-object-fit: cover;
  object-fit: cover;
  border: 1px solid rgba(0, 0, 0, 0.1);
  aspect-ratio: 1/1;
}
.design-areabox.active img {
  border: 2px solid var(--theme-color);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
.design-areabox .brand-icon {
  position: absolute;
  z-index: 1;
  background: #ffffff;
  padding: 4px;
  width: 30px;
  height: 30px !important;
  border-radius: 0;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 15px;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
  border: none !important;
  box-shadow: none !important;
}
.design-areabox .brand-icon {
  position: absolute;
  z-index: 1;
  background: #ffffff;
  padding: 4px;
  width: 30px;
  height: 30px !important;
  border-radius: 0;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 15px;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
  border: none !important;
  box-shadow: none !important;
  display: none;
}
.design-areabox img {
  -o-object-fit: cover;
  object-fit: cover;
  border: 1px solid rgba(0, 0, 0, 0.1);
  aspect-ratio: 1/1;
}
.design-areabox span {
  text-align: center;
  font-size: 10px;
  width: 100%;
  display: block;
  color: var(--theme-color);
  cursor: pointer;
}
.design-view-right .design-view-modal-outer .design-view-action-box {
  background: #ffffff;
  margin: 0;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}
.design-view-right .design-view-modal-outer .design-view-action-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
  background: var(--theme-color);
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
.design-view-right .design-view-modal-outer .design-view-action-box ul li a {
  padding: 10px;
  display: flex;
  position: relative;
  gap: 5px;
  align-items: center;
  color: #ffffff;
}
.find-contractor {
  padding: 10px;
  border: 1px solid #ddd;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  background: #ffffff;
}
.your-design-view .mymaterials {
  border: 1px solid #ddd;
  margin-bottom: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  position: relative;
}
.progress-strip-viewnn ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}
.progress-strip-viewnn ul li {
  width: 25%;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.progress-strip-viewnn ul li.active span {
  background: #293849;
  color: #ffffff;
}
.progress-strip-viewnn ul li span {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 500;
  color: var(--theme-color);
  position: relative;
  z-index: 9;
  background: #ffffff;
}

.progress-strip-viewnn ul li.active::after {
  background: #293849;

}
.progress-strip-viewnn ul li::after {
  position: absolute;
  bottom: 15px;
  width: 100%;
  content: "";
  height: 2px;
  background: rgba(255, 255, 255, 0.3);
  left: 50%;
}
.design-view-right .design-help {
  background: #EFF8FB;
  padding: 10px 10px 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 4px;
}
.add-cart {
  position: absolute;
  top: 2px;
  left: 0;
  right: inherit;
  width: 15px;
  height: 15px;
  margin: auto;
  background: #ff0000;
  border-radius: 15px;
  color: #ffffff;
  line-height: 15px;
  font-size: 10px;
  font-weight: 500;
  padding: 0 3px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.design-view-right .design-view-modal-outer .design-view-action-box ul li a::after {
  width: 1px;
  height: 12px;
  background: #ffffff;
  content: "";
  position: absolute;
  right: 0;
}
.design-view-right .design-view-modal-outer .design-view-action-box li:last-child{
  list-style: none;
}
.your-design-view .my-designer-list {
  position: relative;
}
.your-design-view .my-designer-list .mydesigner-select {
  background: var(--theme-color);
  border-radius: 4px;
  padding: 10px;
  min-height:60px;
}
.your-design-view .my-designer-list .mydesigner-select .mydesigner-select-row .designer-pic {
  width: 40px;
  height: 40px;
  min-width: 40px;
}
.your-design-view .my-designer-list .mydesigner-select .mydesigner-select-row .designer-pic img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid #ffffff;
  display: block;
}
.your-design-view .my-designer-list .mydesigner-select .mydesigner-select-row .mydesigner-text {
  padding-left: 10px;
}
.your-design-view .my-designer-list .mydesigner-select .mydesigner-select-row .mydesigner-text h6 {
  color: #ffffff;
  margin: 0;
}
.your-design-view .my-designer-list .mydesigner-select .togglebtn {
  background: none;
  border: none;
  color: #ffffff;
}
.your-design-view .my-designer-list .mydesigner-list-dropdown {
  margin: 0;
  padding: 5px 15px;
  list-style: none;
  position: absolute;
  z-index: 9999;
  background: #ffffff;
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}
.your-design-view .my-designer-list .mydesigner-list-dropdown li {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border-bottom: 1px solid rgba(0, 0, 0, 0.02);
}
.your-design-view .my-designer-list .mydesigner-list-dropdown li .my-designer-list-designer {
  margin: 0;
  padding: 10px 0;
  position: relative;
  display: flex;
  align-items: center;
  color: var(--theme-color);
}
.your-design-view .mymaterials {
  border: 1px solid #ddd;
  margin-bottom: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  position: relative;
}
.your-design-view .mymaterials .mymaterials-toggle {
  max-height: 238px;
}
.your-design-view .mymaterials .my-area-box-row {
  position: relative;
}
.your-design-view .my-designer-list .mydesigner-list-dropdown li .view-designer {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #293849;
  color: #ffffff;
  border-radius: 4px;
}
.your-design-view .my-designer-list .mydesigner-list-dropdown li {
  margin: 0;
  padding: 0;
    padding-top: 0px;
    padding-bottom: 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border-bottom: 1px solid rgba(0, 0, 0, 0.02);
}
.your-design-view .my-designer-list .mydesigner-list-dropdown li .my-designer-list-designer .designer {
  width: 25px;
  height: 25px;
  min-width: 25px;
  margin-right: 8px;
}
.your-design-view .my-designer-list .mydesigner-list-dropdown li .my-designer-list-designer .designer img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 50%;
}
.designer-swatches-wrapper {
  padding: 0 20px;
  overflow: auto;
  width: 100%;
}
.designer-swatches-wrapper .designer-swatches-outer {
  position: relative;
  margin-top: 12px;
}
.designer-swatches-wrapper .designer-swatches-outer h6 {
  font-size: 13px;
  margin-left: 0;
  font-weight: 400;
  padding: 0;
}
.designer-swatches-wrapper .designer-swatches-outer {
  position: relative;
  margin-top: 12px;
}
.designer-specs-modal {
  position: absolute;
  background: #ffffff;
  z-index: 9999;
  width: calc(100% + 2px);
  top: 0;
  height: 100%;
  border-radius: 4px;
  right: -1px;
}
.swatch-spec-box {
  position: absolute;
  top: 0;
  z-index: 9999;
  left: 0;
  background: #fff;
  min-height: 236px;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 30px;
  border-radius: 4px;
  flex-direction: column;
}
.designer-swatches-wrapper .designer-swatches-outer .optional-swatch-btn {
  font-size: 11px;
  position: absolute;
  top: 3px;
  width: auto;
  background: var(--theme-color);
  right: 3px;
  padding: 1px 5px;
  color: #ffffff;
}
.design-areabox .buy-now {
  font-size: 11px;
  position: absolute;
  top: 3px;
  width: auto;
  background: var(--theme-color);
  right: 3px;
  padding: 1px 5px;
  color: #ffffff;
}
.edit-combination {
  padding: 4px;
  font-size: 13px;
  width: 22px;
  height: 22px;
  line-height: 13px;
  position: absolute;
  z-index: 99;
  top: 12px;
  left: 12px;
}
.edit-combination {
  display: none;
}
.remove-combination {
  padding: 4px;
  font-size: 13px;
  width: 22px;
  height: 22px;
  line-height: 13px;
  position: absolute;
  z-index: 99;
  top: 12px;
  right: 12px;
}
.remove-combination {
  display: none;
}
.social-share-box {
  position: absolute;
  bottom: 2px;
  z-index: 999;
  background: rgba(255, 255, 255, 0.6);
  width: calc(100% - 4px);
  left: 2px;
}
.social-share-box .jssocials-share {
  margin: 2px;
}
.social-share-box .jssocials-share a {
  border-radius: 50%;
  padding: 0;
  width: 24px;
  min-width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#print-combination-modal-box .layer-title {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.home-photo:hover .edit-combination {
  display: block;
}
.home-photo:hover .remove-combination {
  display: block;
}
.design-view-right .design-view-modal-outer .design-view-action-box ul li:last-child a::after {
  display: none;
}


.customTour {
  text-align: center;
  border-radius: 3px !important;
}
.introjs-tooltipReferenceLayer * {
  font-family: "Poppins", sans-serif !important;
}
.introjs-tooltipReferenceLayer * {
  font-family: "Poppins", sans-serif !important;
}
.customTour .introjs-tooltiptext {
  padding: 15px 20px 10px 20px;
  font-size: 13px;
}
.customTour .introjs-tooltipbuttons {
  padding: 0;
  display: flex;
}
.customTour .introjs-tooltipbuttons .introjs-button {
  padding: 10px;
  width: 100%;
  text-align: center;
  border: none;
  background: no-repeat;
  font-weight: 400;
  color: var(--theme-color);
}
.customTour .introjs-tooltipbuttons .introjs-button.introjs-prevbutton {
  border-right: 1px solid #ddd;
}
.customTour .introjs-tooltipbuttons .introjs-button:focus {
  box-shadow: none;
  outline: none;
}
.customTour .introjs-tooltipbuttons .introjs-button {
  padding: 10px;
  width: 100%;
  text-align: center;
  border: none;
    border-right-width: medium;
    border-right-style: none;
    border-right-color: currentcolor;
  background: no-repeat;
  font-weight: 400;
  color: var(--theme-color);
}
.introjs-bullets {
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
}
.customTour .introjs-skipbutton {
  position: absolute;
  top: 0;
  right: 0;
  font-weight: 400;
  display: none;
}
.customTour .introjs-tooltip-title {
  width: 100%;
  font-size: 15px;
  font-weight: 500;
  position: relative;
}
.info-icon-circle {
	position: absolute;
	right: 12px;
	bottom: 12px;
	background: #ffffff;
	width: 16px;
	height: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: #293849;
}
.current-stage-box input[type="radio"]:checked + label .checkmark {
	display: block;
}
.current-stage-box input[type="radio"]:checked + label img {
	filter: none;
}
.custom-shadow {
	box-shadow: -8px 8px 2px rgba(0, 0, 0, 0.3);
}
.custom-shadow2 {
	box-shadow: -8px 8px 3px rgba(0, 0, 0, 0.1);
}
.design-cordinator-con h5 {
	font-family: "Square Peg", cursive;
	/* font-family: 'Euphoria Script', cursive; */
	font-size: 60px;
	line-height: 55px;
	color: var(--theme-color);
}
.divider-v {
  width: 2px;
  height: calc(100% - 0px); 
  background: var(--theme-color);
}

.swal2-html-container h5 {
  font-size: 18px;
  color: #000;
  margin-bottom: 20px;
}
.swal2-html-container ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.swal2-html-container .error-items {
	color: #010101;
	font-size: 15px;
	display: flex;
	align-items: center;
	justify-content: start;
	padding: 0;
}

.highlight {
    transition: all 1s ease-in-out;
  background: rgba(0,0,0,0.1);
  transform: scale(1.1);
  padding: 8px;
}

.color-material {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}
.color-material .material-title span {
  border-bottom: 2px solid var(--theme-color);
  padding-bottom: 4px;
  display: inline-block;
}
.color-material span.line-divider {
  position: absolute;
  width: 2px;
  background: var(--theme-color);
  content: "";
  height: 100%;
  left: 0;
  right: 0;
  margin: auto;
  padding: 0;
  display: flex;
  align-items: center;
}
.color-material span.line-divider i {
  font-weight: 500;
  position: relative;
  left: -13px;
  font-style: normal;
  background: #fff;
  padding: 4px;
}

.designer-user {
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
  padding: 20px;
  border-radius: 8px;
}
.designer-user .form-check-label {
  cursor: pointer;
}
.designer-user input[type="checkbox"]:checked + label .designer-user-img {
  border-color: var(--theme-color)
}
.designer-user .designer-user-img {
  position: relative;
  border: 4px solid transparent;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
  border-radius: 50%;
  width: 90px;
  height: 90px;
}
.designer-user h6 {
  font-weight: 400;
  color: #0a0a0a;
  font-size: 14px;
}
.designer-user .form-check-input {
  position: absolute;
  opacity: 0;
}
.form-check-input:checked {
  background-color: var(--theme-color);
  border-color: var(--theme-color);
}
.designer-user input[type="checkbox"]:checked + label .checkmark {
  display: block;
}
.designer-user .checkmark {
  width: 32px;
  height: 32px;
  stroke-width: 4;
}
.checkmark {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: none;
  stroke-width: 2;
  stroke: #fff;
  stroke-miterlimit: 10;
  margin: 10% auto;
  box-shadow: inset 0px 0px 0px #293849;
  animation: fill 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s both;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 99;
}
.designer-user .designer-user-img img {
  display: block;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.globle-card .globle-card-header h4 {
  font-size: 18px;
  color: var(--theme-color);
  margin-bottom: 0;
}
.add-color-material .add-color-box {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 33px;
  position: relative;
}
.add-color-material .add-color-box .add-color-box-inner {
  text-align: center;
}
.add-color-material .add-color-box .add-color-box-modal {
  border-radius: 8px;
  padding: 33px;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #ffffff;
  text-align: center;
}
button.btn-close {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 12px;
  z-index: 999;
}
.add-color-material .add-color-box .add-color-box-modal h5 {
  color: var(--theme-color);
  margin-bottom: 15px;
  font-weight: 400;
}
.add-color-material .add-color-box {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 33px;
  position: relative;
  min-height: 360px;
  display: flex;
  align-items: center;
}
.add-color-material .add-color-box .add-color-box-inner {
  text-align: center;
}
.add-color-material .add-color-box .add-color-box-inner span {
  background: var(--theme-color);
  padding: 10px;
  border-radius: 50%;
  width: 90px;
  height: 90px;
  font-size: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 500;
}
.add-color-material .add-color-box .add-color-box-inner p {
  margin-top: 20px;
  min-height: 76px;
  font-size: 13px;
}
.add-color-material .add-color-box .add-color-box-modal {
  border-radius: 8px;
  padding: 33px;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #ffffff;
  text-align: center;
}
.ripple {
  background-position: center;
  transition: background 0.8s;
}
.current-stage {
  width: 100%;
}
.current-stage h5 {
  font-weight: 400;
  color: var(--theme-color);
}
.current-stage .form-check-input {
  position: absolute;
  opacity: 0;
}
.current-stage .form-check-label {
  cursor: pointer;
}
.current-stage-box label {
  cursor: pointer;
}
.view-area-box.current-stage .current-stage-img {
  border: 4px solid #455048;
}
.current-stage .current-stage-img {
  position: relative;
  border: 4px solid transparent;
}
.current-stage .current-stage-img img {
  display: block;
}
.view-area-box.current-stage .current-stage-img .btn {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto !important;
  bottom: 0;
  width: 80px;
  height: 40px;
  pointer-events: none;
}
.current-stage-box img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  pointer-events: none;
}
.additional-featured-box {
  margin: 15px;
}
.additional-featured-box .form-check-input {
  position: absolute;
  opacity: 0;
}
.additional-featured-box .form-check-label {
  cursor: pointer;
}
.additional-featured-box .additional-box {
  position: relative;
  border: 2px solid var(--theme-color);
  height: 150px;
  width: 150px;
  background-color: #efece3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.additional-featured-box .additional-box h4 {
  font-weight: 300;
  margin: 0;
  font-size: 20px;
  padding: 10px;
}
.additional-featured-box input[type="radio"]:checked + label .checkmark {
  display: block;
}
.upload-photo-box img {
  width: 60%;
}
.border-right {
  border-right: 1px solid #ddd;
}
.add-additional-photo-box .file-drop-zone {
  min-height: 160px;
}
.add-additional-photo-box .krajee-default.file-preview-frame {
  float: none;
  min-height: 148px;
}
.kv-upload-progress .progress {
  height: 32px !important;
  background: transparent !important;
}
.kv-upload-progress .progress-bar.bg-success.progress-bar-success {
  width: 100% !important;
  height: 32px !important;
  max-width: 32px !important;
  background-color: #fff !important;
  color: #25ec50;
  border-radius: 50%;
  display:flex;
  align-items: center;
  justify-content: center;
}
.kv-upload-progress.kv-hidden {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 50px;
  top: 0;
  height: 70px;
}
.kv-upload-progress .progress {
  height: 50px !important;
  background: transparent !important;
}
.brief-overview .stepsec {
  margin: 0;
  padding: 0;
  list-style: none;
}
.brief-overview .stepsec li.active {
  opacity: 1;
  border-color: var(--theme-color);
}
.brief-overview .stepsec li {
  padding: 15px;
  text-align: center;
  opacity: 0.2;
  border-bottom: 2px solid #ddd;
    border-bottom-color: rgb(221, 221, 221);
}
.brief-overview .stepsec li.active h5 {
  color: var(--theme-color);
}
.brief-overview .stepsec li h5 {
  font-weight: 500;
}
.brief-overview .stepsec li p {
  margin-bottom: 0;
  font-weight: 500;
}
.horigental-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.horigental-menu li.active::after {
  background: var(--theme-color);
  content: "";
  width: 42px;
  position: absolute;
  height: 3px;
  bottom: 4px;
  margin: auto;
  left: 0;
  right: 0;
  border-radius: 10px;
}
.horigental-menu li.active a {
  color: var(--theme-color);
}

.horigental-menu li a {
  margin: 0;
  color: #0a0a0a;
  padding: 0 10px 8px;
  display: flex;
}
.horigental-menu li {
  margin: 0;
  position: relative;
}
.disable-area {
  opacity: 0.5;
  pointer-events: none;
}
.centermode {
  justify-content: center;
}
.elivation-area-left {
  max-width: calc(100% - 147px);
  position: relative;
}
.elivation-area-left .swiper-slide {
  min-width: 139px;
}
.elivation-area-left .design-areabox {
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.design-areabox {
  height: 100%;
  position: relative;
}
.elivation-area-left .design-areabox .form-check-input {
  position: absolute;
  opacity: 0;
}
.elivation-area-left .design-areabox .form-check-label {
  cursor: pointer;
  display: block;
}
.elivation-area-left .design-areabox .select-area-img {
  position: relative;
  border: 2px solid transparent;
  border-radius: 0;
  overflow: hidden;
  padding: 0px;
}
.elivation-area-left .design-areabox .select-area-img img {
  display: block;
  border: none;
}
.design-areabox img {
  -o-object-fit: cover;
  object-fit: cover;
  border: 1px solid rgba(0, 0, 0, 0.1);
  aspect-ratio: 1/1;
}
.elivation-area-left .design-areabox input[type="checkbox"]:checked + label .checkmark {
  display: block;
}
.skip-area {
  width: 147px;
  border: 2px solid var(--theme-color);
  background: #efece3;
  margin-left: 0;
}
.skip-area a {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  text-align: center;
}
.brief-overview .brief-overview-box h6 {
  font-weight: 400;
  line-height: normal;
}
.brief-overview .brief-overview-box .version-content {
  padding: 30px;
  border: 2px solid #455048 !important;
  width: 100%;
}
.divider {
  display: block;
  width: 100%;
  height: 1px;
  background: #f2f2f2;
}
.brief-overview .brief-overview-box h6 {
  font-weight: 400;
  line-height: normal;
}
.brief-overview .brief-upload-box {
  padding: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
}
.brief-overview .brief-upload-box textarea {
  padding: 6px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  width: 100%;
  height: 55px;
  font-size: 12px;
  background: #fff;
  box-shadow: none;
}

.remove_ue {
	position: absolute;
	top: 0;
	right: 0;
	padding: 0;
	margin: 0;
	width: 24px;
	height: 24px;
	font-size: 12px;
	border-radius: 50%;
}

.design-areabox {
  height: 100%;
  position: relative;
}
.design-areabox .buy-now {
  font-size: 11px;
  position: absolute;
  top: 3px;
  width: auto;
  background: var(--theme-color);
  right: 3px;
  padding: 1px 5px;
  color: #ffffff;
}
.design-areabox .new_item {
  position: absolute;
  background: #ff0;
  display: inline-block;
  font-size: 11px;
  padding: 0 6px;
  border-radius: 2px;
  left: 3px;
  top: 3px;
}
.design-areabox img {
  -o-object-fit: cover;
     object-fit: cover;
  border: 1px solid rgba(0, 0, 0, 0.1);
  aspect-ratio: 1/1;
}
.design-areabox.active img {
  border: 2px solid var(--theme-color);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
.design-areabox .brand-icon {
  position: absolute;
  z-index: 1;
  background: #ffffff;
  padding: 4px;
  width: 30px;
  height: 30px !important;
  border-radius: 0;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 15px;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
  border: none !important;
  box-shadow: none !important;
  display: none;
}
.design-areabox:hover .brand-icon {
  opacity: 1;
}
.design-areabox span {
  text-align: center;
  font-size: 10px;
  width: 100%;
  display: block;
  color: var(--theme-color);
  cursor: pointer;
}
.design-areabox .palette-specs {
  font-size: 12px;
  position: absolute;
  bottom: 2px;
  left: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 12px;
  background: var(--theme-color);
  color: #ffffff;
  width: calc(100% - 2px);
}
.setting-nav{
  list-style: none;
}
.setting-nav .swiper-slide {
  width: auto;
}


.color-grid {
	display: grid;
	grid-template-columns: repeat(10,31px);
	gap: 4px;
	margin-top: 15px;
}
.color-box{
    width:32px;
    height:32px;
    border-radius:4px;
    cursor:pointer;
    position:relative;
    transition: .2s;
    border:3px solid transparent;
	
}

.color-box.active{
    border-color:#000; /* Active border */
}

.color-box.active::after{
    content:"✔";
    color:#fff;
    font-size:18px;
    font-weight:bold;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
}
.project-view-nav.active {
    background: var(--theme-color);
    color: var(--bs-white);
}
.view-navbar .nav-item {
    position: relative;
}
.view-navbar .nav-item::after {
    position: absolute;
    bottom: 0;
    width: 2px;
    content: "";
    height: 13px;
    background: rgba(0, 0, 0, 0.1);
    top: 0;
    margin: auto;
    right: 0;
}
.view-navbar .nav-item:last-child::after {
    display: none;
}
.view-navbar .nav-item .nav-link {
    padding: 0 18px;
    font-weight: 500;
}
.view-navbar .nav-item .nav-link.active {
    color: var(--theme-color);
}
.toggle-full-view.show-fullview {
    position: absolute;
    top: -111px;
    left: 0;
    z-index: 9999;
}
.toggle-full-view.show-fullview::before {
    position: fixed;
    content: "";
    background: #000;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0.5;
}
.design-container {
    background: rgba(0, 0, 0, 0.02);
    position: relative;
}
.message-link ul {
	margin: 0;
	list-style: none;
	padding: 0;
	display: flex;
	gap: 20px;
}
.message-link ul li {
	position: relative;
}
.message-link ul li a {
	font-size: 12px;
	font-weight: 500;
	color: var(--theme-color);
}
.message-link ul li::after {
	position: absolute;
	top: 4px;
	right: -10px;
	content: "";
	width: 2px;
	height: 15px;
	background: var(--theme-color);
}
.message-link ul li:last-child::after{
	display: none;
}
.note-box {
	border-radius: 10px;
	min-height: 200px;
	position: relative;
}
.note-form {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
small.feature-note {
	font-size: 10px;
	text-align: center;
	display: block;
}
.note-form .note-form-inner {
	background: #ffffff;
	position: relative;
	z-index: 99;
	padding: 15px;
	border-radius: 10px;
	height: 100%;
}
.note-form .note-form-inner .form-control {
	border: none;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	background: #ffffff;
	box-shadow: none;
	border-radius: 0;
}
.note-form .note-form-inner .form-control {
	border: none;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	background: #ffffff;
	box-shadow: none;
	border-radius: 0;
}
.note-form::after {
	position: fixed;
	background: #000;
	content: "";
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 9;
	opacity: 0.3;
}
.message-modal-sec .modal-footer form {
    width: calc(100% - 50px);
}

.custom-checkbox.combination-box .custom-checkbox-img img {
    object-fit: unset;
    aspect-ratio: unset;
}

.send-chat-box-inner {
    display: flex;
    gap: 8px;
    padding-bottom: 20px;
    position: relative;
    width: 70%;
}

.send-chat-box-inner span {
    position: absolute;
    bottom: -2px;
    font-size: 13px;
}

.send-chat-box {
    display: flex;
    justify-content: end;
    margin: 10px 0;
}

.send-chat-bubble {
    padding: 15px;
    background: rgba(var(--theme-rgb), 0.2);
    border-radius: 16px 0 16px 16px;
}

.send-chat-box-inner .user {
    width: 44px;
    min-width: 44px;
    border: 1px solid var(--theme-color);
    border-radius: 50%;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--theme-color);
}
.w-24{
  width: 24px;
  min-width: 24px;
  height: 24px;
}
.w-16 {
    width: 16px;
    min-width: 16px;
    height: 16px;
    font-size: 8px;
}
.filter-img{
  cursor: pointer;
}
.filter-img img{
  border: 2px solid transparent;
}
.filter-img.active img{
  border-color: var(--theme-color);
}
.saved-img{
  cursor: pointer;
}
.saved-img img{
  border: 2px solid transparent;
}
.saved-img.active img{
  border-color: var(--theme-color);
}
.presentation-tab .nav-link {
    font-size: 12px;
}
.note-box .note-box-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-weight: 500;
	margin-bottom: 15px;
	color: var(--theme-color);
}
.architectureal-changes-box .architectureal-area-box.active {
    background: var(--theme-color);
    color: #fff;
}
.architectureal-changes-box .architectureal-area-box.active a {
    color: #fff;
}
.btn-promo-code {
    height: 33px;
    padding-top: 4px;
}
.wait {cursor: wait !important;}
.spinner-overlay {
	background: rgba(0,0,0,0.5);
	z-index: 9999;
}
               
/*========================================================*/
/* CANVAS EDITOR START CSS ===============================*/
/*========================================================*/

/* GLOBAL TOOLBAR */
.toolbar-static {
  background: #2d2d2d; border-radius: 10px;
  padding: 7px 14px; display: flex; align-items: center; gap: 4px; width: 100%;
}
.t-sep { width:1px; height:20px; background:#555; margin:0 4px; }

/* TOOLBAR BTN */
.toolbar-btn {
    background: none;
    border: none;
    font-size: 13px;
    color: #000;
    cursor: pointer;
    padding: 5px;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 32px;
    min-height: 32px;
    border-radius: 32px;
}
.toolbar-btn:hover  { background: rgba(0, 0, 0, 0.05) }
.toolbar-btn.active { background: rgba(0, 0, 0, 0.05) }
.canvas-wrapper {
  position: relative; border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  border: 1px solid #ddd; overflow: visible;
}
canvas { display: block; border-radius: 12px; }
/* FLOATING TOOLBAR */
.floating-toolbar {
  position: absolute;
  display: none;
  align-items: center;
  gap: 4px;
  background: #fff;
  border-radius: 50px;
  padding: 5px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.45);
  z-index: 9999;
  white-space: nowrap;
  pointer-events: all;
}

.ft-sep { width:1px; height:20px; background:#444; margin:0 3px; }
.ft-select {
  background: white; color: var(--theme-color); border: 1px solid var(--theme-color);
  border-radius: 32px;
  padding: 3px 10px;
  font-size: 12px;
  height: 32px;
  outline: none;
}
.ft-custom-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  padding-right: 2.5rem; /* space for arrow */
  background-color: #fff;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5.5l6 6 6-6' stroke='black' stroke-width='2' fill='none'/%3E%3C/svg%3E");

  background-repeat: no-repeat;
  background-position: right 9px center; /* 👈 adjust here */
  background-size: 12px;
}
.ft-color {
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid #555; cursor: pointer; padding: 0;
}

/* Tooltip main box */
.dark-tooltip .tooltip-inner {
  background-color: #000000 !important;
  color: #ffffff !important;
}

/* Arrow for top */
.dark-tooltip.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: #000000 !important;
}

/* Arrow for bottom */
.dark-tooltip.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: #000000 !important;
}

/* Arrow for left */
.dark-tooltip.bs-tooltip-start .tooltip-arrow::before {
  border-left-color: #000000 !important;
}

/* Arrow for right */
.dark-tooltip.bs-tooltip-end .tooltip-arrow::before {
  border-right-color: #000000 !important;
}


.tooltip.dark-tooltip.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before, .tooltip.dark-tooltipbs-tooltip-top .tooltip-arrow::before {
    border-top-color: #000000 !important;
}

.pickr {
    border-radius: 50%;
    border: 1px solid #ddd;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}
button.pcr-button {
    overflow: hidden !important;
    border-radius: 50% !important;
    width: 14px !important;
    height: 14px !important;
}

.sp-row { display: flex; align-items: center; gap: 8px; }

/* Stroke style buttons */
.sp-stroke-btn {
  width: 38px;
  height: 32px;
  border: 1.5px solid #e5e7eb;
  border-radius : 8px;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.sp-stroke-btn:hover  { border-color: #6366f1; background: #f5f3ff; }
.sp-stroke-btn.active { border-color: #6366f1; border-width: 2px; background: #f5f3ff; }

/* Range slider — Figma style */
.sp-slider-row {
	flex: 1;
}

.sp-range {
	-webkit-appearance: none;
	flex: 1;
	height: 4px;
	border-radius: 4px;
	background: #e5e7eb;
	accent-color: #6366f1;
	cursor: pointer;
	outline: none;
}

.sp-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid #6366f1;
	box-shadow: 0 1px 4px rgba(99, 102, 241, 0.25);
	cursor: pointer;
}

.sp-range::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid #6366f1;
	box-shadow: 0 1px 4px rgba(99, 102, 241, 0.25);
	cursor: pointer;
}

/* Number box */
.sp-num-box {
	min-width: 30px;
	height: 28px;
	border: 1px solid #e5e7eb;
	border-radius: 7px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 500;
	color: #374151;
	background: #f9fafb;
	padding: 0 6px;
}
.floating-toolbar .dropdown-menu {
    margin-top: 8px !important;
    border: 0;
    border-radius: 14px;
    margin-bottom: 8px !important;
}

.custom-tooltip-wd .tooltip-inner {
  max-width: 300px !important;
  min-width: 300px !important;
}
/*========================================================*/
/* CANVAS EDITOR END CSS =================================*/
/*========================================================*/
.dzy-chat-items {
	border: 1px solid transparent;
	cursor: pointer;
}
.dzy-chat-items:hover {
	background-color: #fff;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	border-color: rgba(0, 0, 0, 0.15);
}

.project-owner .rounded-circle {
	border: 4px solid #fff;
	outline: var(--theme-color) solid 7px;
}

.user-short {
    display: flex;
    padding: 0;
    margin: 0;
    list-style: none;
}

.user-short li {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #6c757d;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    text-transform: uppercase;
    border: 2px solid #fff;
    margin-left: -10px; /* overlap control */
	transition: all 0.5ms ease;
}

.user-short li:first-child {
    margin-left: 0;
}
.user-short li:hover {
	transform: scale(1.05);
}

.small.blur-text {
    filter: blur(3px);
}
.active>.page-link, .page-link.active{
  --bs-pagination-active-bg: var(--theme-color);
  --bs-pagination-active-border-color: var(--theme-color);
}

/* active selection */
.radio-tab {
    cursor: pointer;
    transition: 0.2s ease;
}

.radio-tab.active {
    border-color: #0d6efd !important;
    background: #f8fbff;
}
.standard-content,
.instant-content {
    display: none;
}

#main-modal-body .con-wrapper
{
	max-height: 215px;
}
#serviceMdl .con-wrapper{
  max-height: 193px;
}
#serviceMdl .small-logo img {
    height: 80px;
}

/*============ Responsive CSS ============*/
@media (max-width: 1240px) { 
	.layout-header-1{
		height: 450px !important;
	}
}
@media (min-width: 576px) {
  .modal-sm {
    max-width: 400px;
  }
}

@media (max-width: 575.98px) { 
  .page-header {
    padding-bottom: 20px;
    padding-top: 25px;
  }
  .page-header .main-heading {
    font-size: 18px;
  }
  .remove-border {
    border: none !important;
  }
  .worktype-title{
    font-size: 12px;
  }
  .social-links.modal-dialog, .profile-banner.modal-dialog, .company-logo.modal-dialog, .primary-work.modal-dialog, .biography.modal-dialog {
    margin-right: inherit;
    margin-left: inherit;
    margin-top: inherit;
    padding: 5px;
  }
  .portfolio-nav .nav-link {
    font-size: 12px;
  }
  .share-dropdown {
    position: absolute;
    top: 4px;
    right: 10px;
  }
  .border-sm-top-0 {
    border-top: 0 !important;
  }

  .border-sm-bottom-0 {
    border-bottom: 0 !important;
  }

  .border-sm-start-0 {
    border-left: 0 !important;
  }

  .border-sm-end-0 {
    border-right: 0 !important;
  }
  .dropmore-menu-mob {
    position: absolute;
    top: 8px;
    right: 12px;
  }
  .toggle-full-view.show-fullview {
    top: 0;
  }
  .layout-header-1 {
    height: 402px;
  }
  .dbr-n{
    right: -11px;
  }
  .dbr-p{
    left: -11px;
  }
  .globle-card-footer {
    height: auto;
    padding-top: 48px;
    margin-top: 0 !important;
  }
  .action-btn {
    top: 0;
  }
  .action-btn .btn {
    font-size: 13px;
  }
  .your-design-view h6{
    font-size: 14px;
  }
  .color-material-btn{
    font-size: 12px;
  }
  .custom-shadow2{
    box-shadow: none;
  }
  .dashboard-clident{
    min-height: auto;
  }
  .message-link ul li a{
    font-size: 14px;
  }
  .spec-sheet iframe {
    height: 350px;
  }
  .project-comunication .divider-v {
    width: 100%;
    height: 2px !important;
    margin-bottom: 18px;
  }
  .qrcode-profile img {
    width: 100%;
  }
  /* .chat-box {
    width: 320px !important;
    height: 350px !important;
  } */
  .message-el {
    font-size: 12px;
    width: 58%;
  }
  #layer_material_palettes{
  	min-height: 192px !important;
	max-height: 192px !important;
  }
  .myCombination ul li:first-child {
	padding-left: 0;
  }
  .design-view-right .design-view-modal-outer .design-view-action-box ul li a::after {
	right: -19px;
  }
  .my-portfolio .project-box .project-box-img .btn-hover-show{
  	display:block !important;
	opacity: 1 !important;
  }
  .my-portfolio .project-box .viewdesign-btn{
  	display:block !important;
	opacity: 1 !important;
  }
}
.cursor-pointer {
  cursor: pointer;
}
.transaction-success td {
  color: #05ad83;
  background: rgba(0, 203, 71, 0.05);
}
.transaction-pending td {
  color: #443be6;
  background: rgba(0, 243, 255, 0.05);
}
.transaction-failed td {
  color: #710c06;
  background: rgba(190, 51, 0, 0.05);
}

 @media (max-width: 475.98px) {
    .chat-box {
        width: 100% !important;
        height: 72% !important;
        bottom: 0 !important;
        right: 0 !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }
}