/*
All Emoncms code is released under the GNU Affero General Public License.
See COPYRIGHT.txt and LICENSE.txt.

---------------------------------------------------------------------
Emoncms - open source energy visualisation
Part of the OpenEnergyMonitor project:
http://openenergymonitor.org

*/
html, body {
	height: 100%;
}

.no-hover:hover {
	text-decoration: none;
}

.login-logo {
	max-height: 165px;
}

.hover-blue:hover {
	background-color: rgba(0, 123, 255, 0.05);
}

.bg-dark {
	background-color: rgb(92, 114, 145) !important;
}

.numberCircle {
	width: 10px;
	line-height: 10px;
	border-radius: 50%;
	text-align: center;
	font-size: 10px;
	border: 1px solid #e48803;
	background-color: #e48803;
	color: rgba(0, 0, 0, 255);
	position:relative;
	top: -12px;
	left: -2px;
	display: inline-block;
}

a:active, a:focus, .viewuser:active, .viewuser:focus {
	outline: 0;
	border: none;
	-moz-outline-style: none
}

.color-green-check, .color-green {color: #22b14c;}
.color-red-uncheck, .color-red {color: #d60a01;}
.color-grey, .color-gray {color: grey;}
.color-yellow {color: #f6c103;}
.color-orange {color: #e48803;}
.visibility-hidden {visibility: hidden;}
.display-none {display: none;}
.bold {font-weight: bold;}

.body-login {
	background-color: #ffffff;
}

#push, #footer {
	height: 30px;
}

#footer {
	background-color: #f5f5f5;
	text-align: center;
	font-size: 13px;
	font-weight: bold;
	padding-top:10px;
}

#footer a {
	color: #77b4d9;
	text-decoration: none;
}

#footer span {
	color:#999;
}

#submenu {
	width:100%;
	background-color:#ddd;
	height:27px;
}

#topspacer {
	padding-top: 70px;
}

div#account {
	width:250px;
}

.account-item {
	margin-bottom:10px;
}

input[type=text][class=variable-name-edit] {
	margin-bottom:0px;
}

@media (min-width: 979px) {
	.timerange-width {
		width: 300px !important;
	}
}

@media (min-width: 768px) and (max-width: 979px) {
	.timerange-width {
		width: 250px !important;
	}
}

.info input[type=checkbox]{
	width: auto !important;
}

/* @media (min-width: 768px) and (max-width: 979px) {
	#topspacer {
		margin-top:-20px;
		padding-top: 0px;
	}
} */

/* Lastly, apply responsive CSS fixes as necessary */
/* @media (max-width: 767px) {
	#submenu, #footer {
		margin-left: -20px;
		margin-right: -20px;
		padding-left: 20px;
		padding-right: 20px;
	}
	#topspacer {
		margin-top:-20px;
		padding-top: 0px;
	}
} */

.cursor-pointer {
	cursor: pointer;
}

/* Same aspect as bootstrap links <a href="..."></a> */
.link {
	color: #007bff;
	text-decoration: none;
}

#main{
	overflow-y: hidden;
}

.link:hover, .link:focus {
	cursor: pointer;
	color: #005580;
	text-decoration: underline;
}

.link:hover, .link:active, .blacklink:hover, .blacklink:active {
	outline: 0;
}

.blacklink {
	color: #555;
	text-decoration: none;
}

.blacklink:hover, .blacklink:focus {
	cursor: pointer;
	color: #000;
	text-decoration: none;
}

/* .menu-text {
	display: inherit !important;
} */

.menu-description {
	display: none !important;
	margin-left: 10px;
}

.menu-dashboard,.menu-left,.menu-extra,.menu-setup,.menu-right {
	display: inherit !important;
}

.scrollable-menu {
	height: auto;
	max-height: 250px;
	overflow-y: auto;
}

.ajax-loader {
	z-index: 1000;
	position: absolute;
	top: 0; bottom:0; left: 0; right:0;
	margin: auto;
	background: rgba(255, 255, 255, .8)
		url(../images/ajax-loader.gif)
		center
		no-repeat;
}

.simple-loader {
	z-index: 1000;
	width: 100%;
	height: 32px;
	background: rgba(255, 255, 255, .8)
		url(../images/ajax-loader.gif)
		no-repeat
		center;
}

.alert-center {
	margin: 10px auto;
	text-align: center;
}

.width40 {
	width: 40%;
}

.icon-question-sign{
	cursor: help;
}

.exponent {position: relative; top: -0.3rem;}

.question-underline{
	text-decoration-style: dashed;
	text-decoration-line: underline;
	cursor: help;
}

.table-borderless > tbody > tr > td,
.table-borderless > tbody > tr > th,
.table-borderless > tfoot > tr > td,
.table-borderless > tfoot > tr > th,
.table-borderless > thead > tr > td,
.table-borderless > thead > tr > th {
	border: none;
}

.table-stats > thead:first-child > tr:first-child > th:first-child {
	position: absolute;
	display: block;
	background-color: white;
	width: 170px;
}

.table-stats > tbody > tr > td:first-child {
	position: absolute;
	display: inline-block;
	background-color: white;
	width: 170px;
}

.table-stats > thead:first-child > tr:first-child > th:nth-child(2) {
	padding-left: 180px !important;
}

.table-stats > tbody > tr > td:nth-child(2) {
	padding-left: 180px !important;
}

#bottom-spacer-sidebar, #bottom-spacer-page-content{height: 1.5rem;}

/* Modify bootstrap & dashboard default values */
#myTab a.nav-link{color: #666 !important;}
#myTab a:hover.nav-link, #myTab a.nav-link.active{color: #000 !important;}
.bd-sidebar {background: #f5f5f5 !important;}
.navbar-brand{
	background-color: transparent !important;
	box-shadow: inherit !important;
}

.navbar-dark .navbar-nav .nav-link {color: rgba(255,255,255,.85);}
.navbar-dark .navbar-nav .nav-link:hover {color: rgba(255,255,255,255);}

/*
* 30/04/2019 : jmch@andee.fr
* Bootstrap Vertical Tab support
*/
.nav-tabs--vertical {
	border-bottom: none;
	border-right: 1px solid #ddd;
	display: flex;
	flex-flow: column nowrap;
}
.nav-tabs--left {
	margin: 0 15px;
}
.nav-tabs--left .nav-item + .nav-item {
	margin-top: .25rem;
}
.nav-tabs--left .nav-link {
	transition: border-color .125s ease-in;
	white-space: nowrap;
}
.nav-tabs--left .nav-link:hover {
	background-color: #f7f7f7;
	border-color: transparent;
}
.nav-tabs--left .nav-link.active {
	border-bottom-color: #ddd;
	border-right-color: #fff;
	border-bottom-left-radius: 0.25rem;
	border-top-right-radius: 0;
	margin-right: -1px;
}
.nav-tabs--left .nav-link.active:hover {
	background-color: #fff;
	border-color: #0275d8 #fff #0275d8 #0275d8;
}

/*
* 30/04/2019 : jmch@andee.fr
* Bootstrap dropdown srolling support
*/
.dropdown-menu.dropdown-scrollable-menu {
	height: auto;
	max-height: 200px;
	overflow-x: hidden;
}

/* Dropdown menu background color*/
/* .navbar-nav > li.bg-dark > .dropdown-menu {background-color: #0069d9 !important;} */
.navbar-nav > li.bg-dark > .dropdown-menu { background-color: inherit; }
.navbar-nav > li.bg-dark > .dropdown-menu .dropdown-item {color: rgba(255,255,255,.90);}
.navbar-nav > li.bg-dark > .dropdown-menu .dropdown-item:hover, .navbar-nav > li.bg-dark > .dropdown-menu .dropdown-item.active:hover {color: rgba(255,255,255,255);background-color: #395995;}
.navbar-nav > li.bg-dark > .dropdown-menu .dropdown-item.active {color: rgba(255,255,255,255);background-color: #395995 !important;font-weight:bold;}

.block {display: block;}
.inline-block {display: inline-block;}
/* TO CHECK */
[disabled="disabled"], .inactive {cursor: default !important;}
#localheading{
	margin-top: 8px;
	margin-left: 8px;
}
.tagbody{
	font-size: 12px;
}
#padding-all{
	padding: 12px;
}

.paraia-multi-select > .selected-items > button {position: static !important;}

.legal-notice-content p {margin: 2px 0px;}
.legal-notice-content h3 {
	padding-top: 8px;
}

.logreply-bound{
	max-height: 300px;
	max-width: 1818px;
}

.logreply{
	overflow: auto;
}

#main-content{
	/* margin: 5px; */
	padding: 5px;
	margin-bottom: 40px;
}

.ls_result_main table tr td{
	padding: 10px;
	line-height: 22px;
}

.group-fields .input-group-text {
	width: 150px;
}

/* --------------- */
/* Form validation */
.switch {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 34px;
	transform: translate(-12px) scale(0.6);
}

.switch input { 
	opacity: 0;
	width: 0;
	height: 0;
}

.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s;
}

.slider:before {
	position: absolute;
	content: "";
	height: 26px;
	width: 26px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
}

input:checked + .slider {
	background-color: #2196F3;
}

input:focus + .slider {
	box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
	-webkit-transform: translateX(26px);
	-ms-transform: translateX(26px);
	transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
	border-radius: 34px;
}

.slider.round:before {
	border-radius: 50%;
}

form.was-validated .form-check-input:valid ~ .form-check-label{
	color: #495057;
}
.custom-select.is-valid, .form-control.is-valid, .was-validated .custom-select:valid, .was-validated .form-control:valid {
	border-color: rgb(206, 212, 218);
}

form.was-validated .form-check-input:is-invalid ~ .form-check-label{
	color: #dc3545 !important;
}
.custom-select.is-invalid, .form-control.is-invalid {
	border-color: #dc3545 !important;
}

.no-border {
	border: 0;
	box-shadow: none; /* You may want to include this as bootstrap applies these styles too */
}

.no-padding {
	padding: 0;
}

.no-bg {
	background: none;
}

#search-criteria button {
	border-radius: 1.8em;
}

.btn-xs {
	padding: .2rem .4rem;
	font-size: .8rem;
	line-height: 1.2;
}

#search-criteria button{
	margin: 0 .3em;
}

:not(i).viewuser{
	color: #007bff;
	text-decoration: none;
	cursor: pointer;
}

a > i.oi {
	color: #000000;
}

:not(i).viewuser:hover{
	color: #0056b3;
	text-decoration: underline;
}

.vertical-align {
	height: 100%;
	margin-top: auto;
	margin-bottom: auto;
}

#energy-data {
	position: -webkit-sticky; position: sticky;
	top: 48px;
	height: 100vh;
	overflow-x: hidden; overflow-y: auto;
}

#energy-data h3 {
	text-align: center;
	color: #ed6d24;
}

#energy-data h4 {
	text-align: center;
	color: #41b2e6;
	font-size: 14px;
	font-weight: bold;
}

#energy-data .row {margin-top: 1em;}
#energy-data .figures {font-weight: bold;}

#home-container .card:not(form) {
	 width: 22rem;
}

@media (max-width: 400px) {
	#home-container .card:not(form) {
		 width: 16rem;
	}
}

@media (min-width: 1400px) {
	#home-container .card:not(form) {
		 width: 26rem;
	}
}

@media (min-width: 1900px) {
	#home-container .card:not(form) {
		 width: 32rem;
	}
}

/* Extends Bootstrap w-25, w-50, w-75 and w-100 */
.w-10 {width: 10% !important;}
.w-20 {width: 20% !important;}
.w-30 {width: 30% !important;}
.w-40 {width: 40% !important;}
.w-60 {width: 60% !important;}
.w-70 {width: 70% !important;}
.w-80 {width: 80% !important;}
.w-90 {width: 90% !important;}

/* Bootstrap fix for several modals */
.modal { overflow: auto !important; }
.large {
	font-size: 115%;
}
#data-type-feed-list{
	margin: 15px;
}

#main-dashboard-container{
	padding: 8px;
}

.custom-control-label:before{
	background-color:#ffffff;
	box-shadow: 0 0 0 1px #fff, 0 0 0 0.15rem rgba(0, 0, 0, 0.15);
}

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

/**
 **   Trick for dropdown menu into responsive tables to show properly
 **/
@media (max-width: 767px) {
    .table-responsive .dropdown-menu {
        position: static !important;
    }
}
@media (min-width: 768px) {
    .table-responsive {
        overflow: visible;
    }
}

/* *** Glyph Icons override *** */
.glyph-icon svg {
	width: 16px;
	height: 16px;
}
/* --- Glyph Icons override --- */