@import url("/static.php/skins/elastic/styles/styles.min.css");

:root {
    --autosocials-navy: #07111f;
    --autosocials-panel: #0d1728;
    --autosocials-blue: #0b7cf6;
    --autosocials-cyan: #57b7ff;
    --autosocials-orange: #ff7426;
    --autosocials-text: #f7f9fc;
    --autosocials-muted: #a5afbf;
}
html,
body {
    background: var(--autosocials-navy);
}

body.task-login #layout {
    background:
        radial-gradient(circle at 82% 18%, rgba(11, 124, 246, .24), transparent 32rem),
        radial-gradient(circle at 14% 82%, rgba(255, 116, 38, .12), transparent 26rem),
        linear-gradient(145deg, #050a12, var(--autosocials-navy));
}

body.task-login #layout-content::before {
    content: "Your AutoSocials inbox";
    display: block;
    position: relative;
    top: 14vh;
    color: var(--autosocials-text);
    font-size: clamp(1.55rem, 3vw, 2.45rem);
    font-weight: 800;
    letter-spacing: -.035em;
}

body.task-login #layout-content::after {
    content: "Read, search and reply to customer email in one secure place.";
    display: block;
    position: relative;
    top: 14.6vh;
    color: var(--autosocials-muted);
    font-size: 1rem;
}

body.task-login #logo {
    top: 8vh;
    width: min(76vw, 330px);
    max-height: 62px;
}

body.task-login #login-form {
    top: 18vh;
    max-width: 390px;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 1.25rem;
    background: rgba(13, 23, 40, .88);
    box-shadow: 0 24px 80px rgba(0, 0, 0, .38);
    backdrop-filter: blur(18px);
}

body.task-login #login-form label,
body.task-login #login-footer,
body.task-login #login-footer a {
    color: var(--autosocials-muted);
}

body.task-login #login-form .form-control {
    min-height: 48px;
    color: var(--autosocials-text);
    border-color: rgba(255, 255, 255, .16);
    border-radius: .75rem;
    background: rgba(4, 10, 18, .72);
}

body.task-login #login-form .form-control:focus {
    border-color: var(--autosocials-cyan);
    box-shadow: 0 0 0 .2rem rgba(87, 183, 255, .18);
}

body.task-login #rcmloginsubmit {
    min-height: 48px;
    border: 0;
    border-radius: .75rem;
    background: linear-gradient(135deg, var(--autosocials-blue), #075bc2);
    font-weight: 800;
    box-shadow: 0 10px 30px rgba(11, 124, 246, .28);
}

body.task-login #rcmloginsubmit:hover,
body.task-login #rcmloginsubmit:focus {
    background: linear-gradient(135deg, #298ffc, var(--autosocials-blue));
}

#layout-menu {
    background: var(--autosocials-navy);
}

#layout-menu .popover-header,
#layout-menu .special-buttons a.selected,
#layout-menu .special-buttons a:hover {
    color: var(--autosocials-text);
    background-color: var(--autosocials-blue);
}

.listing li.selected,
.listing tr.selected td,
.menu a.active,
.menu a:hover {
    border-color: var(--autosocials-blue);
    background-color: rgba(11, 124, 246, .12);
}

.btn-primary {
    border-color: var(--autosocials-blue);
    background-color: var(--autosocials-blue);
}

@media (max-width: 480px) {
    body.task-login #layout-content::before,
    body.task-login #layout-content::after {
        top: 10vh;
    }

    body.task-login #logo {
        top: 5vh;
        width: min(78vw, 285px);
    }

    body.task-login #login-form {
        top: 13vh;
        width: calc(100% - 2rem);
        padding: 1.15rem;
    }
}