.greyBackground {
    background-color: #cecece;
}

.lightGreyBackground {
  background-color: #f7f7f7;
}

.blah { 
    margin-top: 40px !important;
}

.greenCheck 
{
  color: #00cc00;
}

.redCheck 
{
  color: #ff0000;
}

#countdown
{
  color: #ff26b7;
  font-weight: bold;
}

.greyCheck
{
  color: #888888;
}

.greyQuestionMark
{
  color: #b3b3b3;
}

/************* Slider control for charts START **************/

.twoHandleSlider_dontuse
{
  border: 0; 
  color: #f6931f; 
  font-weight: bold;
  max-width: 40px;
}

.enabledListItem
{
  background-color: #5cb85c !important;
}

.disabledListItem
{
  background-color: #c4c4c4 !important;
}

.tr5pxBlackBorderTopBottom
{
  border-bottom: 5px solid #000000;
  border-top: 5px solid #000000;
}

.disabled-links {
    pointer-events: none;
}

.pointer-none {
    pointer-events: none;
}

.lightBlue
{
  background-color: #e6f9ff;
}

.verticalChartSlider_dontuse
{
  width: 40px;
  text-align: center;
  padding: 0px;
  height: 88% !important;
  vertical-align: bottom;
  padding-left: 30px;
  padding-bottom: 35px;
}

.knobs
{
  width: 80%;
  margin: auto;
}

.sliderHeight_dontuse
{
  height: 250px;
  min-height: 88%;
  max-height: 88%;
  vertical-align: bottom;
}

#valueRangeTop_dontuse
{
  padding-bottom: 8px;
}

.bolded
{
  font-weight: bold;
}

.unbolded
{
  font-weight: normal;
}

.reportTimestamps
{
  font-weight: bold;
  color: #737373;
}

/************* Slider control for charts END **************/


.table-small
{
  width: 350px;
}

.halfWidth
{
  width: 50%;
}

.oneThirdWidth
{
  width: 33.3%;
}

.twoThirdsWidth
{
  width: 66.66666666%;
}

.table-small-plus
{
  width: 400px;
}

.table-medium
{
  width: 450px;
}

.table-medium-plus
{
  width: 500px;
}

.table-medium-plus-plus
{
  width: 550px;
}

.table-fit {
    width: 500px;
}

#colorPickerDiv
{
  background-color: #0000ff;
}

.table-fit-100-percent
{
  width: 100%;
  min-width: 100%;
  max-width: 100%;
}

#detailsTable tbody tr td:first-child {
    width: 200px;
}

#accessIpTable tbody tr td {
    padding: 1px;
}

.interfaceImage
{
  height: 23px !important;
  margin-left: 15px !important;
}

.rowFieldHorizontalSpacerMedium
{
  margin-right: 40px !important;
  margin-left: 40px !important;
}

.buttonSpacer
{
  margin-left: 10px;
  margin-right: 10px;
}

.sliderPadding
{
  padding-top: 20px !important;
  padding-bottom: 20px !important;
  padding-right: 15px !important;
  padding-left: 15px !important;
}

.rowFieldHorizontalSpacerSmall
{
  margin-right: 10px !important;
  margin-left: 10px !important;
}

.rowFieldVerticalSpacerMedium
{
  margin-top: 5px !important;
  margin-bottom: 5px !important;
}

.smallMargin
{
  margin: 5px !important;
}


.mediumPaddingRight
{
  padding-right: 30px !important;
}

.logFileModalView
{
  max-height: 600px;
  width: 100%;
  overflow: auto;
}

.statusBarStatus
{
  height: 25px;
  position: relative;
  top: 50%;
  transform: translateY(50%);
}

.sitedetailsStatusMargins
{
  margin-left: 5px;
  margin-right: 5px;
}

.hydroDcsLogo
{
  margin-top: 25px !important;
  margin-bottom: 20px !important;
  max-width: 450px !important;
}

.leftPaddingSmall
{
  padding-left: 5px;
}

.leftPaddingMedium
{
  padding-left: 10px;
}

.leftPaddingLarge
{
  padding-left: 15px;
}

.dodBanner
{
  width: 75%;
  margin: auto;
  font-style: italic;
}

input.form-fixer {
    padding-right: 5px;
    padding-left: 5px;
    width: 49px;
}

.loginBox {
  width: 85% !important;
  margin: auto !important;
}

#siteDetailsDiv {
  width: 85%;
  margin: auto;
}

.contactsDiv
{
  width: 85%;
  margin: auto;
}

.width100important
{
  width: 100% !important;
}

.width50important
{
  width: 50% !important;
}

.width25important
{
  width: 25% !important;
}

.width50px
{
  max-width: 50px;
  width: 50px;
}

.width75px
{
  max-width: 75px;
  width: 75px;
}

.width100px
{
  max-width: 100px;
  width: 100px;
}

.width200px
{
  max-width: 200px;
  width: 200px;
}

.width300px
{
  max-width: 300px;
  width: 300px;
}

.rogueReadableReport
{
  font-weight: bold !important;
  width: 85% !important;
}

.linkColorBlack a
{
  color:  #000000;
}

.lpbReportTable {

  margin: auto;
  padding-top: 0 !important;
}

.legendFooter {
  width: 85% !important;
  margin: auto !important;
}

.pageExplanation
{
  width: 85% !important;
  margin: auto !important;
  font-size: 12px;
}

.formattedRdbDisplay {
  min-width: 820px !important;
  width: 55% !important;
  margin-right: auto;
  margin-left: auto;
}

.rdbPreDisplay {
  display: inline-block !important;
  padding-left: 100px !important;
  padding-right: 100px !important;
  padding-top: 25px !important;
  padding-bottom: 25px !important;
}

#auditLogDiv {
  width: 85%;
  margin: auto;
}

.noBottomMargin {
  margin-bottom: 0px !important;
}

.marginBottomSmall {
  margin-bottom: 10px !important;
}

.marginBottomMedium {
  margin-bottom: 20px !important;
}

.marginBottomLarge {
  margin-bottom: 30px !important;
}

.forceRunMenuHealthcheckButton
{
  margin-top: 5px;
  width: fit-content;
}

.serviceModeButton
{
  margin-bottom: 10px;
}

.noMargins
{
  margin: 0px;
}

.noPadding
{
  padding: 0px !important;
}

.smallMargins
{
  margin: 5px;
}

.smallPadding
{
  padding: 5px !important;
}

.minimalPadding
{
  padding: 2px !important;
}

.noBorders {
  border-bottom: 0px !important;
  border-top: 0px !important;
  border-left: 0px !important;
  border-right: 0px !important;
}

.headerMarginTop {
  margin-top: 40px !important;
}

.marginAuto {
  margin: auto;
}

.centerText {
  text-align: center;
}

.rightText {
  float: right;
}

.leftText {
  float: left;
}

.leftTextAlign {
  text-align: left;
}

.absolutePosition {
  position: absolute;
}

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

.stationHeader {
  font-size: 14px;
  /*font-weight: bold;*/
}

.stationFields {
  font-size: 12px;
  /*font-weight: bold;*/
}

.stationField {
  padding: 0.25px !important
}


.width25
{
  width: 25% !important;
}
.width75
{
  width: 75% !important;
}
.width60
{
  width: 60% !important;
}

.invisible {
  display:none;
}

.displayNone
{
  display:none !important;
}

.tooltip-inner {
  max-width: 100%;
  text-align: left;
  /* If max-width does not work, try using width instead */
  /*width: 3350px; */
}

.floatRight
{
  float:right
}

.floatLeft
{
  float:left;
}

.opendcsStartStopForm {
  margin-right: 25px;
  margin-left: 25px;
}

.tutorialModal
{
  width: 75%;
}

.allSitesAndPathsDiv
{
  width: 75%;
}

.modalGraphContainer
{
  width: 75%;
}

.container90_percentWidth
{
  width: 90% !important;
}

.container85_percentWidth
{
  width: 85% !important;
}

.container70_percentWidth
{
  width: 70% !important;
}

.container50_percentWidth
{
  width: 50% !important;
}

.modalGraph
{
  width: 100%;
}

.smallPaddingHorizontal
{
  padding-left: 5px;
  padding-right: 5px;
}

.noVerticalPadding
{
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

.smallVerticalPadding
{
  padding-bottom: 5px !important;
  padding-top: 5px !important;
}

.mediumVerticalPadding
{
  padding-bottom: 10px !important;
  padding-top: 10px !important;
}

.largeVerticalPadding
{
  padding-bottom: 20px !important;
  padding-top: 20px !important;
}
.noHorizontalPadding
{
  padding-right: 0px !important;
  padding-left: 0px !important;
}

.smallHorizontalPadding
{
  padding-right: 5px !important;
  padding-left: 5px !important;
}

.mediumHorizontalPadding
{
  padding-right: 10px !important;
  padding-left: 10px !important;
}

.largeHorizontalPadding
{
  padding-right: 20px !important;
  padding-left: 20px !important;
}

.smallerPaddingHorizontal
{
  padding-left: 9px;
  padding-right: 9px;
}

.fitDiv
{
  max-width: 100%;
  max-height: 100%;
}

.height100
{
  height: 100%;
}

.height90vh
{
  min-height: 90vh;
}

.height50
{
  height: 50%;
}


.halfWidthDiv
{
  width: 50% !important;
  min-width: 50% !important;
  max-width: 50% !important;
  vertical-align: top !important;
}

.maxWidth
{
  width: 100% !important;
  min-width: 100% !important;
}

.modalHeight
{
  height: calc(95%);
}

.modalBodyHeight
{
  max-height: calc(100% - 150px);
  overflow-y: scroll;
}

/*d3js stuff*/
.d3Line {
  fill: none;
  stroke: steelblue;
  stroke-width: 2px;
}

.legend {                                                   /* NEW */
  font-size: 12px;                                          /* NEW */
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.x.axis path {
  display: none;
}

.overlay {
  fill: none;
  pointer-events: all;
}

.focus circle {
  fill: none;
  stroke: steelblue;
}

/* LRGS STATUS HTML PAGE */
.lrgsBgWhite
{
  background-color: white;
}

.lrgsBgBlack
{
  background-color: black;
}

.lrgsTextAlignCenter
{
  text-align: center;
}

.lrgsTextAlignLeft
{
  text-align: left;
}

.lrgsTextAlignRight
{
  text-align: right;
}

.lrgsVerticalAlignTop
{
  vertical-align: top;
}

.lrgsWidth10
{
  width: 10%;
}

.lrgsWidth16
{
  width: 16%;
}

.lrgsWidth20
{
  width: 20%;
}

.lrgsWidth100
{
  width: 100%;
}

.lrgsColor51_255_51
{
  color: rgb(51, 255, 51);
}

.lrgsFontBold
{
  font-weight: bold;
}

.lrgsFontItalic
{
  font-weight: italic;
}

.lrgsBorder0
{
  border: 0px;
}

.lrgsCellSpacing2
{
  border-spacing: 2px;
}

.lrgsCellPadding2
{
  padding: 2px;
}

/* Sandbox Stuff */
.sandbox_blue
{
  background-color: blue;
}

.sandbox_red
{
  background-color: red;
}

.updateMetadataDiv
{
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: 300px !important;
  overflow: auto !important;
}

.marginBottom-0 {margin-bottom:0;}

.dropdown-submenu{position:relative;}
.dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:6px 6px 6px 6px;-moz-border-radius:6px 6px 6px 6px;border-radius:6px 6px 6px 6px;}
.dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;}
.dropdown-submenu:hover>a:after{border-left-color:#555;}
.dropdown-submenu.pull-left{float:none;}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 6px 6px 6px;-moz-border-radius:6px 6px 6px 6px;border-radius:6px 6px 6px 6px;}

.siteGroupDragPanel li {
  margin: 0 5px 5px 5px;
  padding: 5px;
  font-size: 1.2em;
  width: 120px;
  cursor: pointer;
}

.siteGroupDragPanel {
  border: 1px solid #c4c4c4;
  width: 160px;
  min-height: 400px;
  max-height: 400px;
  list-style-type: none;
  margin: 0;
  padding: 5px 0 0 0;
  float: left;
  margin-right: 10px;
  overflow: auto;
}

.siteGroupHeader {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.siteGroupSaveDiv {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.widget-tooltray {
  margin-top:26px;
  display:block;
  height:0;
  width:100%;
  z-index:5 !important;
  background-color: rgb(255,255,255);
  background-color: rgba(0,0,0, 0.45);
  overflow-x: hidden;
  position: absolute;
  transition: 0.5s;
}

.widget-toolfield {
  margin:auto ;
  padding:0;
  background-color: rgba(255,255,255, 0.60);
}

.toolTip-pie {
    position: absolute;
    display: none;
    width: auto;
    height: auto;
    background: none repeat scroll 0 0 white;
    border: 0 none;
    border-radius: 8px 8px 8px 8px;
    box-shadow: -3px 3px 15px #888888;
    color: black;
    font: 12px sans-serif;
    padding: 5px;
    text-align: center;
}

.goesImageViewer #progressBar {
  display: flex;
  justify-content: center;
  align-items: center;
  /*
  height: 600px;
  border: 3px solid green; 
  */
}

.autoDateSlider {
  width: 100%;
  height: 70px;
}

.bgClip-content {
    background-clip: content-box
}

.margin-lr-1px {
    margin-left:1px;
    margin-right:1px;
}

.datetimepicker {
	display: inline-flex;
	align-items: center;
	background-color: #fff;
	border: 1px solid grey;
	border-radius: 8px;

	&:focus-within {
		border-color: teal;
	}

	input {
		font: inherit;
		color: inherit;
		appearance: none;
		outline: none;
		border: 0;
		background-color: transparent;

		&[type=date] {
			width: 10rem;
			padding: .25rem 0 .25rem .5rem;
			border-right-width: 0;
		}

		&[type=time] {
			width: 10rem;
			padding: .25rem .5rem .25rem 0;
			border-left-width: 0;
		}
	}

	span {
		height: 1rem;
		margin-right: .25rem;
		margin-left: .25rem;
		border-right: 1px solid #ddd;
	}
}


.double_range_slider_box {
  position: relative;
  width: 500px;
  height: 200px;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  appearance: slider-vertical;
}

.double_range_slider {
  width: 90%;
  height: 10px;
  position: relative;
  background-color: #dddddd;
  border-radius: 20px;
  appearance: slider-vertical;
}
.range_track {
  height: 100%;
  position: absolute;
  border-radius: 20px;
  background-color: #95d564;
  appearance: slider-vertical;
}

.slider-range {
  position: absolute;
  width: 100%;
  height: 5px;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  top: 50%;
  transform: translateY(-50%);
}
#slider-range .ui-slider-handle {
  height: 25px;
  width: 25px;
  border-radius: 50%;
  border: 3px solid rgba(0, 104, 239, 1);
  background-color: rgba(0, 183, 239, 1);
  pointer-events: auto;
  -webkit-appearance: none;
  cursor: pointer;
}
#slider-range .ui-slider-handle {
  height: 18px;
  width: 18px;
  border-radius: 50%;
  border: 3px solid rgba(0, 104, 239, 1);
  background-color: rgba(0, 183, 239, 1);
  pointer-events: auto;
  -moz-appearance: none;
  cursor: pointer;
}

.slider-minvalue {
  position: absolute;
  padding: 6px 15px;
  background: rgba(0, 104, 239, 0.62);
  border-radius: 1rem;
  color: white;
  bottom: 0;
  transform: translate(0, -100%);
  left: 0;
  font-size: 1rem;
  transition: left 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  will-change: left, transform;
}
.slider-maxvalue {
  position: absolute;
  padding: 6px 15px;
  background: rgba(0, 104, 239, 0.62);
  border-radius: 1rem;
  color: white;
  top: 0;
  transform: translate(0, 100%);
  right: 0;
  font-size: 1rem;
  transition: right 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  will-change: right, transform;
}


@keyframes fadeIn {
  from { opacity: 0; }
}

.animate-flicker-3s {
    animation: fadeIn 3s infinite alternate;
}

@keyframes fadeAlmostIn {
  from { opacity: 0; }
  to { opacity:0.8}
}

.animate-flicker-3s {
    animation: fadeIn 3s infinite alternate;
}
.animate-flicker-faded-3s {
    animation: fadeAlmostIn 3s infinite alternate;
}

.in-target-border {
    border-color: #C1E0FF;
    border-width : 13px;
    border-style :solid;
    border-radius : 10px;
}


@keyframes doubleblink-grey {
    0%     {background-color:white;}
    10.0%  {background-color:rgba(191, 191, 191,1);}
    15.0%     {background-color:white;}
    20.0%  {background-color:rgba(191, 191, 191,1);}
    100.0%  {background-color:white;}
}

.animate-doubleblink-grey {
    animation: doubleblink-grey 3s infinite alternate;
}

@keyframes fadeto-grey {
    0%     {background-color:rgba(235, 235, 235,1);}
    45.0%  {background-color:rgba(191, 191, 191,1);}
    50.0%  {background-color:rgba(191, 191, 191,1);}
    55.0%  {background-color:rgba(191, 191, 191,1);}
    100.0%  {background-color:rgba(248, 248, 248,1);}
}

.animate-fadeto-grey {
    animation: fadeto-grey 3s infinite alternate;
}

.engaging-backdrop {
  background-color: #d4faff;
  border: 1px solid #e0e0e0;
  margin: 3px;
}

.accordion-button.no-accordion-expand::after {
  width: 0px;
}


.white-background {
  background-color: white;
}

/* 
This CSS rule makes the image inside the .slideShowDiv container responsive.
It sets the image's width and height to 100% so it fills the parent,
and uses 'object-fit: contain' to maintain the image's aspect ratio.
This ensures that either the width or height stretches to fit the container
without cropping the image.
*/
.slideShowDiv {
  width: 100%;
  height: 100%;
}

.slideShowDiv img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.nav-disabled {
    pointer-events: none;
    color: #6c757d !important;
    cursor: not-allowed !important;
}

.cursor-not-allowed {
    cursor: not-allowed;
}



.report_summary-box {
  background: #e6f0fa; /* lighter blue */
  border-radius: 8px;
  padding: 20px;
  margin: 20px auto;
  max-width: 400px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  font-family: sans-serif;
  color: #333;
}
.report_summary-title h4 {
  margin: 0 0 8px;
  font-weight: 600;
  font-size: 1.1rem;
  color: #0056b3; /* darker blue for headings */
}
.report_summary-title div {
  font-size: 0.90rem;
  margin-bottom: 12px;
}
.report_summary_sections {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.report_summary_section {
  background: #fff;
  border-radius: 6px;
  padding: 10px;
  border: 1px solid #ccc;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.report_summary_section h4 {
  margin: 0;
  font-size: 0.75rem;
  color: #0056b3;
  border-bottom: 1px solid #ccc;
  padding-bottom: 4px;
}
.report_summary_subsections {
  margin-top: 6px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  text-align: center;
  justify-content: center;
}
.report_summary_subsections span {
  padding: 4px 6px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 0.70rem;
  color: #333;
}


.compact-label {
      font-size: 0.75rem;
    }
.compact-select {
  width: 130px;
}


.btn.btn-outline-primary {
  color:        #337ab7;           /* same as .btn-primary text */
  background:   transparent;       /* transparent fill */
  border:       1px solid #337ab7; /* primary border */
}

.btn.btn-outline-primary:hover,
.btn.btn-outline-primary:focus,
.btn.btn-outline-primary:active,
.btn.btn-outline-primary.active {
  color:        #fff;              /* white text on hover/active */
  background:   #337ab7;           /* filled primary */
  border-color: #2e6da4;           /* darken border on hover */
}

.padding-3px {
    padding:3px;
}

.notification-dropdown-retention {
    font-size: 0.8em;
    padding:5px;
    margin:10px;
    max-width:50%;
    float:right;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.cursorPointer {
  cursor: pointer;
}

.z-index-2 {
    z-index: 2;
}


#refTap{
    position:fixed;
    left:10px;
    top:55px;
    z-index:1031;
    font-size:1.2em;
    padding:.4em .4em;
  }

  .snazzy-links .dropdown-header{
    font-size:.75rem;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:#6c757d;
    padding:.35rem 1rem .15rem;
  }
  .snazzy-links li > a.link-snazzy{
    display:flex;
    align-items:center;
    gap:.5rem;
    padding:.55rem 1rem;
    color:#0d6efd;
    font-weight:500;
    text-decoration:none;
    position:relative;
    transition:background .2s, color .2s;
  }
  body.bs_3 .snazzy-links li > a.link-snazzy::before{
    content:"\e144";               /* glyphicon-link */
      font-family:"Glyphicons Halflings";
      margin-right:.4rem;
      display:inline-block;
      font-size:0.9rem;
  }
  body.bs_5 .snazzy-links li > a.link-snazzy::before{
      content:"\f470";                 /* bi-link-45deg */
      font-family:"bootstrap-icons";
      margin-right:.4rem;
      display:inline-block;
  }

  .snazzy-links li > a.link-snazzy::after{
    content:"";
    position:absolute;
    left:1rem;
    right:1rem;
    bottom:.35rem;
    height:2px;
    background:currentColor;
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .25s;
  }
  .snazzy-links li > a.link-snazzy:hover{
    background:rgba(13,110,253,.08);
    color:#0a58ca;
  }
  .snazzy-links li > a.link-snazzy:hover::after{
    transform:scaleX(1);
  }
  .snazzy-links li.disabled > a{
    color:#adb5bd;
    cursor:not-allowed;
    pointer-events:none;
  }

  .padding-left-90px {
    padding-left: 90px
  }

/* For the System Status Page loading gifs */
.status-icon {
  width: 20px;
  height: 20px;
  object-fit: contain; /* keeps aspect ratio inside box */
}


.snazzy-links .dropdown-header {
  font-size: 12px;      /* slightly smaller */
  font-weight: 600;
  color: #777;          /* muted look */
}

/* Explanatory text block */
.snazzy-links .snazzy-empty-explainer {
  padding: 3px 20px 6px;   /* match dropdown link padding */
  white-space: normal;     /* allow wrapping */
  max-width: 260px;        /* keep it from getting too wide */
}