/* ------------------------------------------------------------ */
/*             BRIGHTCOVE INTERACTIVITY CUSTOM CSS              */
/* ------------------------------------------------------------ */
.hapyak-contents-column1.expanded {
  background: rgba(255, 255, 255, 0);
}

.popcorn-contents.top-left.active.hapyak-contents-legacy.visible.expanded {
  background: none;
  border-radius: 0;
}

.popcorn-contents.top-left.active.hapyak-contents-legacy.visible.expanded .popcorn-contents-inner {
  border-radius: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.4);
}

.popcorn-contents.top-left.active.hapyak-contents-legacy.visible.expanded .popcorn-contents-close {
  background-color: rgba(255, 255, 255, 0);
}

.popcorn-contents.top-left.active.hapyak-contents-legacy.visible.expanded .popcorn-contents-close span {
  background-color: rgba(255, 255, 255, 0);
  font-size: 50px;
}

.popcorn-contents.top-left.active.hapyak-contents-legacy.visible.expanded .popcorn-contents-close {
  right: 10px;
  top: 7px;
  color: rgb(255, 255, 255);
}

.popcorn-contents.top-left.active.hapyak-contents-legacy.visible.expanded .popcorn-contents-close :hover {
  color: rgb(255, 255, 255);
}

.hapyak-contents-legacy.collapsed h3.popcorn-contents-title {
  background: rgba(0, 0, 0, 0.4);
  color: rgb(255, 255, 255);
}

.hapyak-contents-legacy.expanded h3.popcorn-contents-title {
  background: rgba(0, 0, 0, 0.4);
  color: rgb(255, 255, 255);
  padding: 30px 20px;
}

.popcorn-contents.top-left.active.hapyak-contents-legacy.visible.expanded .popcorn-contents-hidden {
  margin-top: 0;
}

.popcorn-contents.top-left.active.hapyak-contents-legacy.visible.expanded ul {
  margin-top: 0;
}

.popcorn-contents.top-left.active.hapyak-contents-legacy.visible.expanded ul li {
  color: rgb(255, 255, 255);
  padding: 20px;
}

.popcorn-contents.top-left.active.hapyak-contents-legacy.visible.expanded ul :hover, .popcorn-contents.top-left.active.hapyak-contents-legacy.visible.expanded ul :active {
  color: rgb(255, 255, 255);
}

.hapyak-contents-column1.expanded .popcorn-contents-title {
  background: rgba(0, 0, 0, 0.4);
  color: rgb(255, 255, 255);
  margin-bottom: 0px;
  padding: 15px;
}

/* EXPANDED CHAPTER MENU TITLE */
.hapyak-contents-column1.collapsed h3.popcorn-contents-title,
.hapyak-contents-column1.expanded h3.popcorn-contents-title {
  background: rgba(0, 0, 0, 0.4);
  color: rgb(255, 255, 255);
  margin-bottom: 0;
  padding: 15px 45px 15px 15px;
  overflow-wrap: break-word;
}

/* EXPANDED CHAPTER MENU BODY */
.hapyak-contents-column1.expanded .popcorn-contents-inner {
  color: rgb(255, 255, 255);
  padding-top: 27px;
}

.hapyak-contents-column1.expanded {
  background: rgba(0, 0, 0, 0.4);
}

.hapyak-contents-column1.expanded .popcorn-contents-close {
  background: rgba(255, 255, 255, 0);
  border: none;
  right: 10px;
  font-size: 3em;
  line-height: 10px;
}

.hapyak-contents-column1.expanded .popcorn-contents-close:hover {
  color: rgb(255, 255, 255);
}

/* CHAPTER LI */
.popcorn-contents-inner li {
  color: rgb(255, 255, 255);
}
.hapyak-contents-column1 .popcorn-contents-list>li:hover,
.hapyak-contents-column1 .popcorn-contents-list>li.active {
  color: rgb(255, 255, 255);
}

/* DEFAULT POP ACTIVE */
.popcorn-pop.hapyak-theme-black.active {
  background: rgba(68, 68, 68, 0.4);
  color: rgb(255, 255, 255);
  border-left: 0px solid rgb(0, 0, 0);
  border-right: 0px solid rgb(0, 0, 0);
  border-top: 0px solid rgb(0, 0, 0);
  border-bottom: 0px solid rgb(0, 0, 0);
}

/* DEFAULT POP HOVER */
.popcorn-pop.hapyak-theme-black.active:hover {}

.hapyak-annotation-container>.hapyak-linked:hover:not(.hapyak-theme-pop) {
  box-shadow: none;
}


/* ------------------------------------------------------------ */
/*                      QUIZ ANNOTATION                         */
/* ------------------------------------------------------------ */
/* QUIZ BG COLOR AND CURVE */
.popcorn-quiz:not(.hapyak-editing-quiz) .hapyak-quiz-container {
  background: rgba(255, 255, 255, 0.7);
  border: 3px solid rgb(68, 68, 68);
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  overflow: hidden;
}

/* ADJUSTING PADDING FOR HEADER */
.popcorn-quiz:not(.hapyak-editing-quiz) .hapyak-quiz-builder.viewer {
  padding: 0;
  margin-bottom: 5px;
}

.popcorn-quiz:not(.hapyak-editing-quiz) .hapyak-quiz-builder.viewer .questions {
  margin: 0;
}

.popcorn-quiz:not(.hapyak-editing-quiz) .hapyak-quiz-builder {
  padding: 0;
}

/* QUIZ HEADER STYLE */
.popcorn-quiz:not(.hapyak-editing-quiz) .hapyak-quiz-builder.viewer .question-text {
  margin-top: -10px;
  padding-top: 30px;
  padding-bottom: 10px;
  background: rgba(68, 68, 68, 0.7);
  font-weight: 300;
  color: rgb(255, 255, 255);
  text-align: center;
  width: auto;
  margin-bottom: 20px;
}

/* QUIZ ANSWER TEXT */
.popcorn-quiz:not(.hapyak-editing-quiz) .hapyak-quiz-builder.viewer .label-text {
  color: rgb(68, 68, 68);
}

/* QUIZ THANK YOU MESSAGE TEXT */
.popcorn-quiz:not(.hapyak-editing-quiz) .hapyak-quiz-builder.viewer .thank-you {
  color: rgb(68, 68, 68);
  font-family: "Roboto", "Helvetica", sans-serif;
  font-weight: 400;
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 0px;
  padding-top: 10px;
  padding-bottom: 10px;
}

/* INCORRECT ANSWER STYLING */
.popcorn-quiz:not(.hapyak-editing-quiz) .hapyak-quiz-builder.viewer .incorrect {
  margin: 20px;
}

/* QUIZ REVIEW ANSWER TEXT */
.popcorn-quiz:not(.hapyak-editing-quiz) .hapyak-quiz-builder .answer>pre {
  color: rgb(68, 68, 68);
}

/* QUIZ REVIEW ANSWER TEXT POSITION */
.popcorn-quiz:not(.hapyak-editing-quiz) .hapyak-quiz-builder.viewer .summary .answer {
  margin-left: 15px;
}

/* QUIZ REVIEW BOX POSITION */
.hapyak-annotation-container .popcorn-quiz.hapyak-review-screen>.hapyak-quiz-container, .hapyak-skeleton-annotation-container .popcorn-quiz.hapyak-review-screen>.hapyak-quiz-container {
  top: 100px;
}

/* QUESTION ALIGNMENT */
.popcorn-quiz:not(.hapyak-editing-quiz) .hapyak-quiz-builder.viewer .questions {
  overflow: hidden;
}

.popcorn-quiz:not(.hapyak-editing-quiz) button.btn.btn-large.submit-answers.btn-success {
  background: rgb(68, 68, 68);
  color: rgb(255, 255, 255);
  border: 3px solid rgb(68, 68, 68);
  box-shadow: none;
  text-shadow: none;
  border-radius: 0px;
}

/* SUBMIT BUTTON DISABLED HOVER */
button.btn.btn-large.btn-primary.submit-answers.disabled:hover {}

/* NEXT BUTTON */
.popcorn-quiz:not(.hapyak-editing-quiz) button.btn.btn-large.btn-primary.submit-answers {
  background: rgb(68, 68, 68);
  color: rgb(255, 255, 255);
  border: 3px solid rgb(68, 68, 68);
  box-shadow: none;
  text-shadow: none;
  border-radius: 0px;
}

/* SUBMIT BUTTON HOVER */
button.btn.btn-large.btn-primary.submit-answers:hover {}

/* DONE BUTTON */
.popcorn-quiz:not(.hapyak-editing-quiz) button.btn.btn-large.btn-primary.ok {
  background: rgb(68, 68, 68);
  color: rgb(255, 255, 255);
  border: 3px solid rgb(68, 68, 68);
}

/* CANCEL BUTTON */
.popcorn-quiz:not(.hapyak-editing-quiz) button.btn.btn-large.skip.hide {
  border: 3px solid lightgray;
  border-radius: 0px;
  color: rgb(68, 68, 68);
  background: rgb(255, 255, 255);
  text-shadow: none;
  box-shadow: none;
}

/* CANCEL BUTTON HOVER */
.popcorn-quiz:not(.hapyak-editing-quiz) button.btn.btn-large.skip.hide:hover {
  border-color: gray;
  color: gray;
}

/* QUIZ BACK BUTTON */
.popcorn-quiz:not(.hapyak-editing-quiz) button.btn.btn-large.go-back {
  color: white;
  background: gray;
  border: 3px solid gray;
  box-shadow: none;
  text-shadow: none;
}

/* QUIZ BACK BUTTON HOVER */
.popcorn-quiz:not(.hapyak-editing-quiz) button.btn.btn-large.go-back:hover {
  background-color: #d3d3d3;
  border-color: #d3d3d3;
}

/* +INPUT BUTTON */
button.new-text-choice.btn.btn-large {}

/* QUIZ ANSWER FONT */
.hapyak-annotation-container .popcorn-contents, .hapyak-annotation-container .popcorn-quiz, .hapyak-skeleton-annotation-container .popcorn-contents, .hapyak-skeleton-annotation-container .popcorn-quiz {
  font-family: "Roboto", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
}

/* QUIZ SHORT ANSWER FONT */
.hapyak-root input, .hapyak-root button, .hapyak-root select, .hapyak-root textarea {
  font-family: "Roboto", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
}

/* ANSWER PADDING */
.popcorn-quiz:not(.hapyak-editing-quiz) .hapyak-quiz-builder input[type=checkbox]+label>.hapyak-select, .hapyak-player .hapyak-quiz-builder:not(.editor) input[type=checkbox]:checked+label>.hapyak-select {
  margin-left: 40px;
}

.hapyak-player .quiz-viewer .answers .answer>input[type=radio]+label, .hapyak-player .quiz-viewer .answers .answer>input[type=checkbox]+label {
  margin-left: 40px;
}

/* ANSWER FONT COLOR */
.hapyak-player .hapyak-quiz-builder.viewer .label-text {
  color: #63666a;
}

/* QUIZ BUTTON FORMATING */
.hapyak-player .hapyak-quiz-builder.viewer .btn {
  margin: -40px 15px 15px 5px;
}

.hapyak-player .hapyak-quiz-builder i {
  color: white;
}

.popcorn-quiz:not(.hapyak-editing-quiz) .hapyak-review-screen .hapyak-quiz-builder.viewer .question-text {
  color: rgb(68, 68, 68);
  background: rgba(255, 255, 255, 0);
}

.popcorn-quiz:not(.hapyak-editing-quiz) .hapyak-review-screen .hapyak-quiz-builder.viewer .thank-you {
  background: rgba(68, 68, 68, 0.7);
  color: rgb(255, 255, 255);
  width: 100%;
}

.popcorn-hotlink.active {
  background-color: rgba(68, 68, 68, 0.6);
}


/* ------------------------------------------------------------ */
/*                  USER SENTIMENT ANNOTATION                   */
/* ------------------------------------------------------------ */
#widget-body #view-container {
  width: 100%;
  height: 100%;
  opacity: 1;
  transition: opacity 0.4s ease;
}

#widget-body #view-container #icon-container {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  margin: 0 auto;
  position: relative;
  transition: opacity .7s ease;
}

#widget-body #view-container #icon-container .wrapper .icons-container {
  text-align: center;
}

#widget-body #view-container #icon-container .wrapper .icons-container .thumbs-up-half, #widget-body #view-container #icon-container .wrapper .icons-container .thumbs-down-half, #widget-body #view-container #icon-container .wrapper .icons-container .smiley-happy, #widget-body #view-container #icon-container .wrapper .icons-container .smiley-neutral, #widget-body #view-container #icon-container .wrapper .icons-container .smiley-sad, #widget-body #view-container #icon-container .wrapper .icons-container .star {
  display: inline-block;
  float: left;
  text-align: center;
  opacity: 0.6;
  cursor: pointer;
}

#widget-body #view-container #icon-container .wrapper .icons-container .thumbs-up-half:hover, #widget-body #view-container #icon-container .wrapper .icons-container .thumbs-down-half:hover, #widget-body #view-container #icon-container .wrapper .icons-container .smiley-happy:hover, #widget-body #view-container #icon-container .wrapper .icons-container .smiley-neutral:hover, #widget-body #view-container #icon-container .wrapper .icons-container .smiley-sad:hover, #widget-body #view-container #icon-container .wrapper .icons-container .star:hover {
  opacity: 0.8;
}


#widget-body #view-container #icon-container .wrapper .icons-container .thumbs-up-half.selected:hover, #widget-body #view-container #icon-container .wrapper .icons-container .thumbs-up-half.selected, #widget-body #view-container #icon-container .wrapper .icons-container .thumbs-down-half.selected:hover, #widget-body #view-container #icon-container .wrapper .icons-container .thumbs-down-half.selected, #widget-body #view-container #icon-container .wrapper .icons-container .smiley-happy.selected:hover, #widget-body #view-container #icon-container .wrapper .icons-container .smiley-happy.selected, #widget-body #view-container #icon-container .wrapper .icons-container .smiley-neutral.selected:hover, #widget-body #view-container #icon-container .wrapper .icons-container .smiley-neutral.selected, #widget-body #view-container #icon-container .wrapper .icons-container .smiley-sad.selected:hover, #widget-body #view-container #icon-container .wrapper .icons-container .smiley-sad.selected, #widget-body #view-container #icon-container .wrapper .icons-container .star.selected:hover, #widget-body #view-container #icon-container .wrapper .icons-container .star.selected {
  opacity: 1;
}

#widget-body #view-container #icon-container .wrapper .icons-container .thumbs-up-half i.material-icons, #widget-body #view-container #icon-container .wrapper .icons-container .thumbs-down-half i.material-icons {
  font-size: 65px;
  padding: 0 10px;
  transition: font-size .7s ease;
  vertical-align: middle;
}

#widget-body #view-container #icon-container .wrapper .icons-container .thumbs-up-half .like-count, #widget-body #view-container #icon-container .wrapper .icons-container .thumbs-down-half .like-count {
  margin-right: 10px;
  font-size: 25px;
  vertical-align: middle;
}


#widget-body #view-container #icon-container .wrapper .icons-container .smiley-happy, #widget-body #view-container #icon-container .wrapper .icons-container .smiley-neutral, #widget-body #view-container #icon-container .wrapper .icons-container .smiley-sad {
  zoom: 1.5;
  padding: 0 5px;
  transition: padding .7s ease;
}

#widget-body #view-container #icon-container .wrapper .icons-container .star {
  padding: 5px;
  transition: padding .7s ease;
}

#widget-body #view-container #icon-container .wrapper .help-text {
  opacity: 1;
  height: 20px;
  max-width: 260px;
  padding: 10px 10px 30px 10px;
  transition: 0.4s opacity 0.4s ease, height 0.4s ease, max-width 0.4s ease, padding 0.4s ease;
}

#widget-body #view-container #icon-container .wrapper .help-text h1 {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  word-break: break-word;
  text-align: center;
  color: white;
}


/* ------------------------------------------------------------ */
/*                    CUSTOM FORM ANNOTATION                    */
/* ------------------------------------------------------------ */
#widget-body #view-container #slide-out-form {
  width: 100vw;
  height: 100vh;
  position: fixed;
  background: #DEDEDE;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 120px;
}

#widget-body #view-container #slide-out-form #close {
  position: relative;
  color: #FFF;
  z-index: 999;
  font-family: 'Lato', OpenSans, sans-serif;
  display: block;
  padding: 10px 20px;
  font-size: 25px;
  height: 50px;
  width: 100%;
  line-height: 26px;
  -webkit-transition: color 0.5s ease;
  -o-transition: color 0.5s ease;
  transition: color 0.5s ease;
  -moz-transition: color 0.5s ease;
}

#widget-body #view-container #slide-out-form #close #close-form {
  position: relative;
  top: -25px;
  width: 10px;
  left: 98%;
  cursor: pointer;
}

#widget-body #view-container #slide-out-form #close.expand.right, #widget-body #view-container #slide-out-form #close.expand.left {
  -webkit-transform: translateX(0%);
  -ms-transform: translate(0%);
  -moz-transform: translateX(0%);
  -o-transform: translateX(0%);
  transform: translateX(0%);
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  -moz-transition: 0.5s;
}

#widget-body #view-container #slide-out-form #close.collapse.right {
  -webkit-transform: translateX(100%);
  -ms-transform: translate(100%);
  -moz-transform: translateX(100%);
  -o-transform: translateX(100%);
  transform: translateX(100%);
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  -moz-transition: 0.5s;
}

#widget-body #view-container #slide-out-form #close.collapse.left {
  -webkit-transform: translateX(-100%);
  -ms-transform: translate(-100%);
  -moz-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  -moz-transition: 0.5s;
}

#widget-body #view-container #slide-out-form #iframe-form {
  border: none;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
}

#widget-body #view-container #slide-out-form.right {
  top: 0;
  right: 0;
  -webkit-transform: translateX(100%);
  -ms-transform: translate(100%);
  -moz-transform: translateX(100%);
  -o-transform: translateX(100%);
  transform: translateX(100%);
}

#widget-body #view-container #slide-out-form.left {
  top: 0;
  left: 0;
  -webkit-transform: translateX(-100%);
  -ms-transform: translate(-100%);
  -moz-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%);
}

#widget-body #view-container #slide-out-form.third-width {
  width: 33%;
}

#widget-body #view-container #slide-out-form.half-width {
  width: 50%;
}

#widget-body #view-container #slide-out-form.quarter-width {
  width: 75%;
}

#widget-body #view-container #slide-out-form.full-width {
  width: 100%;
}

#widget-body #view-container #slide-out-form.expand.right, #widget-body #view-container #slide-out-form.expand.left {
  -webkit-transform: translateX(0%);
  -ms-transform: translate(0%);
  -moz-transform: translateX(0%);
  -o-transform: translateX(0%);
  transform: translateX(0%);
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  -moz-transition: 0.5s;
}

#widget-body #view-container #slide-out-form.collapse.right {
  -webkit-transform: translateX(100%);
  -ms-transform: translate(100%);
  -moz-transform: translateX(100%);
  -o-transform: translateX(100%);
  transform: translateX(100%);
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  -moz-transition: 0.5s;
}

#widget-body #view-container #slide-out-form.collapse.left {
  -webkit-transform: translateX(-100%);
  -ms-transform: translate(-100%);
  -moz-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  -moz-transition: 0.5s;
}

#widget-body #view-container .button-container {
  position: absolute;
  margin: 10px;
  display: block;
}

#widget-body #view-container .button-container #button {
  background: #1892BF;
  color: #FFF;
  border-radius: 5px;
  height: 60px;
  width: auto;
  padding: 15px 13px 10px 10px;
  cursor: pointer;
  -webkit-transition: color 0.5s ease;
  -o-transition: color 0.5s ease;
  transition: color 0.5s ease;
  -moz-transition: color 0.5s ease;
}

#widget-body #view-container .button-container #button i {
  font-size: 30px;
  display: inline;
  float: left;
}

#widget-body #view-container .button-container #button h1 {
  font-family: "Lato", "Roboto", Helvetica, sans-serif;
  font-size: 27px;
  text-align: center;
  display: inline;
  padding-left: 5px;
}



/* ------------------------------------------------------------ */
/*                      SIGN IN ANNOTATION                      */
/* ------------------------------------------------------------ */

#widget-body #view-container {
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

#widget-body #view-container #title {
  text-align: center;
  font-size: 36px;
}

#widget-body #view-container #sub-title {
  text-align: center;
  font-size: 24px;
}

#widget-body #view-container #fields {
  margin: 0;
  margin: auto 0;
  display: table;
  width: 100%;
  height: 58%;
}

#widget-body #view-container #fields .fields-wrapper {
  width: 100%;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
}

#widget-body #view-container #fields .fields-wrapper .row {
  margin: 0;
}

#widget-body #view-container #fields .fields-wrapper .input-field label {
  font-size: 20px;
}

#widget-body #view-container #fields .fields-wrapper .input-field input[type=text], #widget-body #view-container #fields .fields-wrapper .input-field input[type=email] {
  font-size: 24px;
}

#widget-body #view-container #fields .fields-wrapper .input-field input[type=text]::focus+label, #widget-body #view-container #fields .fields-wrapper .input-field input[type=email]::focus+label {
  color: #000;
}

#widget-body #view-container #fields .fields-wrapper .input-field input[type=text]:focus, #widget-body #view-container #fields .fields-wrapper .input-field input[type=email]:focus {
  border-bottom: 1px solid #000;
  box-shadow: none;
}

#widget-body #view-container #fields .fields-wrapper .input-field input[type=text].valid, #widget-body #view-container #fields .fields-wrapper .input-field input[type=text].invalid, #widget-body #view-container #fields .fields-wrapper .input-field input[type=email].valid, #widget-body #view-container #fields .fields-wrapper .input-field input[type=email].invalid {
  box-shadow: none;
}

#widget-body #view-container #fields .fields-wrapper .input-field input[type=text].valid, #widget-body #view-container #fields .fields-wrapper .input-field input[type=email].valid {
  border-bottom: 1px solid #000;
}

#widget-body #view-container #fields .fields-wrapper .input-field input[type=text].invalid, #widget-body #view-container #fields .fields-wrapper .input-field input[type=email].invalid {
  border-bottom: 1px solid #F44336;
}

#widget-body #view-container #footer {
  position: absolute;
  bottom: 80px;
  right: 300px;
}

#widget-body #view-container #footer #submit-btn {
  background: #1892bf;
}

#widget-body #view-container #footer #skip {
  right: -200px;
  position: absolute;
}

#widget-body #view-container #footer .btn-flat:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

#widget-body #view-container #privacy {
  margin-top: 40px;
  position: relative;
  font-size: 15px;
  left: 291px;
}