/*
 *  File:         style.css
 *  Description:  CSS main style sheet for project
 *  Author:       Paul Howlett - Senior Developer Mad Media Labs: paul.howlett@madmedialabs.com
 *  Language:     CSS
 *  Project:      Ferrari-RS
 *


/* Main styles */

html {
    background-color: #EAEAEA;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 13px;
    color: #666666;
}

.r {
  text-align: right;
}

td.recruitHeading {
  text-align: left !important;
  border-left:none;
}

.pd4px {
  padding: 4px;
  margin: 0px;
}

.pad8pxTop  {
  padding-top: 8px;
}

input,select,button {
  padding: 3px;
  margin: 3px;
  font-weight: normal;
  color: black;
 }

.green {
  color: green;
}

.red {
  color: red;
}

.orange {
  color: orange;
  font-weight: bold;
}

.black {
  color: black;
}

.noBorder {
  border: none;
}

.transcribeGood {
  color: green;
}

.transcribeSoSo {
  color: dodgerblue;
}

.transcribeBad {
  color: red;
}

/* Wrappers */

#login_wrapper {
    background-color: #FFFFFF;
    border: 10px solid #D6D6D6;
    margin: 50px auto 10px;
    padding: 15px 30px;
    width: 450px;
}

#dashboard {
    width: 70%;
    background-color: #FFFFFF;
    border: 1px solid #D6D6D6;
    padding: 10px;
    min-height: 500px;
    min-width: 600px;
}

#sidebar {
    margin-top:0;
    padding:0px 10px; /* Pad only on the sides */
    position:fixed;
    max-height: 100vh;
    overflow-y: auto; /* Refs #1866 - scroll when content exceeds viewport height */
}

#sidebar.sidebarright {right:0; width: 25%;}
#dashboard.sidebarright {float:left;}
#dashboard.sidebarleft {position:absolute; right:0;}

#sidebar>div {
  display:block;
  clear:both;
}

#fieldInfoDiv {
  border-style:solid;
}

#fieldInfoDiv div {
  visibility: hidden; /* Default these invisible, js will override */
}

#fieldInfoCurrentDiv {
  min-height:2.5em;
}

#fieldInfoUpdateDiv {
  border-top-style:solid;
  }
  
#fieldInfoUpdateDiv textarea {
  width:100%;
  height:3em;
  resize:none;
}

#fUComment {
  float:left;
  width:99%;
}

#fUCanned {
  float:left;
}

#fUButtons {
  clear: left;
  min-height: 21px;
}

#fieldInfoUpdateDiv input[type=radio] {
  margin:0.5em;

  }

#fieldInfoHistoryDiv {
  border-top-style:solid;
  height:12em;
  overflow: auto;
}

#fuelGauge {
    float: left;
}

#syncDiv {
  padding:10px;
  min-height:60px; /* Keep it fixed size even if number of lines in it varies */
}

.flexVertical {
  display: flex;
  flex-direction: column;
}

#loginf .show_on_js {
  display: flex;
  flex-direction: row;
}

#loginBox {
  width: 50%;
}

#loginLogo {
  width: 50%;
  height: 200px;
}

#loginLogo img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

#menu {
    line-height: 20px;
    padding-top: 10px;
    /* width: 187px; /* Needed mostly because 'Contact Us' address needs to wrap */
}

#menu #menuItems {
    margin-top: 0px;
}

#menuItems img {
/*  display: none; */
}

#menu #studyHelp {
    margin-top: 20px;
}

#FFLog {
  width:99%;
  height: 10em;
  border-style:solid;
}

.subjectStatus {
  font-size: 1.2em;
  font-weight:bold;
}

.statusBlock {
  float: left ;
  margin: 0px 0.5em 0px 0px;
  }

.statusBlock  dl {
  clear:both;
}

.statusBlock  dt, .statusBlock dd {
  float: left;
  background: #d0d0d0;
  margin: 5px 0px 0px 0px;
  padding: 4px;
}

.statusBlock  dt {
  clear: both ;
  font-weight: bold;
  width: 8em;
}

.statusBlock  dd {
  margin-left: 2px;
  width: 18em;
}

.statusBlock.double dd {
  width: 502px;
  min-height: 34px;
}

.statusBlock.problem dd, .statusBlock.problem dt, .statusBlock dd.problem, .statusBlock dt.problem {
  background-color: rgb(237, 195, 196);
  color: red;
}

.noshow,.hidden,.tabs,.show_on_js{ /* Hide tabs until they have been rendered */
  display: none;
}

.formDeleted {text-decoration: line-through;}

.clear {
  clear: both ;
}
/*  Headings */

h1 {
  font-weight: bold;
  font-size: 36px;
}

h2 {
  font-size: 18px;
  font-weight: bold;
}

h3 {
  font-size: 15px;
  font-weight: bold;
}

.titles {
  color: #666666;
  font-weight: bold;
  font-size: 15px;
}

a, a.downloadCSV { /* Second is to make more specific for when inside a tab */
  color: blue;
  font-weight: bold;
  text-decoration: none;
  font-size: 12px;
}

a:hover {
  color: green;
}

/*  Messages and errors */

div.message, div.success, div.error, div.javascript {
    background-position: 10px center;
    background-repeat: no-repeat;
    font-size: 12px;
    font-weight: bold;
    min-height: 30px;
    line-height: 30px;
    margin-bottom: 10px;
    margin-top: 10px;
    padding: 10px 10px 10px 60px;
}

div.message {
  background-color: #FFFBCC;
  background-image: url("../img/icons/web-app/32/Info.png");
  border: 1px solid #ff8940;
  color: #ff8940;
}

div.success {
  background-color: #cdf0d2;
  background-image: url("../img/icons/web-app/32/s.png");
  border: 1px solid #2a5e45;
  color: #2a5e45;
}

div.error {
  background-color: #edc3c4;
  background-image: url("../img/icons/web-app/32/Warning.png");
  border: 1px solid red;
  color: red;
}

div.javascript {
  background-color: #edc3c4;
  background-image: url("../img/icons/web-app/32/Warning.png");
  border: 1px solid red;
  color: red;
  height: 60px;
  line-height: 16px;
}

label.error {
  color: red;
  font-weight: bold;
}

.ui-datepicker-trigger {
  padding-left: 0.5em;
}

/* fuelGuage styles */

#fuelGauge p {
  font-size: 10px ;
  color: #808080 ;
  float: left ;
  margin: 2px 10px 0px 10px ;
}

.timeoutBlocks {
  float: left ;
  margin-left: 1px ;
  margin-top: 5px;
  width: 8px ;
  height: 6px ;
  /* Fudge for IE ignoring element height */
  font-size: 0px ;
}

.greenBlock {
  background-color: #4dff4d ;
}
.yellowBlock {
  background-color: #ffff4d ;
}
.redBlock {
  background-color: #ff4d4d ;
}
.whiteBlock {
  background-color: #ffffff ;
}

.ui-dialog-titlebar  {
  background: url( ../img/backgrounds/Gradient_Grey.jpg) top repeat-x;
}

.dialogUIImage {
  float: left ;
  display: block ;
  margin: 20px 20px 0px 0px ;
  width: 40px ;
}
.dialogUIText {
  float: left ;
  display: block ;
  width: 310px ;
}

.ui-dialog-titlebar-close {display: none } /* Disable the 'x' to close dialogs; used to also qualify by .no-close, but at the moment I think all want it */

/*  Menu styles */

#menu h2 {
    font-size: 20px;
    margin: 0 0 10px;
    padding: 0 0 0 10px;
}

#menu  a {
    border-bottom: 1px solid #EEEEEE;
    border-top: 1px solid #EEEEEE;
    color: #666666;
    display: block;
    font-size: 12px;
    margin: 0px 0px 5px 0px;
    /* padding: 5px 10px 8px 10px; */
    text-decoration: none;
}

#menu #studyHelp a {
    font-size: 13px;
    font-weight: normal;
    margin: 0 0 5px;
    padding: 0px 0px 0px 0px;
}

#menu .active, #menu a:hover {
    background-color: #FFFFFF;
    border: 1px solid #D6D6D6;
    color: #000000;
    padding-left: 12px;
}

#menu li {
    margin: 0;
    padding: 0;
    list-style: none;
}

#menu img {
    float: left;
    padding-right: 10px;
}

span.date {
  opacity:0;
  filter:alpha(opacity=0);
  font-size: 0px;
}

/*  Logo styles */

#titleCLogo img, #titleSLogo  img {
  max-width: 800px ;
  max-height: 150px ;
}

#clogoImg img , #slogoImg img {
  max-width: 300px ;
  max-height: 80px ;
}

/*  StudySettings styles */
.studyConfigButton {
  clear: both ;
  margin: 20px 0px 1px 0px ;
}

.studySettingsTitle {
  margin: 40px 0px 5px 0px ;
}

.studySettingsTitle form{
  margin: 10px 0px 0px 0px ;
}

.studySettingsTitle form  input[type="submit"] {
  margin: 10px 0px 0px 0px ;
}

/*  EnterSubjectID styles */

#printForm a {
  text-decoration: none ;
  color: black;
  font-weight: normal;
}

.formContent { /* The portion of that tab where forms are edited */
  width: 100%;
  border-style: solid;
  border-width: 1px;
  /* overflow:auto; Removing this got rid of the annoying extra scrollbar */
}

.formSelect, .formEdit {
  display: inline-block;
}

#formPrintButton, #formSearchButton, #formSearchResetButton {
  margin: 5px;
}

.formHeader table{
  width: 100%;
  border-bottom: 1px solid black;
}

.formHeader table img {
  height: 4em;
  width: auto;
}

/* Tables */

table, th, td {
    border-style: solid;
    border-width:thin;
    border-color: inherit;
}

td.formHeaderLeft {
  width: 35%;
  text-align:right; /* Align the left column on the right */
}

td.formHeaderCenter {
  width: 33%;
  text-align:center;
  vertical-align:middle;
}

td.formHeaderRight {
  width: 30%;
}

.formHeader table td {
  font-size: 16px; /* TODO: px shouldn't be here; try removing and see if it looks good, else fix */
  color: black;
}

@media print {
  .noPrint {display:none;}
  
  /*
    Most things here are qualified by .printingForm so that we only affect things if people use the print form
    button, not their normal browser printing.
    
    This means we probably don't need the @media print...
   */
   
  /*
    F910 (and perhaps other forms) has tables that are too wide to print on portrait A4 paper.
    Since F910s are the main form I suspect we need to print, I try to make the default be landscape.
    Of course, this wastes paper for other forms...but then, why would most of these need to be printed anyway?
    And IE 8 doesn't listen...the user has to change to landscape manually.
    Still, I ended up instead reducing the font size in the tables.
    */
  /* @page {size: landscape} */

  .printingForm .formContent td, .printingForm .formContent th {
    font-size: 9px;
  }
  
  .printingForm input[type=text] {border-width:0;}
  
  /* Format things a bit more nicely for print.  TODO: Probably can make much of this in common with screen with better CSS */
  .printingForm #dashboard {width:100%; padding:0; border-width:0;}
  .printingForm .formContent {border-width:0;}
  .printingForm textarea {
    font-size: 9px;
    border-style: none; 
    border-color: Transparent; 
    overflow: auto;
  }

  /* Hide most everything (don't use :not, since IE 8 doesn't support it) */
  .printingForm #dashboard>* {display: none !important;} /* Actually not the dashboard but the content that is not the sidebar; important to override subjectActionTabs */

  /* Now unhide the stuff we want printed */
  .printingForm #dashboard .printWithForm {display: block !important;} /* #dashboard so specificity is high; important to override the important above */
  .printingForm .noPrintWithForm {display:none;} /* Stuff within that shouldn't be printed */
}

@media screen {
  .printOnly {display:none;}
}

.currFocus {
  background: #99ccff;
}

/* relationTable styles */

.formRelations .relButtons {
  text-align:right;
  width:9em;
}

.formRelations tr {
  height: 2.4em;
}

/* For IE 8 the showing of the pointer is not perfect due to lack of :not support */
.formsTab tbody tr:not(.currentInstance) td:not(.dataTables_empty) { /* Both formsTab and all tables are a little broad */
    cursor: pointer;
}

/* We have both .xxx and .NOTxxx classes so we can work around IE 8 */

tr.NOTPotentialParent .button-parent {display:none}
tr.parent .button-parent {display:none}
tr.NOTParent .button-nmp {display:none}
tr.NOTChild .button-nmc {display:none}
tr.NOTPotentialChild .button-child {display:none}

/* Don't show delete/undelete if the form was not added (i.e. defaulted) */
tr.disableDelete button.formDelete {display:none}
tr.disableDelete button.formUndelete {display:none}

/* Don't show delete if the form is already deleted, or undelete if it is not deleted */
tr.formDeleted button.formDelete {display:none}
tr.formNotDeleted button.formUndelete {display:none}

tr.parent {background-color:#99ccff}
tr.child {background-color:#99ccff}
tr.currentInstance {background-color:#6699ff !important;} /* important to override background color for dataTables */

td.relLevel0 {padding-left:0em}
td.relLevel1 {padding-left:1em}
td.relLevel2 {padding-left:2em}
td.relLevel3 {padding-left:3em}
td.relLevel4 {padding-left:4em}
td.relLevel5 {padding-left:5em}

div.formMatrix td {
  color: black;
  font-weight: bold;
  text-align: center;
  vertical-align: top;
}

div.formMatrix td.problem {
  background-color: #FFC1C1;
}

#FFLog {
  overflow: auto;
}

/* Larger close icon for modal dialogs */
.modal .close {
  font-size: 2.5em;
  font-weight: bold;
  cursor: pointer;
  line-height: 1;
  padding: 0 0.3em;
  color: var(--main-color, #044a99);
  opacity: 0.8;
  transition: opacity 0.2s;
}
.modal .close:hover {
  opacity: 1;
}

/* Frame around modal forms */
.modal .modal-content {
  border: 3px solid var(--main-color, #044a99);
  border-radius: 18px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  background: var(--background-color, white);
  margin: 10px;
  padding: 1em;;
}

/* Collapsible Section Styles */

/* Main section container */
.collapsible-section {
  margin-bottom: 20px;
  border: 1px solid #D6D6D6;
  background-color: #FFFFFF;
}

/* Main section header */
.collapsible-main-header {
  background-color: #044a99;
  color: #FFFFFF;
  padding: 12px 15px;
  cursor: pointer;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: bold;
  border: none;
  width: 100%;
  text-align: left;
  transition: background-color 0.3s;
}

.collapsible-main-header > span:not(.toggle-icon) {
  flex: 0 1 auto;
}

.collapsible-main-header:hover {
  background-color: #033a7a;
}

/* Subsection header */
.collapsible-sub-header {
  background-color: #5a8dc4;
  color: #FFFFFF;
  padding: 10px 15px;
  cursor: pointer;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: bold;
  border: none;
  width: 100%;
  text-align: left;
  margin-top: 1px;
  transition: background-color 0.3s;
}

.collapsible-sub-header > span:not(.toggle-icon) {
  flex: 0 1 auto;
}

.collapsible-sub-header:hover {
  background-color: #4a7db4;
}

/* Section body */
.collapsible-content {
  padding: 15px;
  border-top: 1px solid #D6D6D6;
  display: block;
}

.collapsible-content.collapsed {
  display: none;
}

/* Toggle icon */
.toggle-icon {
  font-size: 18px;
  font-weight: bold;
  transition: transform 0.3s;
}

.toggle-icon.collapsed {
  transform: rotate(-90deg);
}

/* Expand/Collapse All button */
.expand-collapse-all {
  margin: 10px 0 20px 0;
  padding: 8px 15px;
  background-color: #666666;
  color: #FFFFFF;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: bold;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.expand-collapse-all:hover {
  background-color: #555555;
}

/* Preserve existing styling */
.studySettingsTitle h2 {
  margin: 10px 0;
}

.clear {
  clear: both;
}

/* Tab Navigation Styles */
.tab-navigation {
  display: flex;
  border-bottom: 2px solid #D6D6D6;
  margin-bottom: 20px;
  gap: 5px;
}

.tab-button {
  padding: 10px 20px;
  background-color: #f5f5f5;
  border: 1px solid #D6D6D6;
  border-bottom: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  color: #666666;
  transition: background-color 0.3s, color 0.3s;
  border-radius: 5px 5px 0 0;
}

.tab-button:hover {
  background-color: #e8e8e8;
}

.tab-button.active {
  background-color: #FFFFFF;
  color: #044a99;
  border-bottom: 2px solid #FFFFFF;
  margin-bottom: -2px;
}

.tab-content {
  display: none;
  padding: 20px 0;
}

.tab-content.active {
  display: block;
}

/* EventDefs Hierarchical Tree Styles */
.event-tree {
  font-family: Arial, sans-serif;
  font-size: 13px;
}

.event-tree-controls {
  margin-bottom: 15px;
}

.event-expand-collapse-all {
  padding: 6px 12px;
  background-color: #666666;
  color: #FFFFFF;
  border: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: bold;
  border-radius: 3px;
  transition: background-color 0.3s;
}

.event-expand-collapse-all:hover {
  background-color: #555555;
}

.event-main {
  margin-bottom: 20px;
  border: 1px solid #D6D6D6;
  border-radius: 5px;
  overflow: hidden;
}

.event-main-header {
  background-color: #044a99;
  color: #FFFFFF;
  padding: 10px 15px;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background-color 0.3s;
}

.event-main-header:hover {
  background-color: #033a7a;
}

.event-main-header .toggle-icon {
  font-size: 14px;
  transition: transform 0.3s;
}

.event-main-header .toggle-icon.collapsed {
  transform: rotate(-90deg);
}

.event-main-content {
  display: block;
}

.event-main-content.collapsed {
  display: none;
}

.event-main-details {
  padding: 10px 15px;
  background-color: #f9f9f9;
  font-size: 12px;
  color: #666666;
}

.event-main-details span {
  margin-right: 15px;
}

.sub-event {
  border-top: 1px solid #D6D6D6;
  padding: 0;
  background-color: #FFFFFF;
  margin-left: 20px;
  border-left: 3px solid #5a8dc4;
  margin-top: 5px;
  margin-bottom: 5px;
}

.sub-event-header {
  background-color: #5a8dc4;
  color: #FFFFFF;
  padding: 8px 12px 8px 25px;
  font-weight: bold;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background-color 0.3s;
}

.sub-event-header:hover {
  background-color: #4a7db4;
}

.sub-event-header .toggle-icon {
  font-size: 12px;
  transition: transform 0.3s;
}

.sub-event-header .toggle-icon.collapsed {
  transform: rotate(-90deg);
}

.sub-event-content {
  display: block;
  padding: 15px 15px 15px 25px;
}

.sub-event-content.collapsed {
  display: none;
}

.sub-event-details {
  margin-bottom: 10px;
  font-size: 12px;
  color: #666666;
}

.sub-event-details span {
  display: inline-block;
  margin-right: 15px;
  margin-bottom: 5px;
}

.forms-section {
  margin-top: 10px;
}

.forms-section-title {
  font-weight: bold;
  color: #044a99;
  margin-bottom: 5px;
  font-size: 12px;
}

.form-list {
  list-style: none;
  padding-left: 0;
  margin: 5px 0;
}

.form-list li {
  padding: 4px 8px;
  background-color: #f0f0f0;
  margin-bottom: 3px;
  border-radius: 3px;
  font-size: 12px;
}

.form-list.required li {
  background-color: #e8f4f8;
  border-left: 3px solid #044a99;
}

.form-list.optional li {
  background-color: #f8f8e8;
  border-left: 3px solid #ffa500;
}

/* FormDefs Layout Styles */
.formdefs-container {
  display: grid;
  grid-template-columns: 250px 1fr 250px;
  gap: 20px;
  min-height: 400px;
}

.forms-list-panel {
  border: 1px solid #D6D6D6;
  border-radius: 5px;
  padding: 10px;
  background-color: #f9f9f9;
  overflow-y: auto;
  max-height: 600px;
}

.forms-list-panel h3 {
  margin: 0 0 10px 0;
  font-size: 14px;
  color: #044a99;
  border-bottom: 2px solid #D6D6D6;
  padding-bottom: 5px;
}

.form-item {
  padding: 8px 10px;
  background-color: #FFFFFF;
  border: 1px solid #D6D6D6;
  margin-bottom: 5px;
  cursor: pointer;
  border-radius: 3px;
  font-size: 12px;
  transition: background-color 0.2s, border-color 0.2s;
}

.form-item:hover {
  background-color: #e8f4f8;
  border-color: #044a99;
}

.form-item.selected {
  background-color: #044a99;
  color: #FFFFFF;
  border-color: #044a99;
}

.form-details-panel {
  border: 1px solid #D6D6D6;
  border-radius: 5px;
  padding: 20px;
  background-color: #FFFFFF;
  overflow-y: auto;
  max-height: 600px;
}

.form-details-panel h3 {
  margin: 0 0 15px 0;
  font-size: 16px;
  color: #044a99;
  border-bottom: 2px solid #D6D6D6;
  padding-bottom: 10px;
}

.form-detail-row {
  margin-bottom: 12px;
  font-size: 13px;
}

.form-detail-label {
  font-weight: bold;
  color: #666666;
  margin-bottom: 3px;
}

.form-detail-value {
  color: #333333;
  padding-left: 10px;
}

.form-filenames {
  list-style: none;
  padding-left: 10px;
  margin: 5px 0;
}

.form-filenames li {
  padding: 3px 0;
  font-family: monospace;
  font-size: 12px;
}

.form-child-forms {
  list-style: none;
  padding-left: 10px;
  margin: 5px 0;
}

.form-child-forms li {
  padding: 3px 8px;
  background-color: #f0f0f0;
  margin-bottom: 3px;
  border-radius: 3px;
  font-size: 12px;
  display: inline-block;
  margin-right: 5px;
}

.form-elements-panel {
  border: 1px solid #D6D6D6;
  border-radius: 5px;
  padding: 10px;
  background-color: #f9f9f9;
}

.form-elements-panel h3 {
  margin: 0 0 10px 0;
  font-size: 14px;
  color: #666666;
  border-bottom: 2px solid #D6D6D6;
  padding-bottom: 5px;
}

.form-elements-panel p {
  font-size: 12px;
  color: #999999;
  font-style: italic;
}