/*-------------------------------------------------------------------------
These styles apply to the main working area.  Style specific to the
Survox Console menus, etc are in NavFrame.css

Enghouse branding colors are below to easily find then and cut and paste.
I've just grabbed any properties that have colors since my IDE shows
thumbnails, so the properties don't mean anything
-------------------------------------------------------------------------*/

.enghouse_primary_colors {
    /* color from logo, guide says #003591 */
    color: #01529d; /* rgb(1, 82, 157) */
    background-color: #72B5CC /* rgb(114, 181, 204); */
}

.enghouse_secondary_colors {
    color: #000000; /* black */
    background-color: #ffffff; /* white */
    border-color: #808080; /* grey */
}

.enghouse_accent_colors {
    color: #EF415D; /* rgb(240, 65, 95); */
    background-color: #00A5B6; /* rgb(0, 165, 182); */
    border-top-color: #CFDD28; /* rgb(207, 220, 40); */ /* enghouse accent green */
    border-left-color: #8C5CA4; /* rgb(140, 90, 165); */
    border-right-color: #F15D2A; /* rgb(240, 93, 42); */
    border-bottom-color: #001539; /* rgb(0, 21, 57); */
}


.greys_also_used {
    color: #ebebeb;
    background-color: #d9d9d9;
    border-top-color: #cccccc;
    border-left-color: #bfbfbf;
    /*border-right-color: #F15D2A; */
    border-bottom-color: #414141;
}



/*-------------------------------------------------------------------------
`XHTML, HTML4, HTML5 Reset
Some browsers have different default values for some settings.  The following rules
make them behave the same
-------------------------------------------------------------------------*/
html, body {
    height: 100%;
}

/* Reset margins, etc */
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite,
code, dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, font, footer, form,
h1, h2, h3, h4, h5, h6, header, hgroup, hr, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, meter,
nav, object, ol, output, p, pre, progress, q, rp, rt, ruby, s, samp, section, small, span, strike, strong, sub,
summary, sup, table, thead, tfoot, tbody, td, th, time, tr, tt, u, ul, var, video {
    margin: 0;
    padding: 0;
    font-size: 100%;
}

/* Override the default (display: inline) for browsers that do not recognize HTML5 tags.  */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

/* Makes browsers agree.  IE + Opera = font-weight: bold.  Gecko + WebKit = font-weight: bolder.  */
b, strong, .bold  {
    font-weight: bold;
}

/* For IE.  http://css-tricks.com/ie-fix-bicubic-scaling-for-images */
img {
    color: transparent;
    font-size: 0;
    vertical-align: middle;
    -ms-interpolation-mode: bicubic;
}

/* For IE6 + IE7: "display: list-item" keeps bullets from disappearing if hasLayout is triggered.  */
ol, ul {
    list-style: none;
}

li {
    display: list-item;
}

th, td, caption {
    font-weight: normal;
    vertical-align: top;
    text-align: left;
}

/* defaults for quotes */
q {
    quotes: none;
}

q:before, q:after {
    content: none;
}

/* defaults for super/sub-scripts */
sub, sup, small {
    font-size: 75%;
}

sub, sup {
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

/* For IE9. Without, occasionally draws shapes outside the boundaries of <svg> rectangle.  */
svg {
    overflow: hidden;
}

/*-------------------------------------------------------------------------
-------------------------------------------------------------------------*/
/*
 * Set fonts
 ----------------------------------------------------------------------------------------------------*/

body, input, textarea, button {
    font-family: Calibri, sans-serif;
    font-size: 16px; /* 14px */
}

pre, code {
    font-family: Consolas, monospace;
}


/*
 * Links
 ----------------------------------------------------------------------------------------------------*/

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    cursor: pointer;
}

a:active {
    text-decoration: underline;
}

/* Headings
----------------------------------------------------------------------------------------------------*/

h1 {
    font-size: 1.4em;
}

h2 {
    font-size: 1.3em;
}

h3 {
    font-size: 1.2em;
}

h4, .h4-like {
    font-size: 1.1em;
}

h5 {
    font-size: .9em;
}

h6 {
    font-size: .75em;
}

.title,
.h4-like,
.heading {
    font-weight: bold;
}

/* Spacing / Position
----------------------------------------------------------------------------------------------------*/

div {
    vertical-align: top;
}

ol {
    list-style: decimal;
}

ul {
    list-style: disc;
}

ul.no_bullet {
    list-style-type: none;
    margin-bottom: 0.5em;
}

ul.items-only {
    list-style-type: none;
}


ul.items-only li {
    margin-left: 0;
}

li {
    margin-left: 30px;
}

table, tr {
    border-collapse: collapse;
    border-spacing: 0;
    border: 1px solid #ebebeb;

}

dl, hr, ol, ul, pre, table, address, fieldset, figure {
    margin-bottom: 20px;
}

p {
    margin-bottom: 12px;
}

.align_m {
    vertical-align: middle;
}

.float_r {
    float: right;
}

.full_width {
    width: 100%;
}

.lg_margin {
    margin: 10px 0 7px 0;
}

.rt_margin {
    margin-right: 15px;
}

.indent_xsm {
    padding-left: 5px;
}

.indent_sm {
    padding-left: 0.5em;
}

.indent-med {
    margin-left: 1em;
}

.indent-lg {
    margin-left: 2em;
}

.indent-xlg {
    margin-left: 5em;
}

.indent_10 {
    margin-left: 10px;
}

.indent_20 {
    margin-left: 20px;
}

.indent_30 {
    margin-left: 30px;
}

.indent_40 {
    margin-left: 40px;
}

.indent_50 {
    margin-left: 50px;
}

.indent_60 {
    margin-left: 60px;
}

.workspace,
.workSpace,
.responseDiv {
    margin-top: 5px;
}

.ptop-sm {
    padding-top:10px;
}

/* common styles */

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

div.justify-left, span.justify-left {
    float: left;
}

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

div.justify-right, span.justify-right {
    float: right;
}

.inline {
    display: inline;
}


/* Form Element Defaults
----------------------------------------------------------------------------------------------------*/
input[type='submit'],
input[type='image'],
input[type='button'],
input[type='radio'],
input[type='checkbox'],
input[type='file'],
label[for],
select,
button,
.pointer,
.section,
.showHide,
.showHide_all,
.show_all,
.hide_all,
.clickText,
.instruct,
#select_dates input[type='text'] {
    cursor: pointer;
}

input[type='text'],
input[type='email'],
input[type='password'],
select {
    width: 200px;
    padding: 2px;
    vertical-align: middle;
}

select[multiple] {
    height: 100px;
}

input[type='checkbox'] {
    vertical-align: middle;
}


.baseList select,
.destList select {
    width: 275px;
    height: 100px;
}

input:focus, textarea:focus /* remove default focussed input styling */
{
    outline: none;
}

textarea {
    resize: vertical;
    overflow: auto;
    width: 300px;
}

th,
td {
    padding: 3px;
}

th {
    font-weight: bold;
}

/* form element styles */
input[type='text'].textBox-sm, .textBox-sm {
    width: 50px;
}

input[type='text'].textBox-med, .textBox-med {
    width: 100px;
}

.textBox-lg,
input[type='text'].textBox-lg,
input[type='password'].textBox-lg {
    width: 150px;
}

.text-wide,
input[type='text'].text-wide,
input[type='password'].text-wide {
    width: 20em;
}


/*
 * Content blocks
 ----------------------------------------------------------------------------------------------------*/

html {
    min-width: 100%;
    min-height: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    min-width: 960px;
    height: 100%;
    line-height: 1.4;
    background-color: #ffffff;
}

.flex-row {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-direction: row;
}

.flex-col {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
}

.flex-expander {
    flex-grow: 1;
}


/*
 * Globals
 ----------------------------------------------------------------------------------------------------*/

.border_1 {
    border: 0;
}

.box {
    padding: 12px 0;
}

img {
    vertical-align: middle;
}

.titleBar_instructError {
    margin-left: 20px;
}

.hidden,
.hide_at_start,
.hideatstart {
    display: none;
}

iframe {
    margin-top: 10px;
    height: auto;
    width: 100%;
    min-height: 800px;
    overflow: hidden;
    overflow-y: scroll;
    border: 1px solid #ebebeb;
}

#titleBar_error,
.titleBar_error {
    font-weight: bold;
}

hr,
.breakLine,
#breakLine {
    border: 0 #ccc solid;
    border-top-width: 1px;
    clear: both;
    height: 0;
    margin: 12px 0 7px 0;
}

/* Helper classes
----------------------------------------------------------------------------------------------------*/
.ajaxLoading {
    width: 80%;
    min-height: 20px;
    min-width: 32px;
    background: url(../images/ajax-loader.gif) no-repeat center;
}

#result {
    display: inline;
    border: 0 solid #ebebeb;
    padding: 3px 100px 3px 100px;
    background: url(../images/ajax-loader.gif) no-repeat center;
}

.note,
.main_note,
.note_postit,
.InfoText {
    display: inline-block;
    min-width: 30%;
    margin-top: 10px;
    padding: 15px 30px 15px 65px;
    background: #ebebeb url(../images/note.png) no-repeat;
}

.rounded_corners {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
}

.shadow {
    -moz-box-shadow: 0 0 0 #fff;
    -webkit-box-shadow: 0 0 0 #fff;
    box-shadow: 0 0 0 #fff;
}

.cautionBox {
    width: 80%;
    padding: 20px;
    margin: 12px 0 12px 0;
    border: 1px solid #ebebeb;
}

/*-------------------------------------------------------------------------
-------------------------------------------------------------------------*/
.noborder, .noborder tr, .noborder th, .noborder td {
    border: none;
}

.InfoText {
    display: none;
}

/*-------------------------------------------------------------------------
These seem to define classes and so don't look like they belong here
-------------------------------------------------------------------------*/

.clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}

.clearfix:before,
.clearfix:after {
    content: '.';
    display: block;
    overflow: hidden;
    visibility: hidden;
    font-size: 0;
    line-height: 0;
    width: 0;
    height: 0;
}

.clearfix:after, .clear-both {
    clear: both;
}

.clearfix {
    zoom: 1; /* specifically for IE6 + IE7.  */
}



/*-------------------------------------------------------------------------
modal and pop-up content
-------------------------------------------------------------------------*/
.popButton {
    margin-top: 1rem;
    margin-right: 0;
    margin-left: 45%;
    margin-bottom: 0;
}

.modal-prompt,
.modal-content {
    position: fixed;
    min-width: 30%;
    max-width: 60%;
    /*height: 60%;*/
    max-height: 85%;
    overflow: auto;
    left: 50%;
    top: 100px;
    margin-left: -30%;
    padding: 1rem;
    border-radius: .7rem;
    -moz-border-radius: .7rem;
    -webkit-border-radius: .7rem;
    z-index: 10000;
}

.modal-prompt,
.modal-content {
    border: 5px solid #01529d;
    background-color: #fff;
}

.modal-prompt .title,
.modal-content .title {
    margin-bottom: 1em;
    font-size: 1.6em;
    color: #01529d;
}

.modal-prompt .title {
    background: url(../images/user_prompt.gif) no-repeat top left;
    padding-left: 45px;
}

.modal-prompt .instructions,
.modal-content .instructions {
    padding: 7px 0 0 7px;
}

.modal-prompt .buttons,
.modal-content .buttons {
    padding-top: 20px;
    text-align: center;
}

#modal-background,
.modal-background {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    background-color: rgba(0, 0, 0, 25%);
    z-index: 50;
}

/*
 *  extend jQuery-ui widget settings
 */
.ui-widget {
    font-size: .9em;
}

.ui-tooltip {
    padding: 2px 7px 2px 7px;
    font-size: .9em;
}

/* main workspace classes
 ********************************************/

.assign td {
    padding: 0 5px;
}

table.assign,
table.assign tr {
    border: 0;
}

table.two_column,
table.two_column tr {
    border: 0;
}

/* --- title bars --- */
#titleBar,
.titleBar,
#titleBar_top,
.titleBar_top,
.titleBar_right,
.element_heading {
    font-size: 1.1em;
    font-weight: bold;
    background-color: #fff;
    color: #01529d;
    padding-left: 0;
    margin-left: 0;
    border-bottom: 1px solid #72B5CC;
    margin-bottom: 1ex;
}

#titleBar,
.titleBar,
.element_heading {
    margin-top: 15px;
}

.titleBar_instruct,
.titleBar_Instruct {
    margin-left: 20px;
    font-size: .9em;
    font-weight: normal;
}

.titleBox {
    font-size: 1.2em;
    font-weight: bold;
    margin-top: 15px;
    margin-bottom: 15px;
    text-align: center;
}

/* --- item cards --- */
.card {
    margin-bottom: 1em;
}

.card .card-header {
    color: #01529d;
    background-color: #ebebeb;
    border: thin solid #01529d;
    margin: 0;
    padding: 1ex;
}

.card .card-header-inactive {
    /*color: #414141;*/
    background-color: #d9d9d9;
    border: thin solid #cccccc;
    margin: 0;
    padding: 1ex;
}

.card .card-body {
    border: thin solid #d9d9d9;
    border-top: 0;
    padding: 2ex;
}


dl.description {
    padding-bottom: .5em;
}

dl.description dt {
    font-weight: bold;
    padding-top: .5em;
}

dl.description dd {
    padding-bottom: .5em;
}

/* --- prompts / selection elements --- */

.prompt,
.mode_prompt,
.test_prompt,
#mode_prompt,
#test_prompt,
#envPort,
#select_dates input[type='text'] {
    margin-right: 15px;
}

.prompt,
.test_prompt,
#test_prompt {
    display: inline-block;
}

#select_dates {
    margin: 10px 0 7px 0;
}

/* --- workspace elements --- */

.green_light {
    height: 25px;
    padding: 10px 0 0 40px;
    background: url(../images/green_light.gif) no-repeat;
}

h2 {
    margin: 20px 0 20px 0;
    border-bottom: 1px solid #72B5CC;
}

.link_buttons,
.linkButtons,
.linkbuttons {
    margin-top: 20px;
    vertical-align: middle;
}

.note_right {
    width: 200px;
    position: relative;
    float: right;
    padding: 10px;
    border: 1px solid #d9d9d9;
    -moz-box-shadow: 0 0 0 #fff;
    -webkit-box-shadow: 0 0 0 #fff;
    box-shadow: 0 0 0 #fff;
    background-color: white;
}

.upload_files {
    width: 400px;
}

/* -- SCROLL - used for error listings in script returns -- */

.scroll,
.return_logged {
    height: 12em;
    border: 1px solid #d9d9d9;
    /* padding: 0.8em;*/
    overflow: auto;
}

.return_logged {
    height: 75%;
    margin: 12px 0 12px 0;
}

/* --- checkbox item selection (security / download ) --- */

.titleLine .box {
    padding: 0 5px;
    font-size: 1.0em;
    font-family: 'DejaVu Sans Mono', Menlo, Consolas, monospace;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
}

.titleLine .title {
    padding-left: 7px;
}

.showHide_links {
    font-size: .8em;
    padding-left: 10px;
    vertical-align: middle;
}

.profile div {
    margin-left: 25px;
}

.check_all {
    padding: 10px 0 10px 55px;
    background: url(../images/check_all.gif) no-repeat top left;
}

/* ---  z-indexes --- */



.indent2 {
    margin-left: 2%;
    padding: 10px;
}

.width200 {
    width: 200px;
    padding-right: 10px;
}

.indent5 {
    margin-left: 5px;
    padding: 5px;
}

.indent6 {
    margin-left: 8px;
    padding: 5px;
}

.pad10 {
    padding-top: 5px;
    padding-bottom: 5px;
}

.center {
    text-align: center;
}

table.center {
    margin-left: auto;
    margin-right: auto;
}

.center:first-child {
    /* doesn 't work in IE 6 margin: auto; */
    text-align: left;
}

/* -- Selection Base Tables ---*/
.lsb th {
    font-size: 13px;
    background-color: #ebebeb;
    padding: 5px 0 5px 0;
}

table.lsb {
    width: 80%;
    background-color: #fff;
    border-collapse: collapse;
    margin: .5em 10% 0;
    empty-cells: show;
    table-layout: auto;
}

.ConditionExamples { /*---Used on Select Examples---*/
    background-color: #ffffff;
    width: 80%;
    margin: 10px 10% 0 10%;
    border-collapse: collapse;
    border: solid 1px #ccc;
}

.smalltext {
    width: 30px !important;
}

.inside_table {
    border: none !important;
}

/*-- SPLASH PAGES --*/

.splash_page table.two_column th {
    width: 150px;
    height: 30px;
    vertical-align: top;
    border-top: 1px solid #ccc;
    padding: 7px;
}

.splash_page table.two_column td {
    vertical-align: top;
    border-top: 1px solid #ccc;
    padding: 7px 7px 7px 7px;
}

.splash_page .overview h2,
.splash_page .overview .title,
.splash_page .overview .title_main,
.splash_page .overview .box a {
    color: #01529d;
}

.splash_page th {
    font-weight: normal;
    white-space: nowrap;
}

.splash_page .overview {
}

.splash_page .overview .title,
.splash_page .overview .title_main {
    font-size: 2.5em;
    font-weight: bold;
}

.splash_page .overview h2 {
    border-bottom: 1px solid #72B5CC;
    margin: 20px 0 20px 0;
}

.splash_page .overview .box {
    width: 180px;
    height: 115px;
    float: left;
    margin: 30px 40px 0 0;
    border: 0 solid #ccc;
}

.splash_page .overview .box a {
    font-size: 1.75em;
    font-weight: bold;
    margin-bottom: 8px;
}

.splash_page .overview .box a:hover {
    color: #F15D2A;
}

.splash_page .overview .note {
    margin-top: 60px;
}

.qs {
    border: 1px solid #ebebeb;
    overflow: auto
}

/* CALENDAR STYLES */

/* Notes from our calendar plug-in
     And there are pages we set the prefix to "Test"
// The calendar uses CSS classes for formatting. If you want your calendar to
// have unique styles, you can set the prefix that will be added to all the
// classes in the output.
// For example, normal output may have this:
//     <SPAN CLASS="cpTodayTextDisabled">Today<SPAN>
// But if you set the prefix like this:
   cal.setCssPrefix("Test");
// The output will then look like:
//     <SPAN CLASS="TestcpTodayTextDisabled">Today<SPAN>
// And you can define that style somewhere in your page.
*/

.TESTcpYearNavigation, .TESTcpMonthNavigation {
    background-color: #00A5B6;
    text-align: center;
    vertical-align: center;
    text-decoration: none;
    color: #FFFFFF;
    font-weight: bold;
}

.TESTcpDayColumnHeader, .TESTcpYearNavigation, .TESTcpMonthNavigation, .TESTcpCurrentMonthDate, .TESTcpCurrentMonthDateDisabled,
.TESTcpOtherMonthDate, .TESTcpOtherMonthDateDisabled, .TESTcpCurrentDate, .TESTcpCurrentDateDisabled, .TESTcpTodayText,
.TESTcpTodayTextDisabled, .TESTcpText {
    font-family: arial, sans-serif;
    font-size: 8pt;
}

TD.TESTcpDayColumnHeader {
    text-align: right;
    border: 0 solid #00A5B6;
    border-bottom-width: 1px;
}

.TESTcpCurrentMonthDate, .TESTcpOtherMonthDate, .TESTcpCurrentDate {
    text-align: right;
    text-decoration: none;
}

.TESTcpCurrentMonthDateDisabled, .TESTcpOtherMonthDateDisabled, .TESTcpCurrentDateDisabled {
    color: #d9d9d9;
    text-align: right;
    text-decoration: line-through;
}

.TESTcpCurrentMonthDate {
    color: #00A5B6;
    font-weight: bold;
}

.TESTcpCurrentDate {
    color: #FFFFFF;
    font-weight: bold;
}

.TESTcpOtherMonthDate {
    color: #808080;
}

TD.TESTcpCurrentDate {
    color: #FFFFFF;
    background-color: #00A5B6;
    border: thin solid #000000;
}

TD.TESTcpCurrentDateDisabled {
    border: thin solid #FFAAAA;
}

TD.TESTcpTodayText, TD.TESTcpTodayTextDisabled {
    border: 0 solid #00A5B6;
    border-top-width: 1px;
}

A.TESTcpTodayText, SPAN.TESTcpTodayTextDisabled {
    height: 20px;
}

A.TESTcpTodayText {
    color: #00A5B6;
    font-weight: bold;
}

SPAN.TESTcpTodayTextDisabled {
    color: #d9d9d9;
}

.TESTcpBorder {
    border: solid thin #00A5B6;
}

.arrows {
    margin: 0 12px 0 12px;
    color: #808080;
}

.StyleInput {
    /*font: 11px verdana, arial, helvetica, sans-serif;*/
    text-align: center;
    width: 200px;
    border: 1px solid #ccc;
    background: url(../images/calendar_icon.gif) no-repeat top right;
    cursor: pointer;
}

.CalendarDiv {
    position: absolute;
    z-index: 1;
    top: 100px;
    right: 100px;
    background-color: #fff;
}

/* scriptReturn.css */

.script-return .return_logged {
    padding: 5px;
    border: 1px solid #808080;
    background-color: #ebebeb;
    /*font: 10px bitstream vera sans, arial;*/
    margin: 10px 0 0 0;
    height: 250px;
    width: 700px;
    color: #414141;
    overflow: auto;
}

.script-return .element_heading {
    /*font: bold 11px bitstream vera sans, verdana, arial;*/
    color: #808080;
}

#Row_Months_div,
#Row_Xdays_value_div,
#study_list,
#interviewer_list,
#Row_Xdays_value_div {
    margin-left: 25px;
}


/* Misc. Styles */

.assign_clients {
    position: absolute;
    left: 275px;
    top: 110px;
    z-index: 1;
}

.left_pad_17 {
    padding: 0 0 0 17px;
}

/* simple css-based tooltip */
.tooltip {
    background-color: #414141;
    border: 1px solid #fff;
    padding: 10px;
    width: 200px;
    display: none;
    color: #fff;
    text-align: left;
    font-size: 12px;

    /* outline radius for mozilla/firefox only */
    -moz-box-shadow: 0 0 10px #000;
    -webkit-box-shadow: 0 0 10px #000;
}

/* view_files.css */
.display_files {
    width: 100%;
    position: relative;
}

.display_files thead td {
    vertical-align: bottom;
    border-bottom: 1px solid #808080;
}

.display_files tbody td {
    font-size: .9em;
    border-bottom: 1px solid #ebebeb;
}

a.del_file {
    display: block;
    width: 16px;
    height: 16px;
    background: transparent url(../images/delete_pg_16x16.gif) no-repeat center center;
}

/* setup_web_look.css */

.web_look .closeBox {
    font-weight: bold;
    text-align: right;
    width: 50px;
    border: 1px solid #000;
    margin: 0 20px;
    position: relative;
    cursor: pointer;
}

.web_look .instruct {
    text-align: right;
    /*font: 10px verdana;*/
    font-size: small;
    margin: 0 20px 0 17px;
    color: #808080;
}

.image_pop {
    display: none;
    text-align: center;
    border: 1px solid #fff;
    padding: 20px 10px 20px 10px;
    position: absolute;
    z-index: 2000;
    margin: 0 auto 0 auto;
    top: 100px;
    width: 700px;
    background-color: #414141;
}


.look_feel {
    padding: 15px 0 0 0;
    border: 0 solid #ccc;
}

.look_feel img.thumb_it {
    margin: 0 0 0 30px;
    width: 400px;
    border: 1px solid #808080;
    cursor: pointer;
}

img.theme-preview {
    max-width: 800px
}

.submit_look {
    margin: 10px 0 0 175px;
}

.nav_buttons {
    width: 500px;
    text-align: center;
    margin: 0 auto 0 auto;
    border: 0 solid #ccc;
}

.nav_buttons .button {
    display: inline;
    margin: 0 10px 0 10px;
}

.button.disabled,
input[type=button]:disabled {
    cursor: not-allowed;
}

/* box_element.css used on project overview page only */
.box_heading {
    position: relative;
    margin: 20px 0 0 0;
    font-size: 100%;
    font-weight: bold;
    border-bottom: 1px solid #72B5CC;
    padding: 0 0 0 0;
    color: #01529d;
    width: 60%;
}

.box_heading span {
    font-size: 100%;
}

.box_heading .sub {
    position: absolute;
    width: 250px;
    right: 0;
    bottom: 0;
    font-size: 75%;
    text-align: right;
}

.box_element {
    border: 0 solid #ccc;
    margin: 15px 0 0 0;
    width: 60%;
}

.box_element table {
    width: 100%;
    border-collapse: collapse;
    color: #414141;
    margin: 0 0 0 0;
}

.box_element table td {
    padding: 2px 10px 2px 0;
    text-align: left;
    white-space: nowrap;
    width: 10px;
    vertical-align: top;
}

.box_element table th {
    padding: 2px 10px 2px 0;
    text-align: left;
    color: #414141;
    vertical-align: top;
}

.box_element a {
    color: #72B5CC;
    text-decoration: none;
}

.box_element a:hover {
    text-decoration: underline;
}

.box_element a.box_link {
    display: inline;
    text-align: center;
    padding: 3px 7px 3px 7px;
    margin: 0 0 0 7px;
    border: 0;
    background: #01529d repeat-x;
    color: #fff;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
}

.box_element a.box_link:hover {
    background-color: #72B5CC;
    text-decoration: none;
    color: #fff;
}

.checkmark {
    display: inline-block;
    position: relative;
    left: 0;
    top: 0;
    height: 16px;
    width: 16px;
    background: url(../images/checkmark.png) no-repeat;
    background-size: cover;
}

.checkmark_empty {
    display: inline-block;
    position: relative;
    left: 0;
    top: 0;
    height: 16px;
    width: 16px;
    background: url(../images/checkmark_empty.png) no-repeat;
    background-size: cover;
}

/* web_options.pm */

.profile div {
    vertical-align: middle;
    line-height: 1.5;
}

.profile .title {
    margin-top: 7px;
}

.msg_box input[type='textarea'] {
    width: 400px;
}

#webCATI_Close_Text {
    max-width: 600px;
}

/*  tracking_interviewer_cgi_report CSS */


.cgi_report_header {
    /*font: 10px verdana;*/
    font-size: small;
    color: #414141;
}

/* _                    _
  |_| cgi report table |_|
*/

table.cgi_report {
    margin-top: 12px;
    width: 500px;
    border-collapse: collapse;
}

table.cgi_report thead th {
    padding: 2px 0 5px 2px;
    vertical-align: top;
    text-align: left;
    /*font: bold 10px verdana;*/
    font-weight: bold;
    font-size: small;
    color: #414141;
}

table.cgi_report tbody td {
    padding: 5px 0 5px 2px;
    border-top: 1px solid #ebebeb;
    border-bottom: 1px solid #ebebeb;
    vertical-align: top;
    text-align: left;
    /*font: 10px verdana;*/
    font-size: smaller;
}

/*===============[ NEXT GENERATION ]=================*/

.report_heading {
    /*font-size: 14px;*/
    /*font-family: "lucida grande", tahoma, verdana, arial, sans-serif;*/
    font-weight: normal;
    color: #808080;
}

.report_heading strong {
    color: #414141;
}

table.intv_cgi_report {
    width: 100%;
    border-collapse: collapse;
    /*font-size: 11px;*/
    /*font-family: "lucida grande", tahoma, verdana, arial, sans-serif;*/
    color: #808080;
    margin: 12px 0 0 0;
}

table.intv_cgi_report thead th {
    padding: 2px 0 2px 0;
    font-weight: bold;
    border: 0 solid #ccc;
    text-align: left;
}

table.intv_cgi_report tbody td {
    padding: 2px 10px 2px 3px;
    color: black;
    border-top: 1px solid #ccc;
}

/* report CSS */

/* TABLE CODE */

table.results {
    border-collapse: collapse;
    /*font: 11px verdana, arial;*/
    font-size: small;
    color: #000;
    margin: 10px 0 40px 0;
    border: 1px solid #ccc;
    width: 500px;
}

/* head */

table.results thead {
    color: #808080;
}

table.results thead th {
    text-align: center;
    /*font: italic 14px georgia, trebuchet ms, verdana, arial;*/
    font-style: italic;
}

table.results thead th span {
    display: block;
    /*font: bold 12px verdana, arial;*/
    font-weight: bold;
}

/* BODY */

/*table.results tbody {*/
/*    font: 12px verdana, arial;*/
/*}*/

/* defaults */

table.results tbody th {
    padding: 5px 0 5px 10px;
    background-color: #fff;
    font-weight: normal;
}

table.results tbody th p {
    padding: 0 55px 0 5px;
    margin: 0;
}

table.results tbody td {
    width: 50px;
    text-align: center;
    vertical-align: top;
    padding: 5px 0 2px 0;
    border-right: 1px solid #ccc;
}

table.results tbody td span {
    /*font: 11px verdana, arial;*/
    display: block;
}

/* title */

table.results tbody th.title {
    /*font: bold 12px verdana, arial;*/
    font-weight: bold;
    color: #000;
    padding: 30px 0 2px 10px;
    border-bottom: 1px solid #808080;
}

table.results tbody td.title {
    padding: 30px 0 2px 0;
    border-bottom: 1px solid #808080;
    font-weight: bold;
}

table.results tbody td.title span {
    /*font: 11px verdana, arial;*/
    font-size: small;
    display: block;
}

/* sub */

table.results tbody th.sub {
    padding: 0 0 0 30px;
    /*font: italic 11px verdana, arial;*/
    font-style: italic;
    font-size: small;
    border-top: 1px solid #ebebeb;
    border-bottom: 1px solid #ebebeb;
}

table.results tbody th.sub p {
    padding: 2px 55px 2px 5px;
    color: #808080;
}

table.results tbody td.sub {
    /*font: 11px verdana, arial;*/
    font-size: small;
    text-align: center;
    background-color: #fff;
    border-top: 1px solid #ebebeb;
    border-bottom: 1px solid #ebebeb;
    padding: 2px 0 2px 0;
    color: #808080;
}

table.results tbody td.sub span {
    /*font: 9px verdana, arial;*/
    color: #808080;
    display: block;
}

/* footer */

table.results tfoot {
    color: #808080;
}

table.results tfoot th {
    padding: 30px 0 0 10px;
    /*font: italic 10px verdana, arial;*/
    font-style: italic;
    border-right: 1px solid #ccc;
}

/* ------------------------------------------------------------------------------------------------------
Theme colors, etc.
 */
html,
input,
select,
textarea {
    color: #414141; /*-- sitewide default text color --*/
}

h1,
h2,
h3 {
    color: #01529d;
}

/* ------------------------------------------------------------------------------------------------------
links
 */
a:link,
a:visited,
.clickText,
.instruct,
.showHide_all,
.show_all,
.hide_all,
.showHide {
    color: #72B5CC; /*-- sitewide default link color --*/
}

.de-em,
a:hover,
a:active,
.clickText:hover,
.instruct:hover,
.showHide_all:hover,
.show_all:hover,
.hide_all:hover,
.showHide:hover {
    color: #808080; /*-- sitewide default link hover / "lighter" text color --*/
}

/* ------------------------------------------------------------------------------------------------------
buttons
 */


button {
    color: #fff;
    background-color: #01529d;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    border: 0;
}

input[type='submit'],
input[type='button'],
button.std
{
    color: #fff;
    background-color: #01529d;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    border: 0;
    padding: 5px 8px 5px 8px;
}

button:hover,
input[type='submit']:hover,
input[type='button']:hover {
    background-color: #72B5CC;
}

input[type='button'].cancel {
    color: #fff;
    background-color: #808080;
}
input[type='button'].cancel:hover {
    background-color: #72B5CC;
}

.smallbutton {
    font-size: smaller;
}

.refresh-btn {
    display: inline-block;
    background: url(../images/refresh-icon.png) no-repeat center;
    background-size: 25px 25px;
    height: 25px;
    width: 25px;
    margin-left: 15px;
    cursor: pointer;
    vertical-align: middle;
}

span.load-next {
    display: inline-block;
    color: #fff;
    background-color: #01529d;
    height: 1.4em;
    width: 1.8em;
    margin-left: 1em;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
}

span.load-next-disabled {
    display: inline-block;
    color: #fff;
    background-color: #01529d;
    height: 1.4em;
    width: 1.8em;
    margin-left: 1em;
    cursor: not-allowed;
    text-align: center;
    vertical-align: middle;
}


/* ------------------------------------------------------------------------------------------------------
inputs
 */
input[type='text'],
input[type='number'],
input[type='email'],
input[type='password'],
select
{
    border: 1px solid #808080;
}

input[type='text']:read-only,
input[type='number']:read-only,
input[type='email']:read-only,
input[type='password']:read-only
{
    border: 0;
    /*border-bottom: 1px solid #808080;*/
    /*border-right: 1px solid #808080;*/
    cursor: default;
}

/* Disabled styles */
input:disabled, input[aria-disabled=true],
textarea:disabled, textarea[aria-disabled=true],
select:disabled, select[aria-disabled=true],
.disabled, .readonly {
    background-color: #ebebeb;
    cursor: default;
}

option:disabled {
    background-color: #ebebeb;
}

input[type='text']:required,
input[type='number']:required,
input[type='email']:required,
input[type='password']:required,
input[type='file']:required,
select:required,
.input_required,
.textBox_req
{
    border: 1px solid #72B5CC;
    background-color: rgba(114, 181, 204, 0.075);
}

input[type='text']:focus,
input[type='number']:focus,
input[type='email']:focus,
input[type='password']:focus,
select:focus
{
    /*border: 2px solid #CFDD28; !* enghouse accent green *!*/
    /*border-right-width: 4px;*/
    border-left-width: 4px;
}

input[type='text'].error,
input[type='number'].error,
input[type='email'].error,
input[type='password'].error,
select.error {
    color: #000;
    border: 1px solid #EF415D;
    background-color: rgba(240, 65, 95, 0.2);
}

input[type='text'].error:focus,
input[type='number'].error:focus,
input[type='email'].error:focus,
input[type='password'].error:focus,
select.error:focus {
    border: 2px solid #EF415D;
    /*border-left-width: 4px;*/
    /*border-right-width: 4px;*/
}


.input_error {
    border: 1px solid #EF415D;
}

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

 */

table, tr {
    border-color: #72B5CC;
}


thead.border th {
    border: 1px solid #72B5CC;
}


/* ----- colors ----- */
.versioninfo th {
    color: #01529d;
}

.showHide_links {
    color: #72B5CC;
}

.titleBar_instruct,
.titleBar_Instruct,
.note_reqd {
    color: #414141;
}

#titleBar_error,
.titleBar_error,
.titleBar_instructError {
    color: #EF415D;
}

.required,
.showHide,
.titleLine .box {
    color: #01529d;
    font-weight: bold;
}

.black,
.bold_black {
    color: #000;
    font-weight: bold;
}

.border_test {
    border: 1px solid #EF415D;
}

.border_test {
    padding: 5px;
}

.upload_files,
.titleLine .box {
    border: 1px solid #01529d;
}

.textBox_static {
    border: 1px solid #ebebeb;
}

.versioninfo {
    outline: 2px solid #01529d;
}

.versioninfo td,
.versioninfo th {
    border: 1px solid #01529d;
    text-align: center;
    padding: 10px;
}

.expiry {
    width: 69%;
    color: #EF415D;
    background-color: white;
    padding: 1em 0;
    margin: 1em auto;
    border: 2px solid #01529d;

}

/* ------------------------------------------------------------------------------------------------------
 generic font styles
 */

.green,
.success {
    color: green;
}

.warn {
    color: #9A4D00; /*-- warning - script return --*/
}

.error,
.error_text,
.button_del,
.cautionBox {
    color: #EF415D; /*-- sitewide default error color --*/
}

.danger {
    font-weight: bold;
    font-size: larger;
    color: #EF415D;
}

.err,
.scroll,
.return_logged {
    color: #808080;
}

.highlight-error {
    background-color: #FFBBBB;
}

.smaller {
    font-size: smaller
}

.bold {
    font-weight: bold;
}

.status-good {
    background-color: green;
    color: white;
}

.status-bad {
    background-color: #EF415D;
    color: white;
}