/*
Title: Creating an HTML5 enhanced responsive-ready contact form, with custom javascript feature detection
Tutorial on: http://www.onextrapixel.com
Author: http://www.toddmotto.com
*/

* {
	margin:0;
	padding:0;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-font-smoothing:antialiased;
	-moz-font-smoothing:antialiased;
	-o-font-smoothing:antialiased;
	font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}

body {
	font:400 12px/1.625 "Helvetica Neue", Helvetica, Arial, sans-serif;
	color:#444;
	background:#DEDEDE;
}
.wrapper {
	max-width:700px;
	width:100%;
	margin:0 auto;
	position:relative;
}
		/* main sets padding around the container */

.main {
        padding:0px 0px 0px 0px;
}

		/* contact-form sets margins around content in container */


#contact-form input[type="password"],
#contact-form input[type="date"],
#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form input[type="tel"],
#contact-form input[type="url"],
#contact-form textarea,
#contact-form button[type="submit"] {
	font:400 12px/12px "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#contact-form {
	text-shadow:0 1px 0 #FFF;
	border-radius:4px;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	background:#F9F9F9;
	padding: 20px 20px 20px 20px;
	line-height: 1.50;
}
#contact-form h1 {
	display:block;
	font-size:22px;
	text-align: center;
}
#contact-form h2 {
	color:#991D57;
	display:block;
	font-size:18px;
	text-align: center;
}
#contact-form h3 {
	color:#991D57;
	display:block;
	font-size:14px;
}
#contact-form h4 {
	color:#991D57;
	margin:5px 0 15px;
	display:block;
	font-size:12px;
}
#contact-form label span {
	cursor:pointer;
	color:#991D57;
	display:block;
	margin:5px 0;
	font-weight:900;
}
#contact-form input[type="password"],
#contact-form input[type="date"],
#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form input[type="tel"],
#contact-form input[type="url"],
#contact-form textarea {
	width:100%;
	box-shadow:inset 0 1px 2px #DDD, 0 1px 0 #FFF;
	-webkit-box-shadow:inset 0 1px 2px #DDD, 0 1px 0 #FFF;
	-moz-box-shadow:inset 0 1px 2px #DDD, 0 1px 0 #FFF;
	border:1px solid #CCC;
	background:#fff;
	margin:0 0 5px;
	padding:10px;
	border-radius:5px;
}
#contact-form input[type="password"],
#contact-form input[type="date"]:hover,
#contact-form input[type="text"]:hover,
#contact-form input[type="email"]:hover,
#contact-form input[type="tel"]:hover,
#contact-form input[type="url"]:hover,
#contact-form textarea:hover {
	-webkit-transition:border-color 0.3s ease-in-out;
	-moz-transition:border-color 0.3s ease-in-out;
	transition:border-color 0.3s ease-in-out;
	border:1px solid #AAA;
}
#contact-form textarea {
	height:50px;
	max-width:100%;
}
#contact-form button[type="submit"] {
	cursor:pointer;
	width:100%;
	border:none;
	background:#991D57;
	background-image:linear-gradient(bottom, #8C1C50 0%, #991D57 52%);
	background-image:-moz-linear-gradient(bottom, #8C1C50 0%, #991D57 52%);
	background-image:-webkit-linear-gradient(bottom, #8C1C50 0%, #991D57 52%);
	color:#FFF;
	margin:0 0 5px;
	padding:10px;
	border-radius:5px;
}
#contact-form button[type="submit"]:hover {
	background-image:linear-gradient(bottom, #9C215A 0%, #A82767 52%);
	background-image:-moz-linear-gradient(bottom, #9C215A 0%, #A82767 52%);
	background-image:-webkit-linear-gradient(bottom, #9C215A 0%, #A82767 52%);
	-webkit-transition:background 0.3s ease-in-out;
	-moz-transition:background 0.3s ease-in-out;
	transition:background-color 0.3s ease-in-out;
}
#contact-form button[type="submit"]:active {
	box-shadow:inset 0 1px 3px rgba(0,0,0,0.5);
}
#contact-form input:focus,
#contact-form textarea:focus {
	outline:0;
	border:1px solid #999;
	background-color: #FFFFCC;
}
::-webkit-input-placeholder {
    color:#888;
}
:-moz-placeholder {
    color:#888;
}
::-moz-placeholder {
    color:#888;
}
:-ms-input-placeholder {
    color:#888;
}
ul {
    list-style-position: inside;
    padding-left: 2em;
    text-indent: -1em;
}

hr {
border: 0; height: 1px;
background: #333;
background-image: linear-gradient(to right, #ccc, #333, #ccc);
padding: 0px;
margin-top: 0;
margin-bottom: 12px;
}

/* Smart time-off additions; preserve the established request-form look. */
#contact-form input[type="date"] {
    width:100%;
    box-shadow:inset 0 1px 2px #DDD, 0 1px 0 #FFF;
    border:1px solid #CCC;
    background:#fff;
    margin:0 0 5px;
    padding:10px;
    border-radius:5px;
    font:400 12px/12px "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#contact-form input[type="date"]:focus {
    outline:0;
    border:1px solid #999;
    background-color:#FFFFCC;
}
#contact-form .policy-note {
    margin:0 0 16px;
    padding:12px 14px;
    background:#FFF8DC;
    border:1px solid #E2C66B;
    border-radius:4px;
}
#contact-form .test-banner {
    margin:10px 0 14px;
    padding:7px 10px;
    background:#8B0000;
    color:#FFF;
    text-shadow:none;
    text-align:center;
    font-weight:bold;
    border-radius:3px;
}
#contact-form .bot-note {
    margin:8px 0 14px;
}
.honeypot {
    position:absolute !important;
    left:-10000px !important;
    width:1px !important;
    height:1px !important;
    overflow:hidden !important;
}

#contact-form .date-reference {
    min-height:18px;
    margin:0 0 8px 2px;
    color:#555;
    font-size:13px;
    font-weight:bold;
}

/* Unified Schedule Request / Vacation Request additions. */
#contact-form .type-panel { margin:0 0 14px; padding:10px 12px; border-radius:4px; text-shadow:none; }
#contact-form .type-panel strong { display:block; font-size:15px; margin-bottom:2px; }
#contact-form .schedule-panel { background:#eef6ee; border:1px solid #99be99; }
#contact-form .vacation-panel { background:#fff1cc; border:2px solid #d2a23b; }
#contact-form .vacation-fields { margin:12px 0 16px; padding:0; border:0; background:transparent; }
#contact-form .vacation-notice { margin-bottom:12px; padding:10px; background:#fff1cc; border:1px solid #d2a23b; line-height:1.5; }
#contact-form .field-help { margin:4px 0 10px; color:#555; }
#contact-form .compact-note { margin-top:12px; }

/* Unified time-off request additions */
#contact-form select{width:100%;box-sizing:border-box;padding:12px 10px;border:1px solid #CCC;border-radius:4px;background:#FFF;font-size:16px;color:#333;margin-top:6px}
.vacation-rules{background:#fffaf0;border:1px solid #d1a335;border-radius:4px;padding:14px 16px;margin:12px 0 18px}
.vacation-rules h3{margin:0 0 8px;color:#991D57}
.vacation-rules ul{margin:8px 0 10px 20px;padding:0}
.vacation-rules li{margin:6px 0;line-height:1.35}

/* Request type button selector */
#contact-form .request-type-choice { margin:0 0 14px; }
#contact-form .request-type-label { display:block; margin-bottom:7px; color:#991D57; font-weight:bold; }
#contact-form .request-type-buttons { display:flex; gap:10px; flex-wrap:wrap; }
#contact-form .request-type-button {
    width:auto;
    min-width:180px;
    padding:10px 18px;
    margin:0;
    border:1px solid #AAA;
    border-radius:5px;
    background:#F3F3F3;
    color:#333;
    font:600 14px/18px "Helvetica Neue", Helvetica, Arial, sans-serif;
    cursor:pointer;
    text-shadow:none;
}
#contact-form .request-type-button:hover { background:#E8E8E8; }
#contact-form .request-type-button.selected { font-weight:700; }
#contact-form #type-schedule.selected {
    background:#eef6ee;
    border-color:#79aa79;
    color:#245f24;
}
#contact-form #type-vacation.selected {
    background:#fff1cc;
    border-color:#d2a23b;
    color:#6f4b00;
}
#contact-form .request-type-button:focus { outline:2px solid #555; outline-offset:2px; }
@media (max-width:520px) {
    #contact-form .request-type-buttons { display:block; }
    #contact-form .request-type-button { width:100%; margin-bottom:8px; }
}

/* Side-by-side request type comparison */
#contact-form .request-comparison {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0;
    padding:0;
    overflow:hidden;
}
#contact-form .request-comparison-column {
    padding:14px 16px;
    min-width:0;
}
#contact-form .request-comparison-column + .request-comparison-column {
    border-left:1px solid #E2C66B;
}
#contact-form .request-comparison-heading {
    font-weight:700;
    font-size:15px;
    margin:0 0 7px;
    color:#333;
}
#contact-form .request-comparison ul {
    margin:0;
    padding-left:19px;
    text-indent:0;
    list-style-position:outside;
}
#contact-form .request-comparison li {
    margin:4px 0;
    line-height:1.35;
}
@media (max-width:600px) {
    #contact-form .request-comparison { grid-template-columns:1fr; }
    #contact-form .request-comparison-column + .request-comparison-column {
        border-left:0;
        border-top:1px solid #E2C66B;
    }
}

/* Production cleanup: no empty test banner; compact top and small admin link. */
.test-banner{display:none!important}
.employee-admin-link{text-align:center;font-size:11px;margin:8px 0 2px}
.employee-admin-link a{color:#551a8b;text-decoration:underline}

/* Match the comparison guide to the request-type colors used below. */
#contact-form .policy-note.request-comparison {
    background:transparent;
    border:0;
}
#contact-form .request-comparison-column:first-child {
    background:#eef6ee;
    border:1px solid #99be99;
    border-radius:4px 0 0 4px;
}
#contact-form .request-comparison-column + .request-comparison-column {
    background:#fff1cc;
    border:1px solid #d2a23b;
    border-left:0;
    border-radius:0 4px 4px 0;
}
@media (max-width:600px) {
    #contact-form .request-comparison-column:first-child {
        border-radius:4px 4px 0 0;
    }
    #contact-form .request-comparison-column + .request-comparison-column {
        border-left:1px solid #d2a23b;
        border-top:0;
        border-radius:0 0 4px 4px;
    }
}


/* Vacation return-date confirmation */
#contact-form .return-confirm {
    margin:0 0 14px;
    padding:12px 14px;
    background:#fff1cc;
    border:1px solid #d2a23b;
    border-radius:4px;
    text-shadow:none;
}
#contact-form .return-confirm > strong {
    display:block;
    margin-bottom:8px;
    font-size:14px;
}
#contact-form .return-confirm-check {
    display:flex;
    align-items:center;
    gap:8px;
    font-weight:bold;
}
#contact-form .return-confirm-check input[type="checkbox"] {
    width:18px;
    height:18px;
    margin:0;
}
#contact-form .return-confirm-check span {
    display:inline;
    margin:0;
    color:#444;
}

.employee-footer{text-align:center;font-size:10px;line-height:1.45;margin:8px 0 18px;color:#333}

.version-badge{display:inline-block;vertical-align:middle;margin-left:8px;padding:3px 7px;border-radius:10px;background:#e9ecef;color:#555;font-size:11px;font-weight:700;letter-spacing:.4px}

.blackout-warning{margin:8px 0 16px;padding:12px 14px;border:1px solid #c44;background:#fff0f0;color:#5a1111;border-radius:5px;line-height:1.45}.blackout-warning strong{color:#9b0000}

/* R003 request-rule consistency and manager override */
#contact-form .schedule-fields{margin:12px 0 16px;padding:12px;border:1px solid #99be99;background:#f5fbf5;border-radius:4px}
#contact-form .schedule-rules{background:#eef6ee;border:1px solid #99be99;border-radius:4px;padding:14px 16px}
#contact-form .schedule-rules h3{margin:0 0 8px;color:#2f6e2f}
#contact-form .schedule-rules ul{margin:8px 0 0 20px;padding:0}
#contact-form .schedule-rules li{margin:6px 0;line-height:1.35}
#contact-form .manager-override{margin:14px 0 16px;padding:14px 16px;background:#fff0f0;border:2px solid #b33;border-radius:5px}
#contact-form .manager-override h3{margin:0 0 8px;color:#8b0000}
#contact-form .blackout-year{margin-top:8px;padding-top:7px;border-top:1px solid #d9a5a5;font-size:12px;color:#5a1111}

/* R004: keep Schedule/Vacation rule sections parallel and place rules before dates */
#contact-form .request-rules-section{border-radius:4px;padding:14px 16px;margin:12px 0 18px}
#contact-form .request-rules-section h3{margin:0 0 8px}
#contact-form .request-rules-section ul{margin:8px 0 10px 20px;padding:0}
#contact-form .request-rules-section li{margin:6px 0;line-height:1.35}
#contact-form .schedule-rules-section{background:#eef6ee;border:1px solid #99be99}
#contact-form .schedule-rules-section h3{color:#2f6e2f}
#contact-form .vacation-rules-section{background:#fffaf0;border:1px solid #d1a335}
#contact-form .vacation-rules-section h3{color:#991D57}

#contact-form .date-range-summary{margin:-4px 0 12px;padding:7px 10px;border-radius:4px;font-weight:700;font-size:13px;background:#f5f5f5;border-left:4px solid #aaa;color:#333}
#contact-form .schedule-panel ~ .date-range-summary{border-left-color:#79aa79}
#contact-form .manager-override-stop{margin:0 0 10px;padding:10px 12px;background:#ffe3e3;border:1px solid #c55;border-radius:4px;line-height:1.4}

/* R007: request switching cleanup and exception grouping */
#contact-form .date-range-summary:empty{display:none}
#contact-form .exception-zone{margin:0 0 16px}
#contact-form .exception-zone .blackout-warning:last-of-type{margin-bottom:10px}
#contact-form .exception-zone .manager-override{margin-top:10px}

/* R008: separate employee first/last name fields. */
#contact-form .name-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:600px){#contact-form .name-grid{grid-template-columns:1fr;gap:0}}