body.openModal {
    overflow: hidden;
}

.modalDialogBck, .modalDialogVueBck {
    position: fixed;
    z-index: 2000;
    cursor: default;
    background-color: var(--bg-level-3);
    width: 100vw;
    height: 100vh;
    opacity: 0;
    top: 0px;
    left: 0px;
    transition: opacity 1s;
    display: block;
}

.modalDialog2.on .modalDialogBck,
.modalDialog.on .modalDialogBck,
.modalDialogVue.on .modalDialogVueBck {
    opacity: .7;
}

.modalDialog2,
.modalDialogVue,
.modalDialog {
	position: fixed;
	height: 100vh;
	width: 100vw;
	top: 0px;
	left: 0px;
	overflow-y: auto;
	overflow-x: hidden;
	z-index: 2000;
	visibility: hidden;
    transition: visibility .3s linear;
}

.modalDialog2.on,
.modalDialogVue.on,
.modalDialog.on {
	visibility: visible;
}

.dialogContainer{
    width: 75%;
    padding: 20px;
    z-index: 2100;
    position: relative;
    right: -100vw;
	box-shadow: 0px 0px 4px var(--border-shaddow-light);
    background-color: var(--primary-background);
    min-height: 400px;
    overflow: auto;
    color: var(--text-default);
    top: 5rem;
    animation: closeModal .3s ease-in-out;
    margin: 0px auto;
    border: var(--border-none-by-default);
}

.modalDialog2.on .dialogContainer,
.modalDialogVue.on .dialogContainer,
.modalDialog.on .dialogContainer{
    animation: openModal .4s ease;
   	right: 0px;
}

@keyframes openModal {
	0% {
	    right: -100vw;
	}
	90% {
	    right: 30px;
	}
	100% {
	    right: 0px;
	}
}

@keyframes closeModal {
	0% {
	    right: 0px;
	}
	100% {
	    right: -100vw;
	}
}

.summaryHeaderCol div:first-child.modalDialogCloseButton {
	width: auto;
}

@media (max-width: 770px) {
	.summaryContent {
	    width: 81%;
	}
}

.modalDialogCloseButton, .modalDialogVueCloseButton {
	position: relative;
	float: right;
	top: -20px;
	right: -20px;
	cursor: pointer;
	background-color: var(--bg-dark-level-1);
	padding: 1.3em 1em;
	line-height: 0px;
	color: var(--text-reverse);
	width: auto !important;
}

.modalDialogCloseButton:before, .modalDialogVueCloseButton:before {
    font-family: FontAwesome;
    content: "\f00d";
}

.modalDialogCloseButton:hover,
.modalDialogCloseButton:focus,
.modalDialogVueCloseButton:hover,
.modalDialogVueCloseButton:focus {
	background-color: var(--bg-level-4);
    color: var(--text-default);
}

.modalDialogContent {
    padding-top: 10px;
}

#modalDialogContent textarea {
    min-height: 50px;
}

#AddCommentForm textarea{
    min-height: 150px;
}

.showModalDialog{
    cursor:pointer;
}

.ViewMessagesDialogMessage {
    padding: 20px;
    border-bottom: 2px solid var(--border-lighter-contrast);
}

.ViewMessagesDialogSubjectContainer {
    cursor: pointer;
}

.ViewMessagesDialogMessageContainer {
    display: none;
}

#SendMessageDialogSubject {
    width: 550px;
}

#SendMessageDialogMessage {
    width: 550px;
    height: 150px;
}

.modalDialogBackButton{
    display: none;
}

@media (max-width: 1400px) {
    .modalDialog  .dialogContainer,
	.modalDialog2 .dialogContainer,
	.modalDialogVue .dialogContainer {
        width:70%;
    }
    .hideAtBP1540{
    	display: none;
    }
}

@media (max-width: 560px) {
    .modalDialog  .dialogContainer,
	.modalDialog2 .dialogContainer,
	.modalDialogVue .dialogContainer {
        width: auto;
        margin: var(--site-margin);
    }
    .modalDialogBackButton{
            display: none;
    }
    .modalDialogCloseButton,
	.modalDialogVueCloseButton {
	    width: 1em;
	    height: .5em;
    }
}