/*
 * Szkoła Futbolu — Roundcube child skin
 * Presentation-only overrides for the stock Elastic skin.
 */

:root {
  --sfs-navy-950: #001327;
  --sfs-navy-900: #001b36;
  --sfs-navy-800: #052746;
  --sfs-blue: #168fd3;
  --sfs-cyan: #23c7f4;
  --sfs-ice: #eef8fc;
  --sfs-border: #d7e3ea;
  --sfs-text: #162638;
}

body {
  color: var(--sfs-text);
  font-family: Roboto, "Segoe UI", Arial, sans-serif;
}

a,
.btn-link {
  color: #087fbf;
}

.btn-primary,
.button.mainaction,
input.button.mainaction {
  background-color: var(--sfs-blue) !important;
  border-color: var(--sfs-blue) !important;
  color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.button.mainaction:hover,
.button.mainaction:focus {
  background-color: #0879b8 !important;
  border-color: #0879b8 !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus {
  border-color: var(--sfs-cyan) !important;
  box-shadow: 0 0 0 .2rem rgba(35, 199, 244, .2) !important;
}

/* Login */
body.task-login {
  min-height: 100vh;
  background-color: var(--sfs-navy-950);
  background-image:
    linear-gradient(115deg, rgba(0, 19, 39, .94), rgba(0, 27, 54, .72)),
    url("images/gcs-background.jpg");
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

.task-login #layout {
  min-height: 100vh;
  background: transparent !important;
}

.task-login #layout-content {
  box-sizing: border-box;
  min-height: 100vh;
  padding: 5vh 1.25rem 2rem;
  overflow: auto;
  background: transparent !important;
}

body.task-login #logo {
  content: url("images/sfs-logo.webp");
  display: block;
  position: static !important;
  width: 158px;
  height: auto;
  max-height: none !important;
  top: auto !important;
  margin: 0 auto 1.1rem;
  filter: drop-shadow(0 8px 22px rgba(0, 0, 0, .32));
}

.task-login #login-form {
  box-sizing: border-box;
  position: static;
  width: min(100%, 440px);
  max-width: 440px;
  margin: 0 auto;
  padding: 2rem 2.2rem 1.6rem;
  text-align: left;
  background: rgba(0, 27, 54, .94);
  border: 1px solid rgba(35, 199, 244, .58);
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .35);
  backdrop-filter: blur(7px);
}

.task-login #login-form::before {
  content: "Poczta";
  display: block;
  margin: 0 0 1.45rem;
  color: #fff;
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  letter-spacing: -.02em;
}

.task-login #login-form .form-group,
.task-login #login-form .input-group {
  margin-bottom: 1rem;
}

.task-login #login-form .input-group-text {
  width: 46px;
  justify-content: center;
  color: var(--sfs-cyan);
  background: #00172e;
  border-color: #36516b;
}

.task-login #login-form .form-control {
  min-height: 46px;
  color: #10263a;
  background: #fff;
  border-color: #b9cad6;
}

.task-login #login-form .form-control::placeholder {
  color: #718394;
}

.task-login #rcmloginsubmit {
  min-height: 46px;
  margin-top: .25rem;
  font-weight: 700;
  letter-spacing: .01em;
}

.task-login #login-footer {
  color: rgba(255, 255, 255, .78);
  font-size: .82rem;
  text-align: center;
}

.task-login #login-footer > div {
  padding: .85rem 0 0;
  background: transparent;
}

.task-login #login-footer a {
  color: var(--sfs-cyan);
}

.task-login .responsecode,
.task-login #messagestack .alert {
  border-radius: 6px;
}

/* Main application */
#layout-menu,
#layout-menu .popover-header,
#taskmenu {
  background-color: var(--sfs-navy-950) !important;
}

#layout-menu .popover-header #logo {
  content: url("images/sfs-logo.webp");
  box-sizing: border-box;
  width: 100%;
  height: 54px;
  max-height: 54px;
  object-fit: contain;
  padding: .35rem;
}

#taskmenu a,
#taskmenu .button {
  color: #c7d7e4 !important;
}

#taskmenu a:hover,
#taskmenu a:focus,
#taskmenu a.selected,
#taskmenu .selected > a {
  color: #fff !important;
  background-color: var(--sfs-navy-800) !important;
}

#taskmenu a.selected,
#taskmenu .selected > a {
  box-shadow: inset 4px 0 0 var(--sfs-cyan);
}

#layout-sidebar {
  color: #d8e4ed;
  background: var(--sfs-navy-900) !important;
  border-color: #173a56 !important;
}

#layout-sidebar > .header,
#layout-sidebar > .footer {
  color: #fff;
  background: var(--sfs-navy-900) !important;
  border-color: #173a56 !important;
}

#layout-sidebar .header a,
#layout-sidebar .footer a,
#layout-sidebar .button {
  color: #d8e4ed !important;
}

#mailboxlist li > a,
#mailboxlist .unreadcount {
  color: #d8e4ed !important;
}

#mailboxlist li > a:hover,
#mailboxlist li.selected > a {
  color: #fff !important;
  background-color: var(--sfs-navy-800) !important;
}

#mailboxlist li.selected > a {
  box-shadow: inset 4px 0 0 var(--sfs-cyan);
}

#layout-list {
  background: #f9fbfc;
  border-color: var(--sfs-border) !important;
}

#layout-list > .header,
#layout-content > .header {
  border-color: var(--sfs-border) !important;
  box-shadow: 0 1px 0 rgba(0, 27, 54, .04);
}

#layout-list > .header {
  background: #fff !important;
}

#layout-content > .header {
  background: #f8fbfd !important;
}

#layout-list .searchbar {
  background: #fff;
  border-color: #c8d7e1;
  border-radius: 7px;
}

#messagelist tbody tr:hover td {
  background-color: #f2f9fc;
}

#messagelist tbody tr.selected td,
#messagelist tbody tr.selected:hover td {
  color: #09263d;
  background-color: #dff3fb !important;
}

#messagelist tbody tr.selected td:first-child {
  box-shadow: inset 4px 0 0 var(--sfs-cyan);
}

.listing li.selected,
.listing li.selected > a {
  background-color: #dff3fb;
}

.quota-widget .bar .value {
  background-color: var(--sfs-cyan) !important;
}

/* Authenticated application — restrained glass interface */
body:not(.task-login) {
  --sfs-glass-dark: rgba(0, 19, 39, .68);
  --sfs-glass-folder: rgba(0, 27, 54, .6);
  --sfs-glass-light: rgba(255, 255, 255, .9);
  --sfs-glass-soft: rgba(248, 252, 254, .86);
  --sfs-glass-border: rgba(164, 190, 207, .42);
  --sfs-glass-dark-border: rgba(106, 166, 199, .25);
  --sfs-app-shadow: 0 14px 38px rgba(0, 19, 39, .12);
  position: relative;
  isolation: isolate;
  background: #001b36;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body:not(.task-login):not(.action-preview)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(115deg, rgba(0, 19, 39, .5), rgba(0, 32, 58, .28)),
    url("images/gcs-background-mail.webp");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.01);
  transition: opacity 220ms ease-out;
}

html.sfs-wallpaper-ready body:not(.task-login):not(.action-preview)::before {
  opacity: 1;
}

body:not(.task-login) #layout {
  position: relative;
  z-index: 1;
  background: transparent !important;
}

body:not(.task-login) #layout-menu,
body:not(.task-login) #layout-menu .popover-header,
body:not(.task-login) #taskmenu {
  background: var(--sfs-glass-dark) !important;
  border-color: var(--sfs-glass-dark-border) !important;
}

body:not(.task-login) #layout-menu {
  box-shadow: 10px 0 32px rgba(0, 19, 39, .14);
  z-index: 3;
}

body:not(.task-login) #layout-menu .popover-header {
  border-bottom: 1px solid var(--sfs-glass-dark-border) !important;
}

body:not(.task-login) #layout-menu .popover-header #logo {
  height: 58px;
  max-height: 58px;
  padding: .45rem .3rem;
  filter: drop-shadow(0 5px 12px rgba(0, 0, 0, .24));
}

body:not(.task-login) #taskmenu a {
  position: relative;
  color: rgba(225, 237, 245, .86) !important;
  border: 0 !important;
  transition: color 150ms ease, background-color 150ms ease;
}

body:not(.task-login) #taskmenu a:hover,
body:not(.task-login) #taskmenu a:focus {
  color: #fff !important;
  background: rgba(35, 199, 244, .1) !important;
}

body:not(.task-login) #taskmenu a.selected {
  color: #fff !important;
  background: rgba(22, 143, 211, .2) !important;
  box-shadow: inset 4px 0 0 var(--sfs-cyan) !important;
}

body:not(.task-login) #taskmenu a.selected::after {
  content: "";
  position: absolute;
  right: 0;
  top: 22%;
  bottom: 22%;
  width: 1px;
  background: rgba(35, 199, 244, .42);
}

body:not(.task-login) #taskmenu .special-buttons a.logout {
  color: #ff7b83 !important;
}

body:not(.task-login) #layout-sidebar {
  color: #dbe8f0;
  background: var(--sfs-glass-folder) !important;
  border-color: var(--sfs-glass-dark-border) !important;
  box-shadow: 8px 0 26px rgba(0, 19, 39, .1);
  z-index: 2;
}

body:not(.task-login) #layout-sidebar > .header,
body:not(.task-login) #layout-sidebar > .footer {
  color: #fff;
  background: rgba(0, 23, 46, .35) !important;
  border-color: var(--sfs-glass-dark-border) !important;
}

body:not(.task-login) #layout-sidebar > .header {
  min-height: 58px;
}

body:not(.task-login) #layout-sidebar > .header .header-title {
  color: rgba(238, 247, 252, .92);
  font-size: .92rem;
  font-weight: 500;
}

body:not(.task-login) #mailboxlist {
  padding-top: .35rem;
}

body:not(.task-login) #mailboxlist li > a {
  min-height: 46px;
  padding-top: .68rem;
  padding-bottom: .68rem;
  color: rgba(226, 238, 246, .89) !important;
  border-bottom: 1px solid rgba(120, 164, 190, .17);
  transition: color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

body:not(.task-login) #mailboxlist li > a:hover {
  color: #fff !important;
  background: rgba(35, 199, 244, .08) !important;
}

body:not(.task-login) #mailboxlist li.selected > a {
  color: #fff !important;
  background: linear-gradient(90deg, rgba(22, 143, 211, .25), rgba(35, 199, 244, .08)) !important;
  box-shadow: inset 4px 0 0 var(--sfs-cyan) !important;
}

body:not(.task-login) #mailboxlist .unreadcount {
  min-width: 2rem;
  color: #fff !important;
  background: linear-gradient(135deg, #25c9f4, #168fd3) !important;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 7px;
  box-shadow: 0 4px 12px rgba(22, 143, 211, .22);
}

body:not(.task-login) #layout-sidebar .quota-widget {
  color: rgba(222, 236, 245, .85);
}

body:not(.task-login) #layout-sidebar .quota-widget .bar {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(194, 222, 237, .35);
  border-radius: 999px;
}

body:not(.task-login) #layout-sidebar .quota-widget .bar .value {
  border-radius: 999px;
  box-shadow: 0 0 14px rgba(35, 199, 244, .28);
}

body:not(.task-login) #layout-list,
body:not(.task-login) #layout-content {
  background: var(--sfs-glass-light) !important;
  border-color: var(--sfs-glass-border) !important;
}

body:not(.task-login) #layout-content {
  background: linear-gradient(180deg, rgba(250, 253, 255, .84), rgba(242, 249, 252, .78)) !important;
}

body:not(.task-login) #layout-list {
  box-shadow: 8px 0 28px rgba(0, 19, 39, .08);
  z-index: 1;
}

body:not(.task-login) #layout-list > .header,
body:not(.task-login) #layout-content > .header {
  min-height: 58px;
  color: #2a3d4f;
  background: rgba(250, 253, 255, .82) !important;
  border-color: var(--sfs-glass-border) !important;
  box-shadow: 0 1px 0 rgba(0, 19, 39, .04) !important;
}

body:not(.task-login) #layout-list > .header .toolbar a,
body:not(.task-login) #layout-content > .header .toolbar a,
body:not(.task-login) #layout-content > .header .toolbar button {
  border-radius: 7px;
  transition: color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

body:not(.task-login) #layout-list > .header .toolbar a:hover,
body:not(.task-login) #layout-content > .header .toolbar a:hover,
body:not(.task-login) #layout-content > .header .toolbar button:hover {
  color: #087fbf !important;
  background: rgba(22, 143, 211, .08) !important;
  box-shadow: inset 0 0 0 1px rgba(22, 143, 211, .12);
}

body:not(.task-login) #layout-list .searchbar {
  margin: .5rem .65rem;
  min-height: 40px;
  background: rgba(255, 255, 255, .8) !important;
  border: 1px solid rgba(139, 172, 193, .42) !important;
  border-radius: 8px;
  box-shadow: inset 0 1px 1px rgba(0, 19, 39, .025);
}

body:not(.task-login) #layout-list .searchbar:focus-within {
  border-color: rgba(35, 199, 244, .75) !important;
  box-shadow: 0 0 0 3px rgba(35, 199, 244, .1);
}

body:not(.task-login) #mailsearchform {
  color: #23384a;
  font-size: .92rem;
}

body:not(.task-login) #messagelist-content {
  background: rgba(255, 255, 255, .28);
}

body:not(.task-login) #messagelist {
  background: transparent !important;
}

body:not(.task-login) #messagelist tbody tr td {
  background: rgba(255, 255, 255, .52);
  border-bottom-color: rgba(169, 191, 205, .35) !important;
  transition: background-color 130ms ease, color 130ms ease, box-shadow 130ms ease;
}

body:not(.task-login) #messagelist tbody tr:hover td {
  background: rgba(239, 248, 252, .9) !important;
}

body:not(.task-login) #messagelist tbody tr.selected td,
body:not(.task-login) #messagelist tbody tr.selected:hover td {
  color: #09263d;
  background: rgba(220, 244, 252, .95) !important;
}

body:not(.task-login) #messagelist tbody tr.selected td:first-child {
  box-shadow: inset 3px 0 0 var(--sfs-cyan) !important;
}

body:not(.task-login) #messagelist tbody tr.unread td,
body:not(.task-login) #messagelist tbody tr.unread a {
  color: #102c43;
  font-weight: 600;
}

body:not(.task-login) #messagelist .unread::before,
body:not(.task-login) #messagelist .status.unread::before {
  color: var(--sfs-cyan) !important;
}

body:not(.task-login) #layout-list > .footer,
body:not(.task-login) #layout-content > .footer {
  color: #607588;
  background: rgba(250, 253, 255, .8) !important;
  border-color: var(--sfs-glass-border) !important;
}

body:not(.task-login) #layout-content .iframe-wrapper {
  background: rgba(247, 252, 254, .08) !important;
}

body:not(.task-login) #messagecontframe {
  background: transparent !important;
}

body:not(.task-login) #messagecontframe[src*="watermark.html"] {
  opacity: .8;
}

body:not(.task-login) #layout-content > .content,
body:not(.task-login) #layout-content > .frame-content {
  background: rgba(255, 255, 255, .62) !important;
}

body:not(.task-login) #message-header {
  margin-bottom: 1.2rem;
  padding-bottom: 1.15rem;
  border-bottom: 1px solid rgba(159, 184, 200, .38);
}

body:not(.task-login) #message-header > .subject {
  color: #10263a;
  font-size: 1.5rem;
  font-weight: 650;
  line-height: 1.28;
  letter-spacing: -.018em;
}

body:not(.task-login) #message-header > .header img.contactphoto {
  background: rgba(226, 235, 241, .8);
  border: 1px solid rgba(157, 181, 197, .32);
  box-shadow: 0 5px 14px rgba(0, 19, 39, .07);
}

body:not(.task-login) #message-header .header-summary,
body:not(.task-login) #message-header .header-headers {
  color: #40566a;
}

body:not(.task-login) #message-header .header-links a {
  color: #087fbf;
  border-radius: 5px;
  transition: color 150ms ease, background-color 150ms ease;
}

body:not(.task-login) #message-header .header-links a:hover {
  color: #055f91;
  background: rgba(22, 143, 211, .07);
}

body:not(.task-login) #message-content,
body:not(.task-login) #messagebody,
body:not(.task-login) .message-part,
body:not(.task-login) .message-htmlpart {
  color: #263a4c;
  line-height: 1.58;
}

body:not(.task-login) #messagebody {
  background: rgba(250, 253, 255, .84) !important;
}

body:not(.task-login) .message-part,
body:not(.task-login) .message-htmlpart {
  background: transparent !important;
}

html,
body.task-mail.action-preview {
  background-color: transparent !important;
  background-image: none !important;
}

body:not(.task-login) .attachmentslist li {
  background: rgba(238, 248, 252, .76);
  border-color: rgba(128, 171, 196, .35);
  border-radius: 7px;
}

body:not(.task-login) .popupmenu,
body:not(.task-login) .ui-dialog,
body:not(.task-login) .popover {
  background: rgba(255, 255, 255, .96) !important;
  border: 1px solid rgba(143, 171, 189, .42) !important;
  border-radius: 9px !important;
  box-shadow: 0 18px 45px rgba(0, 19, 39, .18) !important;
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  body:not(.task-login) #layout-menu,
  body:not(.task-login) #layout-sidebar {
    -webkit-backdrop-filter: blur(5px) saturate(100%);
    backdrop-filter: blur(5px) saturate(100%);
  }

  body:not(.task-login) #layout-list,
  body:not(.task-login) #layout-content,
  body:not(.task-login) .popupmenu,
  body:not(.task-login) .ui-dialog,
  body:not(.task-login) .popover {
    -webkit-backdrop-filter: blur(2px) saturate(96%);
    backdrop-filter: blur(2px) saturate(96%);
  }
}

@media screen and (max-width: 768px) {
  body:not(.task-login) {
    isolation: isolate;
  }

  body:not(.task-login):not(.action-preview)::before {
    background-position: center;
  }

  body:not(.task-login) #layout-menu,
  body:not(.task-login) #layout-sidebar,
  body:not(.task-login) #layout-list,
  body:not(.task-login) #layout-content {
    box-shadow: none;
  }

  body:not(.task-login) #layout-list,
  body:not(.task-login) #layout-content {
    background: rgba(255, 255, 255, .9) !important;
  }
}

@media screen and (max-width: 480px) {
  .task-login #layout-content {
    padding: 1.25rem .85rem;
  }

  .task-login #logo {
    width: 124px;
    margin-bottom: .8rem;
  }

  .task-login #login-form {
    padding: 1.45rem 1.2rem 1.2rem;
  }

  .task-login #login-form::before {
    margin-bottom: 1.1rem;
    font-size: 1.3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}