/* signin page css */

:root {
    --mzColorWhite: #ffffff;
    --mzColorLightGray: #ebebeb;
    --mzColorGray: #c0c0c0;
    --mzColorCharcoal: #494949;
    --mzColorBlack: #000000;
    --mzColorBlue: #0a6cff;
    --mzColorGreen: #109410;
    --mzColorOrange: #f19e03;
    --mzColorRed: #d30000;
    --mzColorPink: #ffa1a1;
    --mzColorPurple: #8910ad;
    --mzColorYellow: #fce564;
    --mzColorPrimaryTint: #eff3f1;
    --mzColorPrimaryLight: #c4dacd;
    --mzColorPrimaryMedium: #74ac8c;
    --mzColorPrimaryDark: #355f47;
    --mzColorPromptDark: #2f3739;
    --mzColorPromptLight: #f9f9f9;
    --yfColorCream: #fff1c2;
    --yfColorGreen: #355f47;
    --yfColorRed: #6b1e15;
    --Fonts: -apple-system-font, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial;
    --FontSizeBase: 16px;
    --FontWeightBase: 400;
    --easeOutQuint: cubic-bezier(0.230, 1.000, 0.320, 1.000);
}

body {
    font-family: var(--Fonts);
    font-size: var(--FontSizeBase);
    font-weight: var(--FontWeightBase);
    color: var(--yfColorCream);
}

/* #region | Colors */

.mzColorWhite {
    color: var(--mzColorWhite)
}

.mzBackColorWhite {
    background-color: var(--mzColorWhite)
}

.mzColorLightGray {
    color: var(--mzColorLightGray)
}

.mzBackColorLightGray {
    background-color: var(--mzColorLightGray)
}

.mzColorGray {
    color: var(--mzColorGray)
}

.mzBackColorGray {
    background-color: var(--mzColorGray)
}

.mzColorCharcoal {
    color: var(--mzColorCharcoal)
}

.mzBackColorCharcoal {
    background-color: var(--mzColorCharcoal)
}

.mzColorBlack {
    color: var(--mzColorBlack)
}

.mzBackColorBlack {
    background-color: var(--mzColorBlack)
}

.mzColorBlue {
    color: var(--mzColorBlue)
}

.mzBackColorBlue {
    background-color: var(--mzColorBlue)
}

.mzColorGreen {
    color: var(--mzColorGreen)
}

.mzBackColorGreen {
    background-color: var(--mzColorGreen)
}

.mzColorOrange {
    color: var(--mzColorOrange)
}

.mzBackColorOrange {
    background-color: var(--mzColorOrange)
}

.mzColorRed {
    color: var(--mzColorRed)
}

.mzBackColorRed {
    background-color: var(--mzColorRed)
}

.mzColorPink {
    color: var(--mzColorPink)
}

.mzBackColorPink {
    background-color: var(--mzColorPink)
}

.mzColorPurple {
    color: var(--mzColorPurple)
}

.mzBackColorPurple {
    background-color: var(--mzColorPurple)
}

.mzColorYellow {
    color: var(--mzColorYellow)
}

.mzBackColorYellow {
    background-color: var(--mzColorYellow)
}

.mzColorPrimaryTint {
    color: var(--mzColorPrimaryTint)
}

.mzBackColorPrimaryTint {
    background-color: var(--mzColorPrimaryTint)
}

.mzColorPrimaryLight {
    color: var(--mzColorPrimaryLight)
}

.mzBackColorPrimaryLight {
    background-color: var(--mzColorPrimaryLight)
}

.mzColorPrimaryMedium {
    color: var(--mzColorPrimaryMedium)
}

.mzBackColorPrimaryMedium {
    background-color: var(--mzColorPrimaryMedium)
}

.mzColorPrimaryDark {
    color: var(--mzColorPrimaryDark)
}

.mzBackColorPrimaryDark {
    background-color: var(--mzColorPrimaryDark)
}

/* #endregion | Colors */

/* #region | css reset */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

body {
    -webkit-text-size-adjust: none
}

mark {
    background-color: transparent;
    color: inherit
}

input::-moz-focus-inner {
    border: 0;
    padding: 0
}

input[type="text"],
input[type="email"],
select,
textarea {
    -moz-appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    appearance: none
}

*,
*:before,
*:after {
    box-sizing: border-box;
}

/* #endregion | css reset */

/* #region | Overlay scrollbars */

.os-theme-dark {
    --os-handle-bg: rgb(135 157 133 / 20%) !important;
    --os-handle-bg-hover: rgb(135 157 133 / 50%) !important;
    --os-handle-bg-active: rgb(135 157 133 / 75%) !important;
    --os-size: 10px;
    --os-padding-perpendicular: 0px;
    --os-padding-axis: 0px;
    --os-track-border-radius: 10px;
    --os-handle-interactive-area-offset: 0px;
    --os-handle-border-radius: 10px;
}

.os-scrollbar-track:hover {
    background: rgba(90, 141, 53, .08);
}

/* #endregion | Overlay scrollbars */

body {
    line-height: 1.0;
    min-width: 320px;
    overflow-x: hidden;
    word-wrap: break-word;
}

#BodyContent {
    height: 100lvh;
    width: 100vw;
    max-width: 450px;
    margin: auto;
    transition: opacity 500ms cubic-bezier(0.64, 0, 0.78, 0);
    display: flex;
    flex-direction: column;
    position: relative;
}

#BodyContent.loaded {
    opacity: 1;
}

#HeaderImage {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: clamp(30px, 3vh, 100px);
    margin-bottom: 3vh;
    max-height: clamp(60px, 10vh, 100px);
}

#HeaderText {
    font-family: Caudex;
    font-size: clamp(20px, 3vh, 30px);
    color: var(--yfColorGreen);
    text-align: center;
    margin-bottom: clamp(20px, 2vh, 60px);
}

#HeaderTextSignin,
#HeaderTextForgotten {
    display: inline-block;
    transform: translateX(-50px);
    opacity: 0;
    transition: transform 1500ms var(--easeOutQuint), opacity 1500ms var(--easeOutQuint);
}

#HeaderTextSignin.show,
#HeaderTextForgotten.show {
    opacity: 1;
    transform: none;
}

#Inputs,
#Forgotten {
    background-color: var(--yfColorGreen);
    border-radius: 8px;
    padding: clamp(20px, 8vh, 36px) clamp(20px, 8vw, 36px) clamp(20px, 8vh, 34px) clamp(20px, 8vw, 36px);
    display: flex;
    flex-direction: row;
    justify-content: center;
    transform: translateX(-50px);
    opacity: 0;
    transition: transform 1500ms var(--easeOutQuint), opacity 1500ms var(--easeOutQuint);
}

#Inputs.show,
#Forgotten.show {
    opacity: 1;
    transform: none;
}

#InputsInner,
#ForgottenInner {
    flex: 1 1;
    max-width: 400px;
    padding: 0px 6px 0px 6px;
}

#InputsInner>.SigninInput {
    margin-bottom: 6px;
}

.InputField {
    display: flex;
    flex-direction: row;
}

.SigninInput {
    background-color: #d3dfd8;
    background-color: var(--mzColorPrimaryTint);
    width: 100%;
    height: 50px;
}

.SignintextboxIcon {
    max-width: 44px;
    flex: 1 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.SignintextboxIconLeft {
    width: 44px;
    height: 26px;
}

.mzEditBoxInput {
    font-family: var(--Fonts);
}

#SigninButton,
#SendResetButton {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 30px;
}

#SigninButton>.mzButtonText,
#SendResetButton>.mzButtonText {
    padding: 16px;
    font-size: 18px;
}

#ErrorSignin {
    margin-top: 8px;
}

#NoSigninButton,
#ForgottenButton,
#BacktoSigninButton {
    width: 100%;
    max-width: 270px;
    min-height: 36px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 10px;
}

#BacktoSigninButton {
    margin-top: 30px;
}

.mzButtonTextContainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mzButtonTextContainer>.mzButtonText {
    padding: 8px 8px 8px 8px;
    font-size: 16px;
}

#PasswordEditBox {
    margin-top: 16px;
}

.InputErrorMessage {
    color: var(--mzColorPink);
    margin-bottom: 10px;
    line-height: 18px;
}

.InputErrorMessage.hidden {
    height: 0px;
}

.ForgottenInstructions {
    color: white;
    margin-top: 6px;
    margin-bottom: 12px;
    line-height: 18px;
}