/*************************************************************
*
* players/hexagon/player.css
*
*************************************************************/


/* css/main.css */


html, body {
  width: 100%; 
  height: 100%; 
}

body {
  margin: 0em; 
  color: #222;
  background-color: #fff;
}

body,
body * {
  font-family: Arial, Sans-Serif;
}

table {
  border-spacing: 0em;
}

td {
  padding: 0.2em 0.5em;
}

a {
  color: #077c92;
}

label {
  display: block;
}

div, span {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;  
}  

*:focus {
  outline: none;
}


/*************************************************************
*
* players/hexagon/css/main.css
*
*************************************************************/


/* common/body.css */
/* common/icons.css */
/* common/helpers.css */
/* common/legacy.css */

/* fonts/fonts.css */
/* fonts/fonts-adaptive.css */

/* inputs/inputs.css */
/* inputs/buttons.css */
/* inputs/radio.css */
/* inputs/checkbox.css */

/* devices/phone.css */
/* devices/tablet.css */
/* devices/orientation.css */

/* content/helpers.css */

/* animations/animations.css */

/* player/player.css */
/* player/player-content.css */
/* player/player-content-effects.css */
/* player/participant-form.css */
/* player/application-messages.css */


/*************************************************************
*
* players/hexagon/css/common/body.css
*
*************************************************************/


body.NoTransitions * {
  transition: none !important;
}

body.UseTransitions * {
  transition: all 0.3s ease 0s !important;
}

body.ShowFocus *:focus {
  outline: 1px #222 dotted;
  outline-offset: 2px;
}


/*************************************************************
*
* players/hexagon/css/common/icons.css
*
*************************************************************/


.IconBack,
.IconNext,
.IconTop,
.IconBottom,
.IconArrow {
  position: relative;
  display: inline-block;
  font-size: 1em;
  width: 1em;
  height: 1em;
  border-color: initial;
  border-width: 0px;
  box-sizing: border-box;
  vertical-align: top;
}



/* .IconBack, .IconNext */


.IconBack::after,
.IconNext::after,
.IconTop::after,
.IconBottom::after {
  content: '';
  position: absolute;
  display: block;
  top: 0.1em;
  width: 0.7em;
  height: 0.7em;
  border-width: 0.15em;
  border-color: initial;
  box-sizing: border-box;
}

.IconBack.Thin::after,
.IconNext.Thin::after,
.IconTop.Thin::after,
.IconBottom.Thin::after {
  border-width: 0.08em;
}

.IconBack::after {
  left: 0.25em;
  right: auto;
  top: 0.1em;
  border-style: none none solid solid;
  transform: 
    rotate(-45deg);
}

.IconNext::after {
  left: auto;
  right: 0.25em;
  top: 0.1em;
  border-style: none solid solid none;
  transform: 
    rotate(-45deg);
}


.IconTop::after {
  left: auto;
  right: 0.25em;
  top: 0.1em;
  border-style: none solid solid none;
  transform: 
    rotate(-135deg);
}


.IconBottom::after {
  left: auto;
  right: 0.25em;
  top: 0.1em;
  border-style: none solid solid none;
  transform: 
    rotate(45deg);
}



/* .IconArrow */


.IconArrow::before {
  content: '';
  position: absolute;
  display: block;
  top: 0.15em;
  left: 0.15em;
  width: 0.7em;
  height: 0.7em;
  border-width: 0.15em;
  border-color: initial;
  border-style: none solid solid none ;
  box-sizing: border-box;
  transform: 
    rotate(-45deg);
}

.IconArrow::after {
  content: '';
  position: absolute;
  display: block;
  top: 0.43em;
  left: 0.0em;
  width: 0.90em;
  height: 0.5em;
  border-width: 0.18em;
  border-color: initial;
  border-style: solid none none none;
  box-sizing: border-box;
}

.IconArrow.Thin::before {
  border-width: 0.08em;
}

.IconArrow.Thin::after {
  top: 0.44em;
  border-width: 0.10em;
}

.IconArrow.Right {
  transform: 
    rotate(0deg);
}

.IconArrow.Bottom {
  transform: 
    rotate(90deg);
}

.IconArrow.Left {
  transform: 
    rotate(180deg);
}

.IconArrow.Top {
  transform: 
    rotate(270deg);
}


/*************************************************************
*
* players/hexagon/css/common/helpers.css
*
*************************************************************/


.IsHidden {
  display: none !important;
}

.NoWrap {
  white-space: nowrap;
}

.AlignLeft {
  text-align: left;
}

.AlignRight {
  text-align: right;
}

.AlignCenter {
  text-align: center;
}

.AlignMiddle {
  vertical-align: middle;
}

.AlignTop {
  vertical-align: top;
}

.FloatLeft {
  float: left;
}

.FloatRight {
  float: right;
}

.BlockCenter {
  margin: 0px auto;
}

.FullWidth {
  width: 100%;
}

.FullHeight {
  height: 100%;
}

.HideFocus:focus {
  outline: none;
}

.Circle {
  border-radius: 100%; 
}

.Border {
  border: 1px inherit solid;
}

.Dashed {
  border-style: dashed;
}

.Rounded {
  border-radius: 10px;
}

.Inline {
  display: inline-block;
}

.InlineBlock {
  display: inline-block;
}

.NoPadding {
  padding: 0em;
}

.Padding20px {
  padding: 20px;
}

.Padding10px {
  padding: 10px;
}

.Padding5px {
  padding: 5px;
}

.Table {
  display: table;
}

.TableRow {
  display: table-row;
}

.TableCell {
  display: table-cell;
}

.Font08em {
  font-size: 0.8em;
}

.Font09em {
  font-size: 0.9em;
}

.Font12em {
  font-size: 1.2em;
}

.Font15em {
  font-size: 1.5em;
}


/*************************************************************
*
* players/hexagon/css/common/legacy.css
*
*************************************************************/


.visible-in-new-player {
  display: block;
}

.visible-in-old-player {
  display: none;
}


/*************************************************************
*
* players/hexagon/css/fonts/fonts.css
*
*************************************************************/


/* fonts.phone.css */
/* fonts.tablet.css */

body.XSmallFont {
  font-size: 0.6em !important;
}

body.SmallFont {
  font-size: 0.8em !important;
}

body.StandardFont {
  font-size: 1em !important;
}

body.LargeFont {
  font-size: 1.3em !important;
}

body.XLargeFont {
  font-size: 1.5em !important;
}


/*************************************************************
*
* players/hexagon/css/fonts/fonts.phone.css
*
*************************************************************/


body.IsPhone.IsPortrait.XSmallFont,
body.IsPhone.IsPortrait.SmallFont,
body.IsPhone.IsPortrait.StandardFont,
body.IsPhone.IsPortrait.LargeFont,
body.IsPhone.IsPortrait.XLargeFont {
  font-size: 4em !important;
}

body.IsPhone.IsLandscape.XSmallFont,
body.IsPhone.IsLandscape.SmallFont,
body.IsPhone.IsLandscape.StandardFont,
body.IsPhone.IsLandscape.LargeFont,
body.IsPhone.IsLandscape.XLargeFont {
  font-size: 2em !important;
}


/*************************************************************
*
* players/hexagon/css/fonts/fonts.tablet.css
*
*************************************************************/


/*
body.IsTablet.IsPortrait.XSmallFont,
body.IsTablet.IsPortrait.SmallFont,
body.IsTablet.IsPortrait.StandardFont,
body.IsTablet.IsPortrait.LargeFont,
body.IsTablet.IsPortrait.XLargeFont {
  font-size: 2em !important;
}

body.IsTablet.IsLandscape.XSmallFont,
body.IsTablet.IsLandscape.SmallFont,
body.IsTablet.IsLandscape.StandardFont,
body.IsTablet.IsLandscape.LargeFont,
body.IsTablet.IsLandscape.XLargeFont {
  font-size: 1.5em !important;
}
*/


body.IsTablet.IsPortrait #TestPlayer {
  font-size: 2em !important;
}

body.IsTablet.IsLandscape #TestPlayer {
  font-size: 1.5em !important;
}


/*************************************************************
*
* players/hexagon/css/fonts/fonts-adaptive.css
*
*************************************************************/


@media
all and (min-width: 0px) and (max-width: 171px) {
  html, .DefaultFont {
    font-size: 1px !important;
  }
}

@media
all and (min-width: 172px) and (max-width: 257px) {
  html, .DefaultFont {
    font-size: 2px !important;
  }
}

@media
all and (min-width: 258px) and (max-width: 343px) {
  html, .DefaultFont {
    font-size: 3px !important;
  }
}

@media
all and (min-width: 344px) and (max-width: 429px) {
  html, .DefaultFont {
    font-size: 4px !important;
  }
}

@media
all and (min-width: 430px) and (max-width: 514px) {
  html, .DefaultFont {
    font-size: 5px !important;
  }
}

@media
all and (min-width: 515px) and (max-width: 600px) {
  html, .DefaultFont {
    font-size: 6px !important;
  }
}

@media
all and (min-width: 601px) and (max-width: 686px) {
  html, .DefaultFont {
    font-size: 7px !important;
  }
}

@media
all and (min-width: 687px) and (max-width: 771px) {
  html, .DefaultFont {
    font-size: 8px !important;
  }
}

@media
all and (min-width: 772px) and (max-width: 857px) {
  html, .DefaultFont {
    font-size: 9px !important;
  }
}

@media
all and (min-width: 858px) and (max-width: 943px) {
  html, .DefaultFont {
    font-size: 10px !important;
  }
}

@media
all and (min-width: 944px) and (max-width: 1029px) {
  html, .DefaultFont {
    font-size: 11px !important;
  }
}

@media
all and (min-width: 1030px) and (max-width: 1114px) {
  html, .DefaultFont {
    font-size: 12px !important;
  }
}

@media
all and (min-width: 1115px) and (max-width: 1200px) {
  html, .DefaultFont {
    font-size: 13px !important;
  }
}

@media
all and (min-width: 1201px) and (max-width: 1286px) {
  html, .DefaultFont {
    font-size: 14px !important;
  }
}

@media
all and (min-width: 1287px) and (max-width: 1371px) {
  html, .DefaultFont {
    font-size: 15px !important;
  }
}

@media
all and (min-width: 1372px) and (max-width: 1457px) {
  html, .DefaultFont {
    font-size: 16px !important;
  }
}

@media
all and (min-width: 1458px) and (max-width: 1543px) {
  html, .DefaultFont {
    font-size: 17px !important;
  }
}

@media
all and (min-width: 1544px) and (max-width: 1629px) {
  html, .DefaultFont {
    font-size: 18px !important;
  }
}

@media
all and (min-width: 1630px) and (max-width: 1714px) {
  html, .DefaultFont {
    font-size: 19px !important;
  }
}

@media
all and (min-width: 1715px) and (max-width: 1800px) {
  html, .DefaultFont {
    font-size: 20px !important;
  }
}

@media
all and (min-width: 1801px) and (max-width: 1886px) {
  html, .DefaultFont {
    font-size: 21px !important;
  }
}

@media
all and (min-width: 1887px) and (max-width: 1971px) {
  html, .DefaultFont {
    font-size: 22px !important;
  }
}

@media
all and (min-width: 1972px) and (max-width: 2057px) {
  html, .DefaultFont {
    font-size: 23px !important;
  }
}

@media
all and (min-width: 2058px) and (max-width: 2143px) {
  html, .DefaultFont {
    font-size: 24px !important;
  }
}

@media
all and (min-width: 2144px) and (max-width: 2229px) {
  html, .DefaultFont {
    font-size: 25px !important;
  }
}

@media
all and (min-width: 2230px) and (max-width: 2314px) {
  html, .DefaultFont {
    font-size: 26px !important;
  }
}

@media
all and (min-width: 2315px) and (max-width: 2400px) {
  html, .DefaultFont {
    font-size: 27px !important;
  }
}

@media
all and (min-width: 2401px) and (max-width: 2486px) {
  html, .DefaultFont {
    font-size: 28px !important;
  }
}

@media
all and (min-width: 2487px) and (max-width: 2571px) {
  html, .DefaultFont {
    font-size: 29px !important;
  }
}

@media
all and (min-width: 2572px) and (max-width: 2657px) {
  html, .DefaultFont {
    font-size: 30px !important;
  }
}

@media
all and (min-width: 2658px) and (max-width: 2743px) {
  html, .DefaultFont {
    font-size: 31px !important;
  }
}

@media
all and (min-width: 2744px) and (max-width: 2829px) {
  html, .DefaultFont {
    font-size: 32px !important;
  }
}

@media
all and (min-width: 2830px) and (max-width: 2914px) {
  html, .DefaultFont {
    font-size: 33px !important;
  }
}

@media
all and (min-width: 2915px) and (max-width: 3000px) {
  html, .DefaultFont {
    font-size: 34px !important;
  }
}

@media
all and (min-width: 3001px) and (max-width: 3086px) {
  html, .DefaultFont {
    font-size: 35px !important;
  }
}

@media
all and (min-width: 3087px) and (max-width: 3171px) {
  html, .DefaultFont {
    font-size: 36px !important;
  }
}

@media
all and (min-width: 3172px) and (max-width: 3257px) {
  html, .DefaultFont {
    font-size: 37px !important;
  }
}

@media
all and (min-width: 3258px) and (max-width: 3343px) {
  html, .DefaultFont {
    font-size: 38px !important;
  }
}

@media
all and (min-width: 3344px) and (max-width: 3429px) {
  html, .DefaultFont {
    font-size: 39px !important;
  }
}

@media
all and (min-width: 3430px) and (max-width: 3514px) {
  html, .DefaultFont {
    font-size: 40px !important;
  }
}

@media
all and (min-width: 3515px) and (max-width: 3600px) {
  html, .DefaultFont {
    font-size: 41px !important;
  }
}

@media
all and (min-width: 3601px) and (max-width: 3686px) {
  html, .DefaultFont {
    font-size: 42px !important;
  }
}

@media
all and (min-width: 3687px) and (max-width: 3771px) {
  html, .DefaultFont {
    font-size: 43px !important;
  }
}

@media
all and (min-width: 3772px) and (max-width: 3857px) {
  html, .DefaultFont {
    font-size: 44px !important;
  }
}

@media
all and (min-width: 3858px) and (max-width: 3943px) {
  html, .DefaultFont {
    font-size: 45px !important;
  }
}

@media
all and (min-width: 3944px) and (max-width: 4029px) {
  html, .DefaultFont {
    font-size: 46px !important;
  }
}

@media
all and (min-width: 4030px) and (max-width: 4114px) {
  html, .DefaultFont {
    font-size: 47px !important;
  }
}

@media
all and (min-width: 4115px) and (max-width: 4200px) {
  html, .DefaultFont {
    font-size: 48px !important;
  }
}

@media
all and (min-width: 4201px) and (max-width: 4286px) {
  html, .DefaultFont {
    font-size: 49px !important;
  }
}

@media
all and (min-width: 4287px) and (max-width: 4371px) {
  html, .DefaultFont {
    font-size: 50px !important;
  }
}

@media
all and (min-width: 4372px) and (max-width: 4457px) {
  html, .DefaultFont {
    font-size: 51px !important;
  }
}

@media
all and (min-width: 4458px) and (max-width: 4543px) {
  html, .DefaultFont {
    font-size: 52px !important;
  }
}

@media
all and (min-width: 4544px) and (max-width: 4629px) {
  html, .DefaultFont {
    font-size: 53px !important;
  }
}

@media
all and (min-width: 4630px) and (max-width: 4714px) {
  html, .DefaultFont {
    font-size: 54px !important;
  }
}

@media
all and (min-width: 4715px) and (max-width: 4800px) {
  html, .DefaultFont {
    font-size: 55px !important;
  }
}

@media
all and (min-width: 4801px) and (max-width: 4886px) {
  html, .DefaultFont {
    font-size: 56px !important;
  }
}

@media
all and (min-width: 4887px) and (max-width: 4971px) {
  html, .DefaultFont {
    font-size: 57px !important;
  }
}

@media
all and (min-width: 4972px) and (max-width: 5057px) {
  html, .DefaultFont {
    font-size: 58px !important;
  }
}

@media
all and (min-width: 5058px) and (max-width: 5143px) {
  html, .DefaultFont {
    font-size: 59px !important;
  }
}

@media
all and (min-width: 5144px) and (max-width: 5229px) {
  html, .DefaultFont {
    font-size: 60px !important;
  }
}

@media
all and (min-width: 5230px) and (max-width: 5314px) {
  html, .DefaultFont {
    font-size: 61px !important;
  }
}

@media
all and (min-width: 5315px) and (max-width: 5400px) {
  html, .DefaultFont {
    font-size: 62px !important;
  }
}

@media
all and (min-width: 5401px) and (max-width: 5486px) {
  html, .DefaultFont {
    font-size: 63px !important;
  }
}

@media
all and (min-width: 5487px) and (max-width: 5571px) {
  html, .DefaultFont {
    font-size: 64px !important;
  }
}

@media
all and (min-width: 5572px) and (max-width: 5657px) {
  html, .DefaultFont {
    font-size: 65px !important;
  }
}

@media
all and (min-width: 5658px) and (max-width: 5743px) {
  html, .DefaultFont {
    font-size: 66px !important;
  }
}

@media
all and (min-width: 5744px) and (max-width: 5829px) {
  html, .DefaultFont {
    font-size: 67px !important;
  }
}

@media
all and (min-width: 5830px) and (max-width: 5914px) {
  html, .DefaultFont {
    font-size: 68px !important;
  }
}

@media
all and (min-width: 5915px) and (max-width: 6000px) {
  html, .DefaultFont {
    font-size: 69px !important;
  }
}

@media
all and (min-width: 6001px) and (max-width: 6086px) {
  html, .DefaultFont {
    font-size: 70px !important;
  }
}

@media
all and (min-width: 6087px) and (max-width: 6171px) {
  html, .DefaultFont {
    font-size: 71px !important;
  }
}

@media
all and (min-width: 6172px) and (max-width: 6257px) {
  html, .DefaultFont {
    font-size: 72px !important;
  }
}

@media
all and (min-width: 6258px) and (max-width: 6343px) {
  html, .DefaultFont {
    font-size: 73px !important;
  }
}

@media
all and (min-width: 6344px) and (max-width: 6429px) {
  html, .DefaultFont {
    font-size: 74px !important;
  }
}

@media
all and (min-width: 6430px) and (max-width: 6514px) {
  html, .DefaultFont {
    font-size: 75px !important;
  }
}

@media
all and (min-width: 6515px) and (max-width: 6600px) {
  html, .DefaultFont {
    font-size: 76px !important;
  }
}

@media
all and (min-width: 6601px) and (max-width: 6686px) {
  html, .DefaultFont {
    font-size: 77px !important;
  }
}

@media
all and (min-width: 6687px) and (max-width: 6771px) {
  html, .DefaultFont {
    font-size: 78px !important;
  }
}

@media
all and (min-width: 6772px) and (max-width: 6857px) {
  html, .DefaultFont {
    font-size: 79px !important;
  }
}

@media
all and (min-width: 6858px) and (max-width: 6943px) {
  html, .DefaultFont {
    font-size: 80px !important;
  }
}

@media
all and (min-width: 6944px) and (max-width: 7029px) {
  html, .DefaultFont {
    font-size: 81px !important;
  }
}

@media
all and (min-width: 7030px) and (max-width: 7114px) {
  html, .DefaultFont {
    font-size: 82px !important;
  }
}

@media
all and (min-width: 7115px) and (max-width: 7200px) {
  html, .DefaultFont {
    font-size: 83px !important;
  }
}

@media
all and (min-width: 7201px) and (max-width: 7286px) {
  html, .DefaultFont {
    font-size: 84px !important;
  }
}

@media
all and (min-width: 7287px) and (max-width: 7371px) {
  html, .DefaultFont {
    font-size: 85px !important;
  }
}

@media
all and (min-width: 7372px) and (max-width: 7457px) {
  html, .DefaultFont {
    font-size: 86px !important;
  }
}

@media
all and (min-width: 7458px) and (max-width: 7543px) {
  html, .DefaultFont {
    font-size: 87px !important;
  }
}

@media
all and (min-width: 7544px) and (max-width: 7629px) {
  html, .DefaultFont {
    font-size: 88px !important;
  }
}

@media
all and (min-width: 7630px) and (max-width: 7714px) {
  html, .DefaultFont {
    font-size: 89px !important;
  }
}

@media
all and (min-width: 7715px) and (max-width: 7800px) {
  html, .DefaultFont {
    font-size: 90px !important;
  }
}

@media
all and (min-width: 7801px) and (max-width: 7886px) {
  html, .DefaultFont {
    font-size: 91px !important;
  }
}

@media
all and (min-width: 7887px) and (max-width: 7971px) {
  html, .DefaultFont {
    font-size: 92px !important;
  }
}

@media
all and (min-width: 7972px) and (max-width: 8057px) {
  html, .DefaultFont {
    font-size: 93px !important;
  }
}

@media
all and (min-width: 8058px) and (max-width: 8143px) {
  html, .DefaultFont {
    font-size: 94px !important;
  }
}

@media
all and (min-width: 8144px) and (max-width: 8229px) {
  html, .DefaultFont {
    font-size: 95px !important;
  }
}

@media
all and (min-width: 8230px) and (max-width: 8314px) {
  html, .DefaultFont {
    font-size: 96px !important;
  }
}

@media
all and (min-width: 8315px) and (max-width: 8400px) {
  html, .DefaultFont {
    font-size: 97px !important;
  }
}

@media
all and (min-width: 8401px) and (max-width: 8486px) {
  html, .DefaultFont {
    font-size: 98px !important;
  }
}

@media
all and (min-width: 8487px) and (max-width: 8571px) {
  html, .DefaultFont {
    font-size: 99px !important;
  }
}

@media
all and (min-width: 8572px) and (max-width: 8657px) {
  html, .DefaultFont {
    font-size: 100px !important;
  }
}


/*************************************************************
*
* players/hexagon/css/inputs/inputs.css
*
*************************************************************/


/* inputs.phone.css */


input[type='text'],
input[type='number'],
input[type='email'],
input[type='password'],
select,
textarea {
  font-size: 1em; 
  color: inherit;
  padding: 0.2em 0.4em;
  background-color: #fff; 
  border: 0.15em #00798c solid;
  border-radius: 0.1em;
  box-sizing: border-box;
}

input[type='text']:focus,
input[type='number']:focus,
input[type='email']:focus,
input[type='password']:focus,
select:focus,
textarea:focus {
  border-color: #f89c3e;
}

input[type='radio'],
input[type='checkbox'],
label {
  cursor: pointer;
}


/*************************************************************
*
* players/hexagon/css/inputs/inputs.phone.css
*
*************************************************************/


body.IsPhone input[type="text"],
body.IsPhone input[type="number"],
body.IsPhone input[type="password"],
body.IsPhone textarea,
body.IsPhone select {
  font-size: 1.2em; 
  padding: 0.2em 0em;
  background-color: transparent; 
  border-style: none none solid none; 
  border-radius: 0em;
}

body.IsPhone select option {
  color: #000 !important;
  background-color: #fff !important;
}


/*************************************************************
*
* players/hexagon/css/inputs/buttons.css
*
*************************************************************/


/* button * */


button {
  position: relative;
  overflow: hidden;
  background-color: transparent;
  border: none;
  cursor: pointer;
  margin: 0.2em 0.2em;
  font-size: 1.1em;
}


button,
button * {
  color: #077c92;
}


body.NotTouchable button:hover,
body.NotTouchable button:hover * {
  color: #f89c3e;

}


button svg {
  stroke: #077c92;
  fill: #077c92;
}


body.NotTouchable button:hover svg {
  stroke: #f89c3e;
  fill: #f89c3e;
}


button,
button *,
button svg {
  transition: 
    color 0.3s ease 0s,
    background-color 0.3s ease 0s,
    stroke 0.3s ease 0s,
    fill 0.3s ease 0s;
}


body.NotTouchable button:hover,
body.NotTouchable button:hover *,
body.NotTouchable button:hover svg {
  transition: 
    color 0.1s ease 0s,
    background-color 0.1s ease 0s,
    stroke 0.1s ease 0s,
    fill 0.1s ease 0s;
}



/* button:disabled */


button:disabled,
button.IsDisabled,
button:disabled *,
button.IsDisabled * {
  color: #ddd !important;
  cursor: default;
}


button:disabled svg,
button.IsDisabled svg {
  stroke: #ddd !important;
  fill: #ddd !important;
}


/* button::before */


button::before {
  content: '';
  position: absolute;
  opacity: 0;
  left: 50%;
  top: 50%;
  width: 0%;
  height: 0%;
  margin-top: 0em;
  margin-left: 0em;
  background-color: #000;
  border-radius: 0.5em;
  box-sizing: border-box;
  z-index: 1;
  transition: 
    opacity 0.9s ease 0.1s,
    left 0s ease 1s,
    top 0s ease 1s,
    width 0s ease 1s,
    height 0s ease 1s,
    margin-left 0s ease 1s,
    margin-top 0s ease 1s,
    border-radius 0s ease 1s;
}

button.IsActive::before {
  opacity: 0.1;
  left: 0%;
  top: 0%;
  width: 100%;
  height: 100%;
  margin-top: 0em;
  margin-left: 0em;
  border-radius: 10em;
  transition: 
    opacity 0s ease 0s,
    left 0.2s ease 0s,
    top 0.2s ease 0s,
    width 0.2s ease 0s,
    height 0.2s ease 0s,
    margin-left 0.2s ease 0s,
    margin-top 0.2s ease 0s,
    border-radius 0.2s ease 0s;
}


/*************************************************************
*
* players/hexagon/css/inputs/radio.css
*
*************************************************************/


input[type='radio'] {
  position: relative;
  font-size: 0.9em;
  width: 1em;
  height: 1em;
  padding: 0em;
  margin: 0em 0.9em 0em 0.3em;
  cursor: pointer;
}

input[type='radio']:checked {
  color: inherit;
}

input[type='radio']:focus {
  outline: none;
  box-shadow: none !important;
}

input[type='radio']::before {
  content: '';
  position: absolute;
  top: -0.1em;
  left: -0.1em;
  width: 1.2em;
  height: 1.2em;
  border-radius: 50%;
  border: 0.15em #077c92 solid;
  box-sizing: border-box;
  z-index: 2;
}

body.NotTouchable input[type='radio']:hover::before {
  border-color: #f89c3e !important;
}

body.NotTouchable input[type='radio']:focus::before {
  outline: 1px #222 dotted;
  outline-offset: 2px;
}

input[type='radio']:after {
  content: '';
  position: absolute;
  left: 0em;
  top: 0em;
  width: 100%;
  height: 100%;
  background-color: #fff;
  border-radius: 50%;
  border: 0.3em #fff solid;
  box-sizing: border-box;
  z-index: 1;
}

input[type='radio']:checked::after {
  background-color: #077c92;
}

body.NotTouchable input[type='radio']:checked:hover:after {
  background-color: #f89c3e;
}


/*************************************************************
*
* players/hexagon/css/inputs/checkbox.css
*
*************************************************************/


input[type='checkbox'] {
  position: relative;
  font-size: 0.9em;
  width: 1em;
  height: 1em;
  padding: 0em;
  margin: 0em 0.9em 0em 0.3em;
  cursor: pointer;
}

input[type='checkbox']:checked {
  color: inherit;
}

input[type='checkbox']:focus {
  outline: none;
  box-shadow: none !important;
}

input[type='checkbox']::before {
  content: '';
  position: absolute;
  top: -0.1em;
  left: -0.1em;
  width: 1.3em;
  height: 1.3em;
  border-radius: 0.25em;
  background-color: #fff;
  border: 0.15em #077c92 solid;
  box-sizing: border-box;
  transition: 
    background-color 0.2s ease,
    border-width 0.2s ease;
}

body.NotTouchable input[type='checkbox']:hover::before {
  border-color: #f89c3e !important;
}

body.NotTouchable input[type='checkbox']:focus::before {
  outline: 1px #222 dotted;
  outline-offset: 2px;
}

input[type='checkbox']:checked::before {
  background-color: #9bad35;
  border-width: 0em;
}

input[type='checkbox']:after {
  content: '';
  opacity: 0;
  position: absolute;
  top: -0.25em;
  left: -0.1em;
  width: 0.40em;
  height: 0.90em;
  border-style: solid;
  border-color: #fff;
  border-width: 0em 0.2em 0.2em 0em;
  transform: rotate(45deg);
  transform-origin: bottom;
  transition: 
    opacity 0.2s ease,
    border-color 0.2s ease;
}

input[type='checkbox']:checked::after {
  opacity: 1;
  border-color: #fff;
}


/*************************************************************
*
* players/hexagon/css/devices/phone.css
*
*************************************************************/


body.IsPhone *:focus {
  outline: none;
}



/* span.Label*LabelPhone */


.LabelPhone,
.LabelPhonePortrait,
.LabelPhoneLanscape {
  display: none;
}

body.IsPhone .LabelNotPhone,
body.IsPhone.IsPortrait .LabelPhoneLandscape,
body.IsPhone.IsPortrait .LabelNotPhonePortrait,
body.IsPhone.IsLandscape .LabelPhonePortrait,
body.IsPhone.IsLandscape .LabelNotPhoneLandscape {
  display: none !important;
}

body.IsPhone span.LabelPhone,
body.IsPhone.IsPortrait span.LabelPhonePortrait,
body.IsPhone.IsLandscape span.LabelPhoneLanscape {
  display: inline;
}

body.IsPhone div.LabelPhone,
body.IsPhone.IsPortrait div.LabelPhonePortrait,
body.IsPhone.IsLandscape div.LabelPhoneLanscape {
  display: block;
}


body .PhoneBlock,
body .PhonePortraitBlock,
body .PhoneLandscapeBlock {
  display: none;
}

body.IsPhone .PhoneBlock {
  display: block;
}

body.IsPhone.IsPortrait .PhonePortraitBlock {
  display: block;
}

body.IsPhone.IsLandscape .PhoneLandscapeBlock {
  display: block;
}

body .NotPhoneBlock {
  display: block;
}

body.IsPhone .NotPhoneBlock {
  display: none !important;
}


body .PhoneInline,
body .PhonePortraitInline,
body .PhoneLandscapeInline {
  display: none;
}

body.IsPhone .PhoneInline {
  display: inline;
}

body.IsPhone.IsPortrait .PhonePortraitInline {
  display: inline;
}

body.IsPhone.IsLandscape .PhoneLandscapeInline {
  display: inline;
}

body .NotPhoneInline {
  display: inline;
}

body.IsPhone .NotPhoneInline {
  display: none !important;
}


body .PhoneInlineBlock,
body .PhonePortraitInlineBlock,
body .PhoneLandscapeInlineBlock {
  display: none;
}

body.IsPhone .PhoneInlineBlock {
  display: inline-block;
}

body.IsPhone.IsPortrait .PhonePortraitInlineBlock {
  display: inline-block;
}

body.IsPhone.IsLandscape .PhoneLandscapeInlineBlock {
  display: inline-block;
}

body .NotPhoneInlineBlock {
  display: inline-block;
}

body.IsPhone .NotPhoneInlineBlock {
  display: none !important;
}


/*************************************************************
*
* players/hexagon/css/devices/tablet.css
*
*************************************************************/


body.IsTablet input[type="text"],
body.IsTablet input[type="number"],
body.IsTablet input[type="password"],
body.IsTablet textarea,
body.IsTablet select {
  font-size: 1.2em; 
  background-color: transparent; 
  border-style: none none solid none; 
  border-radius: 0em;
}

body.IsTablet select option {
  color: #000 !important;
  background-color: #fff !important;
}


/*************************************************************
*
* players/hexagon/css/devices/orientation.css
*
*************************************************************/


span.LabelLandscape {
  display: inline;
}

span.LabelPortrait {
  display: none;
}


div.LabelLandscape {
  display: block;
}


div.LabelPortrait {
  display: none;
}


body.IsPortrait span.LabelLandscape {
  display: none;
}


body.IsPortrait span.LabelPortrait {
  display: inline;
}


body.IsPortrait div.LabelLandscape {
  display: none;
}


body.IsPortrait div.LabelPortrait {
  display: block;
}


/*************************************************************
*
* players/hexagon/css/content/helpers.css
*
*************************************************************/


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

.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

.text-justify {
  text-align: justify;
}

.text-small {
  font-size: 0.8em;
}

.text-xsmall {
  font-size: 0.6em;
}

.text-large {
  font-size: 1.2em;
}

.text-xlarge {
  font-size: 1.4em;
}


/*************************************************************
*
* players/hexagon/css/animations/animations.css
*
*************************************************************/


@keyframes BlinkedTimer1 {
  50% {
    opacity: 0.5;
  }
}

@keyframes BlinkedTimer2 {
  50% {
    opacity: 0.3;
  }
}


/*************************************************************
*
* players/hexagon/css/player/player.css
*
*************************************************************/


#TestPlayer {
  position: absolute;
  left: 0em;
  top: 0em;
  width: 100%;
  height: 100%;
}

#TestPlayer.Resizing * {
  transition: none !important;
}


/*************************************************************
*
* players/hexagon/css/player/player-content.css
*
*************************************************************/


/* player-content.phone.css */


/* #TestPlayer .PlayerContent */


#TestPlayer .PlayerContent {
  position: fixed;
  opacity: 1;
  top: 6.2em;
  bottom: 0em;
  left: 100%;
  right: -100%;
  width: 100%;
  overflow-y: hidden;
  box-sizing: border-box;
  z-index: 1;
}


#TestPlayer.IsApplicationStarted  .PlayerContent {
  left: 0%;
  right: 0%;
  width: 100%;
}



/* #TestPlayer .PlayerContent .Content* */


#TestPlayer .PlayerContent .ContentHeader {
  display: none;
}


#TestPlayer .PlayerContent .ContentFooter {
  display: none;
}



/* #TestPlayer .PlayerContent .ContentBody */


#TestPlayer .PlayerContent .ContentBody {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0em;
  bottom: 0em;
  overflow-y: auto;
  box-sizing: border-box;
  background-color: #ffffff;
  padding: 0em 6em 0em 6em;
}


#TestPlayer .PlayerContent .ContentBody .BodyWrapper {
  display: table;
  width: 100%;
  height: 100%;
}


#TestPlayer .PlayerContent .ContentBody .BodyText {
  display: table-cell;
  padding: 2em 5em 2em 5em;
  text-align: center;
  vertical-align: top;
  font-size: 1.3em;
  height: 100%;
}


#TestPlayer .PlayerContent .ContentBody .BodyText.Justify {
  text-align: justify;
}


#TestPlayer .PlayerContent .ContentBody .BodyText.Left {
  text-align: left;
}


#TestPlayer .PlayerContent .ContentBody .BodyText.Right {
  text-align: right;
}


#TestPlayer .PlayerContent .ContentBody .BodyText.Center {
  text-align: center;
}


#TestPlayer .PlayerContent .ContentBody .BodyText img {
  max-width: 50em;
  max-height: 25em;
}




#TestPlayer .PlayerContent .ContentHeader {
  display: none;
}


#TestPlayer .PlayerContent .ContentFooter {
  display: none;
}


/*************************************************************
*
* players/hexagon/css/player/player-content.phone.css
*
*************************************************************/


body.IsPhone #TestPlayer .PlayerContent {
  top: 5.5em;
}

body.IsPhone #TestPlayer .PlayerContent .ContentBody {
  _height: initial;
  padding: 0em;
}

body.IsPhone #TestPlayer .PlayerContent .ContentBody .BodyText {
  vertical-align: top;
  text-align: left;
  padding: 1.5em 1.5em 4em 1.5em;
}

body.IsPhone #TestPlayer .PlayerContent .ContentBody .BodyText img {
  max-width: 100%;
}


/*************************************************************
*
* players/hexagon/css/player/player-content-effects.css
*
*************************************************************/


#TestPlayer .PlayerContent {
  transition: 
    opacity 0.4s ease 0s,
    left 0.4s ease 0s,
    right 0.4s ease 0s,
    top 0s ease 0s,
    z-index 0s ease 0s
    !important;
}



#TestPlayer.IsApplicationStarted .PlayerContent.SlideToLeft {
  opacity: 0;
  z-index: 0;
  left: -100%;
  right: 100%;
  visibility: hidden;
  transition: 
    opacity 0s ease-out 1s,
    left 0s ease-out 1s,
    right 0s ease-out 1s,
    visibility 0s ease-out 1s,
    z-index 0s ease-out 0s
    !important;
}


#TestPlayer.IsApplicationStarted .PlayerContent.SlideToRight {
  opacity: 0;
  z-index: 1;
  left: 100%;
  right: -100%;
  visibility: hidden;
  transition: 
    opacity 0.6s ease-out 0.2s,
    left 0.8s ease-out 0s,
    right 0.8s ease-out 0s,
    visibility 0s ease-out 1s,
    z-index 0s ease-out 0s
    !important;
}


#TestPlayer.IsApplicationStarted .PlayerContent.ImmediateTop {
  z-index: 2;
  transition: 
    all 0s ease 0s 
    !important;
}


#TestPlayer.IsApplicationStarted .PlayerContent.ImmediateBottom {
  z-index: 0;
  transition: 
    all 0s ease 0s 
    !important;
}


/*************************************************************
*
* players/hexagon/css/player/participant-form.css
*
*************************************************************/


/* participant-form.phone.css */


.PlayerContent .BodyText .FormTitle {
  text-align: center;
  margin: 0em 0em 2em 0em;
}

.PlayerContent .BodyText .FormComment {
  text-align: center;
  font-size: 0.8em;
  margin-top: 1em;
  padding: 0.6em;
  background-color: #ddd;
}

.PlayerContent .FormTable {
  display: table;
  margin: 0 auto;
}

.PlayerContent .FormTable > div.FormField {
  display: table-row;
}

.PlayerContent .FormTable > div > div {
  display: table-cell;
  vertical-align: top;
  padding: 0.8em 0em 0.8em 0em;
  border-bottom: 0.15em solid #ccc;
}

.PlayerContent .FormTable > div:first-child > div {
  border-top: 0.15em solid #ccc;
}

.PlayerContent .FormTable > div > div:first-child {
  text-align: right;
  line-height: 1.8em;
}

.PlayerContent .FormTable > div > div:last-child {
  text-align: left;
  padding-left: 1em;
}

.PlayerContent .FormTable.CheckMandatory .FormField.IsMandatory *[data-is-complete="0"] {
  border-color: #f00;
}

.PlayerContent .FormTable .FormField.IsMandatory .FieldLabel::before {
  content: '*';
  display: inline-block;
  font-size: 1.0em;
  margin: 0em 0.3em 0em 0em;
  vertical-align: top;
}


/*************************************************************
*
* players/hexagon/css/player/participant-form.phone.css
*
*************************************************************/


body.IsPhone .PlayerContent .FormTable {
  display: block;
}

body.IsPhone .PlayerContent .FormTable > div.FormField {
  display: block;
}

body.IsPhone .PlayerContent .FormTable > div > div {
  display: block;
  padding: 0em;
  border: none;
}

body.IsPhone .PlayerContent .FormTable > div > div:first-child {
  text-align: left;
  color: #07798c;
  text-transform: uppercase;
  font-size: 0.9em;
  margin-top: 2.2em;
}

body.IsPhone .PlayerContent .FormTable input,
body.IsPhone .PlayerContent .FormTable select,
body.IsPhone .PlayerContent .FormTable textarea {
  margin-top: 0.8em;
}


/*************************************************************
*
* players/hexagon/css/player/application-messages.css
*
*************************************************************/


div.ApplicationAboutLogo {
  position: absolute;
  width: 6em;
  height: 5em;
  top: 0.2em;
  left: 1.5em;
  background-image: url('/m-tests/versions/release-171216-audio-190509/player/client/players/hexagon/css/player/../../images/logo/maintest-logo-1.png');
  background-repeat: no-repeat;
  background-size: 100%;
}


/*************************************************************
*
* players/hexagon/components/application-menu/component.css
*
*************************************************************/


/* css/close-button.css */
/* css/phone/component.css */


.ApplicationMenu {
  position: fixed;
  visibility: hidden;  
  left: 0em;
  top: 0em;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  z-index: 15;
  transition: 
    visibility 0s ease 0.6s;
}


.ApplicationMenu.IsVisible {
  visibility: visible;  
  transition: 
    visibility 0s ease 0s;
}

.ApplicationMenu .MenuOverlay {
  position: absolute;
  opacity: 0;  
  width: 100%;
  height: 100%;
  background-color: #000;
  transition: 
    opacity 0.4s ease 0.2s;
}

.ApplicationMenu.IsVisible .MenuOverlay {
  opacity: 0.5;  
  transition: 
    opacity 0.4s ease 0s;
}

.ApplicationMenu .MenuContent {
  position: relative;
  width: 17em;
  height: 100%;
  left: -20em;
  background-color: #fff;
  white-space: nowrap;
  box-shadow: 0em 0em 1em 0em #222;
  transition: 
    all 0.6s ease 0s;
}

.ApplicationMenu.IsVisible .MenuContent {
  left: 0em;
  transition: 
    all 0.6s ease 0.2s;
}

.ApplicationMenu .MenuHeader {
  position: relative;
  top: 0em;
  left: 0em;
  right: 0em;
  width: 100%;
  height: 4em;
  background-color: #afd5e2;
  background-image: url(/m-tests/versions/release-171216-audio-190509/player/client/players/hexagon/components/application-menu/images/maintest-logo-1.png);
  background-repeat: no-repeat;
  background-size: auto 65%;
  background-position: center;
  box-sizing: border-box;
}

.ApplicationMenu .MenuFooter {
  position: absolute;
  bottom: 0em;
  left: 0em;
  right: 0em;
  width: 100%;
  height: 4em;
  background-image: url(/m-tests/versions/release-171216-audio-190509/player/client/players/hexagon/components/application-menu/images/humantec-logo-1.png);
  background-repeat: no-repeat;
  background-size: 80% auto;
  background-position: center;
  box-sizing: border-box;
}

.ApplicationMenu .MenuBody {
  position: absolute;
  width: 100%;
  top: 4em;
  bottom: 4em;
  left: 0em;
  right: 0em;
  overflow: hidden;
  overflow-y: auto;
  padding: 0em;
  box-sizing: border-box;
}

.ApplicationMenu div.MenuGroup {
  font-size: 1em;
  font-weight: bold;
  padding: 1.2em 1.5em 1em 1.5em;
}

.ApplicationMenu button.MenuItem {
  position: relative;
  display: block;
  width: 100%;
  font-size: 0.9em;
  color: #00798c !important;
  background-color: #fff;
  text-align: left;
  padding: 0.8em 1.5em 0.8em 3.2em;
  cursor: pointer;
}

body.NotTouchable .ApplicationMenu button.MenuItem:hover {
  background-color: #eef;
}


.ApplicationMenu button.MenuItem::before {
  left: 50%;
  top: 50%;
  width: 0em;
  height: 0em;
  margin-top: 0em;
  margin-left: 0em;
}

.ApplicationMenu button.MenuItem.IsActive::before {
  left: 50%;
  top: 50%;
  width: 20em;
  height: 20em;
  margin-top: -10em;
  margin-left: -10em;
  border-radius: 10em;
}

.ApplicationMenu .MenuItem,
.ApplicationMenu .MenuGroup {
  margin: 0em;
  box-sizing: border-box;
  border-style: solid;
  border-width: 0em 0em 0.1em 0em;
  border-color: #aaa;
}

.ApplicationMenu .MenuItem.IsDisabled,
body.NotTouchable .ApplicationMenu .MenuItem.IsDisabled:hover {
  color: #aaa !important;
  background-color: transparent !important;
  cursor: default !important
}

.ApplicationMenu .MenuItem.IsChecked::after {
  content: '';
  position: absolute;
  right: 0.9em;
  width: 0.5em;
  height: 1em;
  border-width: 0.15em;
  border-color: #00798c;
  border-style: none solid solid none;
  transform: rotate(45deg);
  transform-origin: right;
}

.ApplicationMenu .MenuItem.IsChecked.IsDisabled::after {
  border-color: #aaa;
}


/*************************************************************
*
* players/hexagon/components/application-menu/css/close-button.css
*
*************************************************************/


.ApplicationMenu .CloseButton {
  position: absolute;
  font-size: 2em;
  height: 2em;
  right: 0em;
  top: 50%;
  margin-top: -1em;
  background-color: transparent;
  border: none;
  padding: 0em;
  cursor: pointer;
}


/*************************************************************
*
* players/hexagon/components/application-menu/css/phone/component.css
*
*************************************************************/


/* close-button.css */

body.IsPhone .ApplicationMenu .MenuHeader {
  background-color: #00798c;
  background-image: url(/m-tests/versions/release-171216-audio-190509/player/client/players/hexagon/components/application-menu/css/phone/../../images/maintest-logo-inverted-1.png);
}

body.IsPhone .ApplicationMenu button.MenuItem {
  font-size: 1.1em;
  padding: 0.6em 1.5em 0.6em 2.2em;
}


/*************************************************************
*
* players/hexagon/components/application-menu/css/phone/close-button.css
*
*************************************************************/


body.IsPhone .ApplicationMenu .CloseButton {
  color: #fff;
}


/*************************************************************
*
* players/hexagon/components/application-menu/css/phone/component.css
*
*************************************************************/


/* close-button.css */

body.IsPhone .ApplicationMenu .MenuHeader {
  background-color: #00798c;
  background-image: url(/m-tests/versions/release-171216-audio-190509/player/client/players/hexagon/components/application-menu/css/phone/../../images/maintest-logo-inverted-1.png);
}

body.IsPhone .ApplicationMenu button.MenuItem {
  font-size: 1.1em;
  padding: 0.6em 1.5em 0.6em 2.2em;
}


/*************************************************************
*
* players/hexagon/components/application-menu/css/phone/close-button.css
*
*************************************************************/


body.IsPhone .ApplicationMenu .CloseButton {
  color: #fff;
}


/*************************************************************
*
* players/hexagon/components/page-protocol-processing/component.css
*
*************************************************************/





/*************************************************************
*
* players/hexagon/components/player-buttons/component.css
*
*************************************************************/


/* css/behaviour.css */
/* css/phone/component.css */


/* .PlayerButtons */


.PlayerButtons {
  position: absolute;
  top: 0em;
  left: 0em;
  width: 0em;
  height: 0em;
  z-index: 2;
}


.PlayerButtons .FooterPanel {
  display: none;
}


/* .PlayerButtons button */


.PlayerButtons button {
  position: fixed;
  width: 6em;
  height: 6em;
  padding: 0em;
  margin: 0em;
  font-size: 1em;
  overflow: visible;
}

.PlayerButtons button svg {
  width: 6em;
  height: 4em;
}

.PlayerButtons button .ButtonLabel,
body.NotTouchable .PlayerButtons button:hover .ButtonLabel {
  margin-top: 0.2em;
  font-size: 0.8em;
  text-align: center;
  font-weight: bold;
  text-transform: uppercase;
  white-space: nowrap;
}

.PlayerButtons button.IsDisabled .ButtonLabel {
  visibility: hidden;
}


/* .PlayerButtons.* */


.PlayerButtons .ButtonMenu,
.PlayerButtons .ButtonBack,
.PlayerButtons .ButtonInstruction {
  left: 1em;
}

.PlayerButtons .ButtonNext,
.PlayerButtons .ButtonScrollUp,
.PlayerButtons .ButtonScrollDn {
  right: 1em;
}

.PlayerButtons .ButtonMenu,
.PlayerButtons .ButtonScrollUp {
  top: 7em;
}

.PlayerButtons .ButtonBack,
.PlayerButtons .ButtonNext {
  top: 50%;
}

.PlayerButtons .ButtonInstruction,
.PlayerButtons .ButtonScrollDn {
  bottom: 1em;
}


/*************************************************************
*
* players/hexagon/components/player-buttons/css/behaviour.css
*
*************************************************************/


#TestPlayer .PlayerButtons {
  visibility: hidden;
}

#TestPlayer.IsApplicationStarted .PlayerButtons {
  visibility: visible;
}

#TestPlayer .PlayerButtons .ButtonMenu,
#TestPlayer .PlayerButtons .ButtonBack,
#TestPlayer .PlayerButtons .ButtonInstruction {
  left: -5em;
}

#TestPlayer .PlayerButtons .ButtonNext,
#TestPlayer .PlayerButtons .ButtonScrollUp,
#TestPlayer .PlayerButtons .ButtonScrollDn {
  right: -5em;
}

#TestPlayer.IsApplicationStarted .PlayerButtons .ButtonMenu,
#TestPlayer.IsApplicationStarted .PlayerButtons .ButtonBack,
#TestPlayer.IsApplicationStarted .PlayerButtons .ButtonInstruction {
  left: 0.5em;
}

#TestPlayer.IsApplicationStarted .PlayerButtons .ButtonNext,
#TestPlayer.IsApplicationStarted .PlayerButtons .ButtonScrollUp,
#TestPlayer.IsApplicationStarted .PlayerButtons .ButtonScrollDn {
  right: 0.5em;
}


#TestPlayer.IsStartingTransition .PlayerButtons button {
  transition:
    all 1s ease-out 1s;
}

#TestPlayer .PlayerButtons .ButtonInstruction * {
  _transition: 
    all 0.3s ease 0s;
}

#TestPlayer.IsTestInstruction.IsBlockStarted .PlayerButtons .ButtonInstruction svg polygon,
#TestPlayer.IsBlockInstruction.IsBlockStarted .PlayerButtons .ButtonInstruction svg polygon {
  stroke: #00798c;
  fill: #00798c;
}

#TestPlayer.IsTestInstruction.IsBlockStarted .PlayerButtons .ButtonInstruction svg path,
#TestPlayer.IsBlockInstruction.IsBlockStarted .PlayerButtons .ButtonInstruction svg path {
  stroke: #fff;
  fill: #fff;
}

body.NotTouchable #TestPlayer.IsTestInstruction.IsBlockStarted .PlayerButtons .ButtonInstruction:hover svg polygon,
body.NotTouchable #TestPlayer.IsBlockInstruction.IsBlockStarted .PlayerButtons .ButtonInstruction:hover svg polygon {
  stroke: #f89c3e;
  fill: #f89c3e;
}


/*************************************************************
*
* players/hexagon/components/player-buttons/css/phone/component.css
*
*************************************************************/


/* behaviour.css */

body.IsPhone .PlayerButtons .FooterPanel {
  display: block;
  position: fixed;
  width: 100%;
  height: 4em;
  bottom: 0em;
  background-color: rgba(255,255,255,0.9);
  box-shadow: 0em -0.2em 0.2em 0em rgba(0,0,0,0.2);
}

body.IsPhone .PlayerButtons button {
  width: auto;
  height: auto;
  overflow: visible;
}

body.IsPhone .PlayerButtons .ButtonScrollUp,
body.IsPhone .PlayerButtons .ButtonScrollDn {
  display: none;
}

body.IsPhone .PlayerButtons .ButtonLabel {
  display: none;
}

body.IsPhone .PlayerButtons .ButtonMenu,
body.IsPhone .PlayerButtons .ButtonInstruction {
  top: 0.8em !important;
  bottom: auto !important;
}

body.IsPhone .PlayerButtons .ButtonMenu {
  left: 1em !important;
  right: auto !important;
}

body.IsPhone .PlayerButtons .ButtonInstruction {
  left: auto !important;
  right: 1em !important;
}

body.IsPhone .PlayerButtons .ButtonMenu svg,
body.IsPhone .PlayerButtons .ButtonInstruction svg {
  width: 3em;
  height: 3em;
  stroke: #fff;
  fill: #fff;
}

body.IsPhone .PlayerButtons .ButtonBack {
  top: auto !important;
  left: 0em !important;
  bottom: 0em !important;
  right: auto !important;
  width: 6em;
  height: 4em;
}

body.IsPhone .PlayerButtons .ButtonNext {
  top: auto !important;
  left: auto !important;
  bottom: 0em !important;
  right: 0em !important;
  width: 8em;
  height: 4em;
}

body.IsPhone .PlayerButtons .ButtonBack > svg {
  width: 2em;
  height: 3em;
  float: left;
  margin-left: 1em;
}

body.IsPhone .PlayerButtons .ButtonNext > svg {
  width: 2em;
  height: 3em;
  float: right;
  margin-right: 1em;
}

body.IsPhone .PlayerButtons .ButtonNext .ButtonLabel {
  display: block;
  float: right;
  font-size: 1em;
  line-height: 3em;
  margin: 0em;
  padding: 0em 0.2em;
}


/*************************************************************
*
* players/hexagon/components/player-buttons/css/phone/behaviour.css
*
*************************************************************/


body.IsPhone .PlayerButtons .ButtonInstruction {
  display: none;
}

body.IsPhone #TestPlayer.IsTestQuestion .PlayerButtons .ButtonInstruction,
body.IsPhone #TestPlayer.IsTestInstruction.IsBlockStarted .PlayerButtons .ButtonInstruction,
body.IsPhone #TestPlayer.IsBlockInstruction.IsBlockStarted .PlayerButtons .ButtonInstruction {
  display: block;
}

body.IsPhone #TestPlayer.IsTestInstruction .PlayerButtons .ButtonInstruction svg polygon,
body.IsPhone #TestPlayer.IsBlockInstruction .PlayerButtons .ButtonInstruction svg polygon {
  stroke: #fff;
  fill: #fff;
}

body.IsPhone #TestPlayer.IsTestInstruction .PlayerButtons .ButtonInstruction svg path,
body.IsPhone #TestPlayer.IsBlockInstruction .PlayerButtons .ButtonInstruction svg path {
  stroke: #00798c;
  fill: #00798c;
}


/*************************************************************
*
* players/hexagon/components/player-buttons/css/phone/component.css
*
*************************************************************/


/* behaviour.css */

body.IsPhone .PlayerButtons .FooterPanel {
  display: block;
  position: fixed;
  width: 100%;
  height: 4em;
  bottom: 0em;
  background-color: rgba(255,255,255,0.9);
  box-shadow: 0em -0.2em 0.2em 0em rgba(0,0,0,0.2);
}

body.IsPhone .PlayerButtons button {
  width: auto;
  height: auto;
  overflow: visible;
}

body.IsPhone .PlayerButtons .ButtonScrollUp,
body.IsPhone .PlayerButtons .ButtonScrollDn {
  display: none;
}

body.IsPhone .PlayerButtons .ButtonLabel {
  display: none;
}

body.IsPhone .PlayerButtons .ButtonMenu,
body.IsPhone .PlayerButtons .ButtonInstruction {
  top: 0.8em !important;
  bottom: auto !important;
}

body.IsPhone .PlayerButtons .ButtonMenu {
  left: 1em !important;
  right: auto !important;
}

body.IsPhone .PlayerButtons .ButtonInstruction {
  left: auto !important;
  right: 1em !important;
}

body.IsPhone .PlayerButtons .ButtonMenu svg,
body.IsPhone .PlayerButtons .ButtonInstruction svg {
  width: 3em;
  height: 3em;
  stroke: #fff;
  fill: #fff;
}

body.IsPhone .PlayerButtons .ButtonBack {
  top: auto !important;
  left: 0em !important;
  bottom: 0em !important;
  right: auto !important;
  width: 6em;
  height: 4em;
}

body.IsPhone .PlayerButtons .ButtonNext {
  top: auto !important;
  left: auto !important;
  bottom: 0em !important;
  right: 0em !important;
  width: 8em;
  height: 4em;
}

body.IsPhone .PlayerButtons .ButtonBack > svg {
  width: 2em;
  height: 3em;
  float: left;
  margin-left: 1em;
}

body.IsPhone .PlayerButtons .ButtonNext > svg {
  width: 2em;
  height: 3em;
  float: right;
  margin-right: 1em;
}

body.IsPhone .PlayerButtons .ButtonNext .ButtonLabel {
  display: block;
  float: right;
  font-size: 1em;
  line-height: 3em;
  margin: 0em;
  padding: 0em 0.2em;
}


/*************************************************************
*
* players/hexagon/components/player-buttons/css/phone/behaviour.css
*
*************************************************************/


body.IsPhone .PlayerButtons .ButtonInstruction {
  display: none;
}

body.IsPhone #TestPlayer.IsTestQuestion .PlayerButtons .ButtonInstruction,
body.IsPhone #TestPlayer.IsTestInstruction.IsBlockStarted .PlayerButtons .ButtonInstruction,
body.IsPhone #TestPlayer.IsBlockInstruction.IsBlockStarted .PlayerButtons .ButtonInstruction {
  display: block;
}

body.IsPhone #TestPlayer.IsTestInstruction .PlayerButtons .ButtonInstruction svg polygon,
body.IsPhone #TestPlayer.IsBlockInstruction .PlayerButtons .ButtonInstruction svg polygon {
  stroke: #fff;
  fill: #fff;
}

body.IsPhone #TestPlayer.IsTestInstruction .PlayerButtons .ButtonInstruction svg path,
body.IsPhone #TestPlayer.IsBlockInstruction .PlayerButtons .ButtonInstruction svg path {
  stroke: #00798c;
  fill: #00798c;
}


/*************************************************************
*
* players/hexagon/components/control-progress-ring/component.css
*
*************************************************************/


/* svg.ProgressRingControl */ 


svg.ProgressRingControl  {
  width: 2.2em; 
  height: 2.2em;
}


svg.ProgressRingControl circle {
  stroke: #ddd;
  stroke-width: 0.5px;
  stroke-dasharray: 1px;
  fill: transparent; 
}


svg.ProgressRingControl path {
  fill: transparent;
  stroke: #07798c; 
  stroke-width: 3px;
}


svg.ProgressRingControl * {
  transition: 
    all 0.1s ease;
}



/* svg.ProgressRingControl.IsDisabled */ 


svg.ProgressRingControl.IsDisabled circle,
#TestPlayer.IsSuspended svg.ProgressRingControl circle {
  stroke: #ccc;
}


svg.ProgressRingControl.IsDisabled rect,
#TestPlayer.IsSuspended svg.ProgressRingControl rect {
  fill: #ccc; 
}


svg.ProgressRingControl.IsDisabled line,
#TestPlayer.IsSuspended svg.ProgressRingControl line {
  stroke: #ccc;
}


svg.ProgressRingControl.IsDisabled path,
#TestPlayer.IsSuspended svg.ProgressRingControl path {
  fill: #ccc; 
}


/* svg.ProgressRingControl.IsExpired */ 


svg.ProgressRingControl.IsExpired circle {
  stroke: red !important;
}


svg.ProgressRingControl.IsExpired rect {
  fill: red !important; 
}


svg.ProgressRingControl.IsExpired line {
  stroke: red !important; 
}


svg.ProgressRingControl.IsExpired path {
  fill: #fff !important; 
}


svg.ProgressRingControl.IsExpired * {
  transition: 
    all 0s ease;
}


/*************************************************************
*
* players/hexagon/components/question-multiple-slider/component.css
*
*************************************************************/


/* css/component.phone.css */


/* .QuestionAnswers */


.MultipleSliderQuestion .QuestionAnswers {
  display: table !important;
  width: 100%;
  border-spacing: 0em;
  padding: 1em 0em 1em 0em;
}


.MultipleSliderQuestion .QuestionAnswers > div {
  display: table-row !important;
}


.MultipleSliderQuestion .QuestionAnswers > div > div {
  display: table-cell !important;
  padding-bottom: 2em;
  vertical-align: middle;
}


.MultipleSliderQuestion .QuestionAnswers > div:last-child > div {
  padding-bottom: 0em;
}



/* .QuestionAnswer */


.MultipleSliderQuestion .QuestionAnswer {
  display: inline-block;
  margin: 0em;
  padding: 1.0em 1.5em;
  border-width: 0em;
  border-color: #00798c;
  border-style: solid;
  border-radius: 0.2em;
  color: #00798c;
  background-color: transparent;
  vertical-align: top;
  white-space: normal;
  box-sizing: border-box;
  cursor: pointer;
  transition: all 0.2s ease;
}


.MultipleSliderQuestion .AnswerLeft .QuestionAnswer {
  text-align: right;
}


.MultipleSliderQuestion .AnswerRight .QuestionAnswer {
  text-align: left;
}



/* .AnswerContent */


.MultipleSliderQuestion .QuestionAnswer .AnswerContent {
  font-size: 0.9em;
}



/* .QuestionAnswer:hover */


body.NotTouchable .MultipleSliderQuestion .QuestionAnswer:hover {
  border-color: #f89c3e;
}  


/* .QuestionAnswer.IsSelected */


.MultipleSliderQuestion .QuestionAnswer.IsSelected,
body.NotTouchable .MultipleSliderQuestion .QuestionAnswer.IsSelected:hover {
  color: #fff;
  border-color: #00798c;
  background-color: #00798c !important;
}  


.MultipleSliderQuestion .QuestionAnswer.IsSelected,
body.NotTouchable .MultipleSliderQuestion .QuestionAnswer.IsSelected:hover,
.MultipleSliderQuestion .QuestionAnswer.IsShifted,
body.NotTouchable .MultipleSliderQuestion .QuestionAnswer.IsShifted:hover {
  color: #fff;
  border-color: #00798c;
  background-color: #00798c !important;
}  


.MultipleSliderQuestion .QuestionAnswer.IsShifted,
body.NotTouchable .MultipleSliderQuestion .QuestionAnswer.IsShifted:hover {
  opacity: 0.7;
}  


/* .QuestionAnswers .AnswerSlider */


.MultipleSliderQuestion .QuestionAnswers .AnswerSlider {
  width: 8em;
  padding: 0em 2em 2em 2em;
}


.MultipleSliderQuestion .QuestionAnswers .AnswerSlider .ControlSlider {
  width: 8em;
}



/* MultipleSliderQuestion .Answer* */


.MultipleSliderQuestion .AnswerLeft,
.MultipleSliderQuestion .AnswerRight {
  position: relative;
  width: 50%;
}

.MultipleSliderQuestion .AnswerLeft {
  text-align: right;
}


.MultipleSliderQuestion .AnswerRight {
  text-align: left;
}


.MultipleSliderQuestion .AnswerLeft.MimimumButton,
.MultipleSliderQuestion .AnswerRight.MimimumButton {
  width: 0%;
}


.MultipleSliderQuestion .AnswerLeft.NarrowButton,
.MultipleSliderQuestion .AnswerRight.NarrowButton {
  width: 10%;
}


.MultipleSliderQuestion .AnswerLeft.WideButton,
.MultipleSliderQuestion .AnswerRight.WideButton {
  width: 90%;
}


.MultipleSliderQuestion .AnswerLeft.FullButton,
.MultipleSliderQuestion .AnswerRight.FullButton {
  width: 100%;
}


/* .MultipleSliderQuestion .AnswerValueHint */


.MultipleSliderQuestion .AnswerLeft .AnswerValueHint,
.MultipleSliderQuestion .AnswerRight .AnswerValueHint {
display: none;
  position: absolute;
  opacity: 0;
  top: 0.5em;
  width: 4em;
  font-size: 0.8em;
  color: #fff;
  background-color: #f89c3e;
  text-align: center;
  border-radius: 1em;
  padding: 0.2em;
}


.MultipleSliderQuestion .AnswerLeft .AnswerValueHint {
  left: -3em;
}


.MultipleSliderQuestion .AnswerRight .AnswerValueHint {
  right: -3em;
}


.MultipleSliderQuestion .AnswerLeft .AnswerValueHint.IsVisible,
.MultipleSliderQuestion .AnswerRight .AnswerValueHint.IsVisible {
  opacity: 1;
  transition: opacity 0.1s ease 0s;
}


/* .MultipleSliderQuestion .QuestionSlider.IsActive */


body.NotPhone .MultipleSliderQuestion .AnswerSlider .QuestionSlider.IsActive {
  outline: 1px solid #ccc;
  outline-offset: 10px;
}


/*************************************************************
*
* players/hexagon/components/question-multiple-slider/css/component.phone.css
*
*************************************************************/


/* .MultipleSliderQuestion .QuestionAnswers */


body.IsPhone.IsPortrait .MultipleSliderQuestion .QuestionAnswers {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0em;
}


body.IsPhone.IsPortrait .MultipleSliderQuestion .QuestionAnswers > div,
body.IsPhone.IsPortrait .MultipleSliderQuestion .QuestionAnswers > div > div {
  display: block !important;
}


body.IsPhone.IsPortrait .MultipleSliderQuestion .QuestionAnswers .QuestionAnswerRow {
  border-bottom: 0.15em #00798c dashed;
}


body.IsPhone.IsPortrait .MultipleSliderQuestion .QuestionAnswers .QuestionAnswerRow:last-child {
  border-bottom: none;
}


body.IsPhone.IsPortrait .MultipleSliderQuestion .QuestionAnswers > div > div {
  padding-bottom: 0em;
}


body.IsPhone.IsPortrait .MultipleSliderQuestion .QuestionAnswers .AnswerLeft,
body.IsPhone.IsPortrait .MultipleSliderQuestion .QuestionAnswers .AnswerRight {
  position: relative;
  width: 90%;
  box-sizing: border-box;
}


body.IsPhone.IsPortrait .MultipleSliderQuestion .AnswerLeft {
  margin: 2em 0em 0em 0%;
  text-align: left;
}


body.IsPhone.IsPortrait .MultipleSliderQuestion .AnswerRight {
  margin: 0em 0em 2em 10%;
  text-align: right;
}


body.IsPhone.IsPortrait .MultipleSliderQuestion .QuestionAnswerRow:last-child .AnswerRight {
  margin-bottom: 1em;
}


body.IsPhone.IsPortrait .MultipleSliderQuestion .AnswerLeft::after {
display: none;
  content: '1';
  font-size: 1.5em;
  bottom: -1.5em;
  left: 0em;
  position: absolute;
  height: 1.5em;
  width: 1.5em;
  line-height: 1.5em;
  text-align: center;
  text-align: center;
  color: #00798c;
}


body.IsPhone.IsPortrait .MultipleSliderQuestion .AnswerRight::after {
display: none;
  content: '2';
  font-size: 1.5em;
  top: -1.5em;
  right: 0em;
  position: absolute;
  height: 1.5em;
  width: 1.5em;
  line-height: 1.5em;
  text-align: center;
  color: #00798c;
}


/* .QuestionAnswer */


body.IsPhone.IsPortrait .MultipleSliderQuestion .QuestionAnswer {
  width: 100%;
  margin: 1em 0em;
  padding: 1.0em 0.6em 0.6em 1.0em;
}


/* .MultipleSliderQuestion .AnswerContent */


body.IsPhone.IsPortrait .MultipleSliderQuestion .AnswerLeft .AnswerContent {
  text-align: left;
}


body.IsPhone.IsPortrait .MultipleSliderQuestion .AnswerRight .AnswerContent {
  text-align: right;
}


body.IsPhone.IsPortrait .MultipleSliderQuestion .QuestionAnswer {
  width: 100%;
  margin: 1em 0em;
  padding: 1.0em 0.6em 0.6em 1.0em;
}




/* .MultipleSliderQuestion .AnswerSlider */


body.IsPhone.IsPortrait .MultipleSliderQuestion .AnswerSlider {
  width: 100%;
  margin: 0em;
  margin-bottom: 0em;
  padding: 0em;
  height: 2em;
}

body.IsPhone.IsPortrait .MultipleSliderQuestion .AnswerSlider > div {
  position: static;
  margin: 0em;
  padding: 0em;
}

body.IsPhone.IsPortrait .MultipleSliderQuestion .AnswerSlider > div > div {
  margin: 0em auto;
}


/* .MultipleSliderQuestion .AnswerValueHint */


body.IsPhone.IsPortrait .MultipleSliderQuestion .AnswerLeft .AnswerValueHint {
  left: auto;
  right: -2em;
}

body.IsPhone.IsPortrait .MultipleSliderQuestion .AnswerRight .AnswerValueHint {
  right: auto;
  left: -2em;
}


body.IsPhone.IsLandscape .MultipleSliderQuestion .AnswerLeft .AnswerValueHint {
  left: -1em;
}

body.IsPhone.IsLandscape .MultipleSliderQuestion .AnswerRight .AnswerValueHint {
  right: -1em;
}


/*************************************************************
*
* players/hexagon/components/application-wheel/component.css
*
*************************************************************/


.ApplicationModal.ApplicationWheel {
  opacity: 0;  
  visibility: hidden;
  position: fixed;
  left: 0em;
  top: 0em;
  width: 100%;
  height: 100%;
  z-index: 25;
  background-color: rgba(255, 255, 255, 0.9);
  background-image: url(/m-tests/versions/release-171216-audio-190509/player/client/players/hexagon/components/application-wheel/images/wheel-indicator-1.gif);
  background-repeat: no-repeat;
  background-position: center;
  transition: 
    opacity 0.2s ease 0s,
    visibility 0s ease 0.2s;
}


.ApplicationModal.ApplicationWheel.IsVisible {
  opacity: 1;
  visibility: visible;  
  transition: 
    opacity 0.2s ease 0s,
    visibility 0s ease 0s;
}


/*************************************************************
*
* players/hexagon/components/control-question-time/component.css
*
*************************************************************/


/* css/phone/component.css */


.QuestionTimeControl {
  display: none;
}


/*************************************************************
*
* players/hexagon/components/control-question-time/css/phone/component.css
*
*************************************************************/


/* behaviour.css */


body.IsPhone .QuestionTimeControl {
  position: fixed;
  display: table;
  top: 5.6em;
  right: 1em;
  color: #07798c;
  padding: 0.5em 1em;
  z-index: 2;
}

body.IsPhone .QuestionTimeControl > div {
  display: table-cell;
  vertical-align: middle;
}

body.IsPhone .QuestionTimeControl .QuestionRestTime {
  padding-right: 1em;
  font-size: 1.3em;
}

body.IsPhone .QuestionTimeControl svg.ProgressRingControl {
  width: 2.8em;
  height: 2.8em;
}

body.IsPhone .QuestionTimeControl.IsAlertTime {
  color: #ff640e;
}

body.IsPhone .QuestionTimeControl.IsAlertTime .QuestionProgressRing path {
  stroke: #ff640e;
}


/*************************************************************
*
* players/hexagon/components/control-question-time/css/phone/behaviour.css
*
*************************************************************/


body.IsPhone #TestPlayer .QuestionTimeControl {
  right: -10em;
  color: #fff;
  background-color: rgba(0,0,0,0.4);  
  border-radius: 0.2em;
  transition: 
    right 0.3s ease 0s,
    color 0.3s ease 0s,
    background-color 0.3s ease 0s;
}

body.IsPhone #TestPlayer.IsQuestionTimeLimited.IsBlockStarted .QuestionTimeControl {
  right: 0.5em;
}

body.IsPhone #TestPlayer.IsTestQuestion.ContentScrolledTop .QuestionTimeControl {
  color: #07798c;
  background-color: rgba(255,255,255,0.8);
}

body.IsPhone #TestPlayer .QuestionTimeControl .QuestionProgressRing path {
  stroke: #fff;
  transition: 
    stroke 0.3s ease 0s;
}

body.IsPhone #TestPlayer.IsTestQuestion.ContentScrolledTop .QuestionTimeControl .QuestionProgressRing path {
  stroke: #07798c;
}

body.IsPhone #TestPlayer.IsQuestionTimeout .QuestionTimeControl,
body.IsPhone #TestPlayer.IsBlockTimeout .QuestionTimeControl,
body.IsPhone #TestPlayer.IsQuestionTimeLimited.IsBlockStarted .QuestionTimeControl.IsAlertTime {
  color: #f89c3e !important;
}

body.IsPhone #TestPlayer.IsQuestionTimeout .QuestionTimeControl .QuestionProgressRing path,
body.IsPhone #TestPlayer.IsBlockTimeout .QuestionTimeControl .QuestionProgressRing path,
body.IsPhone #TestPlayer.IsQuestionTimeLimited.IsBlockStarted .QuestionTimeControl.IsAlertTime .QuestionProgressRing path {
  stroke: #f89c3e !important;
}

body.IsPhone #TestPlayer.IsQuestionTimeout .QuestionTimeControl .QuestionProgressRing circle,
body.IsPhone #TestPlayer.IsBlockTimeout .QuestionTimeControl .QuestionProgressRing circle,
body.IsPhone #TestPlayer.IsQuestionTimeLimited.IsBlockStarted .QuestionTimeControl.IsAlertTime .QuestionProgressRing circle {
  stroke: #f89c3e !important;
}

body.IsPhone #TestPlayer.IsQuestionTimeLimited.IsTestInstruction.IsBlockStarted .QuestionTimeControl .QuestionRestTime,
body.IsPhone #TestPlayer.IsQuestionTimeLimited.IsBlockInstruction.IsBlockStarted .QuestionTimeControl .QuestionRestTime {
  animation: BlinkedTimer1 1s step-start 0s infinite;
}

body.IsPhone #TestPlayer.IsQuestionTimeLimited.IsBlockStarted .QuestionTimeControl.IsAlertTime {
  animation: BlinkedTimer2 1s step-start 0s infinite;
}


/*************************************************************
*
* players/hexagon/components/control-question-time/css/phone/component.css
*
*************************************************************/


/* behaviour.css */


body.IsPhone .QuestionTimeControl {
  position: fixed;
  display: table;
  top: 5.6em;
  right: 1em;
  color: #07798c;
  padding: 0.5em 1em;
  z-index: 2;
}

body.IsPhone .QuestionTimeControl > div {
  display: table-cell;
  vertical-align: middle;
}

body.IsPhone .QuestionTimeControl .QuestionRestTime {
  padding-right: 1em;
  font-size: 1.3em;
}

body.IsPhone .QuestionTimeControl svg.ProgressRingControl {
  width: 2.8em;
  height: 2.8em;
}

body.IsPhone .QuestionTimeControl.IsAlertTime {
  color: #ff640e;
}

body.IsPhone .QuestionTimeControl.IsAlertTime .QuestionProgressRing path {
  stroke: #ff640e;
}


/*************************************************************
*
* players/hexagon/components/control-question-time/css/phone/behaviour.css
*
*************************************************************/


body.IsPhone #TestPlayer .QuestionTimeControl {
  right: -10em;
  color: #fff;
  background-color: rgba(0,0,0,0.4);  
  border-radius: 0.2em;
  transition: 
    right 0.3s ease 0s,
    color 0.3s ease 0s,
    background-color 0.3s ease 0s;
}

body.IsPhone #TestPlayer.IsQuestionTimeLimited.IsBlockStarted .QuestionTimeControl {
  right: 0.5em;
}

body.IsPhone #TestPlayer.IsTestQuestion.ContentScrolledTop .QuestionTimeControl {
  color: #07798c;
  background-color: rgba(255,255,255,0.8);
}

body.IsPhone #TestPlayer .QuestionTimeControl .QuestionProgressRing path {
  stroke: #fff;
  transition: 
    stroke 0.3s ease 0s;
}

body.IsPhone #TestPlayer.IsTestQuestion.ContentScrolledTop .QuestionTimeControl .QuestionProgressRing path {
  stroke: #07798c;
}

body.IsPhone #TestPlayer.IsQuestionTimeout .QuestionTimeControl,
body.IsPhone #TestPlayer.IsBlockTimeout .QuestionTimeControl,
body.IsPhone #TestPlayer.IsQuestionTimeLimited.IsBlockStarted .QuestionTimeControl.IsAlertTime {
  color: #f89c3e !important;
}

body.IsPhone #TestPlayer.IsQuestionTimeout .QuestionTimeControl .QuestionProgressRing path,
body.IsPhone #TestPlayer.IsBlockTimeout .QuestionTimeControl .QuestionProgressRing path,
body.IsPhone #TestPlayer.IsQuestionTimeLimited.IsBlockStarted .QuestionTimeControl.IsAlertTime .QuestionProgressRing path {
  stroke: #f89c3e !important;
}

body.IsPhone #TestPlayer.IsQuestionTimeout .QuestionTimeControl .QuestionProgressRing circle,
body.IsPhone #TestPlayer.IsBlockTimeout .QuestionTimeControl .QuestionProgressRing circle,
body.IsPhone #TestPlayer.IsQuestionTimeLimited.IsBlockStarted .QuestionTimeControl.IsAlertTime .QuestionProgressRing circle {
  stroke: #f89c3e !important;
}

body.IsPhone #TestPlayer.IsQuestionTimeLimited.IsTestInstruction.IsBlockStarted .QuestionTimeControl .QuestionRestTime,
body.IsPhone #TestPlayer.IsQuestionTimeLimited.IsBlockInstruction.IsBlockStarted .QuestionTimeControl .QuestionRestTime {
  animation: BlinkedTimer1 1s step-start 0s infinite;
}

body.IsPhone #TestPlayer.IsQuestionTimeLimited.IsBlockStarted .QuestionTimeControl.IsAlertTime {
  animation: BlinkedTimer2 1s step-start 0s infinite;
}


/*************************************************************
*
* players/hexagon/components/page-instruction-test/component.css
*
*************************************************************/


#TestPlayer .PlayerContent.TestInstruction .ContentBody .BodyText {
  vertical-align: top;
}

#TestPlayer .TestInstruction .InstructionHeader {
  margin-bottom: 1.5em;
  text-transform: uppercase;
}

#TestPlayer .TestInstruction .InstructionContent {
  font-size: 0.9em;
}


/*************************************************************
*
* players/hexagon/components/question-multiple-ranking/component.css
*
*************************************************************/


/* css/component.phone.css */


/* .QuestionAnswers */


.RankingQuestion .QuestionAnswers {
  text-align: center;
}


.RankingQuestion .QuestionAnswers > div {
  position: relative;
  display: inline-block;
  min-width: 20em;
  max-width: 80em;
}


/* .AnswersContainer */


.RankingQuestion .AnswersContainer {
  position: absolute;
  top: 0em;
  left: -1em;
  width: 100%;
  height: 100%;
}


/* .QuestionAnswer */


.RankingQuestion .QuestionAnswer {
  position: absolute;
  display: block;
  width: 100%;
  padding: 1em 1em 0em 0em;
  transition: 
    top 0.3s ease,
    left 0.3s ease;
}


/* .AnswerContainer */


.RankingQuestion .AnswerContainer {
  position: relative;
  display: table;
  width: 100%;
  padding: 1em 1em 0em 0em;
}


/* .RankContainer */


.RankingQuestion .RankContainer {
  display: table-cell;
  padding: 0em 1em 0em 0em;
  vertical-align: middle;
}



.RankingQuestion .RankContainer .AnswerRank {
  display: block;
  width: 1.3em;
  height: 1.3em;
  line-height: 1.3em;
  border-radius: 1.3em;
  padding: 0em;
  border: 0.1em transparent solid;
  font-size: 1.5em;
  color: #00798c;
  background-color: #fff;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}



/* .AnswerContainer */


.RankingQuestion .QuestionAnswer .AnswerContent {
  display: table-cell;
  width: 100%;
  font-size: 1em;
  color: #00798c;
  background-color: #f8f8ff;
  border-color: #00798c;
  border-width: 0.15em;
  border-style: solid;
  border-radius: 0.1em;
  text-align: center;  
  padding: 0.6em 2em 0.6em 2em;
  overflow: hidden;  
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.3s ease;
}


.TestQuestion.InlineAnswers .RankingQuestion .QuestionAnswer .AnswerContent {
  width: auto;
}


/* .QuestionAnswer .*:hover */


body.NotTouchable .RankingQuestion .QuestionAnswer .AnswerContent:hover {
  border-color: orange;
}  


/* .QuestionAnswer.IsFocused */


.RankingQuestion .QuestionAnswer.IsFocused {
  z-index: 1000;  
}


.RankingQuestion .QuestionAnswer.IsFocused .AnswerRank {
  border-color: #00798c;
}  

.RankingQuestion .QuestionAnswer.IsFocused .AnswerContent,
body.NotTouchable .RankingQuestion .QuestionAnswer.IsFocused .AnswerContent:hover {
  color: #fff;
  border-color: #00798c;
  background-color: #00798c !important;
}  
  
.RankingQuestion .QuestionAnswer.IsFocused .ButtonsContainer {
  visibility: visible;
  opacity: 1;
}  
 


/* .MoveButtons */


.RankingQuestion .QuestionAnswer .ButtonsContainer {
  opacity: 0.5;
  display: table-cell;
  position: absolute;
visibility: hidden;
  margin-top: 0.6em;
  transition: all 0.3s ease;
}


.RankingQuestion .QuestionAnswer .ButtonsContainer.Left {
  left: 3.2em;
  bottom: 0.2em;
}

.RankingQuestion .QuestionAnswer .ButtonsContainer.Right {
  right: 1.1em;
  bottom: 0.2em;
}

.RankingQuestion .ButtonsContainer .ButtonMoveDn,
.RankingQuestion .ButtonsContainer .ButtonMoveUp {
  position: relative;
  display: inline-block;
  width: 1.8em; 
  height: 1.8em; 
  border-radius: 1.8em;
  text-align: center;
  padding: 0em 0em 0em 0em;
  margin-left: 0.2em;
  cursor: pointer;
  transition: all 0.3s ease;
}


.RankingQuestion .QuestionAnswer .ButtonMoveDn,
.RankingQuestion .QuestionAnswer .ButtonMoveUp {
  color: #fff;
}

body.NotTouchable .RankingQuestion .QuestionAnswer .ButtonMoveDn:hover,
body.NotTouchable .RankingQuestion .QuestionAnswer .ButtonMoveUp:hover {
_color: orange;
_border: 1px #fff solid;
}

.RankingQuestion .QuestionAnswer.IsLast .ButtonMoveDn,
body.NotTouchable .RankingQuestion .QuestionAnswer.IsLast .ButtonMoveDn:hover,
.RankingQuestion .QuestionAnswer.IsFirst .ButtonMoveUp,
body.NotTouchable .RankingQuestion .QuestionAnswer.IsFirst .ButtonMoveUp:hover {
_color: #eee;
  opacity: 0;
  cursor: default;
}

.RankingQuestion .ButtonsContainer .ButtonMoveDn > span,
.RankingQuestion .ButtonsContainer .ButtonMoveUp > span {
  display: inline-block;
  font-size: 1.3em;
}

.TestQuestion.InlineAnswers .RankingQuestion .ButtonsContainer .ButtonMoveDn > span {
  transform: rotate(0deg);
}

.TestQuestion.InlineAnswers .RankingQuestion .ButtonsContainer .ButtonMoveUp > span {
  transform: rotate(180deg);
}


/*************************************************************
*
* players/hexagon/components/question-multiple-ranking/css/component.phone.css
*
*************************************************************/


/* .RankContainer */



body.IsPhone .TestQuestion.InlineAnswers .RankingQuestion .QuestionAnswer {
  width: auto;
}



body.IsPhone .TestQuestion.InlineAnswers .RankingQuestion .AnswerContainer {
  width: auto;
}



body.IsPhone .RankingQuestion .RankContainer {
  font-size: 0.8em;
  padding: 0em 0.5em 0em 0.5em;
}


body.IsPhone .RankingQuestion .QuestionAnswer.IsFocused .AnswerRank {
  border-color: #00798c;
  background-color: #00798c;
  color: #fff;
}  


/* .AnswerContainer */


body.IsPhone .RankingQuestion .QuestionAnswer .AnswerContent {
  background-color: #fff;
}


/* .ButtonsContainer */


body.IsPhone .RankingQuestion .QuestionAnswer .ButtonsContainer.Left {
  left: 2.5em;
}

body.IsPhone .TestQuestion.InlineAnswers .RankingQuestion .QuestionAnswer .ButtonsContainer.Left {
  left: 0em;
}


/*************************************************************
*
* players/hexagon/components/application-flash/component.css
*
*************************************************************/


.ApplicationFlash {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0%;
  right: 0%;
  background-color: #fff;
  z-index: 100;
  transition: 
    left 0.5s ease 0s,
    right 0.5s ease 0s;
}

.ApplicationFlash.SlideToRight {
  left: 100%;
  right: -100%;
}

.ApplicationFlash.SlideToLeft {
  left: -100%;
  right: 100%;
}

.ApplicationFlash > div {
  display: table;
  width: 100%;
  height: 100%;
}

.ApplicationFlash .FlashContainer {
  display: table-cell;
  width: 100%;
  height: 100%;
  text-align: center;
  vertical-align: middle;
}

.ApplicationFlash .FlashContainer object {
  vertical-align: bottom
}


/*************************************************************
*
* players/hexagon/components/page-test-question/component.css
*
*************************************************************/


/* css/behaviour.css */
/* css/phone/component.css */


#TestPlayer .TestQuestion .ContentBody .BodyText {
  vertical-align: middle;
}


#TestPlayer .TestQuestion .QuestionTimeout,
#TestPlayer .TestQuestion .BlockTimeout {
  display: none;
}


#TestPlayer .TestQuestion.QuestionTimeout .QuestionContent,
#TestPlayer .TestQuestion.BlockTimeout .QuestionContent {
  display: none;
}


#TestPlayer .TestQuestion.IsQuestionTimeout .ContentBody.QuestionTimeout,
#TestPlayer .TestQuestion.IsBlockTimeout .ContentBody.BlockTimeout {
  display: block;
}

#TestPlayer .TestQuestion.IsQuestionTimeout .ContentBody.QuestionContent,
#TestPlayer .TestQuestion.IsBlockTimeout .ContentBody.QuestionContent {
  display: none;
}



/* .TestQuestion .QuestionHeader */


#TestPlayer .TestQuestion .QuestionHeader {
  display: none;
}


/* .TestQuestion .QuestionText */


.TestQuestion .QuestionText {
  font-size: 1.1em;
  min-height: 3em;
  padding-bottom: 1em;
  box-sizing: border-box;
  text-align: center;
}

.TestQuestion .QuestionText > div {
  display: inline-block;
_text-align: center;
text-align: justify;
}


.TestQuestion .QuestionAnswers {
  min-height: 2em;
  text-align: center;
}


.TestQuestion .QuestionAnswers {
}


.TestQuestion .QuestionAnswers > div {
  display: inline-block;
}



.TestQuestion div.QuestionImage {
  width: 100%;
  text-align: center;
  margin: 1.2em 0em 0em 0em;
}

.TestQuestion div.AnswerImage {
  position: relative;
  text-align: center;
}

.TestQuestion .QuestionAnswer.IsSelected .AnswerImage::after {
  content: '';
  position: absolute;
  left: 0em;
  top: 0em;
  width: 100%;
  height: 100%;
  background-color: #00798c;
  opacity: 0.3;
  transition: all 0.2s ease;
}

.TestQuestion img.QuestionImage,
.TestQuestion img.AnswerImage {
  width: auto;
  height: auto;
  max-width: 50em;
  max-height: 25em;
  border-radius: 0.1em;
}

.TestQuestion .QuestionAnswer.IsSelected img.AnswerImage {
  _border-radius: 0.3em;
}


/* .TestQuestion.HorizontalLayout */


body.NotPhone #TestPlayer .TestQuestion.HorizontalLayout .ContentBody .BodyText {
  padding: 2em 1em 2em 1em;
}


body.NotPhone .TestQuestion.HorizontalLayout .BodyText > div > div  {
  display: table;
  width: 100%;
}


body.NotPhone .TestQuestion.HorizontalLayout .BodyText > div > div > div  {
  display: table-cell;
  width: 50%;
  text-align: center;
  vertical-align: top;
  padding: 0em 2em;
}


body.NotPhone .TestQuestion.HorizontalLayout.VerticalAnswers .QuestionAnswer:first-child {
  margin-top: 0px !important;
}


/* .TestQuestion.VerticalAnswers, .TestQuestion.HorizontalAnswers */


body.NotPhone #TestPlayer .TestQuestion.VerticalAnswers .QuestionAnswer {
  display: block !important;
}

body.NotPhone #TestPlayer .TestQuestion.HorizontalAnswers .QuestionAnswer {
  display: inline-block !important;
  white-space: normal;
}

body.NotPhone #TestPlayer .TestQuestion.HorizontalAnswers .QuestionAnswers > div {
  white-space: nowrap;
}


/* .TestQuestion.QuestionImage* */


#TestPlayer .TestQuestion div.QuestionImage:last-child,
#TestPlayer .TestQuestion.QuestionImageTop div.QuestionImage:first-child,
#TestPlayer .TestQuestion.QuestionImageLeft div.QuestionImage:first-child,
#TestPlayer .TestQuestion.QuestionImageRight div.QuestionImage:first-child,
#TestPlayer .TestQuestion.QuestionImageBottom div.QuestionImage:last-child {
  display: block !important;
}

#TestPlayer .TestQuestion div.QuestionImage:first-child,
#TestPlayer .TestQuestion.QuestionImageTop div.QuestionImage:last-child,
#TestPlayer .TestQuestion.QuestionImageLeft div.QuestionImage:last-child,
#TestPlayer .TestQuestion.QuestionImageRight div.QuestionImage:last-child,
#TestPlayer .TestQuestion.QuestionImageBottom div.QuestionImage:first-child {
  display: none !important;
}

body.NotPhone #TestPlayer .TestQuestion.QuestionImageTop div.QuestionImage:first-child {
  margin: 0em 0em 1.2em 0em;
}

body.NotPhone #TestPlayer .TestQuestion.QuestionImageBottom div.QuestionImage:first-child {
  margin: 1.2em 0em 0em 0em;
}

body.NotPhone #TestPlayer .TestQuestion.QuestionImageLeft div.QuestionImage:first-child {
  width: auto;
  float: left;
  margin: 0em 1.5em 0.5em 0em;
}

body.NotPhone #TestPlayer .TestQuestion.QuestionImageRight div.QuestionImage:first-child {
  width: auto;
  float: right;
  margin: 0em 0em 0.5em 1.5em;
}


/*************************************************************
*
* players/hexagon/components/page-test-question/css/behaviour.css
*
*************************************************************/


#TestPlayer .TestQuestion {
  opacity: 0;
}

#TestPlayer.IsApplicationStarted .TestQuestion {
  opacity: 1;
  transition: 
    opacity 1s ease 0s;
}


/*************************************************************
*
* players/hexagon/components/page-test-question/css/phone/component.css
*
*************************************************************/


body.IsPhone #TestPlayer .TestQuestion .ContentBody .BodyWrapper {
  height: auto;
}


body.IsPhone #TestPlayer .TestQuestion .ContentBody .BodyText {
  text-align: left;
  vertical-align: top;
  padding: 0em 0em 4em 0em;
}


/* .QuestionHeader */


body.IsPhone #TestPlayer .TestQuestion .QuestionHeader {
  display: block;
  font-size: 1.3em;
  color: #07798c;
  padding: 1em 1.5em;
  border-bottom: 1px #ccc solid;
  text-transform: uppercase;
}


body.IsPhone #TestPlayer .TestQuestion .QuestionHeader > span {
  font-size: 0.9em;
}


/* .QuestionText */


body.IsPhone .TestQuestion .QuestionText {
  min-height: 0em;
  font-size: 1em;
  border-bottom: none;
  padding: 0em 1.5em;
  margin: 1em 0em;
}


body.IsPhone.IsPortrait .TestQuestion .QuestionText,
body.IsPhone.IsPortrait .TestQuestion .QuestionText > div {
  width: 100%;
  text-align: left;
}


body.IsPhone.IsLandscape .TestQuestion .QuestionText,
body.IsPhone.IsLandscape .TestQuestion .QuestionText > div {
  text-align: center;
}


body.IsPhone .TestQuestion .QuestionAnswers {
  min-height: 0em;
  font-size: 1em;
  text-align: left;
  margin: 1em 0em 0em 0em;
}


body.IsPhone .TestQuestion .QuestionAnswers,
body.IsPhone .TestQuestion .QuestionAnswers > div,
body.IsPhone .TestQuestion .QuestionAnswers > div > div {
  width: 100%;
}


body.IsPhone .TestQuestion .QuestionAnswer {
  width: 100%;
  padding-left: 3em;
}

body.IsPhone .TestQuestion div.QuestionImage {
  margin: 1em 0em;
}


body.IsPhone .TestQuestion img.QuestionImage {
  max-width: 100%;
}


body.IsPhone.IsLandscape .TestQuestion img.QuestionImage {
  max-width: 100%;
}



body.IsPhone #TestPlayer .TestQuestion .ContentBody.BlockTimeout .BodyText,
body.IsPhone #TestPlayer .TestQuestion .ContentBody.QuestionTimeout .BodyText {
  padding: 1em 1.5em;
}


/*************************************************************
*
* players/hexagon/components/page-test-question/css/phone/component.css
*
*************************************************************/


body.IsPhone #TestPlayer .TestQuestion .ContentBody .BodyWrapper {
  height: auto;
}


body.IsPhone #TestPlayer .TestQuestion .ContentBody .BodyText {
  text-align: left;
  vertical-align: top;
  padding: 0em 0em 4em 0em;
}


/* .QuestionHeader */


body.IsPhone #TestPlayer .TestQuestion .QuestionHeader {
  display: block;
  font-size: 1.3em;
  color: #07798c;
  padding: 1em 1.5em;
  border-bottom: 1px #ccc solid;
  text-transform: uppercase;
}


body.IsPhone #TestPlayer .TestQuestion .QuestionHeader > span {
  font-size: 0.9em;
}


/* .QuestionText */


body.IsPhone .TestQuestion .QuestionText {
  min-height: 0em;
  font-size: 1em;
  border-bottom: none;
  padding: 0em 1.5em;
  margin: 1em 0em;
}


body.IsPhone.IsPortrait .TestQuestion .QuestionText,
body.IsPhone.IsPortrait .TestQuestion .QuestionText > div {
  width: 100%;
  text-align: left;
}


body.IsPhone.IsLandscape .TestQuestion .QuestionText,
body.IsPhone.IsLandscape .TestQuestion .QuestionText > div {
  text-align: center;
}


body.IsPhone .TestQuestion .QuestionAnswers {
  min-height: 0em;
  font-size: 1em;
  text-align: left;
  margin: 1em 0em 0em 0em;
}


body.IsPhone .TestQuestion .QuestionAnswers,
body.IsPhone .TestQuestion .QuestionAnswers > div,
body.IsPhone .TestQuestion .QuestionAnswers > div > div {
  width: 100%;
}


body.IsPhone .TestQuestion .QuestionAnswer {
  width: 100%;
  padding-left: 3em;
}

body.IsPhone .TestQuestion div.QuestionImage {
  margin: 1em 0em;
}


body.IsPhone .TestQuestion img.QuestionImage {
  max-width: 100%;
}


body.IsPhone.IsLandscape .TestQuestion img.QuestionImage {
  max-width: 100%;
}



body.IsPhone #TestPlayer .TestQuestion .ContentBody.BlockTimeout .BodyText,
body.IsPhone #TestPlayer .TestQuestion .ContentBody.QuestionTimeout .BodyText {
  padding: 1em 1.5em;
}


/*************************************************************
*
* players/hexagon/components/modal-application-feedback/component.css
*
*************************************************************/


.ApplicationFeedback .TableCell {
  padding: 0.2em;
}


/*************************************************************
*
* players/hexagon/components/question-multiple-string/component.css
*
*************************************************************/


/* css/phone/component.css */


/* .QuestionAnswer */


.MultipleStringQuestion .QuestionAnswer {
  display: block;
  min-width: 5em;
  margin: 1em 1em 0em 0em;
  padding: 0.6em 1.6em 0.6em 2.2em;
  box-sizing: border-box;
  border-color: #00798c;
  border-width: 0.15em;
  border-style: solid;
  border-radius: 0.1em;
  color: #00798c;
  background-color: transparent;
  text-align: left;
  vertical-align: top;
  cursor: pointer;
  transition: 
    color 0.2s ease 0s,
    background-color 0.2s ease 0s;
}


.MultipleStringQuestion.ShortAnswers .QuestionAnswer {
  display: inline-block;
}


/* .QuestionAnswer .AnswerCheck */


.MultipleStringQuestion .QuestionAnswer .AnswerCheck {
  position: relative;
  width: 0.8em;
  height: 0.8em;
  line-height: 0.8em;
  margin-left: -1.5em;
  margin-top: 0.1em;  
  border-width: 0.15em;
  border-color: #00798c;
  border-style: solid;
  border-radius: 0.1em;
  background-color: #fff;
  float: left;
  transition: 
    color 0.2s ease 0s,
    background-color 0.2s ease 0s;
}


.MultipleStringQuestion .QuestionAnswer .AnswerCheck::after {
  content: '';
  position: absolute;
  top: 0.05em;
  left: 0.25em;
  width: 0.3em;
  height: 0.7em;
  margin: -0.15em 0em 0em -0.05em;
  border-width: 0.15em;
  border-color: #00798c;
  border-style: none solid solid none;
  transform: scale(0) rotate(45deg);
  transition: 
    transform 0.2s ease 0s;
}


/* .QuestionAnswer:hover */


body.NotTouchable .MultipleStringQuestion .QuestionAnswer:hover {
  border-color: #f89c3e;
}  


body.NotTouchable .MultipleStringQuestion .QuestionAnswer:hover .AnswerCheck {
  border-color: #f89c3e;
}  



/* .QuestionAnswer.IsSelected */


.MultipleStringQuestion .QuestionAnswer.IsSelected,
body.NotTouchable .MultipleStringQuestion .QuestionAnswer.IsSelected:hover {
  color: #fff;
  border-color: #00798c;
  background-color: #00798c !important;
}  


.MultipleStringQuestion .QuestionAnswer.IsSelected .AnswerCheck,
body.NotTouchable .MultipleStringQuestion .QuestionAnswer.IsSelected:hover .AnswerCheck {
  border-width: 0.15em;
  border-color: #fff;
  background-color: #fff;
}  


.MultipleStringQuestion .QuestionAnswer.IsSelected .AnswerCheck::after {
  transform: scale(1) rotate(45deg);
}


/* .QuestionAnswer .AnswerInput */


.MultipleStringQuestion .QuestionAnswer input[type='text'],
.MultipleStringQuestion .QuestionAnswer input[type='text']:hover {
  color: #ccc;
  border-color: #ccc;

}


.MultipleStringQuestion .QuestionAnswer.IsSelected input[type='text'],
body.NotTouchable .MultipleStringQuestion.IsSelected .QuestionAnswer input[type='text'] {
  color: #00798c;
  border-color: #00798c;
}


.MultipleStringQuestion .QuestionAnswer.IsSelected input[type='text']:focus,
body.NotTouchable .MultipleStringQuestion.IsSelected .QuestionAnswer input[type='text']:hover {
  border-color: #f89c3e;
}


/*************************************************************
*
* players/hexagon/components/question-multiple-string/css/phone/component.css
*
*************************************************************/


body.IsPhone .MultipleStringQuestion .QuestionAnswer {
  border-width: 1px 0px 0px 0px;
  border-color: #ccc;
  border-radius: 0em;
  margin: 0em;
}

body.IsPhone .MultipleStringQuestion .QuestionAnswer:last-child {
  border-width: 1px 0px 1px 0px;
}

body.IsPhone .MultipleStringQuestion .QuestionAnswer.IsSelected {
  border-color: #fff;
}


/*************************************************************
*
* players/hexagon/components/question-multiple-string/css/phone/component.css
*
*************************************************************/


body.IsPhone .MultipleStringQuestion .QuestionAnswer {
  border-width: 1px 0px 0px 0px;
  border-color: #ccc;
  border-radius: 0em;
  margin: 0em;
}

body.IsPhone .MultipleStringQuestion .QuestionAnswer:last-child {
  border-width: 1px 0px 1px 0px;
}

body.IsPhone .MultipleStringQuestion .QuestionAnswer.IsSelected {
  border-color: #fff;
}


/*************************************************************
*
* players/hexagon/components/question-multiple/component.css
*
*************************************************************/


/* css/phone/component.css */


/* .QuestionAnswer */


.MultipleQuestion .QuestionAnswer {
  display: block;
  min-width: 5em;
  margin: 1em 1em 0em 0em;
  padding: 0.6em 1.6em 0.6em 2.2em;
  box-sizing: border-box;
  border-color: #00798c;
  border-width: 0.15em;
  border-style: solid;
  border-radius: 0.1em;
  color: #00798c;
  background-color: transparent;
  text-align: left;
  vertical-align: top;
  cursor: pointer;
  transition: 
    color 0.2s ease 0s,
    background-color 0.2s ease 0s;
}


.MultipleQuestion.ShortAnswers .QuestionAnswer {
  display: inline-block;
}


/* .QuestionAnswer .AnswerCheck */


.MultipleQuestion .QuestionAnswer .AnswerCheck {
  position: relative;
  width: 0.8em;
  height: 0.8em;
  line-height: 0.8em;
  margin-left: -1.5em;
  margin-top: 0.1em;  
  border-width: 0.15em;
  border-color: #00798c;
  border-style: solid;
  border-radius: 0.1em;
  background-color: #fff;
  float: left;
  transition: 
    color 0.2s ease 0s,
    background-color 0.2s ease 0s;
}


.MultipleQuestion .QuestionAnswer .AnswerCheck::after {
  content: '';
  position: absolute;
  top: 0.05em;
  left: 0.25em;
  width: 0.3em;
  height: 0.7em;
  margin: -0.15em 0em 0em -0.05em;
  border-width: 0.15em;
  border-color: #00798c;
  border-style: none solid solid none;
  transform: scale(0) rotate(45deg);
  transition: 
    transform 0.2s ease 0s;
}



/* .QuestionAnswer:hover */


body.NotTouchable .MultipleQuestion .QuestionAnswer:hover {
  border-color: #f89c3e;
}  


body.NotTouchable .MultipleQuestion .QuestionAnswer:hover .AnswerCheck {
  border-color: #f89c3e;
}  



/* .QuestionAnswer.IsSelected */


.MultipleQuestion .QuestionAnswer.IsSelected,
body.NotTouchable .MultipleQuestion .QuestionAnswer.IsSelected:hover {
  color: #fff;
  border-color: #00798c;
  background-color: #00798c !important;
}  


.MultipleQuestion .QuestionAnswer.IsSelected .AnswerCheck,
body.NotTouchable .MultipleQuestion .QuestionAnswer.IsSelected:hover .AnswerCheck {
  border-width: 0.15em;
  border-color: #fff;
  background-color: #fff;
}  


.MultipleQuestion .QuestionAnswer.IsSelected .AnswerCheck::after {
  transform: scale(1) rotate(45deg);
}


/*************************************************************
*
* players/hexagon/components/question-multiple/css/phone/component.css
*
*************************************************************/


body.IsPhone .MultipleQuestion .QuestionAnswer {
  border-width: 1px 0px 0px 0px;
  border-color: #ccc;
  border-radius: 0em;
  margin: 0em;
}

body.IsPhone .MultipleQuestion .QuestionAnswer:last-child {
  border-width: 1px 0px 1px 0px;
}

body.IsPhone .MultipleQuestion .QuestionAnswer.IsSelected {
  border-color: #fff;
}


/*************************************************************
*
* players/hexagon/components/question-multiple/css/phone/component.css
*
*************************************************************/


body.IsPhone .MultipleQuestion .QuestionAnswer {
  border-width: 1px 0px 0px 0px;
  border-color: #ccc;
  border-radius: 0em;
  margin: 0em;
}

body.IsPhone .MultipleQuestion .QuestionAnswer:last-child {
  border-width: 1px 0px 1px 0px;
}

body.IsPhone .MultipleQuestion .QuestionAnswer.IsSelected {
  border-color: #fff;
}


/*************************************************************
*
* players/hexagon/components/page-form-preliminary/component.css
*
*************************************************************/


.PreliminaryForm .BodyText {
  vertical-align: top;
}

.PreliminaryForm select {
  max-width: 25em;
}


/*************************************************************
*
* players/hexagon/components/page-form-consent/component.css
*
*************************************************************/


/* css/phone/component.css */


.PersonalConsent .ConsentContent {
  display: block;
}


.PersonalConsent .RefusedContent {
  display: none;
}


#TestPlayer.ConsentIsRefused .PersonalConsent .ConsentContent {
  display: none;
}


#TestPlayer.ConsentIsRefused .PersonalConsent .RefusedContent {
  display: block;
}


.PersonalConsent .BodyText > div {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: auto;
}


.PersonalConsent .ConsentText {
  position: absolute;
  width: 100%;
  top: 0em;
  bottom: 4em;
  overflow: auto;
  padding: 0.5em 1em;
  background-color: #f8f8f8;
  border: 0.15em #07798c solid;
  box-sizing: border-box;
}


.PersonalConsent .ConsentText > div {
  font-size: 0.8em;
}


.PersonalConsent .ConsentButtons {
  position: absolute;
  bottom: 0em;
  box-sizing: border-box;
  width: 100%;
  padding: 0.5em 1em;
  text-align: center;
}


.PersonalConsent .ConsentButtons > div {
  text-align: left;
  display: inline-block;
}


.PersonalConsent .ConsentButtons label {
  font-size: 0.9em;
  line-height: 1.5em;
}


/*************************************************************
*
* players/hexagon/components/page-form-consent/css/phone/component.css
*
*************************************************************/


body.IsPhone .PersonalConsent .ConsentText {
  bottom: 4em;
}


body.IsPhone .PersonalConsent .ConsentButtons {
  bottom: 0em;
}


/*************************************************************
*
* players/hexagon/components/page-form-consent/css/phone/component.css
*
*************************************************************/


body.IsPhone .PersonalConsent .ConsentText {
  bottom: 4em;
}


body.IsPhone .PersonalConsent .ConsentButtons {
  bottom: 0em;
}


/*************************************************************
*
* players/hexagon/components/application-modal/component.css
*
*************************************************************/


/* css/close-button.css */
/* css/modal-indicator.css */
/* css/component.phone.css */
/* css/component.tablet.css */


.ApplicationModal {
  opacity: 0;  
  visibility: hidden;  
  position: fixed;
  left: 0em;
  top: 0em;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  z-index: 20;
  transition: 
    opacity 0.3s ease 0.1s,
    visibility 0s ease 0.4s;
}


.ApplicationModal.IsVisible {
  opacity: 1;  
  visibility: visible;  
  transition: 
    opacity 0.2s ease 0s,
    visibility 0s ease 0s;
}

.ApplicationModal .ModalOverlay {
  opacity: 0;  
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #000;
  transition: 
    opacity 0.2s ease 0.2s;
}

.ApplicationModal.IsVisible .ModalOverlay {
  opacity: 0.5;  
  transition: 
    opacity 0.4s ease 0s;
}

.ApplicationModal .ModalContent {
  position: fixed;
  display: table;
  width: 100%;
  height: 100%;
}

.ApplicationModal div.ModalContent > div {
  display: table-cell;
  width: 100%;
  height: 100%;
  text-align: center;
  vertical-align: middle;
  perspective: 1500px;
}

.ApplicationModal .ModalPanel {
  font-size: 1.1em;
  position: relative;
  display: inline-block;
  min-width: 12em;
  max-width: 75%;
  margin: 5em 5em;
  background-color: #fff;
  border: 0.15em #077c92 solid;
  border-radius: 0.15em;
  padding: 1.5em;
  text-align: left;
  overflow: auto;
  box-shadow: 0em 0em 1em 0em #222;
  transform: rotateY(-90deg);
  transform-style: preserve-3d;
  transition: 
    transform 0.2s ease-out 0.1s;
}

.ApplicationModal.IsVisible .ModalPanel {
  transform: rotateY(0deg);
  transition: 
    transform 0.3s ease-out 0.1s;
}

.ApplicationModal .ModalHeader {
  font-weight: bold;
  margin: 0.2em 0em 1.2em 0em;
}

.ApplicationModal .ModalFooter {
  margin: 0.8em -1em -0.8em 0em;
  text-align: right;
}

.ApplicationModal .ModalFooter button {
  font-size: 0.9em;
  text-transform: uppercase;
}

.ApplicationModal .ModalBody {
  font-size: 1em;
  max-width: 45em;
}

.ApplicationModal .ModalBody ul {
  display: inline-block;
  text-align: center; 
}

.ApplicationModal .ModalBody ul > li {
  text-align: left; 
}

.ApplicationModal .ModalBody .ContentBlock {
  margin-bottom: 0.5em;
}

.ApplicationModal .ModalBody .ContentBlock:last-child {
  margin-bottom: 0em;
}

.ApplicationModal .ModalBody .ContentHeader {
  color: #f89c3e;
  margin: 1.2em 0em 0.8em 0em;
}

.ApplicationModal .ModalBody .ContentLabel {
  color: #f89c3e;
}

.ApplicationModal .ModalBody .ContentValue {
  margin: 0em 0em 0em 0.5em;
}

.ApplicationModal .ScrollableBlock {
  text-align: left; 
  width: auto;
  height: 6em;
  overflow-y: auto;
  padding: 0.5em 1.0em;
  border: 0.15em #07798c solid; 
  margin: 1em 0em 1em 0em;
  background-color: #f8f8f8;
}


/*************************************************************
*
* players/hexagon/components/application-modal/css/close-button.css
*
*************************************************************/


.ApplicationModal .CloseButton {
  display: none;
  position: absolute;
  right: 0em;
  top: 0em;
  width: 1em;
  height: 1em;
  line-height: 0.6em;
  font-size: 1.6em;
  background-color: transparent;
  border: none;
  padding: 0em;
  margin: 0.2em;
  text-align: center;
  vertical-align: top;
  z-index: 1;
  cursor: pointer;
}

.ApplicationModal.ModalClosable .CloseButton {
  display: block;
}


/*************************************************************
*
* players/hexagon/components/application-modal/css/modal-indicator.css
*
*************************************************************/


/* animated-wheel.css */


.ApplicationModal.ModalIndicator .ModalPanel {
  min-width: 8em;
  padding: 2.5em 2em;
}

.ApplicationModal .IndicatorWheel {
  display: inline-block; 
  width: 2.2em; 
  height: 2.2em;  
  margin: -0.2em 1em 0em 0em; 
  margin-right: 1em; 
  vertical-align: top;
}

.ApplicationModal .IndicatorWheel svg {
  width: 100%;
  height: 100%;
}

.ApplicationModal .IndicatorText {
  display: inline-block; 
  height: 2em;
  line-height: 2em;
  vertical-align: top; 
}

.ApplicationModal .IndicatorEllipsis {
  position: relative;
  display: inline-block;
  width: 2em;
  height: 2em;
  line-height: 2em;
  box-sizing: border-box;
  animation: OscilatingEllipsis3 3s ease-in-out infinite;
}

.ApplicationModal .IndicatorEllipsis::before {
  content: '.';
  position: absolute;
  display: inline-block;
  width: 2em;
  left: 0.35em;  
  top: 0em;  
  box-sizing: border-box;
  animation: OscilatingEllipsis2 3s ease-in-out infinite;
}

.ApplicationModal .IndicatorEllipsis::after {
  content: '.';
  position: absolute;
  display: inline-block;
  width: 2em;
  left: 0.7em;  
  top: 0em;  
  box-sizing: border-box;
  animation: OscilatingEllipsis1 3s ease-in-out infinite;
}

@keyframes OscilatingEllipsis1 {
  0% { padding-left: 0em; }
  30% { padding-left: 0.8em; }
  70% { padding-left: 0.8em; }
  100% { padding-left: 0em; }
}  

@keyframes OscilatingEllipsis2 {
  10% { padding-left: 0em; }
  40% { padding-left: 0.8em; }
  60% { padding-left: 0.8em; }
  90% { padding-left: 0em; }
}  

@keyframes OscilatingEllipsis3 {
  20% { padding-left: 0em; }
  50% { padding-left: 0.8em; }
  50% { padding-left: 0.8em; }
  80% { padding-left: 0em; }
}  

.ApplicationModal .IndicatorProgress {
  display: none;
  padding: 0.5em 0em 0em 3.5em;
}

.ApplicationModal.ModalProgress .IndicatorProgress {
  display: block;
}


.ApplicationModal .ProgressBar {
  overflow: hidden;
  width: 100%;
  height: 0.4em;
  background-color: #dadbdd;
  border-radius: 0.1em;
  margin-top: 0.5em;
}

.ApplicationModal .ProgressBar > div {
  width: 0%;
  height: 100%;
  background-color: #00798c;
  box-sizing: border-box;
}


/*************************************************************
*
* players/hexagon/components/application-modal/css/animated-wheel.css
*
*************************************************************/


.ApplicationModal .IndicatorWheel svg rect {
  animation-name: OscilatedLogo;
  animation-delay: 0s;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
}

.ApplicationModal .IndicatorWheel svg rect:nth-child(1) {
  animation-delay: 0.1s;
}


.ApplicationModal .IndicatorWheel svg rect:nth-child(2) {
  animation-delay: 0.2s;
}


.ApplicationModal .IndicatorWheel svg rect:nth-child(3) {
  animation-delay: 0.3s;
}


.ApplicationModal .IndicatorWheel svg rect:nth-child(4) {
  animation-delay: 0.4s;
}


.ApplicationModal .IndicatorWheel svg rect:nth-child(5) {
  animation-delay: 0.5s;
}


.ApplicationModal .IndicatorWheel svg rect:nth-child(6) {
  animation-delay: 0.6s;
}


.ApplicationModal .IndicatorWheel svg rect:nth-child(7) {
  animation-delay: 0.7s;
}


.ApplicationModal .IndicatorWheel svg rect:nth-child(8) {
  animation-delay: 0.8s;
}


.ApplicationModal .IndicatorWheel svg rect:nth-child(9) {
  animation-delay: 0.9s;
}


@keyframes OscilatedLogo {
  0% { fill: #ffffff; }
  25% { fill: #00798c; }
  100% { fill: #00798c; }
}


/*************************************************************
*
* players/hexagon/components/application-modal/css/component.phone.css
*
*************************************************************/


body.IsPhone .ApplicationModal .ModalPanel {
  font-size: 1.2em;
max-height: 90%;
  margin: 0em 1em;
  box-shadow: 0em 0em 1.5em -0.5em #222;
}


body.IsPhone.IsLandscape .ApplicationModal .ModalPanel {
  max-width: 75%;
}


body.IsPhone.IsPortrait .ApplicationModal .ModalBody br {
  display: none;
}


body.IsPhone.IsPortrait .ApplicationModal .ModalBody br.Important {
  display: block;
}


body.IsPhone.IsPortrait .ApplicationModal .ModalBody .Table {
  display: block;
}


body.IsPhone.IsPortrait .ApplicationModal .ModalBody .TableCell {
  display: block;
  text-align: left;
  padding-top: 0.2em;
}


body.IsPhone.IsPortrait .ApplicationModal .ModalBody .TableCell.ContentLabel {
  padding-top: 1.5em;
}


body.IsPhone .ApplicationModal .DescriptionText {
  padding: 0.2em 0.4em;
  border-radius: 0.2em;
}


body.IsPhone.IsLandscape .ApplicationModal .DescriptionText {
  height: 4em;
}


body.IsPhone.IsPortrait .ModalLogo {
  width: 7.5em;
  height: 5em;
  margin: 0em 1em 0em 0em ;
}


/*************************************************************
*
* players/hexagon/components/application-modal/css/component.tablet.css
*
*************************************************************/


body.IsTablet.IsPortrait .ApplicationModal .ModalPanel {
  margin: 5em 2em;
_max-height: 90%;
}


/*************************************************************
*
* players/hexagon/components/question-string/component.css
*
*************************************************************/


/* css/component.phone.css */


/* .QuestionAnswer */


.StringQuestion .QuestionAnswer {
  display: block;
  min-width: 5em;
  color: #222;
  margin: 0em 0em 0em 0em;
  padding: 0.6em 1.6em 0.6em 2.2em;
  font-size: 1em;
  text-align: left;
}

.StringQuestion .QuestionAnswer .AnswerContent {
  color: #00798c;
  font-size: 1em;
  text-align: center;  
}

.StringQuestion .QuestionAnswer .AnswerContent input {
  margin: 0em 0.4em 0em 0.4em;
  cursor: pointer;
}


/* .QuestionAnswer:hover */


body.NotTouchable .StringQuestion .QuestionAnswer:hover {
_border-color: orange;
_background-color: #fafaff;
}


/*************************************************************
*
* players/hexagon/components/question-string/css/component.phone.css
*
*************************************************************/


/* .QuestionText */


body.IsPhone .StringQuestion .QuestionText {
  font-size: 1em;
  text-align: left;
  border-width: 0em;
  padding-bottom: 0em;
}


/* .QuestionAnswer */


body.IsPhone .StringQuestion .QuestionAnswer {
  padding: 0em 0em 0.5em 0em;
}


body.IsPhone .StringQuestion .QuestionAnswer .AnswerContent {
  text-align: left;
}


body.IsPhone .StringQuestion .QuestionAnswer .AnswerContent input {
  display: block;
  font-size: 1.2em;
  background-color: #fff;
  border-style: solid;
  border-width: 0.15em;
  border-color: #00798c;
  border-radius: 0.35em;
  background-color: #fff;
  margin: 0.5em 0em 0em 0em;
  padding: 0.3em 1.0em 0.5em 1.0em;
  width: 100%;
  box-sizing: border-box;
}

body.IsPhone .StringQuestion .QuestionAnswer .AnswerContent input:focus {
  outline: none;
  border-color: orange;
}

body.IsPhone .StringQuestion .QuestionAnswer .AnswerContent input[value="a"] {
  border-color: green;
}


/*************************************************************
*
* players/hexagon/components/audio-wrapper/component.css
*
*************************************************************/


.AudioWrapper {
  display: block;
  padding: 1em;
  margin-top: 1em;
  color: #077c92;
  border: 0.15em #00798c solid;
  border-radius: 1.5em;
  text-align: center;
}

.AudioWrapper > div {
  display: inline-block;
}

.AudioWrapper .AudioIndicators {
  position: relative;
  height: 1.5em;
_border: 1px blue solid;
}

.AudioWrapper .IndicatorTime,
.AudioWrapper .IndicatorRest,
.AudioWrapper .ProgressContainer {
  position: absolute;
  top: 0em;
_border: 1px red solid;
}

.AudioWrapper .IndicatorTime,
.AudioWrapper .IndicatorRest {
  font-size: 0.7em;
_border: 1px red solid;
}

.AudioWrapper .IndicatorTime {
  left: 0em;
}

.AudioWrapper .IndicatorRest {
  right: 0em;
}

.AudioWrapper .ProgressContainer {
  top: 0.2em;
  left: 2.2em;
  right: 2.2em;
  height: 0.4em;
  background-color: #dadbdd;
  cursor: pointer;
}

.AudioWrapper .ProgressContainer {
}

.AudioWrapper .ProgressContainer .ProgressBar {
  width: 0%;
  height: 100%;
  background-color: #077c92;
}

.AudioWrapper .AudioButtons {
}

.AudioWrapper .AudioButtons button {
  width: 1.5em;
  height: 1.5em;
  margin: 0em 0.2em;
  border: 0.1em #077c92 solid;
  border-radius: 50%;
}

.AudioWrapper .AudioButtons button,
.AudioWrapper .AudioButtons button svg {
  transition: 
    color 0.1s ease 0s, 
    border-color 0.1s ease 0s, 
    background-color 0.1s ease 0s, 
    stroke 0.1s ease 0s, 
    fill 0.1s ease 0s 
    !important;
}

.AudioWrapper .AudioButtons button:first-child {
  margin-left: 0em;
}

.AudioWrapper .AudioButtons button:last-child {
  margin-right: 0em;
}

.AudioWrapper .AudioButtons button:hover {
  border-color: #f89c3e;
}

.AudioWrapper .AudioButtons button.hidden {
  display: none;
}

.AudioWrapper .AudioButtons button.ButtonPlay {
  background-color: #077c92;
}

.AudioWrapper .AudioButtons button.ButtonPlay:hover {
  background-color: #f89c3e;
}

.AudioWrapper .AudioButtons button svg {
  display: block;
  width: 0.8em;
  height: 0.8em;
  stroke: #077c92;
  fill: #077c92;
}

.AudioWrapper .AudioButtons button.ButtonPlay svg {
  stroke: #fff;
  fill: #fff;
  margin-left: 0.1em;
}


/*************************************************************
*
* players/hexagon/components/application-notification/component.css
*
*************************************************************/


/* css/close-button.css */


.ApplicationNotification {
  opacity: 0;  
  visibility: hidden;  
  position: fixed;
  left: 0em;
  top: -50em;
  width: 100%;
  height: 0%;
  box-sizing: border-box;
  z-index: 20;
  text-align: center;
  transition: 
    top 0.5s ease 0.5s,
    opacity 0.5s ease 0s,
    visibility 0s ease 0.5s;
}


.ApplicationNotification.IsVisible {
  opacity: 1;  
  top: 0em;
  visibility: visible;  
  transition: 
    top 0.3s ease-out 0s,
    opacity 0.3s ease-in 0s,
    visibility 0s ease 0s;
}


.ApplicationNotification .NotificationPanel {
  position: relative;
  display: inline-block;
  min-width: 12em;
  max-width: 75%;
  margin: 10em 0em;
  background-color: #ffffcc;
  border: 0.1em #aaa solid;
  border-radius: 0.15em;
  padding: 1.5em;
  text-align: left;
  overflow: auto;
  box-shadow: 0em 0.2em 0.8em 0em rgba(0, 0, 0, 0.3);
}

.ApplicationNotification.IsVisible .NotificationPanel {
}

.ApplicationNotification .NotificationBody {
  font-size: 1em;
  max-width: 45em;
}


/*************************************************************
*
* players/hexagon/components/application-notification/css/close-button.css
*
*************************************************************/


.ApplicationNotification .CloseButton {
  position: absolute;
  right: 0em;
  top: 0em;
  width: 1em;
  height: 1em;
  line-height: 0.6em;
  font-size: 1.6em;
  background-color: transparent;
  border: none;
  padding: 0em;
  margin: 0.2em;
  text-align: center;
  vertical-align: top;
  z-index: 1;
  cursor: pointer;
}


/*************************************************************
*
* players/hexagon/components/control-progress-chrono/component.css
*
*************************************************************/


/* svg.ProgressChronoControl */ 


svg.ProgressChronoControl  {
  width: 3em; 
  height: 3em;
  stroke: #08798d;
  fill: transparent;
}

svg.ProgressChronoControl .WorkingPie {
  fill: #f89c3e;
}


svg.ProgressChronoControl .WorkingArrows {
  opacity: 1;
}

svg.ProgressChronoControl .StaticArrows {
  opacity: 0;
}


svg.ProgressChronoControl * {
  transition: 
    all 0.1s ease;
}


/* svg.ProgressChronoControl.IsExpired */ 


svg.ProgressChronoControl.IsExpired  {
  stroke: #f89c3e;
}

svg.ProgressChronoControl.IsExpired path {
  fill: transparent;
}


/* svg.ProgressChronoControl.IsDisabled */ 


svg.ProgressChronoControl.IsDisabled  {
  stroke: #aaa;
  transition: none;
}

svg.ProgressChronoControl.IsDisabled path {
  opacity: 0;
  transition: none;
}

svg.ProgressChronoControl.IsDisabled .WorkingArrows {
  opacity: 0;
  transition: none;
}

svg.ProgressChronoControl.IsDisabled .StaticArrows {
  opacity: 1;
  transition: none;
}


/*************************************************************
*
* players/hexagon/components/page-instruction-block/component.css
*
*************************************************************/


/* css/phone/component.css */


#TestPlayer .PlayerContent.BlockInstruction .ContentBody .BodyText {
  vertical-align: top;
}

#TestPlayer .BlockInstruction .InstructionHeader {
  margin-bottom: 1.5em;
  text-transform: uppercase;
}

#TestPlayer .BlockInstruction .InstructionHeader > div {
  display: inline-block;
}


#TestPlayer .BlockInstruction .InstructionContent {
  font-size: 0.9em;
}


/*************************************************************
*
* players/hexagon/components/page-instruction-block/css/phone/component.css
*
*************************************************************/


body.IsPhone #TestPlayer .BlockInstruction .InstructionHeader > div {
  display: block;
}


/*************************************************************
*
* players/hexagon/components/page-instruction-block/css/phone/component.css
*
*************************************************************/


body.IsPhone #TestPlayer .BlockInstruction .InstructionHeader > div {
  display: block;
}


/*************************************************************
*
* players/hexagon/components/control-slider/component.css
*
*************************************************************/


div.ControlSlider {
  position: relative;
  width: 20em;
  height: 1.8em;
  border: 1px transparent solid;
  box-sizing: border-box;
  cursor: pointer;
}


div.ControlSlider,
div.ControlSlider * {
  user-select: none;  
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}


div.ControlSlider .Track {
  position: relative;
  width: 100%;
  height: 0.2em;
  background-color: #dadbdd;
  border-radius: 0.4em;
  margin-top: 0.6em;
  margin-bottom: 0.2em;
}


div.ControlSlider .Bar {
  position: absolute;
  left: 50%;
  right: 50%;
  height: 100%;
  margin-top: 0em;
  background-color: transparent;
  border-radius: 0.4em;
  transition: left 0.1s, right 0.1s linear;
}


div.ControlSlider .Handle {
  position: relative;
  left: 0%;
  top: 0%;
  width: 1.1em;
  height: 1.1em;
  background-color: #00798c;
  border-radius: 1.1em;
  box-shadow: 0em 0em 0.05em 0.05em #fff;
  margin-top: -0.9em;
  margin-left: -0.55em;
  cursor: pointer;
  transition: left 0.1s linear;
}


div.ControlSlider .Handle::after {
  content: '';
  position: absolute;
  left: -0.1em;
  top: -0.1em;
  width: 1.2em;
  height: 1.2em;
  border-radius: 1.2em;
  border: 0.2em transparent solid;
  transition: border-color 0.2s ease;
}


div.ControlSlider .Points {
  position: relative;
  width: 100%;
  height: 1em;
  white-space: nowrap;
  margin-top: 0.1em;
}


div.ControlSlider .Point {
  position: absolute;
  width: 0.2em;
  height: 0.4em;
  margin-top: 0em;
}


div.ControlSlider .Point::after {
  content: '';
  position: absolute;
  top: 0.2em;
  left: -0.1em;
  width: 0.2em;
  height: 0.2em;
  border-radius: 0.2em;
  background-color: #00798c;
}


div.ControlSlider .Point.Check::after {
  height: 0.2em;
}


div.ControlSlider .Light {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.4em;
  height: 0.4em;
  margin-left: -0.2em;
  margin-top: -0.2em;
  border-radius: 0.4em;
  background-color: #fff;
background-color: transparent;
  transition: all 0.2s ease;
}



/* .IsDragging */


div.ControlSlider.IsDragging .Handle {
  background-color: #f89c3e;
}


/* .IsSet */


div.ControlSlider.IsSet .Light {
  background-color: #00798c;
background-color: transparent;
}


div.ControlSlider.IsSet .Bar {
  background-color: #00798c;
}

div.ControlSlider.IsSet.IsBipolar .Bar {
  border-radius: 0em;
}


/*************************************************************
*
* players/hexagon/components/page-testing-result/component.css
*
*************************************************************/


#TestPlayer .TestingResult .ContentBody .BodyText {
  vertical-align: middle;
}


/*************************************************************
*
* players/hexagon/components/question-multiple-matching/component.css
*
*************************************************************/


/* css/component.phone.css */


/* .QuestionAnswers */


.MatchingQuestion .QuestionAnswers {
  text-align: center;
}

.MatchingQuestion .QuestionAnswers > div {
  display: inline-block;
  position: relative;
}


/* .QuestionAnswers .AnswersFiller */


.MatchingQuestion .QuestionAnswers .AnswersFiller {
  visibility: hidden;
  white-space: nowrap;
}

.MatchingQuestion .QuestionAnswers .AnswersFiller > div {
  display: inline-block;
}

.MatchingQuestion .QuestionAnswers .AnswersFiller > div > div:last-child {
  height: 1em;
  margin-top: -1em;
  overflow: hidden;
}

.MatchingQuestion .QuestionAnswers .AnswersFiller .QuestionAnswer {
  position: static;
}


/* .QuestionAnswers .AnswersContainer */



.MatchingQuestion .QuestionAnswers .AnswersContainer {
  position: absolute;
  top: 0em;
  left: 0em;
  width: 100%;
  height: 100%;
  white-space: nowrap;
}


.MatchingQuestion .QuestionAnswers .AnswersContainer > div {
  position: relative;
  width: 50%;
  height: 100%;
  display: inline-block;
}


/* .QuestionAnswer */


.MatchingQuestion .QuestionAnswer {
  position: absolute;
  display: block;
  width: 100%;
  margin: 1em 0em 0em 0em;
_overflow: hidden;  
  transition: 
    top 0.3s ease 0.2s,
    right 0.2s ease 0s,
    left 0.2s ease 0s;
}


.MatchingQuestion .QuestionAnswer.IsLinked {
  z-index: 1000;
  transition: 
    top 0.3s ease 0.2s,
    left 0.2s ease 0s,
    right 0.2s ease 0s,
    z-index 0s ease 0s;
}


.MatchingQuestion .QuestionAnswer.IsLinked * {
  transition: 
    color 0.1s ease 0s,
    background-color 0.1s ease 0s,
    border 0s ease 0s;
}


.MatchingQuestion .QuestionAnswer.SideLeft {
  right: 1em;
}

.MatchingQuestion .QuestionAnswer.SideLeft.IsFocused,
.MatchingQuestion .QuestionAnswer.SideLeft.IsLinked {
  right: -0.15em;
}

.MatchingQuestion .QuestionAnswer.SideRight {
  left: 1em;
}

.MatchingQuestion .QuestionAnswer.SideRight.IsFocused,
.MatchingQuestion .QuestionAnswer.SideRight.IsLinked {
  left: -0.15em;
}



/* .AnswerContainer */


.MatchingQuestion .AnswerContainer {
  width: 100%;
  display: table;
}



/* .AnswerContainer */


.MatchingQuestion .QuestionAnswer .AnswerContent {
  width: 100%;
  display: table-cell;
  color: #00798c;
  background-color: #f8f8ff;
  border-color: #00798c;
  border-width: 0.15em;
  border-style: solid;
  border-radius: 0.5em;
  padding: 0.6em 2em 0.6em 2em;
  font-size: 1em;
  text-align: center;  
  cursor: pointer;
  transition: all 0.3s ease;
}


.MatchingQuestion .QuestionAnswer.SideLeft .AnswerContent {
  border-style: solid dotted solid solid !important;
  border-radius: 0.5em 0em 0em 0.5em;
  text-align: right;
}


.MatchingQuestion .QuestionAnswer.SideRight .AnswerContent {
  border-radius: 0em 0.5em 0.5em 0em;
  border-style: solid solid solid dotted !important;
  text-align: left;
}


.MatchingQuestion .QuestionAnswer.IsLinked .AnswerContent,
body.NotTouchable .MatchingQuestion .QuestionAnswer.IsLinked .AnswerContent:hover {
  color: #fff;
  border-color: #00798c;
  border-style: solid !important;;
  background-color: #00798c !important;
}




/* .QuestionAnswer .*:hover */


body.NotTouchable .MatchingQuestion .QuestionAnswer .AnswerContent:hover {
  border-color: orange;
}  


/* .QuestionAnswer.IsFocused */


.MatchingQuestion .QuestionAnswer.IsFocused {
  z-index: 1000;  
}

.MatchingQuestion .QuestionAnswer.IsFocused .AnswerContent,
body.NotTouchable .MatchingQuestion .QuestionAnswer.IsFocused .AnswerContent:hover {
  color: #fff;
  border-color: #00798c;
  background-color: #00798c !important;
}  



/* .AnswerContainer::* */


.QuestionAnswer.SideRight .AnswerContainer::before {
display: none;
  opacity: 0;
  content: '';
  position: absolute;
  left: -0.65em;
  top: 0.7em;
  background-color: #fff;
  width: 1.3em;
  height: 1.3em;
  border-radius: 1.3em;
  padding: 0em;
  font-size: 1em;
  color: #9bad35;
  transition: opacity 0.1s ease;
}

.QuestionAnswer.SideRight.IsLinked .AnswerContainer::before {
opacity: 0;
  transition: opacity 0.5s ease 0.5s;
}

.QuestionAnswer.SideRight .AnswerContainer::after {
  opacity: 0;
  content: '';
  position: absolute;
  left: 0em;
  top: 1.3em;
  width: 0em;
  height: 0.5em;
  padding: 0em;
  font-size: 1em;
  border-top: 0.15em #fff dotted;
  transition: all 0.1s ease 0s;
}

.QuestionAnswer.SideRight.IsLinked .AnswerContainer::after {
  opacity: 1;
  width: 2em;
  left: -1em;
  transition: all 0.4s ease 0.4s;
}


/*************************************************************
*
* players/hexagon/components/question-multiple-matching/css/component.phone.css
*
*************************************************************/


body.IsPhone.IsPortrait .MatchingQuestion .QuestionAnswers .AnswersFiller > div > div:last-child {
  display: none;
}


body.IsPhone.IsPortrait .MatchingQuestion .QuestionAnswers > div {
  display: block;
}


/* .QuestionAnswer */


body.IsPhone .MatchingQuestion .QuestionAnswer.SideLeft {
  right: 0.5em;
}

body.IsPhone .MatchingQuestion .QuestionAnswer.SideLeft.IsFocused,
body.IsPhone .MatchingQuestion .QuestionAnswer.SideLeft.IsLinked {
  right: -0.1em;
}

body.IsPhone .MatchingQuestion .QuestionAnswer.SideRight {
  left: 0.5em;
}

body.IsPhone .MatchingQuestion .QuestionAnswer.SideRight.IsFocused,
body.IsPhone .MatchingQuestion .QuestionAnswer.SideRight.IsLinked {
  left: -0.1em;
}


/* .AnswerContainer */


body.IsPhone .MatchingQuestion .QuestionAnswer .AnswerContent {
  padding: 0.6em 1em 0.6em 1em;
  background-color: #fff;
}

body.IsPhone .MatchingQuestion .QuestionAnswer .AnswerContent > span {
  font-size: 0.9em;
}


/* .AnswerContainer::* */


body.IsPhone .QuestionAnswer.SideRight .AnswerContainer::before,
body.IsPhone .QuestionAnswer.SideRight .AnswerContainer::after {
  font-size: 0.9em;
}


body.IsPhone .QuestionAnswer.SideRight .AnswerContainer::after {
  top: 1.5em;
  border-top: 0.15em #fff dotted;
}

body.IsPhone .QuestionAnswer.SideRight.IsLinked .AnswerContainer::after {
  width: 1em;
  left: -0.5em;
}


/*************************************************************
*
* players/hexagon/components/page-form-participant/component.css
*
*************************************************************/


/* css/phone.css */
/* css/tablet.css */


.ParticipantForm .BodyText {
  vertical-align: top;
}

.ParticipantForm select {
  max-width: 25em;
}

.ParticipantForm input[type="text"],
.ParticipantForm input[type="number"],
.ParticipantForm input[type="password"] {
  width: 10em;
}

.ParticipantForm .FormField input.LastName,
.ParticipantForm .FormField input.FirstName,
.ParticipantForm .FormField input.MiddleName {
  width: 8em;
}

.ParticipantForm input.Name {
  width: 25em;
}

.ParticipantForm input.Age {
  width: 4em;
}

.ParticipantForm input.Email {
  width: 15em;
}

.ParticipantForm div.EmailOptions {
  font-size: 0.8em;
  margin: 1.0em 0em 0.2em 0em;
}

.ParticipantForm input.Phone {
  width: 15em;
}

.ParticipantForm input.PhoneCode {
  width: 3em;
}

.ParticipantForm input.PhoneOperator {
  width: 4em;
}

.ParticipantForm input.PhoneNumber {
  width: 8em;
}

.ParticipantForm input[class^="Field"] {
  width: 20em;
}


/*************************************************************
*
* players/hexagon/components/page-form-participant/css/phone.css
*
*************************************************************/


body.IsPhone .ParticipantForm input[type="text"],
body.IsPhone .ParticipantForm input[type="number"],
body.IsPhone .ParticipantForm input[type="password"] {
  display: block;
  width: 100%;
}

body.IsPhone .ParticipantForm .FormField input.LastName,
body.IsPhone .ParticipantForm .FormField input.FirstName,
body.IsPhone .ParticipantForm .FormField input.MiddleName {
  display: block;
  width: 100%;
}

body.IsPhone .ParticipantForm select[class^="Field"] {
  display: block;
  width: 100%;
}

body.IsPhone .PlayerContent .BodyText .FormTitle {
  text-align: left;
}


/*************************************************************
*
* players/hexagon/components/page-form-participant/css/tablet.css
*
*************************************************************/


body.IsTablet.IsPortrait .ParticipantTable {
  width: 100%;
}

body.IsTablet.IsLandscape .ParticipantTable {
  width: 80%;
}

body.IsTablet .ParticipantTable .ParticipantField input[type="text"],
body.IsTablet .ParticipantTable .ParticipantField input[type="number"],
body.IsTablet .ParticipantTable .ParticipantField input[type="password"],
body.IsTablet .ParticipantTable .ParticipantField select {
  display: block;
}

body.IsTablet .ParticipantTable select option {
  font-size: 0.8em;
}

body.IsTablet .ParticipantTable .ParticipantField input.Name,
body.IsTablet .ParticipantTable .ParticipantField input.LastName,
body.IsTablet .ParticipantTable .ParticipantField input.FirstName,
body.IsTablet .ParticipantTable .ParticipantField input.MiddleName,
body.IsTablet .ParticipantTable .ParticipantField input.Email,
body.IsTablet .ParticipantTable .ParticipantField input.Field1,
body.IsTablet .ParticipantTable .ParticipantField input.Field2,
body.IsTablet .ParticipantTable .ParticipantField input.Field3,
body.IsTablet .ParticipantTable .ParticipantField input.Field4,
body.IsTablet .ParticipantTable .ParticipantField input.Field5 {
  width: 100%;
}

body.IsTablet .ParticipantTable .ParticipantField input.PhoneCode,
body.IsTablet .ParticipantTable .ParticipantField input.PhoneOperator,
body.IsTablet .ParticipantTable .ParticipantField input.PhoneNumber,
body.IsTablet .ParticipantTable .ParticipantField select.BirthDay,
body.IsTablet .ParticipantTable .ParticipantField select.BirthMonth,
body.IsTablet .ParticipantTable .ParticipantField select.BirthYear {
  display: inline-block;
}

body.IsTablet .ParticipantTable .ParticipantField input.LastName,
body.IsTablet .ParticipantTable .ParticipantField input.FirstName,
body.IsTablet .ParticipantTable .ParticipantField input.MiddleName {
  margin-top: 0.3em;  
}

body.IsTablet .ParticipantTable .ParticipantField *[data-is-complete="1"] {
  background-color: #fff;
  border-color: #9bad35 !important; 
}

body.IsTablet .ParticipantTable.CheckMandatory .ParticipantField.IsMandatory *[data-is-complete="0"] {
  background-color: #fff;
  border-color: #f00 !important; 
}


body.IsTablet .ParticipantTable .ParticipantField > div:last-child {
  margin-top: 0em;
  padding-top: 0em;
}

body.IsTablet .ParticipantTable .ParticipantField > div {
  display: block;
  float: none;
  text-align: left !important;
  margin-left: 0em !important;
  padding-left: 0em !important;
  border-style: none !important;
}

body.IsTablet .ParticipantTable input[type="text"]:focus,
body.IsTablet .ParticipantTable input[type="number"]:focus,
body.IsTablet .ParticipantTable select:focus {
  outline: 0em #fff none;
  background-color: #fff;
  border-color: orange;
}


body.IsTablet .ParticipantTable .ParticipantField.IsMandatory .FieldLabel::before {
  display: none;
}

body.IsTablet .ParticipantTable .ParticipantField.IsMandatory .FieldLabel::after {
  content: '*';
  display: inline-block;
  font-size: 0.8em;
  margin: -0.2em 0em 0em 0em;
  vertical-align: top;
}


body.IsTablet .ParticipantTable div.EmailOptions {
  margin: 1.5em 0em 0em 2em;
}

body.IsTablet .ParticipantTable div.EmailOptions > div {
  font-size: 1em;
  margin: 1em 0em 0em 1em;
}


/*************************************************************
*
* players/hexagon/components/player-header/component.css
*
*************************************************************/


/* css/behaviour.css */
/* css/feedback.css */
/* css/phone/component.css */
/* css/tablet/component.css */


.PlayerHeader  {
  display: table;
  position: fixed;
  overflow: hidden;
  top: 0em;
  left: 0em;
  width: 100%;
  height: 5em;
  font-size: 1em;
  white-space: nowrap;
  box-sizing: border-box;
  background-color: #f8f8fa;
  text-transform: uppercase;
  z-index: 2;
}


.PlayerHeader > div {
  display: table-cell;
  padding: 0.5em 1em 0.5em 3em;
  text-align: left;
  vertical-align: middle;
  background-image: url(/m-tests/versions/release-171216-audio-190509/player/client/players/hexagon/components/player-header/images/panels-divider-1.png);
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: left;
  box-sizing: border-box;
  overflow: hidden;
}

.PlayerHeader .PanelValue {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.PlayerHeader .BrandPanel {
  width: 10em;
  height: 100%;
  padding: 0em;
  background-image: url(/m-tests/versions/release-171216-audio-190509/player/client/players/hexagon/components/player-header/images/maintest-logo-1.png);
  background-repeat: no-repeat;
  background-size: auto 60%;
  background-position: center;
}

.PlayerHeader .ProviderPanel {
  width: 18em;
  height: 100%;
  padding: 0em 2em 0em 2em;
}

.PlayerHeader .ProviderPanel > div {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-image: url(/m-tests/versions/release-171216-audio-190509/player/client/players/hexagon/components/player-header/images/humantec-logo-1.png);
  background-repeat: no-repeat;
  background-size: 90% auto;
  background-position: 100% center;
}

.PlayerHeader .FeedbackPanel {
  min-width: 10em;
}

.PlayerHeader .TestPanel {
  max-width: 15em;
}

.PlayerHeader .BlockPanel > div,
.PlayerHeader .QuestionPanel > div {
  display: inline-block;
}

.PlayerHeader .BlockTimeValues,
.PlayerHeader .QuestionTimeValues {
  text-transform: none;
  color: #08798d;
}

.PlayerHeader .BlockNumber,
.PlayerHeader .BlockQuestionNumber,
.PlayerHeader .QuestionTimeRest,
.PlayerHeader .BlockTimeRest {
  font-size: 1.3em;
}

.PlayerHeader .BlockTimeIndicator,
.PlayerHeader .QuestionTimeIndicator {
  margin: 0em 0.3em 0em 0.8em;
  vertical-align: -0.5em;
}


/*************************************************************
*
* players/hexagon/components/player-header/css/behaviour.css
*
*************************************************************/


#TestPlayer .PlayerHeader {
  top: -6em;
}

#TestPlayer.IsApplicationStarted .PlayerHeader {
  top: 0em;
  transition:
    top 1s ease-out 0s;
}


#TestPlayer .PlayerHeader .ConsentPanel,
#TestPlayer .PlayerHeader .PreliminaryPanel,
#TestPlayer .PlayerHeader .ParticipantPanel,
#TestPlayer .PlayerHeader .BlockInstructionPanel,
#TestPlayer .PlayerHeader .TestInstructionPanel,
#TestPlayer .PlayerHeader .BlockPanel,
#TestPlayer .PlayerHeader .QuestionPanel,
#TestPlayer .PlayerHeader .FeedbackPanel,
#TestPlayer .PlayerHeader .ProtocolProcessingPanel,
#TestPlayer .PlayerHeader .TestingResultPanel {
  display: none;
}

#TestPlayer.IsPersonalConsent .PlayerHeader .ConsentPanel,
#TestPlayer.IsPreliminaryForm .PlayerHeader .PreliminaryPanel,
#TestPlayer.IsParticipantForm .PlayerHeader .ParticipantPanel,
#TestPlayer.IsTestInstruction .PlayerHeader .TestInstructionPanel,
#TestPlayer.IsBlockInstruction .PlayerHeader .BlockInstructionPanel,
#TestPlayer.IsProtocolProcessing .PlayerHeader .ProtocolProcessingPanel,
#TestPlayer.IsTestingResult .PlayerHeader .TestingResultPanel {
  display: table-cell;
}

#TestPlayer.IsTestInstruction.IsBlockStarted .PlayerHeader .TestInstructionPanel,
#TestPlayer.IsBlockInstruction.IsBlockStarted .PlayerHeader .BlockInstructionPanel {
  display: none;
}

#TestPlayer.IsTestInstruction.IsBlockStarted .PlayerHeader .BlockPanel,
#TestPlayer.IsBlockInstruction .PlayerHeader .BlockPanel,
#TestPlayer.IsTestQuestion .PlayerHeader .BlockPanel {
  display: table-cell;
}

#TestPlayer.IsTestInstruction.IsBlockStarted .PlayerHeader .QuestionPanel,
#TestPlayer.IsBlockInstruction.IsBlockStarted .PlayerHeader .QuestionPanel,
#TestPlayer.IsTestQuestion .PlayerHeader .QuestionPanel {
  display: table-cell;
}

#TestPlayer.IsTestingFeedbackEnabled.IsTestQuestion .PlayerHeader .FeedbackPanel,
#TestPlayer.IsTestingFeedbackEnabled.IsTestInstruction.IsBlockStarted .PlayerHeader .FeedbackPanel,
#TestPlayer.IsTestingFeedbackEnabled.IsBlockInstruction.IsBlockStarted .PlayerHeader .FeedbackPanel {
  display: table-cell;
}

#TestPlayer.IsTestingFeedbackEnabled.IsBlockStarted .PlayerHeader .ProviderPanel {
  display: none;
}

#TestPlayer .PlayerHeader .BlockPanel .BlockTimeIndicator,
#TestPlayer .PlayerHeader .BlockPanel .BlockTimeValues,
#TestPlayer .PlayerHeader .QuestionPanel .QuestionTimeIndicator,
#TestPlayer .PlayerHeader .QuestionPanel .QuestionTimeValues {
  opacity: 0;
  transition:
    opacity 0.5s ease 0s;
}

#TestPlayer.IsBlockTimeLimited .PlayerHeader .BlockTimeIndicator,
#TestPlayer.IsBlockTimeLimited .PlayerHeader .BlockTimeValues,
#TestPlayer.IsQuestionTimeLimited .PlayerHeader .QuestionTimeIndicator,
#TestPlayer.IsQuestionTimeLimited .PlayerHeader .QuestionTimeValues {
  opacity: 1;
}

#TestPlayer.IsBlockTimeLimited .PlayerHeader .BlockTimeValues,
#TestPlayer.IsQuestionTimeLimited .PlayerHeader .QuestionTimeValues {
  color: #aaa;
}

#TestPlayer.IsBlockTimeLimited.IsBlockStarted .PlayerHeader .BlockTimeValues,
#TestPlayer.IsQuestionTimeLimited.IsBlockStarted .PlayerHeader .QuestionTimeValues {
  color: #08798d;
}

#TestPlayer.IsBlockStarted.IsBlockTimeLimited.IsBlockTimeout .PlayerHeader .BlockTimeValues,
#TestPlayer.IsBlockStarted.IsQuestionTimeLimited.IsQuestionTimeout .PlayerHeader .QuestionTimeValues {
  color: #f89c3e;
}

#TestPlayer .PlayerHeader .BlockPanel .BlockNumberInfo.PhoneBlock {
  display: none;
}


/*************************************************************
*
* players/hexagon/components/player-header/css/feedback.css
*
*************************************************************/


.PlayerHeader .FeedbackPanel > div {
  display: table;
  float: right;
  text-transform: none;
}

.PlayerHeader .FeedbackPanel > div > div {
  display: table-row;
}

.PlayerHeader .FeedbackPanel > div > div > div {
  display: table-cell;
  vertical-align: middle;
}

.PlayerHeader .FeedbackPanel > div > div > div:nth-child(1),
.PlayerHeader .FeedbackPanel > div > div > div:nth-child(2) {
  text-align: right;
  padding-right: 1em;
}

.PlayerHeader .FeedbackPanel .ScoreProgress {
  padding: 0.5em 0.5em 0.5em;
}  

.PlayerHeader .FeedbackPanel .ScoreProgress > div {
  width: 8em;
  height: 0.4em;
  background-color: #dadbdd;
}

.PlayerHeader .FeedbackPanel .ScoreProgress > div > div {
  width: 0%;
  height: 100%;
  background-color: #00798c;
}


/*************************************************************
*
* players/hexagon/components/player-header/css/phone/component.css
*
*************************************************************/


/* behaviour.css */


body.IsPhone .PlayerHeader {
  color: #fff;
  background-color: #067a8d;
  border-width: 0em 5em;
  border-color: transparent;
  border-style: solid;
  transition: none !important;
}

body.IsPhone .PlayerHeader > div {
  background-image: none;
  padding: 0.5em 0.5em 0.5em 0.5em;
  text-transform: uppercase;
}

body.IsPhone .PlayerHeader .BrandPanel,
body.IsPhone .PlayerHeader .TestPanel,
body.IsPhone .PlayerHeader .QuestionPanel,
body.IsPhone .PlayerHeader .BlockInstructionPanel,
body.IsPhone .PlayerHeader .ProviderPanel {
  display: none !important;
}

body.IsPhone #TestPlayer.IsBlockStarted .PlayerHeader .TestInstructionPanel {
  display: none !important;
}

body.IsPhone .PlayerHeader .BlockNumberInfo {
  float: left;  
  color: #fff !important;
  text-transform: uppercase;
  max-width: 70%;
}

body.IsPhone .PlayerHeader .BlockTimeIndicator {
  display: none !important;
}

body.IsPhone .PlayerHeader .BlockTimeValues {
  float: right;
  color: #fff !important;
  text-transform: uppercase;
  max-width: 30%;
}

body.IsPhone .PlayerHeader .BlockNumber, 
body.IsPhone .PlayerHeader .BlockQuestionNumber, 
body.IsPhone .PlayerHeader .QuestionTimeRest, 
body.IsPhone .PlayerHeader .BlockTimeRest {
  font-size: 1em;
}


/*************************************************************
*
* players/hexagon/components/player-header/css/phone/behaviour.css
*
*************************************************************/


body.IsPhone #TestPlayer .PlayerHeader .BlockNumberInfo {
  max-width: 100%;
}

body.IsPhone #TestPlayer .PlayerHeader .BlockTimeValues {
  display: none;
  max-width: 0%;
}

body.IsPhone #TestPlayer.IsBlockTimeLimited .PlayerHeader .BlockNumberInfo {
  max-width: 70%;
}

body.IsPhone #TestPlayer.IsBlockTimeLimited .PlayerHeader .BlockTimeValues {
  display: inline-block;
  max-width: 30%;
}

body.IsPhone #TestPlayer .PlayerHeader .BlockPanel .BlockNumberInfo.PhoneBlock {
  display: inline-block;
}

body.IsPhone #TestPlayer .PlayerHeader .BlockPanel .BlockNumberInfo.NotPhoneBlock {
  display: none;
}


/*************************************************************
*
* players/hexagon/components/player-header/css/tablet/component.css
*
*************************************************************/


body.IsTablet .PlayerHeader  {
  font-size: 0.9em;
}

body.IsTablet.IsPortrait .PlayerHeader  {
  font-size: 0.8em;
}


/*************************************************************
*
* players/hexagon/components/player-header/css/phone/component.css
*
*************************************************************/


/* behaviour.css */


body.IsPhone .PlayerHeader {
  color: #fff;
  background-color: #067a8d;
  border-width: 0em 5em;
  border-color: transparent;
  border-style: solid;
  transition: none !important;
}

body.IsPhone .PlayerHeader > div {
  background-image: none;
  padding: 0.5em 0.5em 0.5em 0.5em;
  text-transform: uppercase;
}

body.IsPhone .PlayerHeader .BrandPanel,
body.IsPhone .PlayerHeader .TestPanel,
body.IsPhone .PlayerHeader .QuestionPanel,
body.IsPhone .PlayerHeader .BlockInstructionPanel,
body.IsPhone .PlayerHeader .ProviderPanel {
  display: none !important;
}

body.IsPhone #TestPlayer.IsBlockStarted .PlayerHeader .TestInstructionPanel {
  display: none !important;
}

body.IsPhone .PlayerHeader .BlockNumberInfo {
  float: left;  
  color: #fff !important;
  text-transform: uppercase;
  max-width: 70%;
}

body.IsPhone .PlayerHeader .BlockTimeIndicator {
  display: none !important;
}

body.IsPhone .PlayerHeader .BlockTimeValues {
  float: right;
  color: #fff !important;
  text-transform: uppercase;
  max-width: 30%;
}

body.IsPhone .PlayerHeader .BlockNumber, 
body.IsPhone .PlayerHeader .BlockQuestionNumber, 
body.IsPhone .PlayerHeader .QuestionTimeRest, 
body.IsPhone .PlayerHeader .BlockTimeRest {
  font-size: 1em;
}


/*************************************************************
*
* players/hexagon/components/player-header/css/phone/behaviour.css
*
*************************************************************/


body.IsPhone #TestPlayer .PlayerHeader .BlockNumberInfo {
  max-width: 100%;
}

body.IsPhone #TestPlayer .PlayerHeader .BlockTimeValues {
  display: none;
  max-width: 0%;
}

body.IsPhone #TestPlayer.IsBlockTimeLimited .PlayerHeader .BlockNumberInfo {
  max-width: 70%;
}

body.IsPhone #TestPlayer.IsBlockTimeLimited .PlayerHeader .BlockTimeValues {
  display: inline-block;
  max-width: 30%;
}

body.IsPhone #TestPlayer .PlayerHeader .BlockPanel .BlockNumberInfo.PhoneBlock {
  display: inline-block;
}

body.IsPhone #TestPlayer .PlayerHeader .BlockPanel .BlockNumberInfo.NotPhoneBlock {
  display: none;
}


/*************************************************************
*
* players/hexagon/components/player-header/css/tablet/component.css
*
*************************************************************/


body.IsTablet .PlayerHeader  {
  font-size: 0.9em;
}

body.IsTablet.IsPortrait .PlayerHeader  {
  font-size: 0.8em;
}


/*************************************************************
*
* players/hexagon/components/control-test-progress/component.css
*
*************************************************************/


/* css/behaviour.css */
/* css/phone/component.css */
/* css/tablet/component.css */


/* div.TestProgressControl */


.TestProgressControl {
  position: fixed;
  top: 5em;
  width: 100%;
  height: 0.4em;
  background-color: #dadbdd;
  font-size: 1em;
  z-index: 10;
}


.TestProgressControl .Bar {
  position: absolute;
  top: 0em;
  left: 0em;
  width: 0%;
  height: 100%;
  background-color: #00798c;
  z-index: 2;
  transition: 
    all 0.2s ease;
}


.TestProgressControl .Current {
display: none;
  position: absolute;
  top: 0em;
  left: 0em;
  width: 0%;
  height: 100%;
  background-color: #eb0;
  z-index: 1;
  transition: 
    all 0.3s ease 0.3s;
}


.TestProgressControl .Borders {
  position: absolute;
  top: 0em;
  left: 0em;
  width: 100%;
  height: 100%;
  z-index: 3;
}

.TestProgressControl .Borders > div {
  position: absolute;
  opacity: 1;
  top: 0em;
  left: 0em;
  width: 0.6em;
  height: 100%;
  margin-left: -0.2em;
  background-color: #f89c3e;
}


/*************************************************************
*
* players/hexagon/components/control-test-progress/css/behaviour.css
*
*************************************************************/


#TestPlayer .TestProgressControl {
  opacity: 0;
}

#TestPlayer.IsApplicationStarted .TestProgressControl {
  opacity: 1;
}


#TestPlayer.IsStartingTransition .TestProgressControl {
  transition: 
    opacity 0.5s ease 1.5s;
}


/*************************************************************
*
* players/hexagon/components/control-test-progress/css/phone/component.css
*
*************************************************************/


/* body.IsPhone .TestProgressControl */


body.IsPhone #TestPlayer .TestProgressControl {
  top: 5em;
  height: 0.5em;
  box-shadow: 0em 0.2em 0.2em 0em rgba(0,0,0,0.2);
}

body.IsPhone #TestPlayer .TestProgressControl .Bar {
  background-color: #f89c3e;
}

body.IsPhone #TestPlayer .TestProgressControl .Borders > div {
  width: 0.2em;
  margin-left: -0.0em;
  background-color: rgba(0,0,0,0.1);
}


/*************************************************************
*
* players/hexagon/components/control-test-progress/css/tablet/component.css
*
*************************************************************/


/* body.IsTablet div.TestProgressControl */


body.IsTablet .TestProgressControl {
  font-size: 0.9em;
}


body.IsTablet.IsPortrait .TestProgressControl {
  font-size: 0.8em;
}

body.IsTablet #TestPlayer.Working .TestProgressControl {
_height: 0.6em;
}

body.IsTablet.IsPortrait #TestPlayer.Working .TestProgressControl {
_height: 0.6em;
}


/*************************************************************
*
* players/hexagon/components/control-test-progress/css/phone/component.css
*
*************************************************************/


/* body.IsPhone .TestProgressControl */


body.IsPhone #TestPlayer .TestProgressControl {
  top: 5em;
  height: 0.5em;
  box-shadow: 0em 0.2em 0.2em 0em rgba(0,0,0,0.2);
}

body.IsPhone #TestPlayer .TestProgressControl .Bar {
  background-color: #f89c3e;
}

body.IsPhone #TestPlayer .TestProgressControl .Borders > div {
  width: 0.2em;
  margin-left: -0.0em;
  background-color: rgba(0,0,0,0.1);
}


/*************************************************************
*
* players/hexagon/components/control-test-progress/css/tablet/component.css
*
*************************************************************/


/* body.IsTablet div.TestProgressControl */


body.IsTablet .TestProgressControl {
  font-size: 0.9em;
}


body.IsTablet.IsPortrait .TestProgressControl {
  font-size: 0.8em;
}

body.IsTablet #TestPlayer.Working .TestProgressControl {
_height: 0.6em;
}

body.IsTablet.IsPortrait #TestPlayer.Working .TestProgressControl {
_height: 0.6em;
}


/*************************************************************
*
* players/hexagon/components/question-single/component.css
*
*************************************************************/


/* css/answer-check.css */
/* css/highlight-answers.css */
/* css/phone/component.css */



/* .QuestionAnswer */


.SingleQuestion .QuestionAnswer {
  display: block;
  min-width: 5em;
  border-width: 0.15em;
  border-color: #00798c;
  border-style: solid;
  border-radius: 0.1em;
  color: #00798c;
  background-color: transparent;
  margin: 1em 1em 0em 0em;
  padding: 0.6em 1.6em 0.6em 2.2em;
  font-size: 1em;
  text-align: left;
  vertical-align: top;
  box-sizing: border-box;
  cursor: pointer;
  transition: 
    all 0.2s ease;
}


.SingleQuestion.ReadOnly .QuestionAnswer {
  cursor: default;
}


.SingleQuestion.EmptyAnswers .QuestionText {
  padding-bottom: 0em;
}


.SingleQuestion.EmptyAnswers .QuestionAnswers {
  display: none;
}


.SingleQuestion.ShortAnswers .QuestionAnswer {
  display: inline-block;
}



/* .QuestionAnswer:hover */


body.NotTouchable .SingleQuestion .QuestionAnswer:hover {
  border-color: #f89c3e;
}  


body.NotTouchable .SingleQuestion.ReadOnly .QuestionAnswer:hover {
  border-color: #00798c;
}  


/* .QuestionAnswer.IsSelected */


.SingleQuestion .QuestionAnswer.IsSelected,
body.NotTouchable .SingleQuestion .QuestionAnswer.IsSelected:hover {
  color: #fff;
  border-color: #00798c;
  background-color: #00798c !important;
}


/*************************************************************
*
* players/hexagon/components/question-single/css/answer-check.css
*
*************************************************************/


/* .QuestionAnswer .AnswerCheck */


.SingleQuestion .QuestionAnswer .AnswerCheck {
  position: relative;
  width: 0.8em;
  height: 0.8em;
  line-height: 0.8em;
  border-radius: 0.8em;
  margin-left: -1.5em;
  margin-top: 0.1em;  
  border-width: 0.15em;
  border-color: #00798c;
  border-style: solid;
  border-radius: 0.8em;
  background-color: #fff;
  float: left;
  transition: 
    all 0.2s ease;
}


.SingleQuestion .QuestionAnswer .AnswerCheck > div {
  _opacity: 0;
  position: absolute;
  width: 0.8em;
  height: 0.8em;
  border-radius: 50%;
  box-sizing: border-box;
  border: 0.4em #fff solid;
  transition: 
    all 0.3s ease-out !important;
}


/* .QuestionAnswer:hover .AnswerCheck */


body.NotTouchable .SingleQuestion .QuestionAnswer:hover .AnswerCheck {
  border-color: #f89c3e;
}  


body.NotTouchable .SingleQuestion.ReadOnly .QuestionAnswer:hover .AnswerCheck {
  border-color: #00798c;
}  


/* .QuestionAnswer:hover .IsSelected */


.SingleQuestion .QuestionAnswer.IsSelected .AnswerCheck,
body.NotTouchable .SingleQuestion .QuestionAnswer.IsSelected:hover .AnswerCheck {
  border-color: #fff;
  background-color: #fff;
}  


.SingleQuestion .QuestionAnswer.IsSelected .AnswerCheck > div {
  opacity: 1;
  background-color: #00798c;
  border-width: 0.25em;
}


body.IsTouchable .SingleQuestion .QuestionAnswer.IsSelected .AnswerCheck > div {
  border-width: 0.20em;
}


/*************************************************************
*
* players/hexagon/components/question-single/css/highlight-answers.css
*
*************************************************************/


.SingleQuestion .QuestionAnswer.IsDisabled,
body.NotTouchable .SingleQuestion .QuestionAnswer.IsDisabled:hover {
  color: gray !important;
  border-color: gray !important;
}  


.SingleQuestion .QuestionAnswer.IsDisabled .AnswerCheck,
body.NotTouchable .SingleQuestion .QuestionAnswer.IsDisabled:hover .AnswerCheck {
  border-color: gray !important;
}  


.SingleQuestion .QuestionAnswer.IsCorrect,
.SingleQuestion .QuestionAnswer.IsSelected.IsCorrect,
body.NotTouchable .SingleQuestion .QuestionAnswer.IsCorrect:hover,
body.NotTouchable .SingleQuestion .QuestionAnswer.IsSelected.IsCorrect:hover,
.SingleQuestion .QuestionAnswer.IsIncorrect,
.SingleQuestion .QuestionAnswer.IsSelected.IsIncorrect,
body.NotTouchable .SingleQuestion .QuestionAnswer.IsIncorrect:hover,
body.NotTouchable .SingleQuestion .QuestionAnswer.IsSelected.IsIncorrect:hover {
  color: #fff !important;
}  


.SingleQuestion .QuestionAnswer.IsCorrect .AnswerCheck,
.SingleQuestion .QuestionAnswer.IsSelected.IsCorrect .AnswerCheck,
body.NotTouchable .SingleQuestion .QuestionAnswer.IsCorrect:hover .AnswerCheck,
body.NotTouchable .SingleQuestion .QuestionAnswer.IsSelected.IsCorrect:hover .AnswerCheck,
.SingleQuestion .QuestionAnswer.IsIncorrect .AnswerCheck,
.SingleQuestion .QuestionAnswer.IsSelected.IsIncorrect .AnswerCheck,
body.NotTouchable .SingleQuestion .QuestionAnswer.IsIncorrect:hover .AnswerCheck,
body.NotTouchable .SingleQuestion .QuestionAnswer.IsSelected.IsIncorrect:hover .AnswerCheck {
  border-color: #fff !important;
}


/*************************************************************
*
* players/hexagon/components/question-single/css/phone/component.css
*
*************************************************************/


body.IsPhone .SingleQuestion .QuestionAnswer {
  border-width: 1px 0px 0px 0px;
  border-color: #ccc;
  border-radius: 0em;
  margin: 0em;
}

body.IsPhone .SingleQuestion .QuestionAnswer:last-child {
  border-width: 1px 0px 1px 0px;
}

body.IsPhone .SingleQuestion .QuestionAnswer.IsSelected {
  border-color: #fff;
}

body.IsPhone.IsLandscape .SingleQuestion .QuestionAnswer .AnswerCheck {
  border-width: 0.2em;
}


/*************************************************************
*
* players/hexagon/components/question-single/css/phone/component.css
*
*************************************************************/


body.IsPhone .SingleQuestion .QuestionAnswer {
  border-width: 1px 0px 0px 0px;
  border-color: #ccc;
  border-radius: 0em;
  margin: 0em;
}

body.IsPhone .SingleQuestion .QuestionAnswer:last-child {
  border-width: 1px 0px 1px 0px;
}

body.IsPhone .SingleQuestion .QuestionAnswer.IsSelected {
  border-color: #fff;
}

body.IsPhone.IsLandscape .SingleQuestion .QuestionAnswer .AnswerCheck {
  border-width: 0.2em;
}


/*************************************************************
*
* players/hexagon/components/application-hints/component.css
*
*************************************************************/


.ApplicationHint {
  width: 0em;
  height: 0em;
  position: fixed;
  visibility: hidden;
  opacity: 0;
  text-align: left;
  z-index: 30;
  transition: 
    opacity 0.4s ease 0s,
    visibility 0s ease 0.4s,
    top 0.1s ease 0s,
    left 0.1s ease 0s;
}

.ApplicationHint.IsImportant {
  z-index: 31;
}

.ApplicationHint:focus {
  z-index: 32;
}

.ApplicationHint.IsVisible,
#TestPlayer.ShowHints .ApplicationHint {
  visibility: visible;
  opacity: 1;
  transition: 
    opacity 0.2s ease 0s,
    visibility 0s ease 0s,
    top 0.1s ease 0s,
    left 0.1s ease 0s;
}


/* .ApplicationHint .HintContent */


.ApplicationHint .HintContent {
  position: absolute;
  background-color: #fff;
  padding: 1.5em;
  white-space: nowrap;
  border: 0.15em #077c92 solid;
  border-radius: 0.25em;
  min-width: 10em;  
  box-shadow: 0em 0em 2.0em -0.5em #888;
  white-space: normal;
  min-width: 10em;
  max-width: 30em;
  cursor: pointer;
}


.ApplicationHint.IsExpanded .HintContent {
  box-shadow: 0em 0em 2.5em -0.5em #666;
}


.ApplicationHint.NoWrap .HintContent {
  white-space: nowrap;
}


.ApplicationHint .HintContent .HintHeader {
  text-transform: uppercase;
  color: #077c92;
}


.ApplicationHint .HintContent .HintHeader::after {
  content: '...';
  display: block;
  font-size: 1.1em;
  font-weight: normal;
  margin-top: -0.2em;
  transition: 0.3s ease;
}


.ApplicationHint.IsExpanded .HintContent .HintHeader::after {
  font-size: 0em;
}


.ApplicationHint .HintContent button.HintExpand {
  position: absolute;
  top: 0.1em;
  right: 0.1em;
  width: 1.8em;
  height: 1.8em;
  border-radius: 1.8em;
  padding: 0em;
  color: #00798c;
  font-size: 1em;
  transition: 0.3s ease;
}


.ApplicationHint.IsExpanded .HintContent button.HintExpand {
  transform: rotate(180deg);
}

.ApplicationHint .HintContent .HintBody {
  margin-top: 1.2em;
  font-size: 0em;
  transition: all 0.3s ease 0s;
}

.ApplicationHint.IsExpanded .HintContent .HintBody {
  font-size: 1em;
}



/* .ApplicationHint.* .HintContent */


.ApplicationHint.TopLeft .HintContent,
.ApplicationHint.TopCenter .HintContent,
.ApplicationHint.TopRight .HintContent {
  bottom: 1em;
}

.ApplicationHint.BottomLeft .HintContent,
.ApplicationHint.BottomCenter .HintContent,
.ApplicationHint.BottomRight .HintContent { 
  top: 1em;
}

.ApplicationHint.LeftTop .HintContent,
.ApplicationHint.LeftMiddle .HintContent,
.ApplicationHint.LeftBottom .HintContent {
  right: 1em;
}

.ApplicationHint.RightTop .HintContent,
.ApplicationHint.RightMiddle .HintContent,
.ApplicationHint.RightBottom .HintContent {
  left: 1em;
}

.ApplicationHint.LeftTop .HintContent,
.ApplicationHint.RightTop .HintContent {
  bottom: -1em;
}

.ApplicationHint.LeftMiddle .HintContent,
.ApplicationHint.RightMiddle .HintContent {
  top: -2em;
}

.ApplicationHint.LeftBottom .HintContent,
.ApplicationHint.RightBottom .HintContent {
  top: -1em;
}

.ApplicationHint.TopLeft .HintContent,
.ApplicationHint.BottomLeft .HintContent {
  right: -1em;
}

.ApplicationHint.TopCenter .HintContent,
.ApplicationHint.BottomCenter .HintContent {
  left: -7em;
}

.ApplicationHint.TopRight .HintContent,
.ApplicationHint.BottomRight .HintContent {
  left: -1em;
}


/* .ApplicationHint.* .HintContent::* */


.ApplicationHint .HintContent::before {
  content: '';
  position: absolute;
  box-sizing: border-box;
} 

.ApplicationHint .HintContent::after {
  content: '';
  position: absolute;
  box-sizing: border-box;
} 


/* ApplicationHint.Top* .HintContent* */


.ApplicationHint.TopLeft .HintContent::before,
.ApplicationHint.TopCenter .HintContent::before,
.ApplicationHint.TopRight .HintContent::before {
  width: 1em;
  height: 1.2em;
  bottom: -1.4em;
  border-width: 1.2em 0.5em 0em 0.5em;
  border-style: solid;
  border-color: #077c92  transparent transparent transparent;
}

.ApplicationHint.TopLeft .HintContent::after,
.ApplicationHint.TopCenter .HintContent::after,
.ApplicationHint.TopRight .HintContent::after {
  width: 1em;
  height: 1.2em;
  bottom: -1.2em;
  border-width: 1.2em 0.5em 0em 0.5em;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
}

.ApplicationHint.TopLeft .HintContent::before,
.ApplicationHint.TopLeft .HintContent::after {
  right: 1em;
}

.ApplicationHint.TopCenter .HintContent::before,
.ApplicationHint.TopCenter .HintContent::after {
  right: 2em;
}

.ApplicationHint.TopRight .HintContent::before,
.ApplicationHint.TopRight .HintContent::after {
  left: 1em;
}


/* ApplicationHint.Bottom* .HintContent* */


.ApplicationHint.BottomLeft .HintContent::before,
.ApplicationHint.BottomCenter .HintContent::before,
.ApplicationHint.BottomRight .HintContent::before {
  width: 1em;
  height: 1.2em;
  top: -1.4em;
  border-width: 0em 0.5em 1.2em 0.5em;
  border-style: solid;
  border-color: transparent transparent #077c92  transparent;
}

.ApplicationHint.BottomLeft .HintContent::after,
.ApplicationHint.BottomCenter .HintContent::after,
.ApplicationHint.BottomRight .HintContent::after {
  width: 1em;
  height: 1.2em;
  top: -1.2em;
  border-width: 0em 0.5em 1.2em 0.5em;
  border-style: solid;
  border-color: transparent transparent #fff transparent;
}

.ApplicationHint.BottomLeft .HintContent::before,
.ApplicationHint.BottomLeft .HintContent::after {
  right: 1em;
}

.ApplicationHint.BottomCenter .HintContent::before,
.ApplicationHint.BottomCenter .HintContent::after {
  right: 2em;
}

.ApplicationHint.BottomRight .HintContent::before,
.ApplicationHint.BottomRight .HintContent::after {
  left: 1em;
}


/* ApplicationHint.Left* .HintContent* */


.ApplicationHint.LeftTop .HintContent:before,
.ApplicationHint.LeftMiddle .HintContent::before,
.ApplicationHint.LeftBottom .HintContent::before {
  width: 1.2em;
  height: 1em;
  right: -1.4em;
  border-width: 0.5em 0em 0.5em 1.2em;
  border-style: solid;
  border-color: transparent transparent transparent #077c92 ;
}

.ApplicationHint.LeftTop .HintContent::after,
.ApplicationHint.LeftMiddle .HintContent::after,
.ApplicationHint.LeftBottom .HintContent::after {
  width: 1.2em;
  height: 1em;
  right: -1.2em;
  border-width: 0.5em 0em 0.5em 1.2em;
  border-style: solid;
  border-color: transparent transparent transparent #fff;
}

.ApplicationHint.LeftTop .HintContent::before,
.ApplicationHint.LeftTop .HintContent::after {
  bottom: 1em;
}

.ApplicationHint.LeftMiddle .HintContent::before,
.ApplicationHint.LeftMiddle .HintContent::after {
  top: 2em;
}

.ApplicationHint.LeftBottom .HintContent::before,
.ApplicationHint.LeftBottom .HintContent::after {
  top: 1em;
}


/* ApplicationHint.Right* .HintContent* */


.ApplicationHint.RightTop .HintContent::before,
.ApplicationHint.RightMiddle .HintContent::before,
.ApplicationHint.RightBottom .HintContent::before {
  width: 1.2em;
  height: 1em;
  left: -1.4em;
  border-width: 0.5em 1.2em 0.5em 0em;
  border-style: solid;
  border-color: transparent #077c92  transparent transparent;
}

.ApplicationHint.RightTop .HintContent::after,
.ApplicationHint.RightMiddle .HintContent::after,
.ApplicationHint.RightBottom .HintContent::after {
  width: 1.2em;
  height: 1em;
  left: -1.2em;
  border-width: 0.5em 1.2em 0.5em 0em;
  border-style: solid;
  border-color: transparent #fff transparent transparent;
}

.ApplicationHint.RightTop .HintContent::before,
.ApplicationHint.RightTop .HintContent::after {
  bottom: 1em;
}

.ApplicationHint.RightMiddle .HintContent::before,
.ApplicationHint.RightMiddle .HintContent::after {
  top: 2em;
}

.ApplicationHint.RightBottom .HintContent::before,
.ApplicationHint.RightBottom .HintContent::after {
  top: 1em;
}



/* .ApplicationHint.IsImportant.* * */


.ApplicationHint.IsImportant .HintContent {
_background-color: #bfa;
}


.ApplicationHint.IsImportant.TopLeft .HintContent::after,
.ApplicationHint.IsImportant.TopCenter .HintContent::after,
.ApplicationHint.IsImportant.TopRight .HintContent::after {
  _border-color: #bfa transparent transparent transparent;
}


.ApplicationHint.IsImportant.BottomLeft .HintContent::after,
.ApplicationHint.IsImportant.BottomCenter .HintContent::after,
.ApplicationHint.IsImportant.BottomRight .HintContent::after {
  _border-color: transparent transparent #bfa transparent;
}


.ApplicationHint.IsImportant.LeftTop .HintContent::after,
.ApplicationHint.IsImportant.LeftMiddle .HintContent::after,
.ApplicationHint.IsImportant.LeftBottom .HintContent::after {
  _border-color: transparent transparent transparent #bfa;
}


.ApplicationHint.IsImportant.RightTop .HintContent::after,
.ApplicationHint.IsImportant.RightMiddle .HintContent::after,
.ApplicationHint.IsImportant.RightBottom .HintContent::after {
  _border-color: transparent #bfa transparent transparent;
}



/* .HintsOverlay */


.HintsOverlay {
  position: fixed;
  visibility: hidden;  
  opacity: 0;  
  width: 100%;
  height: 100%;
  background-color: #000;
  z-index: 20;
  transition: opacity 0.4s ease 0.2s;
  transition: 
    opacity 0.4s ease 0s,
    visibility 0s ease 0.4s;
}


.ApplicationHint .HintsOverlay > div {
  position: absolute;
}


#TestPlayer.ShowHints .HintsOverlay {
  visibility: visible;  
  opacity: 0.2;  
  transition: 
    opacity 0.4s ease 0s,
    visibility 0s ease 0s;
}


/* ... */


.ApplicationHint#HintParticipantForm,
.ApplicationHint#HintTestInstruction,
.ApplicationHint#HintBlockInstruction,
.ApplicationHint#HintTestQuestion {
  display: none;
}

#TestPlayer.IsParticipantForm .ApplicationHint#HintParticipantForm {
  display: block;
}

#TestPlayer.IsTestInstruction .ApplicationHint#HintTestInstruction {
  display: block;
}

#TestPlayer.IsBlockInstruction .ApplicationHint#HintBlockInstruction {
  display: block;
}

#TestPlayer.IsTestQuestion .ApplicationHint#HintTestQuestion {
  display: block;
}


/*************************************************************
*
* players/hexagon/customize/incht/custom.css
*
*************************************************************/


.PlayerHeader .BrandPanel {
  background-image: url(/m-tests/versions/release-171216-audio-190509/player/client/players/hexagon/customize/incht/images/incht-logo-head-1.png);
  background-size: auto 50%;
}

.PlayerHeader .ProviderPanel > div {
  background-image: url(/m-tests/versions/release-171216-audio-190509/player/client/players/hexagon/customize/incht/images/incht-logo-foot-1.png);
}

#TestPlayer.IsTestInstruction.IsBlockStarted .PlayerButtons .ButtonInstruction svg path, 
#TestPlayer.IsBlockInstruction.IsBlockStarted .PlayerButtons .ButtonInstruction svg path {
  stroke: #077c92;
  fill: #077c92;
}


/*************************************************************
*
* players/hexagon/customize/incht/components/application-splash/component.css
*
*************************************************************/


/* css/splash.css */
/* css/close-button.css */

.ApplicationSplash {
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0em;
  top: 0em;
  font-size: 0.8em;
  background-color: #fff;
  z-index: 0;
  transition: 
    z-index 0s ease 1s,
    opacity 0.5s ease 0s;
}

.ApplicationSplash.IsVisible {
  opacity: 1;
  z-index: 100;
  transition: 
    z-index 0s ease 0s,
    opacity 0s ease 0s;
}


/*************************************************************
*
* players/hexagon/customize/incht/components/application-splash/css/splash.css
*
*************************************************************/


/* splash-frame-0.css */
/* splash-frame-1.css */
/* phone/splash.css */


.LogoContainer {
  opacity: 0;
  position: relative;
  display: inline-block;
  width: 32em;
  height: 32em;
  left: 50%;
  top: 45%;
  margin-left: -19.5em;
  margin-top: -15em;
  overflow: hidden;
_perspective: 15em;
_border: 1px blue solid;
}


.LogoContainer .LogoHead {
  position: absolute;
  left: 0em;
  top: 0em;
  width: 100%;
  height: 65%;
  background-image: url(/m-tests/versions/release-171216-audio-190509/player/client/players/hexagon/customize/incht/components/application-splash/css/../images/incht-logo-head-1.png);
  background-repeat: no-repeat;
  background-size: 50%;
  background-position: center;
  transform: scale(0.8);
_transform-style: preserve-3d;
_transform: rotateY(-90deg);
_border: 1px red solid;
}

.LogoContainer .LogoFoot {
  position: absolute;
  left: 0em;
  top: 65%;
  width: 100%;
  height: 35%;
  background-image: url(/m-tests/versions/release-171216-audio-190509/player/client/players/hexagon/customize/incht/components/application-splash/css/../images/incht-logo-foot-1.png);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: top;
  opacity: 0;
_transform: rotateY(-90deg);
_border: 1px red solid;
}


/*************************************************************
*
* players/hexagon/customize/incht/components/application-splash/css/splash-frame-0.css
*
*************************************************************/


.LogoContainer.Frame0 {
  opacity: 1;
  font-size: 1em;
  transition: 
    opacity 1s ease-in 0s;
}


.LogoContainer.Frame0 .LogoHead {
  transform: scale(1);
  transition: 
    transform 1s ease-out 0s;
}


.LogoContainer.Frame0 .LogoFoot {
  opacity: 1;
  transition: 
    opacity 1s linear 1s;
}


/*************************************************************
*
* players/hexagon/customize/incht/components/application-splash/css/phone/splash.css
*
*************************************************************/


body.IsPhone.IsPortrait .LogoContainer {
  font-size: 0.5em;
}

body.IsPhone.IsLandscape .LogoContainer {
  font-size: 0.8em;
  margin-top: -12em;
}


/*************************************************************
*
* players/hexagon/customize/incht/components/application-splash/css/close-button.css
*
*************************************************************/


/* phone/close-button.css */

.ApplicationSplash button.CloseButton {
  opacity: 0;
  position: absolute;
  width: 5em;
  height: 5em;
  right: 1em;
  top: 1em;
  padding: 0.5em;
  margin: 0.5em;
}

.ApplicationSplash button.CloseButton svg {
  width: 100%; 
  height: 100%;
  stroke: #888;
}

.ApplicationSplash button.CloseButton.IsVisible {
  opacity: 1;
  transition: 
    all 0.5s ease 0s;
}


/*************************************************************
*
* players/hexagon/customize/incht/components/application-splash/css/phone/close-button.css
*
*************************************************************/


body.IsPhone.IsPortrait .ApplicationSplash button.CloseButton {
  font-size: 0.5em;
}

body.IsPhone.IsLandscape .ApplicationSplash button.CloseButton {
  font-size: 0.6em;
}