/*************************  VIDEOJS  *************************/
.video-js { width: 100%; height: 100%; position: absolute; left: 0; top: 0; cursor: pointer }
.video-js .vjs-control-bar { z-index: 10000000 }
.video-js .vjs-big-play-button { z-index: 10000000}
.vjs-ended .vjs-poster { display: block }
.vjs-caption-settings select { color: #222 }
/*.vjs-has-started .vjs-big-play-button { display: block }
.vjs-playing .vjs-big-play-button { display: none }
.vjs-ended .vjs-control-bar { display: none }*/
/*.vjs-ended .vjs-poster { opacity: .2 }*/
.vjs-remaining-time { display: none }
.hide-controls::-webkit-media-controls { display: none }


/*************************  MODULES  *************************/
.player-and-challenge-prompt-wrapper { max-width: 800px; margin: 0 auto }
.player-and-challenge-prompt { width: 100%; height: auto; padding-top: 56.25%; position: relative }
.challenge-prompt-layer { position: absolute; z-index: 10; left: 0px; top: 0px; width: 100%; text-align: center; right: 0px; bottom: 0px }
.challenge-prompt-inner { display: table; width: 100%; height: 100% }
.challenge-prompt-buttons { display: table-cell; vertical-align: middle }
.challenge-prompt-buttons-title { color: #000; margin-bottom: .5em; font-size: 14pt; font-weight: thin; }
.challenge-prompt-buttons-text, .challenge-prompt-buttons-text a { font-size: 2.8rem }
.challenge-prompt-buttons-text { color: #000 }
.challenge-prompt-button { background: #fff; padding: .5em 1em; line-height: 1; display: inline-block;
  text-decoration: none; font-size: 1.6rem; color: #222; border-radius: .05em }
.challenge-prompt-button-side.accepted { background: #999 !important; color: #fff; opacity: 1 !important; cursor: default !important;
  border: 1px solid #999 !important }


/*************************  MISC  *************************/
.block { display: block }
.hidden { display: none }


/*************************  STATES  *************************/
.is-hidden { display: none !important }
a[disabled] { pointer-events: none }



/*************************  SIMON ************************/
html, body {
    height: 100%;
}

body {
    font-weight: 100;
    font-family: 'brandon-grotesque';
}

h2 {
    font-family: 'brandon-grotesque';
    font-weight: bold;
    font-size: 40px;
}

p {
    font-family: 'clarendon-urw';
    font-style: oblique;
}

a {
    font-family: 'brandon-grotesque';
    font-weight: thin;
    font-size: 12px;
}

header {
  padding: 1.5em 0;
}

.panel, .panel-default, .panel-heading, .panel-title {
  background-color: white;
}
.panel-title {
    font-family: 'brandon-grotesque';
    font-size: 18px;
}

.panel-body {
    font-family: 'clarendon-urw';
    font-size: 14px;
    font-style: italic;
}

.btn {
    border: 1 none;
    border-color: #000;
    border-radius: 0;
    background-color: #000;
    font-family: 'brandon-grotesque';
    font-weight: thin;
    font-size: 12px;
}

.btn:hover, .btn:active:focus {
    border: 1 none;
    border-color: #000;
    border-radius: 0;
    background-color: #fff;
    color: #000;
}

.progress-indicator>li.completed .bubble, .progress-indicator>li.completed .bubble:after, .progress-indicator>li.completed .bubble:before {
    background-color: {{ $lesson->bgcolor }};
    border-color: {{ $lesson->bgcolor }};
}


.progress-indicator>li .bubble {
    border-radius: 1000px;
    width: 20px;
    height: 20px;
    background-color: #fff;
    display: block;
    margin: 0 auto .5em;
    border-bottom: 0px solid #fff;
}

.acronym {
    text-align: center;
    font-style: normal;
    font-size: 18pt;
    font-family: 'brandon-grotesque';
    color: #000;
    display: inline-block;
    margin: 0;
}

.fa, .fa-check-circle-o {
    font-size: 18pt;
    color: #000;
}

 .progress-indicator.custom-complex {
        padding-top: 15px;
        border: none;
        border-radius: 0px;
        margin: 0px;
        width: 75%;
        display: inline-flex;
    }

.progress-indicator.custom-complex > li .bubble {
    height: 12px;
    width: 100%;
    border-radius: 0px;
    border-bottom: none;
}

.progress-indicator.custom-complex > li .bubble:before,
.progress-indicator.custom-complex > li .bubble:after {
    display: none;
}