/*
STACHS Business Solutions
This project is designed and developed by STACHS Pty. Ltd. and Web Elegance.
For all information and inquiries please visit:
STACHS: http://stachs.solutions 
Web Elegance: http://webelegance.com.au

Main stylesheet.

Table of contents:
1. General Style 
	1.1. Typography
	1.2. Buttons
	1.3. Header Styling
	1.4. Footer Styling

2. Common Styling for all pages

3. Specific pages styling

4. Media Queries


---------------------------------------------------------------
--------------------- 1. GENERAL STYLE ------------------
---------------------------------------------------------------
*/
html {height:100%;}
html.ieedge{overflow: hidden;}
.login-html { background: #000; }
body { font-family: helvetica; font-size: 100%; margin: 0; padding: 0; background: #eaeffa;
	/* below is the fix for jittery background for IE browser */
	width: 100%;
    height: 100%;
    overflow: hidden;
    overflow-y: auto; }
#wrap { margin: 0; width: 100%; height: auto; margin-top: -12px; /* overflow: auto; */
padding-left:3px; padding-right:3px; /* relevant to header margins */}
#wrap-login-page {margin: 0; width: 100%; height: 100%; background: #000; margin-top: -12px; }


/*
1.1. Typography ----------------------------------------------
*/
p { font-family: 'Roboto', sans-serif; font-size: 13px; }
.smaller-text { font-size: 11px; }
h6, h5, h4, h3, h2, h1 { font-family: 'Roboto', sans-serif; }
h4 {margin-top: 15px; margin-bottom: 10px; margin-left: 5px;}
.sub-heading-coloured {color: #0077b3;}
.h3-red {color: red;}
label {color: #4d4d4d;}
.page-note {font-size: 13px;margin:0; padding-left:5px; padding-bottom: 0px;}
.page-note {color: #4d4d4d;}
.page-note-blue {color: #0066ff;}
.page-note-red {color: #cc0000; padding-left:5px; margin-top: 0; margin-bottom: 0; }
.red-font { color: #cc0000; }
.page-note-grey {color: #737373;}
.page-note-black {color: #000;}
.page-note-green {color: green;}
.page-note-yellow { color: #cccc00;}
.centered-text {text-align: center;}
.right-aligned-text {text-align: right;}
.text-padding-left {padding-left: 5px;}
.text-padding-right {padding-right: 27px;}
.indented-text {padding-left: 100px;}
.bold-label {font-weight:bold;color: #000; font-size: 13px;}
.bold-label-red {color: red; font-weight:bold;}
.bold-label-blue {color: #0066ff; }
.bold-label-green {color: green; font-weight:bold;}
.small-note {font-style:italic; color: red;}
.large-text { font-size: 22px; }
.medium-text { font-size: 16px; }
.large-text { color: #1a8cff; }
.medium-text-black {font-size: 18px;}
.long-word {word-wrap:break-word;}
.current-data-to-edit { color: #1a1a1a; font-size: 12px; }
.h5-page-text {padding-left: 20px;}
.page-text {padding-left: 50px; padding-right:50px;}
.page-text-ul-list {padding-left: 80px; }
.page-text-ul-list li {padding-right:50px;  font-family: 'Roboto', sans-serif; font-size: 13px;}
.page-text-larger {font-size: 16px;}
.page-text-red {color: red;}
.highlighted-note { color: #0066ff; font-weight: bold; padding-left: 7px; font-size:13px; }
.add-new-data { 
	font-size: 13px; color: #fff; background: #339966; border-bottom: 2px solid #339966; 
	width: 120px; padding: 5px; margin:0; text-align: center; 
}
.add-new-data-blue {
	font-size: 13px; color: #fff; background: #2d8659; border-bottom: 2px solid #2d8659; 
	width: 200px; padding: 5px; margin:0; text-align: center;
}
.add-new-data-blue-longer {
	font-size: 13px; color: #fff; background: #2d8659; border-bottom: 2px solid #2d8659; 
	width: 296px; padding: 5px; margin:0; text-align: center;
}
.small-indent { padding-left:10px; }
.small-text-box { width: 165px; height: 20px; border: 1px solid #ccc; border-radius: 2px; 
padding-top: 5px; padding-left: 5px;}
.td-diff { padding-top: 20px; } 


/* 
1.2. Buttons And Action Links ---------------------------------------------------- 
*/
/*.left-col-button { width: 160px; padding-top: 5px; padding-bottom: 5px; cursor: pointer; font-size: 13px; color: #1a1a1a;}*/
.long-button { width: 250px;padding-top: 5px; padding-bottom: 5px; cursor: pointer; font-size: 13px; color: #1a1a1a;}
.edit-button { padding-top: 5px; padding-bottom: 5px; cursor: pointer; }

/* Left side menu buttons */
.link-button { display: block; width: 150px; cursor: pointer; text-decoration: none; color: #fff; }
.link-button p {
	font-size: 13px; text-align: left; color: #f2f2f2;
	height: 22px; padding-top: 6px;
	background: #0066ff; border-radius: 1px;
	margin-bottom: 2px; margin-top:0px;
	transition: 0.3s;
	padding-left: 8px;
}
.link-button p:hover, .link-button p:focus {background: #4d94ff; transition: all 0.3s;}

/* Grey colour Go-Back buttons */
.link-button-g p {
	font-size: 13px; text-align: left; color: #f2f2f2;
	height: 22px; padding-top: 6px;
	background: #4d4d4d; border-radius: 1px;
	margin-bottom: 2px; margin-top:0px;
	transition: 0.3s;
	padding-left: 8px;
}
.link-button-g p:hover, .link-button-g p:focus {background: #ccc; transition: all 0.3s;}
.link-button-g {text-decoration: none;}

.link-button-q p {background: #1f3d7a;}

/* Red Button - Important Button */
.link-button-red p {background: #ff1a1a;}
.link-button-red p:hover, .link-button-red p:focus {background:#ff4d4d;transition: all 0.3s;}

.button-save-red {
    background: #ff1a1a;
    font-size: 13px; text-align: left; color: #f2f2f2;
	height: 22px; border: 1px solid #ff1a1a; height: 28px; border-radius: 1px;
	margin-bottom: 2px; margin-top:0px; padding-left: 8px;
	transition: 0.3s;
	cursor: pointer;
}


.button-save-red:disabled {background-color: #ccc; border: 1px solid #ccc; cursor: not-allowed;}
.button-save-red:disabled:hover {background-color: #ccc; border: 1px solid #ccc; cursor: not-allowed;}

.button-save-red:hover, .button-save-red:focus {background:#ff4d4d;transition: all 0.3s;}

/* Green Button - Important Button 2 */
.link-button-green p {background: #206040;}
.link-button-green p:hover, .link-button-green p:focus {background: #39ac73;}

/* Left side menu go back button */
.link-button-back p {background: #4d4d4d; }

/* Active page link button */
.link-button-grey p {background: #4d94ff; }

/* Left side menu buttons for longer wording */
.link-button-two p {height: 38px; padding-top: 5px;}

.row-buttons { margin-left: -35px; margin-bottom: 0px; }
.row-buttons li { display: inline-block; list-style: none; }
.link-button-row p { position: relative;  }

/* Help Button */
.help-button { display: block; width: 150px; cursor: pointer; text-decoration: none; color: #fff; position: relative; bottom: 0px; left: 0px; }
.help-button p {
	font-size: 14px; text-align: left; color: #fff;
	height: 22px; padding-top: 6px; padding-left: 8px; 
	background: #0066ff; border-radius: 1px;
	margin-bottom: 0px; margin-top:0px;
	transition: 0.3s;
}
.help-button p:hover, .help-button p:focus {background: #4d94ff; transition: all 0.3s;}


/* Action: Update/Edit/Save buttons */
.action-link-button {display: block; width: auto; height: auto; cursor: pointer; text-decoration: none; position: relative; float: left; margin-right: 3px; }
.action-link-button p, .action-link-button-table p {
	font-size: 13px; text-align: center; color: #f2f2f2;
	padding-top: 5px; padding-right: 4px; padding-left: 4px;
	background: #1a1a1a;
	border: 1px solid #f2f2f2; 
	margin-bottom: 0px; margin-top:0px;
	transition: 0.3s;
	border-radius: 1px; 
}
/* ... For within a Table cell */
.action-link-button-table p {width: 50px; font-size: 13px; padding-top: 0px; height: 20px; }
.action-link-button p:hover, .action-link-button p:focus,
.action-link-button-table p:hover, .action-link-button-table p:focus {background: #142952; transition: all 0.3s;}
.action-link-button-table-wide p {
	font-size: 14px; text-align: center; color: #f2f2f2;
	height: 22px; padding-top: 5px;
	background: #1a1a1a;
	border: 1px solid #4d4d4d; 
	margin-bottom: 0px; margin-top:0px;
	transition: 0.3s;
	border-radius: 1px; 
	width: 120px;
}
.action-link-button-table, .action-link-button-table-wide { text-decoration: none; }

/* Go Back and Lesser importance action buttons */
.action-link-button-back {width: 100px; margin-right: 0px; margin-left: 3px;}
.action-link-button-back p {background: #4d4d4d; border: 1px solid #4d4d4d; padding: 4px; box-shadow: 2px 2px 5px #ccc; }
.action-link-button-back p:hover, .action-link-button-back p:focus {background: #ccc; border: 1px solid #ccc; box-shadow: 0px 0px 0px #ccc;}
.action-link-button-back-long {width: 20px;}

.action-link-button-back-green p { background: #206040; }
.action-link-button-back-green p:hover, .action-link-button-back-green p:focus { background: #39ac73; }

/* Print Buttons */
/* .action-link-button-print p { padding: 5px; padding-right: 7px; margin-left: 10px;  margin-right: 0; background:#1f3d7a; } */
.print-button { cursor: pointer; width: 100px; padding: 4.2px; margin-left: 3px; margin-top: 0px;
	background:#1f3d7a; border: 1px solid #1f3d7a; color: #fff; transition: all 0.3s; box-shadow: 2px 2px 5px #ccc; }
.print-button:hover, .print-button:focus { background: #ccc; border: 1px solid #ccc; transition: all 0.3s; }

/* Go Back button with floating to the right */
.action-link-button-right {position: relative; float:right;}

/* Long buttons */
.action-link-button-long {width: 200px; margin-right: 3px;}
.action-link-button-longer {width: 250px; margin-right: 3px;}
.action-link-button-longer p {padding: 5px;}
.action-link-button-longer-left {float:left;}
.action-link-button-longer-large p {height: 38px; padding-top: 5px;}

.action-link-button-back-long { width: 160px; }

/* Medium buttons */
.action-link-button-med {width: 124px;}

/* Small buttons*/
button.action-link-button-small {width: 55px;}
.action-link-button-small {width: 55px;}
.action-link-button-small p {height: 18px; padding-top: 6px; background: #1a1a1a; font-size: 12px;}
a.action-link-button-small {text-decoration:none;}
.action-link-button-medium {width: 80px;}
.action-link-button-small-disabled p {background-color: #ccc; border: 1px solid #ccc; cursor: not-allowed;}
a.action-link-button-small-disabled p {cursor: not-allowed;}

/* Floated left buttons */
.action-link-button-left {float:left;}

/* Action button for Add New */
.action-link-button-add {  margin-left: 4px; }
.action-link-button-add p { background:#206040; padding: 5px; border: 1px solid #206040; box-shadow: 2px 2px 5px #ccc; }
.action-link-button-add p:hover, .action-link-button-add p:focus {background: #40bf80; transition: all 0.3s;}

/* Action button for Update Photo */
.action-link-button-add-photo p {background:#1f3d7a; padding: 5px; margin-left: 5px;}
.action-link-button-add-photo p:hover, .action-link-button-add p:focus {background: #4d94ff; transition: all 0.3s;}

/* Action Button Not An Link */
.action-button-not-a-link {position:relative; background: #142952; border: 1px solid #4d4d4d; color: #f2f2f2; 
padding: 4px; cursor: pointer; transition: all 0.3s;}
.action-button-not-a-link:hover, .action-button-not-a-link:focus {background: #5c85d6; transition: all 0.3s;}
.action-button-not-a-link:disabled,
.action-button-not-a-link[disabled]{
  border: 1px solid #999999;
  background-color: #cccccc;
  color: #666666;
  cursor: not-allowed;
}

/* Like Link Buttons for passing variables to another page */
.button-like-link {display: block; width: 130px; cursor: pointer; text-decoration:none;
	font-size: 13px; text-align: center; color: #f2f2f2;
	height: 25px; padding-top: 0px;
	background: #0066ff; border: 1px solid #4d4d4d;
	border-radius: 1px;
	margin-bottom: 2px;margin-top:0px;
	transition: 0.3s;
}
.button-like-link:hover, .button-like-link:focus {background: #5c85d6; transition: all 0.3s;}
.button-like-link-red {display: block; width: 130px; cursor: pointer; text-decoration:none;
	font-size: 13px; text-align: center; color: #f2f2f2;
	height: 25px; padding-top: 0px;
	background: red; border: 1px solid red;
	border-radius: 1px;
	margin-bottom: 2px;margin-top:0px;
	transition: 0.3s;
}
.button-like-link-red:hover, .button-like-link-red:focus {background: #ff4d4d; transition: all 0.3s; border: 1px solid #ff4d4d;}

.button-like-link-left { width: 150px; text-align:left; }
.button-like-link:disabled {background-color: #ccc; border: 1px solid #ccc; cursor: not-allowed;}


/* Index page button */
.link-button-o { display: block; width: 140px; cursor: pointer; text-decoration: none; color: #fff; 
padding: 5px; position: relative; left: 50%; margin-left: -70px; }
.link-button-o p {background: #ff6666; font-size: 13px; border: 1px solid #ff6666; text-align: center; padding: 5px; box-shadow: 2px 2px 5px #ccc; }
.link-button-o p:hover, .link-button-o p:focus { background: #ff9999; transition: 0.3s; }

/* Form Buttons */
.button-save-edit, .button-save-edit-small, .button-save-edit-medium { cursor: pointer; height: 26px; color: #f2f2f2;
	background: #142952;  border: 1px solid #4d4d4d; border-radius: 2px; font-size: 12px; transition: 0.3s;}
.button-save-edit { width: 100px; }
.button-save-edit-small {width: 62px; padding:0;}
.button-save-edit-medium {width: 150px;}
.button-save-edit:hover, .button-save-edit:focus, 
.button-save-edit-small:hover, .button-save-edit-small:focus {background: #5c85d6; transition: all 0.3s;}
.button-save-edit-small-save {background: #206040;}
.button-save-edit-small-save:hover, .button-save-edit-small-save:focus {background: #39ac73;}

.button-save-edit-small-save:disabled, .button-save-edit-medium-save:disabled {background: #ccc; border: 1px solid #ccc; cursor: not-allowed;}

.button-save-edit-small-archive {background: red;}
.button-save-edit-small-archive:hover {background: #e60000;}
.button-save-edit-small-save-red { background: #e60000; }
.button-save-edit-small-save-red:hover, .button-save-edit-small-save-red:focus {background: red;}

.button-like-link { display: block; width: 150px; cursor: pointer; text-decoration: none; color: #fff; 
	font-size: 13px; text-align: left; color: #f2f2f2;
	height: 28px; padding-top: 6px; padding-bottom: 6px;
	background: #0066ff; border-radius: 1px; border: 1px solid #0066ff;
	margin-bottom: 2px; margin-top:0px;
	transition: 0.3s;
	padding-left: 8px;
}
.button-like-link:hover, .button-like-link:focus {background: #4d94ff; transition: all 0.3s;}

.import-csv-btn {
    background-color: #339966;
    width: 150px;
    color: white;
    padding: 5px 5px;
    border: none;
    font-size: 13px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.import-csv-btn:hover { background-color: #5cbf88; }

/* Disabled Buttons */
.grayed { background: #ccc; }

/* Cancel / Go back Button for Editing forms */
.cancel-button {width: 62px; display: block; cursor: pointer; text-decoration: none; color: #fff;}
.cancel-button p {font-size: 12px; border: 1px solid #1a1a1a; border-radius: 2px; background: #1a1a1a; 
	padding-top:5px; padding-bottom:5px; padding-right:4px; padding-left:3px; transition: 0.3s;}
.cancel-button p:hover, .cancel-button p:focus { border: 1px solid #595959; background: #595959; transition: 0.3s;}
 
 /* Delete Links */
.link-red {display: block; width: 58px; cursor: pointer; text-decoration: none; position: relative; float: left; margin-right: 3px;}
.link-red-2 {display: block; width: 62px; cursor: pointer; text-decoration: none; position: relative; float: left; margin-right: 3px;}

.link-red p { font-size: 12px; text-align: center; color: #f2f2f2;height: 18px; padding-top: 5px;
	background: #ff1a1a; border: 1px solid #e60000; border-radius: 1px; margin-bottom: 2px;margin-top:0px;transition: 0.3s; }
.link-red p:hover, .link-red p:focus {background: #e60000;}
.link-red-2 p { font-size: 12px; text-align: center; color: #f2f2f2;height: 18px; padding-top: 5px;
	background: #ff1a1a; border: 1px solid #e60000; border-radius: 1px; margin-bottom: 2px;margin-top:0px;transition: 0.3s; }
.link-red-2 p:hover, .link-red p:focus {background: #e60000;}

.delete-long {width: 170px;}
 
 /* Links To Query Pages (Links within forms and tables) */
 .link-to-query { color: #2851a4; font-size: 13px; font-weight: bold; transition: all 0.3s; cursor:pointer; text-decoration:underline; }
 .link-to-query:hover, .link-to-query:focus { color: #5b84d7; transition: all 0.3s; }
 
 
/*
Images Styling -------------------------------------------- 
*/
.portfolio-image { width: 100px; height: auto; float: left; margin-left: 0px; }
.portfolio-image img { width: 100px; height: auto; padding: 5px; border: 1px solid #ccc;}

.portfolio-image-small { width: 30px; height: auto; float: left; margin-left: 0px; }
.portfolio-image-small img { width: 30px; height: auto; float: left; margin-left: 0px; }

/* Fancybox Styling */
a.fancybox img {
	border: none;
	box-shadow: 0 1px 7px rgba(0,0,0,0.6);
	-o-transform: scale(1,1); -ms-transform: scale(1,1); -moz-transform: scale(1,1); -webkit-transform: scale(1,1); transform: scale(1,1); -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
} 
a.fancybox:hover img {
	position: relative; z-index: 999; -o-transform: scale(1.03,1.03); -ms-transform: scale(1.03,1.03); -moz-transform: scale(1.03,1.03); -webkit-transform: scale(1.03,1.03); transform: scale(1.03,1.03);
}


/*
1.3. Header Styling -------------------------------------------- 
*/
header { padding-top: 20px; margin-right: 0px; margin-bottom: 3px; margin-left: -3px; min-height: 90px; height: auto; background: #fff;  transition: all .5s;  }
.left-side { width: 90px; padding-right: 10px; padding-left: 0px; position: relative; float: left; margin-left: 35px; transition: all .5s; }
.header-logo {width: 70px; margin-top: -5px; transition: all .5s; }
.header-logo-public { width: 90px; margin-top: -5px; }

.right-side-header { margin: 0; padding-top: 3px; padding-bottom: 5px; font-size:18px; transition: all .5s; }
.right-side-header a { color: #4d4d4d; transition: 0.3s; }
.right-side-header a:hover { color: #0066ff; transition: 0.3s; }
.right-side-header-public { padding-left: 0; margin-left: -20px; }
.user-data, .user-data-2 { position: relative; font-size: 14px; margin: 0; }
.user-data-2 { display: none; }
.emp-name { font-size: 16px; color:#4d4d4d; font-weight: bold; }

/* .dropdown-header-form { border: 1px solid red; width: 220px; position:relative; margin-left: 100px;  margin-top: 0;} */

.login-buttons {margin-right: 50px;}
.header-logout-button {position:relative; float: right; top: 0; background: #0066ff; border: 1px solid #f2f2f2; color: #f2f2f2; 
padding: 5.5px; cursor: pointer; text-decoration: none; font-size: 13px; transition: all 0.3s; margin-left: 2px; box-shadow: 2px 2px 5px #ccc;  }
.header-logout-button:hover, .header-logout-button:focus {background: #4d94ff; transition: all 0.3s;}


/*
body.scrolled header {position: fixed; width: 100%; z-index: 999; transition: all .5s; }
body.scrolled .left-side { transition: all .5s; width: 55px; }
body.scrolled .header-logo { transition: all .5s; width: 55px;  }
body.scrolled .right-side-header { transition: all .5s; display: none; padding-bottom:0; }
body.scrolled .user-data { transition: all .5s; font-size: 0px; }
body.scrolled nav { transition: all .5s; margin-top: 35px;}
*/


/* ------------- Nav menu -------------- */
nav { position: relative; border-top: 1px solid #fff; border-bottom:1px solid #fff; margin-top: 7px; width: 100%; 
z-index: 888; height: 48px; background: #99c2ff; }
/* nav ul { margin-left: -35px; } */
nav ul li { display: inline-block; list-style: none; font-size: 13px; padding-right: 3px; border-right: 1px solid #3263cd; }
nav ul li a { display: block; color: #333; transition: all 0.3s; text-decoration: none; font-weight: bold;
/* border: 1px solid #ccc; padding-left: 3px; padding-right: 3px; padding-top: 7px; padding-bottom: 7px; */ }
nav ul li a:hover, nav ul li a:focus { transition: all 0.3s; text-decoration: underline; }
.active, .active-second { color: #0066ff; text-decoration: underline; transition: all 0.3s; }

/* -------  Dropdown Employee Name ------- */
.emp-name-dropdown {
	width: 100%; position: relative; overflow: auto; padding-bottom: 7px; box-shadow: 2px 2px 10px #ccc; }
.employee-header-field { width:220px; padding-top: 4px; padding-bottom: 4px; border: 2px solid #0066ff; border-radius: 2px; 
margin-top: 0px; margin-left: 32px; font-weight: bold; font-size: 14px; color: #333; }
.employee-header-field option { background: #cce0ff; font-size: 13px; color: #000; }
.selected-emp-name {font-size: 14.5px; color: #000; position: relative; margin: 0; margin-top: 5px; 
width: 255px; overflow: hidden; float: left; }
.selected-emp-name-black {font-size: 14px; color: #000; position: relative; margin: 0; font-weight: bold;
margin-top: 5px; float: left; margin-left: 10px; padding-top: 7px; }
.bold-name {font-size: 16px; color: #0066ff; font-weight: bold; margin:0; }
.blue-name { color: #0066ff; font-weight: bold; }
.header-tip {position: relative; padding-top: 2px; margin-bottom: -37px; color: #0066ff; font-weight: bold; font-size:13px;}



/* Ex Employees Area Header */
.coloured-header-text { color: red; }

/* Mobile Menu Button */
.icon-menu, .mobile-li-only { display: none; }


/*
1.4. Footer Styling ---------------------------------------------
*/
footer { 
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 12px;
    color: #999;
    position: relative;        /* keeps footer in flow */
    text-align: center;
    z-index: 9;                /* stays above low-z elements */
    margin-top: 50px;          /* good breathing space above */
    padding: 15px 10px 10px;   /* slightly more padding on top for balance */
    background: #eee;
    clear: both;               /* ensures footer clears any floated elements */
    box-sizing: border-box;    /* keeps padding within width */
    width: 100%;               /* spans full width */
}
.footer a {color:#808080; padding-right: 3px; padding-left: 3px; transition: all 0.3s;}
.footer a:hover, .footer a:focus { color:#1a1a1a; transition: all 0.3s; }



/*
---------------------------------------------------------------
--------- 2. COMMON STYLING FOR ALL PAGES -------
---------------------------------------------------------------
*/
.one-col {overflow: auto; margin-bottom: 15px; border: 1px solid #ccc; background: #fff; padding: 5px;}
.left-col {overflow: auto; width: 150px; position: relative; float: left;  
margin-left: 30px; margin-right: 0px; z-index:10;}
.left-col-p {font-weight: bold; font-size: 13px; margin: 0; margin-bottom: 5px; padding-top: 10px;}
.left-col-p-small {font-size: 12px; margin-top: 0; margin-bottom: 0;}
.right-col { margin-left: 150px; overflow: auto; margin-bottom: 15px; margin-right: 30px; padding: 5px;}
.right-col-full-width {margin-left: 30px;}
.margin-left-h4 {margin-left: 45px;}
.two-equal-cols {width: 45%; padding-left: 10px; font-size: 13px; position: relative; float: left; margin-bottom: 20px; overflow: hidden;}
.two-equal-cols-skinny {width: 190px;}

.trainee-page-block {font-size: 13px; width: 30%; position: relative; display:inline-block; text-align: right; /* clear: all; */ overflow:auto; }

.border-line {border-bottom: 1px solid #ccc; padding-top: 5px; margin-bottom: 20px;}

.lower-block {
	margin-top: 5px; /* -------------------------------------------------- NOTE: may need to be adjusted -------------------------------- */
	border-bottom: 1px solid #ccc;
	overflow: auto; padding-bottom: 15px;
}
.red-text {color: red;}

.red-text {
  color: red;
  font-weight: bold;
}

.red-bold {
  color: red;
  font-weight: bold;
}

/* Note area for all forms */
.notes-area {width: 100%; height: 100px; position: relative; margin-bottom: 10px;}
.notes-area-text {width: 50%; height: 80px; min-width: 300px; min-height: 80px; padding: 5px; position: relative; float:left; margin-right: 0%; resize:none;}

.coloured-span-green {color: green;}
.coloured-span-orange {color: orange;}
.coloured-span-red {color: red;}


/* ------------------  Tables ------------------- */
table tr th, table tr td {font-size: 12px;}
table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; margin-bottom: 0px;}
td, th { border: 1px solid #ddd; text-align: left; padding: 8px; }
form table td, form table th { border: 1px solid #fff; }
tr:nth-child(even) { background-color: #dddddd; }
/* .hidden-borders, th, td {border:1px solid #fff;} */
.stick-to-footer {  
position: relative; /* Avoid absolute positioning */
  width: 100%; /* Ensure it matches container width */
  margin-top: auto; /* Pushes the table to the bottom */
  overflow: hidden;
  border-collapse: collapse; /* Optional: Ensures neat table styling */
  margin-bottom: 50px; /* Keep as-is for spacing if needed */
}

.smaller-table {width: 600px;}
.small-table {width: 350px;}
.button-filled-table {width:850px;}
.button-filled-table-four-cols {width:1130px;}

.populated-rows {margin: 0;table-layout: fixed;}
.tr-with-black-bottom-border {border-bottom:2px solid #4d4d4d;}

.report-page td, .report-page tr { border: 1px solid #cce0ff; }
.report-page-two td, .report-page tr { border: 1px solid #99c2ff; }

.column-Q { width: 35px; }
.column-0 { width: 55px; }
.column-D { width: 58px; }
.column-E { width: 65px; }
.column-1 { width: 70px; }
.column-2 { width: 85px; }
.column-3 { width: 100px; }
.column-4 { width: 120px; }
.column-5 { width: 180px; }
.column-6 { width: 220px; }
.column-7 { width: 280px; }
.column-8 { width: 26%; }

.highlight {background-color: #feffb8;}

/* -- Sticky headers in tables -- */
.table-fixed-width { width: 1235px; } /* fix width of all table section first*/
.sticky-table-header { position: relative; width: 100%; padding-right: 150px; }
.fixed-header { position: fixed; top: 0; width: 100%; z-index: 1000; background: #eaeffa; }
.content { padding: 16px; }

/* --- Sticky table header fix --- */



/* ---------------- Forms and Inputs -------------------- */
.input-details { height: 26px; border: 1px solid #ccc; border-radius: 2px; padding-left: 5px; }
.input-details-small { width: 65px; height: 26px; border: 1px solid #ccc; border-radius: 2px; padding-left: 5px; }
.input-details-200 { width: 200px; height: 26px; border: 1px solid #ccc; border-radius: 2px; padding-left: 5px; }
.input-details-247 { width: 247px; height: 26px; border: 1px solid #ccc; border-radius: 2px; padding-left: 5px; }
.input-details-number {width: 50px; height: 26px; border: 1px solid #ccc; border-radius: 2px; padding-left: 5px; }
.input-details-cost {width: 80px; height: 26px; border: 1px solid #ccc; border-radius: 2px; padding-left: 5px; }
.input-details-medium {width: 300px; height: 26px; border: 1px solid #ccc; border-radius: 2px;}
.input-details-medium-2 {width: 500px; height: 26px; border: 1px solid #ccc; border-radius: 2px;}
.input-details-medium-4 {width: 400px; height: 26px; border: 1px solid #ccc; border-radius: 2px;}
.input-details-medium-special-1 {width: 394px; height: 26px; border: 1px solid #ccc; border-radius: 2px;}
.input-details-long {width: 800px; height: 26px; padding: 5px; padding-bottom: 2px; padding-top: 2px; border: 1px solid #ccc; border-radius: 2px; padding-left: 5px; }
.input-details-date-left {width: 145px; border: 1px solid #ccc; border-radius: 2px; padding-left: 5px;}
.notes-area-small {width: 167px; min-width: 167px; min-height: 70px; border: 1px solid #ccc; border-radius: 2px;}
.filter-field { width: 150px; height: 30px; border: 1px solid #ccc; border-radius: 2px; }
.filter-field:focus, .input-details:focus { border: 1px solid #206040; }

/* Select options */
.dropdown-reports { width: 210px; }
#post-LetterContent {width: 300px;}
/* #post-EmpID2 {width: 300px;} */
.dropdown-small-0 { width: 65px; height: 30px; border: 1px solid #ccc; border-radius: 2px; }
.dropdown-small { width: 100px; height: 30px; border: 1px solid #ccc; border-radius: 2px; }
.dropdown-medium { width: 170px; height: 30px; border: 1px solid #ccc; border-radius: 2px; }
.dropdown-medium-2 { width: 255px; height: 30px; border: 1px solid #ccc; border-radius: 2px; }
.dropdown-medium-3 {width: 300px; height: 30px; border: 1px solid #ccc; border-radius: 2px;}
.dropdown-medium-4 {width: 400px; height: 30px; border: 1px solid #ccc; border-radius: 2px;}
.dropdown-longer { width: 220px; height: 30px; border: 1px solid #ccc; border-radius: 2px; }
.display_button { height: 30px; border: 1px solid #4d4d4d; border-radius: 2px; background: #4d4d4d; color: #fff; cursor:pointer; transition: all .3s; }
.display_button:hover, .display_button:focus { background: #142952; transition: all .3s; }
.selected-op {background-color:#ccc;}


/* Form Validation Styling */
.asterix { color: #000; font-weight: bold; }
.required-field-note { font-size:12px; font-style: italic; padding-left:5px; margin:0;}
.form-error {color:red; padding-top: 10px;}
.form-note {
  display: block;
  font-size: 0.8em;
  color: #666;
  margin-top: 4px;
  text-align: center;   /* centers the text */
}
.login-form-error {color:red; padding-top: 10px; font-size: 12px;}
.input-error{ border: 1px solid red; }



/* ------------------ REPORTS Styling --------------------- */
.report-heading { text-align: center; color: #0066ff; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;
	padding-top: 12px; padding-bottom: 10px; font-size: 20px; font-weight: normal; font-family: 'Roboto', sans-serif; }
.report-date {text-align: center; font-size: 12px; }
.printable-area {width: 760px; min-height: 1000px; height: auto; position: relative; left: 50%; margin-left: -450px; padding: 70px; 
border: 1px solid #ccc; background: #fff; box-shadow: 3px 3px 10px #ccc; }
.printable-area-landscape { width: 1040px; margin-left: -590px; min-height: 660px; height: auto; } 
.total-sum { color: #005ce6; font-size: 14px; font-weight: bold; }
.total-sum-top { color: #005ce6; font-size: 14px; font-weight: bold; margin-right: 5px;}
.red-font { color: red; }
.yellow-font { color: #cccc00;}

/* 
NOTE: 
1) current calculations for landscape layout are approximate and may require changing
2) while calculating proportional difference of A4 paper, keep in mind padding of 40px on each side 
*/

/*
@page port {size: portrait;}
@page land {size: landscape;}
.portrait {page: port;}
.landscape {page: land;}
*/


/* --- Dynamic Logos --- */
.rep-logo-area {border: 1px solid #fff; position: relative; overflow: auto; margin-top: -10px; margin-bottom: 30px;}
.dynamic-logo {position: relative; float: left; height: 140px; width:200px; }
.dynamic-logo-my-id	{position: relative; float: left; height: 50px; padding-bottom: 5px;}
.dynamic-logo-two { position: relative; float: right; height: 140px;}
.review-form-right {margin-left: 160px;}
.smaller-logo {width: 150px; height: auto;}


/* --- Sticky Report Headers --- */
    /* For on-screen view */
    @media screen {
        .report-sticky-header th {
            position: sticky;  /* Makes the header sticky */
            top: 0;            /* Sticks at the top of the viewport */
            background-color: #f9f9f9;  /* Optional: background color */
            z-index: 10;       /* Keep it on top of other content */
            padding: 10px;
            box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);  /* Optional shadow */
        }
    }

    @media print {
        .printable-area {
            width: 760px;
            height: auto !important;
            min-height: 0 !important;
            padding-top: 30px !important;
            border: none !important;
            box-shadow: none !important;
            position: static !important;
            margin: 0 auto !important;
            page-break-inside: auto;
        }
    
        .quote-requested-by {
            page-break-inside: avoid;
            page-break-after: auto;
        }
    
        thead {
            display: table-header-group;
            page-break-inside: avoid;
        }
        
        tbody tr {
            page-break-inside: avoid;
        }
    
        .populated-rows {
            margin-bottom: 0px;
        }
    
        @page {
            size: A4 portrait;
            margin: 10mm;
        }
        
        img[align="right"] {
            float: right !important;
            max-width: 150px !important;
            height: auto !important;
            margin: 0 10px 10px 10px !important;
            display: block !important;
            page-break-inside: avoid !important;
        }
        
      .printable-area-landscape {
        width: 95% !important;
        margin: 0 auto !important;
        box-shadow: none !important;
        border: none !important;
        padding-top: 4mm !important;
        padding-bottom: 4mm !important;
      }
    
      /* Ensure page breaks behave well */
      .printable-area-landscape * {
        break-inside: auto !important;
        page-break-inside: auto !important;
      }
    
      h4.report-heading,
      .report-date,
      .total-sum-top {
        page-break-after: avoid !important;
        break-after: avoid !important;
        page-break-inside: avoid !important;
      }
    
      /* Table structure */
      table.populated-rows {
        width: 99%;
        border-collapse: collapse;
        margin-top: 0px;
        break-inside: auto;
        page-break-inside: auto;
      }
    
      table.populated-rows thead {
        display: table-header-group; /* repeat header */
        page-break-inside: avoid;
        break-inside: avoid;
      }
    
      table.populated-rows tr {
        page-break-inside: avoid; /* prevent rows from splitting */
      }
    
      table.populated-rows th,
      table.populated-rows td {
        border: 1px solid #ccc;
        padding: 5px;
        word-break: break-word;
      }
    
      @page {
        size: A4 landscape;
        margin: 6mm 8mm; /* top/bottom, left/right */
      }
    }


/* ------------------- ID Card Styling -------------------- */
.id-card { width: 400px; padding: 10px; padding-top: 20px; padding-left: 20px; position:relative; left:50%; margin-left: -230px; 
border: 1px solid #4d4d4d; border-radius:5px; overflow:auto; background: #fff; }
.id-card-left { width: 180px; min-height: 230px; position: relative; float: left; }
.id-card-right { padding-top: 60px; }
.id-card-logo { width: 160px; height:auto; }
.portfolio-image-id { position: relative; margin-right: 50px; margin-bottom: 5px; }
.portfolio-image-id img { width: 130px; height: 130px; border: 1px solid #ccc; border-radius: 5px; }
.company-logo-id-card { width: 70px; height: auto; position: relative; float: right; padding-right: 10px; }
.company-logo-id-card-2 { width: 150px; padding-bottom: 0px; }


/* -------------------- KPI Certificate --------------------- */
.kpi-cert { width: 90%; margin-left: 5%; border: 1px solid #4d4d4d; border-radius:5px; 
padding-top: 10px; padding-bottom:10px; overflow: auto; }
.kpi-left {width: 20%; padding-left: 10px; position: relative; float:left; }
.kpi-right { width: 60%; margin-left: 5%;}


/* ----------- KPI Performance Review Form ----------- */
.perf-review-logo {width: 100px; height:auto;}
.review-form-left { width:3%; padding-left: 20px; position: relative; float: left; }
.kpi-right { position: relative; float: left; }
.perf-form-table tr th, .perf-form-table tr td {font-size: 12px;}


/* --------------- Statement of Attainment -------------- */
.statement-of-attainment {border:5px solid #ff4500; border-style:double; padding-top:50px; padding-bottom:80px; padding-left:50px; padding-right:50px; margin:-40px;}
.inner-border {width: 80%; margin-left: 10%; margin-top: 30px; overflow: auto; }
.statement-logo { position:relative; left:50%; width: 200px; margin-left: -100px; }
.small-box { width: 220px; height: auto; border: 1px solid #ccc; padding-left: 10px; float: left; overflow: auto; }
.stamp-image { position: relative; float: right; margin-right: 10px; margin-bottom: 30px; padding-top: 20px; width: 110px; }
.signature-image { position: relative; width: 170px; padding-left: 25px; }
.large-box {margin-top: 100px; padding-bottom: 80px;}
.additional-image-one { position: relative; float: left; height: 140px; padding-left:12px; }
.additional-image-two { position: relative; float: right; height: 140px; }
.text-below {margin-top:150px; font-size:10.5px; padding-left:10px;}


/* -------------------- Employee Letter-------------------- */
.full-width-block {overflow: auto;}
.statement-logo { position:relative; left:0; width: 160px; margin-left: 0; }
.two-equal-cols-letter {position:relative; float:left; width: 49%; height: auto; margin-top: 20px; margin-bottom: 30px;}
.report-date-letter {text-align:left; font-weight:bold;}
.letter-text-block {margin-top: 50px;}
.signature-block {position: absolute; bottom: 500px;}
.letter-footer {color: #111111; width: 80%; position: absolute; left:50%; margin-left: -40%; bottom: 50px; }


/* -------------------- Warning Pages -------------------- */
.centered-block {position:relative;overflow: auto; width: 210px; left: 50%; margin-left:-105px;}


/* -------------------- MODALS Styling -------------------- */
.modal {
    display: none; /* Hidden by default */
    position: fixed; z-index: 999; 
    padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; 
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.6); /* Black w/ opacity */
}
.modal-content { background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; width: 80%; }
.close { color: #aaaaaa; float: right; font-size: 28px; font-weight: bold; }
.close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; }
.smaller-modal-content {position: relative; width: 350px; left:50%; margin-left: -175px;}


/* NOTIFICATIONS and Dynamically Coloured Alerts */
.coloured-cell { background: #e066ff; }
.coloured-cell-green {background: #5cd65c;}
.coloured-cell-yellow {background: #ffff4d;}
.coloured-cell-orange {background: #ff8533;}
.coloured-cell-red {background: #ff6666;}
.coloured-cell-blue {background: #66a3ff;}
.coloured-cell-grey {background: #ccc;}
.coloured-cell-white {background: #f2f2f2;}


/* -------------------- PAGINATION Styling --------------------  */
.pagination { display: inline-block; }
.pagination a { color: black; float: left; padding: 8px 16px; text-decoration: none; }
.pagination a.active { background-color: #1a8cff; color: white; }
.pagination a:hover:not(.active) {background-color: #ddd;}
.center { text-align: center; }


/* -------------------- HELP MODAL Styling -------------------- */
.helpModal {
    display: none; /* Hidden by default */
    position: fixed; z-index: 999; 
    padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; 
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.6); /* Black w/ opacity */
}
.helpModal-content { background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; width: 80%; }

/* Add Animation */
@keyframes slideIn {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}




/*
---------------------------------------------------------------
------------- 3. SPECIFIC PAGES STYLE ----------------
---------------------------------------------------------------
------------------- 3.0. Index Page -----------------------
*/
#background {
	position: fixed; top: 0px; left: 0px;
	background-image: url(../Images/Backgrounds/zoltan-kovacs-272632-unsplash.jpg); 
	background-size: cover; background-repeat: no-repeat;
	width: 100%; height: 100%; z-index: 1; filter:blur(3px);
}
.index-page-box {
	border: 1px solid #ccc; border-radius: 2px;
	width: 280px; position: relative; left: 50%; margin-left: -160px;
	margin-top: 80px; margin-bottom: 20px; padding-left: 20px; padding-right: 20px; padding-bottom: 10px;
	background: #fff; z-index: 10; opacity: 0.9;
}
.login-link-button p {
	font-size: 13px; text-align: center; color: #f2f2f2;
	height: 22px; padding-top: 6px;
	background: #0066ff; border-radius: 1px;
	margin-bottom: 2px; margin-top:0px;
	transition: 0.3s;
}
.login-link-button { text-decoration: none; }
.login-link-button p:hover, .login-link-button p:focus {background: #4d94ff; transition: all 0.3s;}
.text-blue { color: #0066ff; }
.website-link-button p { 
	font-size: 13px; text-align: center;
}


/*
------------------- 3.1. Login Page -----------------------
*/
.login-box {
	border: 1px solid #ccc; border-radius: 2px;
	width: 280px; position: relative; left: 50%; margin-left: -160px;
	margin-top: 80px; margin-bottom: 20px; padding-left: 20px; padding-right: 20px; padding-bottom: 10px;
	background: #fff; z-index: 10; opacity: 0.9;
}
.login-stachs-logo {
	width: 200px; position: relative; left: 50%; margin-left: -100px; opacity: 1;transition: all 0.3s;
}
.login-stachs-logo:hover { opacity: 0.7; transition: all 0.3s; }
.login-h3 { text-align: center; margin-top: 0; margin-bottom: 10px; }
.field_name { width: 70%; margin-left: 15%; padding-top: 10px; padding-bottom: 3px; font-family: 'Actor', sans-serif; font-size: 13px; }
.row { position: relative; width: 300px; left: 50%; margin-left: -150px; }
.detail { padding-left: 1%; width: 99%; height: 30px; border: 1px solid #ccc; border-radius: 3px; background: #fff; color: #000; }
.detail:hover { background: #fff; }
.submit { width: 70%; margin-left: 15%; margin-top: 10px; margin-bottom: 20px; }
#submit {
	width: 300px; height: 30px; position: relative; left: 50%; margin-left: -150px;
	cursor: pointer; background: #3385ff; border: #ccc; color: #fff; transition: all 0.3s;
}
#submit:hover { background: #001433; transition: all 0.3s;}
.note { text-align: center; font-size: 12px; color: #4d4d4d; }
.login-page-foot-note {text-align:center; font-size: 12px;color: #4d4d4d;}


/* ------------------- 3.2. Home Page ----------------------- */
.centered-white-block {
	background:#fff; margin-top: 10px; padding-top:5px; padding-bottom:10px; border: 1px solid #ccc; 
	position: relative; width: 99.3%;
}


/* ------------------- 3.3. Trainees Page ----------------------- */
.single-emp-box {border: 1px solid #ccc; background: #fff; margin: 5px; overflow: auto; margin-left: 2px; margin-right: 10px;}
.single-emp-box-colored-one { background: #cce0ff; border: 3px solid #2d8659; }
.single-emp-box-colored-two { background: #99c2ff; border: 3px solid #2d8659; }
.single-emp-box-colored-green { border: 3px solid #2d8659; box-shadow: 2px 2px 5px #ccc; background: #c6ecd9; }
.header-label {background: #adc2eb; margin-top: 0px; padding-top: 5px; padding-bottom: 5px; padding-left: 30px; font-size: 14px; }
.emp-photo {width: 150px; height: auto; margin-top: 15px; position: relative; z-index: 1;}


/* ------------------- 3.3. Trainees Page: Subpage Archive Employee -----------------------  */
.single-emp-box-red {border: 1px solid red; background: #ffe6e6; margin-bottom: 5px; overflow: auto;}


/* ------------------- 3.4. Competency Page ----------------------- */

/* ------------------- 3.5. ID Access Page ----------------------- */

/* ------------------- 3.5. Incidents Page ----------------------- */


/* ------------------- 3.6. Issues Page ----------------------- */
.page-menu {border-bottom: 1px solid #ccc; border-top: 1px solid #e6e6e6; padding-top: 1px; background: #99c2ff; position: relative;
box-shadow: 2px 5px 7px #ccc; z-index: 999; margin-top: -4px; height: 48px;}
.page-menu ul li { display: inline-block; list-style: none; font-size: 13px; padding-right: 3px; border-right: 1px solid #3263cd; }
.page-menu ul li a { color: #333; transition: all 0.3s; text-decoration: none; font-weight:bold; }
.page-menu ul li a:hover, .page-menu ul li a:focus { color: #000; transition: all 0.3s; text-decoration: underline; }


/* ------------------- 3.7. Issues Page ----------------------- */

/* ------------------- 3.8. Profile Page --------------------------- */


/* ----------------- .... Set Up/Costs Page ---------------------- */
.left-block-med {width: 365px;position: relative; float:left;}
.right-block-large {position:relative; float: left;min-width: 800px;}
.page-block {overflow: auto;}



/* --------------------- Additional Random Styling --------------- */

#dataContainer {
    min-height: 800px; /* Or larger if you expect more rows */
}

#wrap {
    padding-bottom: 150px; /* So footer isn't overlapped */
}


/* ------------------ Additional Messages --------------------- */
.success-message {
    color: #31708f;
    background-color: #d9edf7;
    border: 1px solid #bce8f1;
    padding: 10px 15px;
    border-radius: 6px;
    margin: 15px 0;
    font-weight: 600;
}



/*
---------------------------------------------------------------
------------------- 5. MEDIA QUERIES --------------------
---------------------------------------------------------------
*/