@font-face {
    font-family: "San Francisco Thin";
    src: url("/fonts/san_francisco_thin.eot?#iefix") format("embedded-opentype"),
         url("/fonts/san_francisco_thin.woff") format("woff"),
         url("/fonts/san_francisco_thin.otf") format("opentype"),
         url("/fonts/san_francisco_thin.ttf") format('truetype'),
         url("/fonts/san_francisco_thin.svg") format("svg");
}
@font-face {
    font-family: "San Francisco Ultralight";
    src: url("/fonts/san_francisco_ultralight.eot?#iefix") format("embedded-opentype"),
         url("/fonts/san_francisco_ultralight.woff") format("woff"),
         url("/fonts/san_francisco_ultralight.otf") format("opentype"),
         url("/fonts/san_francisco_ultralight.ttf") format('truetype'),
         url("/fonts/san_francisco_ultralight.svg") format("svg");
}
@font-face {
    font-family: "San Francisco Regular";
    src: url("/fonts/san_francisco_regular.eot?#iefix") format("embedded-opentype"),
         url("/fonts/san_francisco_regular.woff") format("woff"),
         url("/fonts/san_francisco_regular.otf") format("opentype"),
         url("/fonts/san_francisco_regular.ttf") format('truetype'),
         url("/fonts/san_francisco_regular.svg") format("svg");
}
body{
    background-color: #101010;
    color: white;
    font-family: "San Francisco Regular";
}

.bluelink {
    text-decoration: underline !important;
    /*color: #0662ff;*/
    color: #01aded !important;
}
a:link, a:visited {
    text-decoration: none;
    color: white;
}
a:hover, a:active {
    text-decoration: underline;
    color:white;
}
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted white;
}

.tooltip .tooltiptext {
    visibility: hidden;
    background-color: #555;
    color: #fff;
    box-shadow: 0.7em 0.7em 0.5em #010101;
    /* text-align: center; */
    padding: 1em 1em;
    border-radius: .5em;
    position: absolute;
    z-index: 1;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

.you-scored {
    padding-top: 0.5em;
    font-size: 4em;
    font-family: "San Francisco Thin", Arial, sans-serif;
    opacity: 0;
}
.return-to-chapters {
    padding: 1em;
    text-align: center;
    margin: 2em;
    opacity: 0;
    visibility: hidden;
}
#passing {
    font-family: "San Francisco Thin", Arial, sans-serif;
    padding-bottom: 0.5em;
    text-align: center;
    font-size: 4em;
}
#score {
    font-size: 20em;
    text-align: center;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    text-shadow: 10px 6px #333;
    /* font-family: "San Francisco Thin", Arial, sans-serif; */
}
#score-message {
    font-family: "San Francisco Thin", Arial, sans-serif;
    font-size: 3em;
    text-align: center;
}
.grade-quiz-div {
    text-align: center;
    margin: 1em;
    padding: 1em;
}
.quiz-question-save-icon-div{
    display: inline-block;
    margin: 0 1em;
}
.save-icon {
    max-width: 1em;    
}
.semi-transparent-save-icon {
    opacity: 0.4;
    filter: alpha(opacity=40);
    max-width: 1em;
}
.quiz-title {
    text-align: center;
}
.answer-option-div {
    margin: 1em;
}
.answer-option-div > label {
    font-family: "San Francisco Regular", Arial, sans-serif;
    font-size: 0.9em;
}
.question-div {
    font-size: 1.5em;
    display: inline;
    font-family: "San Francisco Regular", Arial, sans-serif;
}
.quiz-q-and-a-div {
    background-color: #aaa;
    padding: 1.5em;
    margin: 0.75em;
    color: #000;
    border-radius: 1em;
    font-size: 1.5em;
}
.main-panel {
    width: 70em;
    margin: auto;
}
.code{
    font-family: "Lucida Console", Monaco, monospace;
}
.chapter-list-header {
    font-weight: normal;
    font-family: "San Francisco Thin", Arial, sans-serif;
    font-size: 2em;
    padding: 0.5em 0 0.5em 0;
}
.passed-quiz-title-subchapter {
    font-size: 3em;
    color: #171;
    font-family: "San Francisco Thin", Arial, sans-serif;
}
.passed-quiz-details {
    font-family: "San Francisco Regular", Arial, sans-serif;
    font-size: 1.5em;
    margin: 1em;
    padding: 0.4em;
    display: inline-block;
    color: #444;
}
.passed-quiz-retake-button {
    background-color: #3a3 !important;
}
.passed-quiz-subchapter {
    text-align: center;
    margin: 4em 0 4em 0;
    /* background-color: #a8caa8; */
    background-color: rgba(200, 255, 200, 0.6);    
    border-radius: 1em;
    padding: 2em 1em 0em 1em;
}
.quiz-subchapter {
    text-align: center;
    margin: 4em 0 4em 0;
    background-color: #a8a8a8;
    border-radius: 1em;
    padding: 7em 1em;
}
.quiz-title-subchapter {
    font-size: 3em;
}
.video-subchapter {
    margin: 4em 0 5em 0;
    text-align: center;
    background-color: rgba(5,5,5,0.3);
    border-radius: 1em;
    border: 1px solid #444;
    padding: 2em;
}
.video-name {
    font-family: "San Francisco Regular", Arial, sans-serif;
    font-size: 2em;
}
.video-name-completed {
    opacity: 0.4;
    filter: alpha(opacity=40);
    text-decoration: line-through;
}
.link-subchapter {
    text-align: center;
    margin: 4em 0 4em 0;
    background-color: rgba(5,5,5,0.3);
    border-radius: 1em;
    border: 1px solid #444;
    padding: 1.5em 1em;
}
.link-name {
    font-size: 3em;
 }

.video-player {
    text-align: center;
}
.video-player iframe {
    min-height: 360px;
    min-width: 640px;
}
.video-completed-message {
    font-family: "San Francisco Regular", Arial, sans-serif;
}
.side-navigation-bar {
    height: 100%;
    width: 17em;
    float: left;
    /* width: 24em; */
    display: block;
    /* position: fixed; */
    
}

.chapter-heading {
    text-align: center;
}
.chapter-main-image {
    max-width: 48em;
    padding: 0 1.5em;
}
.chapter-description {
    font-family: Arial, sans-serif;
    font-size: 1.4em;
    color: #eee;
}
.passing-score {
    text-align: center;
    font-family: "San Francisco Regular", Arial, sans-serif;
    font-size: 1em;
}
.passing-score-subchapter {
    font-family: "San Francisco Regular", Arial, sans-serif;
}
.subchapter-panel {
    width: 48em;
    display: inline-block;
    /* background-color: red; */
}
.my-acct-form-element {
    padding: 1em 1em 0 1em;
}
.my-acct-form-element > input[type=text] {
    margin-top: 0;
    margin-left: 0;
}
.my-acct-form-element > ul {
    padding-left: 0;
    margin-top: 0;
    margin-left: 0;
    font-family: "San Francisco Thin", Arial, sans-serif;
}
.my-acct-form-element li {
    font-size: 1.5em;
    list-style: none;
}
.my-acct-form-element button {
    font-size: 1.1em;
    margin: 3em 0;
}
ul.side-nav-element {
    list-style: none;
    padding: 0 0.5em;
}
ul.side-nav-element > li {
    margin: 0 0.5em 2em 0.5em;
    border-radius: 0.8em;
    background-color: #aaa;
    /* padding: 0 0 2em 0; */
    min-height: 10.75em;
    -webkit-transition: top ease 0.5s;
    transition: top ease 0.5s;
    position: relative;
    cursor: pointer;
    top: 0;
    /* left: 0; */
}

ul.side-nav-element > li:hover {
    box-shadow: 0 0.25em 1em #333;
    /* top: -0.166666em; */
    /* left: -0.25em; */
}

.navbar-chapter-thumb {
    max-width: 12em;
    border-radius: 0.25em;
}
.navbar-chapter-thumb-completed, .navbar-completed-chapter-title {
    opacity: 0.4;
    filter: alpha(opacity=40);
}
.navbar-chapter-title
{
    color: #000;
    font-size: 1.2em;
    font-family: "San Francisco Regular", Arial, sans-serif;
    text-decoration: none;
}
.side-navigation-panel {
    background-color: rgba(10, 10, 10, 0.3);
    color: #fff;
    text-align: center;
    margin: 1em;
    border-radius: 0.8em;
    border: 1px solid #555;
}
.navbar-chapter-completed {
    color: #0662ff;
}
.navbar-chapter-completed, .navbar-chapter-score {
    /* font-style: italic; */
    font-family: "San Francisco Regular", Arial, sans-serif;
    font-size: .71em;

}
.take-the-quiz-button {
    font-size: 1em;
    margin: 1em;
}
.tab {
    border: 0;
    color: white;
    background-color: #101010;
    padding: 0.5em 1.5em;
    font-size: 1.5em;
    font-family: "San Francisco Thin", Arial, sans-serif;
    border-radius: 1em 1em 0 0;
    cursor: pointer;
}
.tab-panel {
    background-color: rgba(40, 40, 40, 0.3);
    color: #fff;
    display: inline-block;
    width: 68em;
    padding: 1em;
    min-height: 20em;
}
.tab-panel:not(#chapters-tab-panel) {
    border-radius: 1em;
}
.badge-div {
    background-color: #dadada;
    border-radius: 1em;
    box-shadow: 0.5em 0.5em 1em;
    position: relative;
    margin: 1.25em;
    height: 6.5em;
    overflow: hidden;
}
.badge-plus-sign > a:link,
.badge-plus-sign > a:hover,
.badge-plus-sign > a:active,
.badge-plus-sign > a:visited {
    font-family: "San Francisco Thin", Arial, sans-serif;
    position: absolute;
    top: 0.4em;
    left: 0.4em;
    text-decoration: none;
    font-size: 3em;
    color: #222;
}
.badge-plus-sign > a:hover {
    /* text-shadow: 0.1em 0.1em 0.25em #333; */
}
.badge-description {
    padding: 1em;
    font-family: "San Francisco Regular", Arial, sans-serif;
    font-size: 1em;
}
img.badge-icon {
    max-height: 4.5em;
    padding: 1em;
    position: relative;
    left: 3em;
}
.no-badges-message {
    font-family: "San Francisco Thin", Arial, sans-serif;
    font-size: 2em;
}
.badge-title {
    display: inline-block;
    font-family: "San Francisco Thin", Arial, sans-serif;
    font-size: 1.5em;
    position: absolute;
    top: 1.62em;
    left: 6.4em;
}
#chapter-title {
    font-family: "San Francisco Regular", Arial, sans-serif;
    color: white;
}
#modal-window {
    z-index: 4;
    color: #eee;
    /* padding: 2em; */
    width: 40em;
    height: 20em;
    position: relative;
    opacity: 1;
    filter: alpha(opacity=100);
    display: block;
    top: 4em;
    background-color: #252525;
    border-radius: 2em;
}
#modal-title {
    font-size: 2.5em;
}
#modal-title-bar {
    /* #0662ff */
    color: #fff;
    background-color: #0662ff;
    padding: 1em 0 0.5em 0;
    text-align: center;
    border-radius: 2em 2em 0 0;
    font-family: "San Francisco Thin", Arial, sans-serif;
}
#modal-icon-div {
    position: absolute;
    top: 35%;
    left: 3em;
}
#modal-icon {
    margin: 1em;
    height: 5em;
}
#modal-icon-div {
    float:left;
    position: absolute;
}
#modal-message {
    font-family: "San Francisco Regular", Arial, sans-serif;
    position: absolute;
    right: 0;
    font-size: 1.2em;
    width: 65%;
    margin: 1em;
}
#modal-buttons {
    text-align: center;
    position: absolute;
    width: 100%;
    bottom: 1.5em;
}
#chapters-tab-panel {
    border-radius: 0 1em 1em 1em;
}
.selected-tab {
    background-color: rgba(40,40,40, 0.3);
    color: white;
}
.form-feedback {
    display: inline-block;
    margin-left: 1em;
    font-family: "San Francisco Thin", Arial, sans-serif;
    color: #f00;
    font-weight: bold;
}
.modal-background {
    z-index: 3;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    transition: 0.75s display;
    visibility: hidden;
    display: block;
}
@keyframes fadeInMessage {
    from {
	opacity: 0;
    }
    to {
	opacity: 1;
    }
}
@keyframes modalBgFadeIn {
    from {
	visibility: visible;
	background-color: rgba(0,0,0,0);
    }
    to {
	background-color: rgba(0,0,0,0.7);
	visibility: visible;
    }
}
@keyframes modalBgFadeOut {
    0% {
	visibility: visible;
	background-color: rgba(0,0,0,0.7);	
    }
    99% {
	visibility: visible;
	background-color: rgba(0,0,0,0);
    }
    100% {
	visibility: hidden;
    }
}
@keyframes modalSwoopIn {
    from {
	top: -30em;
	bottom: 0;
	left: 0;
	right: 0;
	position: absolute;
	margin: auto;
	opacity: 0;
	/* background-color: rgba(255,0,0,0); */
    }
    to {
	/* background-color: rgba(255,0,0,1); */
	opacity: 1;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	position: absolute;
	margin: auto;
    }
}
@keyframes xToPlus {
    from {
	transform: rotate(135deg);
	top: 0.5em;
	left: 0.45em;
    }
    to {
	transform: rotate(0deg);
	top: 0.4em;
	left: 0.4em;
    }
}
@keyframes plusToX {
    from {
	transform: rotate(0deg);
    }
    to {
	transform: rotate(135deg);
	top: 0.5em;
	left: 0.45em;
    }
}

@keyframes collapseBadge {
    from {
	height: 13em;
    }
    to {
	height: 6.5em;
    }
}

@keyframes expandBadge {
    from {
	height: 6.5em;
    }
    to {
	height: 13em;
    }
}


@keyframes modalSwoopOut {
    0% {
	/* #0662ff */
	/* background-color: rgba(255,0,0,1); */
	opacity: 1;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	position: absolute;
	margin: auto;
    }
    99% {
	opacity: 0;
	top: -30em;
	bottom: 0;
	left: 0;
	right: 0;
	position: absolute;
	margin: auto;
	/* background-color: rgba(255,0,0,0); */
    }
    100% {
	visibility: hidden;
    }
}

h1 {
    font-family: "San Francisco Thin", Arial, sans-serif;
    /* color: #333; */
    font-weight: normal;
    font-size: 3em;
}

label, lh {
    font-family: "San Francisco Thin", Arial, sans-serif;
    font-size: 1.2em;
}
input[type=text], input[type=password], select {
    border-radius: 0.5em;
    border: 1px solid #ccc;
    display: inline-block;
    margin: 8px 0;
    padding: 12px 10px;
}

input[type=submit], button:not(.tab) {
    /* background-color: #0662ff; */
    background-color: #01aded;    
    color: white;
    cursor: pointer;
    border: none;
    padding: 0.5em 5em;
    font-size: 1.33333em;
    border-radius: 0.25em;
    -webkit-transition: background-color 0.75s;
    transition: background-color 0.75s;
}

input[type=submit]:disabled {
    background-color: #ccc;
    cursor: default;
}
button:disabled {
    background-color: #777;
    cursor: default;
}
fieldset {
    margin: 1em;
    border-radius: 0.5em;
    border-style: solid;
    border-color: #999;
    border-width: 1px;
    padding-inline: 0.65em;
}
legend {
    font-family: "San Francisco Thin", Arial, sans-serif;
    font-size: 1.3em;
}

#top-right {
    position: absolute;
    top: 1em;
    left: 1em;
    vertical-align: middle;
}
.top-right-icon {
    vertical-align: middle;
}
.top-right-text {
    vertical-align: middle;
    font-size: 1.3em;
}    


/* Hide HTML5 Up and Down arrows. */
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}