div#utilityPage div.backsplash {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba( 0,0,0,.4 );
}
  
div#utilityPage div.message-container {
  --tile-size: 76vw;
  --main-icon-size: calc( .175 * var( --tile-size ) );
  --icon-size: calc( .0725 * var( --tile-size ) );
  --font-size: calc( .0625 * var( --tile-size ) );
  position: absolute;
  width: var( --tile-size );
  bottom: 50%;
  right: 50%;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  transform: translate( 50%, 50% );
  box-shadow: 3px 3px 18px rgb(0,0,0);
  border: solid calc( .25 * var( --font-size ) ) #e0e0e0;
  background-color: white;
}
  
div#utilityPage div.message-title {
  --dimension: calc( 1.25 * var( --font-size ) );
  --border-width: calc( .125 * var( --font-size ) );
  --end-width: calc( var( --dimension ) + calc( 2 * var( --border-width ) ) );
  font-size: 0;
  background-color: var( --c1 );
  color: #175567;
}
  
div#utilityPage div.message-title > span {
  font-size: var( --font-size );
  display: inline-block;
  text-align: center;
  vertical-align: middle;
}
  
div#utilityPage div.message-title span.title-text {
  width: calc( var( --tile-size ) - calc( 2 * calc( var( --dimension ) + calc( .25 * var(--font-size) ) ) ) );
}
  
div#utilityPage div.message-title span.left-space {
  width: var( --end-width);
}
  
div#utilityPage div.message-title span.circle-x {
  position: relative;
  width: var( --dimension );
  height: var( --dimension );
  bottom: calc( .75 * var(--dimension));
  left: calc( .75 * var(--dimension));
  border: solid calc( .125 * var( --font-size ) ) #175567;
  border-radius: 50%;
  box-shadow: 3px 3px 8px #175567;
  background-color: var( --c1 );
  cursor: pointer;
}

div#utilityPage div.message-image {
  width: calc( var( --tile-size ) - calc( .2 * --main-icon-size ) );
  height: calc( 1.45 * var(--main-icon-size) );
  text-align: center;
  background-color: #e0e0e0;
}

div#utilityPage div.message-image img {
  position: relative;
  padding: calc( .1 * var( --main-icon-size ) );
  top: calc( .75 * var( --main-icon-size ) );
  width: var( --main-icon-size );
  height: var( --main-icon-size );
  background-color: var( --c1 );
  border: calc( .125 * var( --main-icon-size ) ) solid #e0e0e0;
  border-radius: 50%;
}
  
div#utilityPage div.message-body {
  padding-top: var(--main-icon-size);
  padding-right: var(--font-size);
  padding-bottom: var(--font-size);
  padding-left: var(--font-size);
  font-size: calc( .8 * var( --font-size ));
  text-align: justify;
  background-color: var( --c1 );
  border-bottom: calc( .125 * var( --main-icon-size ) ) solid #e0e0e0;
}

div#utilityPage div.message-body .descriptor {
  margin-top: calc( .5 * var(--icon-size) );
  height: var(--icon-size);
  background-color: var(--c4);
  color: var(--cg6);
}

div#utilityPage div.message-body span.group-name {
  display: inline-block;
  width: calc( var(--tile-size) - calc( calc( 2 * var( --font-size ) ) + calc( 1.2 * var(--icon-size) ) ) );
  padding: calc( .1 * var( --icon-size ) ) 0;
  color: var(--cg6);
  text-indent: calc( .5 * var( --icon-size ) );
  text-transform: lowercase;
  vertical-align: middle;
}

div#utilityPage div.message-body span.group-name::first-letter {
  text-transform: uppercase;
}

div#utilityPage div.message-body div#alertMsgWrapper span.show-hide {
  transform: rotate(0deg);
  transition: rotate 350ms linear;
}

div#utilityPage div.message-body div#alertMsgWrapper.index0 span.show-hide.index0,
div#utilityPage div.message-body div#alertMsgWrapper.index1 span.show-hide.index1,
div#utilityPage div.message-body div#alertMsgWrapper.index2 span.show-hide.index2,
div#utilityPage div.message-body div#alertMsgWrapper.index3 span.show-hide.index3,
div#utilityPage div.message-body div#alertMsgWrapper.index4 span.show-hide.index4,
div#utilityPage div.message-body div#alertMsgWrapper.index5 span.show-hide.index5,
div#utilityPage div.message-body div#alertMsgWrapper.index6 span.show-hide.index6,
div#utilityPage div.message-body div#alertMsgWrapper.index7 span.show-hide.index7 {
  transform: rotate(90deg);
}

div#utilityPage div.message-body .show-hide {
  display: inline-block;
  margin: calc( .1 * var( --icon-size ) ) 0;
  width: calc( .8 * var(--icon-size) );
  height: calc( .8 * var(--icon-size) );
  background-color: var(--c1);
  border-radius: 50%;
  vertical-align: middle;
}

div#utilityPage div.message-body .show-hide img {
  width: 100%;
}

div#utilityPage div.message-body div#alertMsgWrapper div.content {
  max-height: 0px;
  transition: max-height 350ms ease-in-out;
}

div#utilityPage div.message-body div#alertMsgWrapper.index0 div.content.index0,
div#utilityPage div.message-body div#alertMsgWrapper.index1 div.content.index1,
div#utilityPage div.message-body div#alertMsgWrapper.index2 div.content.index2,
div#utilityPage div.message-body div#alertMsgWrapper.index3 div.content.index3,
div#utilityPage div.message-body div#alertMsgWrapper.index4 div.content.index4,
div#utilityPage div.message-body div#alertMsgWrapper.index5 div.content.index5,
div#utilityPage div.message-body div#alertMsgWrapper.index6 div.content.index6,
div#utilityPage div.message-body div#alertMsgWrapper.index7 div.content.index7 {
  max-height: 100vh;
}

div#utilityPage div.message-body .content {
  margin: calc( .25 * var(--font-size));
  overflow: hidden;
  border: solic calc( .1 * var( --font-size ) ) var( --c4 );
  font-size: calc( .7 * var(--font-size) );
  background-color: #e0e0e0;
}

div#utilityPage div.action-container {
  width: var( --tile-size );
  background: #FFFFFF;
}

div#utilityPage div.action-container button {
  display: inline-block;
  margin: calc( .25 * var( --font-size ) );
  padding: calc( .5 * var( --font-size ) ) 0;
  width: calc( var(--tile-size) - calc( .5 * var( --font-size ) ) );
  font-size: var( --font-size );
  color: #FFFFFF;
  background-color: #175567;
  border: none;
  outline: none;
  cursor: pointer;
}

/*  */

@media screen and ( min-width: 992px ) {
  div#utilityPage div.message-container {
    --tile-size: 62vw;
  }
}

@media screen and ( min-width: 1200px ) {
  div#utilityPage div.message-container {
    --tile-size: 56vw;
  }
}

@media screen and ( min-width: 1600px ) {
  div#utilityPage div.message-container {
    --tile-size: 48vw;
  }
}

@media screen and ( min-width: 2060px ) {
  div#utilityPage div.message-container {
    --tile-size: 42vw;
  }
}

@media screen and ( orientation: landscape ) and ( min-width: 992px ) {
  div#utilityPage div.message-container {
    --tile-size: 72vw;
    --main-icon-size: calc( .045 * var( --tile-size ) );
    --icon-size: calc( .0275 * var( --tile-size ) );
    --font-size: calc( .0175 * var( --tile-size ) );
  }
  
  div#utilityPage div.message-body {
    padding-right: calc( .75 * var(--font-size));
    padding-bottom: calc( .75 * var(--font-size));
    padding-left: calc( .75 * var(--font-size));
  }
}