/*
   This is where you should put all your customisations to the swish.css
   file. Please do not edit swish.css, but instead put all your over-rides
   here.
*/

/* If your language version of the "Home", "Inbox", "Outbox" & "Logout"
 * tabs are too wide for the buttons, you can increase the width of the
 * buttons. Just uncomment this section, changing the "130" for whatever
 * you want, but make sure the "131" is exactly 1 greater than the "130".
#topMenu li a {
  width:130px;
}
#topMenu li {
  width: 131px;
}
#topMenu li.selected {
  width: 131px;
}
*/

/* Uncomment this to make the web site narrower left-to-right */
/* .content {
	width: auto;
	margin-left: auto;
	margin-right: auto;
	margin-top: 30px;
} */

:root {
	/* colors */
	--main-color: #d25d13;
	--highlight-color: #f07f39;
	--background-gray: #efefef;
	--background-color: #ffede0;

	/* fonts */
	--base-font-size: 12pt;
	--base-line-height: 18pt;
	--base-font-weight: 300;
	--bold-font-weight: 700;
	--smaller-font-size: 10pt;
	--smaller-line-height: 14pt;
}

body {
	font-family: 'Open Sans', sans-serif;
	font-size: var(--base-font-size);
	line-height: var(--base-line-height);
	font-weight: var(--base-font-weight);
}

body#zendtobody {
	background-image: none;
	background-color: #efefef;
	font-size: 100%;
}

#container {
	padding-top: 0px;
	padding-left: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
}

.content {
	width: 90%;
	max-width: 1000px;
	margin-top: 10px;
}

/* Content Container Styles */

	.content-container {
		padding-Left: 20px;
		padding-right: 20px;
		padding-top: 20px;
	}	

	.content-container *:first-child {
		margin-top: 0px;
	}

	.content-container h1 {
		margin-top: 0px;
	}

/* END Content Container Styles */

/* Info Container Styles */

	.info-notice {
		padding: 20px;
		background-color: var(--background-gray);
		display: flex;
		flex-direction: row;
		gap: 10px;
		margin-bottom: 20px;
	}

	.info-notice.highlighted {
		background-color: var(--background-color);
	}

	.info-notice .info-content *:first-child {
		margin-top: 0px;
	}

	.info-notice .info-content *:last-child {
		margin-bottom: 0px;
	}

	.info-notice .info-content p {
		font-size: 10.5pt;
		line-height: 16pt;
	}

/* END Info Container Styles */

/* Font Styles */

	h1 {
		font-size: 20pt;
		line-height: 26pt;
	}

	h2 {
		font-size: 16pt;
		line-height: 22pt;
	}

	strong {
		font-weight: var(--bold-font-weight);
	}

	strong.highlight {
		color: var(--main-color);
	}

	a {
		color: var(--main-color);
		text-decoration: underline;
		transition: 0.3s all;
	}

	a:hover, a:focus {
		color: var(--highlight-color);
	}

	p, label {
		font-size: var(--base-font-size);
		line-height: var(--base-line-height);
		font-weight: var(--base-font-weight);
	}

/* END Font Styles */

/* Header Styles */

	#header-container {
		display: flex;
		flex-direction: column;
		gap: 5px;
	}

	#logo {
		height: unset;
		padding-right: 0px;
		padding-left: 0px;
		font-size: 100%;
		align-self: center;
	}

	#topMenu {
		float: none;
		height: unset;
		padding-top: 0px;
		font-size: 100%;
	}

	#topMenu ul {
		margin-left: 0px;
		height: auto;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	#topMenu li, #topMenu li.selected {
		background: var(--main-color);
		border-color: var(--main-color);
		border-width: 2px;
		margin-right: 3px;
		transition: all 0.3s;
		width: auto;
	}

	#topMenu li:hover {
		background: white;
	}

	#topMenu li a {
		width: auto;
		padding-left: 6px;
		padding-right: 6px;
		text-shadow: none;
		font-size: var(--base-font-size);
	}

	#topMenu li:hover a {
		color: #d25d13;
	}

/* END Header Styles */

/* Button Styles */

	a.UD_textbutton, #loginForm input[type="submit"], #AddFilesButton, #RealDropoffButton {
		border: 2px var(--main-color) solid;
		background: var(--main-color);
		transition: all 0.3s;
		text-shadow: none;
	}

	a.UD_textbutton:hover, a.UD_textbutton:focus, #loginForm input[type="submit"]:hover, #loginForm input[type="submit"]:focus, #AddFilesButton:hover, #AddFilesButton:focus, #RealDropoffButton:hover, #RealDropoffButton:focus {
		background: white;
		color: var(--main-color);
	}

/* END Button Styles */

/* Login Form Styles */

	#loginForm {
		display: flex;
		flex-direction: column;
		height: auto;
		width: auto;
		float: none;
		position: relative;
		top: 0;
		margin-right: 0;
		padding: 20px;
		border: none;
		border-radius: 0px;
		background: var(--background-color);
	}

	#loginForm *:first-child {
		margin-top: 0px;
	}

	#loginForm *:last-child {
		margin-bottom: 0px;
	}

	#loginForm label {
		height: auto;
		line-height: auto;
		margin-bottom: 0px;
		margin-right: 0px;
		font-family: 'Open Sans', sans-serif;
	}

	#loginForm input, #loginForm input[type="text"], #loginForm input[type="password"] {
		height: auto !important;
		width: auto !important;
		margin-bottom: 0px;
		margin-right: 0px;
		font-family: 'Open Sans', sans-serif;
	}

	#loginForm input[type="submit"] {
		margin-top: 10px;
	}

/* END Login Form Styles */

/* Login Page Styles */

	form[name="login"] h1 {
		margin-top: 0px;
	}

	form[name="login"] input {
		width: calc(100% - 14px);
	}

/* END Login Page Styles */

/* Drop off Page Styles */

	#newdropoff-boxes #emailLabel, #newdropoff-boxes #emailHolder {
		display: none;
	}

	#newdropoff-boxes #noteLabel, #newdropoff-boxes #fromLabel, #newdropoff-boxes #subjectLabel {
		font-size: var(--base-font-size);
		line-height: var(--base-line-height);
	} 

	#newdropoff-boxes #fromHolder, #newdropoff-boxes #subject {
		margin-bottom: 10px;
	} 

	#newdropoff-boxes {
		grid-template-columns: 100% auto;
	}

	#newdropoff-boxes #subjectLabel {
		grid-column: 1;
		grid-row: 3;
	}

	#newdropoff-boxes #subject {
		grid-column: 1;
		grid-row: 4;
	}

	#newdropoff-boxes #noteHolder #note {
		width: calc(100% - 14px);
	}

	#newdropoff-boxes #noteLengthText {
		margin-right: 0px;
	}

	#progressouter #progressinner {
		background: var(--main-color);
		box-shadow: inset 0 -3px 5px var(--main-color);
	}

/* END Drop off Page Styles */

/* Footer Styles */

	#footer {
		margin-bottom: 20px;
	}

	#footer p:first-child {
		margin-top: 0px;
	}

	#footer p:last-child {
		margin-bottom: 0px;
	}

	#footer p {
		margin-bottom: 5px;
		margin-top: 5px;
		font-size: var(--smaller-font-size);
		line-height: var(--smaller-line-height);
	}

/* END Footer Styles */