/*  FONTS
====================*/

@font-face {font-family: 'Inter';font-style: normal;font-weight: 300;src: url('/asset/font/Inter-VariableFont_opsz,wght.ttf.woff2') format('woff2'); font-display: swap;}
/*  GLOBAL
====================*/
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}

/*  GENERAL FORMATTING
====================*/

img {
display:inline-block;
}

.clear-float { /* for use after float divs */
clear: both;
}

.center { /* putting content in horizontal center of its parent */
margin-right: auto;
margin-left: auto;
}

.text-center { /* for center aligned content */
text-align: center;
}

.normal {
font-style: normal;
}

.semi-bold {
font-weight: 800;
}

.rule {
width:100vw;
height:3px;
background-color: #008078;
}

.hide {
display: none;
}

.page-title {
font-weight: 800;
font-size: x-large;
margin: 15px 0 15px 0;
}

.section-title {
font-weight: 800;
font-size: larger;
margin: 15px 0 15px 0;
}

.border-box {
display: inline-block;
padding: 8px;
margin: 0;
border: medium solid rgb(50, 230, 230);
border-radius: 6px;
box-sizing: border-box;
}

.visual-hide {
border: 0;
padding: 0;
margin: 0;
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* old browsers */
clip-path: inset(50%); /*modern browsers, clip-path in from each corner*/
white-space: nowrap; /* some screen readers ignore line feeds and smush words */
}

/*  LINKS
====================*/

a, a:link, a:visited {
color: #008078;
text-decoration: none;
font-weight:800;
}
a:hover, a:active {
color: #6a5acd;
}

input[type=submit]:active, input[type=submit]:hover {
background-color: white;
}

/*  BUTTON
====================*/

button, input[type="file"]::file-selector-button, input[type="submit"] {
height: 28px;
font-size: 13pt;
color: white;
border: 2px solid rgba(0,0,0,0.0);
border-radius: 8px;
outline: none;
padding: 0 6px 2px 6px;
background-color:#008078;
}

button:hover, input[type="file"]::file-selector-button:hover, input[type="submit"]:hover {
background-color: rgb(238,250,248);
border: 2px solid #008078;
color: #008078;
cursor: pointer;
}

button:active, input[type="file"]::file-selector-button:active, input[type="submit"]:active {
border: 2px solid #6a5acd;
background-color: white;
}

button.icon, button.icon:hover, button.icon:focus {
display: inline-block;
background-color: white;
border: none;
padding:0;
height:0;
cursor:pointer;
}

input:disabled, input:active:disabled, input:hover:disabled {
background-color: white;
color: black;
border: 2px solid white;
}

/*  HTML, BODY
====================*/

html, body {
background-color: #fff;
height: 100%;
text-box: trim-both cap alphabetic;
}

html {
overflow: auto; /* not on body or javascript scrolling won't work */
}

body {
margin: 0;
padding: 0;
font-family: "Inter", sans-serif, Verdana, Arial, Helvetica;
font-weight: 300;
font-size: 16px;
color: #000;
}

/********************************
HACK TO DEAL WITH MOBILE BROWSER VH INCLUDING ADDRESS BAR
Adding this allows scrolling up in mobile browser to show more content
when address bar disappears. Helps even when overflow is hidden
*********************************/
html { height: -webkit-fill-available; }
body {
min-height: 100vh;
min-height: -webkit-fill-available;
}


/*  FIGURE
====================*/

figure {
display: table; /* allows figcaption to align left or right with image */
margin: 0 auto;
padding: 10px 0;
text-align: center;
}

figure img { /* default max which leaves space for menu */
max-width: 100%;
max-height: calc(100vh - 20px);
vertical-align: middle; /* to make sure images behave like blocks */
}

figure span{
display: inline-block;
position: relative;
}

figcaption {
text-align: left;
font-size: medium;
font-style: italic;
margin-top: 4px;
}


/*  TEXT COLUMN
====================*/

.text-column {
max-width: 850px;
margin: 0 auto;
padding-left: 10px;
padding-right: 10px;
}
@media (max-width: 850px),
(max-width: 475px) {
.text-column {
max-width: 100vw;
padding-left: 5px;
padding-right: 5px;
}
}


/*  MENU
====================*/

.logo {
margin:0 0 0 8px;
padding:0;
float: left;
}

.logo a:link, .logo a:visited {
color: #008078;
}

.menu {
position: relative;
float:right;
margin: 0 10px 0 8px; /* left margin for menu left-aligned on next line */
padding-left:0;
}

.menu div {
display:inline-block;
margin: 0 0 0 15px;
}

.menu div:first-child {
margin-left: 5px;
}

.logo, .menu-item, .menu-item-highlight {
position: relative; /* position property required for z-index to be applied */
z-index:1; /* puts top level menu items above dropdown items */
font-weight: 800;
}

.menu-item, .menu-item a:link, .menu-item a:visited {
color: #888;
}

.logo a:hover, .menu-item:hover, .menu-item a:hover, .menu-item a:active,
.menu-item-highlight a:link, .menu-item-highlight a:visited,
.menu-item-highlight a:hover, .menu-item-highlight a:active {
color: #6a5acd;
}

.user-icon {
display: inline-block;
padding: 0 3px;
background-color: #008078;
color: white;
font-weight: 800;
}


@media (max-width: 475px) {
.logo, .menu-item, .menu-item-highlight { font-size:90%; }
}

@media (max-width: 350px) {
.logo { float: none; }
.menu {
float:none;
margin-top: 3px;
}
.menu div {
display:inline-block;
margin: 0 15px 0 0;
}
}


/* PAGE BOTTOM
==================*/

.page-bottom { /* add space at bottom */
height: 20px;
}

/* FORM
==================*/
.input-symbol-dollar {
position: relative;
}
.input-symbol-dollar input {
padding-left:18px;
}
.input-symbol-dollar:before {
position: absolute;
top: 0;
content:"$";
left: 5px;
}