/** Montserrat Regular **/
@font-face {
    font-family: "Montserrat";
    font-weight: 400;
    font-style: normal;
    src: url("../fonts/Montserrat-Regular.eot");
    src: url("../fonts/Montserrat-Regular.eot?#iefix") format('embedded-opentype'),
         url("../fonts/Montserrat-Regular.woff2") format("woff2"),
         url("../fonts/Montserrat-Regular.woff") format("woff");
}

/** Montserrat Regular-Italic **/
@font-face {
    font-family: "Montserrat";
    font-weight: 400;
    font-style: italic;
    src: url("../fonts/Montserrat-Italic.eot");
    src: url("../fonts/Montserrat-Italic.eot?#iefix") format('embedded-opentype'),
         url("../fonts/Montserrat-Italic.woff2") format("woff2"),
         url("../fonts/Montserrat-Italic.woff") format("woff");
}

/** Montserrat Medium **/
@font-face {
    font-family: "Montserrat";
    font-weight: 500;
    font-style: normal;
    src: url("../fonts/Montserrat-Medium.eot");
    src: url("../fonts/Montserrat-Medium.eot?#iefix") format('embedded-opentype'),
         url("../fonts/Montserrat-Medium.woff2") format("woff2"),
         url("../fonts/Montserrat-Medium.woff") format("woff");
}

/** Montserrat Medium-Italic **/
@font-face {
    font-family: "Montserrat";
    font-weight: 500;
    font-style: italic;
    src: url("../fonts/Montserrat-MediumItalic.eot");
    src: url("../fonts/Montserrat-MediumItalic.eot?#iefix") format('embedded-opentype'),
         url("../fonts/Montserrat-MediumItalic.woff2") format("woff2"),
         url("../fonts/Montserrat-MediumItalic.woff") format("woff");
}

/** Montserrat SemiBold **/
@font-face {
    font-family: "Montserrat";
    font-weight: 600;
    font-style: normal;
    src: url("../fonts/Montserrat-SemiBold.eot");
    src: url("../fonts/Montserrat-SemiBold.eot?#iefix") format('embedded-opentype'),
         url("../fonts/Montserrat-SemiBold.woff2") format("woff2"),
         url("../fonts/Montserrat-SemiBold.woff") format("woff");
}

/** Montserrat SemiBold-Italic **/
@font-face {
    font-family: "Montserrat";
    font-weight: 600;
    font-style: italic;
    src: url("../fonts/Montserrat-SemiBoldItalic.eot");
    src: url("../fonts/Montserrat-SemiBoldItalic.eot?#iefix") format('embedded-opentype'),
         url("../fonts/Montserrat-SemiBoldItalic.woff2") format("woff2"),
         url("../fonts/Montserrat-SemiBoldItalic.woff") format("woff");
}

/** Montserrat Bold **/
@font-face {
    font-family: "Montserrat";
    font-weight: 700;
    font-style: normal;
    src: url("../fonts/Montserrat-Bold.eot");
    src: url("../fonts/Montserrat-Bold.eot?#iefix") format('embedded-opentype'),
         url("../fonts/Montserrat-Bold.woff2") format("woff2"),
         url("../fonts/Montserrat-Bold.woff") format("woff");
}

/** Montserrat Bold-Italic **/
@font-face {
    font-family: "Montserrat";
    font-weight: 700;
    font-style: italic;
    src: url("../fonts/Montserrat-BoldItalic.eot");
    src: url("../fonts/Montserrat-BoldItalic.eot?#iefix") format('embedded-opentype'),
         url("../fonts/Montserrat-BoldItalic.woff2") format("woff2"),
         url("../fonts/Montserrat-BoldItalic.woff") format("woff");
}

/*
    Preload Heading Images
    @src https://stackoverflow.com/a/819788
*/
#preload-images
{
    width: 0px;
    height: 0px;
    display: inline;
    background-image: url(../images/header-accountability.png),
                      url(../images/header-equity.png),
                      url(../images/header-excellence.png),
                      url(../images/header-integrity.png),
                      url(../images/header-service.png),
                      url(../images/header-trust.png),
                      url(../images/subheader-accountability.png),
                      url(../images/subheader-equity.png),
                      url(../images/subheader-excellence.png),
                      url(../images/subheader-integrity.png),
                      url(../images/subheader-service.png),
                      url(../images/subheader-trust.png);
}

/**************************************************************************************************************************
    GLOBAL
***************************************************************************************************************************/

[hidden] {
    display: none !important;
}
html
{
    font-size: 17px;
}
body {
    margin: 0; padding: 65px 0;
    font-family: 'Montserrat'; font-size: 1rem; line-height: 1.2; font-weight: 500;
    color: #041E42;
    background-color: rgba(243, 184, 181, 0.25);
    background-image: url( '../images/bg-circle-blue.svg' ), url( '../images/bg-circle-white.svg' ), url( ../images/logo.svg );
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: bottom 385px right -250px, bottom -70px right -367px, bottom 60px right 60px;
    min-height: 100vh;
}
@media (min-width: 768px) {
    body { padding-top: 120px; }
}
@media ( max-width: 499px )
{
    body
    {
        background-position: top -300px right -130px, bottom -570px left -360px, bottom 15px right 15px;
        padding-bottom: 120px;
    }
  
}

.no-rel
{
    position: static;
}

/* Make the body clickable in iOS so that the menu can be closed */
.iOS body {
    cursor: pointer;
}

h1, h2, h3, h4, h5, h6 {
    padding: 0;
    margin: 0;
    line-height: 1.2;
    font-weight: 600;
}

h1 {
    font-size: 2.12rem;
    margin-bottom: 1.2rem;
    font-weight: bold;
    color: #1D428A;
}
.cap-text{
    display:block;
    font-size:1.5rem;
    margin-top: 5px;
    margin-bottom:5px;
}
label { font-weight: 500; }

img[usemap], map area {
    outline: 0;
}

ul { list-style: disc; list-style-type: disc; }
ul, ol { padding-left: 1rem; }
ul > li,
ol > li
{ margin-bottom: .5rem; }
a { color: #1567B2; }
form { margin: 0; padding: 0; }
legend { border: 0; margin: 0; padding: 0; }
table td, table th { vertical-align: top; padding: 10px; }

p
{
    margin-bottom: 1.2rem;
}

.sub-heading
{
    font-size: 1.65rem;
}

::-webkit-input-placeholder {
    color: #383838 !important;
}

:-moz-placeholder {
    color: #383838 !important;
}

::-moz-placeholder {
    color: #383838 !important;
}

:-ms-input-placeholder {
    color: #383838 !important;
}

.text-max-width
{
    max-width: 15cm;
}

.btn2-primary,
.btn-primary,
select {
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.93rem; font-weight: 600; line-height: 1.2;
    transition: background-color 0.3s;
    min-width: 120px;
}

button, [role="button"] {
    cursor: pointer;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.btn2-primary,
.btn-primary,
.btn-primary.active,
.btn-primary:active,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary[disabled]:hover,
select { 
    border: 1px solid #000; color: #000;
}

.btn2-primary,
.btn-primary,
.btn-primary[disabled]:hover,
select {
    background-color: rgba(255,255,255,0);
    /* width: 100%; */
}

html:not( .iOS ) .btn2-primary:hover,
.btn-primary.active,
.btn-primary:active,
.btn-primary:hover,
.btn-primary:focus,
select:active,
select:hover,
select:focus {
    background-color: rgba(255,255,255,1);
}

/* https://stackoverflow.com/questions/14218307/select-arrow-style-change */

select::-ms-expand { display: none; }

select {
    display: block; width: 100%; height: auto;
    background-image: url(../images/dropdown-caret.svg);
    background-repeat: no-repeat;
    background-position: calc(100% - 10px);
    background-size: auto 17.9px;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
}

.callout
{
    background: #fff;
    padding: 10px;
    font-weight: bold;
    border-radius: 10px;
    margin: 1.2rem 0;
}
.callout p:last-child
{
    margin-bottom: 0;
}

/**************************************************************************************************************************
    ACCESSIBILITY
***************************************************************************************************************************/

.keyboard-nav *:focus, .keyboard-nav a:focus, .keyboard-nav input[type="file"]:focus, .keyboard-nav input[type="radio"]:focus, .keyboard-nav input[type="checkbox"]:focus, .keyboard-nav .btn:focus, .keyboard-nav .btn:active:focus, .keyboard-nav .btn.active:focus, .keyboard-nav .btn.focus, .keyboard-nav .btn.active.focus, .keyboard-nav .focussed {
    outline: 2px solid red;
    outline-offset: 2px;
}

.keyboard-nav .focussed-pseudo:before {
    content: "";
    position: absolute;
    display: block;
    border: 2px solid red;
}

body:not(.keyboard-nav) *:focus {
    outline: none;
}

/**************************************************************************************************************************
    HELPER CLASSES
***************************************************************************************************************************/

ul.list-style-none { list-style: none; }
.strong { font-weight: bold; }

.split-overflowed-text, .email-link {
    /* These are technically the same, but use both */
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    /* This is the dangerous one in WebKit, as it breaks things wherever */
    word-break: break-all;
    /* Instead use this non-standard one: */
    word-break: break-word;
}

.split-overflowed-text.use-hyphens {
    /* Adds a hyphen where the word breaks, if supported (No Blink) */
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

.elipsis-overflowed-text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.margin-top-xs { margin-top: 10px; }
.margin-top-sm { margin-top: 20px; }
.margin-top-md { margin-top: 30px; }
.margin-top-lg { margin-top: 15px; }
.margin-top-xl { margin-top: 50px; }
.margin-top-xxl { margin-top: 60px; }
.margin-bottom-xs { margin-bottom: 10px; }
.margin-bottom-sm { margin-bottom: 20px; }
.margin-bottom-md { margin-bottom: 30px; }
.margin-bottom-lg { margin-bottom: 40px; }
.margin-bottom-xl { margin-bottom: 50px; }
.margin-bottom-xxl { margin-bottom: 60px; }
.margin-left-xs { margin-left: 10px; }
.margin-left-sm { margin-left: 20px; }
.margin-left-md { margin-left: 30px; }
.margin-left-lg { margin-left: 40px; }
.margin-left-xl { margin-left: 50px; }
.margin-left-xxl { margin-left: 60px; }
.margin-right-xs { margin-right: 10px; }
.margin-right-sm { margin-right: 20px; }
.margin-right-md { margin-right: 30px; }
.margin-right-lg { margin-right: 40px; }
.margin-right-xl { margin-right: 50px; }
.margin-right-xxl { margin-right: 60px; }

/**************************************************************************************************************************
    DROPDOWN MENU
***************************************************************************************************************************/

.dropdown-mnu a.toggle { display: block; }
.dropdown-mnu a.toggle img { display: block; width: 26.2px; height: 17px; }

.dropdown-mnu-backdrop {
    display: none;
    position: fixed; top: 0; right: 0; left: 0;
    height: 100vh;
    background-color: rgba(0,0,0,0);
    /*z-index: 1031;*/
    -moz-transition: background-color 0.5s;
    -webkit-transition: background-color 0.5s;
    transition: background-color 0.5s;
}

.dropdown-mnu-prepare .dropdown-mnu-backdrop { display: block; }
.dropdown-mnu-in .dropdown-mnu-backdrop { background-color: rgba(0,0,0,0.5); }

.dropdown-mnu-items-container {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: 100%;
    max-width: 310px;
    background: #FFF;
    box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.7);
    /*z-index: 3;*/
    overflow-y: auto;
    -ms-transform: translateX(100%); -moz-transform: translateX(100%); -webkit-transform: translateX(100%); transform: translateX(100%);
    -moz-transition: transform 0.5s; -webkit-transition: transform 0.5s; transition: transform 0.5s;
}

.dropdown-mnu-items-container > div {
    position: relative;
    height: 104px;
    background: rgb(67,67,67);
}

.dropdown-mnu-items-container > div button {
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -8px;
    overflow: hidden;
    width: 16px;
    height: 16px;
    background: none;
    border: none;
    padding: 0;
    border-radius: 0;
    -webkit-appearance: none;
}

.dropdown-mnu-items-container > div button img {
    position: absolute;
    top: -124px;
    left: 0;
}

.dropdown-mnu-prepare .dropdown-mnu .dropdown-mnu-items-container {
    display: block;
}

.dropdown-mnu.in .dropdown-mnu-items-container {
    -ms-transform: translateX(0);
    -moz-transform: translateX(0);
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

.dropdown-mnu-items {
    margin: 0;
    padding: 30px 0 0 20px;
    list-style: none inside none;
    box-sizing: border-box;
    color: #000;
    font-size: 18px;
    font-size: 1.8rem;
}

.dropdown-mnu-items li {
    display: list-item;
    float: none;
    line-height: normal;
    position: relative;
    padding: 0;
    margin: 0;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.dropdown-mnu-items li a {
    display: block;
    color: #383838;
    padding: 9px 0;
}

.dropdown-mnu-items li a:hover, .dropdown-mnu-items li a:focus {
    color: #fff;
    text-decoration: none;
    background-color: rgba(130, 54, 140, 0.5);
}

.dropdown-mnu-items li a[aria-disabled="true"] {
    cursor: default;
}

.dropdown-mnu-items li a[aria-disabled="true"], .dropdown-mnu-items li a[aria-disabled="true"]:hover {
    color: rgba(0, 0, 0, 0.5);
    background-color: #fff;
}

.dropdown-mnu-items li a > div {
    float: left;
    width: 28px;
}

.dropdown-mnu-items li a > div > div {
    position: relative;
    overflow: hidden;
    margin: 0 auto;
}

.dropdown-mnu-items li a > div > div > img {
    position: absolute;
    left: 0;
}

.dropdown-mnu-items li a > p {
    margin: 0;
    padding-left: 80px;
}

.dropdown-mnu-items li.mnu-item-exit a > div > div { width: 19px; height: 19px; }
.dropdown-mnu-items li.mnu-item-exit a > div > div > img { top: 0; }
.dropdown-mnu-items li.mnu-item-help a > div > div { width: 21px; height: 26px; }
.dropdown-mnu-items li.mnu-item-help a > div > div > img { top: -19px; }
.dropdown-mnu-items li.mnu-item-home a > div > div { width: 17px; height: 19px; }
.dropdown-mnu-items li.mnu-item-home a > div > div > img { top: -45px; }
.dropdown-mnu-items li.mnu-item-home { display: none; }
.show-home-menu-item .dropdown-mnu-items li.mnu-item-home { display: list-item; }

/**************************************************************************************************************************
    HEADER
***************************************************************************************************************************/

header {
    height: 45px;
    /*background: #000;*/
    background: none;
}

header ul.components {
    display: none;
    position: relative;
    height: 100%;
    padding: 0;
    /*max-width: 800px;*/
    /*max-width: 1024px;*/
    margin: 0 auto;
}

.show-menu header ul.components { display: block; }

header ul.components > li {
    display: inline-block;
    padding: 0px 0;
    margin: 0;
}

#dropdown-mnu-main {
    display: block;
    float: right;
    /*margin-right: 15px;*/
    margin-top: 20px;
}

/*
    Large devices, show menu items with no hamburger
*/

#header-mnu-items-lg { display: none; list-style: none; text-align: right; padding: 0 15px 0 0; margin: 0; font-weight: 400; font-size: 13px; font-size: 1.3rem; }
#header-mnu-items-lg li { display: inline-block; padding: 0; margin: 0 0 0 1%; }
#header-mnu-items-lg a { color: #fff; }
#header-mnu-items-lg .debug-only-list-item { position: absolute; top: 5px; right: 15px; margin: 0; }

@media (min-width: 768px){
    header:not(.always-show-mobile-menu) #dropdown-mnu-main { display: none; }
    header:not(.always-show-mobile-menu) #header-mnu-items-lg { display: block; }
}

@media (min-width: 1024px){
    #header-mnu-items-lg { font-size: 16px; font-size: 1.6rem; }
    #header-mnu-items-lg li { margin-left: 4%; }
}

/**************************************************************************************************************************
    CONTENT
***************************************************************************************************************************/

#page-loading-mask {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    z-index: 1050;
}

.page-loading-mask-in #page-loading-mask {
    display: block;
}

#page-loading-mask > img {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 32px;
    height: 32px;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

@media (min-width: 1024px){
    #header-mnu-items-lg li { margin-left: 3.5%; }
}


/**************************************************************************************************************************
    PAGES
***************************************************************************************************************************/

section { display: none; }

[data-section="welcome"] #section-welcome,
[data-section="demographics"] #section-demographics,
[data-section="home"] #section-home,
[data-section="intro"] #section-intro,
[data-section="questions"] #section-questions,
[data-section="results"] #section-results,
[data-section="done"] #section-done {
    display: block;
}

[data-section="questions"] h1
{
    text-align: center;
    max-width: 100%;
}

section .btn-continue { margin-top: 30px; }

.btn-alignment-container button { display: block; width: 100%; margin-top: 10px; }
.btn-alignment-container button + button { margin: 10px 0 0 0; }
@media (min-width: 380px) {
    .btn-alignment-container { text-align: right; }
    .btn-alignment-container.left { text-align: left; }
    .btn-alignment-container button {display: inline-block;width: auto;/* min-width: 160px; */}
    .btn-alignment-container button + button { margin: 10px 0 0 10px; }
}

.containment { max-width: 80%; }
/*[data-section="questions"] .containment { max-width: unset; max-width: none; }*/

@media (min-width: 500px) {
    /*.containment,
    [data-section="questions"] .containment { max-width: 320px; }*/
    .containment { max-width: 320px; }
}

@media (min-width: 768px) {
    [data-section="questions"] .btn-alignment-container { padding-right: 2.5rem; }
}

@media (min-width: 992px) {
    /*.containment,
    [data-section="questions"]  .containment { padding-left: 50px; max-width: 370px; }*/
    .containment {padding-left: 50px;max-width: 460px;}
}

@media (min-width: 1200px) {
    /*.containment,
    [data-section="questions"]  .containment { padding-left: 100px; max-width: 430px; }*/
    .containment {padding-left: 50px;max-width: 560px;}
}

@media ( max-width: 499px )
{
    .containment { max-width: 100%; }
}

/*
    WELCOME
*/

#gptw-logo
{
    position: absolute;
    left: 60px;
    top: 20px;
    width: 198px;
    height: 92px;
}

@media ( max-width: 991px )
{
    #gptw-logo
    {
        position: absolute;
        left: 15px;
        top: 15px;
    }
    body
    {
        padding-top: 120px;
    }
}


/*
    DEMOGRAPHICS
*/

#section-demographics .contaiment-md {max-width: 370px;}
#demographic-questions { margin-top: 30px; }
#section-demographics .demographic-question {padding: 15px;background: rgba(255, 255, 255, .3);border-radius: 6px;margin-bottom: 15px;border: 1px solid transparent;}
#section-demographics .demographic-question .form-group:last-of-type { margin-bottom: 0; }
#section-demographics .freetext { display: none; }
#section-demographics .enter-free-text .freetext { display: block; }
#section-demographics textarea { resize: vertical; }
#btn-why-enter-demographics { margin-bottom: 15px; }
#reason-why-container { margin: 0 0 15px 0; }
#reason-why { background: #00859b; padding: 15px; color: #fff; border-radius: 6px; }
#reason-why p:last-of-type { margin-bottom: 0; }

#section-demographics .demographic-question select,
#section-demographics .demographic-question.option-answered select{
    color:#000;
}

#section-demographics .demographic-question.inError select{
    /* background:red;
    color:white */
}
#section-demographics .demographic-question.option-answered select{
    background:#BCD19B;
}



@media (min-width: 992px) and (min-aspect-ratio: 1/1) {
    #section-demographics .contaiment-md {padding-left: 50px;max-width: 460px;}
}

@media (min-width: 1200px) and (min-aspect-ratio: 1/1) {
    #section-demographics .contaiment-md {padding-left: 100px;max-width: 460px;}
}
        
/*
    HOME (CHOOSE STREAM)
*/

[data-section="home"] body {/* background-color: #80d9d4; */}
#section-home .form-group { margin-top: 30px; }

.clock-section
{
    display: flex;
    align-items: center;
    margin: 15px 0;
}
.icon-clock { width: 55px; height: 55px; margin-right: 15px; }

/*
    QUESTIONS INTRO
*/

/*
    QUESTIONS
*/

/* Image headings */
.topic-accountability .cap-text,
.topic-accountability .top-title,
.topic-equity .cap-text,
.topic-equity .top-title,
.topic-excellence .cap-text,
.topic-excellence .top-title,
.topic-integrity .cap-text,
.topic-integrity .top-title,
.topic-service .cap-text,
.topic-service .top-title,
.topic-trust .cap-text,
.topic-trust .top-title
{
    display: block;
    overflow: hidden;
    font-size: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    margin: 5px auto;
    max-width: 100%;
}

.topic-accountability .top-title,
.topic-equity .top-title,
.topic-excellence .top-title,
.topic-integrity .top-title,
.topic-service .top-title,
.topic-trust .top-title
{
    height: 80px;
}

.topic-accountability .cap-text::after,
.topic-equity .cap-text::after,
.topic-excellence .cap-text::after,
.topic-integrity .cap-text::after,
.topic-service .cap-text::after,
.topic-trust .cap-text::after
{
    display: block;
    content: "";
}

.topic-accountability .cap-text { background-image: url( ../images/subheader-accountability.png ); width:356px; }
.topic-accountability .cap-text::after { padding-bottom: 11.79% }
.topic-accountability .top-title { background-image: url( ../images/header-accountability.png ); }
.topic-equity .cap-text { background-image: url( ../images/subheader-equity.png ); width:172.5px; }
.topic-equity .cap-text::after { padding-bottom: 21.15% }
.topic-equity .top-title { background-image: url( ../images/header-equity.png ); }
.topic-excellence .cap-text { background-image: url( ../images/subheader-excellence.png ); width:173px; }
.topic-excellence .cap-text::after { padding-bottom: 32.36% }
.topic-excellence .top-title { background-image: url( ../images/header-excellence.png ); height: 60px; }
.topic-integrity .cap-text { background-image: url( ../images/subheader-integrity.png ); width:359px; }
.topic-integrity .cap-text::after { padding-bottom: 14.76% }
.topic-integrity .top-title { background-image: url( ../images/header-integrity.png ); }
.topic-service .cap-text { background-image: url( ../images/subheader-service.png ); width:347.5px; }
.topic-service .cap-text::after { padding-bottom: 10.79% }
.topic-service .top-title { background-image: url( ../images/header-service.png ); height: 60px; }
.topic-trust .cap-text { background-image: url( ../images/subheader-trust.png ); width:222px; }
.topic-trust .cap-text::after { padding-bottom: 15.99% }
.topic-trust .top-title { background-image: url( ../images/header-trust.png ); height: 60px; }

#question-number
{
    font-weight: bold;
    font-size: 0.88rem;
}

/*[data-section="questions"] body { background-color: #fff; }*/

#answer-slider-container { width: 100%; height: 6rem; margin: 15px 0 40px 0; padding: 2.2rem 3rem 0 3rem; }
#answer-slider-container-inner { position: relative; height: 100%; }
#answer-slider-container .tick { position: absolute; bottom: 0; transform: translateX(-50%); font-weight: bold; }
#answer-slider-container .tick-1 { left: 0; }
#answer-slider-container .tick-2 { left: 33.3333%; }
#answer-slider-container .tick-3 { left: 66.6667%; }
#answer-slider-container .tick-4 { left: 100%; }
        
#answer-slider { width: 100%; }

#answer-slider.ui-slider .ui-slider-handle { 
    width: 1.2em; height: 1.2em;
    width: 56px;
    height: 56px;
    width: 3.5008205em;
    height: 3.5008205em;
    background: #041E42;
    border-radius: 50%;
    cursor: pointer;
}

#answer-slider.ui-slider { background: rgba(4, 30, 66, 0.2); border-radius: 6px; }
        
#answer-slider.ui-slider-horizontal .ui-slider-handle {
    /*top: -.3em;
    margin-left: -.6em;
    top: -21.6px;
    top: -1.35031648em;*/
    top: -1.35041025em;
    /*margin-left: -28px;*/
    margin-left: -1.75041025em;
}

#answer-slider-value,
#answer-slider-text-value
{
    text-align: center;
}

#answer-slider-value { font-size: 1.42rem; font-weight: 600; margin-top: 30px; margin-bottom: 5px; }
#answer-slider-text-value { font-weight: 500; margin-bottom: 15px; }

/*
    RESULTS
*/

#section-results { max-width: none; max-width: unset; padding-left: 0; }
#section-results h2 { font-size: 1.2rem; margin-bottom: 10px; }
#results-list {list-style: none;display: block;width: 100%;/* max-width: 340px; */margin: 0;padding: 0;}
#results-list > li { display: block; width: 100%; margin: 30px 0; padding: 0; }
#results-list .topic-title { margin-bottom: 0; }
#results-list .bar-and-number { width: 100%; display: flex; align-items: center; }
#results-list .bar { flex-grow: 1; height: 12px; background: rgba(255, 255, 255, 0.7); border: 1px solid #fff; margin-right: 8px; border-radius: 4px; }
#results-list .bar-inner { height: 100%; width: 100%; background: #041E42; transform-origin: top left; border-radius: 4px; }
#results-list .number { color: #000; font-weight: 600; width: 100px }
#results-summary { margin-top: 30px; text-align: center; }
#results-summary-leader { font-size: 2.182rem; font-weight: 400; margin-top: 30px; }
#results-profile-name { font-size: 2.182rem; font-weight: 600; }
#results-profile-img { margin: 15px 0; }
#section-results button[role="navigation"] { margin-top: 20px; }
@media (min-width: 500px) {
    #results-summary { text-align: left; }
}
@media (min-width: 992px) {
    #section-results { padding-right: 300px; }
    #results-summary { margin-top: 100px; text-align: center; }
    #section-results button[role="navigation"] { margin-top: 100px; }
}
.inError.option-answered .you-need-answer,
.you-need-answer{
	display:none;
	color: #C00000;
	font-size:16px;
	padding-top:5px;
}
.inError .you-need-answer{
	display:block;
	
}

.downloads > *
{
    margin-bottom: 10px;
}

.if-stream-individual,
.if-stream-team
{
    display: none;
}
#section-results.stream-individual .if-stream-individual,
#section-results.stream-team .if-stream-team
{
    display: block;
}

table.stream-tab{
	background-color: #fff;
	border-collapse: collapse;
	margin-top: 30px;
	font-size: 90%;
}
table.stream-tab th,
table.stream-tab td{
	border:2px solid #000;
	padding:10px;
	text-align: left;
	vertical-align: text-top;
	font-size: 90%;
}

table.stream-tab th.color1,
table.stream-tab td.color1{
	background-color: #325597;
	color:#fff;
}

table.stream-tab th.color2,
table.stream-tab td.color2{
	background-color: #83CDBC;
	color:#fff;
	font-size: 100%;
}
table.stream-tab th.color3,
table.stream-tab td.color3{
	background-color: #3E8C99;
	color:#fff;
	font-size: 100%;
}
table.stream-tab th.color4,
table.stream-tab td.color4{
	background-color: #99D6DB;
	color:#fff;
	font-size: 100%;
}
table.stream-tab th.color5,
table.stream-tab td.color5{
	background-color: #04B3B8;
	color:#fff;
	font-size: 100%;
}