/*
*		    ________      .___   
*	__  _  _\_____  \   __| _/
*	\ \/ \/ / _(__  <  / __ |
*	 \     / /       \/ /_/ |
*	  \/\_/ /______  /\____ |
*	               \/      \/
*
*	@author			Jacques Baars <j@w3d.co.za>
*
*	@notice			This is the property of W3Designs, W3Development, W3D,
*					it is illegal to use this source code without the required permission,
*					contact j@w3d.co.za for further advice or permissions.
*
*	@license		Copyright (c) 2016 W3Designs (PTY) Ltd. (http://www.w3d.co.za)
*	
*	@conception		<05 August 2015>
*	@updated		<31 August 2023>
*	@version		<9.08.31>
*/

/* ------------- CORE:ROOT ------------- */

:root{
	--color: #222;
	--color2: #fff;
	--color3: #444;
	
	--bgColor: #f67a00;
	--bgColor2: #DD6D00;
	
	--mmBg: #eaecf0;
	--mmRedBg: #c30000;
	--mmRedBg2: #b30000;
	--mmBlueBg: #144e8c;
	--mmBlueBg2: #213368;
	--mmGreenBg: #579B3F;
	--mmGreenBg2: #387922;
	--mmPurpleBg: #69426F;
	--mmPurpleBg2: #522A58;
	--mmOrangeBg: #f67a00;
	--mmOrangeBg2: #DD6D00;
	
	--mmLightBlueBg: #eaf6fa;
	--mmLightBlueColor: #31708f;
	--mmLightBlueBorder: #bce8f1;
	
	--mmLightGoldBg: #fcf8e3;
	--mmLightGoldColor: #8a6d3b;
	--mmLightGoldBorder: #faebcc;
	
	--mmLightGreyBg: #f9f9f9;
	--mmLightGreyBorder: #efefef;
	--mmLightGreyBorder2: #dfdfdf;
	
	--mmWarningRed: #ed1c24;
	--mmWarningGreen: #1ca016;
	--mmWarningOrange: #ff7f27;
	
	--mmTone444: #4e5665;
	--mmToneCCC: #cecece;
	--mmTone999: #999;
	--mmTone777: #777;

	--linkColor: #222;
	--linkHoverColor: #31708f;
	
	--scrollbarWidth: 10px;
	--scrollbarTrackBg: #cecece;
	--scrollbarThumbBg: #999;
	--scrollbarThumbHoverBg: #777;
	
	--mobileMenuColor: #222;
	--mobileMenuBtnColor: #fff;
	--mobileMenuSelectedColor: #fff;
	--mobileMenuSelectedBgColor: #f67a00;
	--mobileMenuContentBgColor: #fff;
	
	--btnColor: #fff;
	--btnBgColor: #f67a00;
	--btnHoverColor: #fff;
	--btnBgHoverColor: #144e8c;
	
	--dialogBgColor: #efefef;
	--dialogBgColor2: #f67a00;
	--dialogHeadingColor: #444;
}

/* ------------- DOCUMENT ------------- */

/* Body */
body{
	background-color: var(--mmBg);
	font-family: Lato, Helvetica, Arial, sans-serif;
}

/* Headings */
h1, h2, h3{
	font-family: Lato, Helvetica, Arial, sans-serif;
}
	
/* Leaf Border */
.leaf-border{
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-top-right-radius: 0;
	-moz-border-radius-topright: 0;
	-webkit-border-top-right-radius: 0;
}

/* Container */
#container{}

	#container .logo img{
		width: 100%;
	}
	
	#container .label-box{}
	
		#container .label-box > .title{
			color: #555;
			text-align: left;
			padding: 15px 20px;
			font-size: var(--fontSize140);
			border-bottom: 1px solid var(--mmLightGreyBorder);
		}
		
		#container .label-box > .content{}
	
	#container .note{
		color: #777;
		margin-top: 10px;
		text-align: center;
	}

#container.login-reset{
	width: 100%;
    height: 100%;
    position: absolute;
    margin: 0px auto -50px;
}

	#container.login-reset .box{
		width: 500px;
		margin: 0 auto;
	}

		#container.login-reset .box .logo{
			width: 90%;
			margin: 0 auto 20px;
		}
	
		#container.login-reset .box .links{
			margin: 10px 0;
		}
	
			#container.login-reset .box .links a:nth-child(1){
				float: left;
			}
			
			#container.login-reset .box .links a:nth-child(2){
				float: right;
			}

#container.register{
	left: 10%;
	width: 80%;
	padding: 5% 0;
    position: absolute;
    margin: 0px auto -50px;
}

	#container.register .logo{
		width: 60%;
		margin: 0 auto 5%;
	}
	
	#container.register .links{}
	
		#container.register .links a{
			width: 100%;
			padding-left: 0;
			padding-right: 0;
			text-align: center;
			margin-bottom: 10px;
			display: inline-block;
		}

/* 1650px */			
@media screen and (max-width: 1650px){}

/* 1550px */			
@media screen and (max-width: 1550px){}

/* 1380px */			
@media screen and (max-width: 1380px){
	#container.login-reset,
	#container.register{
		left: 5%;
		width: 90%;
	}
}

/* 1100px */			
@media screen and (max-width: 1100px){}

/* 600px */			
@media screen and (max-width: 600px){
	#container .logo{
		width: 90%;
		margin-bottom: 5%;
	}
	
	#container.register .logo{
		width: 90%;
	}
	
	#container.register .links{
		margin-top: 20px;
	}
}