.block-scroll {
	overflow: hidden !important;
}

.modal {
	position: fixed; /* Stay in place */
	z-index: 100000; /* Sit on top */
	display: flex;
	align-items: center;
	justify-content: center;
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
	animation: fade-in 0.3s ease;
	animation: fade-in 0.3s ease;
}

.modal.transparent {
	background-color: rgba(0,0,0,0);
}

.modal.mobile {
	overflow: auto;
	touch-action: pan-x pan-y;
}

/* Modal Content/Box */
.modal-content {
	position: relative;
	background-color: #FFF;
	text-align: center;
	font-family: proxima-nova, sans-serif;
	font-size: 1em;
	font-style: normal;
	font-weight: 400;
	border-radius: 7px;
	overflow: hidden; /*border-radius*/
	animation: zoom-in 0.3s ease 1;
	max-height: 98%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.mobile .modal-content {
	width: 98%;
}
.desktop .modal-content {
	max-width: 98%;
}

.modal.hide {
	pointer-events: none;
	animation: fade-out 0.3s ease forwards;
}

.hide .modal-content {
	animation: zoom-out 0.3s ease forwards;
}

@keyframes fade-in {
	0% {
		opacity: 0.1;
	}
	100% {
		opacity: 1;
	}
}
@keyframes fade-out {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		visibility: hidden;
	}
}

@keyframes zoom-in {
	0% {
		transform: scale(0.7, 0.7);
	}
	100% {
		transform: scale(1, 1);
	}
}
@keyframes zoom-out {
	0% {
		transform: scale(1, 1);
		opacity: 1;
	}
	100% {
		transform: scale(1.4, 1.4);
		opacity: 0;
	}
}

@media (max-width: 360px) {
	.modal-content { font-size : 14px; }
}

.modal-content .button-close {
	display: block;
	padding: .25em .5em;
	font-size: 2em;
	font-weight: bold;
	color: #000;
	position: absolute;
	right: 0;
	top: 0;
	cursor: pointer;
}

.modal-content .button {
	color: #808789;
	cursor: pointer;
	margin: 0 0.75em;
	box-sizing: border-box;
	padding: 0.65em 1em;
}

.desktop .modal-content .footer .button:first-child:last-child {
	max-width: 40em;
	margin: 0 auto;
}

.modal-content .button.v-align {
	display: flex;
	align-items: center;
	justify-content: center;
}

.modal-content .button:not(.button-action-close) {
	color: #fff;
	background: var(--jbjs-color);
}

.modal-content .button.disabled {
	color: #53575a;
}

.modal-content .button.border.disabled {
	background: #ccc;
	cursor: default;
}

.modal-content .head {
	font-style: normal;
	font-weight: 600;
	color: var(--jbjs-color);
	padding: 1em 0;
	margin: 0 1em;
	text-overflow: ellipsis;
	text-transform: uppercase;
	border-bottom: 1px solid #000;
	overflow: hidden;
	white-space: nowrap;
}

.modal-content.big .head {
	padding: 1.5em 4em 1.5em 1em;
	flex: 0 0 content;
	margin: 0;
	background: #eee;
	border: 0;
	color: #000;
}

.modal-content.big .head.red {
	color: var(--jbjs-color);
	background: #fff
}

.mobile .modal-content.big {
	height: 98%;
	max-height: max-content;
}

.modal-content.big .body {
	min-height: 0;
	flex: 1 1 max-content;
	overflow-y: auto;
}


.modal-content .subhead {
	padding: 1em 0 1em;
	color: #d0d3d4;
	border-width: 0;
	border-bottom-color: #fff;
	border-bottom-width: 1px;
	border-bottom-style: solid;
}

.modal-content .subhead .item {
	text-align: left;
	padding: 0 2em 0;
	line-height: 1.5;
	cursor: pointer;
}

.modal-content .subhead .item > span {
	border-bottom: 2px solid;
}

.modal-content .subhead .item.selected {
	background-color: #4f4f4f;
	color: white;
	cursor: default;
}

.modal-content .subhead .item + .item {
	margin-top: .25em;
}

.modal-content .body {
	text-align  : left;
	color       : #666;
}

.modal-content .body_field{
	border          : 2px solid #d0d3d4;
	width           : 95%;
	min-width       : 95%;
	max-width       : 95%;
	padding         : .45em;
	background-color: #ededed;
	font-family     : proxima-nova,sans-serif;
	font-style      : normal;
	font-weight     : 400;
	display         : inline-block;
	color           : inherit;
}

.modal-content .body_field_box{
	white-space: nowrap;
}

.modal-content .mandatory.body_field_box::after{
	font-size   : 2em;
	padding-left: 0.2em;
	vertical-align : top;
	content : '*';
}

.modal-content .body_field_box.message{
	margin-top  : 1em;
}

.modal-content .body_field.name{
	margin-bottom  : 1em;
}

.modal-content input.line {
	border: none;
	border-bottom: 1px solid #ccc;
	min-width: 18em;
	padding: 0.5em;
}

.modal-content form {
	margin: 0;
}
.modal.desktop .modal-content .body {
	padding: 2em 3em 2em 4em;
}
.modal.desktop .modal-content .body.thick {
	padding: 2em 2em 2em 2em;
}

.modal.mobile .modal-content .body {
	padding: 2em;
}

.modal-content .footer {
	flex: 0 0 content;
	padding: 1em 2em;
	color: #aaa;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

#feedback_agreement {
	display: block;
	width: 100%;
	margin-bottom: 2em;
	color: inherit;
	text-align: left;
	order: -1;
	flex-basis: 100%;
}

#feedback_agreement::after {
	content : "By submitting feedback, you agree that your comments may be displayed on the JBJS website. All feedback is moderated before posting occurs.";
}

.modal-content .play-btn-container
{
	text-align: right;
}

.modal.mobile .modal-content .footer {
	text-align: center;
}

@media (max-height: 500px) {
	#feedback_agreement.mobile  { margin-bottom: 1em; }
	.modal.mobile .modal-content .body { padding: 1em 2em; }
	textarea.message.mobile     { height: 3em; }
}

#modal_login_info > .modal-content > .head {
	padding: 1em;
}

#modal_login_info > .modal-content > .body {
	text-align: center;
}

#modal_login_info > .modal-content > .footer {
	text-align: center;
}