#Body { background: #e7e7e7; }
.calc-box { background: #444; color: #fff; font-size: .8em;margin:0 0 20px;padding:30px 40px; }
.calc-box select, .calc-box input { border: 0; outline: 0 }
.calc-box select { position: absolute; right: 16px; padding: 0!important; font-size: 1.2em; align-self: center }
.entry { width: 100%; border: 0; background-color: #fff; padding: 2px 60px 2px 16px; margin: 0; font-weight: 700; font-size: 2em }
.result { width: 100%; border: 0; background-color: transparent; padding: 2px 0; margin: 0; font-size: 4em; cursor: default }
.Magenta { color: #f4179f }
.Yellow { color: #f8ed1f }
.Blue { color: #08bde4 }
.Orange { color: #f26859 }
.tight { width: 80% }
.calculateButton { padding: .5em; transition: background-color .5s ease; background-color: #f26859; border-radius: 50px; font-size: 1.4em; font-weight: 700; text-transform: uppercase; text-align: center; color: #fff; width: 100%; cursor: pointer }
.calculateButton:hover { background-color: #ef7f72 }
.sectionButton { width: 100%; margin: 10px 0 12px; padding: 10px 0 24px; border-bottom: 5px #fff dotted }
#references { margin-left: 20px; color: #666 }
#notes { margin-left: 20px; color: #666 }
#refsnotes { background-color: transparent; padding: 12px 12px 12px 0 }
ul.reference { margin: 6px 0 2px; padding: 4px 0 }
ul.reference li { margin: 0 20px 4px 0; padding: 0; font-size: .8em }
ul.reference li.bullet { list-style-type: disc!important; margin-left: 16px }
#weight, #time, #days { background: #fff; margin: 8px 0 12px; padding: 3px 0; color: #000; display: flex; }
#days { max-width: 80px }
#Time { max-width: 90px }
.reference-link { float: right; text-transform: uppercase; font-size: .75em; position: relative; bottom: 4px; right: 0 }
.calc-box h4,.calc-box h1 { text-align: center; font: 2em/1em sofia-pro-condensed!important; color: #fff; text-transform: uppercase; font-weight: 800!important; margin-bottom: 15px }
div.lockup h3,div.lockup h1 { font: 2.5em/1em sofia-pro-condensed!important; color: #999; text-transform: uppercase; font-weight: 800!important; font-style: italic!important; margin-bottom: 5px; }
div.lockup p { font-size: .9em; line-height: 1.2em; color: #000; font-weight: 300!important; }
div.lockup { text-align: center; margin-bottom: 20px }

@media(min-width: 768px) {
#weight, #time { margin: 8px 0 0 }
#days { margin: 8px auto 0 }
#Time { max-width: inherit }
.calculateButton { width: 10em }
}

@media(min-width: 992px) {
div.lockup { text-align: left }
div.lockup h3 { margin-bottom: 10px }
div.lockup p { font-size: 1em; line-height: 1.4em; max-width: 80% }
}

@media(min-width: 1200px) {
div.lockup h3 { font-size: 2.5em !important }
}

@media(max-width: 767px) {
span.change-align { display: block; text-align: left !important }
a.reference-link { display: block; float: none; left: 0 }
#collapseRef div.panel { width: auto!important }
}