@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Raleway:400,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

body {
	background-color: rgb(51, 51, 51);
	color: rgb(51, 51, 51);
	font-family:'Raleway', sans-serif;
	font-size:16px;
  line-height: 1.5rem;
}
h1,h2,h3,h4,h5,h6 {
  font-family:'Noto Sans JP', sans-serif;
}
h1 {
  font-size:1.2rem;
  padding:6px 0 0;
}
h2 {
  font-size:1.75rem;
  padding:10px 0 12px;
}
h3 {
  font-size:1.5rem;
  padding:8px 0 10px;
}
h3.cat-head {
	background: rgb(235,45,47);
  color: rgb(255,255,255);
  padding: 5px 0 9px 10px;
  text-transform: uppercase;
  margin-top: 20px;
}
h4 {
  font-size:1.25rem;
  padding:6px 0 8px;
}
h4.inst-head {
	background: #333;
	color: rgb(255,255,255);
	margin: 5px 20px 0px 20px;
	padding-left: 20px;
}
h5 {
  font-size:1.15rem;
  padding:4px 0 6px;
}
h6 {
  font-size:1rem;
  padding:2px 0 4px;
}
em {
	font-style:italic;
}
header h3 {
  padding-top: 10px;
}

label {
	padding-top:20px;
}

em.small {
    font-size: .8em;
}

a {
	text-decoration: none;
}
a:link {
	color:rgb(235,44,46);
}
a:visited {
	color:rgb(235,44,46);
}
a:hover {
	color:rgb(225,24,26);
	text-decoration:underline;
}
a:active {
	color:rgb(235,44,46);
}

a.pure-button {
	color:rgb(0,0,0);
}

a.pure-button:link {
	color:rgb(0,0,0);
}
a.pure-button:visited {
	color:rgb(0,0,0);
}
a.pure-button:hover {
	color:rgb(53,53,53);
	text-decoration:none;
}
a.pure-button:active {
	color:rgb(0,0,0);
}
a.white:link,a.white:visited,a.white:hover,a.white:active {
	color:rgb(255,255,255);
}

nav#admin-menu a:link {
	color: rgb(255,255,255);
}
nav#admin-menu a:visited {
	color: rgb(255,255,255);
}
nav#admin-menu a:hover {
	color: rgb(237,67,66);
}
nav#admin-menu a:active {
	color: rgb(255,255,255);
}

.center {
  text-align:center;
}
.required {
  font-weight:bold;
}
.required::before {
  content: "* ";
  color: red;
}
.top-space {
	margin-top:30px;
  }
em.top-space {
  display:inline-block;
  }

.tooltip {
		color: rgb(235,44,46);
		font-weight: bold;
		padding-right: 20px;
    text-decoration: none;
}
.tooltip span.material-icons {
    font-size: 21px;
    color: rgb(235,44,46);
    position: absolute;
}

.warning {
	color: rgb(190,10,47);
	font-size:.9rem;
}

hr.divider {
	border: #cccccc 1px solid;
	margin: 30px;
}

ul.menu-list li {
	list-style:none;
	margin-left: 0;
	text-transform: uppercase;
}
ul.menu-list a {
}

ul li ul li, dd ul li ul li {
    list-style: circle;
    margin-left: 20px;
}
ul.titles {
    margin-left: 30px;
}
dl {padding:20px;}
dt {font-weight:bold;font-size:1.2em;margin-top:20px;margin-bottom:10px;}
dd {margin-left:20px;}
li, dd li {
    list-style: disc;
    margin-left: 20px;
}

#container {
  background:rgb(255,255,255);
  margin: 0 auto;
  padding:20px;
  width: 66%;
}

#copyright {
	font-size: .8rem;
	margin: 30px 0;
}

div#volunteer-opportunities {
  padding-left: 20px;
}
#volunteer-opportunities h4 {
  margin-bottom: 0;
}
h4#volopps-education {
  margin-top:0;
}
form.pure-form.pure-form-stacked {
  width: 50%;
  margin: 0 auto;
}
input.form-control.stretch {
  width: 100%;
}

.button-success {
  background: rgb(28, 184, 65);
  /* this is a green */
}

.button-error {
  background: rgb(202, 60, 60);
  /* this is a maroon */
}

.button-warning {
  background: rgb(252,216,3);
  /* this is an orange */
}

.button-secondary {
  background: rgb(66, 184, 221);
  /* this is a light blue */
}

ul#commitment {
    list-style: circle;
}
ul#commitment li {
    /* display: block; */
    padding-left: 0px;
    /* list-style-type: circle; */
    margin-left: 21px;
}

ul.links-3 li a span.material-symbols-outlined, ul.att-files li span.material-symbols-outlined {
    font-size: 20px;
    vertical-align: top;
    padding-top: 0px;
}

ul.links-3 li a {
    display: table-cell;
    vertical-align: middle;
    padding-top: 2px;
}
ul.links-3 li {
    display: table-row;
}

img#logo {
    height: 150px;
    width:auto;
}

/* MOBILE MEDIA QUERIES */
@media only screen and (max-width: 414px) {
	#container {
		padding:5px;
		width:95%;
	}

  #container.two-thirds.table {
    overflow-x:auto;
  }
  

	form.pure-form.pure-form-stacked {
    width: 90%;
}
	select#member-level {
    width: 100%;
}

fieldset.fset-items {
  flex-direction: column;
}

.item-input, .item-amount, .item-amount input {
  width:100% !important;
}
}