/*

  CSS for only FDSForms, not FDSStudy

  Some of this was originally intended for the forms themselves, as opposed
  to the navigation pages.  Should I have a separate CSS for the forms that
  builds upon the stuff that remains here?
  
  Decided to do that on 5/3/2012, so that I can make things work for forms without worrying
  whether it breaks things for non-forms.  There may still be some form-specific stuff in here
  that could be removed, but I think that's just clean-up.

  21.9.20 I had recently made the header/content split cleaner with "body {display: flex; flex-direction: column;}",
  let #header inherit display flex, and "#content {flex: 1; overflow-y: scroll}".  Unfortunately, on iOS before 13,
  every touch/release would cause the sytles to be recalculated and scrolling was very slow.  I'm going back
  to display:block for the body, positioning the header fixed, and giving #content a top-margin of 2.5em
  (same as the header's height).
  */

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /* Makes 100% mean "100% of what's left after padding */

:root {
  --main-color: var(--main-color-custom, #044a99);
  --mid-color: var(--mid-color-custom, white);
  --background-color: var(--background-color-custom, white);
}

html {height:100%;}

body {
    font-size: x-large;
    margin:0;
    padding:0 0.25em;
    width:100%;
    position: absolute;
    -webkit-user-select:none;
    user-select:none;
    height:100%;
    font-family:"Euphemia UCAS";
    border-color: var(--main-color);
    color: var(--main-color);
    background-color: var(--background-color);
}

#header {
  position:fixed;
  width: 100%;
  padding: 0.2em 3em; /* Leave room on sides for arrows */
  border-color: inherit;
  border-bottom-style: solid;
  border-bottom-width: thin;
  z-index:5; /* So content scrolls behind this...1 wasn't enough to keep above slider handle */
  background-color:inherit; /* So we don't see through the header to the content */
  min-height: 2.5em;
}

.navarrow {
	position:fixed; 
  top:0;
  font-size: 65px;
  margin-top: -20px;
  }
  
.navarrow.left {left:0;}
.navarrow.right {right:0;}

#chain {
  font-size:large; 
}

#content {
  margin:2.5em 0 0 0;
  width:100%;
  height:auto;
}

/*
    Except Control dialog pop-up, everything is either in "div.infobox" (index.shtml login page) or #header or #content
*/

hr {border:0; margin:1px; height:1px; background-color: var(--main-color);}

.hidden {display:none;}

/* Avoiding the :not selector since not supported in IE 8; trying to avoid overriding JQueryUI */

.loginTitle { /* Only on login page for FDSForms */
  text-align: center;
}

.infobox button,
.infobox input[type="submit"],
#header button,
#header input[type="submit"],
#content button,
#content input[type="submit"] {
  border-radius: 5px;
  height: 33px;
  font-size:small;
  display:inline-block;
  color:var(--main-color);
  background-color: var(--mid-color);
  border: 2px solid var(--main-color);
  }

  #header button {
    margin: 0 5px 0 0;
  }
  
  .infobox button,
  .infobox input[type="submit"],
  #content button,
  #content input[type="submit"] {
    padding:0 0.5em;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 5px;
    margin-top: 0px;
    }
    
#scrollBar {
  width: 74%;
  margin-left: 13%;
  margin-top: 0;
  height: 5px;
}

#scrollBar .ui-slider-handle {
  height: 14px;
  top: -6px;
}
  
  /* infoBox are the two boxes on the login screen */

.infobox {
    position:relative;
    height:11em;
    border:2px solid;
    padding:10px;
    margin:2px 0;
    border-radius:25px;
    -moz-border-radius:25px; /* Firefox 3.6 and earlier */}

.infobox button,
.infobox input[type="submit"] {
	font-size: x-large;
	height:2em;
}

#loginBox {
  float: left;
}

#statusBox {
  float: right;
  width: 53%;
}

#statusBoxDiv p {
  margin-top:0;
  margin-bottom:0;
}

#cacheFilesBox {
  float: left;
  width: 100%;
}

/* hack for IE 5.5 and 6; other browsers ignore http://reference.sitepoint.com/css/workaroundsfilters#workaroundsfilters__sect_starhtmlselector */

* html body {
  padding:2.5em 0 0 0; 
  }

* html #content {
  height:100%; 
  width:100%; 
  }
  
/* end for IE */

p { clear:left;}

input[type="radio"],input[type="checkbox"] {
  border-style: thin solid;
  border-radius: 8px;
  border-color:inherit;
  background-color:var(--main-color);
  
  height:33px;
  width:33px;
  vertical-align:middle;
  }

input[type="number"],input[type="text"],input[type="date"],input[type="time"],input[type="password"],select,textarea,input[type="tel"] {
  vertical-align:middle;
  font: inherit;
  /* margin-right:2em; */ /* The idea is to leave room for the next field, but if I want the button next to the field... */
}

/* Tables */

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

th, td {
    font-size:x-large;
    text-align:center;
    padding:0.5em 0.2em;
}

 table {
    border-collapse:collapse;
    width: 100%; /* Why was this 99%? */
}

/* Make rows highlight when hovered over */

.clickable tbody tr:hover {
    background-color: #d9e4f0;
}

/*
 * Styling for JavaToolbox tables.js
 */

th.table-sortable {
  background-position:10% center;
  background-repeat:no-repeat;
  background-size:1em;
}

th.table-sortable { background-image:none; padding-left:16px; }
th.table-sorted-asc { background-image:url("../images/NavArrowDown.png"); }
th.table-sorted-desc { background-image:url("../images/NavArrowUp.png"); }

/*
 * Tweaks to jquery-ui based on http://keith-wood.name/uiTabs.html.  Changed to:
 *
 * - Use classes instead of ids (e.g. .tabs-nohdr instead of #tabs-nohdr)
 * - For vertical tabs, tweaked sizes
 * - Remove background and border from panel
 */

.tabs-nohdr { 
    padding: 0px; 
    background: none; 
    border-width: 0px; 
} 
.tabs-nohdr .ui-tabs-nav { 
    padding-left: 0px; 
    background: transparent; 
    border-width: 0px 0px 1px 0px; 
    -moz-border-radius: 0px; 
    -webkit-border-radius: 0px; 
    border-radius: 0px; 
} 
.tabs-nohdr .ui-tabs-panel { 
    /*background: #f5f3e5 url(http://code.jquery.com/ui/1.8.23/themes/south-street/images/ui-bg_highlight-hard_100_f5f3e5_1x100.png) repeat-x scroll 50% top;*/ 
    border-width: 0px 1px 1px 1px;
    padding: 0;
}

.tabs-left {
  position: relative;
  padding-left: 6.5em; /* This is hardcoded as width of .ui-tabs-nav plus 0.5 em....ugly*/
}
.tabs-left .ui-tabs-nav { /* This overrides the position and padding above? */
  position: absolute;
  left: 0.25em;
  top: 0.25em;
  bottom: 0.25em;
  width: 6em;
  padding: 0.2em 0 0.2em 0.2em;
}
.tabs-left .ui-tabs-nav li {
  right: 1px;
  width: 100%;
  border-right: none;
  border-bottom-width: 1px !important;
  -moz-border-radius: 4px 0px 0px 4px;
  -webkit-border-radius: 4px 0px 0px 4px;
  border-radius: 4px 0px 0px 4px;
  overflow: hidden;
}
.tabs-left .ui-tabs-nav li.ui-tabs-selected,
.tabs-left .ui-tabs-nav li.ui-state-active {
  border-right: 1px solid transparent;
}
.tabs-left .ui-tabs-nav li a {
  float: right;
  width: 100%;
  text-align: right;
}

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

/* Was making the panel and tab very tall
.tabs-left > div {
  height: 35em;
}
*/

/*!
* jquery.fixedHeaderTable. The jQuery fixedHeaderTable plugin
*
* Copyright (c) 2011 Mark Malek
* http://fixedheadertable.com
*
* Licensed under MIT
* http://www.opensource.org/licenses/mit-license.php
* 
* http://docs.jquery.com/Plugins/Authoring
* jQuery authoring guidelines
*
* Launch  : October 2009
* Version : 1.3
* Released: May 9th, 2011
*
* 
* all CSS sizing (width,height) is done in pixels (px)
*/

/* @group Reset */

.fht-table,
.fht-table thead,
.fht-table tfoot,
.fht-table tbody,
.fht-table tr,
.fht-table th,
.fht-table td {
  /* position */
    margin: 0;
    
    /* size */
  padding: 0;

  /* text */
  font-size: 100%;
  font: inherit;
  vertical-align: top;
  }

.fht-table {
  /* appearance */
    border-collapse: collapse;
    border-spacing: 0;
  }

/* @end */

/* @group Content */

.fht-table-wrapper,
.fht-table-wrapper .fht-thead,
.fht-table-wrapper .fht-tfoot,
.fht-table-wrapper .fht-fixed-column .fht-tbody,
.fht-table-wrapper .fht-fixed-body .fht-tbody,
.fht-table-wrapper .fht-tbody {
  /* appearance */
  overflow: hidden;
  
  /* position */
  position: relative;
  }

  .fht-table-wrapper .fht-fixed-body .fht-tbody,
  .fht-table-wrapper .fht-tbody {
    /* appearance */
      overflow: auto;
    }

    .fht-table-wrapper .fht-table .fht-cell {
      /* appearance */
      overflow: hidden;
      
      /* size */
        height: 1px;
      }
  
  .fht-table-wrapper .fht-fixed-column,
  .fht-table-wrapper .fht-fixed-body {
      /* position */
      top: 0;
      left: 0;
      position: absolute;
      }
      
  .fht-table-wrapper .fht-fixed-column {
      /* position */
      z-index: 1;
      }

  /* Online/Offline Status Bubble */
  #onlineStatusBubble {
    position: fixed;
    top: 8px;
    right: 18px;
    z-index: 9999;
    min-width: 80px;
    padding: 2px 8px;
    border-radius: 16px;
    font-weight: bold;
    color: #fff;
    background: #4caf50;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    transition: background 0.3s;
    text-align: center;
    pointer-events: none;
  }
  #onlineStatusBubble.offline {
    background: #e53935;
  }