.hdmpopupbox {display:none;}
.hdmpopupon {box-sizing:border-box; display:block; position:fixed; z-index:1001; width:450px; height:200px; left:calc(50% - 225px); top:calc(50% - 100px); opacity:1.0; background-color:white; box-shadow:0 0 16px rgba(0,0,0,0.4); transition:opacity .5s ease-in-out; animation:hdmpopupup .6s ease-in-out;}
.hdmpopupon * {box-sizing:border-box;}
.hdmpopupon.hdmclosest {opacity:0.0 !important; animation:hdmpopupdown .5s ease-in-out;}
.hdmpopupon > .container {display:flex; flex-direction:column; justify-content:center; align-items:center; padding:10px 20px; width:100%; height:calc(100% - 40px); overflow:auto; font-size:120%; font-weight:300;}
.hdmpopupon > .hdmtitle {line-height:35px; height:40px; overflow:hidden; padding:0 50px 0 15px; font-size:130%; background-color:#91d75b; color:white;}
.hdmpopupon > .hdmtitle:before {content:"\ea0c"; font-family:icomoon; padding-right:0.5em; opacity:0.6; font-size:120%; position:relative; top:0.1em;}
.hdmpopupon > .hdmtitle > .hdmclose {display:block; float:right; font-size:26px; width:30px; text-align:center; line-height:40px; position:relative; left:40px; cursor:pointer; transform:rotate(0deg); transition:color .3s ease-in-out,font-size .4s ease-in-out,transform .2s ease-in-out; animation:hdmpopupcloses 1s ease-in-out;}
.hdmpopupon > .hdmtitle > .hdmclose:hover {transform:rotate(90deg);}
.hdmpopupon.msgwarning > .hdmtitle {background-color:#dd02cd;}
.hdmpopupon.msgwarning > .hdmtitle:before {content:"\ea07";}
.hdmpopupon.msgerror > .hdmtitle {background-color:#ee1773;}
.hdmpopupon.msgerror > .hdmtitle:before {content:"\ea08";}

@keyframes hdmpopupup {
  0% {top:-200px;}
  80% {top:calc(50% - 50px);}
  100% {top:calc(50% - 100px);}
}

@keyframes hdmpopupdown {
  100% {left:-50%;}
}

@keyframes hdmpopupcloses {
  0% {font-size:0;}
  60% {font-size:0;}
  100% {font-size:26px;}
}

@media (max-width: 500px) {
  .hdmpopupon {width:80%; left:10%;}
}