/*
 * Authelia Login Portal - Forest Emerald Theme
 * Generated on 2026-07-14
 */

:root {
  --main-bg-color: #0d1b15;
  --modal-bg-color: #12261d;
  --modal-header-color: #12261d;
  --modal-footer-color: #12261d;
  --drop-down-menu-bg: #12261d;

  --button-color: #10b981;
  --button-color-hover: #fbbf24;
  --button-text: #ecfdf5;
  --button-text-hover: #0d1b15;

  --accent-color: 16, 185, 129; /* rgb for #10b981 */
  --accent-color-hover: #fbbf24;
  --link-color: #34d399;
  --link-color-hover: #fcd34d;
  --label-text-color: #a7f3d0;
    
  --text: #ecfdf5;
  --text-hover: #ffffff;
  
  --arr-queue-color: #10b981;
  --plex-poster-unwatched: #ef4444;
}

::-webkit-input-placeholder {
  color:var(--text-muted)!important
}
:focus::-webkit-input-placeholder {
  color:var(--text-hover)!important
}
:-moz-placeholder {
  color:var(--text-muted)!important
}
:focus:-moz-placeholder {
  color:var(--text-hover)!important
}
::-moz-placeholder {
  color:var(--text-muted)!important
}
:focus::-moz-placeholder {
  color:var(--text-hover)!important
}
:-ms-input-placeholder {
  color:var(--text-muted)!important
}
:focus:-ms-input-placeholder {
  color:var(--text-hover)!important
}
:root {
  --transparency-dark-05:rgba(0, 0, 0, .05);
  --transparency-dark-10:rgba(0, 0, 0, .10);
  --transparency-dark-15:rgba(0, 0, 0, .15);
  --transparency-dark-25:rgba(0, 0, 0, .25);
  --transparency-dark-35:rgba(0, 0, 0, .35);
  --transparency-dark-40:rgba(0, 0, 0, .40);
  --transparency-dark-45:rgba(0, 0, 0, .45);
  --transparency-dark-50:rgba(0, 0, 0, .50);
  --transparency-dark-55:rgba(0, 0, 0, .55);
  --transparency-dark-60:rgba(0, 0, 0, .60);
  --transparency-dark-65:rgba(0, 0, 0, .65);
  --transparency-dark-70:rgba(0, 0, 0, .70);
  --transparency-dark-75:rgba(0, 0, 0, .75);
  --transparency-dark-80:rgba(0, 0, 0, .80);
  --transparency-dark-85:rgba(0, 0, 0, .85);
  --transparency-dark-90:rgba(0, 0, 0, .90);
  --transparency-light-05:rgba(255, 255, 255, .05);
  --transparency-light-10:rgba(255, 255, 255, .10);
  --transparency-light-15:rgba(255, 255, 255, .15);
  --transparency-light-20:rgba(255, 255, 255, .20);
  --transparency-light-25:rgba(255, 255, 255, .25);
  --transparency-light-30:rgba(255, 255, 255, .30);
  --transparency-light-35:rgba(255, 255, 255, .35);
  --transparency-light-45:rgba(255, 255, 255, .45);
  --transparency-light-50:rgba(255, 255, 255, .50);
  --transparency-light-55:rgba(255, 255, 255, .55);
  --transparency-light-95:rgba(255, 255, 255, .95)
}
:root body {
  background:var(--main-bg-color);
  background-repeat:repeat,no-repeat;
  background-attachment:fixed,fixed;
  background-position:center center,center center;
  background-size:auto,cover;
  -webkit-background-size:auto,cover;
  -moz-background-size:auto,cover;
  -o-background-size:auto,cover;
  color:var(--text)
}
.MuiTypography-root {
  color:var(--text)
}
button[aria-label="toggle password visibility"] {
  color:var(--text)
}
button[aria-label="toggle password visibility"]:hover {
  --IconButton-hoverBg:rgba(from var(--accent-color-hover) r g b / 0.08)
}
[class*="-rememberMe"] .MuiFormControlLabel-label.Mui-disabled {
  color:rgba(from var(--text) r g b / .5)
}
svg#UserSvg[class*="-icon"] {
  fill:var(--text-hover)
}
.MuiButton-colorInfo,.MuiButton-colorPrimary {
  --variant-containedBg:var(--button-color);
  --variant-containedColor:var(--button-text);
  --variant-textColor:rgb(var(--accent-color));
  --variant-outlinedColor:rgb(var(--accent-color))
}
.MuiButton-colorInfo:hover,.MuiButton-colorPrimary:hover {
  --variant-containedBg:var(--button-color-hover);
  --variant-containedColor:var(--button-text-hover);
  --variant-textColor:var(--accent-color-hover);
  --variant-outlinedColor:var(--accent-color-hover);
  --variant-textBg:rgba(from var(--accent-color-hover) r g b / 0.08);
  --variant-outlinedBg:rgba(from var(--accent-color-hover) r g b / 0.08)
}
.MuiButton-colorPrimary .MuiTypography-root {
  color:var(--variant-containedColor)
}
.MuiButton-textSecondary {
  --variant-textColor:rgb(var(--accent-color))
}
.MuiButton-textSecondary:hover {
  --variant-textColor:var(--accent-color-hover)
}
.MuiButton-textSuccess {
  --variant-textColor:var(--arr-queue-color)
}
.MuiButton-colorSuccess {
  --variant-textBg:transparent;
  --variant-containedBg:var(--arr-queue-color)
}
.MuiDialogActions-root button[id=dialog-next] {
  --variant-textBg:transparent
}
.MuiDialogActions-root button[id=dialog-next]:hover {
  --variant-textBg:rgba(from var(--button-color) r g b / 0.08)
}
.MuiButton-colorSuccess:hover {
  --variant-textBg:rgba(from var(--arr-queue-color) r g b / 0.08);
  --variant-containedBg:rgba(from var(--arr-queue-color) r g b / 0.8)
}
.MuiButton-colorError {
  --variant-textBg:transparent;
  --variant-containedBg:var(--plex-poster-unwatched);
  --variant-outlinedColor:var(--plex-poster-unwatched);
  --variant-outlinedBorder:rgba(from var(--plex-poster-unwatched) r g b / 0.5)
}
.MuiButton-colorError:hover {
  --variant-textBg:rgba(from var(--plex-poster-unwatched) r g b / 0.08);
  --variant-containedBg:rgba(from var(--plex-poster-unwatched) r g b / 0.8);
  --variant-outlinedBg:rgba(from var(--plex-poster-unwatched) r g b / 0.08);
  --variant-outlinedBorder:rgba(from var(--plex-poster-unwatched) r g b / 0.8)
}
.MuiButton-colorSecondary {
  --variant-containedBg:rgba(from var(--button-color) r g b / 0.50);
  --variant-containedColor:var(--button-text);
  --variant-outlinedBorder:rgba(from var(--button-color) r g b / 0.15)
}
.MuiButton-colorSecondary:hover {
  --variant-containedBg:rgba(from var(--button-color-hover) r g b / 0.50);
  --variant-containedColor:var(--button-text-hover);
  --variant-outlinedBorder:rgba(from var(--button-color-hover) r g b / 0.15);
  --variant-textBg:rgba(from var(--button-color-hover) r g b / 0.08)
}
.MuiButton-outlinedPrimary {
  --variant-outlinedBorder:rgba(from rgb(var(--accent-color)) r g b / 0.7);
  --variant-outlinedColor:rgb(var(--accent-color))
}
.MuiButton-outlinedPrimary:hover {
  --variant-outlinedBorder:rgba(from var(--accent-color-hover) r g b / 0.7);
  --variant-outlinedColor:var(--accent-color-hover);
  --variant-textBg:rgba(from var(--accent-color-hover) r g b / 0.08);
  --variant-outlinedBg:rgba(from var(--accent-color-hover) r g b / 0.08)
}
.MuiButtonBase-root.Mui-disabled {
  color:rgba(from var(--text) r g b / .3)!important
}
.MuiButton-colorPrimary .MuiButton-icon svg {
  fill:var(--button-text)!important
}
.MuiButton-colorPrimary:hover .MuiButton-icon svg {
  fill:var(--button-text-hover)!important
}
.MuiLinearProgress-colorPrimary {
  background-color:var(--button-color)
}
.MuiLinearProgress-barColorPrimary {
  background-color:var(--button-color-hover)
}
.MuiLink-root {
  color:var(--link-color)
}
.MuiLink-root:hover {
  color:var(--link-color-hover)
}
.MuiLink-underlineHover[href*="authelia.com"] {
  color:var(--text-muted)
}
.MuiLink-button {
  color:var(--link-color)
}
[class*=scopesListContainer] .MuiList-root[class*="-scopesList"] {
  -webkit-backdrop-filter:saturate(1) blur(1.5em);
  backdrop-filter:saturate(1) blur(1.5em);
  background:var(--transparency-dark-25)
}
.MuiAppBar-colorPrimary,[class*=MuiDrawer-paper] {
  background:var(--transparency-dark-25)
}
.MuiPaper-rounded:not([class*=Alert]) {
  background:var(--transparency-dark-35)
}
.MuiPaper-outlined {
  border-color:var(--transparency-dark-10)!important
}
.MuiDivider-root {
  border-color:var(--transparency-light-10)!important
}
.MuiSvgIcon-colorPrimary {
  color:rgb(var(--accent-color))!important
}
.success-icon {
  color:var(--arr-queue-color)!important
}
.failure-icon {
  color:var(--plex-poster-unwatched)!important
}
.MuiStack-root .MuiBox-root .MuiBox-root {
  border-color:rgba(from var(--text) r g b / .45)
}
#language-button {
  color:var(--text)
}
#language-button:hover {
  --IconButton-hoverBg:rgba(from var(--text) r g b / 0.08)
}
.MuiAlert-filled {
  -webkit-backdrop-filter:saturate(1) blur(0.5em);
  backdrop-filter:saturate(1) blur(0.5em);
  --ath-alert-opacity:0.7
}
.MuiAlert-filledError {
  background-color:rgba(211,47,47,var(--ath-alert-opacity))
}
.MuiAlert-filledWarning {
  background-color:rgba(237,108,2,var(--ath-alert-opacity))
}
.MuiAlert-filledSuccess {
  background-color:rgba(46,125,50,var(--ath-alert-opacity))
}
.MuiAlert-filledInfo {
  background-color:rgba(2,136,209,var(--ath-alert-opacity))
}
.MuiListItemButton-root.Mui-selected {
  background-color:rgba(from var(--button-color) r g b / .16)!important
}
.MuiListItemButton-root.Mui-selected:hover {
  background-color:rgb(from var(--button-color) r g b / .24)!important
}
.MuiListItemButton-root:hover:not(.Mui-selected) {
  background-color:rgba(from var(--text) r g b / .08)!important
}
#settings-menu .MuiSvgIcon-root {
  color:var(--text)!important;
  --IconButton-hoverBg:rgba(from var(--text) r g b / 0.08)
}
.MuiFormLabel-colorPrimary {
  color:rgb(from var(--text) r g b / .7)
}
.MuiFormControlLabel-label {
  color:var(--text)
}
.information-icon {
  color:rgb(var(--accent-color))
}
.MuiStepConnector-line {
  border-color:rgba(from var(--text) r g b / .45)!important
}
.MuiStepIcon-root.Mui-active {
  color:rgb(var(--accent-color))
}
.MuiStepIcon-root.Mui-completed {
  color:rgb(var(--accent-color))
}
.MuiStepLabel-label:not(.Mui-active) {
  color:rgba(from var(--text) r g b / .7)!important
}
.MuiStepLabel-iconContainer.Mui-active .MuiStepIcon-text,.MuiStepLabel-label.Mui-active {
  fill:var(--text)
}
.MuiStepLabel-label.Mui-active {
  color:var(--text)
}
.MuiStepLabel-iconContainer.Mui-disabled .MuiStepIcon-text {
  fill:rgba(from var(--text) r g b / 0.9)
}
.MuiStepLabel-iconContainer.Mui-disabled .MuiStepIcon-root {
  color:rgba(from var(--text) r g b / .5)
}
.tss-1nomc0u-icon svg circle[stroke-width="10"] {
  stroke:rgb(var(--accent-color))
}
.tss-1nomc0u-icon svg circle[stroke=transparent] {
  fill:var(--text)
}
.tss-1nomc0u-icon svg circle[stroke-width="2"] {
  stroke:var(--text)
}
.MuiIconButton-colorPrimary {
  color:rgb(var(--accent-color));
  fill:rgb(var(--accent-color))
}
.MuiIconButton-colorPrimary:hover {
  background-color:rgba(from rgb(var(--accent-color)) r g b / .055)!important
}
.MuiAvatar-root.MuiAvatar-colorDefault {
  background: linear-gradient(135deg, rgb(var(--accent-color)), var(--button-color-hover)) !important;
  color: var(--main-bg-color) !important;
}
.MuiAvatar-root.MuiAvatar-colorDefault svg {
  fill: var(--main-bg-color) !important;
}
.MuiPopover-paper,.MuiPopover-paper::before {
  background-color:var(--transparency-dark-25)
}
[id*=second-factor-stage] [class*="-methodContainer"],[id=authenticated-stage] [class*="-mainContainer"] {
  border-color:var(--transparency-light-20)!important
}
[id=one-time-password-method] [class*="-iconContainer"] svg circle[stroke-width="2"] {
  stroke:rgba(from var(--text) r g b / 0.8)
}
[id=one-time-password-method] [class*="-iconContainer"] svg circle[stroke=transparent] {
  fill:rgba(from var(--text) r g b / 0.8)
}
[id=one-time-password-method] [class*="-iconContainer"] svg circle[stroke-width="10"] {
  stroke:rgb(var(--accent-color))
}
[id="2fa-container"] .information-icon,[id="2fa-container"] [class*="-infoTypography"] {
  color:var(--accent-color-hover)
}
[id=one-time-password-option] button svg circle[stroke-width="10"] {
  stroke:rgb(var(--accent-color))
}
[id=one-time-password-option] button svg circle[stroke=transparent] {
  fill:var(--button-text)
}
[id=one-time-password-option] button svg circle[stroke-width="2"] {
  stroke:var(--button-text)
}
[id=one-time-password-option] button:hover svg circle[stroke-width="10"] {
  stroke:rgb(var(--accent-color))
}
[id=one-time-password-option] button:hover svg circle[stroke=transparent] {
  fill:var(--button-text-hover)
}
[id=one-time-password-option] button:hover svg circle[stroke-width="2"] {
  stroke:var(--button-text-hover)
}
[id*=language-].MuiMenuItem-root.Mui-selected {
  background-color:rgba(from var(--button-color) r g b / .3)!important
}
[id*=language-].MuiMenuItem-root.Mui-selected:hover {
  background-color:rgba(from var(--button-color-hover) r g b / .3)!important
}
[id*=language-] div.MuiPaper-root.MuiPaper-elevation.MuiMenu-paper {
  background:var(--transparency-dark-25)
}
[id*=account-menu] div.MuiPaper-root.MuiPaper-elevation.MuiMenu-paper {
  background:var(--transparency-dark-25)
}
.MuiMenuItem-root,.MuiMenuItem-root svg {
  color:var(--text)!important
}
.MuiMenuItem-root:hover {
  background-color:rgba(from var(--text) r g b / .08)
}
div.MuiPopper-root>div.MuiTooltip-tooltip {
  -webkit-backdrop-filter:saturate(1) blur(1.5em);
  backdrop-filter:saturate(1) blur(1.5em);
  background:rgb(var(--accent-color),.2);
  color:var(--text)
}
[class*=MuiDialog-paper] {
  background:var(--modal-bg-color);
  -webkit-backdrop-filter:saturate(1) blur(1.5em);
  backdrop-filter:saturate(1) blur(1.5em)
}
[class*=MuiDialogContentText] {
  color:rgba(from var(--text) r g b / .7)
}
.mui-19midj6 span span {
  background-color:var(--text)!important
}
.MuiTextField-root,.MuiTextField-root .MuiInputBase-root {
  color:var(--text)
}
.MuiTextField-root .MuiInputLabel-root {
  color:rgba(from var(--text) r g b / .7)
}
.MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline {
  border-color:rgba(from var(--text) r g b / .23)
}
.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color:rgb(var(--text))
}
.MuiInputBase-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color:rgb(var(--accent-color))!important
}
.MuiFormLabel-root.Mui-focused {
  color:rgb(var(--accent-color))!important
}
.MuiInputBase-colorPrimary.MuiInput-underline::before {
  border-color:rgba(from var(--text) r g b / .7)
}
.MuiInputBase-colorPrimary.MuiInput-underline:hover:not(.Mui-disabled,.Mui-error)::before {
  border-color:var(--text)
}
.MuiInputBase-colorPrimary.MuiInput-underline::after {
  border-color:rgb(var(--accent-color))
}
input[class*="-otpDigitInput"] {
  background-color:var(--transparency-dark-10);
  border-color:rgba(from var(--text) r g b / .3)!important;
  color:var(--text)
}
input[class*="-otpDigitInput"]:focus {
  border-color:rgb(var(--accent-color))!important;
  outline:0;
  box-shadow:0 0 .2em 0 rgba(from rgb(var(--accent-color)) r g b / .3)
}
.MuiCheckbox-root .MuiTouchRipple-root {
  color:rgb(var(--accent-color))!important
}
.MuiCheckbox-colorPrimary {
  color:rgb(from var(--text) r g b / .7)
}
.Mui-checked,.MuiCheckbox-root.MuiCheckbox-colorPrimary.Mui-checked {
  color:rgb(var(--accent-color))
}
.MuiCheckbox-root.MuiCheckbox-colorPrimary:hover {
  background-color:rgba(from rgb(var(--accent-color)) r g b / .08)!important
}
.MuiRadio-colorPrimary:not(.Mui-checked) {
  color:rgb(from var(--text) r g b / .7)
}
.MuiRadio-colorPrimary:hover {
  background-color:rgba(from rgb(var(--accent-color)) r g b / .055)!important
}
.MuiRadio-colorPrimary.Mui-checked {
  color:rgb(var(--accent-color));
  fill:rgb(var(--accent-color))
}
.MuiRadio-colorPrimary.Mui-checked:hover {
  background-color:rgba(from rgb(var(--accent-color)) r g b / .055)!important
}
.MuiSwitch-colorPrimary:not(.Mui-checked),.MuiSwitch-colorPrimary:not(.Mui-checked)+.MuiSwitch-track {
  color:var(--text)
}
.MuiSwitch-colorPrimary.Mui-checked {
  color:rgb(var(--accent-color))
}
.MuiSwitch-colorPrimary.Mui-checked:hover {
  background-color:rgba(from rgb(var(--accent-color)) r g b / .08)!important
}
.MuiSwitch-colorPrimary:hover:not(.Mui-checked) {
  background-color:rgba(from var(--text) r g b / .08)!important
}
.MuiSwitch-colorPrimary.Mui-checked+.MuiSwitch-track {
  background-color:rgb(var(--accent-color))
}

/* Style the default Authelia logo SVG with a Forest Emerald gradient & cutout effect */
svg#UserSvg {
  box-sizing: border-box !important;
  background-image: url("logo.svg") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  width: 64px !important;
  height: 64px !important;
  display: inline-block !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
  border-radius: 50% !important;
}
svg#UserSvg path {
  display: none !important;
}

/* Style custom logo image (if configured) with Forest Emerald gradient & custom shield icon */
img[alt="Logo"],
img[alt*="Logo"],
.MuiBox-root[alt*="Logo"],
img[class*="logo"] {
  box-sizing: border-box !important;
  background: linear-gradient(135deg, rgb(var(--accent-color)), var(--button-color-hover)) !important;
  border-radius: 50% !important;
  padding: 14px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
  width: 72px !important;
  height: 72px !important;
  content: url("shield.svg") !important;
  object-fit: contain !important;
}