<style>

.btn2 {
		background-color: none;
		border: none;
		color: white;
		padding: 5px 8px;
		text-align: center;
		text-decoration: none;
		display: inline-block;
		font-size: 12px;
		cursor: pointer; /* Mouse pointer on hover */
}

#add_operator_input2 {
		display: none;
}
/**
.deployment-button {
	width: 25px;
	height: 20px;
	vertical-align: middle;
	position: relative;
}

.deployment-button label {
	display: block;
	width: 100%;
	height: 100%;
	color: black;
	cursor: pointer;
	font-size: 11px;
	background: white;
	padding:5px 0px 0px 0px;
	box-shadow: 0px 1px 3px rgba(89,89,89,0.5);
}

 * Create the checked state
 
.deployment-button input[type=checkbox]:checked + label {
	background: #26ca28;
	vertical-align: middle;
}
*/
.navbar-brand {
	display:block;
	font-size:50%;
	margin-left:50px;
}

.navbar-nav {
	margin-left:60px;
}

body {
	padding-top:70px;
	background: #ffffff !important;
	background-color: #ffffff !important;
}

body.golf-ui,
body.golf-ui .golf-shell,
body.golf-ui .golf-page,
body.golf-ui .container,
body.golf-ui .container-fluid,
body.golf-ui .row,
body.golf-ui #body-row,
body.golf-ui #sidebar-container {
	background: #ffffff !important;
	background-color: #ffffff !important;
}

td a { 
	 display: block; 
}

.key_box_automation {
	width:40px;
	height:20px;
	margin-left: 15px;
	margin-right: 10px;
	margin-top: 5px;
}

.databutton_create_warren9000 {
		background-color: #2B8959;
		border: 0.5px solid #1B5638;
		color: #F9F9F9;
		padding: 7px 2px;
		width: 250px;
		text-align: center;
		text-decoration: none;
		display: inline-block;
		font-size: 15px;
}

.databutton_xs {
		background-color: #2B8959;
		border: 0.5px solid #1B5638;
		color: #F9F9F9;
		padding: 5px 8px;
		text-align: center;
		text-decoration: none;
		display: inline-block;
		font-size: 12px;
		border: 1px solid #cccccc;
}

.databutton_norm {
		background-color: #2B8959;
		border: 0.5px solid #1B5638;
		color: #F9F9F9;
		padding: 5px 8px;
		text-align: center;
		text-decoration: none;
		display: inline-block;
		font-size: 15px;
}

.databutton_hover:hover {
		box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

/* Acordeon styles */
.tab {
	position: relative;
	margin-bottom: 1px;
	width: 100%;
	overflow: hidden;
}
input[class='green']  {
	position: absolute;
	opacity: 0;
	z-index: -1;
}

.green label {
	background: #2B8959;
	border: 0.5px solid #1B5638;
	position: relative;
	display: block;
	color: #F9F9F9;
	padding: 0 0 0 1em;
	font-size: 15px;
	text-decoration: none;
	line-height: 3;
	cursor: pointer;        
}

.nav-tabs > .nav-item > .tab-set {
		background-color: #28a745; 
		color: #fff; 
		opacity: 0.7;
}
.nav-tabs > .nav-item > .tab-unset {
		background-color: #dc3545 ; 
		color: #fff; 
		opacity: 0.7;
}
.nav-tabs > .nav-item > .tab-unset-da {
		background-color: #808080 ; 
		color: #fff; 
		opacity: 0.7;
}      
.nav-tabs > .nav-item > .active {
		background-color: #f8f9fa ; 
		color: #000 ; 
}
.nav-tabs > .nav-item > .tab-set:hover, .nav-tabs > .nav-item > .tab-unset:hover {
		background-color: #f8f9fa ; 
		color: #000 ; 
}

.input_sm {
		width: 100px;
		height: 28px;
		font-size: 10px;
		line-height: 1.4;
		color: #808080;
		background-color: #ffffff;
		background-image: none;
		border: 1px solid #cccccc;
		border-radius: 0;
		text-rendering: auto;
		font: inherit;
	}

.forecast {
		display: block;
		width: 80px;
		height: 30px;
		font-size: 10px;
		line-height: 1.4;
		color: #6f6f6f;
		background-color: #ffffff;
		background-image: none;
		border: 1px solid #cccccc;
		border-radius: 0;
		text-rendering: auto;
		font: inherit;
	}
.forecast_select {
		display: block;
		width: 90%;
		height: 30px;
		font-size: 10px;
		line-height: 1.4;
		color: #6f6f6f;
		background-color: #ffffff;
		background-image: none;
		border: 1px solid #cccccc;
		border-radius: 0;
		text-rendering: auto;
		font: inherit;
	}    
.usergroup_select {
		display: block;
		width: 100%;
		height: 30px;
		font-size: 7px;
		line-height: 1.4;
		color: #6f6f6f;
		background-color: #ffffff;
		background-image: none;
		border: 1px solid #cccccc;
		border-radius: 0;
		text-rendering: auto;
		font: inherit;
	} 

.forecast-nameselect {
		display: block;
		width: 130px;
		height: 30px;
		font-size: 10px;
		line-height: 1.4;
		color: #6f6f6f;
		background-color: #ffffff;
		background-image: none;
		border: 1px solid #cccccc;
		border-radius: 0;
		-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
		box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
		-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
		-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
		transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;  
	}

div.dataTables_wrapper {
				margin-bottom: 3em;
		}
.dataTables_wrapper { font-size: 10px }

.bootstrap-select {
	max-width: 300px;
}
.bootstrap-select .btn {
	background-color: white;
	font-size: 12px;
	margin-bottom: 10px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
.bootstrap-select .dropdown-menu li a {
	padding: 2px;
}

select::-ms-expand {
	/* for IE 11 */
	display: none;
}

.opac_button {
	border: none;
	background-color: rgba(0, 0, 0, 0);
	padding: 0px 0px;
	font-size: 12px;
	cursor: pointer;
	display: inline-block;
}

.databutton_main {
		background-color: #2B8959;
		border: 0.5px solid #1B5638;
		color: #F9F9F9;
		padding: 5px 17px;
		text-align: center;
		text-decoration: none;
		display: inline-block;
		font-size: 12px;
}

.databutton_limitation {
		background-color: #2B8959;
		border: 0.5px solid #1B5638;
		color: #F9F9F9;
		padding: 5px 17px;
		margin-top: 5px;
		text-align: center;
		text-decoration: none;
		display: inline-block;
		font-size: 11px;
}

.databutton_submit {
		background-color: #2B8959;
		border: 0.5px solid #1B5638;
		/*opacity:0.75;*/
		color: #F9F9F9;
		padding: 7px 20px;
		width:200px;
		margin-right:5px;
		text-align: center;
		text-decoration: none;
		display: inline-block;
		font-size: 15px;
}

.databutton_table {
		background-color: #2B8959;
		border: 0.5px solid #1B5638;
		/*opacity:0.75;*/
		color: #F9F9F9;
		padding: 7px 20px;
		text-align: center;
		text-decoration: none;
		display: inline-block;
		font-size: 15px;
}

.databutton_submit_variable {
		background-color: #2B8959;
		border: 0.5px solid #1B5638;
		/*opacity:0.75;*/
		color: #F9F9F9;
		margin-right: 10px;
		padding: 7px 20px;
		width:300px;
		text-align: center;
		text-decoration: none;
		display: inline-block;
		font-size: 15px;
}
/*.databutton_submit:hover {opacity: 1}*/

.databutton_xs {
		background-color: #2B8959;
		border: 0.5px solid #1B5638;
		color: #F9F9F9;
		padding: 5px 8px;
		text-align: center;
		text-decoration: none;
		display: inline-block;
		font-size: 12px;
}

.new_container {
	position: absolute;
	left: 0px;
}

.results-container {
	border: 1px solid;
	border-color:#E0E0E0;
	padding: 10px;
	box-shadow: 3px 7px 13px #E0E0E0;
	background-color: white;
}

.databutton_limitations {
		background-color: #2B8959;
		border: 0.5px solid #1B5638;
		color: #F9F9F9;
		padding: 7px 15px;
		text-align: center;
		text-decoration: none;
		display: inline-block;
		font-size: 12px;
		width: 65px;
}

.databutton_hover:hover {
		box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

 .constituents-box {
		width: 80vw;
		/*overflow: scroll;*/
		max-height:70vh; 
}

 .datatable-box {
		width: 45vw;
		overflow: scroll;
		max-height:70vh; 
}

 .stats-box {
		width: 80vw;
		/*overflow: scroll;*/
		max-height:30vh; 
}

.usergroup_select {
		display: block;
		width: 100%;
		height: 30px;
		font-size: 7px;
		line-height: 1.4;
		color: #6f6f6f;
		background-color: #ffffff;
		background-image: none;
		border: 1px solid #cccccc;
		border-radius: 0;
		text-rendering: auto;
		font: inherit;
	} 

/* Start by setting display:none to make this hidden.
	 Then we position it in relation to the viewport window
	 with position:fixed. Width, height, top and left speak
	 for themselves. Background we set to 80% white with
	 our animation centered, and no-repeating */
.modal2 {
		display:    none;
		position:   fixed;
		z-index:    1000;
		top:        0;
		left:       0;
		height:     100%;
		width:      100%;
		background: rgba( 255, 255, 255, .8 )
								url('https://i.stack.imgur.com/MnyxU.gif') 
							 /* url('https://data.whicdn.com/images/42547075/original.gif') */
								50% 50% 
								no-repeat;
}

.hidden {
	opacity: 0;
}

body.loading .modal2 {
		overflow: hidden;   
}

body.loading .modal2 {
		display: block;
}

.isItLoaded {
	display: none;
}
.loading {
	z-index: 10;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 90vh;
}

.drag_buttons p {
	appearance:button;
	-moz-appearance:button; 
	-webkit-appearance:button;
	display: inline-block;
	padding: 2px 5px;
}

.modal-dialog,

.modal-content {
		/* 80% of window height */
		height: 80%;
}

.modal-body {
		/* 100% = dialog height, 120px = header + footer */
		height: 80%;
		overflow-y: scroll;
}

table.simpletable,
.simpletable th, .simpletable td {
	border: 1px solid grey;
	border-style: ridge;
}


.sticky-offset {
		top: 70px;
}

#body-row {
		margin-left:0;
		margin-right:0;
}
#sidebar-container {
		min-height: 100vh;   
		background-color: #333;
		padding: 0;
}

div.stickynew {
	position: -webkit-sticky;
	position: sticky;
	top: 70px;
	background-color: white;
	padding: 0px 0px 0px 0px;
	z-index: 100;
}

#result {
	border: 1px solid #888;
	background: #f7f7f7;
	padding: 1em;
	margin-bottom: 1em;
}

</style>         
