:root {
	--primary-color: #009C43;
	--primary-bg-color: #ddede4; 
	--secondary-color: #0099F3;
	--tertiary-color: #555555;
	--light-grey-color: #f2f2f2;
	--grey-font-color: #7b7b7b;
	
	--avatar-size: 40px;
	--rounded: 8px;
}

/*#region LOADING IMG */
#loading .loading-indicator {
	background: none !important;
}
/*#endregion */

.x-mask {
   opacity: 0.4 !important;
   background: rgb(0, 0, 0) none repeat scroll 0% 0% !important;
}

.x-window-default {
	border-radius: var(--rounded);
}

.font-grey {
	color: var(--grey-font-color);
}

/* HEADER STYLES */
.app-header-shadow {
   	border: none;
   	-webkit-box-shadow: 1px 1px 1px 1px rgba(85,85,85,0.75);
   	-moz-box-shadow: 1px 1px 1px 1px rgba(85,85,85,0.75);
   	box-shadow: 1px 1px 1px 1px rgba(85,85,85,0.75);
   	z-index: 3;
}

.app-logo {
	background-image: url('../files/logo/pjlogo.svg');
	background-repeat: no-repeat;
	background-size: contain;
	background-position-y: center;
	scale: 0.8;
	margin-left: -10px !important;
}

.ord-logo {
	background-image: url('../files/logo/ordlogo.svg');
	background-repeat: no-repeat;
	background-size: contain;
	background-position-y: center;
	background-origin: content-box;
	scale: 1.0;
	padding: 5%;
}

.plc-logo {
	background-image: url('../files/logo/plclogo.svg');
	background-repeat: no-repeat;
	background-size: contain;
	background-position-y: center;
	background-origin: content-box;
	scale: 1.0;
	padding: 5%;
}

.ppc-logo {
	background-image: url('../files/logo/ppclogo.jpg');
	background-repeat: no-repeat;
	background-size: contain;
	background-position-y: center;
	background-origin: content-box;
	padding: 5%;
}

/* Language */
.language-divider {
	color: var(--secondary-color) !important;
	padding-top: 7px;
	padding-bottom: 7px;	
}
.language-label {
	color: var(--secondary-color) !important;
	padding: 7px;
}
.language-label-active {
	color: #fff !important;
	padding: 7px;
	background: var(--primary-color);
	border-radius: 50%;
}

/* Images */ 
.box-image {
	transition: opacity 0.3s ease-out;
    opacity: 0.7;
	background-repeat: no-repeat !important;
	background-size: cover;	
}

.img-ord {
	background-image: url('../files/panelORD.jpg') !important;
}
.img-ppc {
	background-image: url('../files/panelPPC.jpg') !important;
}
.img-plc {
	background-image: url('../files/PLCLogo.png') !important;
}


/* User Image */

.app-user-image-box {
	width:var(--avatar-size);
	height:var(--avatar-size);
	display:inline-block;
	position:relative;
	outline:0px;
	cursor: pointer;
	margin-right: 5px;
	margin-left: 5px;
}

.app-user-image {
	background-color:transparent;
	background-size:cover;
	background-position: center;
	background-repeat: no-repeat;
	width:var(--avatar-size);
	height:var(--avatar-size);
	display:flex;
	border-radius:50%;
	border:2px solid var(--tertiary-color);
	cursor: pointer;
}

/* User Avatar */
.app-avatar {
	border-radius: 50%;
	height: var(--avatar-size);
	text-align: center;
	width: var(--avatar-size);
	border: 2px solid #555;
	cursor: pointer;
	margin-right: 5px;
	margin-left: 5px;
}

.app-avatar-initials {
	font-size: calc(var(--avatar-size) / 2.5); 
	top: calc(var(--avatar-size) / 4); 	
	line-height: 1;
	position: relative;
	cursor: pointer;
}

.app-user-label {	
	border-radius: 3px;
	padding: 5px;
}

.app-user-label:hover {
	/*box-shadow: 0 1px 5px 0 rgb(32 33 36 / 28%);
	border-bottom: 2px solid var(--primary-color);
	border-left: 2px solid white;
	border-right: 2px solid white;
	border-top: 2px solid white;*/
	color: var(--primary-color);
}

.app-divider-bottom {
   	border-bottom: 1px solid rgba(183,183,183,0.5) !important;
}	
.app-divider-top {
	border-top: 1px solid rgba(183,183,183,0.5) !important;
}
.app-divider-left {
	border-left: 1px solid rgba(183,183,183,0.5) !important;
}

.bg-color-primary {
	background-color: var(--primary-color) !important;
}

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

.bg-color-light-grey {
	background-color: var(--light-grey-color) !important;
}

.bg-color-primary-bg {
	background-color: var(--primary-bg-color) !important;
}

.bg-color-tertiary {
	background-color: var(--tertiary-color) !important;
}

.bg-color-transparent {
	background-color: transparent !important;
}

.bg-color-auth {
	/*background-color: rgba(0, 156, 67, .7);*/
	background-color: var(--light-grey-color);
}

.bg-image-auth {
	background-image: url('../files/auth0-background-1.jpg');
	background-size: cover;
}

.register-box {
	border-radius: 5px !important;
	box-shadow: 0 12px 40px rgba(0,0,0,0.12);
	transition: all 0.3s ease-in-out;
}

.message-box {
	border-radius: 5px !important;
	box-shadow: 0 12px 40px rgba(0,0,0,0.12);
	transition: all 0.3s ease-in-out;
	border: 2px solid #4E5D6C !important;
}

/* BOX PANELS */
/*.auth-box {
  	transition: all 0.1s ease-in-out;
	border-radius: 10px !important;
	border: 2px solid #4E5D6C !important;
	box-shadow: 0 1px 5px 0 rgb(32 33 36 / 28%);
}*/
.box {
  	/* box-shadow: 0 1px 5px 0 rgb(32 33 36 / 28%); */
  	transition: all 0.3s ease-in-out;
	border-radius: 5px;
	opacity: 0.8; 
		
	/* border: 0.5px solid #4E5D6C !important; */
	box-shadow: 0 12px 40px rgba(0,0,0,0.12);
}

.box::after {
  	content: '';
  	z-index: -1;
  	opacity: 0;
	width: 100%;
	height: 100%;
  	/*box-shadow: 0 5px 15px rgba(0,0,0,0.3);*/
	box-shadow: 0 12px 40px rgba(0,0,0,0.12);
  	transition: opacity 0.1s ease-in-out;
	border-radius: 5px !important;
	/* border: 2px solid #4E5D6C !important; */
}

.box:hover {
  	transform: scale(1.02, 1.02);
}
.box:hover::after {
  	opacity: 1;
}

.box:hover .box-image {
	opacity: 1;
}

.box-title {
	font-weight: 500; 
	font-size: 26px;
	color: var(--primary-color);	
}

.box-title-small {
	font-weight: 500; 
	font-size: 16px;
	color: var(--primary-color);	
}

.box-divider {
	background: linear-gradient(to right, var(--primary-color), var(--tertiary-color));
}
/* END BOX PANELS */

.auth-panel {
	border-radius: 15px;
	border: 2px solid black;
}

/* FOOTER STYLES */
.app-color-white {
   color: #fff;
}
.app-h4 {
	font-family: Roboto, sans-serif;
	font-size: 16px;
}
.app-footer-link:hover {
	color: var(--primary-color) !important;
}

.app-footer-link-divider {
   	border-right: 2px solid #fff !important;
}

.app-footer-logo {
	content: url('../files/OneTreePlanted_Logo_White.png') !important;
	background-repeat: no-repeat !important;
	height: 30px;
}

.app-footer-logo-panel:hover .app-footer-logo {
	content: url('../files/OneTreePlanted_Logo_Green.png') !important;
	background-repeat: no-repeat !important;
	height: 30px;	
}

.app-footer-logo-panel:hover .app-footer-logo-link {
	color: var(--primary-color);	
}

.scaleText {
	font-size: 1vw;	
	transition: all 0.3s ease-in-out;
	text-align: center;
	cursor: pointer;
	display: inline-block;
	text-decoration: underline;
}

.scaleText:hover {
	transform: scale(1.02, 1.02);
	color: var(--primary-color);
	
}
.txt-container {
	text-align: center;
}