@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Indie+Flower);
#notebook-paper-box #notebook-paper-content ol.faqs-container li,
#notebook-paper-box header h4 {
    font-family: 'Indie Flower'
}

.quantity input:focus,
ul.nav-tabs.helpinformation li a:focus,
ul.nav-tabs.helpinformation li a:hover {
    outline: 0
}

body {
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    background: #607b8b
}

.jumbotron {
    padding: 0;
    background: #FFF8DC
}

span.required {
    font-weight: 900
}

div.form-required-alert {
    width: 100%;
    max-width: 100%;
    margin: 4px 0 0;
    text-align: center
}

div.form-required-alert p {
    display: inline
}

.jumbotron .container,
.jumbotron .display-container {
    width: 100%;
    max-width: 100%;
    margin-top: 5px;
    box-shadow: inset 0 -8px 10px -6px #322905;
    padding: 5px 5px 15px
}

.jumbotron.ring .container,
.jumbotron.ring .display-container {
    background: url(https://old-friends.co/images/bg_ClassRing_1000x300.jpg) center center no-repeat
}

.jumbotron div.container.rsvp {
    background: url(http://johndhiggins.com/projects/old-friends/images/highschool-grad-hat.svg) center center no-repeat;
    background-size: 100% 122%
}

span.custom-control-indicator {
    border: 1px solid #b22222
}

div#aboutus,
div#helpinformation {
    padding: 20px 15px;
    color: #b22222;
    font-size: 1.1rem
}

div#helpinformation {
    padding: 4px 10px
}

div#helpinformation h4.section-title {
    margin-top: -10px;
    font-size: 1.15rem
}

div#helpinformation .search-by-topic-section {
    margin-top: -15px;
    margin-bottom: -5px
}

div#helpinformation button#add-event-button {
    padding: 4px 8px 8px;
    font-size: .9rem
}

div#helpinformation h5.choose-section-title {
    font-size: 1.05rem
}

div#helpinformation select {
    height: 28px
}

h4.help-information-section-title {
    font-size: 1.5rem;
    text-align: center;
    font-weight: 600
}

h5.help-information-section-title {
    font-size: 1.35rem;
    margin-left: 15px
}

ul.nav-tabs.aboutus li a,
ul.nav-tabs.helpinformation li a {
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    background: #8c7f58
}

.nav-tabs.aboutus,
.nav-tabs.helpinformation {
    border-bottom: none
}

div.tab-pane.aboutus,
div.tab-pane.helpinformation[role=tabpanel] {
    box-shadow: inset 0 5px 10px 0 #000
}

ul.nav-tabs.helpinformation li {
    width: 50%
}

ul.nav-tabs.helpinformation li:nth-child(even) {
    border-left: 1px solid #000
}

ul.nav-tabs.aboutus li a {
    border-left: 1px solid #423718;
    border-right: 1px solid #423718;
    border-bottom: 1.5px solid #423718;
    padding-top: 2px;
    padding-bottom: 2px;
    -webkit-box-shadow: 0 0 3px #888;
    -moz-box-shadow: 0 0 3px #888;
    box-shadow: 0 0 3px #888
}

ul.nav-tabs.helpinformation li a {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: 1.5px solid #423718
}

.faq-title {
    font-weight: 600;
    font-size: 1.15rem;
    margin-left: 6px
}

.faq-answer-text {
    list-style: none;
    margin-left: -50px;
    background: #fff;
    padding: 8px 4px
}

.faq-answer-text ul.second-level {
    margin-left: -20px
}

div.panel.panel-default {
    background: #ececec;
    margin-left: -45px;
    margin-top: 8px;
    touch-action: auto
}

.panel-heading {
    border: 1.5px solid #b22222
}

.panel-collapse div.panel-body li.faq-answer-text {
    margin-left: 0
}

.panel-group div.panel.panel-default h4.panel-title {
    position: relative;
    padding: 15px 30px 15px 15px;
    font-size: 1rem;
    text-overflow: ellipsis;
    margin-bottom: 0
}

.panel-title::after {
    content: "\f107";
    color: #333;
    top: 30%;
    right: 12px;
    position: absolute;
    font-family: FontAwesome;
    font-weight: 900
}

ul.sitemap li.level-one a.index-page,
ul.sitemap li.level-two a.school-page {
    color: #fff;
    display: block;
    opacity: .85;
    text-align: center;
    text-decoration: none
}

.panel-body {
    border-top: 4px solid #b22222
}

.panel-title[aria-expanded=true]::after {
    content: "\f106"
}

.panel-group div.panel.panel-default h4.panel-title:focus,
.panel-group div.panel.panel-default h4.panel-title:hover {
    background: #d0dde4
}

.howto-accordion-hole {
    margin-left: -10px;
    margin-right: 10px
}

ul.sitemap {
    margin-left: -30px
}

ul.sitemap,
ul.sitemap ul {
    list-style: none
}

ul.sitemap li.level-one a.index-page {
    width: 88%;
    border: 2px solid #000;
    padding: 0 0 5px;
    background: #b22222;
    border-radius: 10px;
    font-size: 1.2rem;
    font-weight: 700
}

ul.sitemap li.level-two a.school-page {
    width: 87%;
    background: #466273;
    border: 2px solid #000;
    padding: 0 0 4px;
    margin-top: 20px;
    margin-left: -25px;
    border-radius: 10px;
    font-size: 1.1rem;
    font-weight: 600
}

ul.sitemap li.level-one a.class-page:focus,
ul.sitemap li.level-one a.class-page:hover,
ul.sitemap li.level-one a.index-page:focus,
ul.sitemap li.level-one a.index-page:hover,
ul.sitemap li.level-two a.school-page:focus,
ul.sitemap li.level-two a.school-page:hover {
    opacity: 1
}

ul.sitemap li.level-two a.class-page {
    width: 88%;
    background: #fff;
    display: block;
    border: 1.5px solid #000;
    text-align: center;
    padding: 0 0 4px;
    margin-top: 20px;
    margin-left: -50px;
    color: #b22222;
    text-decoration: none;
    border-radius: 10px;
    font-size: 1.05rem;
    font-weight: 550;
    opacity: .85
}

div.panel.panel-default.class-page-sub-level {
    margin-left: 0;
    width: 80%
}

div.panel.panel-default.class-page-sub-level.membership-requirements {
    width: 100%;
    margin-bottom: 15px
}

div.panel.panel-default.class-page-sub-level li {
    background: #ececec;
    display: block;
    width: 100%;
    padding-left: 5px
}

ul.sub-list {
    margin-left: -88px
}

ul.sub-list li {
    margin-top: 10px;
    background: #e2e8ed;
    padding: 5px 5px 5px 10px;
    display: block;
    width: 80%;
    border-radius: 8px;
    color: #b22222
}

ul.sub-list li a {
    text-decoration: none;
    color: #b22222
}

ul.sub-list li:focus,
ul.sub-list li:hover {
    opacity: .85
}

ul.sub-list li ul {
    width: 80%
}

ul.sub-list li ul li {
    width: 130%;
    display: block;
    margin-left: -30px;
    margin-top: 0
}

ul.panel-sub-list {
    width: 100%!important
}

li.panel-sub-list {
    padding-left: 20px!important
}

li.panel-inner-sub-list {
    width: 140%!important
}

ul.panel-sub-list li a {
    color: #b22222;
    text-decoration: none
}

div.panel.panel-default.class-page-sub-level ol.membership-requirements {
    background: #fff;
    margin-top: -10px
}

div.panel.panel-default.class-page-sub-level ol.membership-requirements li {
    margin-top: 10px;
    padding: 5px;
    margin-left: -25px;
    background: #fff
}

div.panel.panel-default.class-page-sub-level.howto {
    width: 100%;
    margin-left: -20px
}

div.panel.panel-default.class-page-sub-level.contactus-questions {
    margin-left: 20px;
    width: 90%
}

ul.howto-question-answer {
    margin-left: -69px
}

ul.howto-question-answer li {
    margin-top: 10px;
    padding: 5px
}

span.sitemap-order {
    margin-right: 15px
}

span.directions {
    font-weight: 600;
    font-size: 1rem;
    display: block;
    margin-top: -12px;
    margin-bottom: 5px
}

#help-questions-hide,
#help-questions-reshow,
div#help-questions,
div.help-questions-navigation {
    display: none
}

ol.faqs-container {
    margin-left: -14px
}

ol.faqs-container li {
    margin-right: 10px
}

form.contactus-form {
    margin-top: 10px;
    margin-bottom: 15px
}

form.contactus-form div.form-navigation,
form.somethingelse-form,
input.contactus {
    margin-top: 15px
}

form.contactus-form div.form-navigation button.next {
    margin-right: 15px
}

form.contactus-form div.form-navigation button.previous {
    margin-left: 15px
}

form.contactus-form div.form-navigation input[type=submit] {
    margin-right: 15px;
    background: #fff;
    color: #b22222;
    font-weight: 600
}

form.somethingelse-form div.contactus-question label {
    margin-left: 20px
}

form.contactus-form div.form-navigation input[type=submit]:focus,
form.contactus-form div.form-navigation input[type=submit]:hover {
    opacity: .85
}

ul.paragraph-list {
    margin-left: -15px
}

ul.paragraph-list li {
    margin-top: 10px;
    margin-left: 10px;
    width: 90%!important
}

button.hide-lists,
button.show-lists {
    display: block;
    margin: 10px auto;
    background: #b22222;
    color: #fff
}

button.hide-lists:focus,
button.hide-lists:hover,
button.show-lists:focus,
button.show-lists:hover {
    opacity: .8;
    background: #b22222
}

#notebook-paper-box {
    width: 98%;
    max-width: 98%;
    height: auto;
    background: linear-gradient(to bottom, #fff 29px, #00b0d7 1px);
    margin: 10px auto;
    background-size: 100% 30px;
    position: relative;
    padding-top: 97px;
    padding-left: 28px;
    padding-right: 2px;
    overflow: hidden;
    border-radius: 1px;
    -webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, .2), 0 0 0 rgba(0, 0, 0, .2);
    -moz-box-shadow: 3px 3px 3px rgba(0, 0, 0, .2), 0 0 0 rgba(0, 0, 0, .2);
    -ms-box-shadow: 3px 3px 3px rgba(0, 0, 0, .2), 0 0 0 rgba(0, 0, 0, .2);
    -o-box-shadow: 3px 3px 3px rgba(0, 0, 0, .2), 0 0 0 rgba(0, 0, 0, .2);
    box-shadow: 3px 3px 3px rgba(0, 0, 0, .2), 0 0 0 rgba(0, 0, 0, .2)
}

#notebook-paper-box::before {
    content: '';
    display: block;
    position: absolute;
    z-index: 1;
    top: 0;
    height: 100%;
    width: 1px;
    background: #db4034
}

.step-tab,
div.contact-option-to-add,
input#contactus-submit {
    display: none
}

#notebook-paper-box::after {
    -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, .3);
    -moz-box-shadow: 0 0 2px rgba(0, 0, 0, .3);
    box-shadow: 0 0 2px rgba(0, 0, 0, .3);
    content: "";
    z-index: 3;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-top: 69px solid #fefef6;
    border-right: 69px solid transparent;
    border-bottom: 4px solid #d4d5c6;
    background: #f5f5f5
}

#notebook-paper-box header {
    height: auto;
    width: 100%;
    background: #fff;
    position: absolute;
    top: 0;
    left: 0
}

#notebook-paper-box header h4 {
    font-size: 23.5px;
    text-align: center;
    padding: 2px 0 0 18%;
    margin-bottom: 0;
    font-weight: 800;
    color: #b22222;
    opacity: .8
}

#notebook-paper-box #notebook-paper-content {
    font-size: 20px;
    line-height: 30px
}

#notebook-paper-box #notebook-paper-content ol li.faq-box {
    margin-bottom: 30px
}

#notebook-paper-box #notebook-paper-content ol.faqs-container {
    margin-left: -18px
}

#notebook-paper-box #notebook-paper-content ul.faq-answer-list li ul li,
#notebook-paper-box #notebook-paper-content ul.faq-answer-list li.faq-answer-text {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
}

#notebook-paper-box #notebook-paper-content ul.faq-answer-list li.faq-answer-text {
    opacity: .9
}

#notebook-paper-box #notebook-paper-content span.faq-title {
    font-weight: 600;
    opacity: 1
}

#notebook-paper-box #notebook-paper-content ul.faq-answer-list {
    font-weight: 500;
    margin-left: -20px;
    list-style: none
}

#notebook-paper-box #notebook-paper-content ul.faq-answer-list li {
    margin-left: -8px
}

#notebook-paper-box #notebook-paper-content ul.faq-answer-list li ul li {
    list-style: none;
    margin-left: -7px
}

#notebook-paper-box #notebook-paper-content p.notebook-paper-text {
    margin: 0 0 30px;
    padding: 0;
    background: 0 0;
    box-shadow: none;
    border-radius: 0
}

#notebook-paper-box #notebook-paper-content span.checkmark {
    opacity: .75;
    margin-left: -29px
}

#choose-topic-section {
    margin-top: 5px;
    background: #466273;
    padding: 10px;
    border-radius: 4px
}

#choose-topic-section h5 {
    color: #fff;
    font-weight: 600;
    margin-top: 4px
}

fieldset#contactus h5 {
    padding: 5px 0 2px 8px;
    font-weight: 600;
    font-style: italic
}

ol.faq-answer-list,
ul.faq-answer-list {
    margin-left: 15px
}

fieldset#contactus div.contactus-question {
    border-radius: 4px;
    margin-bottom: 10px
}

#contact-options span.custom-control-description {
    padding-left: 5px
}

div.contactus-question.darkblue {
    background: #466273;
    color: #fff;
    padding: 10px 0 5px 10px
}

div.contactus-question.lightblue {
    padding: 10px 0 5px 10px;
    background: #98b6c9;
    color: #000
}

div.contactus-question.text-area {
    max-width: 90%;
    width: 90%;
    background: #e6ddc2;
    margin: 10px auto;
    padding: 0 2px 5px;
    text-align: center;
    font-style: italic;
    font-weight: 600
}

button#add-contact-option {
    display: block;
    margin: 25px auto 0;
    background: #b22222
}

button#add-contact-option:focus,
button#add-contact-option:hover {
    box-shadow: 0 0 0 .2rem #e8e8e7
}

button#add-contact-option.btn-success {
    border: 2px solid #e8e8e7
}

div.contactus-textarea textarea {
    margin: 0 auto;
    width: 100%;
    min-height: 90px;
    font-size: 16px/1.5;
    font-family: 'Lato';
    padding: 6px 10px 6px 25px;
    color: #444;
    line-height: 20px;
    border: 1px solid #d2d2d2;
    background: #fff;
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#d9eaf3), color-stop(4%, #fff)) 0 4px;
    background: -webkit-linear-gradient(top, #d9eaf3 0, #fff 8%) 0 4px;
    background: -moz-linear-gradient(top, #d9eaf3 0, #fff 8%) 0 4px;
    background: -ms-linear-gradient(top, #d9eaf3 0, #fff 8%) 0 4px;
    background: -o-linear-gradient(top, #d9eaf3 0, #fff 8%) 0 4px;
    background: linear-gradient(top, #d9eaf3 0, #fff 8%) 0 4px;
    -webkit-background-size: 100% 20px;
    -moz-background-size: 100% 20px;
    -ms-background-size: 100% 20px;
    -o-background-size: 100% 20px;
    background-size: 100% 20px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .07);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .07);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .07)
}

.holes,
.notebook-paper-holes {
    background: #fafad2;
    border-radius: 50%;
    box-shadow: inset 0 0 2px 0 #888;
    position: absolute
}

.lines {
    position: absolute;
    top: 1%;
    bottom: 1%;
    border-left: 1px solid #ffaa9f;
    border-right: 1px solid #ffaa9f;
    width: 4px;
    float: left;
    height: 98%;
    margin-left: 20px
}

.holes {
    left: 18px;
    height: 14px;
    width: 14px
}

.hole-top {
    top: 8%
}

.hole-middle {
    top: 43%
}

.hole-bottom {
    bottom: 8%
}

.notebook-paper-holes {
    left: 5px;
    height: 18px;
    width: 18px
}

.notebook-paper-holes.hole-top {
    top: 3%
}

.notebook-paper-holes.hole-middle {
    top: 40%
}

.notebook-paper-holes.hole-bottom {
    bottom: 5%
}

.membersOnly {
    color: #1049cb;
    font-weight: 600
}

div.contactus-question {
    padding: 10px 0 5px 10px
}

div.contactus-question.darkblue:focus,
div.contactus-question.darkblue:hover,
div.contactus-question.lightblue:focus,
div.contactus-question.lightblue:hover {
    background: #fff8dc
}

div.contactus-question.darkblue:focus label,
div.contactus-question.darkblue:hover label,
div.contactus-question.lightblue:focus label,
div.contactus-question.lightblue:hover label {
    color: #b22222
}

input#contactus-submit {
    margin: 10px auto
}

#contactForm {
    background-color: #fff;
    margin: 100px auto;
    font-family: Raleway;
    padding: 40px;
    width: 100%;
    min-width: 100%
}

.step {
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border: none;
    border-radius: 50%;
    display: inline-block;
    opacity: .5
}

.step.active {
    opacity: 1
}

.step.finish {
    background-color: #4CAF50
}

#section1 {
    height: auto
}

prevBtn {
    background-color: #bbb
}

.form-section {
    padding-left: 15px;
    display: none
}

.form-section.current,
img.staff {
    display: inherit
}

.btn-default,
.btn-info {
    margin-top: 10px
}

div#event-delete-request-form div#remove-reunion-title h5 {
    font-weight: 600
}

div.rreport.contact-info div.event-delete-reason select#reunionRemovalOption {
    padding: 0 20px 0 2px;
    font-size: .85rem
}

ul.nav-tabs.aboutus li a.first,
ul.nav-tabs.helpinformation li a.first {
    border-left: none
}

ul.nav-tabs.aboutus li a.last,
ul.nav-tabs.helpinformation li a.last {
    border-right: none
}

ul.nav-tabs.aboutus li a.active,
ul.nav-tabs.helpinformation li a.active {
    border-bottom: 1.5px solid #bdb9b9;
    border-right: 1px solid #bdb9b9;
    border-left: 1px solid #bdb9b9;
    border-top: 1px solid #bdb9b9;
    box-shadow: none
}

div.tab-pane.aboutus {
    background: #fefef6;
    padding: 5px 8px;
    border: 1px solid #bdb9b9
}

div.tab-pane.aboutus:nth-child(even) {
    background: #e2e8ed
}

div.tab-pane.aboutus p {
    padding: 8px;
    background: #fffffc;
    border-radius: 10px 10px 0 0;
    box-shadow: 0 1px 2px 0 #c2c2bc
}

div.tab-pane.aboutus:nth-child(even) p {
    background: #eceff2;
    box-shadow: 0 1px 2px 0 #bbc0c4
}

ul.nav-tabs.aboutus li:focus,
ul.nav-tabs.aboutus li:hover,
ul.nav-tabs.helpinformation li:focus,
ul.nav-tabs.helpinformation li:hover {
    opacity: .8
}

ul.nav-tabs.aboutus li a:focus,
ul.nav-tabs.aboutus li a:hover {
    border-bottom: 1.5px solid #423718;
    outline: 0
}

div.aboutus h4 {
    font-size: 1.3rem;
    margin-bottom: 15px;
    padding: 8px 5px 0 15px;
    color: #000
}

div.aboutus h4.middle {
    margin-top: -5px
}

p.staff {
    margin: 10px
}

img.staff {
    margin: 5% auto
}

a.logo.aboutus {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 25px!important;
    text-shadow: 2px 2px 4px #182127, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000
}

div#choose-business-section,
div#choose-correction-section,
div#choose-need-section,
div#choose-privacy-section,
div#choose-problem-section,
div#choose-question-section,
div#choose-topic-section {
    text-align: center;
    margin-top: 10px
}

a.logo.aboutus:focus,
a.logo.aboutus:hover {
    opacity: .8;
    color: #607b8b!important
}

a.of-title {
    font-family: 'Poller One', cursive;
    color: #b22222;
    font-weight: 400;
    line-height: .9em
}

a.of-title:focus,
a.of-title:hover {
    text-decoration: none;
    opacity: .8
}

div.service-features {
    margin-bottom: 15px
}

div.service-features ul {
    margin-left: -10px
}

div.service-features ul li {
    list-style: outside;
    font-size: 1rem;
    margin: 10px 5px
}

form.rsvp-report fieldset#class-years {
    margin-bottom: -15px
}

div.yearbook-page-image {
    position: absolute;
    top: 50px;
    right: 0;
    height: 75px;
    width: 100%;
    max-width: 100%;
    background: url(http://johndhiggins.com/projects/old-friends/images/yearbook-page-form-header.jpg) center center no-repeat;
    background-size: 480px 140px;
    opacity: .2
}

.content {
    flex: 1 0 auto;
    -webkit-flex: 1 0 auto;
    min-height: 200px
}

.hidden {
    display: none;
    visibility: hidden
}

#main.container,
#main.display-container {
    margin: 30px auto;
    padding: 0;
    background: #fff8dc;
    border: 1px solid #7c6b3a;
    min-width: 280px
}

.jumbotron {
    margin-bottom: 10px
}

.jumbotron .container h1,
.jumbotron .display-container h1 {
    margin-bottom: 0;
    font-size: 3.5rem;
    color: #607b8b;
    font-family: "Yanone Kaffeesatz", arial, sans-serif;
    font-weight: 900
}

.jumbotron .container h1.rreport {
    font-size: 3.3rem
}

.jumbotron .container h2.rreport {
    font-size: 2.4rem
}

.jumbotron .container h3.rreport {
    font-size: 2.2rem
}

.jumbotron .container h4.rreport {
    font-size: 2rem
}

.jumbotron .container h2,
.jumbotron .display-container h2 {
    font-size: 1.5rem;
    font-family: "Poller One", sans-serif;
    color: #de5454;
    font-weight: 800;
    margin: 0;
    -webkit-text-stroke: 0.1px #000;
    /*text-shadow: 3px 4px 6px #888, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000*/
    text-shadow: 1px 2px 3px #888
}

.jumbotron .container h3,
.jumbotron .container h4,
.jumbotron .display-container h3,
.jumbotron .display-container h4 {
    font-family: Lato, sans-serif;
    margin: 0;
    color: brown
}

.jumbotron .container h3,
.jumbotron .display-container h3 {
    font-size: 1.5em;
    font-weight: 600
}

.jumbotron .container h4,
.jumbotron .display-container h4 {
    font-size: 1.3em;
    font-weight: 800
}

form#bootstrap-override .row .col-3,
form#bootstrap-override .row .col-4,
form#rings .row .col-3,
form#rings .row .col-4,
form#rsvp .row .col-3,
form#rsvp .row .col-4 {
    text-align: right;
    font-family: "Yanone Kaffeesatz", sans-serif;
    font-size: 1.2em
}

input.form-control.here {
    font-weight: 700;
    font-style: bold
}

form#rings .row div#form-reset {
    margin: 2px auto
}

form#bootstrap-override,
form#contactus,
form#rings,
form#rsvp {
    width: 95%;
    max-width: 95%;
    margin: 0 auto 12px;
    background: #DDD1AD;
    border: 1px solid #000;
    box-shadow: inset 0 0 4px #564b20
}

button.form-reset {
    padding: 0 25px
}

.form-control::placeholder {
    font-weight: 500
}

form#bootstrap-override,
form#rings,
form#rsvp {
    padding: 5px
}

form#contactus {
    padding: 10px
}

form#bootstrap-override .form-check,
form#rings .form-check,
form#rsvp .form-check {
    display: inline
}

form#bootstrap-override .row,
form#rings .row,
form#rsvp .row {
    margin-right: 0;
    margin-left: 0
}

form#bootstrap-override .row .col-9,
form#rings .row .col-9,
form#rsvp .row .col-9 {
    max-width: 55%;
    margin: 0 5px 0 10px
}

form#bootstrap-override .row #ringtype.col-9,
form#rings .row #ringtype.col-9,
form#rsvp .row #ringtype.col-9 {
    padding: 0;
    margin-left: 23px
}

body.has-nav .has-search .form-control-feedback {
    width: 1.25rem;
    height: 1.25rem;
    line-height: 2.375rem;
    bottom: 6%;
    margin-left: 10px
}

div.ring-display-container {
    background: #6f6440;
    color: #000;
    box-shadow: inset 0 0 10px #000
}

div.ring-display-container table {
    background: #FFF8DC;
    border: 5px solid #ada07b;
    border-collapse: inherit;
    box-shadow: 0 0 10px 5px #645a32;
    margin-top: 10px
}

div.ring-display-container table td {
    padding: 1.8rem
}

div.ring-display-container table td strong {
    border: 2px solid #d5d1c2;
    border-radius: 4px;
    padding: 5px;
    font-size: 1.5rem;
    box-shadow: 0 0 14px 2.5px #645a32
}

div.ring-display-container table td img {
    border: 1px solid #000;
    width: 134px
}

div.ring-display-container table hr {
    display: none
}

div.ring-display-container button#claimRingBtn {
    background: #fcefbe;
    color: #000;
    font-weight: 600;
    font-size: 1.35rem
}

div.ring-display-container button#claimRingBtn:focus,
div.ring-display-container button#claimRingBtn:hover {
    background: #ded3a8;
    font-weight: 700
}

form#bootstrap-override.yearbook-pages label.yearbook-page-instructions,
form#bootstrap-override.yearbook-pages label.yearbook-page-number {
    margin-top: 4px
}

input#yearbook-page-number {
    height: 40px!important
}

input#yearbook-page-number::-ms-clear {
    display: none
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

input[type=number] {
    -moz-appearance: textfield
}

.quantity-button:focus,
.quantity-button:hover {
    background: #fff8dc;
    border: 1px solid #ffc107
}

.quantity input {
    width: 90%;
    height: auto;
    float: left;
    display: block;
    padding: 0 0 0 10px;
    margin: 0
}

.quantity-nav {
    float: left;
    position: relative;
    height: 100%
}

.quantity-button {
    position: relative;
    cursor: pointer;
    width: 34px;
    text-align: center;
    color: #000;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none
}

.quantity-button.quantity-up {
    position: absolute;
    font-size: 15px;
    font-weight: 700;
    top: 0
}

.quantity-button.quantity-down {
    position: absolute;
    font-size: 15px;
    font-weight: 700;
    bottom: 1px;
    height: 50%
}

textarea#yearbook-page-instructions {
    height: 40px
}

ul.yearbook-page-alert li {
    text-align: left;
    line-height: 1.6
}

form#bootstrap-override .row .col-4,
form#rings .row .col-4,
form#rsvp .row .col-4 {
    color: brown;
    font-weight: 400
}

form#bootstrap-override .row .col-form-label,
form#rings .row .col-form-label,
form#rsvp .row .col-form-label {
    padding-top: 5px
}

form#bootstrap-override.rsvp-report .row .col-form-label {
    padding-top: 0
}

form#bootstrap-override .row .col-3,
form#rings .row .col-3,
form#rsvp .row .col-3 {
    max-width: 40%;
    margin: 0 5px 0 10px;
    color: #00f;
    font-weight: 500
}

li.nav-item.form a,
span.buttonText {
    font-weight: 600
}

form#bootstrap-override .col-form-label,
form#rings .col-form-label,
form#rsvp .col-form-label {
    padding: 0
}

.nav-pills.form .nav-link.active {
    background: #b2a682;
    margin: 5px
}

li.nav-item.form {
    margin: 0 auto
}

.nav-pills.form .nav-link.active:focus,
.nav-pills.form .nav-link.active:hover {
    background: #8c7f58
}

form#bootstrap-override input[value=Submit],
form#rings input[value=Submit],
form#rsvp input[value=Submit] {
    padding-bottom: 40px;
    height: 28px
}
/*
form#bootstrap-override.logs input {
    height: 100%!important
}*/

form#bootstrap-override.logs input:not([type="submit"]):not([type="button"]):not([type="reset"]) {
  height: 100% !important;
}


div.bootstrap-filestyle {
    transform: rotate(180deg);
    transform: scaleX(-1)
}

div.bootstrap-filestyle input.form-control {
    -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
    -moz-transform: matrix(-1, 0, 0, 1, 0, 0);
    -o-transform: matrix(-1, 0, 0, 1, 0, 0);
    transform: matrix(-1, 0, 0, 1, 0, 0)
}

div.bootstrap-filestyle label[for=file]:focus,
div.bootstrap-filestyle label[for=file]:hover {
    background: brown
}

label[for=file] {
    background: #8d1f1f
}

span.buttonText {
    display: table;
    margin-top: -6px;
    -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
    -moz-transform: matrix(-1, 0, 0, 1, 0, 0);
    -o-transform: matrix(-1, 0, 0, 1, 0, 0);
    transform: matrix(-1, 0, 0, 1, 0, 0)
}

p.help-block {
    margin: 0 auto;
    font-size: .85rem;
    text-align: center;
    font-weight: 500
}

.custom-select,
.form-control {
    width: 90%;
    padding: 0 0 0 10px
}

div#first,
div.ring-type,
fieldset.first-row {
    margin-bottom: 0
}

.form-group {
    margin-bottom: .5rem
}

.final-row {
    margin-bottom: -10px
}

.custom-control-description {
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-size: 1.2em
}

.form-control {
    border: 1.5px solid #ffc107
}

.form-control:hover {
    border-color: #ffc107;
    box-shadow: 0 3px 10px 0 #e6c667, 0 2px 8px 0 #e4be4f
}

.shadow-effect {
    position: relative
}

.custom-select {
    background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23a52a2a' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") right .75rem center no-repeat #fff;
    background-size: 10px 12px
}

.custom-select:focus,
.custom-select:hover {
    border: 2px solid #ffc107
}

.custom-control:hover .custom-control-description {
    color: #1a8e00;
    font-style: bolder
}

.btn-warning {
    border: 1px solid #d62929;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px
}

.btn-choose {
    background: brown;
    color: #fff;
    font-weight: 500
}

.alert-heading,
.btn-reset {
    font-weight: 600
}

.btn-reset {
    color: brown
}

.btn-primary {
    width: 100%;
    max-width: 100%;
    background: #73683e;
    background: -webkit-gradient(linear, left top, left bottom, from(#fff8dc), to(#73683e));
    background: -webkit-linear-gradient(top, #fff8dc, #73683e);
    background: -moz-linear-gradient(top, #fff8dc, #73683e);
    background: -ms-linear-gradient(top, #fff8dc, #73683e);
    background: -o-linear-gradient(top, #fff8dc, #73683e);
    padding: 0 20px;
    -webkit-border-radius: 34px;
    -moz-border-radius: 34px;
    border: var(--color-btn-border-forms);
    border: 1.5px solid #ffc107;
    border-radius: 34px;
    -moz-box-shadow: 1px 3px 10px 1px #7c6b3a;
    -webkit-box-shadow: 1px 3px 10px 1px #7c6b3a;
    box-shadow: 1px 3px 10px 1px #7c6b3a;
    text-shadow: rgba(0, 0, 0, .4) 0 1px 0;
    color: brown;
    font-size: 30px;
    font-family: 'Yanone Kaffeesatz', Serif;
    text-decoration: none;
    vertical-align: middle
}

.btn-primary:focus,
.btn-primary:hover {
    border: var(--color-hover-btn-border-forms);
    border: 1.5px solid #b3a776;
    background: #b3a776;
    color: #eee
}

.btn-primary:active {
    border-top-color: #b3a776;
    background: #b3a776
}

.btn-choose:hover {
    background: #8d1f1f;
    font-style: bolder
}

.custom-control-input:checked~.custom-control-indicator {
    background-color: brown
}

div.alert {
    margin-bottom: 0;
    padding: .3rem;
    line-height: 1.3
}

.alert-success {
    text-align: center;
    border-top: 1px solid #000;
    border-right: 0;
    border-bottom: 1px solid #000;
    border-left: 0;
    border-radius: 0
}

.shadow-effect:after,
.shadow-effect:before {
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 15px;
    left: 10px;
    width: 50%;
    top: 80%;
    max-width: 500px;
    background: #343434;
    -webkit-box-shadow: 0 15px 10px #343434;
    -moz-box-shadow: 0 15px 10px #343434;
    box-shadow: 0 15px 10px #343434;
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg)
}

.shadow-effect.help-info-page::after,
.shadow-effect.help-info-page::before {
    top: 90%
}

.shadow-effect:after {
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
    right: 15px;
    left: auto
}

.input-group {
    margin: 0 auto;
    width: 90%;
    max-width: 90%;
    overflow: hidden
}

.hidden-accessible {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px
}

div.has-search {
    margin-top: 10px;
    text-align: center
}

div.has-search div.search-box {
    display: inline-block;
    margin: 0 auto
}

div.search-box input {
    min-width: 135px
}

.has-search .form-control {
    padding-left: 2.375rem
}

.has-search .form-control-feedback {
    position: absolute;
    z-index: 2;
    display: block;
    width: 1.2rem;
    height: 1.3rem;
    line-height: 2.375rem;
    text-align: center;
    pointer-events: none;
    color: #aaa;
    margin-left: 5px;
    top: 13%
}

div#rreport-event-container {
    min-width: 250px;
    width: 95%;
    border-radius: 10px;
    border: 2px solid #607b8b;
    margin: 10px auto;
    padding: 10px 20px 5px;
    background: #3f4f69
}

div#rreport-event.container.rreport-upper-content {
    width: 100%;
    max-width: 100%;
    word-wrap: break-word
}

div#rreport-event.container.rreport-upper-content div.row {
    padding: 5px 0;
    margin-left: -25px;
    margin-right: -25px;
    margin-bottom: 5px;
    background: #fffefb;
    border-bottom: 1px solid #607b8b;
    border-radius: 10px
}

div#rreport-event.container.rreport-upper-content div.col-4 {
    word-wrap: normal;
    font-weight: 600
}

div#rreport-event.container.rreport-upper-content div.col-12 {
    word-wrap: normal;
    font-weight: 600;
    text-align: center;
    display: none;
    visibility: hidden
}

div#rreport-event.container.rreport-upper-content div.col {
    word-wrap: normal;
    line-height: 1.6;
    padding: 0 5px;
    color: #b22222;
    font-weight: 600;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px
}

button.rreport-event {
    display: block;
    font-weight: 600;
    margin: 15px auto 5px;
    border-radius: 20px
}

button#update-event-button {
    background: #fff8dc;
    color: #000
}

button#update-event-button:focus,
button#update-event-button:hover {
    opacity: .8!important
}

button#add-event-button {
    background: #b2a682;
    color: #fff
}

button#add-event-button:focus,
button#add-event-button:hover {
    opacity: .8
}

div.rreport-container,
div.rsvp-container {
    padding: 0 2px 10px;
    margin-top: 10px
}

div.rsvp-container p {
    font-size: 14pt;
    color: #b22222
}

div.rsvp-container button.btn-info {
    font-weight: 700;
    background: #0d0a3e;
    margin: 0 auto;
    display: inherit
}

div.rsvp-container button.btn-info:focus,
div.rsvp-container button.btn-info:hover {
    opacity: .85
}

div.rreport-container h5,
div.rsvp-container h5 {
    text-align: center;
    font-size: 1.2rem;
    color: #b22222
}

#selection-activated-oneyear label,
div.multiyear-section label {
    color: #fff!important
}

div#rsvp-intro p {
    text-align: justify;
    font-size: 1rem
}

div#rsvp-intro p.section-one {
    background: #f5eed6;
    padding: 3px;
    margin: 3px 2px 2px;
    border: 2.5px solid #796d3e;
    text-align: center
}

div#rsvp-intro p.section-two {
    background: #ebe4c9;
    padding: 4px;
    margin: 3px;
    border: 2px solid #796d3e;
    text-align: center
}

div#rsvp-intro p.section-three {
    background: #d8d0b1;
    padding: 5px;
    margin: 3px;
    text-align: center;
    border: 1.5px solid #796d3e
}

div#rsvp-intro p.section-one:focus,
div#rsvp-intro p.section-one:hover,
div#rsvp-intro p.section-three:focus,
div#rsvp-intro p.section-three:hover,
div#rsvp-intro p.section-two:focus,
div#rsvp-intro p.section-two:hover {
    opacity: .85;
    font-weight: 600
}

div.rsvp {
    margin: 0 auto 10px!important
}

form.rsvp h5,
form.rsvp-report h5 {
    text-align: left;
    margin: 0 5px 5px 25px
}

#selection-activated-earliestyears,
#selection-activated-oneyear,
input[name=firstNameHS],
input[name=firstName] {
    margin-bottom: 0
}

#event-start-date {
    margin: 0
}

#selection-activated-oneyear,
div.multiyear-section {
    background: #466273;
    border-radius: 4px
}

input[name=lastNameHS],
input[name=lastName],
label[for=lastNameHS],
label[for=lastName] {
    margin-top: -10px
}

div.current-name {
    background: #98b6c9;
    border-radius: 4px;
    padding: 5px;
    margin-bottom: 5px;
    border-top: 1px solid #000
}

div.submitted-contact-info {
    background: #466273;
    border-radius: 4px;
    padding: 5px;
    margin-top: 10px
}

.rreport-scheduled-inner-section {
    background: #c4b996;
    padding: 5px;
    border-radius: 4px;
    color: #000;
    margin-top: 5px;
    margin-bottom: 0
}

.rreport-scheduled-inner-section #dateknowledge {
    color: #b22222!important
}

div.submitted-contact-info {
    margin-bottom: 1.4rem;
    color: #fff
}

div#dateknowledge,
div.submitted-contact-info label {
    color: #fff!important
}

div#dateknowledge {
    padding-top: 5px
}

div.contact-info {
    background: #98b6c9;
    border-radius: 4px;
    padding: 5px
}

div.school-name {
    background: #466273;
    border-radius: 4px;
    padding: 5px
}

div.rsvp-contact-details {
    margin-top: 5px
}

div.school-name h5 {
    color: #fff;
    font-weight: 600
}

div.school-name label {
    color: #eee!important
}

form.rsvp div.details {
    background: #f4eacb;
    padding: 5px;
    border-bottom: 1px solid #000
}

div.yearbook {
    padding: 8px 2px 0
}

form.rsvp input[name=submit] {
    margin-bottom: -40px
}

label.auto-complete {
    font-size: .75rem;
    font-style: italic;
    margin: -15px 0 0
}

input#autocomplete {
    margin-right: 5px
}

.rreport-first-row {
    margin-top: 10px;
    background: #466273;
    border-radius: 4px;
    padding: 10px 5px
}

.rreport-first-row label {
    color: #fff!important
}

.rreport-contact-first-name {
    margin-bottom: 1rem
}

#reuniondates label[for=morethanoneday],
div#event-date {
    margin-bottom: 0
}

#reuniondates {
    background: #DDD1AD;
    border-radius: 4px;
    color: #000
}

.event-dates-section,
div#event-date {
    background: #466273;
    border-radius: 4px
}

#reuniondates div[data-original-title="One or more days?"] {
    color: #000!important
}

.event-dates-section label,
div#event-date label {
    color: #fff!important
}

div#event-date {
    margin-top: 15px
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .block {
        background-color: red
    }
}