html, body {
height:100%;
}
body {
color:#202122;
font-family:'Vollkorn', sans-serif;
font-size:1.1rem;
line-height:1.6rem;
margin:0;
padding:0;
}
a:link, a:visited {
color:#989898;
text-decoration:none;
}
.home a:link, .home a:visited {
color:#8c6fc5;
text-decoration:none;
}
a:hover, .home a:hover {
color:#f04141;
text-decoration:underline;
}
h1 {
font-size:1.8rem;
text-align:center;
}
h2 {
font-size:1.4rem;
text-align:center;
}
h4 {
color:#f04141;
font-size:1rem;
font-weight:normal;
margin-bottom:0.3rem;
margin-top:1.5rem;
text-align:center;
}
ins {
font-style:normal;
text-decoration:none;
}
p {
margin-bottom:0.2rem;
margin-top:0.2rem;
}
sup {font-size:0.7rem;vertical-align:top;position:relative;top:-0.4rem;}

.full-page {
display:grid;
grid-template-columns:100%;
grid-template-rows:1fr auto;
height:100%;
}
.before-page-end {
padding-bottom:6rem;
}
.page-end {
background:#f7f7f7;
bottom:0rem;
height:3.1rem;
margin-top:3.5rem;
position:fixed;
width:100%;
}

.hang {
padding-left:2rem;
text-indent:-2rem;
}
.inner {
margin-left:auto;
margin-right:auto;
padding-left:0.25rem;
padding-right:0.25rem;
width:40rem;
}
.mid-ast {
color:#f04141;
display:none;
}

.bottom-menu {
display:flex;
justify-content:space-between;
flex-direction:row;
flex-wrap:wrap;
font-family:'Noto Sans Symbols 2';
}
.accent {
color:#3c87c1;
}
.bottom-menu-parts {
display:flex;
justify-content:space-between;
}
.bottom-menu-left, .bottom-menu-right {
width:calc(50% - 20rem);
}
.bottom-menu-center {
width:40rem;
}
.bottom-menu-center-inner {
background:#fafafa;
border:1px solid #91b5dd;
border-radius:0.2rem;
min-height:4rem;
overflow-y:auto;
padding-bottom:0.5rem;
padding-left:1.5rem;
padding-right:1.5rem;
padding-top:0.8rem;
width:calc(100% - 3rem - 2px);
}
.bottom-menu a:link, .bottom-menu a:visited, .bottom-menu a:hover {
color:#3c87c1;
cursor:pointer;
text-decoration:none;
}
.bottom-menu div {
line-height:3.3rem;
}
.bottom-menu-h {
color:#1872c9;
font-size:0.8rem;
margin:0;
padding-bottom:0.3rem;
text-transform:uppercase;
}
.bottom-nav-title {
color:#1872c9;
font-size:0.8rem;
margin:0;
padding-bottom:1.2rem;
text-align:center;
}
.bottom-nav-title div {
border-bottom:1px solid #91b5dd;
border-top:1px solid #91b5dd;
display:inline-block;
line-height:1;
margin:0;
padding-bottom:0.4rem;
padding-left:1rem;
padding-right:1rem;
padding-top:calc(0.4rem + 2px);
}
.bottom-menu .left, .bottom-menu .right {width:1.4rem;}

.internal-link {
display:block;
font-size:0.9rem;
line-height:1.5em;
margin:0;
padding:0;
padding-bottom:0.5rem;
}
a.internal-link:link, a.internal-link:visited {
color:#202122;
text-decoration:none;
}
.internal-link h4 {
border-right:2px solid #fafafa;
color:#1872c9;
float:right;
font-size:0.8rem;
letter-spacing:normal;
margin:0;
padding-bottom:0rem;
padding-left:0.25rem;
padding-right:calc(0.25rem - 2px);
text-align:right;
}
a.internal-link:hover h4 {
border-right:solid 2px #87b8e7;
}

.office-date-select {
align-items:flex-end;
display:flex;
font-family:'Vollkorn', sans-serif;
justify-content:space-between;
margin-top:1rem;
padding-bottom:0.7rem;
width:100%;
}
.office-date-select a {
border:1px solid #cdcdcd;
font-size:0.9rem;
height:2.5rem;
line-height:2.5rem;
text-align:center;
width:16%;
}
.office-date-select a.evensong {
font-family:'Noto Sans Symbols 2';
}
.office-date-select a:link, .office-date-select a:visited {
color:#202122;
text-decoration:none;
}
.office-date-select a:hover {
background:#4e8cc7;
border:1px solid #4e8cc7;
color:white;
}
.office-date-select a:link.link-ep, .office-date-select a:visited.link-ep {color:#303132;}
.office-date-select a:hover.link-ep {color:white}
.office-subtitle {
color:#848889;
font-size:0.9rem;
font-style:italic;
font-weight:normal;
margin-bottom:0;
margin-left:auto;
margin-right:auto;
margin-top:0;
max-width:80%;
padding-top:0.2rem;
text-align:center;
}
.office-subtitle-inner {
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
display:inline-block;
margin:0;
padding-bottom:1px;
padding-left:1rem;
padding-right:1rem;
padding-top:3px;
}
.this-date {
background:#f2f2f2;
border:1px solid #cdcdcd;
color:#1872c9;
font-size:0.9rem;
height:2.5rem;
line-height:2.5rem;
text-align:center;
width:16%;
}

.selection-container {
cursor:pointer;
display:block;
font-size:0.8rem;
margin-bottom:0.5rem;
padding-left:2.1rem;
position:relative;
user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-webkit-user-select:none;
}
.selection-container input {
cursor:pointer;
height:0;
opacity:0;
position:absolute;
width:0;
}
.checkmark, .rmark {
background-color:#eee;
height:1.4rem;
left:0;
position:absolute;
top:0;
width:1.4rem;
}
.rmark {
border-radius:50%;
}
.selection-container:hover input ~ .checkmark, .selection-container:hover input ~ .rmark {
background-color:#ccc;
}
.selection-container input:checked ~ .checkmark, .selection-container input:checked ~ .rmark {
background-color:#2196f3;
}
.checkmark:after, .rmark:after {
content:"";
display:none;
position:absolute;
}
.selection-container input:checked ~ .checkmark:after, .selection-container input:checked ~ .rmark:after {
display:block;
}
.selection-container .checkmark:after {
border:solid white;
border-width:0 0.1875rem 0.1875rem 0;
height:0.6rem;
left:0.5rem;
top:0.25rem;
transform:rotate(45deg);
-ms-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
width:0.3rem;
}
.selection-container .rmark:after {
background:white;
border-radius:50%;
height:0.5rem;
left:0.45rem;
top:0.45rem;
width:0.5rem;
}

.svg-class {
max-width:100%;
}

.pi {
margin-top:0.75rem;
}
.pii {
padding-left:2.5rem;
}
.tri span, .zero-tri span, .zero-tri-sp span, .open-tri span {
font-size:0.7rem;
font-style:italic;
vertical-align:top;
}
.no-tri .tri, .no-tri .zero-tri, .no-tri .zero-tri-sp, .no-tri .open-tri {display:none;}
.only28 { display:none; }
.use-am .only62 { display:none; }
.use-am .only28 { display:block; }
.label, .sp-label {
font-size:0.8rem;
font-style:italic;
}
.label {
margin-bottom:-0.75rem;
margin-top:0.75rem;
}
.sp-label {
margin-top:0.25rem;
}

.annotated {
padding-right:0.2rem;
position:relative;
color:#f04141;
}
.annotated .note {
background-color:#111;
border-radius:0.2rem;
bottom:100%;
font-size:0.9rem;
left:-1rem;
margin-left:1rem;
min-width:20rem;
padding:0.3125rem 0.5rem;
position:absolute;
text-align:left;
visibility:hidden;
z-index:1;
}
.annotated .note, .annotated .note .verse-num {
color:#fff;
}
.annotated:hover .note {
visibility:visible;
}
.nii {
padding-left:2rem;
}
.verse-num, .label, .sp-label {color:#f04141;}
.sect-sym { font-size:0.8rem; color:#f04141; }

.home .square-collect {
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:space-between;
}
.home .square-collect a {
align-items:center;
border:1px #ccc solid;
color:#777;
display:flex;
flex-direction:row;
font-size:0.85rem;
height:calc(2.6rem - 2px);
justify-content:center;
margin-bottom:0.3rem;
text-decoration:none;
width:calc(2.6rem - 2px);
}
.home .square-collect a:hover {
background:#9866c9;
border:1px #9866c9 solid;
color:white;
}
.home .square-collect .empty {
height:0px;
width:calc(2.6rem - 2px);
border:1px #fff solid;
}

@media only screen and (max-width:40.5rem) {
.inner {
width:calc(100% - 1.5rem);
}
}
@media only screen and (max-width:40rem) {
.bottom-menu-left, .bottom-menu-right {
width:0.75rem;
}
.bottom-menu-center {
width:calc(100% - 1.5rem);
}
}

@media print {
.annotated{display:none;}
.page-end {display:none;}
.part{page-break-inside:avoid;}
}