/* Minification failed. Returning unminified contents.
(905,14): run-time error CSS1030: Expected identifier, found '*'
(905,30): run-time error CSS1030: Expected identifier, found '*'
(905,53): run-time error CSS1030: Expected identifier, found '*'
 */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

/*html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}*/
/* HTML5 display-role reset for older browsers */
/*article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, main {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}*/
/* 

    Main Css for the Patient Portal site

*/

body {
    margin: 0;
}

*, *:before, *:after {
    margin: 0;
}

html, body, input, li, textarea, select {
    font-family: Arial;
    font-size: 14px;
    color: #555;
}

/* Dialogs */
.messi .messi-box {
    border-color: #003d59;
    border-radius: 10px;
    border-width: 4px;
}
.messi .messi-box .btn {
    border-color: #003d59;
    color: #003d59;
}

.dialogTextNoIcon {
    font-weight: normal;
}

p {
    font-size: 1em;
    line-height: 1.5em;
}

tr .evenRow,
tr .oddrow{
    font-size: 1.1em;
}

a {
    color: #25205d;
    text-decoration: none;
}

    a:hover {
        color: #8f80ac;
    }

.material-icons.md-20 {
    font-size: 20px;
}

.material-icons.md-24 {
    font-size: 24px;
}

.material-icons.done {
    color: white;
}

/*
    Global input defaults
*/
input {
    border-width: 1px;
    border-style: solid;
    border-color: #A5AEAE;
    padding: 0.3em;
    border-radius: 0.3em;
}

select {
    border-width: 1px;
    border-style: solid;
    border-color: #A5AEAE;
    padding: 0.3em;
    border-radius: 0.3em;
}

.active {
    background-color: #4CAF50;
    color: white;
}

.material-icons.filtermulti {
    color: #fff;
}

#ModalContent {
    margin: unset !important;
    position: fixed !important;   
    height: unset !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    max-height: 50%;
    overflow:auto !important;
}

#ModalTitle {
    position:sticky;
    top:0;
}

#ModalCloseContainer {
    position: sticky;
    bottom: 0;
    background-color:inherit;
    padding-bottom:10px;
    padding-top:10px;
    text-align:center
}

#ModalInner {
    overflow: auto;
    height:unset !important;
}

#modalClose {
    width:unset !important;
    display:inline-block;
    min-width:100px;
}

/* 
    Mobile Menu 
    NOTE:
        Some of these are also used in the js function showMobileMenuOptions in portal.js
        so any changes here will need to be checked there.
*/
.navMenu {
    overflow: hidden;
    background-color: #25205d;
    min-height: 4.0em;
    max-height: 5.0em;
    position: fixed;
    width: 100%;
    z-index: 3; /* A low number so that it sits over the timeline and dashboard when scrolling - but should not impact any full screen popups */
}

.navMenu .navMenuTitle {
    margin-left: 3.2em;
    line-height:1.2em;
    
}
.navMenu .navMenuTitle span {
    color: white;
    font-size: medium;
}

    .navMenu .navMenuImage img {
        display: none;
    }

    .navMenu .navMenuOptions {
        display: none;
        padding-top: 0.7em;
        padding-bottom: 1.4em;
    }

        .navMenu .navMenuOptions ul {
            color: white;
            margin: 0;
            padding: 0 0 0 1.3em;
        }
            .navMenu .navMenuOptions ul li {
                padding-top: 0.2em;
                color: white;
                cursor: pointer;
                list-style: none;
            }

    .navMenu .selected {
        font-size: medium;
        font-weight: bold;
    }
        .navMenu .selected i {
            margin-left: -1.2em;
            vertical-align: middle;
            color: #a3cf5e;
        }

        .navMenu .selected a {
            color: #a3cf5e !important;
            padding-top: 0.2em !important;
        }

.navMenu a {
    color: white;
    padding: 0.3em 0.4em;
    text-decoration: none;
    display: inline-block;
    vertical-align: top;
}

.navMenu a.icon {
    display: block;
    position: absolute;
    top: 0;
}

    .navMenu a:hover {
        color: #6fb9c3;
    }

    .navMenu .navOptionSplitter {
        width: 80%;
        margin-top: 1em;
        margin-bottom: 0.3em;
        text-align: left;
    }

/* Page Container for all content */
.bodyPane {
    padding-top: 3.2em; /* Max Height of navMenu */
}

/*the main content area*/
.contentPane {
    margin: 0 auto;
    padding: 1.3em .5em;
    padding-right: 0;
}

    .default-container {
        max-width: 1080px;
    }

h3 {
    margin: 0em 1.3em .07em 0;
    background-color: #a3cf5e;
    border-radius: 5px;
    padding: 0.6em;
}

    .portal-grid {
        margin: 1.5em 1.6em 1.5em 0;
    }

    #survey-loading span{
        margin-top:10px;
    }

.loader {
    font-size: 1.6em;
    font-weight: bold;
    padding-left: 30%;
    height:100%;
    position: absolute;
    text-align:center;
}

    .hidden {
        display: none;
    }

    .pdfOnly {
        display: none;
    }

    .survey-container{
        max-width:1220px;
    }

/*dashboard */
#dashboardGrid li {
    list-style:none;
}

/*action buttons*/
.actionButton {
    border-radius: 5px;
    color: #fff;
    background-color: #25205d;
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
    border: 0;
    padding: 5px;
    -webkit-appearance: none;
    cursor: pointer;
}

    .actionButton a {
        text-decoration: none;
        color: #fff;
    }

    .actionButton:hover {
        background-color: #8f80ac;
    }

.actionButtonDisabled {
    opacity: 0.65;
    cursor: default !important;
}

    .actionButtonDisabled:hover {
        opacity: 0.65 !important;
        background-color: #0a768a !important;
    }

.actionButtonGrid {
    font-size: 15px;
}

.actionButtonSelected {
    background-color: #517171;
}


/* Tiles and Headings */
.pageHeading {
    padding-top: 10px;
}

.TileGridTitleContent {
    padding-left:10px;
    padding-right:10px;
    padding-bottom:10px;
}


/* Global Validation Style */
.Portal .field-validation-error {
    margin-bottom: 0.5em;
    color: red;
    font-size: medium;
    display: none;
    width: 100%;
}
    .Portal .field-validation-error:before {
        font-family: "Material Icons";
        content: "\e000\00a0"; 
        display: inline-block;
    }

/* Small screen portrait and upwards */
@media all and (min-width: 650px) {
    .navMenu .navMenuTitle {
        padding-top: 0.5em;
    }
}

@media all and (min-width: 736px) and (min-height: 375px) {
    .navMenu .navMenuOptions ul li {
        padding-bottom: .6em;
    }
}

/* Portrait and Upwards */
@media all and (min-width: 736px) {

    /* Desktop Navigation bar */
    .bodyPane {
        margin-left: 15em;
        padding-top: inherit; 
    }

    html[dir="rtl"] .bodyPane {
        margin-left: 0em;
        margin-right: 15em;
    }

    .navMenu {
        width: 15em;
        height: 100%;
        border-right: 1px solid #D5DEE5;
        max-height: 100%;
    }

    .navMenu_section {
        line-height: 30px;
        background: #A5AEAE;
        color: #fff;
        padding: 5px;
        display: flex;
    }

    .navMenu .navMenuTitle { display: none; }

    .navMenu .navMenuImage img {
        margin: 1.5em 1em;
        max-width: 90%;
        display: block;
    }

    .navMenu a.icon { display: none; }

    .navMenu .navMenuOptions {
        display: block;
        margin-top: 0.1em;
    }

    .navMenu .navMenuOptions ul { color: white; }

    .navMenu .navMenuOptions ul li {
        cursor: pointer;
        font-size: large;
        list-style: none;
    }

    .navMenu .navMenuOptions ul li a { padding: 0; }

    .navMenu .navMenuOptions .selected {

    }

    .navMenu .navMenuOptions .selected i {
        margin-left: -1.3em;
        vertical-align: bottom;
    }

    .navMenu .navOptionSplitter {
        width: 70%;
        margin-bottom: 0.5em;
    }
}

@media all and (min-width: 736px) and (min-height: 376px) {
    .navMenu .navMenuOptions ul li {
        padding-bottom: .8em;
    }
}

/* Desktop upwards */
@media all and (min-width: 736px) {
    
    .contentPane {
        padding: 2em 0 0 2em;
    }

    /* right to left */
    html[dir="rtl"] .contentPane {
        padding: 2em 2em 0 0em;
    }

    .modalPreference-content {
        height: 400px !important;
        width: 400px !important;
    }

    .partCompleteLoaderContent {
        width: 50%;
    }
}

@media all and (max-width: 735px) {
      
    .partCompleteLoaderContent {
        width: 85%;
    }
}

.evenRow, .oddRow {
    background-color: #fff;
}

.colour1 th {
    font-weight: bolder;
}

/* Popup */

/* Mobile view */
@media all and (max-width: 481px) {
    .modalPreference-content {
        width: 90% !important;
        height: auto !important;
    }

    .survey-container .MultiBottom .ActionButton {
        font-size: 1em;
    }

    .messi-box {
        width:unset !important;
    }

    .messi {
        margin-left: unset !important;
    }

    .login {
        margin-bottom:4em;
    }
}

.modalPreference-content {
    /*height:auto !important;*/
    min-height:0 !important;
    min-width:0 !important;
}

#InfoPopupText {
    padding-bottom:50px;
}

#CloseInfoPopupButton {
    width: 50px;
    position: absolute;
    margin-bottom: 10px;
    bottom: 0;
}

.modal-title {
    line-height: unset !important;
    margin-bottom: 20px;
    font-size: 22px;
}

.tileInfoIcon {
    width:24px;
    height:24px;   
}

.titleContainer .tileInfoIcon {
    margin: 5px;
}

#InfoPopupTitle {
    line-height:24px !important;
}

.tileNoDataMessage {
    padding-top:10px;
    display:none;
}

#surveysOutstandingTimeline p,
#surveysCompletedTimeline p {
    width: 95%;
}

#surveysOutstandingGrid p {
    padding: 0 1em;
    width: 95%;
}

.portalIndex,
.aboutme,
.surveysCompleted,
.conditionDetails,
.settings,
.contactUs {
    max-width: 900px;
}

#questionnaireSection,
#survey-container {
    max-width: 1180px;
    margin-right: 2em;
}

a.skipPage {
    border: 1px solid #fff;
    background-color: #003865;
    color: #fff!important;
    border-radius: 5px;
    padding: 0.3em;
    margin: 0.5em;
    float: right;
}

a.skipPage:hover {
    background-color: #fff;
    color: #003865;
    border: 1px solid #003865;
}

/* Family Referal */
#IdentityReferal {
    margin-right: 1.5em;
    max-width: 980px;
}

    #IdentityRelationship p {
        padding: 0.5em 0em;
    }

#ReferFamilyFormContainer {

}

#ReferFamilyForm {
    margin: 1em;
}

#IdentityReferal h1 {
    margin-bottom: 0.5em;
    font-size: 1.6em;
}

#IdentityReferal h3 {
    margin: 1em 0em;
}

#IdentityReferal h2 {
    margin-bottom: 0.2em;
}


#ReferFamilyForm .row {
    width: 100%;
    margin-bottom: 1em;
    border-bottom: 1px dotted #e3b822;
}

#ReferFamilyForm textarea {
    font-size: medium;
    width: 96%;
    padding: 1em;
    height: 28em;
    margin-bottom: 1em;
}


#ReferFamilyForm label {
    margin-bottom: 1.2em;
    display:inline-block;
}


#ReferFamilyForm .row input,
#ReferFamilyForm .row select {
    margin-left: 1.5em;
    color:#555; 
}

#ReferFamilyForm .row input{
    width: 15em;
    padding:0.4em;
    margin-left: 2.9em;
}

#ReferFamilyForm .field-validation-error {
    display:unset;
}

@media (max-width:420px) {
    #surveysOutstandingGrid table, #initialSurveys table {
        width: 100%;
        margin-left: 0em;
    }
}

/** Completion CSS **/

#QuestionnaireWelcomeText_paginationPages sub {
    background: none;
}

.MatrixSection td {
    padding: 10px 0px;
}

.MultiBottom {
    z-index:3; /* Stops the slider handle showing through */
}

#OCSlider .ui-widget {
    font-family: unset;
}

.footerText {
    font-size:0.7em;
}

#WelcomeMessageLanguageLabel, #drpLanguage {
    display: none;
}

/** End completion CSS */
/** Accessibility */
/* Hide programmatically focused elements */
[tabindex='-1'] {
    outline: none;
}

.screenReaderOnly {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media only screen and (min-width: 1025px) {

    .login {
        max-width: 900px;
    }
}

/*Booking Specific CSS*/

.bookingList {
    margin-right:1em;
}

.bookingList p {
    line-height: 2.4em!important;
}

/*End of Booking Specific*/

.pdfIconMargin {
    margin-right: 12px;
}

.modalPreference-content-pdf {
    width: 900px !important;
}

.modalPreference-PDF {
    height: 400px;
}

/*add css for popup window in the portal site*/

/* full screen pane*/
.fsPane {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #fff;
    z-index: 9998;
    display: none;
    overflow-y: auto;
}

    .fsPane .loader {
        font-size: 1.6em;
        font-weight: bold;
        padding-left: 40%;
        height: 100%;
        position: absolute;
        text-align: center;
    }

.fsNav {
    width: auto;
    background-color: #EDEFEF;
    display: table-row;
    height: 1em;
}

.fsNavBack {
    background-color: #86BFBF;
    display: table-cell;
    width: 48px;
    cursor: pointer;
}

    .fsNavBack:hover {
        background-color: #6fb9c3;
        cursor: pointer;
    }

.fsNavTitle {
    font-size: 16px;
    margin-left: 10px;
    display: table-cell;
    width: 100%;
    padding-left: 10px;
    vertical-align: middle;
    cursor: pointer;
    color: #555;
    font-weight: bold;
}

.fsFilter {
    color: black;
}

.fsContent {
    height: calc(100% - 5em);
    padding: 1em;
    overflow-y: auto;
}

.partCompleteLoaderOverlay {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: #cfcfcf;
    opacity: 0.8;
    position: absolute;
    z-index: 9998;
    text-align: center;
}


.partCompleteLoaderContent {
    background-color: #fff;
    height: 5em;
    border: 4px solid #555;
    border-radius: 10px;
    padding: 1em;
    position: absolute;
    top:10%;
    z-index: 9999;
    text-align: center;
    font-weight: bold;
    font-size: 1.2em;
}

#ModalContent .WarningTitle {
    padding:0px;
}

#error-captcha {
    display: block;
    color:red;
    margin-bottom:10px;
}

.infoPanel {
    background: #f8ffb9;
    padding: 20px 0px 20px 20px;
    border-radius: 4px;
    margin: 10px 10px 10px 0px;
    border: 1px solid #f1d772;
    font-weight: bold;
}

@media only screen and (max-width: 735px) {
    #ModalContent {
        max-height:75%;
        max-width:90%;
    }

}

@media only screen and (min-width: 1025px) {
    #ModalContent {
        max-width: 40%;
    }
}
/* -------------------------------- 

Primary style

-------------------------------- */
.cd-timeline.*, .cd-timeline.*::after, .cd-timeline.*::before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.cd-timeline.a {
    color: #acb7c0;
    text-decoration: none;
}

.cd-timeline.img {
    max-width: 100%;
}

.cd-timeline.h1, .cd-timeline.h2 {
    font-family: "Open Sans", sans-serif;
    font-weight: bold;
}

/* -------------------------------- 

Patterns - reusable parts of our design

-------------------------------- */
@media only screen and (min-width: 1024px) {
    .cd-is-hidden {
        visibility: hidden;
    }
}

@media only screen and (max-width: 1024px) {
    .cd-timeline__container {
        padding: 2em 2em 2em 0;
    }
}


/* -------------------------------- 

Vertical Timeline - by CodyHouse.co

-------------------------------- */
header {
    height: 200px;
    line-height: 200px;
    text-align: center;
    background: #303e49;
}

    header h1 {
        color: white;
        font-size: 1.8rem;
    }

@media only screen and (min-width: 1024px) {
    header {
        height: 300px;
        line-height: 300px;
    }

        header h1 {
            font-size: 2.4rem;
        }
}

.cd-timeline {
    overflow: hidden;
    margin: 2em auto;
}

.cd-timeline__container {
    position: relative;
    max-width: 768px;
    margin: 0 auto;
    padding-top: 2em;
    padding-bottom: 5em;
    margin-bottom:8em;
}

    .cd-timeline__container::before {
        /* this is the vertical line */
        content: '';
        position: absolute;
        top: 0;
        left: 18px;
        height: 100%;
        width: 1px;
        border-left: 1px dotted #25205d;
    }

@media only screen and (min-width: 1024px) {
    .cd-timeline {
        margin-top: 3em;
        margin-bottom: 3em;
    }

    .cd-timeline__container::before {
        left: 50%;
        margin-left: -2px;
    }
}

.cd-timeline__block {
    position: relative;
    margin: 2em 0;
}

    .cd-timeline__block:after {
        /* clearfix */
        content: "";
        display: table;
        clear: both;
    }

    .cd-timeline__block:first-child {
        margin-top: 0;
    }

    .cd-timeline__block:last-child {
        margin-bottom: 0;
    }

@media only screen and (min-width: 1024px) {
    .cd-timeline__block {
        margin: 3em 0;
    }
}

.cd-timeline__img {
    position: absolute;
    top: 1em;
    left: 0.35em;
    width: 2em;
    height: 2em;
    border-radius: 50%;
    /*-webkit-box-shadow: 0 0 0 1px white, inset 0 1px 0 rgba(0, 0, 0, 0.08), 0 1px 0 4px rgba(0, 0, 0, 0.05);
    box-shadow: 0 0 0 1px white, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 1px 0 1px rgba(0, 0, 0, 0.05);*/
}

    .cd-timeline__img img {
        display: block;
        width: 24px;
        height: 24px;
        position: relative;
        left: 50%;
        top: 50%;
        margin-left: -12px;
        margin-top: -12px;
    }

    .cd-timeline__img.cd-timeline__img--standard { background: #25205d; }

    .cd-timeline__img.cd-timeline__img--priority { background: #f0ca45; }

    .cd-timeline__img.cd-timeline__img--urgent { background: #c03b44; }

@media only screen and (min-width: 1024px) {
    .cd-timeline__img {
        width: 2em;
        height: 2em;
        left: 47%;
        top:0.8em;
        margin-left: 0.6em;
        margin-top: 0;
        /* Force Hardware Acceleration */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

        .cd-timeline__img.cd-timeline__img--bounce-in {
            visibility: visible;
            -webkit-animation: cd-bounce-1 0.6s;
            animation: cd-bounce-1 0.6s;
        }
}

@-webkit-keyframes cd-bounce-1 {
    0% {
        opacity: 0;
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes cd-bounce-1 {
    0% {
        opacity: 0;
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

.cd-timeline__content {
    position: relative;
    margin-left: 60px;
    background: #fff;
    border-radius: 0.5em;
    padding: 1em;
    border: 1px #8f80ac solid;
}

    .cd-timeline__content:after {
        /* clearfix */
        content: "";
        display: table;
        clear: both;
    }

    .cd-timeline__content::before {
        /* triangle next to content block */
        content: '';
        position: absolute;
        top: 19px;
        right: 100%;
        height: 0;
        width: 0;
        border: 7px solid transparent;
        border-right: 7px solid #25205d;
    }

    .cd-timeline__content h2 {
        color: #0a768a;
        margin-bottom: 0.3em;
    }

    .cd-timeline__content p,
    .cd-timeline__read-more,
    .cd-timeline__date {
        font-size: 1.1rem;
    }

    .cd-timeline__content p {
        margin: 1em 0;
        line-height: 1.6;
        color: #0a768a;
    }

.cd-timeline__read-more,
.cd-timeline__date {
    display: inline-block;
}

.cd-timeline__read-more {
    float: right;
    padding: .3em .5em;
    background: #0a768a;
    color: white;
    border-radius: 0.25em;
}

    .cd-timeline__read-more:hover {
        background-color: #acb7c0;
    }

.cd-timeline__date {
    float: left;
    opacity: .7;
    color: #0a768a
}

.cd-timeline__read-more.btn-edit-survey {
    margin-right: .5em;
}

@media only screen and (min-width: 1024px) {
    .cd-timeline__content h2 {
        font-size: 1.2rem;
    }

    .cd-timeline__content p {
        font-size: 1.0rem;
    }

    .cd-timeline__read-more,
    .cd-timeline__date {
        top:0.25em !important;
    }
}

@media only screen and (min-width: 1024px) {
    .cd-timeline__content {
        margin-left: 0;
        width: 42%;
        /* Force Hardware Acceleration */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

        .cd-timeline__content::before {
            top: 17px;
            left: 100%;
            border-color: transparent;
            border-left-color: #25205d;
        }
        
    .cd-timeline__date {
        position: absolute;
        width: 35%;
        left: 108%;
        top: 0.5em;
        font-size: 1.0rem;
        border-bottom: 1px #25205d solid;
        padding-bottom: 0.2em;
        color: #25205d;
    }

  

    .cd-timeline__block:nth-child(even) .cd-timeline__content {
        float: right;
    }

        .cd-timeline__block:nth-child(even) .cd-timeline__content::before {
            top: 17px;
            left: auto;
            right: 100%;
            border-color: transparent;
            border-right-color: #25205d;
        }

    .cd-timeline__block:nth-child(even) .cd-timeline__read-more {
        float: right;
    }

    .cd-timeline__block:nth-child(even) .cd-timeline__date {
        left: auto;
        right: 109%;
        padding-right: 1em;
    }

    .cd-timeline__block:nth-child(odd) .cd-timeline__date {
        padding-left: 1em;
        text-align:right;
    }

    .cd-timeline__content.cd-timeline__content--bounce-in {
        visibility: visible;
        -webkit-animation: cd-bounce-2 0.6s;
        animation: cd-bounce-2 0.6s;
    }
}

@media only screen and (min-width: 1024px) {
    /* inverse bounce effect on even content blocks */
    .cd-timeline__block:nth-child(even) .cd-timeline__content.cd-timeline__content--bounce-in {
        -webkit-animation: cd-bounce-2-inverse 0.6s;
        animation: cd-bounce-2-inverse 0.6s;
    }
}

@-webkit-keyframes cd-bounce-2 {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100px);
        transform: translateX(-100px);
    }

    60% {
        opacity: 1;
        -webkit-transform: translateX(20px);
        transform: translateX(20px);
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes cd-bounce-2 {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100px);
        transform: translateX(-100px);
    }

    60% {
        opacity: 1;
        -webkit-transform: translateX(20px);
        transform: translateX(20px);
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@-webkit-keyframes cd-bounce-2-inverse {
    0% {
        opacity: 0;
        -webkit-transform: translateX(100px);
        transform: translateX(100px);
    }

    60% {
        opacity: 1;
        -webkit-transform: translateX(-20px);
        transform: translateX(-20px);
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes cd-bounce-2-inverse {
    0% {
        opacity: 0;
        -webkit-transform: translateX(100px);
        transform: translateX(100px);
    }

    60% {
        opacity: 1;
        -webkit-transform: translateX(-20px);
        transform: translateX(-20px);
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

/*
    Default portal styling - import this and then apply client specific overrides if necessary
*/
/* Import Client Config */
/**

    Global variable config file.

*/
/**
    Global Mixins
*/
/**
    Flex box mixins for div flows and flexing
*/
/*
    Media Screen sizes
*/
/**
    Primary Icon Family
*/
/*
    Side bar
*/
/*
    Footer
*/
/*
    Nav Menu
*/
/* 
    Action buttons 

    Some of these may be better as mixins
*/
/*
    Heading
*/
.Portal #VerticalPolicy, .portalFooter #VerticalPolicy {
  position: absolute;
  bottom: 0px;
}
.Portal #VerticalPolicy .listSeparator, .portalFooter #VerticalPolicy .listSeparator {
  display: none;
}
.Portal #VerticalPolicy #CopyrightNotice, .portalFooter #VerticalPolicy #CopyrightNotice {
  color: white;
  padding-bottom: 0.5em;
  font-size: smaller !important;
  padding-left: 1em;
  padding-right: 1em;
}
.Portal #VerticalPolicy li, .portalFooter #VerticalPolicy li {
  font-size: smaller !important;
  padding-bottom: 0.5em;
}
.Portal #HorizontalPolicy #CopyrightNotice, .portalFooter #HorizontalPolicy #CopyrightNotice {
  font-size: 1em !important;
}
.Portal #HorizontalPolicy ul li, .portalFooter #HorizontalPolicy ul li {
  display: inline;
  font-size: 1em !important;
}
.Portal #HorizontalPolicy #FollowUsOnFacebookLink, .portalFooter #HorizontalPolicy #FollowUsOnFacebookLink {
  display: block;
}
.Portal #HorizontalPolicy .listSeparator, .portalFooter #HorizontalPolicy .listSeparator {
  color: white;
}
.Portal #HorizontalPolicy ul, .portalFooter #HorizontalPolicy ul {
  padding-left: 0px;
}

@media all and (max-width: 481px) {
  .Portal #VerticalPolicy {
    position: initial;
    bottom: initial;
  }
  .Portal .navMenu .verticalPolicy {
    display: none;
  }
}
.aboutme {

}

.aboutme h1 {
    font-size: 1.5em;
    margin-bottom: 1em;
}

.aboutme h2 {
    font-size: 1.3em;
    font-weight: lighter;
    margin-bottom: 1em;
}

.aboutme p {
    font-size: 1.1em;
}


li.registration {
    background: url("/Desktop/images/portal/icon_registration_60x64.png") no-repeat;
    height: 52px;
    padding-left: 70px !important;
    padding-top: 15px !important;
}

.aboutme .ddlYear {
    width:6em;
    margin-right:5px;
    min-width: 6em;
}

.aboutme .ddlMonth {
    width: 4em;
    margin-right: 5px;
    min-width: 4em;
}

/*Tweaks for the Demo*/
.aboutme .entry input[type="Date"] {
    padding: 0.14em !important;
    width: 11em !important;
}

.aboutme select {
    padding: 0.25em;
}

.aboutme .title {
    margin-bottom: 1em;
}

.aboutme .content .surveySection {
}

    .aboutme .content .surveySection .label { padding: 0.3em; }

    .aboutme .content .surveySection input {
        width: 100%;
        padding: 0.3em;
    }

    .aboutme .surveySection h3 {
        padding-top: 0.5em;
        padding-bottom: 0.5em;
    }

.aboutme .entry {
    padding-top: 0.3em;
    margin: 0 0 0.7em 0;
}

    .aboutme .entry input {
        width: calc(100% - 0.6em); /* .6em is the standard padding on the controls which causes width issues */
    }

    .aboutme .entry select {
        width: 100%;
    }

    .aboutme .saveButton {
        margin-top: 0.5em;
        width: auto !important;
        max-width: 10.7em; /* This may need to increase depening on the languages supported max length - Spanish for the moment fits in with this size*/
    }


.aboutme .label {
    padding-left: 0;
}


#editListContainer ul {
    padding: 0;
    display: block;
}

#editListContainer li {
    list-style: none;
    margin-right: 2em;
}

.aboutme #registrationInformationSection form {
    padding-right: 1.2em; /* Stops the Right side of the control from being cut off */
}


/*
   Upload and Upload Grid
*/
.aboutme #uploadSection p {
    margin-bottom: .8em;
}

.aboutme .upload-options input {
    max-width: 95%;
}

.aboutme .uploadGrid {
    margin-bottom: 1em;
}

    /* Upload name */
    .aboutme .uploadGrid .desktop-table thead tr th:nth-of-type(1) {
        width: 10em;
    }

    /* Status */
    .aboutme .uploadGrid .desktop-table thead tr th:nth-of-type(2) {
        width: 10em;
    }

    /* Status */
    .aboutme .uploadGrid .desktop-table thead tr th:nth-of-type(3) {
        width: 6em;
    }

    /* Action Buttons Column */
    .aboutme .uploadGrid .desktop-table thead tr th:last-child {
        width: 14em;
    }

    .aboutme .uploadGrid .gridActionButton {
        margin: .3em;
        width: auto;
        float: left;
    }

        .aboutme .uploadGrid .gridActionButton .last {
            float: right;
        }

#uploadSection{
    width: auto;
    padding-right:2em;
}

dt {
    font-weight: bold;
}

dd {
    margin: 0.3em 0 1.5em 1em;
}

.aboutme .requiredInfo {
    text-align: inherit;
    margin-bottom: 1em;
}

/* Set the paginator hidden setions to have no hight or margin to remove blank space */
.aboutme .paginatorEntrySection.hidden,
.aboutme .paginatorEntrySection.hidden .paginatorEntry {
    height: 0;
    margin: 0;
    padding: 0;
}

.aboutme .paginatorEntrySection .paginatorEntry {
    margin: 0;
}

/* Portrait */
@media all and (min-width: 481px) {
    .aboutme {
        display: inline-block;
    }

        .aboutme .content {
            display: block;
            flex-direction: column;
        }

            .aboutme .content .surveySection {
                float: left;
                clear: both;
            }

                .aboutme .content .surveySection .label {
                    display: inline-block;
                    min-width: 16em;
                    max-width: 20em;
                    padding-bottom: 0.3em;
                    /*text-align: right;*/
                }

                .aboutme .content .surveySection .entry {
                    display: inline-block;
                    max-width: 26em;
                }
                
        .aboutme .saveButton {
            width: auto !important;
        }

        .aboutme .field-validation-error {
            margin-left: 6em;
        }

    #editListContainer ul {
        margin: 2em 0;
        width:50%;
        float: left;
    }
    #editListContainer li {
        padding: 0.8em 0;
    }

    /*
        Upload and Upload Grid
    */

    .aboutme .upload-options input {
        max-width: inherit;
    }

    .aboutme .paginatorEntrySection {
        display: block;
        max-width: 20em;
        margin-right: 3em;
        float: none !important;
    }
    .aboutme .paginatorEntrySection .field-validation-error {
        margin-left: 0;
    }
}

/* Target Device only and landscape */
@media screen and (min-width: 596px) and (orientation:landscape) {
    .aboutme .content .surveySection .label {
        text-align: right;
    }
}

@media all and (min-width: 700px) {
    .aboutme .content .surveySection .entry {
        max-width: 19em;
    }
}

/* Tablet Upwards */
@media all and (min-width: 768px) {
    .aboutme .content .surveySection .entry {
        max-width: 22em;
    }
}

/* Desktop upwards */
@media all and (min-width: 770px) and (min-height: 412px) {
    .aboutme { min-height: 100%; }

        .aboutme .content {
            overflow-y: auto;
            height: 100%;
        }
            .aboutme .content .surveySection .label { text-align: right; }

            .aboutme .content .surveySection .entry { max-width: 26em; }

        .aboutme .entry select { width: auto; }

        .aboutme .buttonHolder { padding-right: 1em; }
}
.bookingForm .bookingFormPageSection {
    display: none;
}

/* Pagination Navigation */
.bookingForm .paginationProgressBar {
    margin-top: .5em;
    margin-bottom: .3em;
    text-align: center;
}

.bookingForm .paginationProgressMarker {
    display: inline-block;
    margin-right: .5em;
    width: 6em;
    border-bottom: 2px solid #003865;
    height: 0;
}

.bookingForm .paginationProgressMarkerSelected {
    width: 6em;
    border-top: 3px solid #003865;
}

.bookingForm .navButtons {
    display: block;
    margin-top: .3em;
}

    .bookingForm .navButtons div {
        display: inline-flex;
    }

    .bookingForm .navButtons .logonNextButton,
    .bookingForm .navButtons .logonSignupButton {
        float: right;
        margin-right: .3em;
    }

.bookingForm .hidden {
    display: none !important;
}

.paginatorStepHeader {
    background-color: white !important;
    color: #555 !important;
    font-size: 1.5em;
    font-weight: bold;
    padding: .5em 0em !important;
}

.bookingForm {
    max-width: 900px;
}

    .bookingForm .required {
        color: red;
    }

    .bookingForm #bookingFormBookingDate select option:not(:first-child), .bookingForm #bookingFormBookingTime select option:not(:first-child) {
        color: green;
        font-weight: bold;
    }

    .bookingForm select option:disabled {
        color: red !important;
    }

    .bookingForm .CustomErrors {
        margin-bottom: 0.5em;
        color: red;
        font-size: medium;
        width: 100%;
    }

.content h3 {
    margin: 1em 0;
}

.bookingFormPageSection {
    padding: .5em 1.5em !important;
}

.portalClinicianRegistration {
    max-width: 55em;
    padding-bottom: 5em; /* Combats the logon footer so that it does not hide content behind it */
}

.portalClinicianRegistration .pageTitle {
    color: #003865;
}

.portalClinicianRegistration h4 {
    margin: 1em 0;
    color: #003865;
}

.portalClinicianRegistration .headerMessage {
    padding-bottom: 1em;
    color: #003865;
}

    .portalClinicianRegistration .headerMessage a {
        border-bottom: inherit !important;
        text-decoration: underline !important;
    }

.portalClinicianRegistration .registrationPaginator {
    margin-right: 1.5em;
}

.portalClinicianRegistration .paginatorStepHint, .paginatorStepThankyou {
    font-size: 1em;
    padding: .5em 0;
}

.portalClinicianRegistration .paginatorStepThankyou {
    padding-top: 1em;
}

/* Navigation Buttons */
.portalClinicianRegistration .navButtons {
    display: block;
    margin-top: .3em;
}

    .portalClinicianRegistration .navButtons div {
        display: inline-flex;
    }

    .portalClinicianRegistration .navButtons .nextButton,
    .portalClinicianRegistration .navButtons .logonSignupButton {
        float: right;
        margin-right: .3em;
    }

/* Survey list and completion lists */
.portalClinicianRegistration ul { list-style: none; }

.portalClinicianRegistration li {
    display: flex;
    align-items: center;
}

.portalClinicianRegistration .surveyList li {
    height: 1.6em;
}

/* Survey List */
.portalClinicianRegistration .surveyListItems input[type=checkbox] {
    display: none;
}

.portalClinicianRegistration .surveyListItems label {
    display: inline-block;
    cursor: pointer;
    padding-left: 25px;
    position:relative;
}

.portalClinicianRegistration .surveyListItems input[type=checkbox] + label:after {
    font-family: 'Material Icons';
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    position: absolute;
    left: 0;
    border: 2px solid #757575;
    border-radius: 2px;
}

.portalClinicianRegistration .surveyListItems input[type=checkbox]:checked + label:after {
    content: "\E5CA";
    color: #fff;
    font-size: 16px;
    text-align: center;
    line-height: 16px;
    background: #ff5d02;
    border-color: #ff5d02;
}

/* Completion List */
.portalClinicianRegistration .completionList {
    padding: 1em 0;
}

.portalClinicianRegistration .completionListItems li {
    cursor: pointer;
}

.portalClinicianRegistration .completionListItems li:before {
    font-family: "Material Icons";
    font-size: 1.8em;
    content: "\e3a6";
    color: red;
}

.portalClinicianRegistration .completionListItems .completed:before {
    cursor: default;
    content: "\e86c";
    font-size: 1.8em;
    color: green;
}

/* Move the Buttons up slightly due to the footer */
clinicianInput #survey-content .MultiBottom {
    padding-bottom: 3em !important;
}

/* The button for downloading a patient registration form */
.registrationPatientFormButton {
    padding-bottom: .3em;
}

.registrationPatientFormButton .pdfDownload {
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: inline-flex;
    background: url("/Desktop/images/pdf-icon-32.png") no-repeat;
}

.registrationPatientFormButton span {
    vertical-align: super;
}

.portalClinicianRegistration .surveyList, .portalClinicianRegistration .completionList {
    max-height: 450px;
    overflow: auto;
}

/* Top Cancel buttons */
.Questionnaire .clinician-top-cancel {
        display: inline-block;
        width: 100%;
}
        .Questionnaire .clinician-top-cancel .clinician-top-cancel-bnt {
            margin: 0 1em 0.5em 0 !important;
            width: auto;
            float: right;
        }

.conditionDetails .headerImage {
    /*client styles add images here so this is a holder should we with to style the default in some way */
}

.conditionDetails .headlinePage {
    /* client styles override this but at some point we may with to do something in the default style here */
}

.conditionDetails .headlineContainer {
    /* client styles override this but at some point we may with to do something in the default style here */ 
}

.conditionDetails .headlineContainer .headline {
    border: 2px solid #d7e4ed;
    border-radius: 0.3em;
    padding: 1em;
    margin-bottom: 1em;
    margin-left: 1.5em;
    margin-right: 1.5em;
}

    .conditionDetails .headlineContainer .headline .title {
        margin-bottom: 0.5em;
        font-size: x-large;
        font-weight: bold;
        color: #00778b;
        line-height: 1em;
    }

    .conditionDetails .headlineContainer .headline .details {
        overflow: auto;
        text-align: center;
    }

    .conditionDetails .headlineContainer .headline img {
        width: auto;
        height: auto;
        max-width: 150px;
        max-height: 150px;
        margin-bottom: 0.5em;
    }

    .conditionDetails .headlineContainer .headline .details p {
        text-align: left;
        line-height: 1.7em;
    }

/* Portrait and Upwards */
@media all and (min-width: 481px) {
    .conditionDetails .headlineContainer .headline img {
        margin-top: 0;
        margin-left: 1em;
        float: right;
        width: auto;
        height: auto;
        max-width: 250px;
        max-height: 250px;
    }
}
.contactUs h3 {
    margin-top: 3em;
}

.contactUs h4 {
    font-size: 1.4em;
}

.contactUs p {
   margin:1em 0em;
}

.contactUs li{
    padding: 0.2em 0em;
}

.contactUs li.indent {
    padding-left: 1em;
    list-style: none;
}

.dashboard {
    overflow-x: hidden;
    overflow-y:hidden;
}

    .dashboard .headerMessage {
        margin-bottom: 1em;
        line-height: 1.6em;
        max-width: 900px;
        margin-left:1em;
    }

.dashboard .dashboardGrid {
    overflow-y: auto;
    overflow-x: hidden;
}

.dashboard .us-map { position: relative; }
.dashboard .us-map svg { position: absolute !important; }



.dtd-container{
    margin:50px 0px 0px 0px;
    float:left;
    width:100%;
}

.dtd-group {
    float:left;
    width:100%;
}

.dtd-value {
    font-weight: bold;
    font-size: 1.6em;
    height: 60px;
    border-left: 2px dotted #0a768a;
    text-align: center;
    margin-bottom: 30px;
    color: #888888;
}

.dtd-label {
    font-weight: bold;
    font-size: 1.3em;
    text-align: center;
}

.firstChild {
    border-left: none!important;
}

.fullWidth{
    width: 100%;
}

.onlyChild {
    border-left: none !important;
    font-weight: bold;
    font-size: 5em;
    height: 30px;
    text-align: center;
}

/* Table style tiles - Diet */
.portalDashboardTableTile table {
    width: 100% !important;
    border-collapse: collapse;
}

.portalDashboardTableTile table thead {
    display: none;
}

    .portalDashboardTableTile table tbody tr {
        border-bottom: 2px dotted #0a768a;
        line-height: 2.5em;
    }

        .portalDashboardTableTile table tbody tr:last-of-type {
            border-bottom: 0;
        }

.tileSubTitle {
    font-size: 12px;
    margin-left: 15px;
    margin-bottom: 5px;
    margin-top: -5px;
}

.groupedBarKey {
    padding-left: 10px;
    font-size: 12px;
}

.dashboardKeyShevron {
    display: inline-block;
    margin-right: 2px;
    margin-left: 5px;
    width: 10px;
}


/* Portrait and Upwards */
@media all and (min-width: 769px) {
    .dtd-container {
        margin: 50px 0px 0px 0px;
    }

    .dtd-group {
        min-width: 100px;
    }

    .dtd-value {
        font-weight: bold;
        font-size: 2.6em;
        height: 60px;       
        color: #888888;
    }

    .dtd-label {       
        font-size: 1.6em;
    }

    .onlyChild {       
        font-size: 6em;
        height: 60px;
        /*margin-left: 20px;*/
    }
}



.healthcareProviders{
    max-width: 980px;
}

#MyPhysiciansGrid th:nth-child(2),
#MyPhysiciansGrid th:nth-child(3),
#MyPhysiciansGrid th:nth-child(4),
#MyPhysiciansGrid td:nth-child(2),
#MyPhysiciansGrid td:nth-child(3),
#MyPhysiciansGrid td:nth-child(4) {
    display: none;
}

#HealthcareProvidersGrid th:nth-child(3),
#HealthcareProvidersGrid th:nth-child(4),
#HealthcareProvidersGrid th:nth-child(5),
#HealthcareProvidersGrid th:nth-child(6),
#HealthcareProvidersGrid td:nth-child(3),
#HealthcareProvidersGrid td:nth-child(4),
#HealthcareProvidersGrid td:nth-child(5),
#HealthcareProvidersGrid td:nth-child(6) {
    display: none;
}

.healthcareProviders h1 {
    margin-bottom: 20px;
    font-size:1.6em;
}

.healthcareProviders h2 {
    margin-bottom: 20px;
}

#HealthcareProvidersSearchBoxRight {
    margin: 0.7em 2.2em 0 0;
    padding: 2em 1em;
}


#HealthcareProvidersSearchBoxLeft {
    margin: 0.4em 1em 2em 0;
    float: left;
}

.healthcareProviders .actionButton {
    font-size: 1.2em;
    margin-left: 10px;
}

.healthcareProviders #ClinicianSignupSaveButton {
    margin-left: 0px;
}

#ClinicianSignupButtons {
    margin-top:10px;
    clear:both;
}

#ClinicianRegistration {
    display:none;
    margin: 1em 0 0 1em;
}

#ClinicianRegistration input[type=text] {
    width: 300px;
    margin-right:10px;
}

#ClinicianRegistration select {
    width: 312px;
    margin-right: 10px;
}

#ClinicianRegistration .label {
    width: 150px;
    float: left;
}

#ClinicianRegistration .field-validation-error {
    display: block;
}

#ClinicianRegistration .entry {
    margin-bottom: 10px;
    float: left;
}

#ClinicianRegistration .setting {
    display:block;
    clear:left;
}

.healthcareProviders td {
    font-size:14px;
}

.healthcareProviders th {
    font-size: 14px !important;
}

.healthcareProviders table .actionButton {
    font-size: 14px;
}

#MyPhysiciansGrid {
    margin-bottom: 20px;
}

#HealthcareProvidersGrid {
    clear: left;
}

#HealthcareProvidersGrid .actionButton {
    margin-left:0px;
    width:50px;
    display:inline-block;
}

#HealthcareProvidersDetailsDialog th {
    text-align: right;
    vertical-align: top;
    padding: 0.5em 1em;
    color: #003865;
    border-bottom: 0px dotted #e3b822;
}

#HealthcareProvidersDetailsDialog td {
    border-bottom: 1px dotted #e3b822;
}

#CloseHealthcareProvidersPopupButton {
    width:50px;
    margin: 1.5em 0 0 1em;
}


.healthcareProviders h2 {
    background-color: #003865 !important;
    color: #fff;
    margin: 0 1.3em 1em 0;
    border-radius: 5px;
    padding: 0.3em;
    font-size: larger;
    font-weight: lighter;
}

#MyPhysiciansGrid {
    margin: 0 1.6em 2em 0;
}

.healthcareProviders .colour1 th {
    color: #003865 !important;
}

.healthcareProviders .desktop-table {
    width: 100%;
}

    .healthcareProviders .desktop-table thead {
        border-bottom: 2px solid #e3b822;
    }

    .healthcareProviders .desktop-table tbody {
        border-bottom: 1px solid #f5f5f5;
    }

    .healthcareProviders .desktop-table .evenRow {
        background-color: #fcfcfc;
    }
    .healthcareProviders .desktop-table oddRow {
        background-color: #fcfcfc;
    }

.healthcareProviders p.SearchText {
    margin: 0 1em 1.5em 1em;
    margin-bottom:0px;
}

#HealthcareProvidersSearchBoxRight .actionButton {
    padding: 5px 15px;
}

#healthcareProvidersSearch {
    padding: 0.4em;
    margin-bottom: 1em;
}

#HealthcareProvidersGrid{
    margin-right:1.5em;
}

#AddNewProviderButton {
    clear:both;
    float:left;
    margin-bottom:20px;
}
#IdentitySearch {
    max-width: 980px;
}

    #IdentitySearch h1 {
        margin-bottom: 20px;
        font-size: 1.6em;
    }

    #IdentitySearch h2 {
        margin-bottom: 20px;
    }

    #IdentitySearch p {
        margin-bottom: 2em;
    }

    #IdentitySearch .formrow {
        width: 100%;
        margin-bottom: 1em;
    }

#btnConfirmParticipantExists {
    /*width: 4em;*/
    margin-top: 2em;
    font-size: 1.1em;
}


#IdentitySearch label {
    width: 10em;
    float: left;
    line-height:2em;
}

#IdentitySearch input[type=text] {
    width: 15em;
    margin-right: 1em;
}

#IdentitySearchResult {
    width: 100%;
    background-color: #ffde6d;
}

    #IdentitySearchResult p {
        width: 95%;
        padding: 0.6em 0.5em;
        color: #715b0d;
    }

.portalIndex {
    padding-left: 0.5em;
}

.portalIndex h1 {
    padding: 0 2em 0 0;
}

.portalIndex p {
   line-height: 1.4em;
}

.portalIndex h4 {
    margin-bottom:1em;
}

.portalIndex .surveyList ul {
    padding: 0;
    margin:1em;
}

.portalIndex .surveyList li {
    padding: 0.2em 0.5em 0.5em 0;
    list-style: none;
    cursor: pointer;
}

.portalIndex .surveyList span {
    padding-left: 1em;
    font-size: 1.1em;
}

.portalIndex .surveyList li i { color: #008000; vertical-align: bottom !important; }

.surveysOutstanding{
    margin-top:3em;
}

#surveysOutstandingGrid table,
#initialSurveys table {
    /*height: auto !important;*/
    width: 97%;
    margin-left: 0.6em;
}

.complete {
    cursor: default !important;
    color: #e5e5e5;
}

#surveysAlwaysAvaillableGrid table{
    width:100%;
    height: auto;
}

#secondarySurveys p {
    padding: 1em;
    background-color: #d4e6b0;
    color: #0a768a;
}


.portalIndex .headerMessage {
    margin-top: 1em;
}

.portalIndex .headerMessage p {
    margin-bottom: 1em;
}

#initialSurveys h3, #Bookings h3 {
    margin: 1em 0;
}

#Bookings #bookingsTable {
    width: 97%;
    margin-left: 0.6em;
}

    #Bookings #bookingsTable td.col1 {
        padding-left: 0.5em;
        width: 75%;
    }

    #Bookings #bookingsTable td.action .actionButton {
        float: right;
    }

#initialSurveys {
    margin-top: 1em;
}

#initialSurveys table .col1{
    width:50%;
    padding-left:0.5em;
}

#initialSurveys table .colAction {
    width: 100px;
}

#initialSurveys table .oddRow {
    height:2.5em;
}
    #initialSurveys table .actionButtonGrid {
        min-width: 6em;
        max-width: 10em;
        float: right;
        clear: both;
    }

.welcomeMessage, .headerMessage, .headerCustomCompletionMessage, #initialSurveys, .surveysOutstanding {
    margin-right: 1em;
}

#IndexInfoPopupTitle {
    font-weight: bold;
}

.infoImage {
    cursor:pointer;
}

/* Modal pagination on mobile settings due to navigation showing off the page */
#QuestionnaireWelcomeText_paginationMain,
#QuestionnaireWelcomeText_paginationPages {
    height: 90% !important;
    margin-bottom: 3em;
}


/* Surveys completed grid */
#completedSurveys {
    margin-top: 1em;
}

#completedSurveys .gridContainer {
    margin: 0em 2.5em 1em 1em;
}

#completedSurveysGrid td {
    font-size: 1em;
    padding: 0.4em 0;
}

#completedSurveysGrid thead tr {
    border-bottom: 1px solid #e3b822 !important;
    border-collapse: unset;
}

#completedSurveysGrid th {
    font-size: 0.925em !important;
    padding: 0.6em 0;
}

#completedSurveysGrid {
    clear: left;
    border-collapse: collapse;
}

#completedSurveysGrid.actionButton {
    margin-left: 0px;
    width: 50px;
    display: inline-block;
}

#completedSurveysGrid.desktop-table {
    width: 100%;
}

#completedSurveysGrid.desktop-table .evenRow {
   
}

.headerCustomCompletionMessage {
    margin-top: 2em;
    font-size: 1.1em;
    font-weight: bold;
}

.headerCustomCompletionMessage img {
    margin-top:1em;
}

#accessibilityOption {
    width: 20px;
    height: 20px;
    margin-left: 20px;
}
.MyBookings {
    max-width: 900px;
}

.desktop-table {
    width: 100%;
}

.MyBookingsIntroTextNoData {
    display: none;
}

.CreateBookingBtn {
    float: right;
    margin: 10px;
}

    .MyVisitDates {
        width:900px;
    }

    .MyVisitDates h1 {
        font-size: 1.4em;
        margin-bottom: 0.5em;
    }

    .MyVisitDates .actionButton {
        width: 100px;
    }

    .MyVisitDates .row {
        margin: 1em;
    }

    .MyVisitDates .label {
        min-width: 14em;
        text-align: right;
    }

    .MyVisitDates .label, .MyVisitDates .entry {
        display: inline-block;
    }
#ExtendedStudyDetails h4 {
    display: inline-block;padding:5px;
}

#ExtendedStudyDetails .SurveyInStudy {
    padding-left: 15px;
}

#ExtendedOptOutReasons .OptOutReasons {
    padding:5px;
}

.OptOutButtonContainer {
    float: left;
}

.OptOutBackButton {
    float: left;
    margin-left: 100px;
}
#PatientReferralForm .field-validation-error {
    display: unset;
}

.patientReferral .row {
    margin-top:20px;
}
#PatientReferralForm label {
    display:block;
    margin-bottom:5px;
}

#PatientReferralButton {
    margin-top: 20px;
}
.settings h1 {
    margin-bottom: 1em;
}

.settings .settingsSection {
    margin-bottom: 0em;
    margin-right: 0.5em;
}

.settings .settingsSection h2 {
    margin-bottom: 0em;
}

    .settings .settingsSection h3 {
        margin-top: 3em;
    }


.settings form {
    margin-top: 2em;
    margin-bottom: 1em;
}

.settings .label {
    padding: 0.3em;
}

.settings .entry label {
    margin-top: 0.5em;
}

.settings .entry input {
    width: calc(100% - 0.6em); /* .6em is the standard padding on the controls which causes width issues */
    margin-bottom: 0.5em;
}

.settings .viewPDFButton {
    margin-top: 0.5em;
}

.settings #ChangeLanguage  h2{
    margin-bottom:10px;
}

/*.settings .saveButton {
    width: 100%;
}*/
.settings .saveButton input {
    width: 100%;
}

.settings .consentSignupHeader {
    display: none;
}

.settings #consentOne{
    margin:0 2em;
}

.consentBody h1 {
    margin-top:1em;
}

.settingsSection h3 {
    margin-bottom: 1em;
}

#changePassword .saveButton {
    max-width: none;
}

/* Portrait */
@media all and (min-width: 481px) {
    .settings .label {
        display: inline-block;
        min-width: 14em;
        text-align: right;
        max-width: 14em;
    }
    .settings .entry {
        display: inline-block;
    }
}

/* Desktop upwards */

@media all and (min-width: 770px) and (min-height: 412px) {
    .settings .actionButton {
        margin-top: 0.3em;
    }

    .settings .field-validation-error {
        float: left;
        max-width: 12em; /* Just slightly less than the input */
    }

    .settings .entry input {
        max-width: 13em;
    }
}

/* Only show consent when the page is printed */
@media print {

    #changePassword, .navMenu, #withdrawConsent {
        display: none;
    }

    #changeConsent h3 {
        margin-top:0px;
        padding-left:0px;
    }
}

.surveysCompleted { }


    .surveysCompleted .title {
        font-size: large;
        margin-bottom: 1em;
    }

    .surveysCompleted .title p {
        font-size: 0.8em;
    }

    .surveysCompleted h1 {
        font-size: 1.2em;
        margin-bottom: 0.5em;
    }

    .surveysCompleted h2 {
        margin-bottom: 0.5em;
    }
    
    .surveysCompleted .cd-nugget-info {
        text-align: center;
        position: absolute;
        width: 100%;
        height: 50px;
        line-height: 50px;
        top: 0;
        left: 0;
    }
    .surveysCompleted .cd-nugget-info a {
        position: relative;
        font-size: 14px;
        color: #718ca1;
        -webkit-transition: all 0.2s;
        -moz-transition: all 0.2s;
        transition: all 0.2s;
    }
    .surveysCompleted .cd-nugget-info a:hover { opacity: .8; }

    .surveysCompleted .cd-nugget-info span {
        vertical-align: middle;
        display: inline-block;
    }
        .surveysCompleted .cd-nugget-info span svg { display: block; }

    .surveysCompleted .cd-nugget-info .cd-nugget-info-arrow { fill: #718ca1; }

/* Style the progress bar */

    .surveysCompleted .surveysCompletedProgressBar {
        margin-top: 1em;
        margin-right: 1.5em;
        max-width: 900px;
    }

    .surveysCompleted .surveysCompletedProgressBar .completedBlock { background-color: #acb7c0 !important; }

        .surveysCompleted .surveysCompletedProgressBar .availableBlock { background-color: #718ca1 !important; }

        .surveysCompleted .surveysCompletedProgressBar .horizontalBlockBarChartBlockLabel { color: #ffffff; }

        .surveysCompleted .surveysCompletedProgressBar .horizontalBlockBarChartBlockLabel, .minMaxRow {
            font-size: inherit;
        }

    .surveysCompleted .surveysCompletedProgressBar .horizontalBlockBarChartBlock:first-of-type {
        border-top-left-radius: .5em;
        border-bottom-left-radius: .5em;
    }

    .surveysCompleted .surveysCompletedProgressBar .horizontalBlockBarChartBlock:last-of-type, .fullyComplete {
        border-top-right-radius: .5em;
        border-bottom-right-radius: .5em;
    }

        .surveysCompleted .surveysCompletedProgressBar .horizontalBlockBarChartBlock.zeroProgress {
            border-top-left-radius: .5em;
            border-bottom-left-radius: .5em;
        }

        .surveysCompleted .surveysCompletedProgressBar .horizontalBlockBarChart .horizontalBlockBarChartBlock .horizontalBlockBarChartBlockLabel {
            overflow: visible;
            width: 100%;
            text-align: center;
            display: inline-block;
            text-overflow: inherit;
            position: relative;
        }

/* Modal Content/Box */
/*start modal*/
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* was 1 */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    z-index: 99999;
}

.modal-content {
    background-color: #fefefe;
    margin: 5% auto;
    padding: 20px;
    border: 2px solid #A5AEAE;
    border-radius: 10px;
    width: 80%;
}

.modalSubmit{
    width:100%;
    float:left;
    margin-top:10px;
}

.modalPreference-content {
    position: relative;
    background-color: #fefefe;
    margin: 5% auto;
    padding: 20px;
    border: 2px solid #A5AEAE;
    border-radius: 10px;
    width: 60%;
    min-width:900px;
    min-height: 550px;
    height: 75%; /* to do*/
}


.officeExport {
    min-height: 400px;
    height: 400px;
}

#ExportLink {
   float:left;
   margin-left:10px;
   width: 250px;
   text-decoration:none;
}
#ExportLinkLoading{
    height:56px;
    width:56px;
    float:left;
    margin-right:50px;
    margin-bottom:10px;
}
#ExportTitle {
   margin-top:10px;width:555px;height:33px;
}

.modal-title {
    font-size: 25px;
    line-height: 40px;
    display: flex;
}

.modal-intro {
    margin-top:20px;
    margin-bottom:20px;
}

.modal-close {
    float: right;
    font-size: 20px;
    line-height: 40px;
    color: #86BFBF;
    font-weight: bold;
    cursor: pointer;
    width:19px;
    height:19px;
    background-image:url('/Desktop/images/close.png')
}

.modal-button-confirm {
    margin-top:10px;
    font-size: 20px;
    width: 80px;
}

.modal-scroll {
    min-height: 400px;
    height: 400px;
    width: 60%;
    border: 1px solid #A5AEAE;
    overflow-y: scroll;
    margin-top: 10px;
    padding: 10px;
}

.modalPreference-scroll {
    min-height: 380px;
    height: 380px;
    width: 65%;
    border: 1px solid #A5AEAE;
    overflow-y: scroll;
    margin-top: 10px;
    padding: 10px;
    float: left;
}
.modalPreference-scroll-small {
    /*min-height: 70px;*/
    height:100%;
    width: 65%;
    border: 1px solid #A5AEAE;
    overflow-y: scroll;
    margin-top: 10px;
    padding: 10px;
    float:left;
}
.modalsmall {
    height: 80% !important;
    overflow-y:auto;
}
.modallarge {
    width: 95% !important;
}

.modalPreference-info {
    min-height: 400px;
    height: 400px;
    padding-left:5px;
    padding-right:5px;
    float:left;
    color:#86BFBF;
}

.modalPreference-loading {
    position: relative;
    background-color: transparent;
    margin: 5% auto;
    padding: 20px;
    width: 150px;
    height: 150px;
}
.modal-additionalinfo {
    width: 25%;
    float: right;
    height: 100%;
}

.modal-additionalinfo.search {
    height :90px;
    margin-top: 10px;
}
.modal-additionalinfo.errorMessage{
   font-size: 32px;
}

.modal-scroll a {
    text-decoration: none;
}

.modal-button-select-all-questions {
    margin-top:10px;
    font-size: 20px;
    width: 220px;
}

.modal-PDF-Production {
    font-size: 12px;
    font-weight: bold;
    background: #f1d772;
    float: left;
    display: block;
    padding: 5px;
    border: 1px solid lightgrey;
}

@media screen and (max-width: 768px) /* smaller than an ipad portrait*/ {
    .modalPreference-content {
        min-width: unset;
        width: 90%;
    }
    .modal-additionalinfo {
        display: none;
    }
    .modalPreference-scroll-small {
        width: 90%;
    }
}


/*end modal*/



/*teach search modal popup*/
.textSearch {
    height: 250px;
    width: 200px;
    overflow: auto;
    border: 1px solid #000;
    position: absolute;
    background: #fff;
    display: none;
}
.focusMySearchTextbox{
    width:100%;
    height: 30px;
}
#teamSearchModal {
    height:500px;
}

#teamPredictiveSearch {
    width:67%; 
    float:left;
}

.modalPreference-PDF {
    min-height: 100px;
    height: 325px;
    width: 65%;
    border: 1px solid #A5AEAE;
    margin-top: 10px;
    padding: 10px;
    float:left;
    padding:10px;
}

#PDFModalIcon {
    float:left;
}

.PDFSelects {
    width:100px;
}

#PDFTitle {
    width:525px;height:33px;
}

#PDFSubTitle {
    width: 525px;
    height: 33px;
}

#PDFFileName {
    width:525px;height:33px;
}

.PDFTextSpace {
    float:left;width:200px;padding-top:5px;font-weight:bold;
}

#PDFModalSubmit{
    float:left;width:150px;

}

#PDFLink {
   text-decoration:none;
   float:left;
   margin-left:10px;
   width: 250px;
  }
#PDFLinkLoading{
    height:56px;
    width:56px;
    float:left;
    margin-right:50px;
    margin-bottom:10px;
}
.PDFInfo {
   display:none;padding-top:2px;
   text-decoration:none;
}

.PDFSelectedFilterHelpText {
    font-size: 12px;
    font-style: italic;
}

/* Export Modal Popup CSS - NOTE: These could be merged in with the PDF once all export details are known */
.modalPreference-Export {
    min-height: 100px;
    height: 270px;
    width: 65%;
    border: 1px solid #A5AEAE;
    margin-top: 10px;
    padding: 10px;
    float: left;
    padding: 10px;
}

.ExportTextSpace {
    float:left;width:200px;padding-top:5px;
}

#ExportModalSubmit {
    float:left;width:150px;
}

.error-sidebar {
    float:left;
    width: 210px;
    background-color: #2E3044; /* actual colour of logo background is #323644 ??? but when sampled from browser, this is the value it says it is ??? */ 
    height: 100%;
    text-align: center;
    border-right: 1px solid #D5DEE5;
}

.errorMessagePadding {
    margin-left: 230px;
}

#errorModalAppName {
    color:white;
}

#errorInfo{
    font-weight:bold;
}

.errorMessagePadding h1 {
    color: red;
}

.errorMessageTryAgain{
    font-size:14px;
    width:75%;
    height:550px;
    overflow:auto;
}

#PDFModalContent {
    height: 515px;
    min-height: 515px;
}

.PDFFooter {
    padding-top:5px;display:none;
}

#ModalButtons {
    float: left;
    width: 100%;
    margin-top: -15px;
}

#ModalButtons2 {
    float:left;width:100%;margin-top:-110px;
}

.linkText {
   padding-top:3px;
}

#AdditionalAreaContainer{
    display:none;
}

.AdditionalAreaTextSpace {
    width:400px;padding-top:5px;font-weight:bold;
}

#AdditionalContent {
    width: 95%;
    border: 1px solid #A5AEAE;
    padding: 10px;
}


@media screen and (max-width: 1023px) /* smaller than an ipad landscape*/ {

    .errorMessagePadding {
        margin-left: 0;

    }
    .error-sidebar {
        display: none;
    }
}
/* All CSS is prefixed with sv to stop it impacting other styles on a page it may be loaded into */

/* WARNING: 
    
    Some of the padding, and cell width values are used in the calculation to adjust the number of rows in the returned survey data.
    Because of this any changes here will have an impact on that so please check the view and adjust the code in Index.vbhtml as required.

*/

.viewSurvey {
    padding-top: 0.3em;
    max-width: 1080px;
}

.svBody {
    padding-left: 0 !important;
    font-family: Arial !important;
    color: #727373 !important;
    height: 100% !important;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
}

.svHeaderFilter {
    overflow: scroll;
    position: relative;
    padding-bottom: 1em;
    border: 2px solid #00778b;
    border-radius: 0.3em;
    margin-left: 0.3em;
    margin-right: 0.3em;
}

.svScrollingData {
    width: 100%;
    overflow-y: auto;
}

.svCommentBoxColor {
    background: #ebf1ee;
    font-size: medium;
    border: 2px solid #00778b;
    padding: 0.3em;
}

.svValidatedResponse {
    display: inline-block;
    padding: 5px;
    min-width: 50px;
    height: 20px;
}

/* Table Level CSS */

.svTblGenInfo {
    border-width: 6px;
    border-style: solid;
    border-collapse: collapse;
    border-color: #fff;
    width: 100%;
    color: #727373 !important;
}

/*.svTblSection {
    width: 100%;
}*/

.svQuestionSection {
    max-width: 100%;
    border: 2px solid #00778b;
    border-radius: 0.3em;
    padding: 0.3em;
    margin: 0.3em;
}

.svTblSection .svHeadingBlockNoPNG {
    background-color: #00778b !important;
    max-width: 100%;
    border-radius: 0.3em;
    padding: 0.3em;
    margin: 0.3em;
}

.svTblComment {
    border: 2px solid#86BFBF;
    border-collapse: collapse;
    position: absolute;
    z-index: -1000;
}

    .svTblComment .svHeadingBlockNoPNG {
        background-color: #86BFBF;
        float: left;
    }

.svHeadingBlockNoPNG {
    color: #fff;
    padding: 10px !important;
    font-size: medium;
}

.svHeadingBlockNoPNG * {
    color: #fff;
}

.svHeaderLeft {
    min-width: 100%;
    float: left;
}

.svHeaderRight {
    min-width: 100%;
    float: left;
}

/* Cell Level CSS */
.svHeaderRowTitle {
    min-width: 50%;
    float: left;
    text-align: left;
    font-weight: bold;
    padding: 10px 10px 0 0;
    color: #727373 !important;
    border-collapse: collapse !important;
    font-size: 14px;
}

.svHeaderRowData {
    min-width: 50%;
    float: left;
    text-align: left;
    padding: 10px 10px 0 0;
    color: #727373 !important;
    font-size: 14px;
}

.svTableFrame {
    border: none;
}

    .svTableFrame td {
        padding: 0 0 10px 0;
    }

.svQnumCell {
    font-size: xx-large;
    font-weight: bold;
}

.svQnumLabel {
    /*background-color: #00778b;*/
    display: table-cell;
    color: #00778b !important;
    padding: 0.1em;
    padding-top: 0;
}

.svQtextCell {
    width: 100%;
    vertical-align: top;
    padding: 0.6em 0 1.4em 0.3em !important;
    text-align: left;
    display: table-cell;
}

.svQresponseCell {
    border-bottom: 1px solid #c5c5c5;
    padding: 10px 0 10px 30px !important;
    vertical-align: top;
    display: inline-block;
}

.svTblResponses {
    font-size: medium;
    font-weight:bold;
}

/* The response header text */
.svResponseHeader {
    min-width: 100px;
    padding: 5px !important;
    display: table-cell;
    text-align: center;
}

.svColour1 {
    background-color: #00778b;
    border: 1px solid #fff;
    color: white;
}

.svResponsecell {
    min-width: 100px;
    border-right: 1px solid #fff;
    display: table-cell;
    padding: 0.3em;
    background-color: #f2f8f8;
}

.svUnselectedStdResponse {
    color: #00778b;
}

.svSelectedStdResponse {
    color: #00778b;
}

/* Control Level CSS */

.svPDFButtonCell {
    text-align: right;
}

.svPDFButton {
    cursor: pointer;
    width: 32px;
}

.svFullScreenLink {
    display:inline-block;
    cursor:pointer;
}

.svQuestionResponseSection {
    display: inline-flex;
}

.questionTextContainer {
    font-size: inherit;
}

.questionResponseContainer {
    clear: both;
    margin-top: 10px;
    overflow: auto;
}

/* Show only the selected response*/
.responseOnlyView .selectedResponseHeader {
    color: black;
    background-color:white;
    font-size:18px;
    font-weight:bold;
}

.responseOnlyView .svQuestionResponseSection {
    display: inline-block;
    float: none;
    margin-left: 0;
}

.responseOnlyView .questionResponseContainer {
    float:none;
}

.responseOnlyView .svResponseHeader {
    padding-left: 0px !important;
    text-align: left;
}

.responseOnlyView .svQtextCell {
    padding-bottom:0px !important;
}

.responseOnlyView .svTableFrame {
    height:25px;
}

.PDFButtonPanel {
    float: right;
    width: 32px;
    height: 32px;
    text-align: right;
    background: url(../../images/pdf-icon-32.png) no-repeat;
    cursor: pointer;
}



/* Show only the selected response */
/* Portrait */
@media all and (min-width: 481px) {
    .svHeaderLeft {
        min-width: 50%;
    }

    .svHeaderRight {
        min-width: 50%;
    }

    /*.svTblResponses {
        width: 100%;
    }*/

    .questionTextContainer {
        padding-right: 0.3em;
        padding-bottom: 1em;
    }

    .questionResponseContainer {
        clear: inherit;
        margin-top: inherit;
        float: right;
        max-width: 100%;
        overflow: auto;
    }
}
.viewSurveyFooter {
    text-align: justify;
}
/* Desktop upwards */

@media screen and (min-width: 769px) {
    .svHeaderFilter {
        overflow: hidden;
    }

    .svHeaderLeft {
        min-width: 30%;
    }

    .svHeaderRight {
        min-width: 30%;
    }
}


#StepsChart {
    float:left;
    margin-right:20px;
}

#stepAverages {
    float: left;
}

.stepCountTileStat {
    margin-bottom:15px;
}

.stepCountTileStatSection {
    margin-top:10px;
}
.stepCountValue {
    font-size: large;
}


.portalTileChart .legendContainer, .portalQuestionChart .legendContainer {
    float: right;
    display: inline-block;
    width: 35%;
    margin-top: 10px;
    height: 225px;
    overflow-y: auto;
    margin-bottom: 10px;
}

.surveyComparison {
    position:relative;
    margin-top:40px;
    width:100%;
    text-align:center;
    height:70px;
}

.scoreLabel {
    width:10%;
    display:inline-block;
    font-size:12px;
    font-weight:bold;
    height:40px;
    float:left;
    line-height:40px;
    
}

.scoreLabelInner {
    position: absolute;
    margin-top: 10px;
}

.worstLabel {
    text-align: right;
}

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

#SurveyComparisonWorstScoreValue {
    padding-right:5px;
}

#SurveyComparisonBestScoreValue {
    padding-left: 5px;
}


.surveyComparisonChart {
    display: inline-block;
    width: 80%;
    float: left;
}

.surveyComparisonTitle {
    margin-top:10px;
    padding-left:3px;
}

.surveyComparison .comparisonChart {
    height: 40px;
    vertical-align: middle;
}

.surveyComparisonBar {
    height:40px;
    display: inline-block;
}

.surveyComparison .equalToOthers {
    background-color: #2E3044;
    width: 100%;
}


.surveyComparison .betterThanOthers {
    background-color: #99dbc5;
    width: 100%;
}

.surveyComparison .worseThanOthers {
    background-color: #f39d93;
    width: 100%;
}

.surveyComparison .axis {
    border: 1px solid black;
    height: 1px;
    margin-top: 2px;
    margin-bottom: 2px;
}

.surveyComparison .tip {
    
    position:absolute;
   
    padding: 5px;
    background-color:darkgray;
    font-size:12px;
    color:black;
    border-radius:5px;
   
}

    .surveyComparison .tipMe {
        margin-top: -30px;
       /*width: 62px;*/
    }

.surveyComparison .tipOthers {
    margin-top: 3px;
    /*width:80px;*/
}

.surveyComparison .tipMe:after {
    border:solid;
    border-color:darkgrey transparent;
    border-width:6px 6px 0 6px;
    content: "";
    display:block;
    position:absolute;
    left:21px;
    top:100%;
}

.surveyComparison .tipOthers:before {
    border: solid;
    border-color: darkgray transparent;
    border-width: 0 6px 6px 6px;
    content: "";
    display: block;
    position: absolute;
    left: 30px;
    top: -6px;
}

.bestWorrstArrowContainer {
    width:100%;
    text-align:center;
}

.bestWorrstArrowInnerContainer {
    width: 80%;
    display: inline-block;
}

.bestWorstArrowWorstLabel {
    float:left;
}

.bestWorstArrowBestLabel {
    float: right;
}

.bestWorstArrowStem {
    border: 1px solid black;
    float: left;
    margin-top: 8px;
}

.bestWorstArrowHead {
    float: left;
    float: left;
    margin-top: -2px;
    margin-left: -8px;
}

.surveyComparisonLegend .benchmarkTR {
    padding:2px;
    text-align:left;
}

.surveyComparisonLegend .benchmarkColor {
    width: 16px;
    display: inline-block;
}

.surveyComparisonLegend .benchmarkValue {
    padding-left:5px;
}

.surveyComparisonQuestionText {
    margin-top:10px;
}

.surveyComparisionByQuestion .navigationButtons {
    user-select: none;
}

.surveyComparisionByQuestion .material-icons {
    user-select: none;
}
.surveyComparisionByQuestion {
}

.navigationSliderContainer {
    text-align: center;
    bottom: 0;
    height: 30px;
    position:absolute;
    width:100%;
}

.surveyComparisionByQuestion .navigationSlider {
   
}

.navigationSliderDot {
    background-color: #fff;
    border: 1px solid black;
    height: 15px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    width: 15px;
    display:inline-block;
    margin-bottom:4px;
    margin-left:5px;
}

.navigationSliderDotSelected {
   background-color:black;
}
/*
    This may need to become client specific 
*/

.consentBody {
    padding: 0 1em 0em 0;
    line-height: 1.7em;
}
.consentBody h3.first{
    margin-top:1em;
}
.consentBody h4 {
    margin: 1em 0;
}
.consentBody p {
    margin: 1em 0;
}

.consentBody .underlined {
    text-decoration: underline;
}

.consentBody .italic {
    font-style: italic;
}

.consentBody .consentChecks .consentCheckInline {
    padding-right: 2.5em;
    margin-bottom: 1em;
}

.consentBody .consentChecks .input {
    float: left;
    padding-top: .1em;
}
.consentBody .consentChecks .input input {
    width: auto;
}

.consentBody .consentChecks .label {
    display: block;
    margin-left: 1.5em;
    padding: 0;
    text-align: left;
}

.consentHeader h4 {
    margin: 1em 0 0.5em 0;
    padding: .5em 0;
    font-size: xx-large;
    font-weight: bolder;
}

.consentPDF {
    margin-bottom:20px;
}

.consentPDF img {
    vertical-align:middle;
    margin-left:5px;
}

.consentPDF a {
    border:none !important;
    border-bottom:none !important;
    color:none !important;
    
}


/* Desktop upwards */

@media all and (min-width: 770px) and (min-height: 412px) {
    
    .consentBody .consentDetails {
        max-height: 15em;
        overflow-x: auto;
        border: 2px solid lightgrey;
        border-radius: 0.3em;
        margin: 1em 0;
        padding: 0.5em;
    }
}

.tooltipHover {
    z-index: 998;
    background: #EDEFEF;
    padding: 10px;
    display: none;
    max-width: 500px;
}

    .tooltipHover .toolTipDefaultRow {
        margin-bottom: 5px;
        margin-top:5px;
    }

.chartToolTipLine {
    display: table-row;
    margin: 0 auto;
    width: 100%;
}

.chartToolTipLineItemLeft {
    display: table-cell;
    width: 50%;
    vertical-align: top;
    padding-bottom: 5px;
}

.chartToolTipLineItemRight {
    display: table-cell;
    text-align: left;
    width: 50%;
    vertical-align: top;
    padding-bottom: 5px;
}

.chartData {
}

.chartContainer {
    display: flex;
}
.chartLegend {
    font-size: 11px;
}


.chartLegend {
    font-size: small;
    line-height: 25px
}

    .chartLegend span {
        float: none !important;
    }

    .chartLegend .toolTipShevron {
        width: 25px;
        height: 25px;
        margin-bottom: 5px;
        border: 1px solid black;
    }

    .chartLegend .toolTipShevronDashed {
        width: 25px;
        height: 25px;
        margin-bottom: 5px;
    }

.EmptyChart {
    font-size: 20px;
    font-style: italic;
    padding-top: 20px;
}

.ChartFilterRadioSet {

}
.chartRadioOptions {
    width:290px;
}
.radioOption{
    display:flex;
}

.XAxisLabel{
    display:table-cell;
    vertical-align:bottom;
}

.selectedMonth, .selectedMonth a {
    font-weight: bold;
    text-decoration: underline;
    color: #666 !important;
    border-bottom: 2px solid #666;
}

@media screen and (max-width: 650px) /* Mobile */ {
    .ChartFilterRadioSet {
          display: flex;
    }
   
}    

.axisText{
    font-size:10px;
    color:#000;
}

/*resolution above standard to use the screen width better 1024px*/
@media screen and (max-width: 1024px) {
    .chartLegend {
        font-size: 11px;width:175px;
    }
}




/****************************Add new css for popup window and pai chart*******************************/

#SurveyTableSplitView {
    z-index: 9997;
}

.SplitGrid {
    width: 70%;
    float: left;
}

#surveyPopupHeaderFilter {
    width: 100%;
}

.ScoreCharts {
    float: right;
    height: 100%;
    width: 30%;
}


.splitViewChart {
    height: 34%;
    float: right;
}

.splitViewPieLabel {
    float: right;
    font-size: 22px;
    vertical-align: middle;
    max-width: 150px;
}

.pie {
    float: right;
    padding: 10px;
}

.tableSplit {
    margin-top: 5px;
    overflow-y: auto;
}

/* icon used to offer the maximize option in the split view*/
.svFullScreenLink {
    background-image: url('/Desktop/Images/popup.png');
    height: 35px;
    width: 35px;
    background-size: 35px 35px;
    background-repeat: no-repeat;
}

/*@media screen and (max-width: 414px) {
    .SplitGrid {
        display: none;
    }

    .SplitGrid {
        width: 99%;
    }
}

*/

/*

    Default Portal Completion Style

*/
/* Import Portal Global Config */
/**

    Global variable config file.

*/
/**
    Global Mixins
*/
/**
    Flex box mixins for div flows and flexing
*/
/*
    Media Screen sizes
*/
/**
    Primary Icon Family
*/
/*
    Side bar
*/
/*
    Footer
*/
/*
    Nav Menu
*/
/* 
    Action buttons 

    Some of these may be better as mixins
*/
/*
    Heading
*/
.Portal #partCompleteLoadContainer .partCompleteLoaderContent {
  height: auto;
}
.Portal .survey-container .loader {
  top: 5em;
  padding-left: 25%;
}
.Portal .survey-container .TopOfQuestionnaire .TopQuestionnaireText {
  height: auto;
  line-height: 1.5em;
}
.Portal .survey-container .BodyOfQuestionnaire {
  padding-top: 10px;
  /* Remove the browser default focus outline */
}
.Portal .survey-container .BodyOfQuestionnaire select.validateddateddl {
  width: auto;
}
.Portal .survey-container .BodyOfQuestionnaire div.Vertical:focus, .Portal .survey-container .BodyOfQuestionnaire div.Horizontal:focus {
  outline: none !important;
}
.Portal .survey-container .BodyOfQuestionnaire .Question .responses_container .responses_wrap .Vertical {
  width: 100%;
}
.Portal .survey-container .MultiBottom {
  border-color: #25205d;
  /* Desktop or large screens upwards */
}
@media all and (min-width: 1024px) {
  .Portal .survey-container .MultiBottom {
    min-width: 54em;
  }
}
.Portal .survey-container .MultiBottom .QPPProgress {
  color: #25205d;
  width: 100%;
  /* Desktop or large screens upwards */
  /* Default to not show the bar - this will show via media queries below for screen sizes as they increase  */
}
@media all and (min-width: 1024px) {
  .Portal .survey-container .MultiBottom .QPPProgress {
    width: 30em;
  }
}
.Portal .survey-container .MultiBottom .QPPProgress .QPPProgressIndicator {
  display: none;
  height: 3.4em;
  border-color: #25205d;
  /* Desktop or large screens upwards */
}
@media all and (min-width: 1024px) {
  .Portal .survey-container .MultiBottom .QPPProgress .QPPProgressIndicator {
    display: block;
    width: 65%;
    margin-right: 2em;
    margin-left: 1.5em;
  }
}
.Portal .survey-container .MultiBottom .QPPProgress .QPPProgressIndicator .QPPProgressIndicatorInner {
  background-color: #25205d;
  height: 2.3em;
  /* Desktop or large screens upwards */
}
@media all and (min-width: 1024px) {
  .Portal .survey-container .MultiBottom .QPPProgress .QPPProgressIndicator .QPPProgressIndicatorInner {
    max-width: 93%;
  }
}
.Portal .survey-container .MultiBottom .QPPProgress .QPPProgressIndicatorValue {
  color: #25205d;
  width: 100% !important;
  font-size: 1.4em;
  line-height: 3em !important;
  text-align: center;
}
.Portal #completionContainer .BottomOfQuestionnaireIntro {
  /* Stops the message floating over the questions */
  width: 100% !important;
  position: inherit;
  display: inline-block;
}
.Portal #completionContainer .BottomOfQuestionnaire {
  /* Ensure the footer appears */
  clear: both;
}

.messi {
  position: fixed !important;
}