.capture-project-container {
  font-family: "Roboto";
}

/*include into flow less from here down*/
.fa-sm {
  font-size: 0.63em;
}

.capture-project-container {
  font-size: 14px;
}

#showMeParent p,
.capture-project-container p,
.tooltipster-capture p{
  margin: 0 0 10px;
}

.markerText {
  display: inline-block;
  padding-left: 2.0em;
  line-height: normal;
}

.markerList {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.markerListItem {
  background-repeat: no-repeat;
  padding-top: 0.2em;
  padding-left: 0.6em;
  min-height: 45px;
  display: block;
  word-break: break-word;
}

.stepMedia {
  position: relative;
  overflow: hidden
}

.stepLink {
  float: left;
  overflow: hidden;
  visibility: hidden;
}

.stepText {
  display: inline-block;
  white-space: normal;
  word-break: break-word;
}

.decision-options{
white-space: normal;
}

.stepText .decision-options{
  padding-top: 10px;
}
.decisionFrameChoice a {
  text-align: left;
}

.decisionFrameTextBody {
  row-gap: 25px;
  flex-direction: column;
}

.narrationSection {
  border-top: #ddd 1px solid;
  padding-top: 10px;
}

.narration-border-top {
  border-top: #ddd 1px solid;
  padding-top: 5px;
  margin: 15px;
}

.narration-text {
  display: block;
  word-break: break-word
}

.stepNarration {
	word-break: break-word;
}

.stepLink:hover {
  visibility: visible;
}

.stepCount {
  overflow: hidden;
}

.stepCount:hover>.stepLink {
  visibility: visible;
}

.carousel-caption h4 {
  background-color: black;
}

.carousel-caption h4 {
  padding: .5em;
}

.carousel-caption {
  position: relative;
  left: auto;
  right: auto;
}

.targetHotspot {
  position: absolute;
  cursor: pointer;
}

.targetHotspot select {
  width : 100%;
}

.hotspotHint {
  outline: 3px solid red;
  animation: flicker 1.2s infinite ease;
}

.inputHotSpotHint {
  animation: flashInput 1s 4 ease;
}

.jobAidPane {
  margin-bottom: 20px;
  border-bottom: #ddd 1px solid;
}

.hint-button.stepHint {
  animation: hint 0.4s normal ease;
}

.list-group-item.stepHint {
  animation: step-hint 0.4s normal ease;
}

.arrow-hint {
  opacity: 0;
}

.arrow-hint-active {
  display: initial;
  position: relative;
  animation: arrow-hint 1s infinite ease;
}

@keyframes flicker {
  0% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 0;
    transform: scale(1.15);
  }
  100% {
    opacity: 0.5;
    transform: scale(1);  
  }
}

@keyframes flickerNoResize {
  0% {
    opacity: 0.5;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0.5;
  }
}

@keyFrames arrow-hint {
  0%   {
       opacity:0; 
       left:5px;
       transform: scale(1);
  }
  100% {
        opacity:1;
        left:0px;
        transform: scale(1.15);
  }
}

@keyframes hint {
  0% {
    opacity: 1;
    transform: translateY(0);
  }

  40% {
    opacity: 0.8;
    transform: translateY(-4px);
  }
  75% {
    opacity:0.8;
    transform: translateY(2px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes step-hint {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  50% {
    opacity: 0.8;
    transform: translateX(8px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes flashInput {
  0% {
    opacity: 0.7;
    background-color:white;
  }
  50% {
    opacity: 0.8;
    background-color:yellow;
  }
  100% {
    opacity: 0.7;
    background-color:white;
  }
}

.img-overlay {
  position: relative;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
}

#carouselButtons {
  top: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}

.carousel-inner img {
  margin: auto;
}

.carousel-inner {
  transform-origin: top left;
}

.steps-anchor {
  top: -64px;
  position: relative;
  display: block;
}

#startScreen, #tryMeInfoScreen {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.77);
  border: none;
  position: absolute;
  color: #fff;
  text-align: center;
}

.m-0 {
  margin: 0;
}

.info-continue {
  display: flex;
  justify-content: space-between;
  align-items: center
}

.btn-step-continue {
  color: #477dda;
  background: white;
  border: 0;
}

.btn-step-continue:hover {
  color: #2253a8;
}

.modal-faded {
  background-color: transparent !important;
}

.try-me-done-overlay {
  opacity: 0.36;
  display: none;
}

.try-me-restart-col {
  display: flex;
  justify-content: center;
  height: 100%;
}

.try-me-restart-btn {
  padding: 0 !important;
  box-shadow: none !important;
}

.try-me-restart-btn:hover {
  box-shadow: none !important;
  outline: 0;
}

.disabled:hover {
  background: none !important;
  outline: none !important;
}

.fa.fa-spinner {
  color: #FFF;
  font-size: 80%;
}

.always-visible {
  opacity: 1 !important;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

@media ( any-hover : hover) {
  #softwareSimCarousel:hover .fa.fa-pause {
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
  }
  #softwareSimCarousel:hover .fa.button-pause-bg {
    opacity: 0.2;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
  }
}

#softwareSimCarousel:hover .fa.fa-play {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

#softwareSimCarousel:hover .fa.button-play-bg {
  opacity: 0.3;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
}

#softwareSimCarousel .tooltip-inner {
  padding: 12px 16px;
  background-color: rgba(0, 0, 0, 0.7);
}

#softwareSimCarousel .tooltip-arrow {
  opacity: 0.7;
}

#softwareSimCarousel {
  overflow: hidden;
}

#softwareSimCarousel img {
  -khtml-user-select: none;
  -o-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}
/* this gives the image a composite layer and improves sharpness when scaled on certain browsers*/
#softwareSimCarousel img.blurFix {
  -webkit-backface-visibility : hidden;
  backface-visibility : hidden;
  -webkit-transform: translateZ(0);
  transform : translateZ(0);
}

.capture-project-container {
  position: relative;
  overflow: auto;
}

.capture-fullscreen-height{
height: 100vh;
}

.capture-fullscreen-overflow{
overflow: hidden ! important;
}

.capture-project-container.capture-fullscreen-overflow .tooltipster-base{

  position: absolute !important;

}

#typedStepInput {
  color:black;
  background-color: rgba(255, 255, 255, 0.7);
  border-color:transparent;
  box-shadow:none;
  padding: 6px 1px;
}

.drag-overlay {
  border: 2px dashed white;
  cursor: move;
  position: absolute;
  pointer-events: none;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
  background-color: rgba(0, 0, 0, 0.3);
  color: white;
  transform: translate(-50% -50%) translate3d(0, 0, 0);
  transform-origin: top left;
}

.fa.fa-circle {
  color: #000;
}

.fa.fa-circle.always-visible {
  opacity: 0.3 !important;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
}

.fa.fa-circle.button-play-bg {
  -webkit-transition: opacity 0.8s ease;
  transition: opacity 0.8s ease;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

.fa.fa-circle.button-pause-bg {
  -webkit-transition: opacity 0.8s ease;
  transition: opacity 0.8s ease;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

.bootstrap-tagsinput {
  width: 100%;
}

.no-margin {
  margin: 0;
}

.no-background {
  background: none;
}

.side-container {
  padding: 0;
}

.side-container .panel {
  overflow-y: auto;
  border-radius: 0;
  overflow-x: hidden;
  border: none;
  margin: 0;
  box-shadow: none;
}

.side-container .col-step {
  width: 50px;
  position: absolute;
  height: 100%;
  text-align: center;
  top: 0;
}

.label-circle {
  position: absolute;
  border-radius: 100%;
  line-height: 2em;
  height: 26px;
  width: 26px;
}

.col-step .step-checkmark {
  display: none;
}

.side-container .col-instructions {
  padding-left: 50px;
  padding-right: 12px;
}

.side-container .panel .list-group-item {
  border-radius: 0 !important;
  padding: 20px 16px;
  cursor: pointer;
  word-break: break-word;
}

#tryMeSideContainer .list-group-item .step-label {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(50%);
  z-index: 100;
}

@media screen and (max-width: 767px) {
  #tryMeSideContainer .panel {
    max-height: 120px !important;
  }
  .info-continue {
    justify-content: initial;
  }
  .btn-step-continue {
    margin: 0 10px;
  }
}

.IE-media-screen-no-margin {
  margin-left: 0;
}

#mouse {
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  transform-origin: top left;
}

#projectFragment {
  border-bottom: solid 1px rgba(0, 0, 0, 0.2);
}

#embedPreview {
  overflow: hidden;
  max-height: 420px;
  max-width: 568px;
  position: relative;
  padding: 0;
}

#shareModalBody .list-group {
  display: inline-block;
  max-width: 568px;
  width: 100%;
}

.capture-project-container .container.full-width {
  width: 100%;
  margin: 0;
}

.capture-display .container.full-width {
  margin-bottom: 38px;
}

.capture-display .container .controls {
  background-color: #fff;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 38px;
  padding: 0 8px;
}

.capture-display .container .controls .right-end {
  float: right;
  display: flex;
  flex-direction: row;
}

#testMeReviewContainer {
  background-color: #fff;
    bottom: 0;
    right: 0;
    padding: 0 8px;
}


#showMeContainer .controls .player-time {
  font-size: 0.9em;
  letter-spacing: 0.05em;
  padding: 0 8px;
}

.capture-display .controls .btn {
  padding: 8px 4px;
  font-size: 10px;
  outline: none;
}

.capture-display .controls .btn:disabled {
  background: none;
  border: none;
}

#showMeContainer .controls .bar {
  position: absolute;
  top: -3px;
  height: 3px;
}

.capture-display {
  overflow: hidden;
}

.capture-display.full {
  width: 100%;
}

.capture-display.transition {
  -webkit-transition: width .3s ease;
  transition: width .3s ease;
}


.hide-general-panel{
  visibility: hidden;
  z-index: -1;
}

.general-overlay-showme{
  background: white;
  width: 100%;
  height: calc(100% - 38px);
  z-index: 64;
  background-color: rgba(33, 33, 33, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
}

.general-container{
  display: flex;
  width: 80%;
  max-height: 80%;
  min-height: 200px;
  padding: 20px 10px;
  justify-content: center;
  overflow-y: auto;
}

/* ---> THE BELOW SECTION OF CSS IS TO DEAL WITH ELEMENTS TO DO WITH GENERAL PANELS THAT HAVE A LARGE TEXT FIELD <--- */

.general-container-text-content{
  position: relative;
  overflow-y: auto;
  height: calc(100% - 50px);
  margin: 10px;
  display: inline-block;
  flex-wrap: wrap;
  align-content: center;
  max-width: 100%;
  padding-right: 20px;
}

.general-container-primary-action-button-div{
  height: 50px;
  padding: 15px;
}

.general-container-text-package{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

/* ---> END <--- */

/* ---> THE BELOW SECTION OF CSS IS TO DEAL WITH DECISION FRAMES <--- */
.general-container-decision-package{
  overflow-y: auto;
  margin-bottom: 10px;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  row-gap: 25px;
}

/* ---> END <--- */

.justify-content-center {
  justify-content: center;
}

.video-overlay {
  position: absolute;
  width: 100%;
  height: calc(100% - 38px);
  top: 0;
  left: 0;
  z-index: 62;
  transition: all 0.15s ease-out;
}

.video-overlay:hover {
  background-color: rgba(33, 33, 33, 0.75);
}

.video-overlay:hover .play-head-button {
  color: white !important;
}

.video-overlay:hover .fa-play-circle {
  background-image: radial-gradient(rgb(66, 66, 66) 50%, transparent 50%);
  border-radius: 50%;
}

.play-head-button {
  position: absolute;
  top: 50%;
  right: 50%;
  z-index: 63;
  width: 112px;
  height: 112px;
  margin-right: -56px;
  margin-top: -56px;
  font-size: 8em;
  color: rgb(66, 66, 66);
}

.play-head-button:focus {
  outline: none !important;
}

.play-head-child {
  position: absolute;
  left: 0;
  top: 0;
  width: 112px;
  height: 112px;
}

#tryMeContainer #fullScreen {
  float: right;
}

#testMeContainer .targetHotspot,
#tryMeContainer .targetHotspot {
  cursor : default;
}

.fa-play-circle {
  background-image: radial-gradient(white 50%, transparent 50%);
  border-radius: 50%;
}

#screencastVideoContainer {
  padding: 0;
  margin: 0;
}

.vimeoPlayerContainer {
  padding: 56.25% 0 0 0;
  position: relative;
}

.vimeoPlayerResponsive {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.testMe {
  display : flex;
  display : -ms-flexbox;
  position : relative;
}

.testMe #startScreen {
  display : none;
}
#testMeSideContainer {
  flex : 0 0 50px;
  background-color : #f7f7f7;
  border-right : 1px solid #ccc;
  position : absolute;
  width : 70px;    
  height : 100%;
}
#testMeContainer {
  flex : 1 1 auto;
  margin-left:70px;
}
#testMeContainer .container { 
  width : auto;
}
#testMeSideContainer .panel {
  background-color : transparent;
  height : 100%;
}
#testMeSideContainer .row {
  padding            : 5px;
  margin             : 0;
  min-height         : 50px;
  display            : flex;
  display            : -ms-flexbox;
  flex-direction     : column;
  -ms-flex-direction : column;
  justify-content    : center;
  -ms-flex-pack      : center;
}
#testMeSideContainer .row:not(.section){
  background-color : transparent !important;
}

#testMeSideContainer .row .label-circle {
  border-radius: 100%;
  line-height: 2em;
  height: 26px;
  width: 26px;
}
#testMeSideContainer .row.active {
  background-color : #BBB !important;
}
#testMeSideContainer .row.section {
  background-color : #FFF;
  color            : #888;
  border-bottom    : 1px solid #DDD;
}
#testMeSideContainer .row.section.current {
  background-color : #666;
  color            : white;
}
#testMeSideContainer .row.section span {
  width            : 24px;
  height           : 25px;
  line-height      : 32px;
  text-align       : center;
  font-size        : 12px;
  margin           : 0 auto;
}
#testMeSideContainer .row.section.current span {
  color            : #fff;
}
#testMeSideContainer .row .label-circle {
  background-color : #BBB;
}
#testMeSideContainer .row.active .label-circle {
  color : #666;
  background-color : #FFF;
}
#testMeSideContainer .row.hotspotHint {
  animation-name : flickerNoResize;
}
#testMeSideContainer:not(.practice) .progression {
  display : none;
} 

#testMeSideContainer .panel {
  overflow-y : hidden;
  display : flex;
  display : -ms-flexbox;
  flex-direction : column;
  -ms-flex-direction : column;
}

#testMeSideContainer .list-group{
  flex : 1 0 auto;
  -ms-flex : 1 0 auto;
  overflow-y : auto;
  height : 0;
}
#testMeSideContainer .list-group-item:not(.active):not(.pass):not(.fail) .progression{
  display : none;
}

#testMeSideContainer .progression {
  display         : flex;
  display         : -ms-flexbox;
  padding-top     : 5px;
}
#testMeSideContainer .progression  > * {
  height           : 5px;
  flex             : 1 1 auto;
  -ms-flex         : 1 1 auto;
  background-color : white;
  margin           : 2px;
  opacity          : 0.5;
}
#testMeSideContainer .progression  > *:first-child {
  margin-left : 0;
}
#testMeSideContainer .progression  > *:last-child {
  margin-right : 0;
}
#testMeSideContainer .col-step{
  position        : static;
  height          : auto;
  width           : auto;
  display         : flex;
  display         : -ms-flexbox;
  align-items     : center;
  -ms-flex-align  : center;
  justify-content : center;
  -ms-flex-pack   : center;
}
#testMeSideContainer .col-step .label {
  position : static;
  display  : inline-block;
}
#testMeSideContainer .row .step-checkmark .fa {
  line-height : 2em;
}
#testMeSideContainer .row.score {
  position : relative;
}
#testMeSideContainer .row.score,
#testMeSideContainer .continue-container {
  display : none;
}
#testMeSideContainer .row.score .radial{
  left  : 7px;
}
#testMeSideContainer .row.score .radial .overlay {
  color : #00153a;
}
#testMeSideContainer .row {
  border-top : none;
}
#testMeSideContainer .row.active {
  border-color : #ddd;
}
#testMeSideContainer .row .progression .try {
  background-color : #A81E1E;
  transition       : background-color 200ms ease-in-out;
}
#testMeSideContainer .row .progression .try,
#testMeSideContainer .row .progression .on,
#testMeSideContainer .row.active .progression > *:first-child{
    opacity        : 1;
}

#testMeSideContainer .row.pass .label-circle,
#testMeSideContainer .row.fail .label-circle{
  background-color : #fff;
}

#testMeSideContainer .row.pass{
  background-color : #0FBF00 !important;
  opacity          : 1;
}
#testMeSideContainer .row.pass .fa{
  color : #0FBF00;
}

#testMeSideContainer .row.pass.active {
  background-color : #0b8c00 !important;
}
#testMeSideContainer .row.pass.active .fa{
  color : #0b8c00;
}

#testMeSideContainer .row.pass .try,
#testMeSideContainer .row.fail .try {
  background-color : white;
}


#testMeSideContainer .row.fail {
  background-color : #A81E1E !important;
  opacity          : 1;
}
#testMeSideContainer .row.fail .fa{
  color : #A81E1E;
}
#testMeSideContainer .row.fail.active {
  background-color : #7d1616 !important;
}
#testMeSideContainer .row.fail.active .fa{
  color : #7d1616;
}


#testMeSideContainer .row .continue {
  display : none !important;
}

#testMeInfoScreen {
  top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.77);
    border: none;
    position: absolute;
    color: #fff;
    text-align: center;
}

#testMeInfoScreen .infoButtons {
  display         : flex;
  display         : -ms-flexbox;
  width           : 100%;
  justify-content : center;
  -ms-flex-pack   : center;
}
#testMeInfoScreen .infoButtons > * {
  margin-right : 15px;
  min-width    : 150px;
}
#testMeInfoScreen .infoButtons > *:last-child {
  margin-right : 0;
}
.testMeFeedback {
	word-break: break-word;
}

#testMeReviewContainer  > * {
  float: right;
  cursor: pointer;
  color: #327BB7;
}

.tooltipster-base .testMeFeedback > *,
.tooltipster-base .testMeFeedback .content > *:not(:last-child){
  margin-bottom : 20px;
}
.tooltipster-base .testMeFeedback .btn {
  margin-bottom : 10px;
}
.tooltipster-base .testMeFeedback > *:last-child {
  margin-bottom : 0;
}
.tooltipster-base .testMeFeedback h4 {
  display        : flex;
  display        : -ms-flexbox;
  align-items    : center;
  -ms-flex-align : center;
  font-size      : 1em;
  margin-top     : 0;
}

.tooltipster-base .testMeFeedback .label-circle {
  display          : inline-block;
  line-height      : 1.8em;
  height           : 1.7em;
  width            : 1.7em;
  font-size        : 0.9em;
  border-radius    : 50%;
  margin-right     : 5px;
  background-color : #BBB;
  color            : #FFF;
  font-style       : normal;
  text-align       : center;
  position         : static;
}
.tooltipster-base .testMeFeedback h4 .fa-times {
  background-color : #A81E1E;
  color            : #FFF;
  
}
.tooltipster-base .testMeFeedback .content {
  font-size : 0.9em;
  padding   : 0 10px;
  word-break: break-word;
}

.tooltipster-base .testMeFeedback h4 *:not(i, .letOverflow, li){
  flex            : 1 1 auto;
  -ms-flex        : 1 1 auto;
  overflow        : hidden;
  text-overflow   : ellipsis;
  white-space     : nowrap;
}
.tooltipster-base .testMeFeedback .btn {
  width         : calc(100% - 20px);
  border-radius : 3px;
  font-size     : 0.9em;
  margin-left   : 10px;
}
.tooltipster-base .testMeFeedback .controls.content {
  font-size : 1em;
}
.tooltipster-base .testMeFeedback .controls > * {
  float  : right;
  cursor : pointer;
  color  : #327BB7;
}
.tooltipster-base .testMeFeedback .line {
  width        : 15px;
  height       : 2px;
  margin-right : 5px;
  position     : relative;
  top          : -4px;
  display      : inline-block;
}
.tooltipster-base .testMeFeedback .line.correct {
  background-color :#0FBF00;
}
.tooltipster-base .testMeFeedback .line.incorrect {
  background-color :#A81E1E;
}

#dragIconContainer {
  float: right;
}

.dragContainer {
  width: inherit;
  padding-bottom: 5%;
}

.tooltipster-base .testMeFeedback .info-continue {
  display : block;
}
.tooltipster-base .testMeFeedback .info-continue p{
  margin-bottom : 11px;
}
#testMeInfoScreen {
  z-index : 1000;
}
#testMeInfoScreen > .centered-element{
  width            : calc(100% - 50px);
  background-color : #f7f7f7;
  border           : 1px solid #ccc;
  color            : #333;
  padding          : 35px 0;
  max-height       : 90%;
  overflow-y       : auto;
}
#testMeInfoScreen .display-center {
  display            : flex;
  display            : -ms-flexbox;
  flex-direction     : column;
  -ms-flex-direction : column;
  align-items        : center;
  -ms-flex-align     : center;
}
#testMeInfoScreen .display-center > *:not(:last-child){
  margin-bottom : 2.5rem;
}
#testMeInfoScreen .display-center .feedback {
  padding : 0 5rem;
}
#testMeInfoScreen .radialContainer {
  width         : 200px;
}

#testMeInfoScreen .btn {
  border-radius : 3px;
}
.testMeDecisionReviewContainer{
  position: relative;
}

.testMeDecisionReviewHotSpotDiv {
  height: 80%;
  width: 80%;
  position: absolute;
}

#testMeReviewOverlay {
  position : absolute;
  top      : 0;
  bottom   : 0;
  left     : 0;
  right    : 0;
  display  : none;
  z-index  : 1;
}
#testMeContainer.inReview #softwareSimCarousel{
  pointer-events : none; /*This is to stop any tryMe javascript events from firing while in review*/
}
#testMeContainer.inReview #testMeReviewOverlay{
  display : block;
}

#testMeContainer .row.controls {
  display    : flex;
  display    : -ms-flexbox;
  border-top : 1px solid #CCC;
  margin     : 0;
}
#testMeContainer .row.controls .btn {
  padding : 0;
}
#testMeContainer .row.controls .fill {
  display            : flex;
  display            : -ms-flexbox;
  flex               : 1 0 auto;
  -ms-flex           : 1 0 auto;
  align-content      : center;
  -ms-flex-line-pack : center;
}

#testMeContainer #showReviewToggle {
  border        : 1px solid #0FBF00;
  color         : #0FBF00;
  border-radius : 3px;  
  padding       : 3px 10px; 
  display       : none;
  margin        : 5px;
}

#testMeContainer.inReview #showReviewToggle {
  display : inline-block;
}

#testMeContainer #showReviewToggle .fa {
  color            : white;
  background-color : #0FBF00;
  border-radius    : 50%;
  padding          : 3px;
  width            : 20px;
  height           : 20px;
  line-height      : 14px;
  font-size        : 16px;
  margin-right     : 5px;
}
#testMeContainer #showReviewToggle.correct {
  border-color : #A81E1E;
  color : #A81E1E;
}

#testMeContainer #showReviewToggle.correct .fa {
  background-color : #A81E1E;
}
#testMeContainer #showReviewToggle  > * {
  vertical-align : middle;
}
#testMeSideContainer .panel .list-group > *:not(.showByDefault):not(.showForAlternate),
#tryMeSideContainer .panel .list-group > *:not(.showByDefault):not(.showForAlternate) {
  display : none;
}

#stepsSideContainer .panel .list-group > .side-container-section.alternative-section:not(.show-for-alternative),
#stepsSideContainer .panel .list-group > .side-container-section.hidden-section:not(.show-for-alternative){
  display: none;
}

/* xsmall */
@media (max-width: 767px) {
  .testMe {
    flex-direction     : column;
    -ms-flex-direction : column;
  }
  #testMeSideContainer {
    width : 100%;
    position : static;
    height : auto;
  }
  #testMeSideContainer .panel {
    flex-direction : row;
    -ms-flex-direction : row;
  }
  #testMeSideContainer .list-group {
    display : flex;
    display : -ms-flexbox;
    overflow-x : auto;
    overflow-y : hidden;
    height : auto;
    width : 0px;
  }
  #testMeSideContainer .row {
    flex          : 0 0 60px;
    border-bottom : none;
    border-right  : 1px solid #DDD;
  }
  #testMeSideContainer .row:last-child {
    border-right : none;
  }
  #testMeContainer {
    margin-left : 0;
  }
}

/*Exists in dki|ONE but not Clarofy */

@keyframes markerPulse {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, .8);
        box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, .8);
    }
    70% {
        -webkit-box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 1);
        box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 1);
    }
    to {
        -webkit-transform: scale(1.6);
        transform: scale(1.6);
        -webkit-box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0);
        box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0);
    }
}

#testMeContainer .marker {
  border             : 1px solid #ffffff;
  box-shadow         : 0px 0px 10px rgba(0,0,0,.50);    
  display            : flex;
  display            : -ms-flexbox;
  align-content      : center;
  -ms-flex-line-pack : center;
  background-color   : #A81E1E;
  color              : white;
  font-size          : 25px;
  width              : 25px;
  height             : 25px;
  line-height        : 25px;
  text-align         : center;
}

#testMeContainer .marker.pin {
  -webkit-border-radius: 50% 50% 50% 0%;
  border-radius: 50% 50% 50% 0%;
  transform: rotate(-45deg);
}
#testMeContainer .marker.pin:before {
  transform      : rotate(45deg);
  font-size      : 0.6em;
  flex           : auto;
  -ms-flex       : auto;
  vertical-align : top;
  display        : inline-block;
}

#testMeContainer .markerPulsar:after {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;     
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -webkit-animation: markerPulse 2s infinite ease-out;
  animation: markerPulse 2s infinite ease-out;
  pointer-events: none;
}
#testMeContainer .markerPulsar.pin:after {
  top: 90%;
  left: 2px;
  right: 2px;
  bottom: -30%;
  z-index: -1;  
}

.capture-project-container{
  background-color: rgb(255, 255, 255);
  color: #262424 !important;
}

.capture-display-border-left{
border-left: 1px solid rgb(230, 230, 230);
}

.capture-display-border-right{
border-right: 1px solid rgb(230, 230, 230);
}

.step-item{
border-bottom: 1px solid rgb(230, 230, 230) !important;
}

div.list-group-item.disabled,
li.list-group-item.disabled{

    background-color: rgb(255, 255, 255) !important;
    border-bottom: 1px solid rgb(230, 230, 230) !important;

}