/**/**

 * 🎨 Domänia Webmail - 10/10 SKITSNYGG DESIGN   * 🎨 Domänia Webmail - 10/10 SKITSNYGG DESIGN

 * IDENTISKT MED DEMO.HTML MEN ÄNNU BÄTTRE! * Brand Color: #B7D7F8

 * Brand Color: #B7D7F8 * Design: Two-column login with smooth animations

 */ */



/* === GLOBAL RESET === *//* === RESET & BASE === */

* {* {

    margin: 0;    margin: 0;

    padding: 0;    padding: 0;

    box-sizing: border-box;    box-sizing: border-box;

}}



/* === BODY & BACKGROUND === */body, html, #rl-app {

body, html, #rl-app {    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;

    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;    background: linear-gradient(135deg, #B7D7F8 0%, #A5CEFB 100%) !important;

    background: #B7D7F8 !important;    min-height: 100vh !important;

    min-height: 100vh !important;    display: flex !important;

    display: flex !important;    align-items: center !important;

    align-items: center !important;    justify-content: center !important;

    justify-content: center !important;    padding: 20px !important;

    padding: 20px !important;    position: relative !important;

}    overflow-x: hidden !important;

}

/* === LOADING SCREEN (hide) === */

#rl-loading {/* Animated background pattern */

    display: none !important;body::before {

}    content: "" !important;

    position: absolute !important;

/* === TWO-COLUMN GRID LAYOUT === */    top: 0 !important;

#rl-content.login-page {    left: 0 !important;

    display: grid !important;    width: 100% !important;

    grid-template-columns: 420px 550px !important;    height: 100% !important;

    gap: 0 !important;    background-image: 

    max-width: 970px !important;        radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),

    width: 100% !important;        radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),

    box-shadow: 0 10px 40px rgba(0,0,0,0.15) !important;        radial-gradient(circle at 40% 20%, rgba(255, 255, 255, 0.08) 0%, transparent 50%) !important;

    border-radius: 8px !important;    animation: backgroundFloat 20s ease-in-out infinite !important;

    overflow: hidden !important;    pointer-events: none !important;

    margin: 0 auto !important;    z-index: 0 !important;

    padding: 0 !important;}

    background: white !important;

    position: relative !important;@keyframes backgroundFloat {

    z-index: 1 !important;    0%, 100% { opacity: 0.3; transform: scale(1); }

    animation: slideIn 0.5s ease-out !important;    50% { opacity: 0.5; transform: scale(1.1); }

}}



@keyframes slideIn {/* === LOGIN CONTAINER - TWO COLUMN GRID === */

    from { opacity: 0; transform: translateY(20px); }#rl-content.login-page {

    to { opacity: 1; transform: translateY(0); }    display: grid !important;

}    grid-template-columns: 420px 550px !important;

    gap: 0 !important;

/* === LEFT: LOGIN CONTAINER (White Box) === */    max-width: 970px !important;

#rl-content.login-page .login-container {    width: 100% !important;

    background: white !important;    box-shadow: 

    padding: 50px 40px !important;        0 20px 60px rgba(0, 0, 0, 0.2),

    display: flex !important;        0 0 0 1px rgba(255, 255, 255, 0.1) !important;

    flex-direction: column !important;    border-radius: 12px !important;

    order: 1 !important;    overflow: hidden !important;

}    margin: 0 auto !important;

    padding: 0 !important;

/* === LOGO === */    background: transparent !important;

#rl-content.login-page .login-logo {    position: relative !important;

    width: 80px !important;    z-index: 1 !important;

    height: 80px !important;    animation: slideIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;

    margin: 0 auto 30px !important;}

}

@keyframes slideIn {

#rl-content.login-page .login-logo svg {    from {

    width: 100% !important;        opacity: 0;

    height: 100% !important;        transform: translateY(30px) scale(0.95);

    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)) !important;    }

}    to {

        opacity: 1;

/* === TITLE === */        transform: translateY(0) scale(1);

#rl-content.login-page .descWrapper {    }

    font-size: 16px !important;}

    font-weight: 600 !important;

    color: #2C3E50 !important;/* === LOGIN BOX - LEFT (WHITE) === */

    text-align: center !important;#rl-content.login-page #V-Login {

    margin-bottom: 30px !important;    background: white !important;

}    padding: 50px 40px !important;

    display: flex !important;

/* === FORM GROUPS === */    flex-direction: column !important;

#rl-content.login-page .controls {    order: 1 !important;

    margin-bottom: 20px !important;    margin: 0 !important;

}    border: none !important;

    box-shadow: none !important;

/* === LABELS === */    position: relative !important;

#rl-content.login-page label {    z-index: 2 !important;

    display: block !important;}

    font-size: 14px !important;

    font-weight: 500 !important;/* === LOGO - Gradient Circle with D === */

    color: #555 !important;#rl-content.login-page #V-Login::before {

    margin-bottom: 8px !important;    content: "" !important;

}    width: 90px !important;

    height: 90px !important;

/* === INPUTS === */    margin: 0 auto 35px !important;

#rl-content.login-page input[type="text"],    background-image: url('data:image/svg+xml,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="logoGrad" x1="0%25" y1="0%25" x2="100%25" y2="100%25"><stop offset="0%25" style="stop-color:%23B7D7F8"/><stop offset="50%25" style="stop-color:%2393C5F5"/><stop offset="100%25" style="stop-color:%236FB3F2"/></linearGradient><filter id="glow"><feGaussianBlur stdDeviation="3" result="coloredBlur"/><feMerge><feMergeNode in="coloredBlur"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><circle cx="100" cy="100" r="90" fill="url(%23logoGrad)" filter="url(%23glow)"/><ellipse cx="100" cy="70" rx="60" ry="40" fill="white" opacity="0.3"/><text x="100" y="140" font-family="Arial,sans-serif" font-size="110" font-weight="700" fill="white" text-anchor="middle">D</text></svg>') !important;

#rl-content.login-page input[type="password"] {    background-size: contain !important;

    width: 100% !important;    background-repeat: no-repeat !important;

    padding: 12px 15px !important;    display: block !important;

    border: 1px solid #ddd !important;    animation: logoFloat 3s ease-in-out infinite !important;

    border-radius: 4px !important;    filter: drop-shadow(0 4px 12px rgba(111, 179, 242, 0.3)) !important;

    font-size: 14px !important;}

    transition: border-color 0.2s, background 0.2s !important;

    background: #f8f9fa !important;@keyframes logoFloat {

}    0%, 100% { transform: translateY(0px); }

    50% { transform: translateY(-5px); }

#rl-content.login-page input:focus {}

    outline: none !important;

    border-color: #93C5F5 !important;/* === TITLE === */

    background: white !important;#rl-content.login-page .descWrapper {

}    font-size: 18px !important;

    font-weight: 700 !important;

/* === CHECKBOX === */    color: #2C3E50 !important;

#rl-content.login-page .e-checkbox {    text-align: center !important;

    display: flex !important;    margin-bottom: 35px !important;

    align-items: center !important;    letter-spacing: -0.3px !important;

    font-size: 14px !important;}

    color: #555 !important;

    gap: 8px !important;/* === FORM GROUPS === */

}#rl-content.login-page .controls {

    margin-bottom: 24px !important;

/* === LANGUAGE BUTTON === */}

#rl-content.login-page .language-button {

    display: inline-flex !important;/* === LABELS === */

    align-items: center !important;#rl-content.login-page label {

    justify-content: center !important;    display: block !important;

    width: 30px !important;    font-size: 14px !important;

    height: 30px !important;    font-weight: 600 !important;

    border-radius: 4px !important;    color: #555 !important;

    background: #f8f9fa !important;    margin-bottom: 8px !important;

    border: 1px solid #ddd !important;    transition: color 0.2s !important;

    transition: all 0.2s !important;}

    text-decoration: none !important;

}/* === INPUTS === */

#rl-content.login-page input[type="text"],

#rl-content.login-page .language-button:hover {#rl-content.login-page input[type="password"],

    background: white !important;#rl-content.login-page select {

    border-color: #93C5F5 !important;    width: 100% !important;

    transform: translateY(-1px) !important;    padding: 14px 16px !important;

}    border: 2px solid #E8E8E8 !important;

    border-radius: 8px !important;

/* === LOGIN BUTTON === */    font-size: 15px !important;

#rl-content.login-page .buttonLogin {    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;

    width: 100% !important;    background: #F8F9FA !important;

    padding: 14px !important;    color: #2C3E50 !important;

    background: linear-gradient(135deg, #93C5F5 0%, #6FB3F2 100%) !important;}

    color: white !important;

    border: none !important;#rl-content.login-page input:hover {

    border-radius: 4px !important;    border-color: #D0D0D0 !important;

    font-size: 15px !important;    background: #F0F0F0 !important;

    font-weight: 600 !important;}

    cursor: pointer !important;

    transition: transform 0.2s, box-shadow 0.2s !important;#rl-content.login-page input:focus,

    margin-top: 10px !important;#rl-content.login-page select:focus {

}    outline: none !important;

    border-color: #93C5F5 !important;

#rl-content.login-page .buttonLogin:hover {    background: white !important;

    transform: translateY(-1px) !important;    box-shadow: 

    box-shadow: 0 4px 12px rgba(111, 179, 242, 0.3) !important;        0 0 0 3px rgba(147, 197, 245, 0.1),

}        0 2px 8px rgba(147, 197, 245, 0.15) !important;

    transform: translateY(-1px) !important;

#rl-content.login-page .buttonLogin:active {}

    transform: translateY(0) !important;

}/* === CHECKBOX === */

#rl-content.login-page .e-checkbox {

/* === BRANDING === */    display: flex !important;

#rl-content.login-page .login-branding {    align-items: center !important;

    text-align: center !important;    margin: 24px 0 !important;

    margin-top: 20px !important;    font-size: 14px !important;

    font-size: 18px !important;    color: #666 !important;

    font-weight: 700 !important;    cursor: pointer !important;

    color: #2C3E50 !important;    transition: color 0.2s !important;

}}



/* === ERROR ALERT === */#rl-content.login-page .e-checkbox:hover {

#rl-content.login-page .alert {    color: #333 !important;

    padding: 12px 16px !important;}

    background: #fff3cd !important;

    border: 1px solid #ffc107 !important;#rl-content.login-page .e-checkbox .fontastic {

    border-radius: 4px !important;    margin-right: 10px !important;

    margin-bottom: 20px !important;    font-size: 20px !important;

    color: #856404 !important;    color: #93C5F5 !important;

}}



#rl-content.login-page .alert .close {/* === LOGIN BUTTON === */

    float: right !important;#rl-content.login-page .buttonLogin {

    font-size: 20px !important;    width: 100% !important;

    color: #856404 !important;    padding: 16px !important;

    text-decoration: none !important;    background: linear-gradient(135deg, #93C5F5 0%, #6FB3F2 100%) !important;

    opacity: 0.5 !important;    color: white !important;

}    border: none !important;

    border-radius: 8px !important;

#rl-content.login-page .alert .close:hover {    font-size: 16px !important;

    opacity: 1 !important;    font-weight: 700 !important;

}    letter-spacing: 0.5px !important;

    cursor: pointer !important;

/* === RIGHT: PROMO CONTAINER (Blue Gradient) === */    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;

#rl-content.login-page .promo-container {    margin-top: 12px !important;

    background: linear-gradient(135deg, #B7D7F8 0%, #93C5F5 50%, #6FB3F2 100%) !important;    box-shadow: 0 4px 14px rgba(111, 179, 242, 0.4) !important;

    padding: 50px 40px !important;    position: relative !important;

    color: white !important;    overflow: hidden !important;

    display: flex !important;}

    flex-direction: column !important;

    justify-content: center !important;#rl-content.login-page .buttonLogin::before {

    order: 2 !important;    content: "" !important;

}    position: absolute !important;

    top: 50% !important;

/* === PROMO HEADER (Logo + Text) === */    left: 50% !important;

#rl-content.login-page .promo-header {    width: 0 !important;

    display: flex !important;    height: 0 !important;

    align-items: center !important;    border-radius: 50% !important;

    gap: 10px !important;    background: rgba(255, 255, 255, 0.3) !important;

    margin-bottom: 30px !important;    transform: translate(-50%, -50%) !important;

}    transition: width 0.6s, height 0.6s !important;

}

#rl-content.login-page .promo-logo-icon {

    width: 40px !important;#rl-content.login-page .buttonLogin:hover {

    height: 40px !important;    transform: translateY(-2px) !important;

    background: white !important;    box-shadow: 0 6px 20px rgba(111, 179, 242, 0.5) !important;

    border-radius: 50% !important;}

    display: flex !important;

    align-items: center !important;#rl-content.login-page .buttonLogin:hover::before {

    justify-content: center !important;    width: 300px !important;

    font-size: 24px !important;    height: 300px !important;

    font-weight: 700 !important;}

    color: #6FB3F2 !important;

}#rl-content.login-page .buttonLogin:active {

    transform: translateY(0) !important;

#rl-content.login-page .promo-logo-text {    box-shadow: 0 2px 8px rgba(111, 179, 242, 0.3) !important;

    font-size: 32px !important;}

    font-weight: 700 !important;

}/* === PROMO BOX - RIGHT (GRADIENT) === */

#rl-content.login-page::after {

/* === PROMO TITLE === */    content: "" !important;

#rl-content.login-page .promo-title {    background: linear-gradient(135deg, #B7D7F8 0%, #93C5F5 50%, #6FB3F2 100%) !important;

    font-size: 26px !important;    padding: 50px 40px !important;

    font-weight: 700 !important;    color: white !important;

    margin-bottom: 20px !important;    display: flex !important;

    line-height: 1.3 !important;    flex-direction: column !important;

}    justify-content: center !important;

    order: 2 !important;

/* === PROMO DESC === */    position: relative !important;

#rl-content.login-page .promo-desc {    overflow: hidden !important;

    font-size: 15px !important;    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 550 650"><defs><filter id="textShadow"><feGaussianBlur in="SourceAlpha" stdDeviation="2"/><feOffset dx="0" dy="2" result="offsetblur"/><feComponentTransfer><feFuncA type="linear" slope="0.3"/></feComponentTransfer><feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><circle cx="80" cy="80" r="50" fill="white" opacity="0.15"/><text x="140" y="95" font-family="-apple-system,BlinkMacSystemFont,Arial,sans-serif" font-size="48" font-weight="700" fill="white" filter="url(%23textShadow)">Domania</text><text x="40" y="180" font-family="-apple-system,Arial,sans-serif" font-size="34" font-weight="700" fill="white" filter="url(%23textShadow)">Professionell e-post</text><text x="40" y="220" font-family="-apple-system,Arial,sans-serif" font-size="34" font-weight="700" fill="white" filter="url(%23textShadow)">för ditt företag</text><text x="40" y="280" font-family="-apple-system,Arial,sans-serif" font-size="17" fill="white" opacity="0.95">Få tillgång till kraftfull e-post med</text><text x="40" y="305" font-family="-apple-system,Arial,sans-serif" font-size="17" fill="white" opacity="0.95">avancerade funktioner som spam-skydd,</text><text x="40" y="330" font-family="-apple-system,Arial,sans-serif" font-size="17" fill="white" opacity="0.95">virus-skanning och obegränsad lagring.</text><g opacity="1"><circle cx="70" cy="385" r="14" fill="white" opacity="0.25"/><text x="95" y="395" font-family="-apple-system,Arial,sans-serif" font-size="17" font-weight="500" fill="white">99.9%25 drifttid-garanti</text></g><g opacity="1"><circle cx="70" cy="430" r="14" fill="white" opacity="0.25"/><text x="95" y="440" font-family="-apple-system,Arial,sans-serif" font-size="17" font-weight="500" fill="white">Avancerat spam- och virusskydd</text></g><g opacity="1"><circle cx="70" cy="475" r="14" fill="white" opacity="0.25"/><text x="95" y="485" font-family="-apple-system,Arial,sans-serif" font-size="17" font-weight="500" fill="white">Mobil-synkronisering (IMAP/POP3)</text></g><g opacity="1"><circle cx="70" cy="520" r="14" fill="white" opacity="0.25"/><text x="95" y="530" font-family="-apple-system,Arial,sans-serif" font-size="17" font-weight="500" fill="white">Kalender och kontakter</text></g><g opacity="1"><circle cx="70" cy="565" r="14" fill="white" opacity="0.25"/><text x="95" y="575" font-family="-apple-system,Arial,sans-serif" font-size="17" font-weight="500" fill="white">24/7 svensk support</text></g></svg>') !important;

    line-height: 1.6 !important;    background-repeat: no-repeat !important;

    margin-bottom: 30px !important;    background-position: center !important;

    opacity: 0.95 !important;    background-size: 95% !important;

}}



/* === PROMO FEATURES LIST === *//* Decorative circles in promo box */

#rl-content.login-page .promo-features {#rl-content.login-page::before {

    list-style: none !important;    content: "" !important;

    margin: 0 !important;    position: absolute !important;

    padding: 0 !important;    right: 0 !important;

}    top: 0 !important;

    width: 550px !important;

#rl-content.login-page .promo-features li {    height: 100% !important;

    padding: 12px 0 !important;    background-image: 

    font-size: 15px !important;        radial-gradient(circle at 90% 20%, rgba(255, 255, 255, 0.15) 0%, transparent 30%),

    display: flex !important;        radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 40%) !important;

    align-items: center !important;    pointer-events: none !important;

    gap: 12px !important;    z-index: 1 !important;

}}



#rl-content.login-page .promo-features li::before {/* === LANGUAGE SELECTOR === */

    content: "✓" !important;#rl-content.login-page .language-buttons {

    display: inline-block !important;    margin: 24px 0 !important;

    width: 24px !important;}

    height: 24px !important;

    background: rgba(255,255,255,0.2) !important;#rl-content.login-page .language-button {

    border-radius: 50% !important;    display: inline-flex !important;

    text-align: center !important;    align-items: center !important;

    line-height: 24px !important;    justify-content: center !important;

    font-weight: 700 !important;    width: 40px !important;

    flex-shrink: 0 !important;    height: 40px !important;

}    border-radius: 8px !important;

    background: #F8F9FA !important;

/* === RESPONSIVE === */    border: 2px solid #E8E8E8 !important;

@media (max-width: 968px) {    font-size: 20px !important;

    #rl-content.login-page {    cursor: pointer !important;

        grid-template-columns: 1fr !important;    transition: all 0.3s !important;

        max-width: 420px !important;}

    }

#rl-content.login-page .language-button:hover {

    #rl-content.login-page .promo-container {    background: white !important;

        display: none !important;    border-color: #93C5F5 !important;

    }    transform: translateY(-2px) !important;

        box-shadow: 0 4px 12px rgba(147, 197, 245, 0.2) !important;

    #rl-content.login-page .login-container {}

        padding: 40px 30px !important;

    }/* === ERROR MESSAGES === */

}#rl-content.login-page .alert {

    padding: 14px 16px !important;

/* === HIDE EVERYTHING ELSE WHEN NOT LOGIN === */    background: #FFF3CD !important;

#rl-content:not(.login-page) .login-container,    border: 2px solid #FFE69C !important;

#rl-content:not(.login-page) .promo-container {    border-radius: 8px !important;

    display: none !important;    color: #856404 !important;

}    margin-bottom: 20px !important;

    font-size: 14px !important;
    animation: slideDown 0.3s ease-out !important;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#rl-content.login-page .alert .close {
    float: right !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    color: #856404 !important;
    opacity: 0.5 !important;
    text-decoration: none !important;
    transition: opacity 0.2s !important;
}

#rl-content.login-page .alert .close:hover {
    opacity: 1 !important;
}

/* === HIDE UNWANTED ELEMENTS === */
#rl-content.login-page #rl-loading,
#rl-content:not(.login-page) .login-page {
    display: none !important;
}

/* === RESPONSIVE === */
@media (max-width: 968px) {
    #rl-content.login-page {
        grid-template-columns: 1fr !important;
        max-width: 420px !important;
    }

    #rl-content.login-page::after,
    #rl-content.login-page::before {
        display: none !important;
    }
    
    #rl-content.login-page #V-Login {
        padding: 40px 30px !important;
    }
}

/* === SMOOTH PAGE TRANSITIONS === */
#rl-content {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* === LOADING STATE === */
#rl-content.login-page .buttonLogin[disabled] {
    opacity: 0.7 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

#rl-content.login-page .buttonLogin[disabled]::after {
    content: "..." !important;
    animation: dots 1.5s steps(4, end) infinite !important;
}

@keyframes dots {
    0%, 20% { content: "."; }
    40% { content: ".."; }
    60%, 100% { content: "..."; }
}

/* === DOMANIA BRANDING === */
#rl-content.login-page #V-Login::after {
    content: "Domania.se" !important;
    text-align: center !important;
    margin-top: 30px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #2C3E50 !important;
    opacity: 0.6 !important;
    letter-spacing: 0.5px !important;
}