/* -------------------- Buttons Area -------------------- */

.buttons-line {
	margin-top: 14px;
	text-align: center;
}

/* -------------------- Buttons Area -------------------- */

.btnInvisible, .buttonsInvisible {
	visibility: hidden;
	display: none;
	height: 0;
	width: 0;
}

/* -------------------- Type: Button -------------------- */

.buttons {
	display: inline-block;
	height: 32px;
	margin: 10px 5px 0 5px;
	padding: 5px 20px 10px 20px;
	border: 2px solid #eee;
	border-radius: 7px;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	font-family: verdana;
	font-size: 14px;
	font-weight: 400;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.btnShadow {
	border: 1px solid #eee;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
	-moz-box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
	-webkit-box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

/* -------------------- Always Visible Buttons -------------------- */

.btnStickyTop_center {
	position: fixed;
	top: 40px;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 9999;
}

.btnStickyBottom_center {
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 9999;
}

.btnStickyBottom_right {
	position: fixed;
	bottom: 20px;
	right: 40px;
	z-index: 9999;
}

/* -------------------- Text link Buttons -------------------- */

.aButton {
	display: inline-block;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
	-moz-box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
	-webkit-box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
	border: 1px solid #ccc;
	border-radius: 7px;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	width: 450px;
	margin-top: 30px;
	padding: 10px 10px 15px 10px;
	background-color: #3973ac; /* #5986b3; */
	color: white;
	font-family: verdana;
	font-size: 20px;
	font-weight: normal;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.aButton:hover {
	transform: scale(1.05);
	border-color: tomato;
	background-color: #ed8806;
}

/* -------------------- Buttons in Title Section -------------------- */

.header-line img:not(#imgPrint):not(#btnPrint80):not(#imgPDF):not(#Access):not(#Display):not(#btnProfile):not(#Parms):not(#mobileInfoSquareOrange) {
	height: 36px;
	margin-top: -1px;
	border: 1px solid whitesmoke;
	border-radius: 99em;
	-webkit-border-radius: 99em;
	-moz-border-radius: 99em;
	box-shadow: 0 6px 12px 0 rgba(0,0,0,0.2), 0 4px 8px 0 rgba(0,0,0,0.19);
	-moz-box-shadow: 0 6px 12px 0 rgba(0,0,0,0.2), 0 4px 8px 0 rgba(0,0,0,0.19);
	-webkit-box-shadow: 0 6px 12px 0 rgba(0,0,0,0.2), 0 4px 8px 0 rgba(0,0,0,0.19);
}

.header-line img:not(#imgPrint):not(#btnPrint80):not(#imgPDF):not(#Access):not(#Display):not(#btnProfile):not(#Parms):hover:not(#mobileInfoSquareOrange):hover {
	box-shadow: 0 3px 6px 0 rgb(255, 215, 0.5), 0 2px 4px 0 rgba(255, 255, 204, 0.2);
	-moz-box-shadow: 0 3px 6px 0 rgb(255, 215, 0.5), 0 2px 4px 0 rgba(255, 255, 204, 0.2);
	-webkit-box-shadow: 0 3px 6px 0 rgb(255, 215, 0.5), 0 2px 4px 0 rgba(255, 255, 204, 0.2);
}

.header-line i.fas.fa-redo, .header-line i.fas.fa-cloud-download-alt, .header-line i.fas.fa-pencil-alt {
	font-size: 16px;
	color: #fff4b3;
	margin-left: 10px;
	text-shadow: -1px 0 black, 2px 1px grey, 1px 0 black, 2px -1px grey;
	cursor: pointer;
}

.header-line i.fas.fa-redo:hover, .header-line i.fas.fa-cloud-download-alt:hover, .header-line i.fas.fa-pencil-alt:hover {
	color: gold;
}

.header-line i.fas.fa-sort-numeric-down {
	border: 1px solid whitesmoke;
	border-radius: 5px;
	box-shadow: 0 6px 12px 0 rgba(0,0,0,0.2), 0 4px 15px 0 rgba(0,0,0,0.19);
	-moz-box-shadow: 0 6px 12px 0 rgba(0,0,0,0.2), 0 4px 15px 0 rgba(0,0,0,0.19);
	-webkit-box-shadow: 0 6px 12px 0 rgba(0,0,0,0.2), 0 4px 15px 0 rgba(0,0,0,0.19);
	padding: 2px;
	color: white;
	font-size: 30px;
	vertical-align: top;
}

.header-line i.fas.fa-sort-numeric-down:hover {
	box-shadow: 0 3px 6px 0 rgb(255, 215, 0.5), 0 2px 4px 0 rgba(255, 255, 204, 0.2);
	-moz-box-shadow: 0 3px 6px 0 rgb(255, 215, 0.5), 0 2px 4px 0 rgba(255, 255, 204, 0.2);
	-webkit-box-shadow: 0 3px 6px 0 rgb(255, 215, 0.5), 0 2px 4px 0 rgba(255, 255, 204, 0.2);
}

/* -------------------- Special Buttons -------------------- */

.btnSubmit {
	display: inline-block;
	width: 80%;
	min-width: 200px;
	height: 50px;
	margin: 0 10% 25px 10%;
	border-radius: 7px;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	font-family: verdana;
	font-size: 18px;
	font-weight: 400;
	text-align: center;
	text-decoration: none;
	text-shadow: 1px 1px 2px #333;
	cursor: pointer;
}

.btnSubmit:hover {
	transform: scale(1.1);
	background-color: #ed8806;
	color: white;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
	-moz-box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
	-webkit-box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.buttonsWF {
	display: inline-block;
	background-color: #009999;
	color: white;
	height: 32px;
	margin: 10px 5px 0 5px;
	padding: 5px 20px 10px 20px;
	border: 2px solid #eee;
	border-radius: 7px;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	font-family: verdana;
	font-size: 14px;
	font-weight: 400;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.buttonsWF:hover {
	transform: scale(1.1);
	background-color: #ed8806;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
	-moz-box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
	-webkit-box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.btnSwitchOn, .btnSwitchOff {
	display: inline-block;
	color: darkblue;
	height: 32px;
	margin: 10px 5px 0 5px;
	padding: 5px 20px 10px 20px;
	border: 1px solid #aaa;
	border-radius: 7px;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	font-family: verdana;
	font-size: 14px;
	font-weight: 400;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.btnSwitchOn {
	background-color: #66cdaa;
}

.btnSwitchOn:hover {
	border: 2px solid red;
	padding: 4px 19px 9px 19px;
}

.btnSwitchOff {
	background-color: #ffc0cb;
}

.btnSwitchOff:hover {
	border: 2px solid green;
	padding: 4px 19px 9px 19px;
}

.btnSectionBar {
	display: inline-block;
	background-color: #4c7399;
	color: whitesmoke;
	line-height: 18px;
	margin: 3px 0 3px 5px; /* margin-left: 3px; */
	padding: 0 10px;
	border: 2px solid #335980;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	font-family: verdana;
	font-size: 14px;
	font-weight: 400;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.btnSectionBar:hover {
	background-color: #ed8806;
	border: 2px solid orange;
	color: yellow;
}

.circle {
	position: fixed;
	z-index: 1;
	overflow: visible;
	display: block;
	width: 50px;
	height: 50px;
	margin: 1em auto;
	background-size: 66%;
	background-repeat: no-repeat;
	background-position: center center;
	border: 2px solid #e1e1e1;
	border-radius: 99em;
	-webkit-border-radius: 99em;
	-moz-border-radius: 99em;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
	-moz-box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
	-webkit-box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.circle:hover {
	transform: scale(1.1);
}

.circle100 {
	background-size: 100%;
	border: 2px solid #e1e1e1;
}

.circle100:hover {
	transform: scale(1.1);
}

.circlePos1L, .circlePos2L, .circlePos3L, .circlePos4L, .circlePos5L, .circlePos6L, .circlePos7L { left: 15px; }
.circlePos1R, .circlePos2R, .circlePos3R, .circlePos4R, .circlePos5R, .circlePos6R, .circlePos7R { right: 15px; }
.circlePos1L, .circlePos1R { bottom: 10px; }
.circlePos2L, .circlePos2R { bottom: 80px; }
.circlePos3L, .circlePos3R { bottom: 150px; }
.circlePos4L, .circlePos4R { bottom: 220px; }
.circlePos5L, .circlePos5R { bottom: 290px; }
.circlePos6L, .circlePos6R { bottom: 360px; }
.circlePos7L, .circlePos7R { bottom: 430px; }
.circlePos1Lh, .circlePos2Lh, .circlePos3Lh, .circlePos4Lh, .circlePos5Lh { bottom: -5px; }
.circlePos1Lh { left: 15px; }
.circlePos2Lh { left: 80px; }
.circlePos3Lh { left: 145px; }
.circlePos4Lh { left: 210px; }
.circlePos5Lh { left: 275px; }

/* -------------------- Colours for Buttons -------------------- */

.btnBlue, .btnGrey, .btnGreen, .btnOrange, .btnRed, .btnRedOrange {
	color: white;
}
.btnBlue {
	background-color: #3973AC; /* #5986b3; */
}

.btnGrey {
	background-color: #D3D3D3;
	color: #800000;
}

.btnGreen {
	background-color: #008000; /* #3e8410; */
}

.btnOrange {
	background-color: #FF9900; /* #ec9332; */
}

.btnRed {
	background-color: #D22B2B; /* #c44129; */
}

.btnRedOrange {
	background-color: #FF4500;
}

.btnBlue:hover, .btnGrey:hover, .btnGreen:hover, .btnOrange:hover, .btnRed:hover, .btnRedOrange:hover {
	transform: scale(1.1);
	background-color: #ed8806;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
	-moz-box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
	-webkit-box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

/* -------------------- Styles for Font Awesome buttons -------------------- */

.fa_btn_green, .fa_btn_blue {
	border: 1px solid grey;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	margin-left: 5px;
	padding: 4px 5px 3px 5px;
	background: #e2e2e2;
	font-size: 1rem;
}

.fa_btn_blue {
	color: darkblue;
}

.fa_btn_green {
	color: darkgreen;
}

.fa_btn_green:hover, .fa_btn_blue:hover {
	border-color: tomato;
	background: #ed8806;
	color: white;
}