html {
  box-sizing: border-box;
}

body {
    color: #555;
    font-family: -apple-system, BlinkMacSystemFont,
               'avenir next', avenir,
               'segoe ui',
               'helvetica neue', helvetica,
               ubuntu,
               roboto, noto,
               arial,
               sans-serif;
}

.epi-text-color { color: #555; }

*,
*::before,
*::after {
  box-sizing: inherit;
}

input, select, textarea { padding: 6px 6px; border: 1px solid #ccc; border-radius: 4px; color: #666; }
textarea 
{
    padding: .75rem; 
    font-family: inherit;
    display: block; 
    min-height: 6rem; 
}
textarea.autogrow { field-sizing:content }

input.invalid, select.invalid, textarea.invalid { border-color: #E3C3C6; background-color:#FFEEEE; }

.link-btn { display: inline; background-color: unset; color: LinkText; border: none; padding: 0; font: inherit; cursor: pointer; } 
.link-btn:hover { text-decoration: underline; }

.link {
  transition: color .4s;
  color: #156AA4;
  text-decoration: none;
}
.link:link,
.link:visited { color: #156AA4; }
.link:hover   { text-decoration: underline; }
.no-underline, .no-underline:hover { text-decoration: none; }

.btn, .btn:link, .btn:visited {
  outline: none;
  border-width: 0;
  border-radius: 0.25em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: sans-serif;
  padding: .5em 1em;
  text-decoration: none;
  cursor: pointer;
  background-color: #ccc;
  color: #666;
  -webkit-transition: color 0.2s, background-color 0.2s, border 0.2s;
  transition: color 0.2s, background-color 0.2s, border 0.2s; 
}
.btn-flat, .btn:link, .btn:visited {
  outline: none;
  border-radius: 0.25em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: sans-serif;
  padding: .5em 1em;
  text-decoration: none;
  cursor: pointer;
  -webkit-transition: color 0.2s, background-color 0.2s, border 0.2s;
  transition: color 0.2s, background-color 0.2s, border 0.2s; 
}

.btn.btn-bigger {
  padding: 1em 1.5em;
}

.btn:hover {
  background-color: #ddd;
  -webkit-transition: background-color 0.1s, color 0.1s;
  transition: background-color 0.1s, color 0.1s;
}

.btn.btn-small { padding: .25rem .5rem; font-size: .85rem; line-height: .85rem; }

.btn.btn-epi-orange { color: #f4f4f4; background-color: #c60; }
.btn.btn-epi-orange:hover { background-color: #d71; }
.btn.btn-epi-orange:disabled { background-color: #d71; cursor: not-allowed; }
.btn.btn-epi-bright-orange { color: #f4f4f4; background-color: #f80; }
.btn.btn-epi-bright-orange:hover { background-color: #f91 }
.btn.btn-epi-bright-orange:disabled { background-color: #ccc; cursor: not-allowed; }
.btn.btn-epi-blue { color: #f4f4f4; background-color: #156AA4; }
.btn.btn-epi-blue:hover { background-color: #257AB4 }
.btn.btn-epi-blue:disabled { background-color: #257AB4; cursor: not-allowed; }
.btn.btn-epi-red { color: #f4f4f4; background-color: #d9534f; }
.btn.btn-epi-red:hover { background-color: #c9302c; }
.btn.btn-epi-red:disabled { background-color: #c9302c; cursor: not-allowed; }
.btn.btn-epi-bright-green { color: #fff; background-color: #3C0; }
.btn.btn-epi-bright-green:hover { background-color: #4D1; }
.btn.btn-epi-bright-green:disabled { background-color: #684; cursor: not-allowed; }
.btn.btn-clear { color: #f4f4f4; background-color: transparent; border-style: solid; }
.btn.btn-clear:hover { background-color: rgba(255,255,255,0.25); }
.btn.btn-clear:disabled { background-color: rgba(255,255,255,0.25); cursor: not-allowed; }

summary { list-style-position: outside }
details { padding-left: 1rem }


@supports (interpolate-size: allow-keywords) {
    :root {
        interpolate-size: allow-keywords;
    }

    [open]::details-content {
        height: auto;
    }
    [close]::details-content {
        height: 0;
    }
    ::details-content {
        transition: height 0.25s ease, content-visibility 0.25s ease allow-discrete;
        height: 0;
        overflow: clip;
    }
}



/* custom */
.page-width { max-width: 1024px; }
.icon { display: inline-block; width: 1em; height: 1em; vertical-align: middle; fill: currentColor; }
.icon.right { margin-right: 0; margin-left: .5em; }
.menu-btn { height: 1.5em; width: 1.5em; }

.epi-orange { color: #c60; }
.bg-epi-orange { background-color: #c60 }
.epi-bright-orange { color: #f80 }
.bg-epi-bright-orange { background-color: #f80 }
.epi-blue { color: #156AA4 }
.bg-epi-blue { background-color: #156AA4 }
.epi-light-blue { color: #0084C1; }
.bg-epi-light-blue { background-color: #0084C1; }
.bg-epi-light-light-blue { background-color: #EEF3F9; }
.epi-red { color: firebrick; }
.bg-epi-red { background-color: firebrick; }
.b--epi-red { border-color: firebrick; }
.epi-green { color: #788c6e; }
.bg-epi-bright-green { background-color: #3C0; }

.bg-trans { background: transparent; }
.bg-trans-dark-50 { background-color: rgba(0,0,0,0.5) }
.bg-trans-light-50 { background-color: rgba(255,255,255,0.5) }
.bg-trans-light-75 { background-color: rgba(255,255,255,0.75) }
.bg-trans-light-85 { background-color: rgba(255,255,255,0.85) }
.text-shadow1 {text-shadow: 1px 1px rgba(0,0,0,.5);}
.text-shadow2 {text-shadow: 2px 2px rgba(0,0,0,.5);}
.text-shadow1-light {text-shadow: 1px 1px rgba(0,0,0,.2);}
.text-shadow2-light {text-shadow: 2px 2px rgba(0,0,0,.2);}
.w-67 { width: 67%; }
.z1 { z-index: 1; }
.z10 { z-index: 10; }
.z100 { z-index: 100; }

.flex1 { flex: 1; }
.flex2 { flex: 2; }
.flex3 { flex: 3; }
.flex4 { flex: 4; }
.flex5 { flex: 5; }
.grid { display: grid; }
.inline-grid { display: inline-grid }
.gap1 { gap: .25rem; }
.gap2 { gap: .5rem; }
.gap3 { gap: 1rem; }
.gap4 { gap: 2rem; }
.col-gap1 { column-gap: .25rem; }
.col-gap2 { column-gap: .5rem; }
.col-gap3 { column-gap: 1rem; }
.col-gap4 { column-gap: 2rem; }
.row-gap1 { row-gap: .25rem; }
.row-gap2 { row-gap: .5rem; }
.row-gap3 { row-gap: 1rem; }
.row-gap4 { row-gap: 2rem; }
.col-span2 { grid-column: span 2; }
.col-span3 { grid-column: span 3; }
.col-span4 { grid-column: span 4; }
.col-span5 { grid-column: span 5; }
.col-span6 { grid-column: span 6; }
.col-span7 { grid-column: span 7; }
.span-all { grid-column: 1 / -1; }

.no-shrink { flex-shrink: 0 }

.spin { animation: spin 1s linear infinite; }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

.fade-enter-active, .fade-leave-active { transition: opacity .25s ease; }
.fade-slow-enter-active, .fade-slow-leave-active { transition: opacity 1s ease; }
.fade-enter, .fade-leave-active,
.fade-slow-enter, .fade-slow-leave-active {                
    opacity: 0;
}


.no-outline { outline: none; }
.pointer { cursor: pointer; }

.left-auto { left: auto; }

@media screen and (max-width: 30em){ /* 480px - normally just use w-100 to default to this size */
    .w-100-s { width: 100% }
}

@media screen and (min-width: 30em) and (max-width: 60em) { /* -m, 480-960px*/
    .flex1-m { flex: 1; }
    .flex2-m { flex: 2; }
    .flex3-m { flex: 3; }
    .flex4-m { flex: 4; }
    .flex5-m { flex: 5; }
    .grid-m { display: grid; }
    .inline-grid-m { display: inline-grid }
    .gap1-m { gap: .25rem; }
    .gap2-m { gap: .5rem; }
    .gap3-m { gap: 1rem; }
    .gap4-m { gap: 2rem; }
    .no-shrink-m { flex-shrink: 0 }
}

@media screen and (min-width: 60em) { /* -l, 960px*/
    .flex1-l { flex: 1; }
    .flex2-l { flex: 2; }
    .flex3-l { flex: 3; }
    .flex4-l { flex: 4; }
    .flex5-l { flex: 5; }
    .left-auto-l { left: auto; }
    .grid-l { display: grid; }
    .inline-grid-l { display: inline-grid }
    .gap1-l { gap: .25rem; }
    .gap2-l { gap: .5rem; }
    .gap3-l { gap: 1rem; }
    .gap4-l { gap: 2rem; }
    .no-shrink-l { flex-shrink: 0 }
}

@media screen and (min-width: 30em) { /* -ns */
    .flex1-ns { flex: 1; }
    .flex2-ns { flex: 2; }
    .flex3-ns { flex: 3; }
    .flex4-ns { flex: 4; }
    .flex5-ns { flex: 5; }
    .grid-ns { display: grid; }
    .inline-grid-ns { display: inline-grid }
    .gap1-ns { gap: .25rem; }
    .gap2-ns { gap: .5rem; }
    .gap3-ns { gap: 1rem; }
    .gap4-ns { gap: 2rem; }
    .no-shrink-ns { flex-shrink: 0 }
}  

@media print {
    .hide-for-print { display: none; }
}

[v-cloak] { display: none; }
[v-cloak].op-cloak { display:block; opacity: 0; }
.hover-underline { text-decoration: none; }
.hover-underline:hover { text-decoration: underline; }
.b--epi-blue { border-color: #156AA4 }
.b--moon-gray { border-color: #ccc; }
.shadow { box-shadow: 0 6px 12px rgba(0,0,0,.4) }
.mw-23 { width: 23%; }

.caret { /* from bootstrap */
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 4px dashed;
    border-top: 4px solid\9;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}
.responsive-embed { overflow: hidden; padding-bottom: 56.25%; position: relative; height: 0; }
.responsive-embed iframe { left: 0; top: 0; height: 100%; width: 100%; position: absolute; }


/* Image rotator */
.spaceholder-slide {
    opacity: 0;
    display: block;
    width: 100%;
}
.slide {
    display: block;
    position: absolute;
    width: 100%;
    transition: opacity 1s ease-in-out;
}
.slide-hidden { opacity: 0; pointer-events:none; z-index:-1; }
.slide-visible { opacity: 1; }


/* Forms */
input.has-right {
    border-right-width: 0;
    border-radius: 4px 0 0 4px;
}
.input-right {
    height: 32px;
    display: inline-block;
    border: 1px solid #ccc;
    vertical-align: top;
    padding: 5px 8px;
    background-color: #eee;
    border-radius: 0 4px 4px 0;
}

/* Sections */
.section { margin-bottom: 40px; border: 1px solid #ccc; box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); }
.section > h2 { margin: 0; padding: 11px 20px 10px; border-bottom: 1px solid #ccc;  background-color: #EEE; color: #c60; font-size: 18px; line-height: 32px; }
.section > h2.action { background: url(/img/arrow.png) no-repeat 15px 12px #EEE; padding-left: 55px; }
.section > .inner { padding: 20px; background-color: #E8F0F6; }
.section > footer { padding: 11px 20px 10px; border-top: 1px solid #ccc; background-color: #eee; }
@media print { .section { box-shadow: none; }}

.alert { padding:.5rem; border-radius: .25rem; background-color: #f2dede; color: firebrick; }
.success { padding:.5rem; border-radius: .25rem; background-color: #dff0d8; color: #3c763d }