/* This is customized css needed for pages. Please use bootstrap first */

/* Generic */

.nobuffer {margin:0!important; padding:0!important;}
.top-buffer-5 {margin-top:5px;}
.top-buffer-10 {margin-top:10px;}
.top-buffer-20 {margin-top:20px;}
.top-buffer-50 {margin-top:50px;}
.bottom-buffer-10 {margin-bottom:10px;}
.bottom-buffer-20 {margin-bottom:20px;}
.bottom-buffer-50 {margin-bottom:50px;}
.bottom-buffer-1prcnt {margin-bottom:1%;}
.left-buffer-10 {margin-left:10px;}
.left-buffer-20 {margin-left:20px;}
.right-buffer-10 {margin-right:10px;}
.right-buffer-20 {margin-right:20px;}
.no-line-height {line-height:0px !important;}
.min-height-1 {min-height:1px;}
.min-height-20 {min-height:20px;}
.height-50 {height:50px;}
.height-75 {height:75px;}
.extra-pad-5{padding:5px;}
.extra-pad-15{padding:15px;}
.valigntop {vertical-align:top!important;}
.valignbottom {vertical-align:bottom}
.valignmiddle {vertical-align:middle!important;}
.width-20{width:20%}
.small-text {font-size: 0.75em;}
.pointer {cursor: pointer;}
.move {cursor: move;}
.nowrap {white-space:nowrap;}
.min-width-100 {min-width: 100px;}
.min-width-150 {min-width: 150px;}
.keep-line-breaks {white-space: pre-wrap;}
.glyphicon-child{background: url(../images/glyphicons-child.png) no-repeat; background-size: 75%; height: 17px; width: 15px;}
.button-wrapper .btn:not(.multiselect-clear-filter):not(.multiselect-reset) { margin-bottom:10px;}
.button-wrapper-top-bottom .btn{margin-bottom:5px; margin-top:5px;}
.heading-collapse-panel:before {font-family: "Glyphicons Halflings"; content: "\e114"; float:right; margin-right: -5px}/* Icon when the collapsible content is shown */
.heading-collapse-panel.collapsed:before {content: "\e080";}/* Icon when the collapsible content is hidden */
.not-resizable-textarea {resize: none;}
#company-logo{width:130px} 
.sortingbox {border: 1px solid #999; border-radius: 15px; padding: 10px; background: #fff;}
.text-overflow-ellipsis {text-overflow:ellipsis; max-width:100%; overflow:hidden; display:inline-block;}
.text-overflow-ellipsis-not-inline {text-overflow:ellipsis; max-width:100%; overflow:hidden;}
.text-smaller-60 {font-size: 60%;} /* useful when used in headers (h1, h2, ..) so that you don't get that grayed out subtitle */
.text-smaller-70 {font-size: 70%;} /* useful when used in headers (h1, h2, ..) so that you don't get that grayed out subtitle */
.text-smaller-80 {font-size: 80%;}
.icon-danger{color:red;}
.icon-size18{font-size:18px;}
.inactiveLink {pointer-events: none; cursor: default; color:inherit;}
.background-red {
  background-color:#f46969;
}
.background-light-gray {
  background-color:#D3D3D3;
}
.background-dark-gray {
  background-color:#909090;
}
.background-primary {
  background-color:#3a87ad;
}
.black {
  color:black;
}
.alert-abosulte-30{position: absolute; width: 30%; z-index: 9999; padding: 10px;}
@media (max-width: 767px) {
	.nav-pills>li {float: none;}
	.container-fluid{padding-right:7px; padding-left:7px;}
	.panel-body{padding:8px;}
	.container-fluid>.navbar-collapse, .container-fluid>.navbar-header, .container>.navbar-collapse, .container>.navbar-header {margin-left:0px;}
	.mobile-width-30{width:30%}
	input[type='text'],input[type='number'],select,select:focus,textarea {font-size: 16px!important;} /* this helps with the auto zoom on mobile devices */
}
@media (max-width: 768px) {
	#company-logo{width:115px} 
	.well-less-padding-mobile{padding:7px;}
}

#scrollUp {bottom: 5px; right: 10px; padding: 5px 10px; background-color: #555; color: #fff;}

@media (max-width: 992px) {
	.affix {position: static;}
}

/* used by the jquery highlight plugin */
.highlight {
	background-color: #b3ccff;
}

/* from jquery autocomplete.css - helps with issue of 'No Search Results' displaying when using the tag-it plugin */
.ui-helper-hidden-accessible {border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;}

/* Loader */
.ajax-loader {height: 100px; background-image: url(../images/loader-big.gif); background-repeat: no-repeat; background-position: center;}
.sm-ajax-loader {height: 20px; background-image: url(../images/loader-small.gif); background-repeat: no-repeat; background-position: center;}

/* Login & Forgot Password */
#signin body, #forgot-password body {padding-top: 40px; padding-bottom: 40px; background-color: #eee;}
.form-signin, .form-forgot-password, .small-centered-form {max-width: 330px; padding: 15px; margin: 0 auto;}
.form-signin .form-control, .form-forgot-password .form-control, .small-centered-form .form-control {position: relative; height: auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 10px; font-size: 16px;}
.form-signin input[type="password"], .form-signin input[type="text"], 
.form-forgot-password input[type="text"], .form-forgot-password input[type="email"],
.small-centered-form input[type="text"] {margin-bottom: 10px; border-top-left-radius: 0; border-top-right-radius: 0;}
#amci-logo-login{width:30%} 
#wireless-logo-login{width:90%}

/* Nav Bar */
@media (min-width: 768px) {
	#search-box-header {width:125px;}
}
@media (min-width: 992px) {
	#search-box-header {width:155px;}
}
.navbar-logo {float: left; margin-top: 5px; padding-right:20px;}
@media (max-width: 768px) {
	.navbar-logo img {padding:2px}
}
.page-header{margin-top:75px;} /* overwrite the bootstrap class for the page-header to accommodate the fixed nav bar */
@media (min-width: 768px) and (max-width: 872px) { /* only affect the size when the header jumps to 2 lines */
	.page-header{margin-top:110px;}
}

/* Nav Bar Last Viewed Sites Menu - Submenu - might be used elsewhere in the future */
.dropdown-submenu {position: relative;}
.dropdown-submenu > .dropdown-menu {top: 0; left: 100%; margin-top: -6px; margin-left: -2px;}
.dropdown-submenu:hover > .dropdown-menu {display: block;}
.dropdown-submenu > a:after {content: ""; margin-top: 6px; margin-right: -10px; float: right; border-left: 4px solid; border-top: 4px solid transparent; border-bottom: 4px solid transparent;}

/* Site Tree */
.tree-status-badge{border-radius:10px; padding: 3px 7px; font-size: 12px; font-weight: 700; line-height: 1; min-width: 10px;}
.tree-site-text {display: inline-block; width: 80%;}
.tree-site-status {display: inline-block; max-width: 100%; overflow:hidden; text-overflow:ellipsis;}
.tree-site-h-text {display: inline-block; width: 70%;} /* with hierarchy */
.tree-site-h-status {display: inline-block; max-width: 100%; overflow:hidden; text-overflow:ellipsis;} /* with hierarchy */
.tree-dp-text {display: inline-block; width: 63%;}
.tree-dp-status {display: inline-block; max-width: 100%; overflow:hidden; text-overflow:ellipsis;}
.tree-dp-h-text {display: inline-block; width: 46%;} /* with hierarchy */
.tree-dp-h-status {display: inline-block; max-width: 100%; overflow:hidden; text-overflow:ellipsis;} /* with hierarchy */
.tree-padding {padding: 5px 15px;}
.icon.expand-icon.glyphicon {font-size: 1em;}
@media (max-width: 768px) {
	.dropdown-wrap-text li a {white-space: normal;}
}
@media (max-width: 768px) { /* fixes issue of displaying a modal over large datatables on mobile device, modal stays big and should be small - this makes it small */
	.modal-sm-mobile-fix {width: 300px;}
}
#tree .node-disabled {display: none;} /* used to not display search results that don't match the search term in the site tree on site summary */

/* Dashboard */
@media (min-width: 768px) { /* sm screens */
	.user-function .panel-heading{min-height:62px;} /* screens sm and up will get this added - want this to be added for the manage dashboard on any size bigger than one column */
} 

.mapfunctiondiv {height:400px}
.ui-state-highlight {height: 3em;}
.legend-red-rectangle {display:inline-block; width: 20px; height: 10px; background: #dc3912;}
.legend-yellow-rectangle {display:inline-block; width: 20px; height: 10px; background: #ff9900;}
.legend-green-rectangle {display:inline-block; width: 20px; height: 10px; background: #008000;}
.legend-blue-rectangle {display:inline-block; width: 20px; height: 10px; background: #4286f4;}
.oilDashboardGraphs {border:none; height: 210px}
/* DON'T NEED THESE NEXT 3 BECAUSE CHANGED GRID SYSTEM - keeping in here since we might see the problem again and have to include it in here */
/* .selectize-dropdown-content {max-height:150px!important;} override the default in the selectize css - otherwise grid item because too big and moves from one column to another when select is opened */
/* .selectize-make-position-static .selectize-dropdown {position:static!important;} override the position:absolute - ensures that the drop down stays in the same column */
/* .selectize-input{overflow:visible!important;} for some reason, with the display of google maps, the other selectize elements will black out only in chrome, this fixes that issue - not sure why */
.no-transition {-webkit-transition: none; transition: none;} /* on the collapse/expand of bootstrap, does not show the transition */

/* put a height on the multi-select list */
.multiselect-container {max-height:200px; overflow-y:scroll;}

/* used for the google chart filters */
.charts-combobox .charts-menu {width:auto !important;}

/* Google Charts Category Filter */
.charts-combobox input[type="text"], 			.charts-combobox input[type="date"], 		.charts-combobox input[type="datetime"], 
.charts-combobox input[type="datetime-local"], 	.charts-combobox input[type="email"], 		.charts-combobox input[type="month"], 
.charts-combobox input[type="number"], 			.charts-combobox input[type="password"], 	.charts-combobox input[type="search"], 
.charts-combobox input[type="tel"], 			.charts-combobox input[type="text"], 		.charts-combobox input[type="time"], 
.charts-combobox input[type="url"], 			.charts-combobox input[type="week"], 		.charts-combobox select[multiple], 		.charts-combobox select[size], 
.charts-combobox textarea {margin: 0; max-width: 100%; outline: 0 none; transition: border-color 0.2s ease 0s; vertical-align: middle; box-shadow: none;}
.charts-menu {top: 20px !important;}

/* Manage My Dashboard */
.not-add-msg {margin-top:5px; white-space: normal; display:inline-block;}
/* This is REALLY LAME - google chart has a modal-dialog class and bootstrap does too :( Terrible when you try to use the bootstrap modal with google charts */
/* This is to override all the bad things the google charts modal-dialog class is doing - hopefully doesn't cause issues later */
.modal-dialog {position: relative!important; background:none!important; border:none!important; box-shadow:none!important; padding:0!important;}

pre {  white-space: pre-wrap; } 

/* Datatable child records - expand and collapse */
td.details-control {
    background: url('../images/details-open.png') no-repeat center center;
    cursor: pointer;
}
tr.shown td.details-control {
    background: url('../images/details-close.png') no-repeat center center;
}

/* adjusting default size of large modal window */
@media screen and (min-width: 992px) {
   .modal-lg {
      width: 1000px; 
    }
} 

/* Wizard */
.wizard {margin: 20px auto; background: #fff;}
.wizard .nav-tabs {position: relative; margin: 40px auto; margin-bottom: 0; border-bottom-color: #e0e0e0;}
.wizard > div.wizard-inner {position: relative;}
.connecting-line {height: 2px; background: #e0e0e0; position: absolute; width: 78%; margin: 0 auto; left: 0; right: 0; top: 50%; z-index: 1;}
.connecting-line-3-steps {width: 70%;} /* anything above 3 steps should be fine without this extra class - don't include class for 4,5,6 steps */
.connecting-line-9-steps {width: 90%}
.wizard .nav-tabs > li.active > a, .wizard .nav-tabs > li.active > a:hover, .wizard .nav-tabs > li.active > a:focus {color: #555555; cursor: default; border: 0; border-bottom-color: transparent;}
.wizard .nav-tabs > li.notclickable > a, .wizard .nav-tabs > li.notclickable > a:hover, .wizard .nav-tabs > li.notclickable > a:focus {color: #555555; cursor: default; border: 0; border-bottom-color: transparent;}
span.round-tab {width: 70px; height: 70px; line-height: 70px; display: inline-block; border-radius: 100px; background: #fff; border: 2px solid #e0e0e0; z-index: 2; position: absolute; left: 0; text-align: center; font-size: 25px;}
span.round-tab i{color:#555555;}
.wizard li.active span.round-tab {background: #fff; border: 2px solid #5bc0de;}
.wizard li.active span.round-tab i{color: #5bc0de;}
span.round-tab:hover :not(.notclickable .glyphicon){color: #333; border: 2px solid #333;}
.wizard.wizard-3-steps .nav-tabs > li {width: 33%;}
.wizard.wizard-4-steps .nav-tabs > li {width: 25%;}
.wizard.wizard-5-steps .nav-tabs > li {width: 20%;}
.wizard.wizard-6-steps .nav-tabs > li {width: 16%;}
.wizard.wizard-9-steps .nav-tabs > li {width: 11%;}
.wizard li:after {content: " "; position: absolute; left: 46%; opacity: 0; margin: 0 auto; bottom: 0px; border: 5px solid transparent; border-bottom-color: #5bc0de; transition: 0.1s ease-in-out;}
.wizard :not(.multiselect-container):not(.bootstrap-select .dropdown-menu) > li.active:after {content: " "; position: absolute; left: 46%; opacity: 1; margin: 0 auto; bottom: 0px; border: 10px solid transparent; border-bottom-color: #5bc0de;}
.wizard.wizard-3-steps li.active:after {left: 47%}
.wizard .nav-tabs > li a {width: 70px; height: 70px; margin: 20px auto; border-radius: 100%; padding: 0;}
.wizard .nav-tabs > li a:hover {background: transparent;}
.wizard .tab-pane {position: relative; padding-top: 50px;}
.wizard h3 {margin-top: 0;}

@media( max-width : 585px ) {
    .wizard {width: 95%; height: auto !important;}
    span.round-tab {font-size: 16px; width: 50px; height: 50px; line-height: 50px;}
    .wizard .nav-tabs > li a {width: 50px; height: 50px; line-height: 50px;}
    .wizard li.active:after {content: " "; position: absolute;}
    .wizard.wizard-3-steps li.active:after {left: 39%;}
    .wizard.wizard-4-steps li.active:after {left: 35%;}
    .wizard.wizard-5-steps li.active:after {left: 30%;}
    .wizard.wizard-6-steps li.active:after {left: 25%;}
    .wizard.wizard-6-steps span.round-tab {font-size: 16px; width: 40px; height: 40px; line-height: 40px;}
    .wizard.wizard-6-steps .nav-tabs > li a {width: 40px; height: 40px; line-height: 40px;}
}

/* fixes issue allowing background to scroll for bootstrap on small devices */
@media (max-width: 768px) {
	body.modal-open {
	    position: fixed;
	}
}
/**** Style overrides for BootStrap Carousel ****/
/* Place bootstrap carousel caption at top*/
.carousel-caption {
    top: -20px;
    bottom: auto;
    width: 90%;
    text-align: left;
}

/* Place bootstrap indicators under the image*/
.carousel-indicators {
  bottom:-90px;
  left:35%;
  width:90%;
}
.carousel-inner {
   margin-bottom:90px;
}

/* Style the indicators so they can be seen under image*/
.carousel-indicators li {
  border-color:#999;
  background-color:#ccc;
}

/* Fullcalendar.io CSS additions */
/* Appending an extra print style to the fullcalender.print.css - add line breaks for month print, the contact name was truncated */
@media print {
   .fc-title {
     white-space: pre-line;
   }
}
/* shade days in the calendar in the past light gray */
td.fc-day.fc-past { 
    background-color: #EEEEEE;
}
.fc-view-container * {min-height:min-content;} /* makes sure that when it refreshes event, it doesn't jump/scroll to top */
/* End Fullcalendar.io CSS additions */

/**** Start BootStrap Select Style overrides ****/
/* wraps text in menu & controls width automatically by doing the wrap */
.bootstrap-select .dropdown-menu.inner li a span{white-space: normal;}

/**** End BootStrap Select ****/


/* Add other pages below */
.center-text
{
	text-align: center;
}

/*new css*/
.admin-profile {
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(100vh - 50px);
    margin-top: 50px;
}


.admin-profile {
    flex-direction: column;
}
.admin-profile .form-signin {
    max-width: 600px;
    padding: 0;
}
.admin-profile .form-signin .panel {
    border-radius: 16px;
    box-shadow: 0px 4px 24px rgba(0,0,0,20%);
    padding: 0;
    border: 0 none;
}

.admin-profile .form-signin .panel-body {
    padding: 20px 24px;
}
.admin-profile .form-signin .panel-body h3 {
    margin-top: 12px;
    margin-bottom: 4px;
}
.admin-profile .form-signin .panel-body p{margin-bottom: 16px;}
.admin-profile .form-signin .form-control {
    background: #ffffff;
    box-shadow: none;
    border-radius: 5px;
}
.admin-profile .form-signin .form-control:focus, .admin-profile .form-signin .form-control:hover{
	border-color: #000000;
}
.admin-profile .form-signin .form-control:-webkit-autofill,
.admin-profile .form-signin .form-control:-webkit-autofill:hover, 
.admin-profile .form-signin .form-control:-webkit-autofill:focus, 
.admin-profile .form-signin .form-control:-webkit-autofill:active{
	background: #ffffff;
}
.admin-profile .form-signin .panel-body .btn-primary {
    background: #222222;
    border-color: #222222;
}
.admin-profile .form-signin .panel-body .btn-primary:focus, .admin-profile .form-signin .panel-body .btn-primary:hover{
	background: #444444;
    border-color: #444444;
}

.center-text, .h1, .h2, .h3, h1, h2, h3 {
    margin-top: -12px;
    margin-bottom: 30px;
}

.center-text {
    text-align: center;
}

.ailing-list-form {
    width: 100%;
    padding: 0;
        margin: 0 !important;
}
.mailing-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.mailing-list-header h4.page-header {
    padding: 0;
      margin: 0 !important;
}

 .mailing-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 60px;
    margin-bottom: 1px;
    padding-bottom: 4px;
    border-bottom: 2px solid #ccc;
}

.mailing-list-header h4.page-header {
    border: 0;
}
.navbar-right-menu {
    float: right !important;
}
#mailing-list_wrapper td {
    max-width: 25% !important;
    width: 100%;
}

.button-center-final .btn {
	display: inline-block;
	padding: 8px 200px;
	margin-bottom: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.42857143;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	-ms-touch-action: manipulation;
	touch-action: manipulation;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background-image: none;
	border: 1px solid transparent;
	border-radius: 4px;
}

.button-center-final .btn {
	display: inline-block;
	padding: 10px 220px;
	margin-bottom: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.42857143;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	-ms-touch-action: manipulation;
	touch-action: manipulation;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background-image: none;
	border: 1px solid transparent;
	border-radius: 4px;
}

.button-center-final {
	text-align: center;
}

.button-center-final .btn-primary {
	background: #222222;
	border-color: #222222;
}