/*
*		    ________      .___   
*	__  _  _\_____  \   __| _/
*	\ \/ \/ / _(__  <  / __ |
*	 \     / /       \/ /_/ |
*	  \/\_/ /______  /\____ |
*	               \/      \/
*
*	@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)
*
*	@source			core.css
*	
*	@conception		<04 September 2021>
*	@updated		<19 February 2023>
*	@version		<3.02.19>
*/

/*------------- Html -------------*/

html{
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}

/*------------- Body -------------*/

body{
	margin: 0;
	padding: 0;
	color: var(--color);
	font-size: var(--fontSize100);
	font-family: Calibri, Verdana, Arial, Helvetica, sans-serif;
}

@media screen and (max-width: 600px){body{font-size: var(--fontSize90);}}

/*------------- Headings -------------*/

h1, h2, h3, h4, h5, h6{
	margin: 0;
	padding: 0;
}

/*------------- Images -------------*/

img{
	border: 0;
	display: block;
	max-width: 100%;
	vertical-align: middle;
}

/*------------- Links -------------*/

a{
	cursor: pointer; 
	text-decoration: none;
}

a:link{color: var(--linkColor);}
a:visited{color: var(--linkColor);}
a:active{color: var(--linkColor);}
a:hover{color: var(--linkHoverColor);}

/*------------- Form Elements -------------*/

input,
select,
textarea{
	color: var(--mediColor);
	font-family: Calibri, Verdana, Arial, Helvetica, sans-serif;
}

input,
select{
	font-size: 16px !important;
}

textarea{
	font-size: 14px !important;
}

input:focus,
select:focus,
textarea:focus,
button:focus{
    outline: none;
}

input[type=text],
input[type=email],
input[type=number],
input[type=amount],
input[type=password],
input[type=file]{
	padding: 10px;
	background-color: var(--softBgColor);
	border: 1px solid var(--softBorderColor);
	
	-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
	-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
	box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}

input[type=text]:hover,
input[type=email]:hover,
input[type=number]:hover,
input[type=amount]:hover,
input[type=password]:hover,
input[type=file]:hover{
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

input[type=file]{
	padding: 10px;
}

	input[type=file]::file-selector-button{
		border: none;
		cursor: pointer;
		padding: 6px 8px;
		font-size: var(--fontSize90);
		color: var(--mediColor) !important;
		background-color: var(--softBgColor);
	}

	input[type=file]::file-selector-button:hover{
		background-color: var(--softHoverBgColor);
	}

input[type=date],
input[type=time],
input[type=datetime-local]{
	padding: 8px 10px;
	background-color: var(--softBgColor);
	border: 1px solid var(--softBorderColor);
	
	-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
	-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
	box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}

input[type=range]{
	height: 10px;
	outline: none;
	appearance: none;
	-webkit-appearance: none;
	background-color: var(--softBgColor);
	border: 1px solid var(--softBorderColor);
	
	-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
	-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
	box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);

	-webkit-transition: .2s;
	transition: opacity .2s;

	-webkit-border-radius: var(--borderRadius);
	-moz-border-radius: var(--borderRadius);
	-m-border-radius: var(--borderRadius);
	-o-border-radius: var(--borderRadius);
	border-radius: var(--borderRadius);
}

	input[type=range]::-webkit-slider-thumb{
		width: 20px;
		height: 20px;
		cursor: pointer;
		appearance: none;
		border-radius: 50%;
		-webkit-appearance: none;
		background-color: var(--bgColor);

		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
		-m-border-radius: 50%;
		-o-border-radius: 50%;
		border-radius: 50%;
	}

	input[type=range]::-moz-range-thumb{
		width: 20px;
		height: 20px;
		cursor: pointer;
		appearance: none;
		-webkit-appearance: none;
		background-color: var(--bgColor);

		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
		-m-border-radius: 50%;
		-o-border-radius: 50%;
		border-radius: 50%;
	}

select{
	padding: 9px 10px;
	background-color: var(--softBgColor);
	border: 1px solid var(--softBorderColor);

	-webkit-box-shadow: inset 0 -10px 8px 0 rgba(0,0,0,0.02);
	-moz-box-shadow: inset 0 -10px 8px 0 rgba(0,0,0,0.02);
	box-shadow: inset 0 -10px 8px 0 rgba(0,0,0,0.02);
}

select:hover{
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

textarea{
	padding: 10px;
	background-color: var(--softBgColor);
	border: 1px solid var(--softBorderColor);
	font-family: Arial, Helvetica, sans-serif;
	
	-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
	-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
	box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}

textarea:hover{
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}
	
/* Safari */
@media not all and (min-resolution:.001dpcm){
	@supports (-webkit-appearance:none){
		select{
			-webkit-appearance: none;
			-moz-appearance: none;
			appearance: none;
		}
	}
}

/* iOS */
@supports (-webkit-touch-callout: none){
	input,
	select,
	textarea{
		font-size: 16px;
	}
}

@media print{
	@page{size: auto; margin: 0;}
	
	body{background: #fff !important;}
	table{page-break-after: auto;}
	tr{page-break-inside: avoid; page-break-after: auto;}
	td{page-break-inside: avoid; page-break-after: auto;}
	thead{display: table-header-group;}
	tfoot{display: table-footer-group;}
	
	.box-shadow{
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
	}
	
	#widgets,
	#menu-banner,
	#left,
	#right{
		display: none !important;
	}
	
	#body{
		width: auto;
		margin: 0 auto;
	}
	
	#content{
		width: 100%;
	}
}