@font-face {
  font-family: 'LatoLatinBold';
  src: url('../fonts/Lato/LatoLatin-Bold.woff2') format('woff2');
}
body
{
  margin: 0;
  font-size: 16px;
  font-family: sans-serif;
}



@media print {
  body
  {
    font-size: 14px;
  }
}

.constrain
{
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.constrain::after /* clearfix */
{
  content: '';
  display: block;
  height: 0;
  clear: both;
}

@media only screen and (max-width: 700px)
{
  .hide-on-mobile
  {
    display: none !important;
  }
}

#header
{
  z-index: 100;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  height: 75px;
  background-color: rgba(255,255,255,0.6);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}



@media print {
  #header
  {
    position: static;
  }
  #header::before,
  #header::after
  {
    display: none;
  }
}

@media only screen and (max-width: 800px)
{
  #header
  {
    position: static;
  }
  #header::before,
  #header::after
  {
    display: none;
  }
}

#header::before
{
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 1;
  
  background: linear-gradient(rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 100%);
}

.dark-header #header
{
  background-color: rgba(0,0,0,0.7);
}

.animations-enabled #header
{
  transition: background-color 0.4s, height 0.4s ease-out;
}

.animations-enabled #header::before
{
  transition: opacity 0.4s;
}

@media only screen and (min-width: 801px)
{
  body.scroll-at-top #header
  {
    height: 130px;
    background-color: rgba(255,255,255,0.4);
    /*background: linear-gradient(rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.4) 100%);*/
  }
  body.scroll-at-top.dark-header #header
  {
    background-color: rgba(0,0,0,0.4);
  }
}

.dark-header #header::before
{
  opacity: 0.2;
}

#header:after
{
  z-index: -1;
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: -1px;
  border-bottom: 1px solid rgba(0,0,0,0.4);
  box-shadow: 0 0 30px rgba(0,0,0,0.3);
}
.dark-header #header:after
{
  border-bottom: 1px solid rgba(255,255,255,0.4);
}
.animations-enabled #header:after
{
  transition: border-bottom 0.4s ease-out, box-shadow 0.4s ease-out;
}
@media only screen and (min-width: 801px)
{
  body.scroll-at-top #header:after
  {
    box-shadow: 0 0 0px rgba(0,0,0,0.3);
    border-bottom: 1px solid rgba(73, 43, 43, 0);
  }
}

#header svg.logo,
#header img.dark-logo
{
  z-index: 20;
  position: absolute;
  left: 20px;
  top: 10px;
}
#header img.dark-logo
{
  z-index: 10;
  opacity: 0;
}
@media only screen and (min-width: 801px)
{
  body.scroll-at-top #header svg.logo,
  body.scroll-at-top #header img.dark-logo
  {
    top: 40px;
  }
}
.dark-header #header svg.logo
{
  opacity: 0;
}
.dark-header #header img.dark-logo
{
  opacity: 1;
}
.animations-enabled #header svg.logo,
.animations-enabled #header img.dark-logo
{
  transition: opacity 0.4s, top 0.4s ease-out;
}

#header-nav
{
  float: right;
  margin: 10px 0 0 10px;
  padding: 0;
  list-style-type: none;
}
@media only screen and (min-width: 801px)
{
  body.scroll-at-top #header #header-nav
  {
    margin-top: 40px;
  }
}
.animations-enabled #header #header-nav
{
  transition: margin-top 0.4s ease-out;
}


#header-nav ul
{
  margin: 0;
  padding: 0;
  list-style-type: none;
  font-weight: lighter;
  font-size: 0.9em;
}

#header-nav > li
{
  display: inline-block;
  vertical-align: middle;
}

#header-nav > hr
{
  content: '';
  display: inline-block;
  vertical-align: middle;
  border-left: 1px solid rgba(0,0,0,0.2);
  height: 40px;
  margin: 0 30px;
}

.dark-header #header-nav > hr
{
  border-left-color: rgba(255,255,255,0.2);
}

#header-nav > li ul.buttons li
{
  display: inline-block;
  vertical-align: middle;
}

#header-nav a.button
{
  font-weight: normal;
  line-height: 30px;
}

@media only screen and (max-width: 800px)
{
  #header-nav a.button
  {
    min-width: 30px;
    padding: 4px 10px;
  }
}

@media print {
  #header-nav > li ul.buttons
  {
    display: none;
  }
}

#header-nav a
{
  text-decoration: none;
}

#hero-bg
{
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  height: 400px;
  
  background-repeat: no-repeat;
  background-size: cover;
}

#hero-overlay-content
{
  position: relative;
  height: 230px; /* fill the background header image */
  margin-bottom: 60px; /* move following content 20px below the image - note some content will have a -20px negative margin */
}

#hero-overlay-content h1
{
  font-size: 3em;
  margin: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  display: inline-block;
  text-shadow: 0 0 1.6em #001144ff;
}

#hero-overlay-content.light h1
{
  color: #000;
  text-shadow: 0 0 1.6em #ffffffff;
}

@media print {
  #hero-overlay-content
  {
    position: static;
    transform: none;
    height: auto;
    margin-bottom: 0;
  }
  #hero-overlay-content h1,
  #hero-overlay-content.light h1
  {
    font-size: 2em;
    position: static;
    transform: none;
    color: #000;
    text-shadow: none;
  }
}

#footer
{
  background-color: #202A2C;
  color: #fff;
  padding: 50px 0;
  text-align: center;
  font-weight: lighter;
  line-height: 1.5em;
  overflow: hidden;
}

@media print {
  #footer
  {
    margin-top: 25px;
    padding: 0;
  }
}

#footer > .constrain
{
  z-index: 1;
  position: relative;
}

#footer-tick
{
  position: absolute;
  right: -70px;
  top: -40px;
  z-index: -1;
  opacity: 0.1;
}

#footer a
{
  color: inherit;
  text-decoration: none;
}

#footer a:hover
{
  text-decoration: underline;
}

#footer .copyright
{
  opacity: 0.5;
  margin: 0;
}

#footer ul.sitemap,
#footer ul.sitemap li
{
  margin: 0;
  padding: 0;
}

#footer hr
{
  width: 100px;
  margin-left: auto;
  margin-right: auto;
}

#footer ul.sitemap li
{
  vertical-align: top;
  list-style-type: none;
  display: inline-block;
  text-align: left;
  margin: 0.3em 0em 0.3em 0.5em;
}

#footer ul.sitemap li:after
{
  content: '▪︎';
  margin-left: 0.7em;
  opacity: 0.3;
}

#footer ul.sitemap li:last-child:after
{
  display: none;
}


@media print {
  #footer ul.sitemap,
  #footer ul.sitemap + hr
  {
    display: none;
  }
}

.section
{
  position: relative;
  background-size: cover;
  background-position: 50% 50%;
}

.section:first-of-type
{
  padding-top: 130px; /* space for header */
}

@media only screen and (max-width: 800px)
{
  .section:first-of-type
  {
    padding-top: 0px; /* don't need ot leave space for header, because the header isn't fixed */
  }
}


@media print {
  .section:first-of-type
  {
    padding-top: 0;
  }
}

/**
* if enabled (if javascript is active), "animate-in" elements will swith to "animate-in-visible" once the user
* scrolls down to them for the first time.
*
* A second class, such as "pop-up" selects the animation that will be used.
*/
.animations-enabled .animate-in.pop-up
{
  transform: translateY(200px);
  transition: transform 0.3s;
  transition-timing-function: cubic-bezier(0.7, 0.3, 0.4, 1.3)
}

.animations-enabled .animate-in-visible.pop-up
{
  transform: translateY(0);
}


.animations-enabled .animate-in.fade-in
{
  opacity: 0;
  transition: opacity 2s;
  transition-timing-function: cubic-bezier(0.7, 0.3, 0.4, 1.3)
}

.animations-enabled .animate-in-visible.fade-in
{
  opacity: 1;
}

h1, h2, h3, h4, h5
{
  font-family: LatoLatinBold, sans-serif;
}

div.feature-content.center
{
  text-align: center;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

div.feature-content.left,
div.feature-content.right
{
  display: inline-block;
  width: 320px;
  vertical-align: top;
}

div.feature-content h2
{
  color: #42515A;
  font-size: 2.5em;
  font-weight: normal;
}

.dark-section div.feature-content h2
{
  color: #fff;
}

div.feature-content hr
{
  margin: 40px 0;
  width: 50px;
  border-top: 8px solid #F5822F;
}

div.feature-content.center hr
{
  margin-left: auto;
  margin-right: auto;
}

div.feature-content h2 + hr
{
  margin-top: -10px;
}

div.feature-content p
{
  font-weight: lighter;
  line-height: 1.6em;
}

h1.logo,
div.logo
{
  font-family: LatoLatinBold, sans-serif;
  font-variant-ligatures: none; /* lato has a ligature we don't want between the "t" and "i" */
}

h1.logo
{
  text-align: center;
  margin-bottom: 40px;
  font-size: 7vw;
}

div.logo
{
  display: inline-block;
  margin: 7px 20px 20px 20px;
  font-size: 29px;
}

@media only screen and (max-width: 800px)
{
  div.logo
  {
    margin: 5px 5px 20px 0px;
  }
}

@media only screen and (min-width: 801px)
{
  .scroll-at-top div.logo
  {
    margin-top: 35px;
  }
}

.animations-enabled div.logo
{
  transition: margin-top 0.4s;
}

h1.logo a
{
  display: inline-block;
  -webkit-print-color-adjust: exact;
  color-adjust: exact;
}

h1.logo a::before
{
  content: '';
  display: block;
  position: relative;
  
  top: 0.7vw;
  left: -0.1vw;  /* our logo in the video is not perfectly centred */
  width: 30.4vw;
  height: 30.4vw;
  margin: 0 auto 2vw auto;
  
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="365" height="364" viewBox="0 0 365 364"><defs><linearGradient x1="68.5397693%" y1="30.8319039%" x2="32.0964575%" y2="68.3778486%" id="g"><stop stop-color="%23FFFFFF" offset="0%"></stop><stop stop-color="%23FFFFFF" stop-opacity="0.8882" offset="36.6398738%"/><stop stop-color="%23FFFFFF" stop-opacity="0.8479" offset="50.9297831%"/><stop stop-color="%23EBEBEB" stop-opacity="0.8192" offset="59.4648916%"/><stop stop-color="%23DADADA" stop-opacity="0.796" offset="68%"/><stop stop-color="%23C4C4C4" stop-opacity="0.7761" offset="74.63%"/><stop stop-color="%23A8A8A8" stop-opacity="0.7585" offset="80.5%"/><stop stop-color="%23888888" stop-opacity="0.7426" offset="85.81%"/><stop stop-color="%23626262" stop-opacity="0.7279" offset="90.69%"/><stop stop-color="%23373737" stop-opacity="0.7143" offset="95.23%"/><stop stop-color="%23090909" stop-opacity="0.7022" offset="100%"/><stop stop-color="%23000000" stop-opacity="0.7" offset="100%"/></linearGradient></defs><g fill="none"><g transform="translate(0.5 0)"><rect width="364" height="364" rx="38" fill="%2342515A"/><path d="M336.1 242C311.9 303.5 252 347 182 347 162.9 347 144.6 343.8 127.5 337.8L127.5 242ZM119.5 119L119.5 334.8C59.1 310.1 16.5 250.8 16.5 181.5 16.5 159.4 20.8 138.3 28.7 119L119.5 119ZM127.5 36.1L328.2 234 127.5 234 127.5 36.1ZM182 16C273.4 16 347.5 90.1 347.5 181.5 347.5 199.7 344.6 217.2 339.1 233.6L127.7 25.1C144.7 19.2 163 16 182 16ZM119.5 28.2L119.5 28.2 119.5 111 32.2 111C49.9 73.6 81.1 43.9 119.5 28.2Z" fill="%23F58220"/><g transform="translate(50.61875 88.159805)"><polygon points="36.1 113.2 0 149.3 36.3 187.8 108.6 187.8 262.6 35.9 227.4 0 73.2 151.3" fill="%23FFF"/><polygon points="73.2 151.3 108.6 187.8 130.1 166.6 95.4 129.6" fill="url(%23g)"/></g></g></g></svg>');
  background-image: url('data:image/svg+xml;utf8,<svg width="430px" height="430px" viewBox="0 0 430 430" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient x1="68.6356627%" y1="30.8319039%" x2="32.0038549%" y2="68.3778486%" id="g"><stop stop-color="%23000000" stop-opacity="0" offset="0%"></stop><stop stop-color="%23000000" stop-opacity="0.00441501858" offset="10.3355141%"></stop><stop stop-color="%23000000" stop-opacity="0.102554428" offset="54.5084066%"></stop><stop stop-color="%23000000" stop-opacity="0.306113076" offset="100%"></stop><stop stop-color="%23000000" stop-opacity="0.7" offset="100%"></stop></linearGradient></defs><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect id="Rectangle" fill="%2342515A" x="0" y="0" width="430" height="430" rx="53"></rect><path d="M396.729449,286.000806 C368.500158,358.516187 298.002677,409.906542 215.502336,409.906542 C191.389977,409.906542 168.302921,405.516693 146.996779,397.492605 L146.999131,285.999131 Z M142.999131,139.999131 L142.998221,395.935747 C71.5427303,367.195717 21.0981308,297.24001 21.0981308,215.502336 C21.0981308,188.725091 26.5119274,163.212305 36.3046742,139.998826 L142.999131,139.999131 Z M146.999131,33.5861308 L398.239997,281.989303 C398.238544,281.993295 398.237092,281.997286 398.235639,282.001278 L146.999131,281.999131 L146.999131,33.5861308 Z M215.502336,21.0981308 C322.868815,21.0981308 409.906542,108.135858 409.906542,215.502336 C409.906542,237.097986 406.385245,257.871192 399.885497,277.27911 L151.853847,31.7567051 C171.795697,24.849998 193.210869,21.0981308 215.502336,21.0981308 Z M142.998221,35.0689256 L142.999131,135.999131 L38.046421,135.996862 C58.582897,90.2299046 96.3045607,53.8495288 142.998221,35.0689256 Z" id="Combined-Shape" fill="%23F58220"></path><g id="Tick" transform="translate(53.280374, 90.485981)" fill-rule="nonzero"><polygon fill="%23FFFFFF" points="45.7196262 136.214019 0.419626168 181.314019 45.7196262 226.514019 136.219626 226.514019 318.519626 45.8140187 272.319626 0.514018692 91.4244652 181.61114"></polygon><polygon id="Tick-Gradient" fill="url(%23g)" points="91.4196262 181.614019 136.219626 226.514019 159.719626 203.214019 116.292384 156.705358"></polygon></g></g></svg>');
}

div.logo a
{
  display: inline-block;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns%3D"http://www.w3.org/2000/svg" width%3D"52" height%3D"52" viewBox%3D"0 0 52 52"><path d%3D"M50.3999677 35.000501C46.7381731 44.9240721 37.1954223 52 26 52 22.8363967 52 19.8047617 51.4349765 17.0005038 50.4003385L17 35ZM16 16L16.0002233 50.0074397C6.60429722 46.089255 1.0658141e-14 36.8158856 1.0658141e-14 26 1.0658141e-14 22.4564821 0.708878314 19.0785317 1.9925603 16.0002233L16 16ZM17 2.328L50.047 34 17 34 17 2.328ZM26 0C40.3594035 0 52 11.6405965 52 26 52 28.5154468 51.6427825 30.9474609 50.9763086 33.2480815L17.6977375 1.35370561C20.3048735 0.475811734 23.0968709 0 26 0ZM16.0002233 1.9925603L16 15 2.43479786 14.9998508C5.17018667 9.14996898 10.0197153 4.48648527 16.0002233 1.9925603Z" fill%3D"%23F58220"/><g transform%3D"translate(5.308286 11.27601)"><polygon points%3D"5.74339093 17.9935849 0 23.7369759 5.64498956 29.7251833 17.3951168 29.7284309 41.7508413 5.71165375 36.1409564 3.10479072e-05 11.6388904 24.0544155" fill%3D"%23FFF"/><polygon points%3D"11.6417144 24.05399 17.3917144 29.72399 17.8917144 29.22399 12.1417144 23.55399" fill-opacity%3D"0.45"/><polygon points%3D"11.6417144 24.05399 17.3917144 29.72399 18.8917144 28.22399 13.1417144 22.55399" fill-opacity%3D"0.16"/></g></svg>');
  background-repeat: no-repeat;
  background-position: left center;
  padding-left: 60px;
  line-height: 1em;
  -webkit-print-color-adjust: exact;
  color-adjust: exact;
  
}

h1.logo a,
div.logo a
{
  color: #42515A;
  text-decoration: none;
  word-spacing: -0.23em;
}

hr
{
  margin: 2em 0;
  border: none;
  border-top: 1px solid #8885;
}

.animations-enabled div.logo a {
  transition: color 0.4s;
}

@media screen {
  .dark-header div.logo a
  {
    color: #fff;
  }
}


h1.logo span.apps,
div.logo span.apps
{
  color: #F58220;
}

h1.logo span.t,
div.logo span.t
{
  position: relative;
}
h1.logo span.t:before,
div.logo span.t:before
{
  content: '';
  position: absolute;
  left: -0.01em;
  top: 0.46em;
  width: 0.37em;
  height: 0.12em;
  background-color: #F58220;
}

h1.logo span.i,
div.logo span.i
{
  position: relative;
}
h1.logo span.i:before,
div.logo span.i:before
{
  content: '';
  position: absolute;
  left: 0.02em;
  top: 0.225em;
  width: 0.205em;
  height: 0.205em;
  background-color: #F58220;
  border-radius: 1em;
}

div.slogan
{
  font-family: LatoLatinBold, sans-serif;
  font-size: 2vw;
  color: #F58220;
  text-align: center;
}

div.slogan span
{
  padding: 0 3vw;
  color: #42515A;
}

a
{
  color: #43525A;
  text-decoration: underline;
}
.dark-header #header a
{
  color: #fff;
}

a.button
{
  display: inline-block;
  margin: 2px;
  background-color: #F5822F;
  padding: 4px 20px;
  min-width: 79px;
  text-align: center;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
}

a.button:active
{
  background-color: #43525A;
}

a.button.alt
{
  background-color: #43525A;
}

a.button.alt:active
{
  background-color: #202A2C;
}

address
{
  font-style: normal;
}
address dl
{
  display: grid;
  grid-template-columns: max-content auto;
}
address dt
{
  font-weight: bold;
  grid-column-start: 1;
}
address dd
{
  grid-column-start: 2;
  margin-bottom: 15px;
}

ul.tick-list
{
  margin: 30px 0;
  padding: 0;
  list-style-type: none;
}

ul.tick-list li
{
  background-image: url('data:image/svg+xml;utf8,<svg width="12px" height="11px" viewBox="0 0 12 11" xmlns="http://www.w3.org/2000/svg"><polygon fill="%2342515a" points="-0.0148531773 6.61682787 1.46367004 5.08733155 3.91843408 8.54799137 9.71923348 0.501591889 11.3447806 1.50709284 4.33168004 11.0398708"></polygon></svg>');
  
  background-repeat: no-repeat;
  padding-left: 26px;
  margin: 8px 0;
  background-position: 0 center;
}

.dark-section ul.tick-list li
{
  background-image: url('data:image/svg+xml;utf8,<svg width="12px" height="11px" viewBox="0 0 12 11" xmlns="http://www.w3.org/2000/svg"><polygon fill="white" points="-0.0148531773 6.61682787 1.46367004 5.08733155 3.91843408 8.54799137 9.71923348 0.501591889 11.3447806 1.50709284 4.33168004 11.0398708"></polygon></svg>');
}

ul.tick-list li.no-tick
{
  background-image: none;
}









.feature-highlight
{
  position: relative;
  max-width: 100%;
  font-size: 25px;
  margin-left: auto;
  margin-right: auto;
  height: 66vw; /* assumes a standard aspect ratio landscape photo */
  
  
}

.animations-enabled .feature-highlight
{
  transition: max-width 3s, margin-left 3s, margin-right 3s, height 3s;
}

.feature-highlight div.hero-photo-wrap
{
  width: 100%;
  height: 100%;
  overflow: hidden;
  text-align: center;
  border-radius: 0px;
} 

.animations-enabled .feature-highlight div.hero-photo-wrap
{
  transition: border-radius 3s, height 3s;
}

.feature-highlight div.hero-photo-wrap
{
  position: absolute;
  top: 0;
  left: 0;
}

.animations-enabled .feature-highlight div.hero-photo-wrap
{
  transition: margin-left 3s, margin-top 3s, width 3s, height 3s;
}

.feature-highlight img.hero-photo
{
  width: 100%;
}

.animations-enabled .feature-highlight img.hero-photo
{
  transition: width 3s, margin-left 3s, margin-top 3s;
}

.feature-highlight .feature-text
{
  max-width: 690px;
  margin-left: auto;
  
  opacity: 0;
}

.animations-enabled .feature-highlight .feature-text
{
  transition: opacity ease-in 3s, padding-top 3s;
}

.feature-highlight.animate-in-visible .feature-text
{
  opacity: 1;
}

.feature-highlight.animate-in-visible
{
  max-width: 1200px;
  height: 500px;
}

.feature-highlight.animate-in-visible div.hero-photo-wrap
{
  width: 400px;
  border-radius: 30px;
}

#feature-highlight-checklist-inspections.animate-in-visible img.hero-photo
{
  /* adjust to set the "zoomed in" size/crop of the hero photo */
  margin-left: -120%;
  margin-top: -30%;
  width: 300%;
}

#feature-highlight-checklist-inspections .feature-text
{
  padding-top: 150px;
}

.feature-gallery
{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0 95px;
}

.feature-gallery .feature
{
  margin: 30px 5px;
  position: relative;
  width: 310px;
  height: 420px;
  display: inline-block;
  background-size: cover;
  background-position: 50% 50%;
  border-radius: 22px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

.feature-gallery .feature span
{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  min-height: 80px;
  
  border-top: 8px solid #F5822F;
  background-color: #fff;
  
  text-align: center;
  font-weight: normal;
  font-size: 1.1em;
  color: #42515A;
  
  border-bottom-left-radius: 22px;
  border-bottom-right-radius: 22px;
}

.feature-gallery .feature span a
{
  position: absolute;
  bottom: 25px;
  left: 0;
  right: 0;
  
  text-transform: uppercase;
  text-decoration: none;
  font-size: 0.7em;
  color: #F5822F;
}

.partner-logos
{
  text-align: center;
  padding: 30px 0;
  margin: 0 auto;
  max-width: 900px;
}

.partner-logos img
{
  margin: 20px 30px;
  height: 50px;
}

#video-wrapper
{
  position: relative;
  height: 56.25vw;
}

#video-placeholder
{
  margin: 0 auto;
  height: 56.25vw;
  background-color: #fff0;
  transition: background-color 2.5s ease-out;
}

#video-placeholder h1
{
  margin-top: 0;
  padding-top: 60px;
}

#video-placeholder #play-video
{
  position: absolute;
  display: inline-block;
  top: 1em;
  right: 1em;
  background-color: #000a;
  padding: 1em;
  border-radius: 1em;
  text-decoration: none;
  color: #fff;
}

#video-placeholder #play-video::before
{
  position: relative;
  top: -0.1em;
  content: '';
  width: 1.0em;
  height: 1em;
  margin-right: 0.5em;
  display: inline-block;
  vertical-align: middle;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"><path d="M0 0 L10 5 L0 10 Z" fill="%23ffffff" /></svg>');
  background-size: contain;
  background-repeat: no-repeat;
}

#video-container
{
  position: absolute;
  top: 0;
  width: 100%;
  height: 0%;
  padding-top: 56.25%; /* 16:9 aspect ratio */
}

#video-container video
{
  /* inherit width/height of parent, which us ea padding trick to get the right aspect ratio */
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

p.error
{
  width: fit-content;
  min-width: 20em;
  background-color: #ffeaa3;
  border: 3px solid #e6a800;
  border-left-width: 1px;
  border-right-width: 1px;
  padding: 3px;
  white-space: pre-line;
}

p.message
{
  width: fit-content;
  min-width: 20em;
  background-color: #a3eaff;
  border: 3px solid #0077e6;
  border-left-width: 1px;
  border-right-width: 1px;
  padding: 3px;
  white-space: pre-line;
}

form.standard div.row
{
  margin: 5px 0;
}

form.standard div.row.no-label
{
  margin-left: 8.3em;
}

form.standard label
{
  display: inline-block;
  min-width: 8em;
}

form.standard input,
form.standard textarea
{
  width: 15em;
  border: 1px solid #0003;
  border-radius: 3px;
  padding: 5px;
  font-size: inherit;
  margin: 0;
}

form.standard input[type="checkbox"],
form.standard input[type="radio"]
{
  width: auto;
}

form.standard textarea
{
  vertical-align: top;
  height: 3em;
}

form.standard input.invalid,
form.standard textarea.invalid
{
  border: 1px solid #a00;
  background-color: #fee;
}

form.standard ul.validation-errors
{
  border: 1px solid #a00;
  background-color: #fee;
  
  padding: 10px 10px 10px 1em;
}

form.standard ul.validation-errors::before
{
  content: 'Validation Errors:';
  font-weight: bold;
  display: block;
  margin-bottom: 0.5em;
}

form.standard ul.validation-errors li
{
  margin: 0.1em 0 0.1em 1em;
  padding: 0;
}

form.standard input[type=submit]
{
  width: auto;
  border: none;
  background-color: #F5822F;
  color: #fff;
  padding: 4px 20px;
  border-radius: 6px;
  cursor: pointer;
}

.monolog-output
{
  z-index: 10000; /* make sure this is above pretty much everything */
  
  position: relative; /* this will force mono-log into the same stacking context as other "positioned" elements otherwise it would be under them regardless of the z-index */
}