/* =====================================================================
   PKWORLD webmail theme  -  MAIL-P1
   Colours taken from the PKWORLD admin panel.
   navy #1B4353 | deep navy #0F2A36 | green #3BB44A | teal #50BAC0
   sidebar #3A3F51 | alert #E93B65 | muted #7C949E
   ===================================================================== */

/* ---------- SIGN IN : matches the admin panel sign-in ---------- */
body.task-login,
body.task-login #layout,
body.task-login #layout-content { background: #0F2A36 !important; }

body.task-login #layout-content {
    display: flex !important; flex-direction: column !important;
    align-items: center !important; justify-content: center !important;
    min-height: 100vh !important; padding: 24px !important;
    text-align: left !important;
}
body.task-login::before, body.task-login::after {
    content: ""; position: fixed; border-radius: 50%; pointer-events: none; z-index: 0;
}
body.task-login::before {
    top: -180px; left: -160px; width: 620px; height: 620px;
    background: radial-gradient(circle, rgba(59,180,74,0.10) 0%, transparent 70%);
}
body.task-login::after {
    bottom: -220px; right: -180px; width: 720px; height: 720px;
    background: radial-gradient(circle, rgba(59,180,74,0.07) 0%, transparent 70%);
}

body.task-login #logo {
    position: relative !important; z-index: 1; top: 0 !important;
    max-height: 42px !important; width: auto; margin: 0 0 28px !important; display: block;
}

body.task-login #login-form {
    position: relative !important; z-index: 1; top: 0 !important;
    background: #ffffff !important; border: none !important;
    border-radius: 18px !important;
    box-shadow: 0 24px 64px rgba(0,0,0,0.34) !important;
    padding: 32px 32px 26px !important;
    width: 100% !important; max-width: 400px !important; margin: 0 !important;
}

/* each field is its own stacked row */
body.task-login #login-form tr.form-group,
body.task-login #login-form tr { display: block !important; margin: 0 0 18px !important; }
body.task-login #login-form td.title {
    display: block !important; width: 100% !important;
    padding: 0 !important; margin: 0 0 8px !important; text-align: left !important;
}
body.task-login #login-form td.input {
    display: block !important; width: 100% !important; padding: 0 !important;
}
/* the grey icon chip is Elastic's - the admin panel has no icons, so hide it */
body.task-login #login-form .input-group-prepend,
body.task-login #login-form .input-group-text { display: none !important; }

body.task-login #login-form td.title label,
body.task-login #login-form label {
    display: block !important; text-align: left !important;
    background: none !important; box-shadow: none !important; border: none !important;
    padding: 0 !important; margin: 0 !important; width: auto !important; height: auto !important;
    font-size: 12px !important; font-weight: 500 !important; letter-spacing: .2px;
    color: #7C949E !important; text-transform: none !important;
}

body.task-login #login-form input.form-control,
body.task-login #login-form input[type="text"],
body.task-login #login-form input[type="password"] {
    width: 100% !important; height: 46px !important; padding: 0 14px !important;
    border: 1.5px solid #E8EEF0 !important; border-radius: 10px !important;
    font-size: 14px !important; color: #1B4353 !important;
    background: #F8FCFD !important; box-shadow: none !important;
}
body.task-login #login-form input.form-control:focus {
    border-color: #3BB44A !important; background: #ffffff !important;
}
body.task-login #login-form input::placeholder { color: #C2D2D8 !important; }

body.task-login #login-form p.formbuttons { margin: 4px 0 0 !important; }
body.task-login #login-form button.submit,
body.task-login #login-form button.mainaction,
body.task-login #login-form button[type="submit"] {
    display: block !important; width: 100% !important; height: 48px !important;
    background: #1B4353 !important; color: #ffffff !important;
    border: none !important; border-radius: 10px !important;
    font-size: 15px !important; font-weight: 500 !important; letter-spacing: .3px;
    text-transform: none !important;
}
body.task-login #login-form button.submit:hover,
body.task-login #login-form button.mainaction:hover,
body.task-login #login-form button[type="submit"]:hover { background: #3BB44A !important; }

body.task-login #login-footer { display: none !important; }
body.task-login .noscriptwarning { color: #FFD9E2 !important; }
body.task-login #messagestack div.error {
    background: #FEECF0 !important; border: 1px solid #F8B4C8 !important;
    color: #E93B65 !important; border-radius: 10px !important;
}
body.task-login #messagestack div.confirmation {
    background: #EDF9EF !important; border: 1px solid #BFE6C6 !important;
    color: #2C7A3C !important; border-radius: 10px !important;
}

/* ---------- INSIDE THE MAILBOX : colour only, no layout changes ---------- */
#layout-menu, #taskmenu, .task-menu { background: #3A3F51 !important; }
#taskmenu a.button, #layout-menu a.button { color: #B4B6BD !important; }
#taskmenu a.button:hover, #layout-menu a.button:hover { color: #ffffff !important; }
#taskmenu a.button.selected, #layout-menu a.button.selected,
#taskmenu a.button.selected:hover {
    color: #ffffff !important;
    background: rgba(59,180,74,.18) !important;
    box-shadow: inset 3px 0 0 #3BB44A;
}
#taskmenu a.button.selected::before, #layout-menu a.button.selected::before { color: #3BB44A !important; }

.listing li a.selected, .listing tr.selected td,
#messagelist tr.selected td, .table tr.selected td {
    background-color: rgba(80,186,192,.14) !important;
}
.btn-primary, button.btn-primary, a.btn-primary,
button.mainaction, a.button.mainaction {
    background-color: #1B4353 !important; border-color: #1B4353 !important; color: #fff !important;
}
.btn-primary:hover, button.mainaction:hover, a.button.mainaction:hover {
    background-color: #3BB44A !important; border-color: #3BB44A !important;
}
#layout-list .header, #layout-content .header, #layout-sidebar .header {
    background: #F5FEFF !important; border-bottom: 1px solid #DCDCDC !important;
}
#layout-list .header .header-title, #layout-content .header .header-title { color: #1B4353 !important; }
.menu li.selected > a, .popupmenu li.selected > a { color: #3BB44A !important; }
.badge, .unreadcount, span.unreadcount { background-color: #3BB44A !important; color: #fff !important; }