/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
.waiting-modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 )
                url('http://i.stack.imgur.com/FhHRx.gif')
                50% 50%
                no-repeat;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading {
    overflow: hidden;
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .waiting-modal {
    display: block;
}

input[type="radio"] {
  margin-top: -1px;
  margin:10px;
  vertical-align: middle;
}




#questionset-progressbar .ui-widget-header{
	background:green;
}

.score-indicator{
	margin:5px;
	height:20px;
	width:20px;
	border: solid;
	border-width:1px;
	border-color: black;
}

#host-blast-view-name{
  font-size:20px;
  font-weight:bold;
  position: relative;
}

.host-blast-view-control-bar{
  background-color: rgb(154, 197, 241);
  padding: 15px 15px 15px 15px;
  margin-bottom:0px;
  position: relative;
  display:inline-block;
  width:100%;

}

.host-blast-view-control-bar-quiz-label {
    position: relative;
    font-family: system-ui;
    margin-left: 56px;
}

.host-blast-view-control-bar-quiz-title {
    position: relative;
    font-family: system-ui;
}

.host-blast-view-control-bar-quiz-inner {
    font-weight: 700;
    font-style: normal;
    color: rgb(39, 121, 225);
    position: absolute;
    font-size: 24px;
    left: 0;
}

.host-blast-view-control-bar-quiz-outline {
    font-weight: 700;
    font-style: normal;
    color: white;
    font-size: 24px;
    -webkit-text-stroke: 5px white;
}
/*
.host-blast-view-next-question-button{
  display:inline-block;
  position:relative;
}
*/

#host-blast-view-join-code-label{
  font-size: 20px;
  font-weight: bold;
}
#host-blast-view-join-code{
  font-family: Consolas,monaco,monospace;
  font-size: 32px;
  font-weight: bold;
}

.host-blast-view-join-code-label {
    position: relative;
    font-family: system-ui;
    margin-left: 32px;
}

.host-blast-view-join-code-label-inner {
    font-weight: 700;
    font-style: normal;
    color: rgb(107, 31, 192);
    position: absolute;
    font-size: 16px;
    left: 0;
    top: 4px;
}

.host-blast-view-join-code-label-outline {
    font-weight: 700;
    font-style: normal;
    color: white;
    font-size: 16px;
    -webkit-text-stroke: 4px white;
}

/**/

.host-blast-view-join-participants-label {
    position: relative;
    font-family: system-ui;
    margin-left: 16px;
}

.host-blast-view-join-participants-label-inner {
    font-weight: 700;
    font-style: normal;
    color: rgb(107, 31, 192);
    position: absolute;
    font-size: 16px;
    left: 0;
    top: 4px;
}

.host-blast-view-join-participants-label-outline {
    font-weight: 700;
    font-style: normal;
    color: white;
    font-size: 16px;
    -webkit-text-stroke: 4px white;
}

.host-blast-view-control-bar .quiz-row-title {
    font-family: system-ui;
    font-size: 22px;
    font-weight: bold;
}

.host-blast-view-join-code-value {
    font-size: 16px;
    font-family: system-ui;
}

.host-blast-view-join-code-value-participants {
    font-size: 16px;
    font-family: system-ui;
}

/**/

#host-blast-view-show-blast-summary-button {
    background-color: rgb(39, 121, 225);
    color: white;
    font-family: system-ui;
    border-radius: 30px;
    padding: 5px 19px;
    font-weight: 500;
}

#host-blast-view-start-question-button {
    background-color: #5cb85c;
    color: white;
    font-family: system-ui;
    border-radius: 30px;
    padding: 5px 19px;
    width: 100px;
    font-weight: 500;
}

#host-blast-view-set-status-to-completed-button {
    background-color: rgb(231, 25, 31);
    color: white;
    font-family: system-ui;
    border-radius: 30px;
    padding: 5px 19px;
    width: 100px;
    font-weight: 500;
}

.host-blast-view-control-bar .host-control-bar {
    display: block;
    margin-left: 19px;
}

#host-blast-view-progress.progress {
    margin-bottom: 15px;
}

#host-blast-view-previous-question-button {
    background: rgb(255, 145, 77);
    color: white;
    border-radius: 25px;
    width: 161px;
    padding: 5px 0px;
    font-weight: 500;
}

#host-blast-view-next-question-button {
    background: rgb(0, 191, 99);
    color: white;
    border-radius: 25px;
    width: 161px;
    padding: 5px 0px;
    font-weight: 500;
}

.host-control-bar.center {
    display: flex;
}

.quiz-progress-bar {
    margin-bottom: 10px;
}

#host-blast-view-start-question-button.disabled {
    background-color: rgb(150, 163, 172);
    color: rgb(44 44 44);
}

.host-blast-view-progress-bar{
  background-color: #dcdcdc;
  padding:10px;
  margin-bottom:10px;
  position: relative;
}

#host-blast-view-multiple-question-stem{
  font-size: 20px;
  font-weight: bold;
  margin-left:20px;
}

#host-blast-view-multiple-question-stem.full-width{
    margin-left:0;
    margin-bottom: 10px;
}

.MJXc-display {
    text-align: left;
}


.host-blast-view-multiple-question-answer{
  font-size: 18px;
/*
  margin-left:30px;
  padding:20px;
*/

  padding:20px;
  position:relative;
  display: inline-block;

  margin-bottom: 5px;
  width:100%;
  border: 2px solid #ddd;
  min-height:90px;

}

.host-blast-view-multiple-question-answer-label{
  float:left;
  width: 20%;
  position:relative;
}

.host-blast-view-multiple-question-answer-label-circle{
  display:inline-block;
  border-radius: 50%;
  width:65px;
  height:65px;
  font-size: 24px;
  color: #fff;
  text-align: center;
  background-color: #52b9f9;
  padding:15px;
  position:relative;

}

.host-blast-view-multiple-question-answer-value{
  float:left;
  width: 60%;
  text-align:left;
  position:relative;
  display:inline-block;

}

.host-blast-view-multiple-question-image{
  float:left;
  min-width:180px;
  min-height:180px;
  width:180px;
  height:180px;
  margin-bottom: 20px;
  margin-right: 10px;
}

.host-blast-view-multiple-question-answer-num-responses-display-block{
  float:left;
  width: 20%;
  text-align: center;
  position:relative;
  display:inline-block;
}

.host-blast-view-multiple-question-answer.correct{
  background-color: #5CCF53;
}

.host-blast-view-multiple-question-answer.wrong{
  background-color: #fcc4c4;
}

#host-blast-participant-response-count-container{
  border-bottom: 2px solid #ddd;
  padding:5px;
  margin-bottom: 20px;
  font-size:18px;
  font-weight:bold;
  margin-right: -16px;
}


#host-blast-view-participant-list{
  overflow-y:auto;
  height:100%;
}

.host-blast-view-participant-response-block{
  border: 2px solid #ddd;
  margin-bottom: 20px;
  padding: 10px;
  position: relative;
  display:inline-block;
  width:100%;
}

.host-blast-view-participant-response-block.no-response-submitted{
  border: 2px dashed #bfbfbf;
}

.host-blast-view-participant-response-block.response-submitted{

  border: 2px solid #000000;

}

.blast-correct-answer-color{
  color: green;
  font-size:24px;
}

.blast-wrong-answer-color{
  color: red;
  font-size:24px;
}



.host-blast-view-progress{
  margin-top:10px;
}



/*
.full-window-modal {
  min-width: 100%;
    margin: 0;

}

.full-window-web-app-modal .modal-header {
  border-bottom: 0px solid #e5e5e5;
}

.full-window-modal .modal-content {
  min-height: 100vh;
}

.full-window-host-blast-summary-modal {
    min-width: 100%;
    margin: 0;
    max-height: 100%;
    position:relative;
    display:block;
    width:auto;

}

.close..full-window-host-blast-summary-modal{
  color:#fff;
  opacity:0.6;
  font-size:61px;
  margin-top:-25px;"
}

.web-app-canvas {
  display:block;
}

.full-window-host-blast-summary-modal .modal-content {
  min-height: 100vh;
  background-color: white;
}

.full-window-host-blast-summary-modal .modal-body{
  background-color: white;
}
*/

#host-blast-summary-slide-panel{
  background-color: white;
  box-sizing: content-box;
  padding:20px;
  overflow-y: scroll;
}

.host-blast-summary-slide-panel-question{

  margin-bottom: 50px;

}

.host-blast-summary-question-label{
  margin-left:20px;
  margin-right:20px;
  float:left;
}

.host-blast-summary-question-view-button{
  float:left;
  vertical-align: middle;
}

/******************* PLAY ***************/

#play-blast-enter-join-code-form-container{
  margin: auto;
  width: 50%;
}

#play-blast-enter-join-code-text-field-label{

  font-size: 24px;
  font-weight: bold;
  text-align: center;

}


#play-blast-enter-join-code-text-field{
  font-family: Consolas,monaco,monospace;
  font-size: 28px;
  font-weight: bold;
  text-align: center;
  width:100%;
  padding: 22px 0;
}


#play-blast-enter-join-code-submit-button{
  margin: auto;
  font-size: 24px;
  width: 20%;
  display: block;
  margin-left: auto;
  margin-right: auto;

}

#play-blast-multiple-choice-submit-answer-button{
  margin: auto;
  font-size: 22px;
  font-weight: bold;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top:20px;
  padding:20px 50px;

  background-color: #ea8136 !important;
  color: #FFF !important;
}




.play-blast-view-control-bar{
  background-color: #87ceeb;
  padding: 15px 15px 15px 15px;
  margin-bottom:0px;
  position: relative;
  display:inline-block;
  width:100%;
}

#play-blast-view-name{
  font-size:20px;
  font-weight:bold;
  position: relative;
}


#play-blast-view-multiple-question-stem{
  font-size: 20px;
  font-weight: bold;
  margin-left:20px;
  margin-bottom: 10px;
}

.play-blast-view-multiple-question-answer{

  padding:20px;
  position:relative;
  display: inline-block;
  font-size: 18px;
  width:100%;
  min-height: 90px;
  border: 2px solid #ddd;

  cursor:pointer;

}


.play-blast-view-multiple-question-answer.enabled:hover{
  border: 2px solid #94bcfc;
  cursor: pointer;
}

.play-blast-view-multiple-question-answer.enabled:hover .blast-answer-checkmark {
  background-color: #52b9f9;

}


/*
.play-blast-view-multiple-question-answer:hover input:enabled ~ .blast-answer-checkmark {
  background-color: #52b9f9;

}
*/


.play-blast-view-multiple-question-answer-label{
  float:left;
  width: 20%;
  position:relative;
}

.play-blast-view-multiple-question-answer-label-circle{
  display:inline-block;
  border-radius: 50%;
  width:65px;
  height:65px;
  font-size: 24px;
  color: #fff;
  text-align: center;
  background-color: #52b9f9;
  padding:15px;
  position:relative;
  cursor:pointer;

}

.play-blast-view-multiple-question-answer-checkbox{
  float:left;
  width: 20%;

}

.play-blast-view-multiple-question-answer-checkbox input{
  position:relative;
  opacity: 0;

  /*height: 0;
  width: 0;*/
}

.blast-answer-checkmark{
  position:absolute;
  /*top: 0;
  left: 0;*/
  height: 65px;
  width: 65px;
  background-color: #eee;
  border-radius: 10%;
}


/* On mouse-over, add a grey background color */
/*
.play-blast-view-multiple-question-answer:hover input:enabled ~ .blast-answer-checkmark {
  background-color: #52b9f9;


}
*/

.blast-answer-checkmark.checked {
  background-color: #52b9f9;
  background-image: url(/assets/img/checkmark.png)
}

/* When the radio button is checked, add a blue background
.play-blast-view-multiple-question-answer-checkbox input:checked ~ .blast-answer-checkmark {
  background-color: #52b9f9;
  background-image: url(/assets/img/checkmark.png)

}
*/

/* Create the indicator (the dot/circle - hidden when not checked)
.play-blast-view-multiple-question-answer-checkbox:after {
  /*content: "";
  position: absolute;
  display: none;

}
*/

/* Show the indicator (dot/circle) when checked */
/*
.play-blast-view-multiple-question-answer-checkbox input:checked ~ .blast-answer-checkmark:after {
  display: block;
}
*/

/* Style the indicator (dot/circle) */
.play-blast-view-multiple-question-answer-checkbox .blast-answer-checkmark:after {
  /*top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;*/

}

/************** END CHECKMARK STYLING ********************/


.play-blast-view-multiple-question-answer-value{
  float:left;
  width: 60%;
}

.play-blast-view-multiple-question-image{
  float:left;
  min-width:180px;
  min-height:180px;
  width:180px;
  height:180px;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-right:10px;
}



.play-blast-view-multiple-question-answer.submitted{
  /*background-color: #94bcfc;*/
  border: 4px solid #94bcfc;
}

.play-blast-view-multiple-question-answer.correct{
  background-color: #5CCF53;
}


.play-blast-view-multiple-question-answer.wrong{
  background-color: #fcc4c4;
}

.host-blast-view-control-label {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.host-blast-view-join-code-label-title {
    width: 134px;
    text-align: right;
}

.host-blast-view-join-code-label-title span {
    font-size: 20px;
    font-weight: bold;
    margin-right: 6px;
}

.host-blast-view-join-code-label-value span {
    font-family: Consolas,monaco,monospace;
    font-size: 18px;
    font-weight: bold;
}

.host-blast-view-join-code-label-value-name {
    margin-left: 12px;
    font-weight: bold !important;
    font-family: system-ui !important;
    font-size: 20px !important;
}

.host-blast-view-join-code-label-title-label {
    position: relative;
    font-family: system-ui;
    margin-right: -9px;
}

.host-blast-view-join-code-label-title-label-inner {
    font-weight: 700;
    font-style: normal;
    color: rgb(39, 121, 225);
    position: absolute;
    font-size: 24px !important;
    right: 0;
}

.host-blast-view-join-code-label-title-label-outline {
    font-weight: 700;
    font-style: normal;
    color: white;
    font-size: 24px !important;
    -webkit-text-stroke: 5px white;
}

/*********/

.host-blast-view-join-code-participants-label-title-label {
    position: relative;
    font-family: system-ui;
    margin-left: 16px;
}

.host-blast-view-join-code-participants-label-title-label-inner {
    font-weight: 700;
    font-style: normal;
    color: rgb(107, 31, 192);
    position: absolute;
    font-size: 16px;
    left: 0;
    top: 0;
}

.host-blast-view-join-code-participants-label-title-label-outline {
    font-weight: 700;
    font-style: normal;
    color: white;
    font-size: 16px;
    -webkit-text-stroke: 4px white;
}

.host-blast-view-join-code-btn-result {
    background-color: rgb(94, 23, 235);
    color: white;
    border-radius: 30px;
    width: 99px;
    padding: 3px 15px;
    font-weight: 500;
}

.student-invitation-automatic-join {
    color: black !important;
    font-size: 25px;
    font-weight: 500;
    width: 100%;
    background-color: white;
    border-radius: 17px;
}