html, body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1 0 auto;
}
.footer {
  flex-shrink: 0;
  width: 100%;
  color: white;
  text-align: center;
  padding: 20px;
  background-color: #2e212c;
}

.vertical-right-aligned {
    transform: rotate(-90deg);
    transform-origin: 100% 100%;
    position: fixed;
    right: 0;
    top: 50%;
    z-index: 100;
}

.jumbotron {
    background-color: #fee2b3;
    border-radius: 0px;
}

.navbar-link {
    color: #2e212c;
}

.btn-outline-success {
	color: #562349;
	border-color: #562349;
}

.btn-outline-success:hover {
	background-color: #562349;
	border-color: #562349;
}

* {
  box-sizing: border-box;
}

.d-ruby {
    display: ruby !important;
}

.mb-6 {
    margin-bottom: 3.5rem !important;
}
.mb-7 {
    margin-bottom: 4rem !important;
}
.mb-8 {
    margin-bottom: 4.5rem !important;
}
.mb-9 {
    margin-bottom: 5rem !important;
}
.mb-10 {
    margin-bottom: 5.5rem !important;
}
.mb-11 {
    margin-bottom: 6rem !important;
}
.mb-12 {
    margin-bottom: 6.5rem !important;
}
.mb-13 {
    margin-bottom: 7.5rem !important;
}

.mr-6 {
    margin-right: 3.5rem !important;
}
.mr-7 {
    margin-right: 4rem !important;
}
.mr-8 {
    margin-right: 4.5rem !important;
}
.mr-9 {
    margin-right: 5rem !important;
}
.mr-10 {
    margin-right: 5.5rem !important;
}
.mr-11 {
    margin-right: 6rem !important;
}
.mr-12 {
    margin-right: 6.5rem !important;
}
.mr-13 {
    margin-right: 7.5rem !important;
}

.mt-6 {
    margin-top: 3.5rem !important;
}
.mt-7 {
    margin-top: 4rem !important;
}
.mt-8 {
    margin-top: 4.5rem !important;
}
.mt-9 {
    margin-top: 5rem !important;
}
.mt-10 {
    margin-top: 5.5rem !important;
}
.mt-11 {
    margin-top: 6rem !important;
}
.mt-12 {
    margin-top: 6.5rem !important;
}
.mt-13 {
    margin-top: 7.5rem !important;
}

.ml-6 {
    margin-left: 3.5rem !important;
}
.ml-7 {
    margin-left: 4rem !important;
}
.ml-8 {
    margin-left: 4.5rem !important;
}
.ml-9 {
    margin-left: 5rem !important;
}
.ml-10 {
    margin-left: 5.5rem !important;
}
.ml-11 {
    margin-left: 6rem !important;
}
.ml-12 {
    margin-left: 6.5rem !important;
}
.ml-13 {
    margin-left: 7.5rem !important;
}

.bookmark-style {
    background-color: white;
    color: brown;
    padding: 0px;
    border: 0px;
    margin: 2px;
}

.nover-y {
    overflow-y: hidden;
}

.w-80 {
    width: 80%;
}

.w-85 {
    width: 85%;
}

.w-90 {
    width: 90%;
}

.w-95 {
    width: 95%;
}

.bg-trans {
    background-color: transparent !important;
}

.bg-inherit {
    background-color: inherit !important;
}

.bg-initial {
    background-color: initial !important;
}

.bg-none {
    background: none !important;
}

.checked {
    color: #ffa500;
}

/* feedback popup */
#feedback-welcome {
	top: 10%;
	left: 10%;
	max-width: 80%;
	display: block;
	position: fixed;
	overflow-y: auto;
	max-height: 90%;
}

@media (max-width: 576px) {
	#feedback-highlighter {
		top: 5%;
		left: 5%;
		max-width: 50%;
		font-size: 10px;
		padding: 10px !important;
	}
}

@media (min-width: 576px) {
	#feedback-highlighter {
		top: 10%;
		left: 5%;
		width: 300px;
		max-width: 50%;
	}
}

#feedback-highlighter {
	display: none;
	max-height: 50%;
	position: fixed;
	overflow: auto;
}

@media (max-width: 576px) {
	#feedback-overview {
		top: 0 !important;
		left: 0 !important;
		width: 100% !important;
		max-width: 100%;
		max-height: 100%;
		overflow: auto;
	}
}

#feedback-overview {
	display: none;
	top: 10%;
	left: 10%;
	position: fixed;
	width: 840px !important;
	height: auto;
}

#feedback-btn { /* btn-sm */
    padding: .25rem .5rem;
    font-size: .875rem;
    line-height: 1.5;
    border-radius: .2rem;
}

.btn-default {
    background-color: #fee2b3 !important;
}

button.usefulReview:hover {
  color: #046bbb !important;
}
i.fa-flag:hover {
  color: #b81537 !important;
}