:root
{ --BodyEdge: 5px;
  --BodyEdges: calc(var(--BodyEdge) * 2);
  --FooterHeight: 34px;
  --SlightBodyInset: 15px;
}


body
{ margin: auto;
  padding-top: 0;
  padding-left: var(--BodyEdge);
  padding-right: var(--BodyEdge);
  min-width: 500px;
  position: relative;
  min-height: 100vh;
}


body.HasEWRFooter
{ padding-bottom: calc(var(--FooterHeight) + 10px); /* matches height of footer + 10px margin between body and footer */
}


footer /* https://www.youtube.com/watch?v=US_3XvufMLU */
{ background-color: #36454F;
  color: white;
  font-size: 10pt;
  padding: 10px;
  position: absolute;
  clear: both;
  left: 0;
  bottom: 0;
  height: var(--FooterHeight);
  width: 100%;
  white-space: nowrap;
}


footer a, footer a:visited, footer a:active
{ text-decoration: none;
  color: #7FBAC7;
}


footer a:hover
{ color: #7FBAC7;
}


/* Don't show links when printing! */
@media print
{
    a[href]::after
    { content: none !important;
    }

    .HorizontalStack
    { margin-left: 1px !important;
    }
}


/* Override the default bootstrap behavior where horizontal description lists
   will truncate terms that are too long to fit in the left column
*/
.dl-horizontal dt
{ white-space: normal;
}


/* Set width on the form input elements since they're 100% wide by default */
input[type="text"],
input[type="number"],
input[type="password"],
input[type="email"],
select
{ max-width: 280px;
  width: 280px;
}


.DatePicker
{ width: 264px;
}


.ui-datepicker
{ font-size: 16px !important;
}


.ui-datepicker-trigger
{ margin-left: calc(-16px - 3px);
}


/* Override the default bootstrap behavior of block-ing all form controls and making them 100% wide */
.form-control
{ display: inline;
  width: 280px;
}


/* Reduces the default bootstrap sizing of form-control edits */
.InlineEdit
{ width: unset;
  height: unset;
  padding: 1px 6px;
}


body.SlightInset, table.SlightInset, [class="SlightInset"]
{ padding-left: var(--SlightBodyInset);
  padding-right: var(--SlightBodyInset);
}


Form
{ margin: 0;
}


img
{ border: none;
}


input[type=checkbox]
{ width: 16px;
  height: 16px;
  position: unset !important; /* defeat the boostrap default of absolute */
}

.checkbox > label > input[type=checkbox]
{ margin-right: 10px;
}


.Error
{ color: red;
}


.NoWrap table tr
{ white-space: nowrap;
}


table
{ border:none;
  border-width: 0;
  border-style: None;
  border-collapse: collapse;
  border-spacing: 0;
  padding: 0;
}


table td, table th
{ padding: 0;
}


.SiteTitle
{ font-size: 14pt;
  font-weight: bold;
  vertical-align: middle;
  margin-left: 15px;
  /* Don't let the title wrap...just let it get chopped off */
  overflow-x: hidden;
  white-space: nowrap;
}


.NavigationPanel
{ margin-right: 10px;
  margin-top: 8px;
  margin-bottom: 8px;
  white-space: nowrap; /* Don't wrap the buttons */
  flex-grow: 1; /* This is the only subpanel that grows */
  text-align: right; /* Keep right */
}


.LoginForm
{ margin-left: 15px;
}


@font-face
{ font-family: 'SecretStuff';
  font-style: normal;
  font-weight: 400;
  src: url(/Images/SecretStuff.ttf);
}


input.Secret
{ font-family: 'SecretStuff';
}


.Listing td, .Listing th
{ padding-left: 10px;
}


.form-horizontal .control-label /*Left align labels in forms*/
{ text-align: left;
}


.col-md-10 /*move edit boxes closer to their labels*/
{ padding-left: 0;
}


.EntryForm label /*override the boostrap bottom margin so that labels line up with the values in the edit boxes*/
{ margin-bottom: 1px;
}


.Lefty
{ padding-left: 0;
}


.FloatLeft
{ float: left;
}


.Righty
{ float: right;
}


.LeftPanel
{ float: left;
  width: calc(50% - 10px) !important;
}


.RightPanel
{ float: right;
  width: calc(50% - 10px) !important;
}


.TopRightyBox
{ position: absolute;
  top: 0;
  right: 0;
  border-color: black;
  border-style: solid;
  border-width: 2px;
  padding: 10px;
}


.PanelButton
{ margin-bottom: 5px;
  height: 20px;
  color: black;
  border: none;
  border-radius: 5px;
  font-size: 14px;
  font-weight: normal;
  line-height: 20px;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 10px;
  padding-right: 10px;
  text-align: center;
  cursor: pointer;
  background-color: white;
}


.Indent
{ padding-left: 15px;
  padding-right: 15px;
}


.PanelHeader
{ border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  box-sizing: border-box;
  color: white !important;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
  line-height: 20px;
  padding-bottom: 3px;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 10px;
  margin-top: 7px;
}


.PanelHeader a
{ background-color: white;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  line-height: 20px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 5px;
}


.Panel
{ border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
  width: 100%;
  padding-top: 5px;
  padding-bottom: 5px;
}


.PanelTable
{ border-collapse: separate;
  border-spacing: 15px 3px;
}


.PanelTable th
{ border-bottom-color: black;
  border-bottom-style: solid;
  border-bottom-width: 1px;
}


.PanelTable th, .PanelTable td
{ color: black;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  box-sizing: border-box;
}


.PanelTable td.ResponsiveEdits2Col
{ width: 40%;
}


.PanelTableLikeDiv
{ color: black;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
}


.NaturalWidth
{ width: auto;
}


.Grid th, .Grid td
{ white-space: nowrap;
}


.Collapsible
{ max-height: 0;
  overflow-y: hidden;
  transition: max-height 0.2s ease-out;
}


.EntryForm tr
{ height: 40px;
}


.HorizontalCheckbox
{ width: 160px;
  padding-right: 30px;
}


.WideEdit
{ max-width: 600px !important;
  width: 600px !important;
}


.CommentEdit
{ max-height: 100px !important;
  height: 100px !important;
  max-width: 100% !important;
  width: 100% !important;
}


.BottomRightFormButton
{ float: right;
  margin-top: -50px;
  margin-right: 15px;
}


.Button.Disabled, .Button:disabled, .Button[disabled], button:disabled, button[disabled], input[type="button"]:disabled
{ background-color: lightgray;
}


th.Sortable
{ cursor: pointer;
}


.Numbers th, .Numbers td
{ text-align: right;
}


.NotNumber
{ text-align: left !important;
}


.ClickableButtonImage
{ cursor: pointer;
  margin-top: -3px;
  margin-right: 2px;
}


.ButtonSpan
{ cursor: pointer;
}


.NoAdjust
{ margin-top: 0;
  margin-right: 0;
}


.ButtonImage
{ margin-top: -3px;
  margin-right: 2px;
}


.GridEdit
{ padding: 0;
  max-width: 90% !important;
  width: 90% !important;
  height: 20px;
}


/* Search Suggest */

.SearchSuggestContainer
{ position: relative;
}


.SearchSuggestResults
{ max-height: 50vh;
  overflow-y: scroll;
  background-color: white;
  position: absolute;
  z-index: 10;
  border: 1px solid navy;
  border-radius: 5px;
  padding-left: 5px;
  padding-right: 5px;
}


.SearchSuggestResults table tr
{ height: auto;
  cursor: pointer;
}


.SearchSuggestResults table tr td:not(:first-child)
{ padding-left: 10px;
}


.SearchSuggestResults table tr:hover, .SearchSuggestResults table tr:focus
{ background-color: ghostwhite;
}

/* end Search Suggest */


.ZeroSizeButton
{ width: 0;
  padding: 0;
  border-width: 0;
  height: 0;
  white-space: nowrap;
  overflow: hidden;
}


.Invisible
{ display: none !important;
}


.ValidationMsgRow
{ min-height: 0;
  height: auto !important;
}


.PlainPageDescription
{ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
}


.HorizontalStack
{ position: relative;
  float: left;
  margin-left: 15px;
}


.FloatContainer
{ width: 100%;
  margin: auto;
}


.LeftStack
{ margin-left: 0 !important;
}


.ClearFloat /*End floating*/
{ clear: both;
}


hr.ClearFloat
{ color: transparent;
  border-style: none;
  margin: 1px 0;
}


/* Popups */
.PopupContainer
{ position: relative;
}


/* The actual popup (appears on top) */
.PopupView
{ display: none;
  width: auto;
  border-radius: 6px;
  padding: 8px;
  position: absolute;
  z-index: 2;
  top: 0px;
  margin-left: 0px;
  /* General properties for all things in the popup */
  background-color: #555;
  color: white;
}


.PopupView table
{ border-collapse: separate;
  border-spacing: 15px 1px;
}


.PopupView table th
{ color: white;
  border-bottom-color: white;
  border-bottom-style: solid;
  border-bottom-width: 1px;
}


.PopupView table td
{ color: white;
}


.PopupView td:first-child
{ margin-left: -15px;
  display: inline-block;
}

/* end Popups */

/* Modal Windows */

.ModalCover /* dims the underlying page */
{ position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9000;
  display: none;
  opacity: 0.6;
  background-color: black;
  overflow: hidden;
}


.ModalDialog
{ position: fixed;
  top: 0;
  opacity: 1;
  display: none;
  z-index: 9001;
  width: 600px;
  padding-bottom: 15px;
  margin-top: 20px;
  margin-left: calc((100vw - 600px) / 2);
  box-shadow: 0 5px 15px rgba(0,0,0,0.5);
  background-color: white;
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 6px;
  outline: 0;
  background-clip: padding-box;
  animation: FlipXA 0.6s;
}


.ModalDialogHeader
{ padding: 15px;
  border-bottom: 1px solid #e5e5e5;
  font-size: 18px;
  font-weight: 500;
}


.ModalBody
{ padding: 15px;
}


.ModalCloseButton
{ float: right;
  font-size: 21px;
  font-weight: bold;
  line-height: 1;
  color: black;
  text-shadow: 0 1px 0 #fff;
  opacity: 0.2;
  margin-top: -10px;
  padding: 0;
  cursor: pointer;
  background: transparent;
}


@keyframes FlipXA
{
    0% { transform: rotateX(90deg); }
  100% { transform: rotateX(0); }
}

/* end Modal Windows */


.Instruction
{ animation: SlideInAndBounce 725ms linear forwards;
  -moz-animation: SlideInAndBounce 725ms linear forwards;
  -webkit-animation: SlideInAndBounce 725ms linear forwards;
  -o-animation: SlideInAndBounce 725ms linear forwards;
}

.AnimatedInstructionHolder
{ width: 100%;
  white-space: nowrap;
  overflow: hidden;
}

@keyframes SlideInAndBounce
{ 0% { margin-left: 25%; }
  37% { margin-left: 0; }
  58% { margin-left: 10%; }
  100% { margin-left: 0; }
}
@-moz-keyframes Pulsate
{ 0% { margin-left: 25%; }
  37% { margin-left: 0; }
  58% { margin-left: 10%; }
  100% { margin-left: 0; }
}
@-webkit-keyframes Pulsate
{ 0% { margin-left: 25%; }
  37% { margin-left: 0; }
  58% { margin-left: 10%; }
  100% { margin-left: 0; }
}
@-o-keyframes Pulsate
{ 0% { margin-left: 25%; }
  37% { margin-left: 0; }
  58% { margin-left: 10%; }
  100% { margin-left: 0; }
}