/* Include imports for any custom fonts here */
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");


/********************************************************************
	SITE THEME
********************************************************************/
:root {
	/*
	To skin Memberlink to match the client website basic branding, you only need to update
	the following theme variables.
	
	Colours, font and logo are pulled from the client website - if doing this manually you'll
	have to use your best judgement as to which colour represents the primary, secondary, etc.
	The comments on each theme variable will give you an idea of what parts of the site each
	colour typically represents - ultimately the goal is to apply the colours in a way that
	will match the client website as closely as possible.
	*/
	
	--logo-image: url("../images/seiu1107-logo.png");
	--logo-image-width: 130px;
	--logo-image-height: 110px;
	--font-family: "Roboto";
	
	/* The colour used most on the site; applied to things like the header etc. */
	--colour-primary: #552480;
	--colour-on-primary: #ffffff;
	/* The most used colour that complements the primary colour */
	--colour-secondary: #e7d6fc;
	--colour-on-secondary: #000000;
	/* A common accent colour, often used for smaller elements like buttons / hovers */
	--colour-tertiary: #ffce0a;
	--colour-on-tertiary: #000000;
	
	--colour-surface: #eeeeee;
	--colour-surface-bright: #ffffff;
	--colour-surface-dim: #bbbbbb;
	--colour-on-surface: #000000;
	
	/* By default all sections / components use the theme styles defined above; if more
	fine-grained control is needed then individual component styling is available via
	the variables below. */
	
	--global-background-colour: var(--colour-surface-bright);
	--global-text-colour: var(--colour-on-surface);
	--global-text-size: 1.7rem;
	--global-hyperlink-text-colour: var(--colour-primary);
	--global-hyperlink-hover-text-colour: lch(from var(--global-hyperlink-text-colour) calc(l - 5) c h);
	--global-hyperlink-font-family: var(--font-family);
	--global-h-tag-font-family: var(--global-font-family);
	--global-h-tag-text-colour: var(--colour-on-surface);
	
	--login-h-tag-text-colour: var(--colour-on-surface);
	--login-h-tag-font-family: var(--font-family);
	--login-background-colour: var(--colour-secondary);
	--login-panel-background-colour: var(--colour-surface-bright);
	--login-panel-text-colour: var(--colour-on-surface);
	--login-panel-container-background-colour: var(--colour-secondary);
	
	--header-background-colour: var(--colour-primary);
	--header-text-colour: var(--colour-on-primary);
	--header-font-family: var(--font-family);
	--header-hyperlink-text-colour: var(--colour-secondary);
	--header-hyperlink-hover-text-colour: lch(from var(--header-hyperlink-text-colour) calc(l - 5) c h);
	--header-hyperlink-font-family: var(--header-font-family);
	
	--nav-background-colour: var(--colour-secondary);
	--nav-hover-background-colour: lch(from var(--nav-background-colour) calc(l - 5) c h);
	--nav-text-colour: var(--colour-on-secondary);
	--nav-hover-text-colour: var(--colour-on-secondary);
	--nav-font-family: var(--font-family);
	
	--button-background-colour: var(--colour-tertiary);
	--button-hover-background-colour: lch(from var(--button-background-colour) calc(l - 5) c h);
	--button-text-colour: var(--colour-on-tertiary);
	--button-hover-text-colour: var(--colour-on-tertiary);
	--button-font-family: var(--font-family);
		
	--panel-background-colour: var(--colour-surface-bright);
	--panel-text-colour: var(--colour-on-surface-bright);
	--panel-font-family: var(--font-family);
	--panel-h-tag-text-colour: var(--colour-on-surface-bright);
	--panel-h-tag-font-family: var(--panel-font-family);
	
	--post-article-background-colour: var(--colour-surface-bright);
	--post-article-text-colour: var(--colour-on-surface-bright);
	--post-article-font-family: var(--font-family);
	--post-article-h-tag-text-colour: var(--colour-on-surface-bright);
	--post-article-h-tag-font-family: var(--panel-font-family);
	--post-article-text-faded-colour: lch(from var(--post-article-text-colour) calc(l - 50) c h);
	--post-article-text-faded-font-family: var(--post-article-font-family);
	
	--table-header-background-colour: var(--colour-surface);
	--table-header-text-colour: var(--colour-on-surface);
	--table-header-font-family: var(--font-family);
	--table-background-colour: var(--colour-surface-bright);
	--table-background-colour-alternating: lch(from var(--table-background-colour) calc(l - 5) c h);
	--table-text-colour: var(--colour-on-surface);
	--table-font-family: var(--font-family);
	--table-hyperlink-text-colour: var(--colour-on-surface);
	--table-hyperlink-hover-text-colour: var(--colour-primary);
	
	--calendar-background-colour: var(--colour-surface-bright);
	--calendar-text-colour: var(--colour-on-surface-bright);
	--calendar-font-family: var(--font-family);
	--calendar-border-colour: var(--colour-surface);
	--calendar-header-background-colour: lch(from var(--calendar-background-colour) calc(l - 5) c h);
	--calendar-header-text-colour: var(--colour-on-surface-bright);
	--calendar-header-font-family: var(--calendar-font-family);
	--calendar-header-hyperlink-text-colour: var(--colour-primary);
	--calendar-header-hyperlink-hover-text-colour: lch(from var(--calendar-header-hyperlink-text-colour) calc(l - 5) c h);
	--calendar-footer-background-colour: lch(from var(--calendar-background-colour) calc(l - 5) c h);
	--calendar-footer-text-colour: var(--colour-on-surface-bright);
	--calendar-footer-font-family: var(--calendar-font-family);
	--calendar-footer-hyperlink-text-colour: var(--colour-primary);
	--calendar-footer-hyperlink-hover-text-colour: lch(from var(--calendar-footer-hyperlink-text-colour) calc(l - 5) c h);
}


/********************************************************************
	GLOBAL STYLES
********************************************************************/
body {
	background: none var(--global-background-colour) !important;
	font-family: var(--font-family) !important;
	color: var(--global-text-colour) !important;
}

body, div, dl, dt, dd, ul, ol, li, pre, form, fieldset, p, blockquote, th, td, label, .datafield span, .datafield div {
  font-size: var(--global-text-size);
  line-height: 1.75;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--global-h-tag-font-family) !important;
  color: var(--global-h-tag-text-colour) !important;
}

h4 { font-size: 24px !important; }

a {
	color: var(--global-hyperlink-text-colour) !important;
	font-family: var(--global-hyperlink-font-family) !important;
}
a:hover {
	color: var(--global-hyperlink-hover-text-colour) !important;
}

tr.even, table tbody tr.even, tr.even td {
	background: var(--table-background-colour-alternating) !important;
}
table, tbody, tr, td {
	background-color: var(--table-background-colour) !important;
	color: var(--table-text-colour) !important;
	font-family: var(--table-font-family) !important;
}
thead, thead tr {
	background: var(--table-header-background-colour) !important;
	color: var(--table-header-text-colour) !important;
	font-family: var(--table-header-font-family) !important;
}

table a {
	color: var(--table-hyperlink-text-colour) !important;
}
table a:hover {
	color: var(--table-hyperlink-hover-text-colour) !important;
}

.dataTables_info {
	color: var(--panel-text-colour) !important;
}

.row {
	width: 1170px;
}

#content_wrapper {
	background: var(--global-background-colour) !important;
}


/********************************************************************
	HEADER & NAVIGATION
********************************************************************/
header.header_wrapper {
	height: auto !important;
	background: none var(--header-background-colour) !important;
	color: var(--header-text-colour) !important;
}

header .logoimage {
	background: var(--logo-image) center center no-repeat !important;
	background-size: contain !important;
	width: var(--logo-image-width);
	height: var(--logo-image-height);
	display: inline-block;
}

header a {
	color: --var(header-hyperlink-text-colour) !important;
	font-family: var(--header-hyperlink-font-family) !important;
}
header a:hover {
	color: --var(header-hyperlink-hover-text-colour) !important;
}

#content_nav {
	font-family: var(--nav-font-family) !important;
	font-weight: 700;
	min-height: 45px;
	--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), var(--tw-shadow);
}

#content_nav nav {
	background: var(--nav-background-colour) !important;
}

#content_nav nav ul ul {
	background-color: var(--colour-surface) !important;
}

#content_nav nav li {
	border: none;
	background: none !important;
	box-shadow: none !important;
}

#content_nav nav li:hover {
	background: var(--nav-hover-background-colour) !important;
}

#content_nav nav li a {
	color: var(--nav-text-colour) !important;
	padding-left: 9px;
	font-size: 16px;
	padding: 8px 16px;
}

#content_nav nav li a:hover {
	color: var(--nav-hover-text-colour) !important;
	text-decoration: none;
}

#content_nav nav li a.current {
	color: var(--nav-text-colour);
}

li.haschildren {
	position: relative;
}

li.haschildren::after {
	content: "";
	width: 5px;
	height: 5px;
	border-bottom: 2px solid var(--nav-text-colour);
	border-right: 2px solid var(--nav-text-colour);
	display: inline-block;
	position: absolute;
	transform: rotate(45deg);
	top: 21px;
	right: 16px;
	transition: 0.2s;
}

@media all and (min-width: 768px) {
	li.haschildren:hover::after {
		transform: rotate(225deg);
		top: 25px;
	}

	li {
		padding-left: 0 !important;
	}
	.haschildren {
		overflow: unset !important;
	}
	#content_nav ul ul {
		padding-left: 0 !important;
		background: var(--nav-background-colour) !important;
	}
	#content_nav li li {
		padding-left: 0 !important;
	}
	#content_nav a {
		text-decoration: none !important;
		font-size: 14px !important;
	}
}


/********************************************************************
	BUTTONS & LINKS
********************************************************************/
.button, .button.button-edit {
	background-color: var(--button-background-colour) !important;
	background-image: none;
	border: 0 !important;
	font-family: var(--button-font-family) !important;
	text-transform: uppercase;
	color: var(--button-text-colour) !important;
	border-radius: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center !important;
	padding: 8px 16px !important;
	min-height: 42px !important;
	width: fit-content;
}

.button:hover, .button.button-edit:hover {
	background-color: var(--button-hover-background-colour) !important;
	color: var(--button-hover-text-colour);
	text-decoration: none;
}


/********************************************************************
	PANELS
********************************************************************/
#content_wrapper .shadedpanel {
	background: var(--panel-background-colour) !important;
	color: var(--panel-text-colour) !important;
	font-family: var(--panel-font-family) !important;
	border-radius: 0 !important;
	border: 0 !important;
	box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;
}

#content_wrapper .shadedpanel h1,
#content_wrapper .shadedpanel h2,
#content_wrapper .shadedpanel h3,
#content_wrapper .shadedpanel h4,
#content_wrapper .shadedpanel h5 {
	color: var(--panel-h-tag-text-colour);
	font-family: var(--panel-h-tag-font-family);
}

#content_wrapper .shadedpanel label {
	color: var(--panel-text-colour);
}

.passworddescription {
	color: var(--panel-text-colour);
}

#content_wrapper .panel h4.head-icon-yourinfo,
#content_wrapper .panel h4.head-icon-quicklinks,
#content_wrapper .panel h4.head-icon-quickcontacts {
  padding-left: 0;
  background: none;
}


/********************************************************************
	POSTS / ARTICLES
********************************************************************/
.postarticle {
	background-color: var(--post-article-background-colour);
	color: var(--post-article-text-colour);
	font-family: var(--post-article-font-family);
}

.postarticle h3 {
	color: var(--post-article-h-tag-text-colour);
	font-family: var(--post-article-h-tag-font-family);
}

ul.article-meta li {
	color: var(--post-article-text-faded-colour) !important;
	font-family: var(--post-article-text-faded-font-family);
}


/********************************************************************
	LOGIN PAGE
********************************************************************/
.login {
	background-color: var(--login-background-colour) !important;
}

.login #content_wrapper {
	background-image: none !important;
	background-size: cover;
	background-color: var(--login-background-colour) !important;
}

.loginimage {
	background: none !important;
	display: none !important;
}

.login #content_wrapper .shadedpanel {
	background: var(--login-panel-background-colour) !important;
	background-image: none !important;
	color: var(--login-panel-text-colour) !important;
}

.login .smallfont {
	margin-top: 1rem;
}

.login .logindivider { display: none !important; }

.login .leftloginpanel {
	border-right: 1px solid black;
}

.login #ctl00_Body___101__chkRememberMe__1 {
	white-space: nowrap;
	display: flex;
	align-items: center;
}

.login #content_nav {
	display: none;
}

.login h1, .login h2, .login h3, .login h4, .login h5 {
	color: var(--login-h-tag-text-colour) !important;
	font-family: var(--login-h-tag-font-family);
}

.login .alwayslabel {
	color: var(--login-panel-text-colour) !important;
}

.login a {
	color: var(--login-panel-text-colour) !important;
}


/* Desktop-specific styling */
@media all and (min-width: 768px) {
	.login #ctl00_Body___101__divLoginPanelB__1 {
		font-size: 84%;
	}
	.login #ctl00_Body___101__divLoginPanelB__1 a[data-buttonname=lnkForgotUsername] {
		margin-top: 88px !important;
	}
	.login #ctl00_Body___101__divLoginPanelB__1 a[data-buttonname=lnkForgotPassword] {
		margin-top: 55px !important;
	}
	.login #ctl00_Body___101__chkRememberMe__1 {
		margin-top: 3px;
		font-size: 84%;
	}
	.login #ctl00_Body___101__divSubmitLeft__1 {
		padding-left: 0 !important;
	}
}


/********************************************************************
	FORM ELEMENTS
********************************************************************/
input {
	border-radius: 0 !important;
}
input[type=text], input[type=password] {
	min-height: 33px;
	width: 100%;
}

textarea {
	min-height: 85px;
	max-width: 100%;
}

select {
	width: 100% !important;
}

.emaillink {
	margin-top: 37px;
	display: inline-block;
}

.alwayslabel {
	background: none;
	padding-left: 5px;
	border-radius: 0;
	text-transform: uppercase;
	font-size: 14px;
	width: 100% !important;
	color: var(--global-text-colour);
}

label {
	margin-bottom: 18px;
}


/********************************************************************
	EVENT CALENDAR
********************************************************************/
div.eventcalendar div.topcalendarbar {
	background-color: var(--calendar-header-background-colour) !important;
	color: var(--calendar-header-text-colour);
	font-family: var(--calendar-header-font-family);
}
div.eventcalendar div.topcalendarbar a {
	color: var(--calendar-header-hyperlink-text-colour) !important;
}
div.eventcalendar div.topcalendarbar a:hover {
	color: var(--calendar-header-hyperlink-hover-text-colour) !important;
}
div.eventcalendar div.daysofweek {
	background-color: var(--calendar-header-background-colour) !important;
	color: var(--calendar-header-text-colour);
	font-family: var(--calendar-header-font-family);
}

div.eventcalendar div.calendardays {
	color: var(--calendar-text-colour);
	font-family: var(--calendar-font-family);
	background-color: var(--calendar-background-colour);
	border: 1px solid var(--calendar-border-colour);
}

div.eventcalendar div.bottomcalendarbar {
	background-color: var(--calendar-footer-background-colour);
	color: var(--calendar-footer-text-colour);
	font-family: var(--calendar-footer-font-family);
}
div.eventcalendar div.bottomcalendarbar a {
	color: var(--calendar-footer-hyperlink-text-colour) !important;
}
div.eventcalendar div.bottomcalendarbar a:hover {
	color: var(--calendar-footer-hyperlink-hover-text-colour) !important;
}

div.eventcalendardetails {
	background-color: var(--colour-surface-bright);
	color: var(--colour-on-surface);
	font-family: var(--calendar-font-family);
	padding-left: 10px;
	padding-right: 10px;
}


/********************************************************************
	FOOTER
********************************************************************/
footer {
	background: var(--colour-tertiary) !important;
}

footer #footer {
	border: none;
}

footer #footer div {
	color: var(--colour-on-tertiary);
	font-size: 1.3rem;
}


#errorContainer p {
	border-radius: 0;
}