:root {

	--irc--palette--dark-blue-100: #253355;
	--irc--palette--purple-100: #5A2A82;
	--irc--palette--teal-100: #3ABBBA;
	--irc--palette--teal-200: #32A1A0;
	--irc--palette--orange-100: #FF681E;
	--irc--palette--orange-200: #FF5400;

	--pf-global--primary-color--100: var(--irc--palette--orange-100);
	--pf-global--primary-color--200: var(--irc--palette--orange-200);
	--pf-c-tile--after--BackgroundColor: var(--irc--palette--orange-100) !important;

}

.login-pf body {

	background: url(https://sso.irc.ugent.be/auth/resources/2b079/login/schedule.irc.ugent.be/vendor/patternfly-v3/img/bg-login.jpg) no-repeat center center fixed;
	background-color: var(--irc--palette--dark-blue-100) !important;
	background-size: cover;
	background-blend-mode: color-dodge;
	min-height: 100vh;
	height: auto;
	padding-bottom: 8em;
}

#kc-header-wrapper {

	padding-top: 20px;
}

div.kc-logo-text {
	background-image: url(../img/vib_rf_inflammation_research_rgb_neg.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center; 
	width: auto;
	margin: 0 auto;
}

.pf-c-form-control:hover, .pf-c-form-control:focus {
    border-bottom-color: var(--irc--palette--teal-100);
}

.kc-header-text {

	padding-top: 2em;
	font-size: 0.7em;
}

.login-pf input:focus,
.login-pf input:focus-visible {

	outline: solid var(--irc--palette--teal-200) 0.5px;
} 

/* TOTP TILES */

.pf-c-tile {
	margin-right: 1em;
}

.pf-c-tile:last-child {
	margin-right: 0;
}

/* Hide plain radio buttons and use label decorations to indicate selected state */
/*
 * .-- This thing
 * | +--------------+
 * v |              |
 * O |    Aegis     |
 *   |              |
 *   ================
 */
input[type="radio"].pf-c-tile__input {
	display: none;
}

/* Add orange border around selected label */
/*
 *  +--------------+
 *  |              |
 *  |    Aegis     |--> this thing
 *  |              |
 *  ================
 */
.pf-c-tile__input:checked + .pf-c-tile::before {
	border: solid var(--irc--palette--orange-100) 1px;
	--pf-c-tile--after--BackgroundColor: var(--irc--palette--orange-100) !important;
}

/* Change blue bottom tile hover to IRC default colors */
/*
 *  +--------------+
 *  |              |
 *  |    Aegis     |
 *  |              |
 *  ================ <-- this thing
 */
.pf-c-tile__input:checked + .pf-c-tile,
.pf-c-tile:hover {
	--pf-c-tile--after--BackgroundColor: var(--irc--palette--orange-100) !important;
}