:root{
  --humanis-bg:#071421;
  --humanis-bg-deep:#04101b;
  --humanis-panel:#0b1c2b;
  --humanis-panel-2:#0e2436;
  --humanis-panel-3:#122b40;
  --humanis-line:#24435b;
  --humanis-line-strong:#35627e;
  --humanis-text:#e8f2f8;
  --humanis-muted:#93a9ba;
  --humanis-green:#23d88f;
  --humanis-green-soft:#0f4b3b;
  --humanis-cyan:#37c8ff;
  --humanis-blue:#4d8dff;
  --humanis-red:#ff6378;
  --humanis-amber:#f4c54f;
  --humanis-purple:#a78bfa;
  --humanis-shadow:0 18px 48px rgba(0,0,0,.24);
  --humanis-radius:12px;
  --bs-body-bg:var(--humanis-bg);
  --bs-body-color:var(--humanis-text);
  --bs-border-color:var(--humanis-line);
  --bs-secondary-color:var(--humanis-muted);
  --bs-tertiary-bg:var(--humanis-panel-2);
}

*{scrollbar-color:#315b75 #071421;scrollbar-width:thin}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:#071421}
*::-webkit-scrollbar-thumb{background:#315b75;border:2px solid #071421;border-radius:999px}
*::-webkit-scrollbar-thumb:hover{background:#3b718f}

html,body{min-height:100%}
body{
  background:
    radial-gradient(circle at 86% -10%,rgba(55,200,255,.10),transparent 30%),
    radial-gradient(circle at 12% 4%,rgba(35,216,143,.08),transparent 27%),
    linear-gradient(145deg,var(--humanis-bg-deep),var(--humanis-bg) 45%,#081827 100%);
  color:var(--humanis-text);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:14px;
}

a{color:#75d9ff}
a:hover{color:#a4e9ff}
.app-shell{min-height:100vh;width:100%}
.main{width:100%;min-width:0;margin:0}

/* =========================================================
   HEADER + MENU HORIZONTAL PULL-DOWN
   ========================================================= */
.app-header{
  position:sticky;
  top:0;
  z-index:1030;
  background:rgba(5,17,28,.96);
  border-bottom:1px solid var(--humanis-line);
  box-shadow:0 10px 30px rgba(0,0,0,.24);
  backdrop-filter:blur(16px);
}
.topbar{
  min-height:70px;
  display:grid;
  grid-template-columns:minmax(245px,auto) minmax(220px,1fr) auto;
  gap:22px;
  align-items:center;
  padding:10px 22px;
  border-bottom:1px solid rgba(53,98,126,.42);
}
.topbar-brand{display:flex;align-items:center;gap:11px;color:var(--humanis-text);text-decoration:none;min-width:0}
.topbar-brand:hover{color:var(--humanis-text)}
.brand-logo,.login-logo{
  flex:0 0 auto;
  width:44px;height:44px;border-radius:12px;
  display:grid;place-items:center;
  background:linear-gradient(145deg,#f5d777,#c99527);
  color:#172033;font-size:23px;font-weight:900;
  box-shadow:0 9px 22px rgba(217,164,65,.22);
  border:1px solid rgba(255,240,180,.55);
}
.brand-copy{display:block;min-width:0;line-height:1.05}
.brand-copy strong{display:block;font-size:17px;letter-spacing:.04em;color:#fff}
.brand-copy small{display:block;margin-top:5px;color:var(--humanis-muted);font-size:10px;white-space:nowrap}
.page-heading{min-width:0}
.page-heading h1{font-size:17px;line-height:1.2;margin:0;color:#fff;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.page-heading span{display:block;color:var(--humanis-muted);font-size:11px;margin-top:4px}
.userbox{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-width:0}
.user-identity{display:flex;align-items:center;gap:9px;padding:7px 10px;border:1px solid var(--humanis-line);background:var(--humanis-panel);border-radius:10px;min-width:0}
.user-identity>i{font-size:22px;color:var(--humanis-cyan)}
.user-identity-copy{display:block;line-height:1.05;max-width:185px;min-width:0}
.user-identity-copy b,.user-identity-copy small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-identity-copy b{font-size:12px;color:#fff}
.user-identity-copy small{font-size:10px;color:var(--humanis-muted);margin-top:4px}
.topbar-logout{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}

.topnav{min-height:48px;padding:0 22px;background:#081827;position:relative}
.topnav .container-fluid{min-height:48px}
.humanis-top-menu{gap:3px;align-items:stretch;min-width:0}
.humanis-top-menu>.nav-item{display:flex;align-items:stretch}
.humanis-top-menu .nav-link{
  display:flex;align-items:center;gap:7px;
  min-height:48px;padding:9px 11px;
  border:0;border-bottom:2px solid transparent;border-radius:0;
  color:#b7c9d6;background:transparent;
  font-size:12px;font-weight:650;white-space:nowrap;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.humanis-top-menu button.nav-link{appearance:none}
.humanis-top-menu .nav-link:hover,.humanis-top-menu .nav-link:focus,.humanis-top-menu .nav-link.show{
  color:#fff;background:rgba(55,200,255,.08);border-bottom-color:rgba(55,200,255,.55)
}
.humanis-top-menu .nav-link.active{
  color:#fff;background:rgba(35,216,143,.10);border-bottom-color:var(--humanis-green)
}
.humanis-top-menu .nav-link i{font-size:14px;color:var(--humanis-cyan)}
.humanis-top-menu .nav-link.active i{color:var(--humanis-green)}
.topnav-dropdown{
  min-width:255px;padding:7px;
  background:#0a1d2d;border:1px solid var(--humanis-line-strong);border-radius:10px;
  box-shadow:0 22px 50px rgba(0,0,0,.38)
}
.dropdown-section-title{padding:7px 10px 8px;color:var(--humanis-muted);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid var(--humanis-line);margin-bottom:5px}
.topnav-dropdown .dropdown-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:7px;color:#d9e6ee;font-size:12px}
.topnav-dropdown .dropdown-item i{width:17px;text-align:center;color:var(--humanis-cyan)}
.topnav-dropdown .dropdown-item:hover,.topnav-dropdown .dropdown-item:focus{background:#102d43;color:#fff}
.topnav-dropdown .dropdown-item.active{background:#124535;color:#fff}
.topnav-dropdown .dropdown-item.active i{color:var(--humanis-green)}
.topnav-tools{display:flex;align-items:center;padding-left:8px}
.menu-search-toggle{display:flex;align-items:center;gap:7px;border:1px solid var(--humanis-line);background:var(--humanis-panel);color:#c7d7e2;border-radius:8px;padding:7px 10px;font-size:11px;white-space:nowrap}
.menu-search-toggle:hover{border-color:var(--humanis-cyan);color:#fff;background:#10283a}
.menu-search-panel{position:absolute;left:22px;right:22px;top:100%;z-index:1040;background:#081827;border:1px solid var(--humanis-line-strong);border-top:0;border-radius:0 0 12px 12px;box-shadow:0 24px 50px rgba(0,0,0,.38);padding:12px}
.menu-search-box{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;border:1px solid var(--humanis-line-strong);background:#06131f;border-radius:9px;padding:0 11px}
.menu-search-box>i{color:var(--humanis-cyan)}
.menu-search-box input{width:100%;height:42px;border:0;outline:0;background:transparent;color:#fff;font-size:13px}
.menu-search-box input::placeholder{color:#718b9d}
.menu-search-box button{border:0;background:transparent;color:var(--humanis-muted);padding:7px}
.menu-search-box button:hover{color:#fff}
.menu-search-results{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:7px;margin-top:10px;max-height:310px;overflow:auto}
.menu-search-result{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--humanis-line);background:var(--humanis-panel);border-radius:8px;color:var(--humanis-text);text-decoration:none}
.menu-search-result:hover{border-color:var(--humanis-green);background:#0e2a35;color:#fff}
.menu-search-result i{color:var(--humanis-green);font-size:16px}
.menu-search-result span{display:block;font-size:12px;font-weight:700}
.menu-search-result small{display:block;color:var(--humanis-muted);font-size:10px;margin-top:2px}
.menu-search-empty{grid-column:1/-1;color:var(--humanis-muted);padding:18px;text-align:center}
.navbar-toggler{border:1px solid var(--humanis-line-strong);color:#fff;padding:7px 11px;border-radius:8px;font-size:12px;align-items:center;gap:7px}
.navbar-toggler:focus{box-shadow:0 0 0 3px rgba(55,200,255,.15)}

/* =========================================================
   RUANG KERJA LEBAR PENUH
   ========================================================= */
.content{width:100%;max-width:none;padding:18px 20px 32px;min-height:calc(100vh - 119px)}
.content>.row{--bs-gutter-x:14px;--bs-gutter-y:14px}
.section-title{font-weight:800;color:#fff;margin-bottom:12px}

/* =========================================================
   PANEL, KARTU, METRIK
   ========================================================= */
.card,.stat-card,.humanis-card,.metric-box{
  background:linear-gradient(180deg,var(--humanis-panel-2),var(--humanis-panel));
  color:var(--humanis-text);
  border:1px solid var(--humanis-line);
  border-radius:var(--humanis-radius);
  box-shadow:var(--humanis-shadow);
}
.card{overflow:hidden}
.card-header{
  min-height:42px;display:flex;align-items:center;
  background:#0d2233!important;color:#f3f8fb;
  border-bottom:1px solid var(--humanis-line)!important;
  padding:10px 13px;font-size:13px
}
.card-body{padding:14px}
.card-footer{background:#091a29;border-top:1px solid var(--humanis-line)}
.stat-card{padding:15px;position:relative;overflow:hidden}
.stat-card:after{content:"";position:absolute;right:-32px;top:-44px;width:110px;height:110px;border-radius:999px;background:radial-gradient(circle,rgba(35,216,143,.14),transparent 68%)}
.stat-card span{display:block;color:var(--humanis-muted);font-size:11px}
.stat-card b{display:block;font-size:28px;line-height:1.1;color:#fff;margin-top:7px;position:relative;z-index:1}
.metric-box{padding:12px;box-shadow:none}
.metric-box b{display:block;font-size:22px;color:var(--humanis-green)}
.metric-box small{color:var(--humanis-muted)}
.bg-white,.bg-light{background-color:var(--humanis-panel-2)!important}
.shadow-sm{box-shadow:var(--humanis-shadow)!important}
.rounded,.rounded-3,.rounded-4{border-radius:var(--humanis-radius)!important}
.border{border-color:var(--humanis-line)!important}

/* =========================================================
   TABLE
   ========================================================= */
.table{
  --bs-table-color:#dce8ef;
  --bs-table-bg:transparent;
  --bs-table-border-color:#23445b;
  --bs-table-striped-color:#e6f0f5;
  --bs-table-striped-bg:rgba(55,200,255,.025);
  --bs-table-hover-color:#fff;
  --bs-table-hover-bg:rgba(35,216,143,.065);
  color:var(--humanis-text);margin-bottom:0
}
.table>:not(caption)>*>*{padding:.62rem .65rem;border-bottom-color:var(--humanis-line);vertical-align:middle}
.table thead th,.table-light th,.table-dark th{
  background:#0a1d2c!important;color:#9fc0d4!important;
  font-size:10px;text-transform:uppercase;letter-spacing:.055em;font-weight:800;
  border-bottom:1px solid var(--humanis-line-strong)!important;white-space:nowrap
}
.table tbody td{font-size:12px}
.table-responsive{border-radius:0 0 var(--humanis-radius) var(--humanis-radius)}
.table-responsive>.table{min-width:720px}
.table caption{color:var(--humanis-muted)}

/* =========================================================
   FORM
   ========================================================= */
.form-label,label{color:#bcd0dc;font-size:12px;font-weight:650}
.form-control,.form-select,.form-check-input,.input-group-text{
  color:#eaf3f8;background-color:#071725;border-color:#31516a;border-radius:8px
}
.form-control::placeholder{color:#6e8798}
.form-control:focus,.form-select:focus{
  color:#fff;background-color:#081b2a;border-color:var(--humanis-cyan);
  box-shadow:0 0 0 .2rem rgba(55,200,255,.12)
}
.form-select{--bs-form-select-bg-img:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2393a9ba' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")}
.form-check-input:checked{background-color:var(--humanis-green);border-color:var(--humanis-green)}
.form-text,.text-muted{color:var(--humanis-muted)!important}
fieldset{border-color:var(--humanis-line)!important}
hr{border-color:var(--humanis-line);opacity:1}

/* =========================================================
   BUTTON
   ========================================================= */
.btn{border-radius:8px;font-weight:700;font-size:12px}
.btn-primary,.btn-humanis{background:linear-gradient(135deg,#1ac77f,#159d73);border-color:#1ac77f;color:#032016}
.btn-primary:hover,.btn-humanis:hover{background:linear-gradient(135deg,#2ce49b,#1ab381);border-color:#2ce49b;color:#031b12;filter:none}
.btn-outline-primary{border-color:#3f8cff;color:#82b3ff}
.btn-outline-primary:hover{background:#1f5faa;border-color:#4b93ff;color:#fff}
.btn-outline-secondary{border-color:#567083;color:#b9c9d3}
.btn-outline-secondary:hover{background:#355064;border-color:#66869d;color:#fff}
.btn-outline-success{border-color:#25cf8d;color:#54e5ac}
.btn-outline-success:hover{background:#176849;color:#fff}
.btn-outline-danger{border-color:#be5264;color:#ff8b9a}
.btn-outline-danger:hover{background:#8f3040;border-color:#d55d71;color:#fff}
.btn-warning{background:#d8aa35;border-color:#e4b940;color:#171104}
.btn-danger{background:#c7475c;border-color:#d9586e}
.btn-info{background:#257da1;border-color:#3194bd;color:#fff}

/* =========================================================
   BADGE, STATUS, ALERT
   ========================================================= */
.badge{border-radius:999px;font-weight:750;letter-spacing:.01em}
.text-bg-primary,.bg-primary{background:#1e6fc6!important;color:#fff!important}
.text-bg-success,.bg-success{background:#176b4c!important;color:#d7ffee!important}
.text-bg-danger,.bg-danger{background:#8b3040!important;color:#ffe5ea!important}
.text-bg-warning,.bg-warning{background:#72571d!important;color:#ffedbb!important}
.text-bg-info,.bg-info{background:#185a73!important;color:#dff6ff!important}
.text-bg-secondary,.bg-secondary{background:#334b5c!important;color:#e0e9ee!important}
.badge-soft{background:#163b43;color:#75e7c5;border:1px solid #276a68}
.status-pill{display:inline-flex;align-items:center;border-radius:999px;padding:5px 9px;font-size:10px;font-weight:800;text-transform:capitalize;border:1px solid transparent}
.status-draft{background:#26394a;color:#d2dde4;border-color:#40596c}
.status-published,.status-approved,.status-active{background:#114936;color:#7aefbd;border-color:#23725a}
.status-closed,.status-rejected{background:#572a34;color:#ff9eab;border-color:#85404e}
.status-archived{background:#263646;color:#9eb0bd;border-color:#41566a}
.alert{border-radius:10px;border-width:1px;box-shadow:0 12px 30px rgba(0,0,0,.12)}
.alert-success{background:#0d3d2d;border-color:#217454;color:#bff5dd}
.alert-danger{background:#4e202a;border-color:#8f3c4c;color:#ffd5dc}
.alert-warning{background:#4c3b16;border-color:#806727;color:#ffebae}
.alert-info{background:#123d51;border-color:#256b89;color:#cceeff}

/* =========================================================
   NAV, TABS, PAGINATION, DROPDOWN, MODAL
   ========================================================= */
.nav-tabs{border-bottom-color:var(--humanis-line)}
.nav-tabs .nav-link{color:#9fb6c5;border-color:transparent;font-size:12px}
.nav-tabs .nav-link:hover{border-color:var(--humanis-line);color:#fff}
.nav-tabs .nav-link.active{color:#fff;background:#102c41;border-color:var(--humanis-line) var(--humanis-line) #102c41}
.nav-pills .nav-link{color:#b6c8d3}
.nav-pills .nav-link.active{background:#166c50;color:#fff}
.dropdown-menu{background:#0b1e2d;border-color:var(--humanis-line-strong);box-shadow:0 20px 45px rgba(0,0,0,.35)}
.dropdown-item{color:#d6e3ea}
.dropdown-item:hover,.dropdown-item:focus{background:#123046;color:#fff}
.modal-content,.offcanvas,.popover,.toast{background:var(--humanis-panel);border-color:var(--humanis-line);color:var(--humanis-text)}
.modal-header,.modal-footer{border-color:var(--humanis-line)}
.btn-close{filter:invert(1) grayscale(100%) brightness(180%)}
.list-group-item{background:var(--humanis-panel);border-color:var(--humanis-line);color:var(--humanis-text)}
.accordion{--bs-accordion-bg:var(--humanis-panel);--bs-accordion-color:var(--humanis-text);--bs-accordion-border-color:var(--humanis-line);--bs-accordion-btn-bg:var(--humanis-panel-2);--bs-accordion-btn-color:var(--humanis-text);--bs-accordion-active-bg:#113248;--bs-accordion-active-color:#fff}
.page-link{background:#0b1e2d;border-color:var(--humanis-line);color:#a8dfff}
.page-link:hover{background:#123149;color:#fff;border-color:var(--humanis-line-strong)}
.active>.page-link,.page-link.active{background:#18825f;border-color:#23b987}

/* =========================================================
   PROFILE + OTHER LEGACY CLASSES
   ========================================================= */
.profile-photo{width:160px;height:160px;object-fit:cover;border-radius:18px;border:3px solid var(--humanis-line-strong)}
.profile-placeholder{width:160px;height:160px;border-radius:18px;background:#102d42;display:grid;place-items:center;font-size:58px;border:1px solid var(--humanis-line-strong);color:var(--humanis-cyan)}
.finalization-badge{border:1px solid var(--humanis-line);border-radius:999px;background:#0d2b3d;padding:6px 10px;font-weight:700;font-size:11px;color:#bfe8f7}
.pwa-install-panel{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.pwa-phone-mockup{width:190px;height:330px;border-radius:30px;background:#02070c;padding:12px;box-shadow:0 24px 55px rgba(0,0,0,.35)}
.pwa-phone-top{width:62px;height:6px;border-radius:99px;background:#374f61;margin:0 auto 10px}
.pwa-phone-screen{height:288px;border-radius:24px;background:linear-gradient(160deg,#0d2638,#07131e);display:grid;place-items:center;text-align:center;padding:18px;border:1px solid var(--humanis-line)}
.pwa-phone-screen h4{font-weight:900;color:#fff;margin:8px 0 0}.pwa-phone-screen p{color:var(--humanis-muted);font-size:12px}
.mobile-badge{border:1px solid var(--humanis-line);background:#102638;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:700}

/* Login tetap mandiri tetapi mengikuti warna baru */
.login-page{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 20% 10%,#12364c 0,#071421 42%,#020b12 100%)}
.login-card{background:rgba(10,29,44,.96);color:var(--humanis-text);width:min(430px,92vw);padding:30px;border-radius:18px;box-shadow:0 35px 90px rgba(0,0,0,.42);border:1px solid var(--humanis-line-strong)}
.login-logo{margin:auto}.login-logo-img{width:92px;height:92px;object-fit:contain;border-radius:50%;background:#ffffff;padding:6px;box-shadow:0 8px 24px rgba(0,0,0,.28)}

/* Compactness untuk data-heavy screen */
.content .card.mb-4,.content .card.mb-3{margin-bottom:14px!important}
.content .row.g-4{--bs-gutter-x:14px;--bs-gutter-y:14px}
.content h1,.content h2,.content h3,.content h4,.content h5,.content h6{color:#f3f8fb}
code{color:#ff9dcf;background:#102332;padding:2px 5px;border-radius:4px}
pre{background:#06131e;border:1px solid var(--humanis-line);color:#dce8ef;border-radius:9px;padding:12px}

/* Responsive */
@media(max-width:1199.98px){
  .topbar{grid-template-columns:minmax(210px,auto) 1fr auto;padding:9px 14px;gap:14px}
  .topnav{padding:7px 14px}
  .topnav .container-fluid{display:block}
  .navbar-toggler{display:inline-flex}
  .navbar-collapse{margin-top:8px;padding-top:8px;border-top:1px solid var(--humanis-line)}
  .humanis-top-menu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
  .humanis-top-menu>.nav-item{display:block}
  .humanis-top-menu .nav-link{width:100%;min-height:40px;border:1px solid var(--humanis-line);border-radius:8px;padding:8px 10px;background:var(--humanis-panel)}
  .humanis-top-menu .nav-link.active{border-color:var(--humanis-green)}
  .topnav-dropdown{position:static!important;transform:none!important;width:100%;box-shadow:none;margin-top:4px}
  .topnav-tools{padding:8px 0 0}
  .menu-search-toggle{width:100%;justify-content:center}
  .menu-search-panel{left:14px;right:14px}
}
@media(max-width:767.98px){
  .topbar{grid-template-columns:1fr auto;grid-template-areas:"brand user" "heading heading";padding:9px 10px;gap:8px}
  .topbar-brand{grid-area:brand}.page-heading{grid-area:heading;padding-top:7px;border-top:1px solid rgba(53,98,126,.38)}.userbox{grid-area:user}
  .brand-copy small,.user-identity-copy,.topbar-logout span{display:none}
  .user-identity{padding:6px;border:0;background:transparent}.topbar-logout{padding:6px 8px}
  .topnav{padding:6px 10px}.content{padding:12px 10px 24px}
  .humanis-top-menu{grid-template-columns:1fr}
  .menu-search-panel{left:10px;right:10px}.menu-search-results{grid-template-columns:1fr}
  .card-body{padding:12px}.table>:not(caption)>*>*{padding:.55rem .55rem}
}

@media print{
  html,body{background:#fff!important;color:#111!important}
  .app-header{display:none!important}.content{padding:0!important}
  .card,.stat-card,.humanis-card,.metric-box{background:#fff!important;color:#111!important;border:1px solid #bbb!important;box-shadow:none!important}
  .table{--bs-table-color:#111;--bs-table-border-color:#bbb}
  .table thead th{background:#eee!important;color:#111!important}
}

/* =========================================================
   HOTFIX FULL-WIDTH 2026-08-05
   Menetralkan sisa aturan layout sidebar lama pada halaman data-heavy.
   ========================================================= */
body.humanis-dark-layout .app-shell,
body.humanis-dark-layout .main,
body.humanis-dark-layout .app-header,
body.humanis-dark-layout .topbar,
body.humanis-dark-layout .topnav,
body.humanis-dark-layout .content {
  width: 100% !important;
  max-width: none !important;
}
body.humanis-dark-layout .main {
  min-width: 0 !important;
  margin-left: 0 !important;
  flex: 1 1 auto !important;
}
body.humanis-dark-layout .content {
  min-width: 0 !important;
  
}

/* =========================================================
   HUMANIS - TAGLINE BOX PADA HEADER
   Menimpa visual page-heading tanpa mengubah PHP/controller
   ========================================================= */

.page-heading{
    position:relative;
    min-width:430px;
    padding-top:0 !important;
    border-top:0 !important;
    min-height:52px;
}

/* Sembunyikan tulisan lama secara visual */
.page-heading > *{
    visibility:hidden;
}

/* Box tagline */
.page-heading::after{
    content:"Menata SDM - Meningkatkan Kompetensi - Membangun Masa Depan";

    position:absolute;
    left:0;
    top:50%;
    transform:translateY(-50%);

    box-sizing:border-box;
    width:540px;
    min-height:48px;

    display:flex;
    align-items:center;

    padding:8px 14px;

    background:#0b2233;
    border:1px solid rgba(77,130,160,.55);
    border-radius:10px;

    color:#f4f7fa;
    font-size:16px;
    font-weight:600;
    line-height:1.4;

    white-space:normal;
}