html {height:100%;}
body {display:flex; flex-direction:column; margin:0; height:100%;}

/* Apply the default styles */
body > * {font-family:Sans-Serif; color:black; font-size:13pt; line-height:1.4; margin-left: 10px; margin-right: 10px; margin-top: 5px; margin-bottom: 5px;}

/* Increase the margin of the top-most element */
body > *:first-child {margin-top: 10px;}

/* Ensure that padding and border are included within the set width/height */
*, *::before, *::after {
  box-sizing: border-box;
}



table {border-spacing:0;}



.image > img {width:100%;}
.image {flex-shrink: 0; display:block; width:100%; overflow:hidden; position:relative; margin:0; line-height:0 !important; font-size:0 !important;}



.video > video, .video > iframe {width:100%; height:100%;}
.video {display:block; overflow:hidden; position:relative; margin:0; line-height:0 !important; font-size:0 !important;}



ul:not(.grid), ol:not(.grid) {margin-top:14px; margin-bottom:15px;}



/* Set the default link colours and underline */

a[href]:not(.button) {color: var(--link, blue); text-decoration: var(--link-u, underline);}
a[href]:not(.button):hover {color: var(--hover, var(--link, blue)); text-decoration: var(--hover-u, var(--link-u, underline));}
a[href]:not(.button):visited {color: var(--visited, var(--link, blue)); text-decoration: var(--visited-u, var(--link-u, underline));}
a[href]:not(.button):visited:hover {color: var(--visited-hover, var(--hover, var(--link, blue))); text-decoration: var(--visited-hover-u, var(--hover-u, var(--link-u, underline)));}
a[href]:not(.button):active {color: var(--active, var(--visited, var(--link, blue))); text-decoration: var(--active-u, var(--visited-u, var(--link-u, underline)));}



/* Apply the default styles to elements within grid cells */
.grid > li > * {font-family:Sans-Serif; color:black; font-size:13pt; line-height:1.4; margin-left: 10px; margin-right: 10px; margin-top: 5px; margin-bottom: 5px;}

.grid
{list-style: none; list-style-type: none; padding:0px; padding-left:0px; padding-right:0px; display: grid; width: 100%; margin-left:auto; margin-right:auto; margin-top: 0px; margin-bottom: 0px; grid-template-columns: var(--cols); --bg: initial; background: var(--bg, transparent); }

/* Added ":first-child" to override 10px margin-top of top-most element */
.grid:first-child {margin-top: 0px;}

.grid > li 
{display:flex;flex-direction:column;padding-left:5px; padding-right:5px; padding-top:5px; padding-bottom:5px; text-align: left; justify-content: flex-start; --bg:initial; background: var(--bg, transparent); }

.grid > li 
{justify-content: flex-start;}

/* Make the block elements display as block again  
.grid > li > div {display: block;}
*/

/* Remove top/bottom margins of non-div elements (grids/videos/buttons) inside grid */
.grid > li > *:not(div), .grid > li > .image, .grid > li > .video 
{margin-top:0; margin-bottom:0;}



.grid > .align-top-right,.grid > .align-middle-right,.grid > .align-bottom-right
{text-align: right;}

.grid > .align-top-center,.grid > .align-middle-center,.grid > .align-bottom-center
{text-align: center;}

.grid > .align-top-left,.grid > .align-middle-left,.grid > .align-bottom-left
{text-align: left;}

.grid > .align-top-left,.grid > .align-top-center,.grid > .align-top-right
{justify-content: flex-start;}

.grid > .align-bottom-left,.grid > .align-bottom-center,.grid > .align-bottom-right
{justify-content: flex-end;}

.grid > .align-middle-left,.grid > .align-middle-center,.grid > .align-middle-right
{justify-content: center;}



.grid > .align-top-right,.grid > .align-middle-right,.grid > .align-bottom-right
{text-align: right;}

.grid > .align-top-center,.grid > .align-middle-center,.grid > .align-bottom-center
{text-align: center;}

.grid > .align-top-left,.grid > .align-middle-left,.grid > .align-bottom-left
{text-align: left;}

.grid > .align-top-left,.grid > .align-top-center,.grid > .align-top-right
{justify-content: flex-start;}

.grid > .align-bottom-left,.grid > .align-bottom-center,.grid > .align-bottom-right
{justify-content: flex-end;}

.grid > .align-middle-left,.grid > .align-middle-center,.grid > .align-middle-right
{justify-content: center;}



@supports(not (--css: media)) { /* Make all cells stack by default (if no media queries) */
  .grid.responsive {display:flex; flex-direction:column; width: 100% !important; display:block;}
  .grid.responsive-reverse {display:flex; flex-direction:column-reverse; width: 100% !important; display:block;}
}

@media screen and (max-width:767px) {
  .grid.responsive {grid-template-columns: var(--mob-cols) !important;}
  .grid.responsive-reverse {display: flex !important; width: 100% !important; flex-direction: column-reverse;}
}




 @media screen and (min-width:768px) {
  .grid.mobile-only {display:none;}
  .grid.desktop-only {display:grid !important; visibility: visible !important;} /* NOTE: Only needed for emails but best to have for pages as well. Unhides "desktop-only" in inline css (which is hidden initially by default) */
}



/*
*[href].button {text-decoration: none;}
*/

.button {text-decoration: none;}

.button
{color:black; margin: 0; border-radius: 0px; padding: 10px 15px; border: 0px;max-width: fit-content;min-width: 5px;text-align: center;display:flex; flex-direction:column; position: relative; --bg:initial; background: var(--bg, transparent);}
  
  
.button:hover {--hover-bg:initial; background: var(--hover-bg, var(--bg, transparent));}

/* Add the pointer cursor to a button with an action attached */
*[href].button, *[onclick].button, *[data-action].button {
  cursor: pointer;
}


.button, .button .grid {
  max-width: fit-content;
}







.button .grid {
  max-width: fit-content;
}






.video {
  /*width:100%;*/
  /*max-width: 100%;*/
  display:block;
  aspect-ratio: 16 / 9;
  margin:0;
  border:0;
  position: relative;
  overflow: hidden;
}

.video video, .video iframe {
  width: 100%;
  height: 100%;
}



.left {margin-left: unset !important; margin-right: auto !important;}
.right {margin-left: auto !important; margin-right: unset !important;}
.center {margin-left: auto !important; margin-right: auto !important;}



.hidden {display: none;}