@import url(bootstrap-3.4.1-dist/css/bootstrap.min.css);
@import url(bootstrap-3.4.1-dist/css/bootstrap-datetimepicker.min.css);
/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  line-height: 60px; /* Vertically center the text there */
  background-color: #f5f5f5;
}

.mr {
  margin-right: 5px;
}

.ml {
  margin-left: 5px;
}

/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

body > .container {
  padding: 60px 15px 0;
}

.footer > .container {
  padding-right: 15px;
  padding-left: 15px;
}
.footer { font-size: 10px; line-height: 30px; }
@media (min-width: 768px) {
.footer { font-size: 12px; line-height: 60px; }
}

code {
  font-size: 80%;
}

.navbar-header a.navbar-brand { padding-top: 0; padding-bottom: 0; }
/* logo 固定显示高度等比缩放，并在导航栏内垂直居中（高特异性覆盖媒体查询的 padding:0） */
.navbar-header a.navbar-brand img#login_header_logo { height: 40px; width: auto; }
/* flex 垂直居中：bootstrap 给 .navbar-brand 写死 height:50px，行高方案不生效。
   menu.tpl 用 .fixed-top、login.tpl 用 .navbar-fixed-top，两个都覆盖 */
.navbar.fixed-top .navbar-header a.navbar-brand,
.navbar.navbar-fixed-top .navbar-header a.navbar-brand {
    display: flex;
    align-items: center;
    height: 54px;
    padding-top: 0;
    padding-bottom: 0;
}
@media (min-width: 768px) {
.navbar-fixed-top .container-fluid .navbar-collapse { font-size: 12px; }
.navbar-fixed-top .container-fluid .navbar-collapse li a { padding-left: 5px; padding-right: 5px; }
.navbar-fixed-top .container-fluid .navbar-right { font-size: 11px; }
.navbar-fixed-top .container-fluid .navbar-right .navbar-btn { padding: 5px; }
.navbar-header a.navbar-brand { padding: 0; }
}
@media (min-width: 992px) {
.navbar-header a.navbar-brand { padding: 0 15px; }
.navbar-fixed-top .container-fluid .navbar-collapse { font-size: 14px; }
.navbar-fixed-top .container-fluid .navbar-right { font-size: 12px; }
.navbar-fixed-top .container-fluid .navbar-collapse li a { padding-left: 10px; padding-right: 10px; }
.navbar-fixed-top .container-fluid .navbar-right { padding-right: 5px; }
.navbar-fixed-top .container-fluid .navbar-right .navbar-btn { margin-right: 5px; padding: 5px 10px; }
}
@media (min-width: 1200px) {
.navbar-fixed-top .container-fluid .navbar-right a { font-size: 14px; }
.navbar-fixed-top .container-fluid .navbar-right .navbar-btn { margin-right: 15px; }
.navbar-fixed-top .container-fluid .navbar-collapse li a { padding-left: 15px; padding-right: 15px; }
}


span.active { font-weight: bold; }
div#login{ max-width: 35em; }

.quota {
z-index:99;
height:14px;
position: absolute;
}
.quota_text {
  z-index:100;
  text-align: center;
  font-size: 12px;
  color: #666;
  cursor: default;
  position: absolute;
  width:120px;
  height:16px;
  margin-top:-17px;
  padding-top: -1px;
}
.quota_bg { background-color: white; z-index:98; width:122px; height:16px;margin-top:-1px;margin-left:-1px;   border: 1px solid #999;}
.quota_no_border { border:none; margin:0; }
.quota_high { background: url(../images/quota-colors.png) repeat-x 0 -28px #f90509; }
.quota_mid  { background: url(../images/quota-colors.png) repeat-x 0 -14px #e3e909; }
.quota_low  { background: url(../images/quota-colors.png) repeat-x 0 0px #05f905; }
.quota_text_high { color: white; }
.quota_text_mid { color: #666; }
.quota_text_low { color: #666; }

/* -------------------------------------------------------------------------
   PostfixAdmin application theme
   Keep Bootstrap's component APIs for compatibility, but give every page a
   consistent, responsive surface and readable spacing.
   ------------------------------------------------------------------------- */
:root {
  --pa-bg: #f4f7fb;
  --pa-surface: #ffffff;
  --pa-surface-muted: #f8fafc;
  --pa-border: #e3e8f0;
  --pa-border-strong: #d3dbe7;
  --pa-text: #172033;
  --pa-muted: #64748b;
  --pa-primary: #2563eb;
  --pa-primary-dark: #1d4ed8;
  --pa-danger: #dc2626;
  --pa-warning: #b45309;
  --pa-radius: 14px;
  --pa-shadow: 0 10px 28px rgba(30, 55, 90, .08);
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  background: var(--pa-bg);
}

body {
  min-height: 100vh;
  margin: 0;
  padding-top: 72px;
  padding-bottom: 0;
  background: var(--pa-bg);
  color: var(--pa-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body.page-login { padding-top: 0; }
body.page-password-recover { padding-top: 72px; }

body > .page-shell[role="main"] {
  width: calc(100% - 48px) !important;
  max-width: 1440px;
  min-width: 0 !important;
  margin: 0 auto;
  padding: 26px 0 42px;
}

body > .container.page-shell { padding-left: 0; padding-right: 0; }

a { color: var(--pa-primary); transition: color .16s ease, background-color .16s ease, border-color .16s ease; }
a:hover, a:focus { color: var(--pa-primary-dark); text-decoration: none; }

/* Navigation */
.navbar.navbar-fixed-top,
.navbar.fixed-top {
  min-height: 72px;
  margin-bottom: 0;
  border: 0;
  border-bottom: 1px solid var(--pa-border);
  border-radius: 0;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 3px 18px rgba(30, 55, 90, .06);
  z-index: 1030;
}

.navbar.navbar-fixed-top .container,
.navbar.fixed-top .container-fluid,
.navbar.navbar-fixed-top .container-fluid {
  width: 100%;
  max-width: 1500px;
  min-height: 72px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

.navbar-header a.navbar-brand,
.navbar.navbar-fixed-top .navbar-header a.navbar-brand,
.navbar.fixed-top .navbar-header a.navbar-brand {
  display: flex;
  align-items: center;
  height: 72px;
  padding: 0 18px 0 0;
  color: var(--pa-text);
}

.navbar-header a.navbar-brand img#login_header_logo { max-width: 170px; height: 42px; width: auto; object-fit: contain; }
.navbar-header h2 { margin: 0 0 0 12px; font-size: 18px; font-weight: 700; line-height: 72px; }
.navbar-default .navbar-nav > li > a { color: #3d4a5e; font-weight: 600; }
.navbar .navbar-nav > li { float: left; }
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus { color: var(--pa-primary); background: #f1f5ff; }
.navbar.navbar-fixed-top .navbar-nav > li > a,
.navbar.fixed-top .navbar-nav > li > a { padding: 0 13px; line-height: 72px; }
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus { color: var(--pa-primary-dark); background: #eef3ff; }
.navbar .dropdown-menu { min-width: 205px; margin-top: 0; padding: 8px; border: 1px solid var(--pa-border); border-radius: 10px; box-shadow: var(--pa-shadow); }
.navbar .dropdown-menu > li > a { padding: 9px 12px; border-radius: 7px; color: var(--pa-text); }
.navbar .dropdown-menu > li > a:hover,
.navbar .dropdown-menu > li > a:focus { color: var(--pa-primary-dark); background: #f1f5ff; }
.navbar .navbar-right > li > a.btn { margin: 18px 0 18px 8px; padding: 7px 12px; border-radius: 8px; line-height: 1.4; font-weight: 600; }
.navbar .navbar-right > li > a.btn-default { border-color: var(--pa-border-strong); background: var(--pa-surface); color: #4b5a70; }
.navbar .navbar-right > li > a.btn-default:hover { border-color: #b8c6da; background: #f5f8fc; color: var(--pa-primary-dark); }
.navbar .navbar-toggle { margin-top: 18px; border-color: var(--pa-border-strong); border-radius: 8px; }
.navbar .navbar-toggle:hover, .navbar .navbar-toggle:focus { background: #f1f5ff; }
.navbar .navbar-toggle .icon-bar { background: var(--pa-primary); }

/* Shared surfaces and page spacing */
.panel {
  margin-bottom: 24px;
  border: 1px solid var(--pa-border);
  border-radius: var(--pa-radius);
  background: var(--pa-surface);
  box-shadow: var(--pa-shadow);
  overflow: hidden;
}
.panel-heading { min-height: 58px; padding: 17px 22px; border-bottom: 1px solid var(--pa-border); background: var(--pa-surface); color: var(--pa-text); font-size: 16px; font-weight: 700; }
.panel-heading h4, .panel-heading h3 { margin: 0; color: var(--pa-text); font-size: 18px; font-weight: 700; }
.panel-body { padding: 22px; }
.panel-footer { padding: 16px 22px; border-top: 1px solid var(--pa-border); background: var(--pa-surface-muted); }
.clearfix + br, .panel + .clearfix + br { display: none; }
.text-muted, .help-block { color: var(--pa-muted); }
.form-hint { color: var(--pa-muted); font-size: 13px; }
.flash-messages:empty { display: none; }
.alert { margin-bottom: 18px; padding: 13px 16px; border: 1px solid transparent; border-radius: 10px; box-shadow: none; }
.alert ul { margin: 0; padding-left: 20px; }
.alert-info { border-color: #bfdbfe; background: #eff6ff; color: #1e40af; }
.alert-danger { border-color: #fecaca; background: #fef2f2; color: #991b1b; }
.alert-warning { border-color: #fed7aa; background: #fff7ed; color: #9a3412; }
.backup-warning p { margin: 0 0 10px; }
.backup-warning p:last-child { margin-bottom: 0; }

/* Tables: never let a long email address collapse Chinese headers into glyphs. */
.table-responsive { width: 100%; margin: 0; border: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table { width: 100%; min-width: 720px; margin-bottom: 0; background: var(--pa-surface); color: var(--pa-text); }
.data-table > thead > tr > th,
.data-table > tbody > tr > td { padding: 13px 14px; border-color: var(--pa-border); vertical-align: middle; }
.data-table > thead > tr > th { background: var(--pa-surface-muted); color: #536176; font-size: 12px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.data-table > thead > tr:first-child > th[colspan] { background: #f1f5fb; color: var(--pa-text); font-size: 15px; }
.data-table > tbody > tr { transition: background-color .14s ease; }
.data-table > tbody > tr:hover { background: #f8fbff; }
.data-table > tbody > tr > td { font-size: 13px; }
.panel > .table > thead > tr > th,
.panel > .table > tbody > tr > td,
.panel .panel-body > .table > thead > tr > th,
.panel .panel-body > .table > tbody > tr > td { padding: 13px 14px; border-color: var(--pa-border); vertical-align: middle; }
.panel > .table > thead > tr > th,
.panel .panel-body > .table > thead > tr > th { background: var(--pa-surface-muted); color: #536176; font-weight: 700; white-space: nowrap; }
.panel > .table > tbody > tr:hover,
.panel .panel-body > .table > tbody > tr:hover { background: #f8fbff; }
#admin_table { min-width: 760px; }
#mailbox_table { min-width: 1120px; }
#mailbox_table th, #mailbox_table td { white-space: nowrap; }
#mailbox_table td:first-of-type { color: var(--pa-text); font-weight: 600; }
.action-cell, .data-table td:last-child { white-space: nowrap; }
.permission-cell, .state-cell { text-align: center; }
.status-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.4; }
.status-yes { color: #166534; background: #dcfce7; }
.status-no { color: #64748b; background: #eef2f7; }
.searchresult { padding: 2px 4px; border-radius: 4px; background: #fef3c7; color: #92400e; }

/* Buttons, controls and forms */
.btn { min-height: 36px; padding: 7px 14px; border-radius: 8px; border-width: 1px; font-weight: 600; line-height: 1.45; transition: color .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(30, 55, 90, .1); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn-primary { border-color: var(--pa-primary); background: var(--pa-primary); }
.btn-primary:hover, .btn-primary:focus { border-color: var(--pa-primary-dark); background: var(--pa-primary-dark); }
.btn-default, .btn-secondary { border-color: var(--pa-border-strong); background: var(--pa-surface); color: #4b5a70; }
.btn-default:hover, .btn-default:focus, .btn-secondary:hover, .btn-secondary:focus { border-color: #b9c7db; background: #f5f8fc; color: var(--pa-primary-dark); }
.btn-danger { border-color: var(--pa-danger); background: var(--pa-danger); }
.btn-warning { border-color: #f59e0b; background: #f59e0b; color: #422006; }
.form-control, select.form-control { height: 40px; padding: 8px 12px; border: 1px solid var(--pa-border-strong); border-radius: 8px; background: #fff; color: var(--pa-text); box-shadow: none; font-size: 14px; }
textarea.form-control { height: auto; min-height: 104px; }
.form-control:focus { border-color: #7aa2f7; box-shadow: 0 0 0 3px rgba(37, 99, 235, .13); }
.control-label { color: #46546a; font-weight: 600; }
.form-group { margin-bottom: 20px; }
.form-horizontal .form-group { margin-left: -10px; margin-right: -10px; }
.form-horizontal .control-label { padding-top: 10px; }
.form-control-static { min-height: 40px; padding-top: 10px; padding-bottom: 10px; color: var(--pa-text); }
#edit_form { max-width: 980px; margin-left: auto; margin-right: auto; }
#edit_form .panel-body { padding: 28px 30px; }
#edit_form .panel-footer { min-height: 68px; }
.has-error .form-control { border-color: #ef4444; }
.has-error .help-block { color: #b91c1c; }
.checkbox label, .radio label, .checkbox-inline { color: #46546a; font-weight: 500; }

/* Search, overview and action areas */
.panel-heading form, .panel-heading .form-inline { margin: 0; }
.panel-heading .form-control { display: inline-block; max-width: 360px; background: #f8fafc; }
.overview-summary { padding-top: 24px; padding-bottom: 20px; }
.overview-summary h4 { margin: 0 0 12px; color: var(--pa-text); font-size: 18px; }
.overview-summary ul { display: inline-flex; gap: 18px; margin: 0; padding: 0; list-style: none; color: var(--pa-muted); }
.overview-summary hr { margin: 22px 0 18px; border-top-color: var(--pa-border); }
.overview-tabs { color: var(--pa-muted); }
.overview-tabs a, .overview-tabs .active { display: inline-block; margin-left: 10px; padding: 6px 12px; border-radius: 999px; }
.overview-tabs .active { background: #eaf1ff; color: var(--pa-primary-dark); font-weight: 700; }
.overview-tabs a:hover { background: #f1f5ff; }
.searchparams { margin: 14px 0; padding: 10px 14px; border: 1px solid #bfdbfe; border-radius: 9px; background: #eff6ff; color: #1e40af; }
.searchparams p { display: inline; margin-right: 8px; font-weight: 700; }
.searchparams span { margin-right: 8px; }
.pagination { margin: 16px 0 0; }
.pagination > li > a, .pagination > li > span { margin-left: 4px; border: 1px solid var(--pa-border); border-radius: 7px !important; color: #4b5a70; }
.pagination > .active > a, .pagination > .active > span { border-color: var(--pa-primary); background: var(--pa-primary); }
.btn-toolbar { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.btn-toolbar .btn-group { display: inline-flex; gap: 8px; }

/* Landing pages */
#main_menu .table { margin: 0; }
#main_menu .table > tbody > tr > td { padding: 18px 20px; border-color: var(--pa-border); vertical-align: middle; }
#main_menu .table > tbody > tr > td:first-child { width: 190px; }
#main_menu .table > tbody > tr > td:first-child .btn { min-width: 145px; }

/* Login and unauthenticated forms */
.page-login { background: radial-gradient(circle at 50% -15%, #e4edff 0, var(--pa-bg) 42%); }
.login-page { width: 100%; max-width: 430px; margin: 0 auto; padding: 54px 0 24px; }
.login-brand { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 0 22px; }
.login-brand img { width: auto; max-width: 80px; height: 48px; object-fit: contain; }
.login-brand h2 { margin: 0; color: var(--pa-text); font-size: 30px; line-height: 1.2; font-weight: 750; }
.login-card { padding: 28px 30px 24px; border: 1px solid rgba(211, 219, 231, .85); border-radius: 18px; box-shadow: 0 18px 44px rgba(30, 55, 90, .12); }
.login-card .form-group { margin-bottom: 18px; }
.login-card label { color: #46546a; font-weight: 600; }
.login-card .btn-lg { min-width: 150px; border-radius: 9px; }
.page-password-change .page-shell > h3,
.page-password-recover .page-shell > h2 { max-width: 560px; margin: 0 auto 18px; color: var(--pa-text); font-size: 22px; }
.page-password-change .page-shell > form,
.page-password-recover .page-shell > form { max-width: 560px; margin: 0 auto; padding: 26px 30px; border: 1px solid var(--pa-border); border-radius: var(--pa-radius); background: var(--pa-surface); box-shadow: var(--pa-shadow); }

/* Footer stays in normal flow so short and long pages both behave well. */
.footer { position: static; width: 100%; height: auto; margin: 0; padding: 18px 0 24px; border-top: 1px solid var(--pa-border); background: transparent; color: var(--pa-muted); font-size: 12px; line-height: 1.5; }
.footer .container { width: calc(100% - 48px); max-width: 1440px; padding: 0; }

@media (max-width: 767px) {
  body { padding-top: 62px; }
  body.page-login { padding-top: 0; }
  body.page-password-recover { padding-top: 62px; }
  body > .page-shell[role="main"] { width: calc(100% - 24px) !important; padding-top: 16px; padding-bottom: 28px; }
  .navbar.navbar-fixed-top, .navbar.fixed-top,
  .navbar.navbar-fixed-top .container, .navbar.fixed-top .container-fluid,
  .navbar.navbar-fixed-top .container-fluid { min-height: 62px; }
  .navbar-header a.navbar-brand, .navbar.navbar-fixed-top .navbar-header a.navbar-brand,
  .navbar.fixed-top .navbar-header a.navbar-brand { height: 62px; padding-right: 10px; }
  .navbar-header a.navbar-brand img#login_header_logo { max-width: 135px; height: 36px; }
  .navbar .navbar-toggle { margin-top: 14px; }
  .navbar-collapse { border-top-color: var(--pa-border); box-shadow: 0 12px 20px rgba(30, 55, 90, .06); }
  .navbar .navbar-nav > li { float: none; }
  .navbar.navbar-fixed-top .navbar-nav > li > a, .navbar.fixed-top .navbar-nav > li > a { line-height: 46px; }
  .navbar .navbar-right > li > a.btn { margin: 4px 0; text-align: left; }
  .navbar .container-fluid { padding-left: 12px; padding-right: 12px; }
  .panel-heading, .panel-body { padding-left: 16px; padding-right: 16px; }
  .panel-footer { padding-left: 16px; padding-right: 16px; }
  .overview-summary ul { display: block; }
  .overview-summary li { margin: 4px 0; }
  .login-page { padding: 30px 0 18px; }
  .login-card { padding: 22px 18px 18px; }
  .login-brand h2 { font-size: 24px; }
  .form-horizontal .form-group { margin-left: 0; margin-right: 0; }
  .form-horizontal .control-label { padding-top: 0; margin-bottom: 6px; text-align: left; }
  #edit_form .panel-body { padding: 22px 18px; }
  #main_menu .table > tbody > tr > td { display: block; width: 100% !important; padding: 12px 16px; }
  #main_menu .table > tbody > tr > td:first-child { padding-bottom: 0; }
  .footer .container { width: calc(100% - 24px); }
}