/*----------------------------------------------------------
The base color for this template is #5c87b2. If you'd like
to use a different color start by replacing all instances of
#5c87b2 with your new color.
----------------------------------------------------------*/
body {
    background-color: #C2E3EA;
    color: #696969;
    font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
    font-size: .85em;
    margin: 0;
    padding: 0;
}

a:link {
    color: #034af3;
    text-decoration: underline;
}

a:visited {
    color: #505abc;
}

a:hover {
    color: #1d60ff;
    text-decoration: none;
}

a:active {
    color: #12eb87;
}

p, ul {
    line-height: 1.6em;
    margin-bottom: 20px;
}

header,
footer,
nav,
section {
    display: block;
}

/* HEADINGS
----------------------------------------------------------*/

h1, h2, h3, h4, h5, h6 {
    color: #0188C7;
    cursor: default;
}

h1 {
    font-size: 1.4em;
    margin-bottom: 0;
    padding-bottom: 0;
}

h2 {
    font-size: 1.3em;
    padding: 0 0 10px 0;
}

h3 {
    font-size: 1.25em;
}

h4 {
    font-size: 1.1em;
}

h5, h6 {
    font-size: 1em;
}

.qms_headingDark {
    color: #423535;
    cursor: default;
}

.qms_heading {
    color: #0188C7;
    cursor: default;
}

.qms_subHeading {
    color: #26AAC1;
    cursor: default;
}

/* STANDARD STYLES
----------------------------------------------------------*/

.floatL {
    float: left;
}

.floatR {
    float: right;
}

.centre {
    text-align: center;
}

/* PRIMARY LAYOUT ELEMENTS
----------------------------------------------------------*/

/* you can specify a greater or lesser percentage for the
page width. Or, you can specify an exact pixel width. */

.page {
    margin-left: auto;
    margin-right: auto;
    min-width: 1100px;
    width: 90%;
}

header, #header {
    color: #000;
    margin-bottom: 0px;
    padding: 0;
    position: relative;
}

header, #header {
    background-color: white;
    border: 1px solid #CDD8DC;
    border-top-left-radius: 12px 12px;
    border-top-right-radius: 12px 12px;
    color: #000;
    height: 80px;
    margin-bottom: 0px;
    margin-top: 5px;
    padding: 0;
    position: relative;
}

#main {
    -moz-border-radius: 4px 0 0 0;
    -webkit-border-radius: 4px 0 0 0;
    background-color: #F4F4F4;
    border-bottom: 7px solid #F4F4F4;
    border-radius: 4px 0 0 0;
    border-top: 5px solid #F4F4F4;
    min-height: 737px;
    position: relative;
}

#mainInner {
    background-color: #F4F4F4;
    padding: 0px 5px 0px 5px;
}

footer,
#footer {
    -moz-border-radius: 0 0 4px 4px;
    -webkit-border-radius: 0 0 4px 4px;
    background-color: #fff;
    border-radius: 0 0 4px 4px;
    color: #999;
    font-size: .9em;
    line-height: normal;
    margin: 0 0 30px 0;
    padding: 10px 0;
    text-align: center;
}

/* TAB MENU
----------------------------------------------------------*/

ul#menu {
    border-bottom: 1px #5C87B2 solid;
    margin: 0;
    padding: 0 0 2px;
    position: relative;
    text-align: right;
}

    ul#menu li {
        display: inline;
        list-style: none;
    }

        ul#menu li#greeting {
            color: #fff;
            font-weight: bold;
            line-height: 2.8em;
            padding: 10px 20px;
            text-decoration: none;
        }

        ul#menu li a {
            -moz-border-radius: 4px 4px 0 0;
            -webkit-border-radius: 4px 4px 0 0;
            background-color: #e8eef4;
            border-radius: 4px 4px 0 0;
            color: #034af3;
            font-weight: bold;
            line-height: 2.8em;
            padding: 10px 20px;
            text-decoration: none;
        }

            ul#menu li a:hover {
                background-color: #fff;
                text-decoration: none;
            }

            ul#menu li a:active {
                background-color: #a6e2a6;
                text-decoration: none;
            }

        ul#menu li.selected a {
            background-color: #fff;
            color: #000;
        }

/* FORM LAYOUT ELEMENTS
----------------------------------------------------------*/

fieldset {
    border: 1px solid #ddd;
    margin: 0 0 1.5em 0;
    padding: 0 1.4em 1.4em 1.4em;
}

legend {
    font-size: 1.2em;
    font-weight: bold;
}

textarea {
    min-height: 75px;
}

input[type="text"],
input[type="password"] {
    border: 1px solid #ccc;
    color: #444;
    font-size: 0.9em;
    padding: 2px;
    width: 200px;
}

select {
    border: 1px solid #ccc;
    color: #444;
    font-size: 0.9em;
    padding: 2px;
}

input[type="submit"] {
    font-size: 0.9em;
    padding: 5px;
}

label {
    color: #26AAC1;
    font-size: 0.8em;
    font-weight: bold;
}

/* TABLE
----------------------------------------------------------*/

.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2 {
    margin-top: 0;
}

.tblQMS {
}

    .tblQMS th {
        background-image: url(/images/Table/HeaderBg.gif);
        background-repeat: repeat-x;
        color: #26AAC1;
        height: 16px;
        margin-left: 0px;
        margin-right: 0px;
        padding: 4px;
        text-align: center;
    }

    .tblQMS td {
        background-color: #ffffff;
        border-bottom: solid 1px #EEEEEE;
        border-left: solid 1px #ABADB3;
        border-right: solid 1px #EEEEEE;
        border-top: solid 1px #ABADB3;
        color: black;
        height: 16px;
        margin-left: 0px;
        margin-right: 0px;
        padding: 2px 4px 4px 4px;
    }

    .tblQMS .btnColumn {
        width: 23px;
    }

table.width100Percent {
    width: 100%;
}

table.alignLeft th, table.alignLeft td {
    text-align: left;
}

/* MISC
----------------------------------------------------------*/

.clear {
    clear: both;
}

.clearL {
    clear: left;
}

.clearR {
    clear: right;
}

.error {
    color: Red;
}

.hidden {
    display: none;
}

nav,
#menucontainer {
    margin-top: 40px;
}

div#title {
    display: block;
    float: left;
    text-align: left;
}

#logindisplay {
    color: #15A2CD;
    display: block;
    font-size: 1.1em;
    margin: 10px;
    text-align: right;
}

    #logindisplay a:link {
        color: #15A2CD;
        text-decoration: underline;
    }

    #logindisplay a:visited {
        color: #15A2CD;
        text-decoration: underline;
    }

    #logindisplay a:hover {
        color: #15A2CD;
        text-decoration: none;
    }

/* Styles for validation helpers
-----------------------------------------------------------*/

.field-validation-error {
    color: #ff0000;
}

.field-validation-valid {
    display: none;
}

.input-validation-error {
    background-color: #ffeeee;
    border: 1px solid #ff0000;
}

.validation-summary-errors {
    color: #ff0000;
    font-weight: bold;
}

.validation-summary-valid {
    display: none;
}

/* Styles for editor and display helpers
----------------------------------------------------------*/

.display-label,
.editor-label {
    margin: 1em 0 0 0;
}

.display-field,
.editor-field {
    margin: 0.5em 0 0 0;
}

.text-box {
    width: 30em;
}

    .text-box.multi-line {
        height: 6.5em;
    }

.tri-state {
    width: 6em;
}

/* Log On Area */

.registerText a {
    color: Black;
}

.whiteStyle {
    color: White;
}

.darkStyle {
    color: black;
}

.usernameBox INPUT {
    width: 262px;
}

.passwordBox INPUT {
    width: 262px;
}

#fieldsetLogOn, .fieldsetSignup, #fieldsetChangePassword, .fieldsetSignup {
    margin-top: 100px;
    width: 200px;
}

    #fieldsetLogOn editor-label, #fieldsetChangePassword editor-label {
        width: 230px;
    }

.rememberMeArea {
    position: relative;
}

    .rememberMeArea label {
        left: 22px;
        position: absolute;
        top: 0px;
    }

#logindisplay {
    color: White;
    display: block;
    font-size: 1.1em;
    margin: 10px;
    text-align: right;
}

    #logindisplay a:link {
        color: white;
        text-decoration: underline;
    }

    #logindisplay a:visited {
        color: white;
        text-decoration: underline;
    }

    #logindisplay a:hover {
        color: white;
        text-decoration: none;
    }

.small {
    font-size: 0.8em;
}

.redSmall {
    color: Red;
    font-size: 0.8em;
}

#btnLogOn {
    font-size: 1.1em;
    margin-left: 72px;
    margin-top: 15px;
}

#btnChangePassword {
    font-size: 1.1em;
    margin-left: 33px;
    margin-top: 15px;
}

/* ------------------------ Logo -------------------------*/

#logo {
    margin-left: 10px;
    margin-top: 7px;
}

/* ------------------------- Breadcrumb Bar --------------------*/

#BreadcrumbBar {
    -moz-box-shadow: 2px 2px #BDBDBD;
    background-color: #26AAC1;
    border-bottom: 4px solid #FDA81A;
    border-top: 1px solid #5C87B2;
    color: White;
    font-size: 0.9em;
    height: 19px;
    padding: 4px 8px 0px 0px;
    text-align: right;
}

    #BreadcrumbBar a {
        color: White;
        font-size: 0.9em;
    }

/* ---- Middle ---- */

.middle {
    margin-left: auto;
    margin-right: auto;
}

/* ------ Header -------*/

.barHeader {
    background-color: #26AAC1;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    color: white;
    display: block;
    font-size: 1.3em;
    margin: 0px 0px 10px 0px;
    padding: 5px;
}

/*------------------------------ Gridview Styles -------------------------------*/

.gridviewButton {
    background-position: left center;
    background-repeat: no-repeat;
    padding-left: 22px;
    padding-right: 5px;
}

.add {
    background-image: url(/images/Gridview/Add_16.png);
}

.import {
    background-image: url(/images/Gridview/impt_16.gif);
}

.download {
    background-image: url(/images/Gridview/download_16.gif);
}

.chart {
    background-image: url(/images/Gridview/chart_16.png);
}
.linechart {
    background-image: url(/images/Gridview/linechart_16.png);
}
.table {
    background-image: url(/images/Gridview/table_16.png);
}

.redact {
    background-image: url(/images/Gridview/redact.png);
}

.cancel {
    background-image: url(/images/Gridview/Stop.png);
}

.trash {
    background-image: url(/images/Gridview/trash_16.gif);
}

.tick {
    background-image: url(/images/Gridview/tick_16.png);
}

.edit {
    background-image: url(/images/Gridview/Edit.png);
}

/* Working Area */

.workingArea {
    background-color: white;
    border: 1px solid #26AAC1;
    border-radius: 8px 8px;
    padding: 5px;
}

.fullScreenWidthAndHeight {
    min-height: 735px;
    width: 98.9%;
}

/* STANDARD STYLES
----------------------------------------------------------*/

.floatL {
    float: left;
}

.floatR {
    float: right;
}

.width20Percent {
    width: 20%;
}

.width50Percent {
    width: 50%;
}

.width80Percent {
    width: 80%;
}

.padding5 {
    padding: 5px;
}

.padding10 {
    padding: 10px;
}

.marginTop10 {
    margin-top: 10px;
}

.marginBottom20 {
    margin-bottom: 20px;
}

table.dataTable {
    border-bottom: solid 2px #A2A2A2;
    border-collapse: collapse;
    border-left: solid 1px #768FAA;
    border-right: solid 2px #A2A2A2;
    border-top: solid 1px #768FAA;
    width: 100%;
}

    table.dataTable th {
        background-color: #26AAC1;
        border: solid 1px #768FAA;
        color: white;
        font-weight: bold;
        padding: 5px;
    }

        table.dataTable th.subHeader {
            background-color: #ACDEE7;
            color: #202528;
            font-weight: normal;
        }

        table.dataTable th.subHeaderAlignLeft {
            background-color: #ACDEE7;
            color: #202528;
            font-weight: normal;
            text-align: left;
        }

    table.dataTable td {
        background-color: #ECF7F9;
        border: solid 1px #768FAA;
        color: black;
        padding: 5px;
    }

/*--------------------- Import Styles ----------------------*/

.import-validation-warnings {
    color: #FF8C00;
    font-weight: bold;
    border: 1px solid #FF8C00;
    background-color: #0FFF8C00;
}

    .import-validation-warnings ul li {
        font-weight: normal;
    }

    .import-validation-warnings .warning {
        margin: 0;
        white-space: pre-wrap;
    }

    .import-validation-warnings .justification {
        margin: 0 0 10px 0;
    }

        .import-validation-warnings .justification textarea {
            width: 500px;
            min-height: 30px;
        }

    .import-validation-warnings .confirmation {
        margin: 0 0 10px 0;
    }

        .import-validation-warnings .confirmation input {
            position: relative;
            top: 2px;
        }

.Import_CandidateData {
    font-size: 0.8em;
}

    .Import_CandidateData .ScrollableData {
        height: 300px;
        margin-bottom: 20px;
        overflow-x: scroll;
        overflow-y: scroll;
        width: 100%;
    }

    .Import_CandidateData .Heading {
        background-color: #26AAC1;
        color: white;
        padding: 5px;
    }

/*--Navigation--*/

.navigationBlock {
    background-image: url(/images/Navigation/navBlockBg.gif);
    background-repeat: repeat-x;
    border-radius: 8px 8px;
    height: 55px;
    padding: 2px 5px 5px 5px;
    float: right;
    margin-right: 10px;
    text-align: left;
    display: inline-block;
    margin-top: 10px;
}

    .navigationBlock:hover .navigationLink {
        color: white;
    }

.navigationLink {
    margin-top: 20px;
    font-size: 1.2em;
    float: right;
    color: #27671D;
}

.navigationBlock:hover {
    background-color: #26AAC1;
    background-image: none;
}

.navigationIcon {
    height: 60px;
    width: 60px;
    float: left;
    background-repeat: no-repeat;
    background-position: left;
}

.navigationBlock .icon {
    height: 60px;
    width: 60px;
    float: left;
    background-repeat: no-repeat;
    background-position: left;
}

.navigationBlock .surveys {
    background-image: url(/images/Navigation/survey_48.png);
}

.clientBreadcrumbInfo {
    float: left;
    margin-left: 8px;
}

/* ---------------------------------------------------------- Reports -----------------------------------------*/

.barHeaderSquareBox {
    background-color: #F4AD3F;
    color: white;
    display: block;
    font-size: 1.1em;
    margin: 10px 0px 10px 0px;
    padding: 4px;
    border-bottom: 1px solid #26AAC1;
}

#ResponseRateTable .dataTable {
    width: auto;
}

.responseRateChartContainer {
    overflow: auto;
    height: 695px;
    width: 99.8%;
}

.chartContainer {
    border: 1px solid #26AAC1;
    border-radius: 5px 5px;
}

.responseRateOptions {
}

    .responseRateOptions span:first-child {
        margin-left: 0;
    }

    .responseRateOptions span:last-child {
        margin-right: 0;
    }

    .responseRateOptions > span {
        float: left;
        margin: 10px;
    }

    .responseRateOptions span.breakdownFields {
        position: relative;
        top: -2px;
    }

        .responseRateOptions span.breakdownFields span.breakdownOption {
            margin: 0 10px;
        }

        .responseRateOptions span.breakdownFields span.breakdownOption input[type=checkbox] {
            position: relative;
            top: 2px;
        }

    .responseRateOptions span.exportButtons {
        float: right;
    }

        .responseRateOptions span.exportButtons a {
            margin: 10px;
        }

#ExportExcelReportPopup select {
    width: 240px;
}

#returnsChartCanvas {
    min-width: 90%;
    margin: auto;
}

#SurveyActivityChart {    
    width :1283px;
    height :695px;
    margin:auto;
}

/*  -------------------- Field Alias Edit  ---------------------*/
.personFieldAliasEdit .editInfoAndOptions {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

    .personFieldAliasEdit .editInfoAndOptions .info {
        flex: 1;
    }

    .personFieldAliasEdit .editInfoAndOptions .save {
        flex: 0 0 100px;
        height: 35px;
    }

.personFieldAliasEdit .validationSummary {
    margin-bottom: 10px;
}

.personFieldAliasEdit .dataTable button {
    width: 20px;
    height: 20px;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent;
    cursor: pointer;
    border: none;
    outline: none;
}

.personFieldAliasEdit .alias input {
    width: 100%;
    box-sizing: border-box;
}

    .personFieldAliasEdit .alias input[readonly] {
        border-color: transparent !important;
        border: none !important;
        outline-color: transparent !important;
        outline: none !important;
        background-color: transparent !important;
    }

.personFieldAliasEdit .options {
    width: 50px;
}

    .personFieldAliasEdit .options button.edit {
        display: inline-block;
    }

    .personFieldAliasEdit .options button.trash {
        display: inline-block;
    }

    .personFieldAliasEdit .options button.tick {
        display: none;
    }

    .personFieldAliasEdit .options button.cancel {
        display: none;
    }

.personFieldAliasEdit .edited .options button.edit {
    display: none;
}

.personFieldAliasEdit .edited .options button.trash {
    display: none;
}

.personFieldAliasEdit .edited .options button.tick {
    display: inline-block;
}

.personFieldAliasEdit .edited .options button.cancel {
    display: inline-block;
}


input:-webkit-autofill,
input:-webkit-autofill:focus {
    transition: background-color 0s 600000s, color 0s 600000s !important;
}