:root{
		--modfontfamily:Verdana,Arial, Helvetica,sans-serif;
		--modboxtop:10vh;
		--modfallbackscreen:rgb(0,0,0);
		--modscreen:rgba(0,0,0,0.4);
		--modcontentwidth:50vw;
		--modslideduration:0.5s;
		--green:#5cb85c;
		--modheaderbg:#5cb85c;
		--modheaderfg:#ffffff;
		--modfooterbg:#5cb85c;
		--modfooterfg:#ffffff;
		--modcontentbg:#ffffff;
		--modcontentborder:#5cb85c;
		--modcontentalertbg:#ffffaa;
		--modcontentalertborder:#ff0000;
		--modcontentconfirmbg:#ddddff;
		--modcontentconfirmborder:#0000ff;
		--modcontentmsgbg:#ffffff;
		--modcontentmsgborder:#9999ff;
		--modclosefg:#ffffff;
		--modclosehover:#e80000;
		--modbackfg:#ffffff;
		--modbackhover:#0000ff;
		--modbtnborder:#0000a0;
		--modbtnbg:#ffffff;
		--modbtnfg:#000000;
		--modbtnhoverbg:#eeeeee;
		--modbtnhoverfg:#000000;
		--modbtnactivebg:#cccccc;
		--modbtnactivefg:#000000;
		--modgroupfg:#003300;
		--moddescfg:#000000;
		--modbodyfg:#000000;
		--modheaderalertbg:#ff0000;
		--modheaderalertfg:#ffff00;
		--modheaderconfirmbg:#0000ff;
		--modheaderconfirmfg:#ffffff;
		--modheadermsgbg:#9999ff;
		--modheadermsgfg:#ffffff;
		--modfooteralertbg:#ff0000;
		--modfooteralertfg:#ffff00;
		--modfooterconfirmbg:#0000ff;
		--modfooterconfirmfg:#ffffff;
		--modfootermsgbg:#9999ff;
		--modfootermsgfg:#ffffff;
		--blue:#1e90ff;
		--yellow:#ffff00;
		--red:#e03333;
		--white:#ffffff;
		--grey:#cccccc;
	}
//	body {font-family: Arial, Helvetica, sans-serif;}
	/* The Modal (background) */
	.modal-back-screen{
	  display: none; /* Hidden by default */
	  position: fixed; /* Stay in place */
	  z-index: 5000; /* Sit on top */
	  padding-top: var(--modboxtop); /* Location of the box */
	  left: 0;
	  top: 0;
	  width: 100%; /* Full width */
	  height: 100%; /* Full height */
	  overflow: auto; /* Enable scroll if needed */
	  background-color: var(--modfallbackscreen); /* Fallback color */
	  background-color: var(--modscreen); /* Black w/ opacity */
	  font-family: var(--modfontfamily);
	}
	.modal-content,.modal-contentalert,.modal-contentconfirm,.modal-contentmsg{
	  position: relative;
	  display:flex;
	  flex-direction:column;
	  margin: auto;
	  padding: 0;
	  border-width: 1px;
	  border-style: solid;
	  width: var(--modcontentwidth);
	  height: auto;
	  max-height:80vh;
	  overflow:hidden;
	  border-radius:15px;
	  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
	  -webkit-animation-name: animatemodaltop;
	  -webkit-animation-duration: var(--modslideduration);
	  animation-name: animatemodaltop;
	  animation-duration: var(--modslideduration);
	  user-select:none;
	}
	.modal-content{
		background-color: var(--modcontentbg);
		border-color: var(--modcontentborder);
	}
	.modal-contentalert{
		background-color: var(--modcontentalertbg);
		border-color: var(--modcontentalertborder);
	}
	.modal-contentconfirm{
		background-color: var(--modcontentconfirmbg);
		border-color: var(--modcontentconfirmborder);
	}
	.modal-contentmsg{
		background-color: var(--modcontentmsgbg);
		border-color: var(--modcontentmsgborder);
	}
	/* Add Animation */
	@-webkit-keyframes animatemodaltop {
	  from {top:-300px; opacity:0} 
	  to {top:0; opacity:1}
	}
	@keyframes animatemodaltop {
	  from {top:-300px; opacity:0}
	  to {top:0; opacity:1}
	}
	/* The Close Button */
	.modal-close,.modal-back {
	  display:table-cell;
	  vertical-align:middle;
	  font-size: 1.4em;
	  line-height:1.4em;
	  width:1.4em;
	  height:1.4em;
	  font-weight: bold;
	  border-radius:50%;
	  border:1px solid;
	  text-align:center;
	  margin:2px;
	}
	/* The Back Button */
	.modal-close {
	  border-color: var(--modclosefg);
	  color: var(--modclosefg);
	  float: right;
	}
	/* The Back Button */
	.modal-back {
	  border-color: var(--modbackfg);
	  color: var(--modbackfg);
	  float: left;
	}
	.modal-close:hover,
	.modal-close:focus{
	  background-color: var(--modclosehover);
	  border-color: var(--modclosehover);
	  cursor: pointer;
	}
	.modal-back:hover,
	.modal-back:focus {
	  background-color: var(--modbackhover);
	  border-color: var(--modbackhover);
	  cursor: pointer;
	}
	.modal-header {
	  padding: 2px 15px;
	  background-color: var(--modheaderbg);
	  color: var(--modheaderfg);
	  text-align:center;
	}
	.modal-headeralert	{
	  padding: 2px 15px;
	  background-color: var(--modheaderalertbg);
	  color: var(--modheaderalertfg);
	  text-align:center;
	}
	.modal-headerconfirm {
	  padding: 2px 15px;
	  background-color: var(--modheaderconfirmbg);
	  color: var(--modheaderconfirmfg);
	  text-align:center;
	}
	.modal-headermsg {
	  padding: 2px 15px;
	  background-color: var(--modheadermsgbg);
	  color: var(--modheadermsgfg);
	  text-align:center;
	}
	.modal-caption{
		font-family:Verdana,Arial,Helvetica,sans-serif;
		font-size:1.4em;
		margin:5px;
		padding:0;
	}
	.modal-body,.modal-msg {
		padding: 10px;
		overflow-y:auto;
	}
	.modal-body > div,.modal-msg > div{
		width:80%;
		display:flex;
		flex-direction:column;
		justify-content:center;
		align-items:center;
		background: var(--modbtnbg);
		border:1px solid var(--modbtnborder);
		color: var(--modbtnfg);
		padding:10px;
		margin-top:10px;
		margin-bottom:10px;
		margin-left:auto;
		margin-right:auto;
		border-radius:5px;
		box-shadow:2px 2px 5px #000;
		cursor:pointer;
		user-select:none;
		font-size:1em;
		text-align: center;
		overflow:hidden;
	}
	.modal-body > div > img, modal-msg > div >img{
		margin:5px;
	}
	.modal-body > div:hover,.modal-msg > div:hover{
		background-color: var(--modbtnhoverbg);
		color: var(--modbtnhoverfg);
	}
			
	.modal-body > div:active,.modal-msg > div:active{
		background-color: var(--modbtnactivebg);
		color: var(--modbtnactivefg);
	}
			
	.modal-body-group-head{
		width:80%;
		height:auto;
		margin:15px auto 5px auto;
		text-align:center;
		font-size:2em;
		color: var(--modgroupfg);
	}
	.modal-body-group-desc{
		width:80%;
		height:auto;
		margin:0px auto 5px auto;
		text-align:center;
		color: var(--moddescfg);
	}
	.modal-body-text{
		width:100%;
		height:auto;
		margin:10px auto 10px auto;
		text-align:center;
		color: var(--modbodyfg);
		overflow-y:auto;
	}
	.modal-body-break{
		width:80%;
		margin:0px auto 5px auto;
		height:auto;
	}
	.modal-footer {
		padding: 2px 5px;
		background-color: var(--modfooterbg);
		color: var(--modfooterfg);
		text-align:center;
		font-family:Verdana,Arial,Helvetica,sans-serif;
		font-size:1em;
		height:auto;
		overflow-y:auto;
	}
	.modal-footeralert {
		padding: 2px 5px;
		background-color: var(--modfooteralertbg);
		color: var(--modfooteralertfg);
		text-align:center;
		font-family:Verdana,Arial,Helvetica,sans-serif;
		font-size:1em;
		height:auto;
		overflow-y:auto;
	}
	.modal-footerconfirm {
		padding: 2px 5px;
		background-color: var(--modfooterconfirmbg);
		color: var(--modfooterconfirmfg);
		text-align:center;
		font-family:Verdana,Arial,Helvetica,sans-serif;
		font-size:1em;
		height:auto;
		overflow-y:auto;
	}
	.modal-footermsg {
		padding: 2px 5px;
		background-color: var(--modfootermsgbg);
		color: var(--modfootermsgfg);
		text-align:center;
		font-family:Verdana,Arial,Helvetica,sans-serif;
		font-size:1em;
		height:auto;
		overflow-y:auto;
	}