@charset "UTF-8";

/***********************************/
/* Sections in this CSS File:      */
/** Basics for the whole page     **/
/** Accessibility toolbar         **/
/** Basic layout                  **/
/** Footer                        **/
/** Page elements                 **/
/** Custom CSS for specific pages **/
/** viewport adjustments          **/
/***********************************/

/** Basics for the whole page **/
@font-face {
    font-family: Lexend;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/lexend-v7-latin/lexend-v7-latin-regular.eot");
    src: local(''), url("../fonts/lexend-v7-latin/lexend-v7-latin-regular.eot?#iefix") format('embedded-opentype'), url("../fonts/lexend-v7-latin/lexend-v7-latin-regular.woff2") format('woff2'), url("../fonts/lexend-v7-latin/lexend-v7-latin-regular.woff") format('woff'), url("../fonts/lexend-v7-latin/lexend-v7-latin-regular.ttf") format('truetype'), url("../fonts/lexend-v7-latin/lexend-v7-latin-regular.svg#Lexend") format('svg')
}

@font-face {
    font-family: Lexend;
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/lexend-v7-latin/lexend-v7-latin-500.eot");
    src: local(''), url("../fonts/lexend-v7-latin/lexend-v7-latin-500.eot?#iefix") format('embedded-opentype'), url("../fonts/lexend-v7-latin/lexend-v7-latin-500.woff2") format('woff2'), url("../fonts/lexend-v7-latin/lexend-v7-latin-500.woff") format('woff'), url("../fonts/lexend-v7-latin/lexend-v7-latin-500.ttf") format('truetype'), url("../fonts/lexend-v7-latin/lexend-v7-latin-500.svg#Lexend") format('svg')
}

@font-face {
    font-family: 'Atkinson Hyperlegible';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/atkinson-hyperlegible-v1-latin/atkinson-hyperlegible-v1-latin-regular.eot");
    src: local(''), url("../fonts/atkinson-hyperlegible-v1-latin/atkinson-hyperlegible-v1-latin-regular.eot?#iefix") format('embedded-opentype'), url("../fonts/atkinson-hyperlegible-v1-latin/atkinson-hyperlegible-v1-latin-regular.woff2") format('woff2'), url("../fonts/atkinson-hyperlegible-v1-latin/atkinson-hyperlegible-v1-latin-regular.woff") format('woff'), url("../fonts/atkinson-hyperlegible-v1-latin/atkinson-hyperlegible-v1-latin-regular.ttf") format('truetype'), url("../fonts/atkinson-hyperlegible-v1-latin/atkinson-hyperlegible-v1-latin-regular.svg#AtkinsonHyperlegible") format('svg')
}

@font-face {
    font-family: 'Atkinson Hyperlegible';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/atkinson-hyperlegible-v1-latin/atkinson-hyperlegible-v1-latin-700.eot");
    src: local(''), url("../fonts/atkinson-hyperlegible-v1-latin/atkinson-hyperlegible-v1-latin-700.eot?#iefix") format('embedded-opentype'), url("../fonts/atkinson-hyperlegible-v1-latin/atkinson-hyperlegible-v1-latin-700.woff2") format('woff2'), url("../fonts/atkinson-hyperlegible-v1-latin/atkinson-hyperlegible-v1-latin-700.woff") format('woff'), url("../fonts/atkinson-hyperlegible-v1-latin/atkinson-hyperlegible-v1-latin-700.ttf") format('truetype'), url("../fonts/atkinson-hyperlegible-v1-latin/atkinson-hyperlegible-v1-latin-700.svg#AtkinsonHyperlegible") format('svg')
}

body {
  font-family: 'Atkinson Hyperlegible', sans-serif;
  font-size: 16px;
  line-height: 24px;
  margin: 0;
  height: 100%;
  --bycs-main-background-color: rgb(239, 239, 239);
  --bycs-background-color: rgb(239, 239, 239);
  --bycs-background-color-alt: rgb(239, 239, 239);
  --bycs-border-default-color: rgb(191, 191, 191);
  --bycs-color-alt:white;
  --bycs-color-grey: rgb(144, 144, 144);
  --bycs-color-grey-dark: rgb(106, 110, 115);
  --bycs-color-grey-darkest: rgb(89, 89, 89);

  --bycs-border-active-color: rgb(123, 147, 178);
  --bycs-border-highlight-color: rgb(123, 147, 178);
  --bycs-link-color: rgb(81, 113, 153);

  --bycs-info-background-color: rgb(215, 243, 254);
  --bycs-success-background-color: rgb(214, 247, 221);
  --bycs-warning-background-color: rgb(253, 248, 222);
  --bycs-error-background-color: rgb(255, 215, 217);

  --bycs-button-hover-color: rgb(217, 99, 32);
  --bycs-button-hover-color-light: rgb(242, 172, 131); /* only used on login page and password reset pages */
  --bycs-button-color-disabled: rgb(248, 199, 171);
  --bycs-button-color: rgb(242, 144, 89);

  --bycs-color-warning: #e00;
  --bycs-color-success: #008a23;
}

.contrast body {
    --bycs-background-color: white;
    --bycs-background-color-alt: black;
    --bycs-color-alt:black;
    --bycs-border-default-color: rgb(28,29,47);
    --bycs-color-grey: white;
    --bycs-color-grey-dark: black;
    --bycs-color-grey-darkest: black;
  
    --bycs-border-active-color: black;
    --bycs-border-highlight-color: rgb(125, 148, 178);
    --bycs-link-color: black;
    --bycs-button-color-disabled: rgb(140, 141, 150);
  
    --bycs-info-background-color: white;
    --bycs-success-background-color: white;
    --bycs-warning-background-color: white;
    --bycs-error-background-color: white;
  
    --bycs-button-hover-color: rgb(123, 147, 178);;
    --bycs-button-hover-color-light: black; /* only used on login page and password reset pages */
    --bycs-button-color: rgb(28,29,47);
  
    --bycs-color-warning: #e00;
    --bycs-color-success: #008a23;
}

a { color: black; caret-color:transparent;}
p, p.mb:last-child { margin: 0 0 1rem 0; line-height: 1.625rem; font-family: Lexend, sans-serif;}
p:last-child { margin-bottom: 0; }
* { box-sizing: border-box; }
.center { text-align: center; }
.bold { font-weight:500; font-family: Lexend, sans-serif; }
.small { font-size:0.8rem; }
.mt-4  { margin-top: 0.5rem; }
.mt-10 { margin-top: 1.5rem; }
.mt-16 { margin-top: 2.5rem; }
.mt-20 { margin-top: 3rem; }

bycs-a11y-toolbar, button {caret-color: transparent;}

/** Accessibility toolbar and icons **/
@font-face {
    font-family: 'Font Awesome 6 Pro';
    font-style: normal;
    font-weight: 300;
    font-display: block;
    src: url("../webfonts/fa-light-300.woff2") format("woff2"), url("../webfonts/fa-light-300.ttf") format("truetype");
}
    
@font-face {
    font-family: 'Font Awesome 6 Pro';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.ttf") format("truetype");
}
  
.fal {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    font-weight: 300;
    text-rendering: auto;
    font-family: 'Font Awesome 6 Pro'
}

.far {
    font-family: 'Font Awesome 6 Pro';
    font-weight: 400;
}

.fa-circle-xmark::before { content: "\f057"; }
.fa-circle-exclamation::before { content: "\f06a"; }
.fa-circle-check::before { content: "\f058"; }
.fa-info-circle::before { content: "\f05a"; }

/** Basic layout **/
.mainarea {
    background-color: var(--bycs-main-background-color);
    min-height: 100vh;
    display:flex;
    flex-direction: column;
  }

.card-pf {
    margin: auto;
    padding: 2.5rem;
    font-size: 1rem;
    background-color:white;
    max-width: 30rem;
    width: 100%;
}

.transition {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: 150ms;
}

/** templates header area **/
#bycs-logo {
    width: 10rem;
    margin: 0 auto;
    display: block;
}

header h1 {
    font-size:1.5rem;
    line-height: 1.4;
    text-align:center;
    font-weight: 500;
    margin: 1.25rem 0 2rem 0;
    font-family: Lexend, sans-serif;
}

#kc-oauth h3 {
    font-weight:normal;
}

#bycs-status-message {
    padding: 1rem;
    background-color: var(--bycs-background-color);
    max-width: 37.5rem;
    width: 100%;
    margin: 2.5rem auto;
    border-left-color: var(--bycs-color-warning);
    border-left-width: 4px;
    border-left-style: solid;
    border-radius: .25rem;
}

.contrast #bycs-status-message {
    border: 2px solid var(--bycs-color-warning);
}

#bycs-status-message .mbs_message_header {
    font-weight:bold;
}

#kc-content .alertbox {
    border: 2px solid;
    border-radius: 22px;
    margin: 2.5rem auto;
    padding: 1rem;
    max-width: 37.5rem;
}

#kc-content .pf-m-success { border-color: var(--bycs-success-background-color); background-color: var(--bycs-success-background-color); }
#kc-content .pf-m-info    { border-color: var(--bycs-info-background-color); background-color: var(--bycs-info-background-color); }
#kc-content .pf-m-warning { border-color: var(--bycs-warning-background-color); background-color: var(--bycs-warning-background-color); }
#kc-content .pf-m-danger  { border-color: var(--bycs-error-background-color); background-color: var(--bycs-error-background-color); }

.contrast #kc-content .pf-m-success { border-color: var(--bycs-color-success); background-color: white; }
.contrast #kc-content .pf-m-info { border-color: black; background-color: white; }
.contrast #kc-content .pf-m-warning, .contrast #kc-content .pf-m-danger  { border-color: var(--bycs-color-warning); background-color: white; }

#kc-content .pf-m-danger h3 {
    font-size: 1rem;
    margin:0;
    line-height:1.625rem;
}

#kc-content .pf-m-danger.developer {
    border-radius: .375rem;
    text-align:center;
}

/* LOGIN_RECOVERY_AUTHN_CODES_CONFIG */
#kc-content .pf-m-warning.pf-m-inline {
    border-color: transparent; background-color: transparent;
}

#kc-content .pf-m-warning.pf-m-inline .pf-c-alert__title {
    font-weight: normal;
    margin:0;
}

#kc-content .pf-m-warning.pf-m-inline .pf-c-alert__description p {
    font-size: .875rem;
    line-height:1.25rem;
}

/* recovery codes */

.kc-recovery-codes-warning {
    background-color: transparent !important;
    border: 0 !important;
    font-weight:normal;
    display:block;
    margin: 0;
    padding: 0 0 1rem 0;
}

.kc-recovery-codes-warning .text-l, .pf-v5-c-form__label-text.text-xl {
    font-size:1rem !important;
}
.kc-recovery-codes-warning .pf-v5-c-alert__icon {
    display:none;
}

#kc-recovery-codes-list {
    list-style:none inside;
    columns: 2;
    padding: 1rem 1rem 0.5rem 1rem;
    margin: 1rem 0;
    border:1px solid var(--bycs-border-default-color);
    font-size:0.75rem;
}

#kc-recovery-codes-list li {
    color: black;
}

#kc-recovery-codes-list li span {
    color: var(--bycs-color-grey-dark);
}

.rcactions button {
    padding:0 1rem 0 0;
    cursor:pointer;
    border: 0 none;
    font-size:1rem;
    font-family: "Atkinson Hyperlegible";
    background: 0 none;
}

.rcactions button i {
    font-family: 'Font Awesome 6 Pro';
    font-style: normal;
    font-weight: 300;
    font-display: block;
}

#printRecoveryCodes i::before { content: "\f02f"; }
#downloadRecoveryCodes i::before { content: "\f019"; }
#copyRecoveryCodes i::before { content: "\f0c5"; }

/* LOGIN_RECOVERY_AUTHN_CODES_CONFIG end */

#kc-content .alertbox span.message {
    font-weight: 700;
    font-size: 1.125rem;
    word-break: break-word;
}

div.subtitle {
    margin-top: 30px;
    text-align:right;
}
div.subtitle span {
    color: var(--bycs-color-grey);
}

.contrast div.subtitle span { color: black;}

/** Footer **/
#footer {
    font-family: Lexend, sans-serif;
    font-size: 1rem;
    line-height: 1.625;
    margin: 0 .25rem .5rem .25rem;
    background-color: var(--bycs-background-color);
}

#footer .row {
    padding:1.25rem 2.5rem;
    max-width:90rem;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    display: flex;
    margin: 0 auto;
}

#footer nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#footer nav ul li {
	margin: 0;
	padding: 0 0 0 1em;
	display:inline-block;
}

#footer a {
    color: black;
    text-decoration: none;
}

/** Page elements **/
.btn, input[type="submit"].btn, button.block {
    border: 0 none;
    padding: .5rem .75rem;
    margin: 0;
    height: 3.75rem;
    width: 100%;
    border-radius: .375rem;
    font-size:1rem;
    font-family: Lexend, sans-serif;
    cursor: pointer;
    background-color: var(--bycs-button-color);
    border-color: var(--bycs-button-color);
    color: white;
    caret-color: transparent;
    margin-bottom:1rem;
}

.btn:hover, input[type="submit"].btn:hover, button.block:hover  {
    background-color: var(--bycs-button-hover-color-light);
}
.btn:hover, .btn:focus, input[type="submit"].btn:hover, input[type="submit"].btn:focus, button.block:hover  {
    caret-color: transparent;
}

.contrast .btn:focus, .contrast #button-do-log-in:focus, .contrast button.arrow-effect:focus  {
    border: 0px none;
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px white, 0 0 0 4px var(--bycs-border-highlight-color);
}

.contrast .btn:hover, .contrast #button-do-log-in:hover, .contrast button.arrow-effect:hover {
    background-color: black;
}

a.btn {
    display: block;
    text-decoration: none;
    text-align: center;
    line-height:2.6rem;
}

.btn.secondary {
    border-color: var(--bycs-border-default-color);
    background-color: var(--bycs-background-color);
    color:black;
}

.btn.secondary:hover {
    background-color: var(--bycs-border-default-color);
    border-color: var(--bycs-border-default-color);
}

.contrast .btn.secondary:hover, .contrast .btn.secondary:focus {
    color:black;
    background-color:white;
    border-color: var(--bycs-border-default-color);
}

label {
    font-family: 'Atkinson Hyperlegible', sans-serif;
    font-size: 1.25rem;
}

input[type="text"], input[type="password"], input:not([type]) {
    border: 1px solid var(--bycs-border-default-color);
    padding: .5rem .75rem;
    margin: 0;
    height: 3.75rem;
    width: 100%;
    border-radius: .375rem;
    font-size:1.125rem;
    font-family: 'Atkinson Hyperlegible', sans-serif;
}

.contrast input[type="text"], .contrast input[type="password"], .contrast input:not([type]) {
    border-width: 2px;
}

input[type="submit"]:not(.btn) {
    background-color: var(--bycs-background-color);
    border-color: var(--bycs-border-default-color);
}

input[type="submit"]:not(.btn):hover {
    background-color: var(--bycs-border-default-color);
    border-color: var(--bycs-border-default-color);
}

.contrast input[type="submit"]:not(.btn):hover {
    background-color: white;
    color: black;
}

input.btn[disabled], input.btn[disabled]:hover, button.btn[disabled], button.btn[disabled]:hover {
    background-color: var(--bycs-button-color-disabled);
    color: white;
    cursor: inherit;
}

input[type=password] {
    padding-right: 40px;
}

input[type=checkbox] {
    height: 1rem;
    width: 1rem;
    background-color: white;
    border: var(--bycs-border-active-color) 1px solid;
    appearance: none;
    padding: 0;
    margin: 0 2px -2px 0;
    caret-color: transparent;
    display:inline-block;
}

.contrast input[type=checkbox]:focus {
    box-shadow: 0 0 0 2px white, 0 0 0 4px black;
}

input[type=checkbox]:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
    background-color: var(--bycs-border-active-color);
    appearance: none;
}

button.toggle-password-eye-icon::before {
    content: "\f06e";
    padding-right:1px;
}

button.toggle-password-eye-icon-slash::before {
    content: "\f070";
}

.toggle-password-eye-icon, .toggle-password-eye-icon-slash {
    position:absolute;
    margin-right: 0.75rem;
    padding: 0.3rem 0.2rem;
    right: 0;
    top: 1.25rem;
    font-size:1rem;
    background-color: transparent;
    border: 0 none;
    cursor:pointer;
}

.input-wrapper {
    position:relative;
}

input:focus {
    border-color: var(--bycs-border-active-color);
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 1px var(--bycs-border-highlight-color);
}

div.formgroup {
    margin-top: 1rem;
    line-height:1.6;
}

div.block {
    margin-bottom:1rem;
    border: 2px solid var(--bycs-border-default-color);
    padding: 0.5rem;
    border-radius:.375rem;
}

/** Custom CSS for specific pages **/

/* Login button on login page and other page */
#button-do-log-in:hover, button.arrow-effect:hover  {
    background-color: var(--bycs-button-hover-color-light);
}

#button-do-log-in span, button.arrow-effect span {
    display: inline-block;
    padding: 0 .375rem 0 0;
    transition: padding 150ms ease;
}

#button-do-log-in:hover span, button.arrow-effect:hover span  {
    padding: 0 0 0 .375rem;
}

/* LOGIN_RECOVERY_AUTHN_CODES_CONFIG */
#kcRecoveryCodesConfirmationCheck, #kc-recovery-codes-settings-form, #saveRecoveryAuthnCodesBtn {
    margin-top:1rem;
}

label[for="kcRecoveryCodesConfirmationCheck"], #kc-recovery-codes-settings-form label {
    font-size: 1rem;
}

/* Buttons on LOGIN_IDP_LINK_CONFIRM, LOGIN_IDP_LINK_CONFIRM_OVERRIDE are stuck together */

#linkAccount {
    margin-top:1rem;
}

/* error.tpl */
div.content-last {
    text-align: center;
    margin-top: 2.5rem;
    font-size: 1.125rem;
    line-height: 1.5;
    font-weight: 500;
}

div.content-last.adjusted, div.content-last.adjusted:hover, div.content-last.adjusted:focus {
    margin-top: 1.5rem;
    color: black;
}

div.content-last.adjusted a, div.content-last.adjusted a:hover, div.content-last.adjusted a:focus {
    color: black;
    font-size: 1rem;
}

div.content-last.adjusted .small {
    margin-top:2rem;
}

div.content-last.adjusted .small a {
    font-size: 0.9rem;
}

/* update password */
.pwd-different-message, .error-message, .error {
    color: var(--bycs-color-warning);
}

li.criterion {
    color: var(--bycs-color-grey-darkest);
    list-style: none;
    position: relative;
    margin-left: 0;
}

#password-criteria {
    padding:0;
    margin:0;
}

li.criterion:before {
    color: var(--bycs-color-grey-darkest);
    font-family: "Font Awesome 6 Pro";
    font-weight: 300;
    content: "\f111";
    margin-right: 8px;
    font-size: 1rem;
}

li.criterion.met:before {
    content: "\f058";
}

li.criterion.met, li.criterion.met:before {
    color: var(--bycs-color-success);
}

li.criterion.error:before {
    content: "\f057";
}

li.criterion.error, li.criterion.error:before {
    color: var(--bycs-color-warning);
}

#criterion-icon-info {
    border: 0 none;
    background-color:transparent;
    cursor:pointer;
}

#criterion-info-text {
    position: absolute;
    top:-4.5rem;
    font-size:1rem;
    line-height:1.625rem;
    font-family: Atkinson Hyperlegible, sans-serif;
    left: 20%;
    right: 0;
    display: none;
    background-color: white;
    color: black;
    text-align: left;
    border-radius: 3px;
    padding: 7px 7px 7px 12px;
    z-index: 1;
    box-shadow: 0 2px 5px var(--bycs-border-default-color);
    cursor: pointer;
}

/* bycs-otp */
#kc-lost-mfa-device-message {
    display: none;
}

#kc-new-mfa-device-message {
    display: none;
}

#new-mfa-device-button, #lost-mfa-device-button {
    font-size:1rem;
    font-family: Lexend, sans-serif;
    font-weight:500;
    border: 0px none;
    background-color: transparent;
}

#new-mfa-device-button::before, #lost-mfa-device-button::before {
    color: black;
    font-family: "Font Awesome 6 Pro", serif;
    font-weight: 600;
    margin-right: 5px;
    font-size: 1rem;
    cursor:pointer;
}

#lost-mfa-device-button::before {
    content: "\f105";
}

#new-mfa-device-button::before {
    content: "\f105";
}
    
#new-mfa-device-button, #lost-mfa-device-button {
    cursor:pointer;
}

/* login_password */

#kc-form-login hr {
    display:none;
}

#kc-form-login .formgroup div {
    position:relative;
}

#kc-form-login button[aria-controls="password"]::before {
    content: "\f06e";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    font-weight: 300;
    text-rendering: auto;
    font-family: 'Font Awesome 6 Pro';
    margin:0;
}
#kc-form-login button[aria-controls="password"] {
    position:absolute;
    margin-right: 0.75rem;
    padding: 0.3rem 0.2rem;
    right: 0;
    top: 1rem;
    font-size:1rem;
    background-color: transparent;
    border: 0 none;
    cursor:pointer;
}

#kc-terms-text {
    margin-bottom: 1rem;
}

#kc-terms-text ol {
    margin:0; padding: 0;
    list-style-type: none;
}

/** viewport adjustments **/

@media (max-width:1023px) {
	#footer {
		text-align:center;
	}
	#footer .row {
		flex-direction: column;
	}
	#footer .copyright {
		order: 2;
	}
	#footer nav {
		order: 1;
		margin-bottom: 1.5em;
	}
}