.alterSiteBackdrop {
	z-index:5004 !important;
}

.alterSiteModal {
	z-index:5005 !important;
}

/* 
Newer versions of Bootstrap fix the issue of the backdrop not being visible.  
This was the temp fix the BS team had in place on their github page
*/
.modal-backdrop {
	bottom: 0;
}
/* 
class='modal-@@' is created by angular with @@ being given in the size
This is how modal-lg and modal-90 should have been made, primal is what I'm using 
Bootstrap's left/right margins on modal-dialog are auto, but the top and bottom are hard set at 30px
60px is to removed the 30px from top and bottom so the modal fills the screen nicely
94% is to fill the page to the width
*/
.modal-dialog.modal-primal {
	width: 94%;
	height: 93vh;
}
/* The modal content should be 100% of the dialog */
.modal-primal .modal-content {
	/* Use this if you want the modal to stay a fixed size */
	max-height: 100%;
}
/* -------------------------------------------------- */
/* BODY */
#alterSiteAppContainer .modal-body {
	/* Use this if you want the modal to stay a fixed size */
	height: calc(var(--availableHeight) - 208px);
	overflow-y: auto;
	padding-bottom: 0px;
}

#stepFormAppContainer .modal-body {
	/* Use this if you want the modal to stay a fixed size */
	height: calc(var(--availableHeight) - 95px);
	overflow-y: auto;
	padding-bottom: 0px;
}
/* -------------------------------------------------- */
/* CONTAINED DIV */
/* These seem to be here just to be sure that these classes are not applied even if they are used on small screens */
#alterSiteAppContainer .modal-div-scroller {
	max-height: none;
}

#alterSiteAppContainer .modal-div-scroller-left {
	max-height: none;
}

#alterSiteAppContainer .modal-div-scroller-form {
	max-height: none;
}

#alterSiteAppContainer .modal-div-scroller-form-missing {
	max-height: none;
}

#alterSiteAppContainer .modal-div-scroller-form-missing-open {
	max-height: none;
}

#alterSiteAppContainer .modal-div-scroller-form-multiple {
	max-height: none;
}

#alterSiteAppContainer .modal-div-scroller-form-multiple-open {
	max-height: none;
}

/* Screens 992+= (this is the BS col-med pixel value) should scroll, anything narrower, and these divs should NOT */
@media screen and (min-width:992px){
	#alterSiteAppContainer .modal-div-scroller {
		overflow-y: auto;
		max-height: calc(var(--availableHeight) - 222px);
	}

	#alterSiteAppContainer .modal-div-scroller-rules {
		overflow-y: auto;
		max-height: calc(var(--availableHeight) - 271px);
	}

	#alterSiteAppContainer .modal-div-scroller-left-add {
		overflow-y: auto;
		max-height: calc(var(--availableHeight) - 297px);
	}

	#alterSiteAppContainer .modal-div-scroller-left-edit {
		overflow-y: auto;
		max-height: calc(var(--availableHeight) - 222px);
	}

	#alterSiteAppContainer .modal-div-scroller-form {
		overflow-y: auto;
		max-height: calc((var(--availableHeight)*.93) - 267px);
	}

	#alterSiteAppContainer .modal-div-scroller-form-rules {
		overflow-y: auto;
		max-height: calc((var(--availableHeight)*.93) - 279px);
	}

	#alterSiteAppContainer .modal-div-scroller-form-multiple {
		overflow-y: auto;
		max-height: calc((var(--availableHeight)*.78) - 197px);
	}

	#alterSiteAppContainer .modal-div-scroller-form-multiple-open {
		overflow-y: auto;
		max-height: calc((var(--availableHeight)*.70) - 182px);
	}

	#alterSiteAppContainer .modal-div-scroller-form-multiple-open-rules {
		overflow-y: auto;
		max-height: calc((var(--availableHeight)*.70) - 183px);
	}

	#alterSiteAppContainer .modal-div-scroller-form-missing {
		overflow-y: auto;
		max-height: calc((var(--availableHeight)*.80) - 97px);
	}

	#alterSiteAppContainer .modal-div-scroller-form-missing-rules {
		overflow-y: auto;
		max-height: calc((var(--availableHeight)*.80) - 142px);
	}

	#alterSiteAppContainer .modal-div-scroller-form-missing-open {
		overflow-y: auto;
		max-height: calc((var(--availableHeight)*.75) - 107px);
	}

	#alterSiteAppContainer .modal-div-scroller-form-missing-open-rules {
		overflow-y: auto;
		max-height: calc((var(--availableHeight)*.75) - 156px);
	}

    #stepFormAppContainer .modal-div-scroller {
		overflow-y: auto;
		max-height: calc(var(--availableHeight) - 112px);
	}
}

/* -------------------------------------------------- */
/* 
	This was added to "undo" a css rule that that exists in new-styles.css and overrides a bootstrap rule
	This is what is in new-styles
	.modal .form-group{
		margin-bottom: 0;	
	}
	The margin-bottom 0 for '.modal .form-group{' designated above
	Bootstrap's original values is 15px.  This allows form groups to be spaced without using <br>s
	When the above rule is removed from new-styles.css then so can this, and we can all use the std Bootstrap value
	Looking at some of the other form-group items, it looks like the margin-bottom was done to keep the 
	items closer together
 */
 .modal #alterSiteAppContainer .form-group{
	margin-bottom: 15px;
}
/*
	This was added to "undo" a css rule that that exists in new-styles.css and overrides a bootstrap rule
	This is what is in new-styles
	.panel{
		overflow: auto;
	...
	I don't know why this was originally added, but could have been a separate class to keep the BS classes pure
	Overflow: auto makes it so dropdown boxes for selects appear underneath the container div which looks weird
*/
#alterSiteAppContainer .panel {
	overflow: visible;
}
.showCursorPointer {
	cursor:pointer;
}
/* Gives the map container a height */
.siteMapContainer{
	height: 275px;
	border: 2px solid black;
}
/* This changes the heading */
.headerNoPad .panel-heading {
	padding: 0px;
}
/* This allows the div within the header to be fully clickable to open/close the accordion */
.headerYesPad {
	padding: 10px;
}
/* This turns the underline and color change off of links within accordion-toggle */
.linkNoUnderline a.accordion-toggle {
	text-decoration: none;
	color: inherit;
}
/* 34px is what bs form-control sets all the other elements to */
#alterSiteAppContainer textarea.form-control {
	height:34px;
}
#stepFormAppContainer textarea.form-control {
	height:34px;
}
.drgTransferValuesPanel .panel-body {
	background-color: white
}
/* 
	The 5px for each are arbitrary to make the label look nicer
	Width is set to make the label line up with the form class div
*/
label.transferValueLabel {
	border-radius: 5px;
	width: 100%;
	padding-left: 5px
}

/*
	Styling to help with the rules dropdown when adding/editing a site.
	Full width of dropdown
	It will display over the tabs but it is short enough that you can see there are more entries to choose but don't
	have to extend any tabs to do so.
*/
.rules-menu-height {
	max-height: 20vh; 
	overflow-y: auto;
	width:100%;
}

.agreement-document {
	resize: none;
	width: 100%;
	height: 400px;
}