.dxbl-modal > .dxbl-modal-root:has(.dxbl-popup.quickview) {
    background: rgba(0,0,0,0.5);
	animation: qv-masker .5s ease !important;
}
.dxbl-modal > .dxbl-modal-root > .dxbl-popup.quickview {
    height: calc(100% - 47px) !important;
    top: 47px;
    right: 0;
    position: absolute;
    margin: 0;
    border-radius: 20px 0 0 0;
	overflow: hidden;
	border: 1px solid rgba(var(--midgrey), 0.5);
}
.dxbl-modal > .dxbl-modal-root > .dxbl-popup.quickview .dxbl-modal-body {
	box-shadow: inset 0px 0px 0px 1000px rgba(var(--sidebar-background), 0.1);
}
.dxbl-modal > .dxbl-modal-root > .dxbl-popup.quickview .xaf-object-caption {
	display: none;
}

/* LARGE */
 .dxbl-modal > .dxbl-modal-root > .dxbl-popup:not(.dxbl-popup-resized):not(.dxbl-popup-fixed-width).quickview-large {
    width: 1500px;
    max-width: 1500px;
    /*animation-name: open-large;
	animation-duration: 1s;*/
	animation: open-large .5s ease !important;
}

/* MEDIUM */
 .dxbl-modal > .dxbl-modal-root > .dxbl-popup:not(.dxbl-popup-resized):not(.dxbl-popup-fixed-width).quickview-medium {
    width: 1000px ;
    max-width: 1000px ;
    animation: open-medium .5s ease !important;
}

/* SMALL */
 .dxbl-modal > .dxbl-modal-root > .dxbl-popup:not(.dxbl-popup-resized):not(.dxbl-popup-fixed-width).quickview-small {
    width: 500px ;
    max-width: 520px ;
    animation: open-small .5s ease !important;
}

/* XSMALL */
 .dxbl-modal > .dxbl-modal-root > .dxbl-popup:not(.dxbl-popup-resized):not(.dxbl-popup-fixed-width).quickview-xsmall {
    width: 300px ;
    max-width: 300px ;
    animation: open-small .5s ease !important;
}

.dxbl-modal > .dxbl-modal-root > .dxbl-popup.quickview .dxbl-popup-header {
    position: fixed;
    background: var(--bs-body-bg);
    z-index: 2;
    height: 40px;
	padding: 14px;
    border-bottom: 1px solid rgba(var(--midgrey), .5);
	border-radius: 20px  0 0 0;
}

.dxbl-modal > .dxbl-modal-root > .dxbl-popup.quickview.quickview-large .dxbl-popup-header {
    width: 1500px;
}
.dxbl-modal > .dxbl-modal-root > .dxbl-popup.quickview.quickview-medium .dxbl-popup-header {
    width: 1000px;
}
.dxbl-modal > .dxbl-modal-root > .dxbl-popup.quickview.quickview-small .dxbl-popup-header {
    width: 500px;
}
.dxbl-modal > .dxbl-modal-root > .dxbl-popup.quickview.quickview-xsmall .dxbl-popup-header {
    width: 300px;
}
    .dxbl-modal > .dxbl-modal-root > .dxbl-popup.quickview .quickview-body {
        height: calc(100% - 93px) !important;
    }

    .dxbl-modal > .dxbl-modal-root > .dxbl-popup.quickview .dxbl-modal-body {
        margin-top: 48px;
        animation-name: open-qv-body;
        animation-duration: 1s;
    }

    .dxbl-modal > .dxbl-modal-root > .dxbl-popup.quickview > .dxbl-modal-content,
    .dxbl-modal > .dxbl-modal-root > .dxbl-popup.quickview.dxbl-popup-scrollable > .dxbl-modal-content	{
        border-radius: 0px;
		max-height: 100% !important;
    }

    .dxbl-modal:has(.quickview) > .dxbl-modal-back {
        display: none !important;
    }
    /* opening animation code */
@keyframes qv-masker {
    0% {
        background: rgba(0,0,0,0);
    }

    90% {
        background: rgba(0,0,0,0.75);
    }

    100% {
        background: rgba(0,0,0,0.5);
    }
}
@keyframes open-xsmall {
    0% {
        width: 0px;
    }

    90% {
        width: 320px;
    }

    100% {
        width: 300px;
    }
}
    @keyframes open-small {
        0% {
            width: 0px;
        }

        90% {
            width: 520px;
        }

        100% {
            width: 500px;
        }
    }

    @keyframes open-medium {
        0% {
            width: 0px;
        }

        90% {
            width: 1020px;
        }

        100% {
            width: 1000px;
        }
    }

    @keyframes open-large {
        0% {
            width: 0px;
        }

        90% {
            width: 1520px;
        }

        100% {
            width: 1500px;
        }
    }

    @keyframes open-qv-body {
        0% {
            opacity: 0;
        }

        50% {
            opacity: 0;
        }

        75% {
            opacity: .5
        }

        100% {
            opacity: 1;
        }
    }

    .dxbl-modal > .dxbl-modal-root > .dxbl-popup.quickview .dxbl-modal-header .dxbl-toolbar .dxbl-btn-toolbar {
        padding-right: 20px;
    }

    .dxbl-modal > .dxbl-modal-root > .dxbl-popup.quickview .dxbl-modal-footer {
       border-top: 1px solid rgba(var(--midgrey), 0.5) !important;
	   padding: 10px;
    }

    .dxbl-modal > .dxbl-modal-root > .dxbl-popup.quickview .dxbl-modal-content > .dxbl-modal-header .dxbl-popup-header-button {
        margin-top: 0px;
        margin-right: -10px;
    }
    .dxbl-modal > .dxbl-modal-root > .dxbl-popup.quickview .dxbl-modal-content > .dxbl-modal-header .dxbl-popup-header-button:hover .dxbl-image {
		filter: var(--icon-filter-white) !important;
	}

    .dxbl-modal > .dxbl-modal-root > .dxbl-popup.quickview .dxbl-modal-content > .dxbl-modal-header .dxbl-btn .dxbl-image.image {
        width: 16px;
        height: 16px;
        filter: var(--icon-filter) !important;
    }

	.dxbl-modal > .dxbl-modal-root > .dxbl-popup.quickview .dxbl-modal-content > .dxbl-modal-header .dxbl-toolbar{
		height: 26px !important;
	}
	.dxbl-modal > .dxbl-modal-root > .dxbl-popup.quickview .dxbl-modal-content > .dxbl-modal-header .dxbl-btn:hover {
       background: var(--site-primary) !important;
	   border-color: var(--site-primary)!important;
	   color: var(--site-lighttext) !important;
    }
	.dxbl-modal > .dxbl-modal-root > .dxbl-popup.quickview .dxbl-modal-content > .dxbl-modal-header .dxbl-btn:hover .dxbl-image.image {
        filter: var(--icon-filter-white) !important;
    }
    /*----SUMMARY VIEW----*/
    
.summaryview {
	border: 1px dashed rgba(var(--secondary), 0.5);
	padding: 7px 15px 10px;
	border-radius: 10px;
	background: var(--bs-body-bg);
	width: calc(100% - 24px) !important;
    margin: 12px;
	margin-bottom: 0px;
	box-shadow: inset 0px 0px 0px 1000px rgba(var(--secondary), 0.2);
}
.summaryview .dxbl-text-edit.dxbl-disabled::after,
.summaryview .dxbl-text-edit.dxbl-readonly::after,
.summaryview .dxbl-text-edit {
	background-color: transparent !important;
}
.summaryview-3-col {}
.summaryview-col {}
.summaryview input,
.summaryview .dxbl-text-edit-template {
	opacity: 1 !important;
	height: fit-content !important;
	padding: 0px !important;
}
.summaryview a {
	text-decoration: none !important;
	color: currentColor !important;
	}
	.summaryview a:focus-visible {
		border: 0px !important;
		outline: none !important;
	}
.summaryview label {
	opacity: .75 !important;
	font-weight: 400 !important;
	font-size: 10px !important;
	margin: 0px !important;
}
.summaryview .dxbl-text-edit:not(.site-login .login-form .dxbl-text-edit),
.summaryview .dxbl-text-edit.dxbl-readonly,
.summaryview .dxbl-text-edit.dxbl-readonly:not(:focus) {
	border-bottom: 0px !important;
}
.summaryview .dxbl-text-edit.dxbl-disabled::before, 
.summaryview .dxbl-text-edit:disabled::before {
	content:"";
	background: none;
}
.summaryview .dxbl-text-edit:not([field-text])::before,
.summaryview dxbl-combo-box.dxbl-text-edit[field-text=""]::before,
.summaryview dxbl-masked-input.dxbl-text-edit[field-text=""]::before {
	content:"None";
}
.summaryview-3-col .summaryview-main-col {
	width: 50% !important;
	width: 100%;
}
.summaryview-3-col .summaryview-col-2 {
	width: 30% !important;
}
.summaryview-3-col .summaryview-col-3 {
	width: 20% !important;
}

.summaryview-3-col:not(:has(.summaryview-col-2)) .summaryview-col-3 {
	width: 20% !important;
	margin-left: 30% !important;
	margin-top: 0px;
}
.summaryview-3-col:not(:has(.summaryview-main-col, .summaryview-col-2)) .summaryview-col-3 {
	width: 20% !important;
	margin-left: 80% !important;
	margin-top: 0px;
}


.summaryview-heading {
	max-width: 80%;
}
.summaryview-heading input {
	font-size: 18px !important;
	font-weight: 700;
}
.summaryview-heading label,
.summaryview-subheading-1 label,
.summaryview-isactive label,
.summaryview-isactive .dxbl-checkbox-check-element,
.summaryview-nolabel {
	display: none;
}
.summaryview-subheading-1 {
	margin-top: -5px !important;
}

.summaryview-subheading-2 {}
.summaryview-email {}
.summaryview-phone {}
.summaryview-address {}
.dxbl-fl-group .dxbl-row > .dxbl-fl-item.dxbl-fl-item-horizontal.summaryview-photo {
	margin-top: -50px !important;

}
.sv-item .dxbl-fl-group .dxbl-row > .dxbl-fl-item.dxbl-fl-item-horizontal.summaryview-photo {
	margin-top: -10px !important;

}
.summaryview-photo .dxbl-btn.xaf-image-overlay, 
.summaryview-photo .xaf-image-editor .img-thumbnail:not(.xaf-image-editor .img-thumbnail:has(.dxbl-btn.xaf-image-overlay)) {
	border-radius: 100px !important;
	width: 150px !important;
	height: 150px !important;
}
.summaryview-photo .xaf-image-container {
	padding: 0px;
}
.summaryview-photo .dxbl-fl-ctrl .xaf-component-image {
	border-radius: 100px;
}
.summaryview-isactive {}
.summaryview-isactive:has(.dxbl-checkbox-checked)::before {
	content:"Active";
	background: var(--site-green2);
	/* writing-mode: vertical-lr; 
	transform: rotate(180deg);*/
    color: white;
	padding: 0px 10px 2px;
	position: relative;
	right: 21px;
	margin-top: -45px;
	border-radius: 0px 0px 10px 10px;
	display: block;
	width: fit-content;
}
.summaryview-isactive:has(.dxbl-checkbox-unchecked)::before {
	content:"Inactive";
	background: rgba(var(--midgrey), 0.5);
	/* writing-mode: vertical-lr; 
	transform: rotate(180deg);*/
    color: white;
	padding: 0px 10px 2px;
	position: absolute;
	right: 36px;
	margin-top: -45px;
	border-radius: 0px 10px 0px 10px;
}
.summaryview .xaf-image.xaf-preview-image.xaf-preview-image-detail-view {
	background: url(../../IImageService/ycon-NoPictures) center center no-repeat;
	background-size: 72px 72px;
	mask: none !important;
	background-color: transparent !important;
}
.sv-item:not(.assembly, .service, .bundle) .dxbl-memo-edit textarea {
	min-height: 190px;
}

.sv-item.assembly .dxbl-memo-edit textarea, 
.sv-item.service .dxbl-memo-edit textarea,
.sv-item.bundle .dxbl-memo-edit textarea,
.sv-item.giftcard .dxbl-memo-edit textarea,
.sv-item.giftcert .dxbl-memo-edit textarea {
	min-height: 130px;
}


@media screen and (max-width:550px) {
    .quickview,
    .quickview .dxbl-popup-header {
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media screen and (max-width:850px) {
    .quickview.quickview-medium,
    .quickview.quickview-medium .dxbl-popup-header,
	.quickview.quickview-large,
    .quickview.quickview-large .dxbl-popup-header	{
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media screen and (max-width:1200px) {
	.quickview.quickview-large,
    .quickview.quickview-large .dxbl-popup-header	{
        width: 100% !important;
        max-width: 100% !important;
    }
}