body,
html {
    font-size: 16px
}

:root,
[data-theme=light] {
    --brand-color: #0089ff;
    --pink-900: #5b1e34;
    --pink-800: #702440;
    --pink-700: #97264f;
    --pink-600: #d2326d;
    --pink-500: #f2508b;
    --pink-400: #f46b9e;
    --pink-300: #f584ae;
    --pink-200: #fab9d1;
    --pink-100: #fcdce8;
    --pink-50: #feedf3;
    --blue-900: #1a4469;
    --blue-800: #154875;
    --blue-700: #1366ae;
    --blue-600: #1579d0;
    --blue-500: #2490ef;
    --blue-400: #50a6f2;
    --blue-300: #7cbcf5;
    --blue-200: #a7d3f9;
    --blue-100: #d3e9fc;
    --blue-50: #f0f8fe;
    --cyan-900: #006464;
    --cyan-800: #007272;
    --cyan-700: #008b8b;
    --cyan-600: #02c5c5;
    --cyan-500: #0ff;
    --cyan-400: #2ef8f8;
    --cyan-300: #6efcfc;
    --cyan-200: #a0f8f8;
    --cyan-100: #c7fcfc;
    --cyan-50: #dafafa;
    --green-900: #2d401d;
    --green-800: #44622a;
    --green-700: #518b21;
    --green-600: #68ab30;
    --green-500: #8ccf54;
    --green-400: #a5d97a;
    --green-300: #bce39b;
    --green-200: #d2ecbd;
    --green-100: #e9f6de;
    --green-50: #f4faee;
    --dark-green-900: #1f3e2b;
    --dark-green-800: #29593b;
    --dark-green-700: #286840;
    --dark-green-600: #2e844e;
    --dark-green-500: #2f9d58;
    --dark-green-400: #59b179;
    --dark-green-300: #82c49b;
    --dark-green-200: #acd8bc;
    --dark-green-100: #dfeee5;
    --dark-green-50: #eaf5ee;
    --gray-900: #1f272e;
    --gray-800: #333c44;
    --gray-700: #505a62;
    --gray-600: #687178;
    --gray-500: #98a1a9;
    --gray-400: #c0c6cc;
    --gray-300: #dce0e3;
    --gray-200: #ebeef0;
    --gray-100: #f4f5f6;
    --red-900: #631d1d;
    --red-800: #802121;
    --red-700: #9b2c2c;
    --red-600: #c53030;
    --red-500: #e24c4c;
    --red-400: #ec645e;
    --red-300: #fca4a4;
    --red-200: #fcc8c8;
    --red-100: #ffecec;
    --red-50: #fff5f5;
    --yellow-900: #5f370e;
    --yellow-800: #744210;
    --yellow-700: #975a16;
    --yellow-600: #b7791f;
    --yellow-500: #d69e2e;
    --yellow-400: #ecb64b;
    --yellow-300: #f6c35e;
    --yellow-200: #fad489;
    --yellow-100: #fee9bf;
    --yellow-50: #fef4e2;
    --orange-900: #653019;
    --orange-800: #7b3a1e;
    --orange-700: #9c4621;
    --orange-600: #cb5a2a;
    --orange-500: #f8814f;
    --orange-400: #f9966c;
    --orange-300: #fdae8c;
    --orange-200: #fecdb8;
    --orange-100: #ffeae1;
    --orange-50: #fff5f0;
    --purple-900: #343360;
    --purple-800: #45438f;
    --purple-700: #4946bf;
    --purple-600: #6461d6;
    --purple-500: #8684ff;
    --purple-400: #9897f7;
    --purple-300: #b9b8fa;
    --purple-200: #dad9f7;
    --purple-100: #eaeafb;
    --purple-50: #f2f2fd;
    --padding-xs: 5px;
    --padding-sm: 10px;
    --padding-md: 15px;
    --padding-lg: 20px;
    --padding-xl: 30px;
    --padding-2xl: 40px;
    --margin-xs: 5px;
    --margin-sm: 8px;
    --margin-md: 15px;
    --margin-lg: 20px;
    --margin-xl: 30px;
    --margin-2xl: 40px;
    --font-stack: "Inter", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    --shadow-xs: rgba(0, 0, 0, 0.05) 0px 0.5px 0px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.05) 0px 2px 4px 0px;
    --shadow-sm: 0px 1px 2px rgba(25, 39, 52, 0.05), 0px 0px 4px rgba(25, 39, 52, 0.1);
    --shadow-base: 0px 4px 8px rgba(25, 39, 52, 0.06), 0px 0px 4px rgba(25, 39, 52, 0.12);
    --shadow-md: 0px 8px 14px rgba(25, 39, 52, 0.08), 0px 2px 6px rgba(25, 39, 52, 0.04);
    --shadow-lg: 0px 18px 22px rgba(25, 39, 52, 0.1), 0px 1px 10px rgba(0, 0, 0, 0.06), 0px 0.5px 5px rgba(25, 39, 52, 0.04);
    --drop-shadow: 0px 0.5px 0px rgba(0, 0, 0, 0.05), 0px 0px 0px transparent, 0px 2px 4px rgba(0, 0, 0, 0.05);
    --modal-shadow: var(--shadow-md);
    --card-shadow: var(--shadow-sm);
    --btn-shadow: var(--shadow-xs);
    --text-muted: var(--gray-600);
    --text-light: var(--gray-800);
    --text-color: var(--gray-900);
    --heading-color: var(--gray-900);
    --icon-fill: transparent;
    --icon-fill-bg: var(--fg-color);
    --icon-stroke: var(--gray-900);
    --bg-blue: var(--blue-100);
    --bg-light-blue: var(--blue-50);
    --bg-dark-blue: var(--blue-300);
    --bg-green: var(--dark-green-50);
    --bg-yellow: var(--yellow-50);
    --bg-orange: var(--orange-50);
    --bg-red: var(--red-50);
    --bg-gray: var(--gray-200);
    --bg-light-gray: var(--gray-100);
    --bg-purple: var(--purple-100);
    --bg-pink: var(--pink-50);
    --bg-cyan: var(--cyan-50);
    --text-on-light-blue: var(--blue-500);
    --text-on-dark-blue: var(--blue-700);
    --text-on-blue: var(--blue-600);
    --text-on-green: var(--dark-green-500);
    --text-on-yellow: var(--yellow-500);
    --text-on-orange: var(--orange-500);
    --text-on-red: var(--red-500);
    --text-on-gray: var(--gray-600);
    --text-on-light-gray: var(--gray-800);
    --text-on-purple: var(--purple-500);
    --text-on-pink: var(--pink-500);
    --text-on-cyan: var(--cyan-600);
    --alert-text-danger: var(--red-600);
    --alert-text-warning: var(--yellow-700);
    --alert-text-info: var(--blue-700);
    --alert-text-success: var(--green-700);
    --alert-bg-danger: var(--red-50);
    --alert-bg-warning: var(--yellow-50);
    --alert-bg-info: var(--blue-50);
    --alert-bg-success: var(--green-50);
    --bg-color: var(--gray-50);
    --fg-color: #fff;
    --navbar-bg: #fff;
    --fg-hover-color: var(--gray-100);
    --card-bg: var(--fg-color);
    --disabled-text-color: var(--gray-700);
    --disabled-control-bg: var(--gray-50);
    --control-bg: var(--gray-100);
    --control-bg-on-gray: var(--gray-200);
    --awesomebar-focus-bg: var(--fg-color);
    --modal-bg: #fff;
    --popover-bg: #fff;
    --awesomplete-hover-bg: var(--control-bg);
    --sidebar-select-color: var(--gray-200);
    --scrollbar-thumb-color: var(--gray-400);
    --scrollbar-track-color: var(--gray-200);
    --shadow-inset: inset 0px -1px 0px var(--gray-300);
    --border-color: var(--gray-100);
    --dark-border-color: var(--gray-300);
    --table-border-color: var(--gray-200);
    --highlight-color: var(--gray-50);
    --yellow-highlight-color: var(--yellow-50);
    --code-block-bg: var(--gray-900);
    --code-block-text: var(--gray-400);
    --border-radius-sm: 4px;
    --border-radius: 6px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
    --border-radius-full: 999px;
    --primary-color: #2490ef;
    --btn-height: 28px;
    --checkbox-gradient: linear-gradient(180deg, #4ac3f8 -124.51%, var(--primary));
    --text-xs: 11px;
    --text-sm: 12px;
    --text-md: 13px;
    --text-base: 14px;
    --text-lg: 16px;
    --text-xl: 18px;
    --text-2xl: 20px;
    --text-3xl: 22px;
    --text-bold: 500;
    --navbar-height: 60px;
    --appreciation-color: var(--dark-green-600);
    --appreciation-bg: var(--dark-green-100);
    --criticism-color: var(--red-600);
    --criticism-bg: var(--red-100);
    --error-bg: var(--red-50);
    --page-head-height: 75px;
    --page-bottom-margin: 60px;
    --input-height: calc(1.5em + 0.75rem + 2px);
    --input-disabled-bg: var(--gray-200);
    --checkbox-right-margin: var(--margin-xs);
    --checkbox-size: 14px;
    --checkbox-focus-shadow: 0 0 0 2px var(--gray-300);
    --timeline-item-icon-size: 34px;
    --timeline-item-left-margin: var(--margin-xl);
    --timeline-item-bottom-margin: var(--margin-sm);
    --timeline-content-max-width: 700px;
    --timeline-left-padding: calc(var(--padding-xl) + var(--timeline-item-icon-size)/2);
    --user-mention-bg-color: var(--fg-color);
    --group-mention-bg-color: var(--bg-purple);
    --skeleton-bg: var(--gray-100);
    --right-arrow-svg: url("data: image/svg+xml;utf8, <svg width='6' height='8' viewBox='0 0 6 8' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M1.25 7.5L4.75 4L1.25 0.5' stroke='%231F272E' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    --left-arrow-svg: url("data: image/svg+xml;utf8, <svg width='6' height='8' viewBox='0 0 6 8' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M7.5 9.5L4 6l3.5-3.5' stroke='%231F272E' stroke-linecap='round' stroke-linejoin='round'></path></svg>");
    --progress-bar-bg: var(--primary)
}

:root,
[data-theme=dark],
[data-theme=light] {
    --gray-50: #f9fafa;
    --toast-bg: var(--modal-bg);
    --error-border: var(--red-400)
}

[data-theme=dark] {
    --gray-100: #f7fafc;
    --gray-200: #edf2f7;
    --gray-300: #c9d0d6;
    --gray-400: #7a838c;
    --gray-500: #575e66;
    --gray-600: #434a52;
    --gray-700: #242a30;
    --gray-800: #1c2126;
    --gray-900: #161a1f;
    --text-muted: var(--gray-400);
    --text-light: var(--gray-300);
    --text-color: var(--gray-50);
    --heading-color: var(--gray-50);
    --icon-fill: transparent;
    --icon-stroke: var(--gray-300);
    --error-bg: var(--red-70);
    --bg-color: var(--gray-900);
    --fg-color: var(--gray-800);
    --navbar-bg: var(--gray-800);
    --fg-hover-color: var(--gray-700);
    --card-bg: var(--gray-800);
    --disabled-text-color: var(--gray-400);
    --disabled-control-bg: var(--gray-700);
    --control-bg: var(--gray-700);
    --control-bg-on-gray: var(--gray-800);
    --awesomebar-focus-bg: var(--control-bg);
    --awesomplete-hover-bg: var(--gray-700);
    --modal-bg: var(--gray-700);
    --popover-bg: var(--bg-color);
    --bg-blue: var(--blue-600);
    --bg-light-blue: var(--blue-400);
    --bg-dark-blue: var(--blue-900);
    --bg-green: var(--dark-green-500);
    --bg-yellow: var(--yellow-500);
    --bg-orange: var(--orange-500);
    --bg-red: var(--red-500);
    --bg-gray: var(--gray-600);
    --bg-light-gray: var(--gray-700);
    --bg-purple: var(--purple-600);
    --text-on-blue: var(--blue-50);
    --text-on-light-blue: var(--blue-100);
    --text-on-dark-blue: var(--blue-300);
    --text-on-green: var(--dark-green-50);
    --text-on-yellow: var(--yellow-50);
    --text-on-orange: var(--orange-100);
    --text-on-red: var(--red-50);
    --text-on-gray: var(--gray-300);
    --text-on-light-gray: var(--gray-100);
    --text-on-purple: var(--purple-100);
    --alert-text-danger: var(--red-300);
    --alert-text-warning: var(--yellow-300);
    --alert-text-info: var(--blue-300);
    --alert-text-success: var(--green-300);
    --alert-bg-danger: var(--red-900);
    --alert-bg-warning: var(--yellow-900);
    --alert-bg-info: var(--blue-900);
    --alert-bg-success: var(--green-900);
    --sidebar-select-color: var(--gray-800);
    --scrollbar-thumb-color: var(--gray-600);
    --scrollbar-track-color: var(--gray-700);
    --shadow-inset: var(--fg-color);
    --border-color: var(--gray-700);
    --dark-border-color: var(--gray-600);
    --table-border-color: var(--gray-600);
    --highlight-color: var(--gray-700);
    --yellow-highlight-color: var(--yellow-700);
    --input-disabled-bg: none;
    --checkbox-focus-shadow: 0 0 0 2px var(--gray-600);
    color-scheme: dark;
    --skeleton-bg: var(--gray-800);
    --right-arrow-svg: url("data: image/svg+xml;utf8, <svg width='6' height='8' viewBox='0 0 6 8' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M1.25 7.5L4.75 4L1.25 0.5' stroke='white' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    --left-arrow-svg: url("data: image/svg+xml;utf8, <svg width='6' height='8' viewBox='0 0 6 8' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M7.5 9.5L4 6l3.5-3.5' stroke='white' stroke-linecap='round' stroke-linejoin='round'></path></svg>")
}

[data-theme=dark] .frappe-card .btn-default {
    background-color: var(--bg-color)
}

[data-theme=dark] .frappe-card .btn-default:hover {
    background-color: var(--fg-hover-color)
}

[data-theme=dark] .form-in-grid,
[data-theme=dark] .modal {
    --control-bg: var(--gray-800);
    --border-color: var(--gray-600)
}

[data-theme=dark] .print-format {
    --text-color: var(--gray-900);
    --border-color: var(--gray-100)
}

[data-theme=dark] .ql-editor {
    color: var(--text-on-gray)
}

[data-theme=dark] .ql-editor.read-mode p,
[data-theme=dark] .ql-editor.read-mode span:not(.mention),
[data-theme=dark] .ql-editor.read-mode strong,
[data-theme=dark] .ql-editor.read-mode u {
    background-color: inherit!important;
    color: inherit!important
}

[data-theme=dark] .chart-container {
    --charts-label-color: var(--gray-300);
    --charts-axis-line-color: var(--gray-500);
    --charts-stroke-width: 5px;
    --charts-dataset-circle-stroke: #fff;
    --charts-dataset-circle-stroke-width: var(--charts-stroke-width);
    --charts-tooltip-title: var(--charts-label-color);
    --charts-tooltip-label: var(--charts-label-color);
    --charts-tooltip-value: #fff;
    --charts-tooltip-bg: var(--gray-900);
    --charts-legend-label: var(--charts-label-color)
}

[data-theme=dark] .heatmap-chart g>rect[fill="#ebedf0"] {
    fill: var(--gray-700)
}

[data-theme=dark] .rating {
    --star-fill: var(--gray-500)
}

[data-theme=dark] .rating .star-hover {
    --star-fill: var(--gray-400)
}

[data-theme=dark] ::-moz-selection {
    color: var(--text-color);
    background: var(--gray-500)
}

[data-theme=dark] ::selection {
    color: var(--text-color);
    background: var(--gray-500)
}

body {
    background-color: var(--bg-light-gray)
}

.for-email-login,
.for-forgot,
.for-signup {
    display: none
}

.for-email-login,
.for-forgot,
.for-login,
.for-signup {
    padding: Max(15vh, 70px) 0
}

@media (min-width:576px) {
    .for-email-login .page-card,
    .for-forgot .page-card,
    .for-login .page-card,
    .for-signup .page-card {
        padding-top: 45px;
        padding-bottom: 45px;
        background-color: #fff;
        box-shadow: var(--shadow-base)
    }
}

.for-email-login .page-card,
.for-forgot .page-card,
.for-login .page-card,
.for-signup .page-card {
    max-width: 400px;
    margin: 0 auto;
    border-radius: var(--border-radius-md)
}

.for-email-login .page-card form,
.for-forgot .page-card form,
.for-login .page-card form,
.for-signup .page-card form {
    max-width: 320px;
    margin: 0 auto
}

.for-email-login .page-card form .form-group,
.for-forgot .page-card form .form-group,
.for-login .page-card form .form-group,
.for-signup .page-card form .form-group {
    margin-bottom: var(--margin-sm)
}

.for-email-login .page-card .page-card-actions,
.for-forgot .page-card .page-card-actions,
.for-login .page-card .page-card-actions,
.for-signup .page-card .page-card-actions {
    margin-top: var(--margin-lg)
}

.for-email-login .page-card .page-card-body :-ms-input-placeholder,
.for-forgot .page-card .page-card-body :-ms-input-placeholder,
.for-login .page-card .page-card-body :-ms-input-placeholder,
.for-signup .page-card .page-card-body :-ms-input-placeholder {
    color: var(--text-light);
    opacity: 1
}

.for-email-login .page-card .page-card-body ::-ms-input-placeholder,
.for-email-login .page-card .page-card-body ::placeholder,
.for-forgot .page-card .page-card-body ::-ms-input-placeholder,
.for-forgot .page-card .page-card-body ::placeholder,
.for-login .page-card .page-card-body ::-ms-input-placeholder,
.for-login .page-card .page-card-body ::placeholder,
.for-signup .page-card .page-card-body ::-ms-input-placeholder,
.for-signup .page-card .page-card-body ::placeholder {
    color: var(--text-light);
    opacity: 1
}

.for-email-login .page-card .page-card-body input[type=email],
.for-email-login .page-card .page-card-body input[type=password],
.for-email-login .page-card .page-card-body input[type=text],
.for-forgot .page-card .page-card-body input[type=email],
.for-forgot .page-card .page-card-body input[type=password],
.for-forgot .page-card .page-card-body input[type=text],
.for-login .page-card .page-card-body input[type=email],
.for-login .page-card .page-card-body input[type=password],
.for-login .page-card .page-card-body input[type=text],
.for-signup .page-card .page-card-body input[type=email],
.for-signup .page-card .page-card-body input[type=password],
.for-signup .page-card .page-card-body input[type=text] {
    border: none;
    color: var(--text-color);
    font-size: var(--text-base);
    background-color: var(--control-bg);
    margin-bottom: 1rem
}

.for-email-login .page-card .page-card-body.invalid input[type=email],
.for-email-login .page-card .page-card-body.invalid input[type=password],
.for-email-login .page-card .page-card-body.invalid input[type=text],
.for-forgot .page-card .page-card-body.invalid input[type=email],
.for-forgot .page-card .page-card-body.invalid input[type=password],
.for-forgot .page-card .page-card-body.invalid input[type=text],
.for-login .page-card .page-card-body.invalid input[type=email],
.for-login .page-card .page-card-body.invalid input[type=password],
.for-login .page-card .page-card-body.invalid input[type=text],
.for-signup .page-card .page-card-body.invalid input[type=email],
.for-signup .page-card .page-card-body.invalid input[type=password],
.for-signup .page-card .page-card-body.invalid input[type=text] {
    border: 1px solid var(--red-500)
}

.for-email-login .page-card .page-card-body .form-label,
.for-forgot .page-card .page-card-body .form-label,
.for-login .page-card .page-card-body .form-label,
.for-signup .page-card .page-card-body .form-label {
    font-size: var(--text-base)
}

.for-email-login .page-card .page-card-body .forgot-password-message,
.for-forgot .page-card .page-card-body .forgot-password-message,
.for-login .page-card .page-card-body .forgot-password-message,
.for-signup .page-card .page-card-body .forgot-password-message {
    text-align: right;
    line-height: 1
}

.for-email-login .page-card .page-card-body .forgot-password-message>*,
.for-forgot .page-card .page-card-body .forgot-password-message>*,
.for-login .page-card .page-card-body .forgot-password-message>*,
.for-signup .page-card .page-card-body .forgot-password-message>* {
    color: var(--text-light);
    font-size: var(--text-sm)
}

.for-email-login .page-card .page-card-body .field-icon,
.for-forgot .page-card .page-card-body .field-icon,
.for-login .page-card .page-card-body .field-icon,
.for-signup .page-card .page-card-body .field-icon {
    left: 9px;
    top: 8px;
    position: absolute;
    z-index: 2
}

.for-email-login .page-card .page-card-body .email-field,
.for-email-login .page-card .page-card-body .password-field,
.for-forgot .page-card .page-card-body .email-field,
.for-forgot .page-card .page-card-body .password-field,
.for-login .page-card .page-card-body .email-field,
.for-login .page-card .page-card-body .password-field,
.for-signup .page-card .page-card-body .email-field,
.for-signup .page-card .page-card-body .password-field {
    position: relative
}

.for-email-login .page-card .page-card-body .email-field input,
.for-email-login .page-card .page-card-body .password-field input,
.for-forgot .page-card .page-card-body .email-field input,
.for-forgot .page-card .page-card-body .password-field input,
.for-login .page-card .page-card-body .email-field input,
.for-login .page-card .page-card-body .password-field input,
.for-signup .page-card .page-card-body .email-field input,
.for-signup .page-card .page-card-body .password-field input {
    padding-left: 35px
}

.for-email-login .page-card .page-card-body .email-field .toggle-password,
.for-email-login .page-card .page-card-body .password-field .toggle-password,
.for-forgot .page-card .page-card-body .email-field .toggle-password,
.for-forgot .page-card .page-card-body .password-field .toggle-password,
.for-login .page-card .page-card-body .email-field .toggle-password,
.for-login .page-card .page-card-body .password-field .toggle-password,
.for-signup .page-card .page-card-body .email-field .toggle-password,
.for-signup .page-card .page-card-body .password-field .toggle-password {
    right: 9px;
    top: 9px;
    position: absolute;
    z-index: 2;
    cursor: pointer;
    font-size: 12px
}

.for-email-login .page-card .page-card-body .btn-login-option,
.for-forgot .page-card .page-card-body .btn-login-option,
.for-login .page-card .page-card-body .btn-login-option,
.for-signup .page-card .page-card-body .btn-login-option {
    font-size: var(--text-md);
    font-weight: 500;
    color: var(--text-gray-700);
    background: var(--gray-100);
    box-shadow: none;
    border: none;
    display: flex;
    place-content: center
}

.for-email-login .page-card .page-card-body .btn-login-option.btn-salesforce i,
.for-forgot .page-card .page-card-body .btn-login-option.btn-salesforce i,
.for-login .page-card .page-card-body .btn-login-option.btn-salesforce i,
.for-signup .page-card .page-card-body .btn-login-option.btn-salesforce i {
    color: var(--blue-400)
}

.for-email-login .page-card .page-card-body .btn-login-option img,
.for-forgot .page-card .page-card-body .btn-login-option img,
.for-login .page-card .page-card-body .btn-login-option img,
.for-signup .page-card .page-card-body .btn-login-option img {
    margin-right: var(--padding-xs)
}

.for-email-login .page-card .page-card-body .btn-login-option:hover,
.for-forgot .page-card .page-card-body .btn-login-option:hover,
.for-login .page-card .page-card-body .btn-login-option:hover,
.for-signup .page-card .page-card-body .btn-login-option:hover {
    border: none;
    background: var(--gray-300)
}

.for-email-login .page-card .page-card-body .social-logins,
.for-forgot .page-card .page-card-body .social-logins,
.for-login .page-card .page-card-body .social-logins,
.for-signup .page-card .page-card-body .social-logins {
    margin: var(--margin-md) 0;
    font-size: var(--text-md)
}

.for-email-login .page-card .page-card-body .social-logins .social-login-buttons,
.for-forgot .page-card .page-card-body .social-logins .social-login-buttons,
.for-login .page-card .page-card-body .social-logins .social-login-buttons,
.for-signup .page-card .page-card-body .social-logins .social-login-buttons {
    margin-top: var(--margin-md)
}

.for-email-login .page-card .page-card-body .social-logins .social-login-buttons .login-button-wrapper,
.for-forgot .page-card .page-card-body .social-logins .social-login-buttons .login-button-wrapper,
.for-login .page-card .page-card-body .social-logins .social-login-buttons .login-button-wrapper,
.for-signup .page-card .page-card-body .social-logins .social-login-buttons .login-button-wrapper {
    min-width: 50%;
    padding: 0 4px;
    margin-bottom: var(--margin-sm)
}

@media (min-width:768px) {
    .for-email-login .page-card .page-card-body .social-logins .social-login-buttons .login-button-wrapper,
    .for-forgot .page-card .page-card-body .social-logins .social-login-buttons .login-button-wrapper,
    .for-login .page-card .page-card-body .social-logins .social-login-buttons .login-button-wrapper,
    .for-signup .page-card .page-card-body .social-logins .social-login-buttons .login-button-wrapper {
        min-width: 33.33%
    }
}

.for-email-login .page-card .page-card-body .login-divider,
.for-forgot .page-card .page-card-body .login-divider,
.for-login .page-card .page-card-body .login-divider,
.for-signup .page-card .page-card-body .login-divider {
    margin: var(--margin-md) 0
}

.for-email-login .page-card-head,
.for-forgot .page-card-head,
.for-login .page-card-head,
.for-signup .page-card-head {
    text-align: center;
    font-size: var(--text-xl);
    font-weight: 600;
    margin: 0 auto 2.5rem
}

.for-email-login .page-card-head img,
.for-forgot .page-card-head img,
.for-login .page-card-head img,
.for-signup .page-card-head img {
    max-height: 42px;
    margin-bottom: var(--margin-lg, 30px)
}

.for-email-login .page-card-head h4,
.for-forgot .page-card-head h4,
.for-login .page-card-head h4,
.for-signup .page-card-head h4 {
    font-size: var(--text-xl);
    color: var(--text-color)
}

.for-email-login .sign-up-message,
.for-forgot .sign-up-message,
.for-login .sign-up-message,
.for-signup .sign-up-message {
    margin-top: 2rem;
    color: var(--text-light);
    font-size: var(--text-md)
}

.for-email-login .sign-up-message a,
.for-forgot .sign-up-message a,
.for-login .sign-up-message a,
.for-signup .sign-up-message a {
    font-size: var(--text-md);
    color: var(--primary)
}

.for-email-login .invalid-login,
.for-forgot .invalid-login,
.for-login .invalid-login,
.for-signup .invalid-login {
    -webkit-animation: wiggle .5s linear
}

@-webkit-keyframes wiggle {
    8%,
    41% {
        -webkit-transform: translateX(-10px)
    }
    25%,
    58% {
        -webkit-transform: translateX(10px)
    }
    75% {
        -webkit-transform: translateX(-5px)
    }
    92% {
        -webkit-transform: translateX(5px)
    }
    0%,
    to {
        -webkit-transform: translateX(0)
    }
}