/* The Modal (background) */
.modal, .modal-test-info, .emailModal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1000; /* Sit on top */
  padding-top: 5ex; /* Location of the box */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100vw; /* Full width */
  height: 100dvh; /* Full height */
  overflow-y: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  border: 1px solid #888;
  width: clamp(65vw, 750px, 90vw);
  padding-bottom: 3ex;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  border-radius: 15px;
  margin-bottom: 5ex;
}

.modal-header {
  color: white;
  padding: 2ex clamp(2vw, 2rem, 5vw);
  font-size: 120%;
  font-weight: bold;
  font-family: Helvetica, Verdana, Arial, sans-serif;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

.dark .modal-header, .dark .card .modal-header * {
  color: white;
}

/* The Close Button */
.close {
  color: white;
  float: right;
  font-size: 20px;
  font-weight: bold;
  padding-bottom: 1ex;
}

.close:hover,
.close:focus {
  color: grey;
  text-decoration: none;
  cursor: pointer;
}

div.modal-content .mbody {
	padding: 0 clamp(2vw, 2rem, 6vw);
}

div.modal-content .mbody p {
	font-size: clamp(1rem, 1.25vw, 1.25rem);
	margin: 2.75ex auto 2.75ex auto;
}
div.modal-content .mbody p.mt1 {
	margin-top: 1ex;
}
div.modal-content .mbody p.mb1 {
	margin-bottom: 1ex;
}

div.modal-content p.mb1 {
	margin-bottom: 1ex;
}

.dark .mbody .btn-container {
	margin-top: 0;
}

.discordModalLink, .mgTopicLink {
	color: var(--LinkBlue); /*rgb(102, 26, 255);rgb(187, 50, 61);*/
}

a.discordModalLink:hover, a.mgTopicLink:hover {
	text-decoration: underline;
	cursor: pointer;
}

/* Medium to Small Screen Rules */
@media screen and (max-width: 1200px) 
{
	.mbody, p {
	    -webkit-hyphens: auto;
	    -webkit-hyphenate-limit-before: 3;
	    -webkit-hyphenate-limit-after: 3;
	    -webkit-hyphenate-limit-chars: 6 3 3;
	    -webkit-hyphenate-limit-lines: 2;
	    -webkit-hyphenate-limit-last: always;   
	    -webkit-hyphenate-limit-zone: 5%;
	
	    hyphens: auto;
	    hyphenate-limit-chars: 6 3 3;
	    hyphenate-limit-lines: 2;
	    hyphenate-limit-last: always;   
	    hyphenate-limit-zone: 5%;
	}
}

/* Small Screen Rules */
@media screen and (min-width: 150px) and (max-width: 515px) 
{
	.modal-header {
		padding-left: 1.5em;
	}
}