@media (prefers-color-scheme: dark) {
    :root {
        background: white !important;
        color: #080808;
    }
}
input[type="password"]::-ms-reveal {
    display: none
}
.js #login:nth-child(n+1) { display: none }
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	.js #body-wrapper:nth-child(n+1) {
		display: block;
	}
}
body
.intro, .divider, .create, #forgotPassword, #MFADExchange, #ExternalFederationExchange,#MCTOOLSExchange, .working {
	display: none;
}

body {
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 21px;
	color: #080808;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-stroke: 0.45px rgba(0, 0, 0, 0.1);
}

h1 {
	font-size: 24px;
	margin: 0;
	padding: 0;
	margin-bottom: 24px;
	color: #080808;
	line-height: 30px;
	border-bottom: 1px solid #e0e0e0;
	padding-bottom: 12px;
}

header {
	position: relative;
	padding-bottom: 18px;
	max-width: 960px;
	margin: 0 auto;
}
header .login-mayo-logo {
	width: 50%;
    margin: 2rem auto 0 auto;
}
header .login {
	width: 66%;
	margin: 0 auto;
	float: none;
	text-align: center;
}

header img {
	margin-bottom: 16px;
	height: 56px;
}
header h1 {
	font-size: 32px;
    border: none;
	margin-bottom:16px;
	padding:0;
}
header p {
	margin:4px 0 0 0;
}

p, #signInName, #password, #verifying_blurb {
	font-family: var(--mc-typography-font-family-sans);
}
p, #verifying_blurb {
	font-size: 20px;
    line-height: 28px;
}
.link-create-account {
	font-size: 16px;
}
#signInName, #password {
	font-size: 16px;
}

.flex-break {
	flex-basis: 100%;
	height: 0;
}

.content {
	max-width: 960px;
	margin: 0 auto;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

.content .login-form {
	margin: 0 auto;
	float: none;
	width: 55%;
	border: 1px solid #d6d6d6;
	padding: 50px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
}

.content .login-form label {
	font-family: var(--mc-typography-font-family-sans);
    font-size: clamp(var(--mc-typography-font-size-5x) / var(--mc-typography-font-size-root) * 1 * 1rem, var(--mc-typography-font-size-5x) / 10 * 1vw, var(--mc-typography-font-size-5x) / var(--mc-typography-font-size-root) * 1 * 1rem);
    margin-bottom: 8px;
}

.content .login-form .textContainer{
	padding-bottom: 10px;
}

.content .login-form .dropdown_single,
.content .login-form select{
	padding: 6px;
    height: 32px;
    font-size: 14px;
    border: 1px solid #676662;
    box-sizing: border-box;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    width: 100%
}
#countryCode, #number, input#verify2 {
	font-family: var(--mc-typography-font-family-sans);
    font-size:  16px;
    padding: 10px 30px 10px 14px;
    border-radius: calc(var(--mc-radius-x-small) / var(--mc-typography-font-size-root) * 1 * 1rem);
    border-color: var(--border-color);
    --border-color: #080808;
    border-style: solid;
    border-width: 1px;
    color: #080808;
    outline: none;
	position: relative;
    left: 1px;
	height: 46px;
}
.helpLink.tiny{
	display: none;
}
#codeVerification {
	margin-top:1rem;
}
.content .login-form input[type=text], 
.content .login-form input[type=password],
.content .login-form .dropdown_single,
.content .login-form select{
	margin-top: 10px;
}
.mfa-content, #trouble, .note-verification-code{
	font-family: var(--mc-typography-font-family-sans);
	font-size: calc(var(--mc-typography-font-size-5x) / var(--mc-typography-font-size-root) * 1 * 1rem);
	line-height: 28px;
}
.mfa-content {
	margin-bottom:8px;
}
.required-text {
	font-family: var(--mc-typography-font-family-sans);
    font-size: calc(var(--mc-typography-font-size-4x) / var(--mc-typography-font-size-root) * 1 * 1rem);
	color: var(--mc-color-text-placeholder);
}

.note-verification-code {
	margin: 24px 0 8px 0;
}
#trouble {
	margin: 28px 0;
}
.input .code {
	margin:1rem 0;
}

.content .entry-item, .number{
	margin: 24px 0;
}

.content .secondary-actions, .content .link-account-help {
	display: none;
	text-align: center;
}

.content .entry-item:first-child {
	margin-top: 0;
}

.content .login-form ul, .link-create-account, .secondary-actions > ul > li:nth-child(2) {
	padding: 0;
	margin-bottom: 0 !important;
}

.content .login-form ul li {
	margin: 8px 0;
	list-style: none;
}

.content .login-form ul li a {
	font-size: 16px;
}

.content .login-form ul li a:hover {
	text-decoration-color: var(--mc-color-text-action-hover);
}

.content .login-form #next {
	margin: 0 !important;
}

.content .login-form input,
.content .login-form #next {
	width: 100%;
}

.content .login-form input[type='text'],
.content .login-form input[type='password']{
    padding: 10px 30px 10px 14px;
	margin-top: 5px;
    border-radius: calc(var(--mc-radius-x-small) / var(--mc-typography-font-size-root) * 1 * 1rem);
    border-color: var(--border-color);
    --border-color: #080808;
    border-style: solid;
    border-width: 1px;
    color: #080808;
    outline: none;
}
.content .login-form input[type='text']:hover,
.content .login-form input[type='password']:hover,
#countryCode:hover, #number:hover, input#verify2:hover {
	--border-color: var(--mc-color-border-primary-hover);
}
.content .login-form input[type='text']:focus,
.content .login-form input[type='password']:focus,
#countryCode:focus, #number:focus, input#verify2:focus {
	--border-color: #0057b8;
    box-shadow: 0 0 0 1px var(--border-color);
}

#MFADExchange, #MCTOOLSExchange {
	width:100%;
	margin-top: 16px;
}

.content .login-form .mfaBtnGroup{
	display: flex;
	flex-wrap: nowrap;
	flex-grow: 1;
	text-align: center;
}

.content .login-form .mfaEditBtnGroup{
	margin-top: 2rem;
	display: inline-grid;
}
.content .account-help {
	text-align: center;
}
.link-account-help, #AccountHelpLink {
	font-size: 14px;
}
header h1, .title {
	font-family: var(--mc-typography-font-family-serif);
	font-weight:var(--mc-typography-font-weight-bold);
	line-height: var(--mc-typography-line-height-19x);
	margin-top:0;
}
.title {
	font-size: 32px;
}

#mfaOptionNO, #verifyCode {
	width: 50%;
	margin-right: 24px;
}
#mfaOptionYes, #verifyPhone{
	width: 50%;
}

#mfaOptionEdit,
#mfaOptionUnenroll{
	flex: 1;
}

#continueBtn:disabled{
	background: #b5bbc5;
	cursor: auto;
}

a, #mfaOptionMaybe,
#mfaOptionCancel,
#retryCode.btn-secondary {
	font-family: var(--mc-typography-font-family-sans);
	font-size: calc(var(--mc-typography-font-size-5x) / var(--mc-typography-font-size-root) * 1 * 1rem);
	text-decoration: underline;
	color: var(--text-color);
	text-decoration-color: var(--text-color);
	cursor: pointer;
	--text-color: var(--mc-color-text-action-default);
}
#cancel2 {
	text-align: center;
}
#cancel2 .mc-button {
	text-decoration-color: var(--text-color);
	margin-top: 24px;
}
a:hover, #cancel2:hover .mc-button:hover, #retryCode:hover,
#mfaOptionMaybe:hover, #mfaOptionCancel:hover, #retryCode.btn-secondary:hover {
    --text-color: var(--mc-color-action-primary-hover) !important;
}
#cancel3 {
	text-decoration-color: var(--alert-link-color);
    text-align: left;
}
.mc-notification.global.warning {
	background-color: #ffc845;
}
.call-warning .notification-close {
	width:auto !important;
}
.call-warning .notification-links, .call-warning h2 {
	margin:0;
}
#mfaOptionMaybe{
	margin-top: 25px;
}
.pwWrapper {
	position: relative;
}

.linkMaybe{
	text-align: center;
	margin: 32px 0 0;
}

button,
.content .login-form #verifyCode,
.content .login-form #verifyPhone,
.content .login-form #next {
    display: inline-block;
	margin-top: 20px;
    padding: 0;
    font: inherit;
    cursor: pointer;
    font-family: var(--mc-typography-font-family-sans);
	font-size: 20px;
    background-color: var(--background-color);
    border: var(--button-border-size) solid var(--border-color);
    border-radius: 999vw;
    color: var(--text-color);
    line-height: 1.2em;
    outline-color: var(--outline-color);
    padding-block-end: calc(var(--mc-spacing-1x) / var(--mc-typography-font-size-root) * 1.5 * 1rem);
    padding-block-start: calc(var(--mc-spacing-1x) / var(--mc-typography-font-size-root) * 1.5 * 1rem);
    padding-inline-end: calc(var(--mc-spacing-1x) / var(--mc-typography-font-size-root) * 3 * 1rem);
    padding-inline-start: calc(var(--mc-spacing-1x) / var(--mc-typography-font-size-root) * 3 * 1rem);
    text-decoration: none;
    transition: background-color var(--mc-transition-easing) var(--mc-transition-timing);
    --background-color: #0057b8;
    --border-color: #0057b8;
    --text-color: #ffffff;
    --outline-color: #0057b8;
    --button-border-size: 0;
}
button:hover,
.content .login-form #verifyCode:hover,
.content .login-form #verifyPhone:hover,
.content .login-form #next:hover {
--background-color: #1371d5;
--outline-color: #1371d5; 
}
button:focus {
	border-radius: calc(var(--mc-radius-xx-large) / var(--mc-typography-font-size-root) * 1 * 1rem);
	outline: var(--mc-focus-outline-width) var(--mc-focus-outline-style) var(--outline-color);
    outline-offset: var(--mc-focus-outline-width);
}
.mc-button.tertiary {
	padding: unset;
}
.content .login-form #verifyCode {
	margin-right:20px;
}
.content .login-form #phoneNumbers{
	display: none;
}
.btn-secondary {
    --background-color: transparent;
    --border-color: var(--mc-color-action-primary-default);
    --button-border-size: 2px;
    --text-color: var(--mc-color-action-primary-default); 
}
.btn-secondary:hover {
	--background-color: #fff;
	--border-color: var(--mc-color-action-primary-hover);
    --text-color: var(--mc-color-action-primary-hover);
    --outline-color: var(--mc-color-action-primary-hover);
}
div.phoneNumber>div.number {
	display: none;
}

.content .login-form .pageLevel > p {
	display: -webkit-inline-box;
    border: 2px solid var(--alert-background);
	font-weight: var(--mc-typography-font-weight-bold);
	padding: 1rem;
	margin-top:0;
    border-radius: calc(var(--mc-radius-small) / var(--mc-typography-font-size-root) * 1 * 1rem);
    color: var(--alert-text-color);
    --alert-background: var(--mc-color-signal-error-default);
    --alert-text-color: #080808;
}
.content .login-form .pageLevel,
.content .login-form .itemLevel > p {
	display: flex;
    color: var(--mc-color-signal-error-default);
	margin: 8px 0 0 0;
    font-size: 16px;
}
.content .login-form .itemLevel > p::before {
	content: '';
	display: block;
	background: var(--icon-error);
	background-size: cover;
	width: 20px;
	height: 20px;
	padding-right: 20px;
	margin-right: 8px;
	top: 4px;
    position: relative;
	--icon-error: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0ibWMtaWNvbiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSIjZTQwMDJiIiBhcmlhLWhpZGRlbj0idHJ1ZSIgdmlld0JveD0iMCAwIDMyIDMyIj48cGF0aCBkPSJNMTYsMkExNCwxNCwwLDEsMSwyLDE2LDE0LjAxNTcyLDE0LjAxNTcyLDAsMCwxLDE2LDJabTAsMjZBMTIsMTIsMCwxLDAsNCwxNiwxMi4wMTM3NSwxMi4wMTM3NSwwLDAsMCwxNiwyOFpNMTUsOWgyVjE5SDE1Wm0wLDE1aDJWMjJIMTVaIj48L3BhdGg+PC9zdmc+);
}
.content .login-form .pageLevel > p::before {
	padding-right: 20px;
}
footer > .row {
	width: 100%;
	border-top: 1px solid #e0e0e0;
	padding: 24px;
	text-align: center;
	font-size: 13px;
}

footer ul {
	padding: 0;
}

footer ul li {
	margin: 0;
	padding: 0;
	color: #686868;
	list-style: none;
	margin-bottom: 6px;
	font-size: 13px;
}

footer ul li a {
	font-size: 16px;
	color: #686868;
	text-decoration: underline;
	text-transform: uppercase;
}

footer ul li a:visited {
	color: #717268;
}

.footer ul li:first-child {
	color: #717268;
    text-decoration: underline;
    text-transform: uppercase;
}

.working {
	height: 10px;
	width: auto;
	background: url(data:image/gif;base64,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) no-repeat
		no-repeat
		left center;
}

.hide {
	display: none;
}

.btn-show-pw {
	font-size: 12px;
    font-weight: var(--mc-typography-font-weight-bold);
    position: absolute;
    right: 1px;
    bottom: 1.5px;
    background-color: transparent;
    color: var(--color);
    width: auto !important;
    text-decoration: underline;
	text-decoration-color: var(--color);
	--color: #0057b8; 
}
.btn-show-pw:hover {
	--color: #1371d5;
}
a:focus, .btn-show-pw:focus {
	outline: var(--mc-focus-outline-width) var(--mc-focus-outline-style) #0057b8;
	outline-offset: var(--mc-focus-outline-offset);
	border-radius: calc(6 / var(--mc-typography-font-size-root) * 1 * 1rem);
}
a:focus:not(:focus-visible), .btn-show-pw:focus:not(:focus-visible), button:focus:not(:focus-visible), h2.title:focus, .working:focus, #verifying_blurb:focus {
	outline: none;
}
.content .login-form .buttons{
	display: flex;
}
.body-containers {
	width: 100%;
    min-height: 300px;
    margin: 0 auto;
    display: -webkit-flex;
    display: flex;
}
.body-container-1 {
	float: left;
    display: table-cell;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin-bottom: 3rem;
	min-height: 660px;
}
.body-container-2 {
	display: none;
	width: 33%;
}
.icon-external-link {
	color: #0057b8;
    position: relative;
    top: 3px;
}
/* login custom content - POS */
.pos-content a:hover {
	text-decoration: none !important;
}
/* -------------------------- */


/* app down content - POS */
.app-down-content {
	display: none;
	width: 55%;
    margin: 0rem auto;
	float: none;
    text-align: center;
	margin-top: 2rem;
}
.app-down-pos {
	padding: 1rem 0;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
}
.app-down-pos h2, .app-down-pos h3  {
	font-family: var(--mc-typography-font-family-serif);
    font-weight: var(--mc-typography-font-weight-bold);
	line-height: var(--mc-typography-line-height-19x);
}
.app-down-pos p, .app-down-pos #AccountHelpLink {
	font-size: 16px;
}
.app-down-pos p {
	width: 65%;
    margin: 20px auto;
}
/* -------------------------- */

/* ciam impairment  */
.ciam-impairment {
	display: none;
}

.btn-as-link {
	display: inline-block;
	background-color: unset;
	color: #1372d5;
	text-decoration: underline #1372d5;
	font-size: 16px;
}

@media only screen and (min-width: 1px) and (max-width: 859px) {
	.form-section .label {
		float: none;
		display: block;
		width: 100%;
		text-align: left;
		margin-bottom: 12px;
	}

	.form-section .label label,
	.form-section .label legend,
	.form-section .label h2 {
		text-align: left;
	}
	/* login custom content */
	.body-containers {
		display: grid;
	}
	.body-container-1 {
		margin-bottom: 1rem;
	}
	.body-container-2 {
		width:auto;
	}
	/* login custom content - POS */
	.pos-content {
		padding: 3rem 4rem;
    	top:auto !important;
	}
	/* -------------------------- */
	/* login custom content - CE */
	.ce-content > div {
		padding: 2rem 2rem !important;
	}
	/* -------------------------- */
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
	.content .login-form,
	.header .login {
		width: auto;
		margin: 0 3rem;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	header .login-mayo-logo {
		width: 75%;
	}
	.app-down-content {
		width: 75%;
	}
}

@media only screen and (max-width: 431px) {
	.content .login-form {
		margin: 0 24px;
		padding: 0;
	}
	.content .account-help {
		text-align: left;
		margin: 0 1rem;
	}
	.secondary-actions {
		padding-bottom: 22px;
		border-bottom: 1px solid #D6D6D6;
	}
	header .login-mayo-logo {
		width: 85%;
	}
	.content .login-form {
		border: none;
		width: auto;
	}
	.content .login-form .buttons {
		display: block;
	}
	.mfaBtnGroup, .content .login-form .buttons {
		display: block;
	}
	.mfaOptionNO, .mfaOptionYes, #verifyCode, #verifyPhone {
		width:100%;
	}
	.secondary-actions {
		padding-bottom: 22px;
		border-bottom: 1px solid #D6D6D6;
	}
	.content .account-help {
		text-align: left;
		margin: 0 1rem;
	}

	/* login custom content - POS */
	.pos-content {
		padding: 2rem !important;
	}
	/* ------------------ */
	/* login custom content - CE */
	.ce-content > div {
		padding: 2rem 2rem !important;
	}
	/* -------------------------- */
}
/* CSS Media Hack to Try to fix zoom issue */
@media only screen and (max-width: 720px) {
	html {
		max-width: 720px;
	}
	/* header, 
	.content,
	footer > .row {
		max-width: 100%;
		padding:0 24px;
	} */
}
@media only screen and (max-width: 600px) {
	html {
		max-width: 600px;
	}
}
@media only screen and (max-width: 400px) {
	html {
		max-width: 400px;
	}
}