:root {
    --sc-primary: #C01886;
    --sc-primary-dark: #7A0056;
    --sc-secondary: #6A004F;
    --sc-border: #E8DDE7;
    --sc-text: #2B1230;
}

/* LOGIN PAGE ONLY */
body.task-login {
    background:
        radial-gradient(circle at 50% 16%, rgba(192,24,134,.15), transparent 30%),
        linear-gradient(135deg, #ffffff 0%, #faf7fb 55%, #fff8df 100%) !important;
}

/* Login Card */
body.task-login #login-form {
    width: 470px !important;
    max-width: calc(100vw - 40px) !important;
    margin: 45px auto 0 auto !important;
    padding: 30px 28px 30px !important;
    background: rgba(255,255,255,.96) !important;
    border: 1px solid var(--sc-border) !important;
    border-radius: 24px !important;
    box-shadow: 0 24px 65px rgba(106,0,79,.14) !important;
}

/* BIG LOGO */
body.task-login #logo {
    width: 520px !important;
    height: 210px !important;
    max-width: 520px !important;
    max-height: 210px !important;
    margin: 0 auto 12px auto !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    overflow: visible !important;
}

body.task-login #logo img,
body.task-login img#logo,
body.task-login form img[src*="logo"] {
    width: 520px !important;
    max-width: 520px !important;
    height: auto !important;
    max-height: 210px !important;
    object-fit: contain !important;
    transform: scale(1.25) !important;
    transform-origin: center center !important;
}

/* Field spacing */
body.task-login #login-form .input-group {
    margin-bottom: 15px !important;
}

/* Icon box */
body.task-login #login-form .input-group-text,
body.task-login #login-form .input-group-addon {
    width: 60px !important;
    min-width: 60px !important;
    height: 60px !important;
    background: #ffffff !important;
    border: 1px solid var(--sc-border) !important;
    border-right: 0 !important;
    border-radius: 16px 0 0 16px !important;
    position: relative !important;
    padding: 0 !important;
}

/* Hide old icons */
body.task-login #login-form .input-group-text i,
body.task-login #login-form .input-group-addon i {
    opacity: 0 !important;
}

/* Email icon */
body.task-login #login-form .sc-email-field .input-group-text::before,
body.task-login #login-form .sc-email-field .input-group-addon::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    margin: auto !important;
    width: 25px !important;
    height: 25px !important;
    background: var(--sc-primary) !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2Zm0 4-8 5-8-5V6l8 5 8-5v2Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2Zm0 4-8 5-8-5V6l8 5 8-5v2Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

/* Password icon */
body.task-login #login-form .sc-pass-field .input-group-text::before,
body.task-login #login-form .sc-pass-field .input-group-addon::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    margin: auto !important;
    width: 25px !important;
    height: 25px !important;
    background: var(--sc-secondary) !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M17 9V7A5 5 0 0 0 7 7v2H6c-1.1 0-2 .9-2 2v9c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-9c0-1.1-.9-2-2-2h-1Zm-8 0V7a3 3 0 0 1 6 0v2H9Zm3 8.7A1.7 1.7 0 1 1 12 14a1.7 1.7 0 0 1 0 3.7Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M17 9V7A5 5 0 0 0 7 7v2H6c-1.1 0-2 .9-2 2v9c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-9c0-1.1-.9-2-2-2h-1Zm-8 0V7a3 3 0 0 1 6 0v2H9Zm3 8.7A1.7 1.7 0 1 1 12 14a1.7 1.7 0 0 1 0 3.7Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

/* Inputs */
body.task-login input[type="text"],
body.task-login input[type="email"],
body.task-login input[type="password"] {
    height: 60px !important;
    border: 1px solid var(--sc-border) !important;
    border-left: 0 !important;
    border-radius: 0 16px 16px 0 !important;
    background: #ffffff !important;
    color: var(--sc-text) !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    padding: 0 18px !important;
    box-shadow: none !important;
}

body.task-login input::placeholder {
    color: #9c91a0 !important;
    font-size: 19px !important;
}

/* Focus */
body.task-login input:focus {
    border-color: var(--sc-primary) !important;
    box-shadow: 0 0 0 4px rgba(192,24,134,.12) !important;
    outline: none !important;
}

/* Login button */
body.task-login .button.mainaction,
body.task-login input.button,
body.task-login button {
    width: 100% !important;
    height: 60px !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, var(--sc-primary), var(--sc-primary-dark)) !important;
    color: #ffffff !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    letter-spacing: .4px !important;
    box-shadow: 0 14px 30px rgba(192,24,134,.24) !important;
}

body.task-login .button.mainaction:hover,
body.task-login input.button:hover,
body.task-login button:hover {
    background: linear-gradient(135deg, var(--sc-primary-dark), var(--sc-primary)) !important;
}

/* ===== Wider fields + smaller typed text ===== */

body.task-login #login-form {
    width: 540px !important;
    max-width: calc(100vw - 32px) !important;
    padding: 34px 30px 30px !important;
}

body.task-login #login-form .input-group {
    width: 100% !important;
    margin-bottom: 16px !important;
}

body.task-login #login-form .input-group-text,
body.task-login #login-form .input-group-addon {
    width: 62px !important;
    min-width: 62px !important;
    height: 60px !important;
}

body.task-login input[type="text"],
body.task-login input[type="email"],
body.task-login input[type="password"] {
    height: 60px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    padding: 0 16px !important;
}

body.task-login input::placeholder {
    font-size: 16px !important;
}

body.task-login .button.mainaction,
body.task-login input.button,
body.task-login button {
    height: 60px !important;
    font-size: 16px !important;
}

/* ===== Slightly bigger logo ===== */

body.task-login #logo {
    width: 580px !important;
    height: 230px !important;
    max-width: 580px !important;
    max-height: 230px !important;
    margin-bottom: 8px !important;
}

body.task-login #logo img,
body.task-login img#logo,
body.task-login form img[src*="logo"] {
    width: 580px !important;
    max-width: 580px !important;
    max-height: 230px !important;
    transform: scale(1.32) !important;
    transform-origin: center center !important;
}