/* ntech — panel.css: one theme for the four parts (Yönetim /admin, Teknik /teknik, Kargo /kargo, Müşteri Portalı /), after maritimedex's admin panel
   Base · Form elements · Buttons · Layout · Side menu · Sign-in · Boxes · Lists · Cells · Details · Home · Pop-up · Badge · Table · Empty state · Pages · Files · Searchable dropdown · Responsive
   Colours: text #1D2026, red (the logo's) #D0101E, grey text #5F6670, border #E5E7EB, ground #F5F6F8 */

/* ---------- Base ---------- */
*,*:before,*:after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{overscroll-behavior-y:none}
body{min-height:100vh;margin:0;background:#F5F6F8;font:14px/1.45 "IBM Plex Sans",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:#1D2026;word-wrap:break-word}
h1,h2,h3,h4,p,ul,ol,dl,dd{margin:0;padding:0;border:0}
h1,h2,h3,h4{font-weight:600;line-height:1.25}
ul{list-style:none}
a{color:#C20E1C;text-decoration:none}
img{max-width:100%;border:0;vertical-align:middle}
[hidden]{display:none !important}

/* ---------- Form elements ---------- */
input,select,textarea,button{margin:0;font:inherit;color:inherit}
button{cursor:pointer}
label{display:block;margin-bottom:6px;font-size:13.5px;font-weight:500;color:#383D45}
input[type=text],input[type=search],input[type=email],input[type=password],input[type=url],input[type=number],input[type=date],input[type=tel],select,textarea{display:block;width:100%;height:44px;padding:0 12px;border:1px solid #D6D9DE;border-radius:8px;background:#fff;font-size:15px;color:#1D2026;-webkit-appearance:none;-moz-appearance:none;appearance:none}
textarea{height:auto;min-height:110px;padding:10px 12px;line-height:1.5;resize:vertical}
/* a field's line as tall as the field (its height less the border): a click right of the text, high or low, puts the caret at its end */
input[type=text],input[type=search],input[type=email],input[type=password],input[type=url],input[type=number],input[type=tel]{line-height:42px}
select{padding-right:36px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23737A84' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 12px center;cursor:pointer}
input[type=search]::-webkit-search-decoration{-webkit-appearance:none}
input:focus,select:focus,textarea:focus{outline:0;border-color:#D0101E;box-shadow:0 0 0 3px rgba(208,16,30,.13)}
::placeholder{color:#8C929B}
input[readonly],textarea[readonly]{background-color:#F8F9FA;color:#383D45}
input:disabled,select:disabled,textarea:disabled{background-color:#F3F4F6;color:#737A84;cursor:not-allowed}
input[type=checkbox],input[type=radio]{width:18px;height:18px;margin:0 8px 0 0;border:1.5px solid #BCC1C8;border-radius:5px;background:#fff no-repeat center;vertical-align:-4px;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}
input[type=radio]{border-radius:50%}
input[type=checkbox]:checked{border-color:#D0101E;background-color:#D0101E;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5l2.5 2.5 4.5-5'/%3E%3C/svg%3E")}
input[type=radio]:checked{border-color:#D0101E;background:#D0101E;box-shadow:inset 0 0 0 3.5px #fff}
input[type=checkbox]:focus{box-shadow:0 0 0 3px rgba(208,16,30,.13)}
input[type=radio]:checked:focus{box-shadow:inset 0 0 0 3.5px #fff,0 0 0 3px rgba(208,16,30,.13)}
input[type=file]{display:block;width:100%;padding:9px 12px;border:1px dashed #C9CDD3;border-radius:8px;background:#FAFAFB;font-size:14px;color:#5F6670;cursor:pointer}
input[type=file]:focus{outline:0;border-color:#D0101E}
input[type=file]::file-selector-button{margin-right:12px;padding:6px 12px;border:1px solid #D6D9DE;border-radius:6px;background:#fff;font:inherit;font-weight:600;color:#383D45;cursor:pointer}
button:disabled{opacity:.55;cursor:not-allowed}
.check{display:inline-block;margin:0 16px 8px 0;font-size:14.5px;font-weight:400;color:#1D2026;cursor:pointer}
.field{margin-bottom:16px}
.field small{display:block;margin-top:6px;font-size:13px;color:#5F6670}
.field.err input,.field.err select,.field.err textarea{border-color:#D93025}
.field.err small{color:#D93025}
.alert{margin-bottom:16px;padding:12px 14px;border-radius:8px;font-size:14.5px}
.alert-success{background:#E7F6EE;color:#13804A}
.alert-error{background:#FDECEC;color:#C5221F}
.row{display:flex;flex-wrap:wrap;margin:0 -8px}
.row > .field{flex:1 1 220px;padding:0 8px}
.row > .field.s{flex:0 1 180px}
.ico{position:relative}
.ico > i{position:absolute;left:12px;top:12px;z-index:1;font-size:20px;color:#737A84;pointer-events:none}
.ico input,.ico select{padding-left:42px}
.unit{position:relative}
.unit input{padding-right:52px}
.unit span{position:absolute;right:12px;top:0;font-size:14px;line-height:44px;color:#737A84;pointer-events:none}
.pw{position:relative}
.pw input{padding-right:46px}
.pw button{position:absolute;right:4px;top:4px;display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:0;border-radius:6px;background:none;font-size:20px;color:#737A84}
.pw button i{display:block;line-height:1}
button.link{padding:0;border:0;background:none;font-weight:500;color:#C20E1C}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 16px;border:1px solid #D6D9DE;border-radius:8px;background:#fff;font-size:14.5px;font-weight:600;line-height:1;color:#383D45;white-space:nowrap;vertical-align:middle;cursor:pointer}
.btn + .btn{margin-left:4px}
.btn:hover{border-color:#B8BCC3}
.btn i{margin-right:8px;font-size:18px}
.btn i.end{margin:0 0 0 8px}
.btn.primary{border-color:#D0101E;background:#D0101E;color:#fff}
.btn.primary:hover{border-color:#A90C18;background:#A90C18}
.btn.dark{border-color:#1D2026;background:#1D2026;color:#fff}
.btn.dark:hover{border-color:#000;background:#000}
.btn.soft{border-color:#FDEEEF;background:#FDEEEF;color:#C20E1C}
.btn.soft:hover{border-color:#FADCDF;background:#FADCDF}
.btn.sm{height:36px;padding:0 12px;font-size:13.5px}
.btn.block{display:flex;width:100%}
.btn.icon{width:44px;padding:0}
.btn.icon i{margin:0}
.btns{display:flex;flex-wrap:wrap;justify-content:flex-end;margin-top:24px}
.btns .btn + .btn{margin-left:8px}
.btn.busy{position:relative}
.btn.busy:disabled{opacity:1;cursor:wait}
a.btn.busy{pointer-events:none}
.btn.busy:after{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-11px 0 0 -11px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
.btn.busy:not(.primary):not(.red):not(.dark):after{border-color:rgba(17,19,24,.15);border-top-color:#D0101E}
@keyframes spin{to{transform:rotate(360deg)}}
.btn.red{border-color:#D93025;background:#D93025;color:#fff}
.btn.red:hover{border-color:#B3261E;background:#B3261E}
.link.red,.del{color:#C5221F}

/* ---------- Layout: the logo's column and the title on the page, the menu fixed on the left ---------- */
.top{display:flex;align-items:center;height:73px;padding:0 30px 0 220px}
.top > .logo{position:fixed;top:0;left:0;z-index:50;display:flex;align-items:center;width:220px;height:73px;padding-left:16px;border-right:1px solid #E5E7EB;border-bottom:1px solid #E5E7EB;background:#fff}
.logo img{width:97px;height:36px}
.logo span{margin-left:10px;padding:3px 8px;border-radius:6px;background:#1D2026;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#fff;white-space:nowrap}
.menu-btn{display:none;position:relative;flex:none;width:44px;height:44px;border:0;background:none}
.menu-btn:before{content:"";position:absolute;left:12px;top:21px;width:20px;height:2px;border-radius:1px;background:#1D2026;box-shadow:0 -6px #1D2026,0 6px #1D2026}
.ttl{display:flex;flex:1;align-items:center;min-width:0;margin-left:30px}
.ttl h1{display:flex;align-items:center;min-width:0;font-size:22px}
.ttl h1 i{display:flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;margin-right:14px;border-radius:10px;background:#FDEEEF;font-size:20px;color:#D0101E}
.ttl h1 span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ttl .back{display:flex;align-items:center;margin-left:16px;font-size:14px;font-weight:500;color:#5F6670;white-space:nowrap}
.ttl .back i{margin-right:6px;font-size:16px}
.ttl .back:hover{color:#C20E1C}
.ttl > .btn{margin-left:auto}
.ttl > .btn + .btn{margin-left:8px}
.main{margin-left:220px;padding:4px 30px 40px}
.debt{margin:0 0 16px;padding:10px 14px;border-radius:10px;background:#FDECEC;font-size:14.5px;font-weight:500;color:#B3261E} /* the portal's debt line */

/* ---------- Side menu: the pages in groups, a count on a line's right (what waits), the user at the bottom ---------- */
.side{position:fixed;top:73px;bottom:0;left:0;z-index:40;display:flex;flex-direction:column;width:220px;padding:16px 8px 20px;overflow-y:auto;border-right:1px solid #E5E7EB;background:#fff}
.side nav a{display:flex;align-items:center;min-height:38px;padding:8px;border-radius:10px;font-size:14.5px;line-height:1.3;color:#383D45}
.side nav a:hover{background:#F3F4F6}
.side nav a i{flex:none;width:18px;margin-right:10px;font-size:18px;color:#737A84}
.side nav a.active{background:#FDEEEF;color:#C20E1C;font-weight:500}
.side nav a.active i{color:inherit}
.side nav a .num{flex:none;min-width:20px;height:20px;margin-left:auto;margin-right:-2px;padding:0 6px;border-radius:10px;background:#FADCDF;font-size:11px;font-weight:600;line-height:20px;text-align:center;color:#A90C18}
.side nav a .num.grey{background:#EEF0F2;color:#5F6670}
.side h2{padding:16px 8px 8px;font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:#5F6670}
.side .logo{display:none}
.uside{position:relative;margin:auto -8px -20px;padding:9px 8px;border-top:1px solid #E5E7EB}
.uside > button{display:flex;align-items:center;width:100%;height:46px;padding:0 8px;border:0;border-radius:10px;background:none;font-size:14.5px;font-weight:500;color:#1D2026;text-align:left}
.uside > button:hover,.uside.open > button{background:#F3F4F6}
.ini{display:inline-flex;align-items:center;justify-content:center;flex:none;width:30px;height:30px;margin-right:10px;border-radius:50%;background:#FADCDF;font-size:13px;font-weight:600;color:#A90C18}
.uside .ini{margin-left:-4px}
.uside .unm{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.uside > button > i{margin-left:8px;font-size:14px;color:#8C929B;transition:transform .15s}
.uside.open > button > i{transform:rotate(180deg)}
.umenu{position:absolute;left:8px;right:8px;bottom:100%;margin-bottom:6px;padding:6px;border:1px solid #E5E7EB;border-radius:10px;background:#fff;box-shadow:0 8px 24px rgba(17,19,24,.12)}
.umenu a{display:flex;align-items:center;height:38px;padding:0 10px;border-radius:8px;font-size:14.5px;color:#383D45}
.umenu a:hover{background:#F3F4F6}
.umenu a i{width:18px;margin-right:12px;font-size:17px;color:#737A84}

/* ---------- Sign-in: the logo, a small card in the middle, a line under it ---------- */
.signin{width:calc(100% - 32px);max-width:400px;margin:10vh auto 40px}
.signin > .logo{display:flex;flex-direction:column;align-items:center;margin-bottom:24px}
.signin > .logo img{width:129px;height:48px}
.signin > .logo span{margin:12px 0 0}
.signin .card{padding:32px;border:1px solid #E5E7EB;border-radius:14px;background:#fff}
.signin h1{margin-bottom:24px;font-size:20px;text-align:center}
.signin .card > p{margin:-14px 0 20px;font-size:14.5px;color:#5F6670;text-align:center}
.signin .btn{margin-top:8px}
.signin .card > p.alt{margin:16px 0 0;font-size:14px;text-align:center}
.signin .foot{margin-top:20px;font-size:13px;line-height:1.6;color:#737A84;text-align:center}
.signin .foot a{color:#5F6670}

/* ---------- The customers' sign-in pages, the page in two (the old portal's look; 12 Nov 2026): the dark photo with the white logo and
   Biz Kimiz on the left, the form on the right. A phone: the logo on the photo, the form, Biz Kimiz under it ---------- */
.split{display:flex;min-height:100vh}
.split .hero{display:flex;flex:0 0 50%;flex-direction:column;padding:56px 6% 48px;background:#232529 url(../img/login-bg.jpg) left center/cover no-repeat;color:#E2E4E8}
.split .brand{display:flex;align-items:center}
.split .brand img{display:block;width:161px;height:60px}
.split .brand span{margin-left:16px;padding-left:16px;border-left:1px solid rgba(255,255,255,.22);font-size:19px;line-height:22px;color:#fff}
.split .about{max-width:600px;margin:auto 0}
.split .about h2{margin-bottom:14px;font-size:30px;font-weight:600;color:#fff}
.split .about p{font-size:15px;line-height:1.7}
.split .about p + p{margin-top:24px}
.split .about a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);text-underline-offset:3px}
.split .pane{position:relative;display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;background:#E9ECEF}
.split .form{width:100%;max-width:420px}
.split h1{margin-bottom:20px;font-size:21px;font-weight:600}
.split .form > p{margin:-8px 0 20px;font-size:14.5px;color:#5F6670}
.split .form > p.alt{margin:16px 0 0;font-size:14px}
.split .form > p.alt a{color:#5F6670}
.split .form .btn.block{height:48px}
.split input[type=email],.split input[type=password],.split input[type=text]{height:50px;background:#fff}
.split .ico > i{top:15px}
.split .pw button{top:7px}
.split .go{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:4px}
.split .go a{font-size:14.5px;color:#5F6670}
.split .go a:hover{color:#1D2026}
.split .go .btn{min-width:150px;height:48px}
.split .links{position:absolute;right:0;bottom:24px;left:0;margin:0;font-size:13px;color:#737A84;text-align:center} /* KVKK, Çerez politikası: at the bottom of the right half, centred (the user) */
.split .links a{color:#5F6670}
@media (max-width:900px){
  .split{flex-direction:column}
  .split .hero{display:contents}
  .split .brand{justify-content:center;padding:40px 16px;background:#232529 url(../img/login-bg.jpg) center/cover no-repeat}
  .split .pane{flex:none;justify-content:flex-start;padding:32px 16px 24px}
  .split .links{position:static;margin-top:32px}
  .split .about{order:2;max-width:none;margin:0;padding:32px 16px 40px;background:#232529;color:#E2E4E8}
  .split .about h2{font-size:22px}
  .split .about p{font-size:14px}
}
@media (max-width:420px){.split .go{flex-direction:column-reverse;align-items:stretch}.split .go a{text-align:center}}

/* ---------- Boxes ---------- */
.box{margin-bottom:20px;padding:24px;border:1px solid #E5E7EB;border-radius:12px;background:#fff}
.box > h2{display:flex;align-items:center;margin:-24px -24px 20px;padding:16px 24px;border-bottom:1px solid #EEF0F2;font-size:17px}
.box > h2 > i{flex:none;width:34px;height:34px;margin-right:12px;border-radius:9px;background:#FDEEEF;font-size:18px;line-height:34px;text-align:center;color:#D0101E}
.box > h2 small{margin-left:auto;padding-left:12px;font-size:13.5px;font-weight:400;color:#5F6670;white-space:nowrap}
.box > h2 .btn{margin-left:auto}
.box.flush{padding:0;overflow-x:auto}
.box.flush > h2{margin:0}
.box.narrow{max-width:760px}
.box > p,.hint{margin-bottom:16px;font-size:14.5px;color:#5F6670}
.note{display:flex;margin-bottom:16px;padding:12px 14px;border-radius:10px;background:#F3F4F6;font-size:14px;color:#383D45}
.note > i{flex:none;margin:1px 10px 0 0;font-size:18px;color:#5F6670}
.note.warn{border:1px solid #F6D9A8;background:#FFF8EC}
.note.warn > i{color:#B45309}
.note.bad{border:1px solid #F5C2C0;background:#FDF1F0}
.note.bad > i{color:#C5221F}
.note b{color:#1D2026}
.note p{margin-top:4px;color:#5F6670}
.note.warn p.txt{color:#383D45} /* the customer's note on a reading */
.note > div{flex:1;min-width:0}
.tabs{display:flex;margin:0;padding:0 16px;border-bottom:1px solid #EEF0F2;overflow-x:auto}
.tabs a{display:flex;flex:none;align-items:center;height:62px;margin:0 8px;padding-top:1px;border-bottom:2px solid transparent;font-size:14.5px;font-weight:500;color:#5F6670;white-space:nowrap}
.tabs a i{margin-right:8px;font-size:18px;color:#8C929B}
.tabs a.on i{color:inherit}
.tabs a small{margin-left:6px;padding:0 7px;border-radius:10px;background:#F1F2F4;font-size:12px;line-height:19px;color:#5F6670}
.tabs a.on{border-color:#D0101E;color:#C20E1C}
.tabs a.on small{background:#FADCDF;color:#A90C18}
.find{display:flex;align-items:center;padding:14px 16px;border-bottom:1px solid #EEF0F2}
.ttl > .find{flex:none;margin-left:auto;padding:0 0 0 24px;border:0}
.ttl > .find .ico{flex:none;width:280px;max-width:none}
.ttl > .find input[type=search]{height:44px;font-size:14px;background:#fff} /* as high as the button beside it (the user, 13 Nov 2026) */
.ttl > .find .ico > i{top:13px;font-size:18px}
.ttl > .find .all{margin:0 16px 0 0}
.ttl > .find small{margin:0 16px 0 0;padding:0}
.ttl > .find .clr{margin-left:8px}
.ttl > .find + .btn{margin-left:16px}
.find .ico{flex:1;max-width:420px}
.find .btn{margin-left:8px}
.find small{margin-left:auto;padding-left:12px;font-size:13.5px;color:#5F6670;white-space:nowrap}
.find .all{margin:0 0 0 16px;font-size:14px;font-weight:500;white-space:nowrap}
.find select{flex:0 1 220px;width:auto;margin-left:8px}
.find .clr{display:inline-flex;align-items:center;margin-left:12px;font-size:14px;font-weight:500;color:#5F6670;white-space:nowrap}
.find .clr:hover{color:#C20E1C}
.find .clr i{margin-right:4px;font-size:16px}
.foot2{display:flex;align-items:center;margin:24px -24px -24px;padding:16px 24px;border-top:1px solid #EEF0F2}
.foot2 .btn.primary{margin-left:auto}
.foot2 .hint{margin:0 16px 0 0;font-size:13.5px}
.box.flush > .foot2{margin:0;padding:16px 24px}
.del{display:inline-flex;align-items:center;padding:0;border:0;background:none;font:inherit;font-size:14px;font-weight:500;cursor:pointer}
.del i{margin-right:8px}
.cols{display:flex;align-items:flex-start}
.cols > :first-child{flex:1;min-width:0}
.cols > aside{position:-webkit-sticky;position:sticky;top:20px;flex:none;width:340px;margin-left:20px}
.half{display:flex;margin:0 -10px}
.half > *{flex:1;min-width:0;margin-left:10px;margin-right:10px}
h3.fh{display:flex;align-items:baseline;margin:28px 0 14px;padding-top:24px;border-top:1px solid #EEF0F2;font-size:16px}
h3.fh:first-child{margin-top:0;padding-top:0;border-top:0}
.fh small{margin-left:auto;padding-left:12px;font-size:13px;font-weight:400;color:#5F6670}

/* ---------- A choice of two (the portal's Formu doldur / Excel yükle) ---------- */
.seg{display:flex;margin:0 0 20px;padding:4px;border-radius:10px;background:#F1F2F4}
.seg a{display:flex;flex:1;align-items:center;justify-content:center;height:40px;border-radius:8px;font-size:14.5px;font-weight:500;color:#5F6670}
.seg a i{margin-right:8px;font-size:17px}
.seg a.on{background:#fff;color:#1D2026;box-shadow:0 1px 3px rgba(17,19,24,.12)}

/* ---------- Text (KVKK, Çerez politikası) ---------- */
.prose p{margin-bottom:12px;font-size:14.5px;line-height:1.65;color:#383D45}
.prose ul,.prose ol{margin:0 0 12px 22px;list-style:disc}
.prose ol{list-style:decimal}
.prose li{margin-bottom:6px;font-size:14.5px;line-height:1.6;color:#383D45}
.prose strong{color:#1D2026}

/* ---------- Cells (lists): a building or a person, its name and a line under it ---------- */
.cell{display:flex;align-items:center;min-width:0;color:#1D2026}
.cell > div{min-width:0}
.cell b{display:block;font-weight:600;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.cell small{display:block;margin-top:2px;font-size:13px;color:#5F6670;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
a.cell:hover b{color:#C20E1C}
.cell .ini{width:36px;height:36px;margin-right:12px;font-size:14px}
.num{font-variant-numeric:tabular-nums}

/* ---------- Details: label · value rows ---------- */
.head{display:flex;align-items:center;margin-bottom:20px}
.head h2{font-size:22px}
.head p{margin-top:6px;font-size:14.5px;color:#5F6670}
.head p .badge{margin-right:8px}
.kv > div{display:flex;padding:12px 0;border-top:1px solid #EEF0F2;font-size:14.5px}
.kv > div:first-child{border-top:0;padding-top:0}
.box > .kv:last-child > div:last-child{padding-bottom:0}
.kv dt{flex:none;width:170px;padding-right:16px;color:#5F6670}
.kv dd{flex:1;min-width:0;overflow-wrap:anywhere}
.kv.genis dt{width:230px} /* longer labels on one line (Doğal Gaz Tüketim Hacim m³; okuma talebi) */
.kv dd small{display:block;margin-top:2px;font-size:13px;color:#5F6670}
.kv dd small.yan{display:inline;margin:0 0 0 6px} /* beside the value, not under it (Kalan süre · Son gün) */
.kv .txt{line-height:1.6}
.side-box .kv dt{width:110px}
.kv.stat dt{flex:1;width:auto}
.kv.stat dd{flex:none;font-weight:600;text-align:right}
.side-box{margin-bottom:20px}
.side-box .btn{margin-top:8px}
.side-box .btn + .btn{margin-left:0}
.side-box p{margin-bottom:16px}
.side-box p + .btn{margin-top:0}
.side-box .kv + .btn,.side-box .kv + form{margin-top:16px;display:block}
.side-box .del{margin-top:16px}
.adel{margin:-4px 0 20px 4px}
.kv a.degis{margin-left:4px;font-size:14px;font-weight:500} /* "(değiştir)" beside a value */
.side-box > .hint:last-child{margin-bottom:0}
.ok{color:#13804A}
.late{font-weight:600;color:#C5221F}
.soon{font-weight:600;color:#B45309}
.nw{white-space:nowrap}
.files + form{margin-top:16px;padding-top:16px;border-top:1px solid #EEF0F2}
.files .btn + form{margin-left:0}
.chips span{display:inline-block;margin:0 6px 6px 0;padding:3px 10px;border-radius:999px;background:#F1F2F4;font-size:13px;color:#383D45}
output.calc{display:block;height:44px;font-size:15px;font-weight:600;line-height:44px}
.copy{display:flex;align-items:center}
.days span{display:inline-flex;align-items:center;font-variant-numeric:tabular-nums}
.days form{display:inline}
.days button{display:flex;margin:0 -4px 0 6px;padding:2px;border:0;border-radius:50%;background:none;font-size:12px;color:#8C929B}
.days button:hover{background:#E5E7EB;color:#C5221F}
.copy input{flex:1;min-width:0}
.copy .btn,.copy span{flex:none;margin-left:8px}
.sum{display:flex;flex-wrap:wrap;margin:0 -8px 20px}
.sum > div{flex:1 1 180px;margin:0 8px 16px;padding:16px 18px;border:1px solid #E5E7EB;border-radius:12px;background:#fff}
.sum b{display:block;font-size:24px;font-weight:600;line-height:1.2}
.sum small{display:block;margin-top:4px;font-size:13.5px;color:#5F6670}

/* ---------- Permissions (Yetkilendirme): a section's tick, its parts under it ---------- */
.perm{padding:14px 0;border-top:1px solid #EEF0F2}
.perm:first-of-type{padding-top:0;border-top:0}
.perm .ana{margin:0;font-weight:600} /* (not .main: the page's own box is .main) */
.perm .subs{display:flex;flex-wrap:wrap;margin-top:12px} /* the parts under their section, on its line (the user, 12 Nov 2026) */
.perm .subs .check{flex:0 0 calc(50% - 16px);margin-bottom:8px;font-size:14px}

/* ---------- A bar a day (Teknik personel's report): the tallest is the most ---------- */
.bars{display:flex;align-items:flex-end;height:120px;margin:4px 24px 20px;padding-top:8px;border-bottom:1px solid #E5E7EB}
.bars span{flex:1;min-width:2px;max-width:40px;margin:0 1px;border-radius:3px 3px 0 0;background:#E9878E}
.bars span:hover{background:#D0101E}

/* ---------- Home: what waits, one line each ---------- */
.todo a{display:flex;align-items:center;padding:16px 20px;border-top:1px solid #EEF0F2;color:#1D2026}
.todo a:first-child{border-top:0}
.todo a:hover{background:#FAFAFB}
.todo a > i{display:flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;margin-right:16px;border-radius:10px;background:#FDEEEF;font-size:20px;color:#D0101E}
.todo a.warn > i{background:#FFF4E5;color:#B45309}
.todo a.grey > i{background:#F1F2F4;color:#5F6670}
.todo div{flex:1;min-width:0}
.todo b{display:block;font-size:15.5px;font-weight:600}
.todo small{display:block;margin-top:2px;font-size:13.5px;color:#5F6670}
.todo a > span{flex:none;margin-left:12px;font-size:20px;color:#8C929B}

/* ---------- Pop-up (dialog.dlg, panel.js [data-open], [data-close]) ---------- */
.dlg{width:calc(100% - 32px);max-width:520px;margin:auto;padding:28px;border:0;border-radius:14px;box-shadow:0 20px 60px rgba(17,19,24,.25)}
.dlg.wide{max-width:760px}
.dlg[open]{overflow:visible}
.dlg::backdrop{background:rgba(17,19,24,.45)}
.dlg h3{display:flex;align-items:center;margin-bottom:16px;font-size:19px}
.dlg h3 span{display:flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;margin-right:14px;border-radius:50%;background:#FDEEEF;font-size:22px;color:#D0101E}
.dlg.red h3 span{background:#FDECEC;color:#C5221F}
.dlg p{margin-bottom:14px;font-size:14.5px;color:#5F6670}
.dlg p b{color:#1D2026}
.dlg textarea{min-height:120px}
.dlg .btns{display:flex;justify-content:flex-end;margin-top:20px}
.dlg .btns .btn + .btn{margin-left:8px}
.dlg .kv{margin-bottom:4px}
/* ---------- A customer's page (/admin/musteriler/{id}; the user's design, 12 Nov 2026): the name and the facts at a glance on top, the rest
   in two columns, read only, the note; the form in a wide pop-up (.dlg.form: the building on the left, the contract on the right) ---------- */
.mhead{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.mhead h2{margin-right:auto;font-size:22px}
.facts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:20px -24px -24px;border-top:1px solid #EEF0F2}
.facts > div{min-width:0;padding:14px 24px;border-left:1px solid #EEF0F2}
.facts > div:first-child{border-left:0}
.facts dt{margin-bottom:4px;font-size:12px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:#8C929B}
.facts dt a{margin-left:2px;letter-spacing:0;text-transform:none;color:#1D2026}
.facts dd{font-size:14.5px;font-weight:500;overflow-wrap:anywhere}
.facts dd a{color:#1D2026}
.facts.f4{grid-template-columns:repeat(4,minmax(0,1fr))}
.box.flush > .facts{margin:0;border-top:0} /* the strip alone in its box (yönetici's page) */
.pw.yalin{display:flex;align-items:center} /* a password to read, not to type: text with its eye (yönetici's page) */
.pw.yalin input{flex:1;min-width:0;width:auto;height:auto;padding:0;border:0;border-radius:0;background:none;box-shadow:none;font:inherit;color:inherit;outline:0}
.pw.yalin button{position:static;flex:none;width:26px;height:22px;margin-left:6px;font-size:18px}
.kv2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 48px}
.kv2 > .kv > div:first-child{border-top:0;padding-top:0}
.notebox{margin-top:20px;padding:14px 16px;border:1px solid #F6D9A8;border-radius:10px;background:#FFF8EC;font-size:14.5px;line-height:1.6;color:#383D45}
.lnks{margin-left:12px;font-size:13.5px;color:#737A84;white-space:nowrap}
.lnks a,.lnks button{padding:0;border:0;background:none;font:inherit;color:#5F6670;cursor:pointer}
.lnks a:hover,.lnks button:hover{color:#1D2026}
.lnks form{display:inline}
.dlg.form{max-width:980px;max-height:calc(100vh - 32px);overflow:auto}
.dlg.form[open]{overflow:auto}
.pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start}
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 16px}
.grid2 .full{grid-column:1 / -1}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 16px;margin-bottom:-16px} /* the add-building page: four equal columns, all in line (its last fields' space is the box's own) */
.box.not .field{margin-bottom:0}
.grid4 .w2{grid-column:span 2}
.grid4 .check{display:inline-flex;align-items:center;height:44px;margin-bottom:0;vertical-align:top} /* radios on an input's line: in its middle */
.formbar{display:flex;justify-content:flex-end} /* a page's save button under its boxes */
.dlg .btns{align-items:center}
.dlg .btns .durum{display:flex;flex-wrap:wrap;align-items:center;margin-right:auto}
.dlg .btns .durum > span{margin-right:16px;font-weight:500}
.dlg .btns .durum .check{margin-bottom:0}
@media (max-width:1023px){
  .facts{display:block}
  .facts > div{display:flex;padding:10px 24px;border-top:1px solid #EEF0F2;border-left:0}
  .facts > div:first-child{border-top:0}
  .facts dt{flex:none;width:150px;margin:2px 0 0}
  .facts dd{flex:1;min-width:0}
  .kv2{grid-template-columns:minmax(0,1fr)}
  .kv2 > .kv + .kv{margin-top:12px;padding-top:12px;border-top:1px solid #EEF0F2}
  .pair{grid-template-columns:minmax(0,1fr);gap:0}
  .grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){.dlg .btns{flex-wrap:wrap}.dlg .btns .durum{flex:0 0 100%;margin-bottom:12px}}
.dlg.ask{max-width:460px} /* a button's question (panel.js [data-confirm]) */
.dlg.ask h3{margin-bottom:6px;line-height:1.35}
.dlg.ask p{margin:0 0 4px 58px}
/* Excel'e aktar (a list's tabs with a button at their right end: .tabbar; the pop-up's groups of details in three columns: .gruplar) */
.tabbar{display:flex;align-items:center;border-bottom:1px solid #EEF0F2}
.tabbar .tabs{flex:1;min-width:0;border-bottom:0}
.tabbar .aktar{flex:none;margin:0 24px 0 12px}
.tabbar .aktar i{font-size:16px}
.gruplar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px;margin-top:6px}
.gruplar fieldset{min-width:0;margin:0 0 18px;padding:0;border:0}
.gruplar legend{display:flex;align-items:baseline;justify-content:space-between;width:100%;margin-bottom:12px;padding:0 0 8px;border-bottom:1px solid #EEF0F2;font-size:12px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:#8C929B}
.gruplar legend span{font-size:12.5px;letter-spacing:0;text-transform:none;color:#B4B9C0}
.gruplar legend button{padding:0;border:0;background:none;font:inherit;color:#5F6670;cursor:pointer}
.gruplar legend button:hover{color:#1D2026}
.gruplar .check{display:block;margin:0 0 10px;font-size:14px}
/* the Excel'e Aktar page: the filters in two columns (.fgrid; .full across), pills (.secim: radios or checkboxes), from–to (.aralik); the summary
   on the right (.ozet: the count, the chips, the button), on a phone a bar at the bottom */
.fgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px 28px}
.fgrid .full{grid-column:1 / -1}
.fgrid .field{margin-bottom:14px}
.secim{display:flex;flex-wrap:wrap;gap:6px}
.secim label{position:relative;margin:0;font-weight:400;cursor:pointer}
.secim input{position:absolute;top:0;left:0;width:1px;height:1px;margin:0;opacity:0}
.secim span{display:block;padding:0 14px;border:1px solid #D6D9DE;border-radius:999px;background:#fff;font-size:14px;line-height:36px;color:#383D45;white-space:nowrap}
.secim label:hover span{border-color:#B4B9C0}
.secim input:checked + span{border-color:#D0101E;background:#FDEEEF;font-weight:600;color:#C20E1C}
.secim input:focus-visible + span{box-shadow:0 0 0 3px rgba(208,16,30,.13)}
.aralik{display:flex;align-items:center}
.aralik input{flex:1;min-width:0}
.aralik span{flex:none;margin:0 8px;color:#8C929B}
.ozet .sayi b{display:block;font-size:34px;font-weight:600;line-height:1.1;letter-spacing:-.01em;color:#1D2026;font-variant-numeric:tabular-nums}
.ozet .sayi span{font-size:14px;color:#5F6670}
.ozet .etiket{margin-top:16px}
.ozet .etiket:empty{display:none}
.etiket span{display:inline-flex;align-items:center;max-width:100%;padding:3px 4px 3px 10px;background:#FDEEEF;color:#A90C18}
.etiket span b{overflow:hidden;font-weight:500;white-space:nowrap;text-overflow:ellipsis}
.etiket button{display:flex;flex:none;margin-left:4px;padding:3px;border:0;border-radius:50%;background:none;font-size:12px;color:#C20E1C;cursor:pointer}
.etiket button:hover{background:#FADCDF}
.ozet .kendi{margin:14px 0 0}
.ozet .hata{margin:14px 0 0;font-size:14px;font-weight:500;color:#C5221F}
.ozet .btn,.ozet .hata + .btn{margin-top:18px}
.ozet .temizle{display:block;margin:12px auto 0;padding:0;border:0;background:none;font-size:13.5px;color:#5F6670;cursor:pointer}
.ozet .temizle:hover{color:#1D2026}
@media (max-width:1023px){
  .aktarim-sayfa{padding-bottom:84px}
  .aktarim-sayfa .ozet{position:fixed;right:0;bottom:0;left:0;z-index:40;display:flex;flex-wrap:wrap;align-items:center;margin:0;padding:12px 16px;border:0;border-top:1px solid #E5E7EB;border-radius:0;box-shadow:0 -8px 24px rgba(17,19,24,.08)}
  .aktarim-sayfa .ozet .sayi{flex:1;min-width:0}
  .aktarim-sayfa .ozet .sayi b{display:inline;font-size:22px}
  .aktarim-sayfa .ozet .sayi span{margin-left:6px;font-size:13px}
  .aktarim-sayfa .ozet .btn{width:auto;margin:0}
  .aktarim-sayfa .ozet .etiket,.aktarim-sayfa .ozet .kendi,.aktarim-sayfa .ozet .temizle{display:none}
  .aktarim-sayfa .ozet .hata{flex:0 0 100%;order:3;margin:8px 0 0}
}
@media (max-width:767px){.fgrid{grid-template-columns:minmax(0,1fr)}.aktarim-sayfa .box > h2 small{display:none}}
.tabbar.dar{display:block} /* the tabs don't fit beside the button (panel.js): the button under them */
.tabbar.dar .tabs{border-bottom:1px solid #EEF0F2}
.tabbar.dar .aktar{margin:14px 24px 4px}
@media (max-width:767px){
  .tabbar{display:block}
  .tabbar .tabs{border-bottom:1px solid #EEF0F2}
  .tabbar .aktar,.tabbar.dar .aktar{margin:14px 16px 2px}
  .gruplar{grid-template-columns:minmax(0,1fr)}
}

/* ---------- Badge ---------- */
.badge{display:inline-block;padding:3px 10px;border-radius:999px;background:#F1F2F4;font-size:12.5px;font-weight:600;line-height:18px;color:#383D45;white-space:nowrap}
.badge:before{content:"";display:inline-block;width:6px;height:6px;margin:0 6px 1px 0;border-radius:50%;background:currentColor}
.badge.green{background:#E7F6EE;color:#13804A}
.badge.orange{background:#FFF4E5;color:#B45309}
.badge.red{background:#FDECEC;color:#C5221F}
.badge.blue{background:#EAF2FD;color:#1F63C0}

/* ---------- Table (panel.js copies the header into data-label for phones) ---------- */
.table{width:100%;border-collapse:collapse;font-size:13.5px} /* 14.5 → 13.5: the user is trying it (12 Nov 2026) */
.table th{padding:12px 16px;border-bottom:1px solid #E5E7EB;text-align:left;font-size:12px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:#8C929B;white-space:nowrap}
.table td{padding:12px 16px;border-bottom:1px solid #EEF0F2;vertical-align:middle}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr:hover{background:#FAFAFB}
.table td small{display:block;margin-top:2px;font-size:13px;color:#5F6670}
.table .end{text-align:right;white-space:nowrap}
.table .nw{white-space:nowrap}
.table .min,.table .end{width:1%;white-space:nowrap}
.table td.wrap .cell b{white-space:normal;overflow:visible}
.table td.wrap{min-width:180px}
.table .mid{min-width:120px}
.table td.soft,.table td.soft .cell{color:#8C929B} /* the same grey as the headers */
.table .btn{height:34px;padding:0 12px;font-size:13.5px}
.table .btn i{font-size:16px}
.table .btn.icon{width:34px;padding:0}
.table form{display:inline}
.table tfoot td{border-top:1px solid #E5E7EB;border-bottom:0;font-weight:600}
.box.flush .table th:first-child,.box.flush .table td:first-child{padding-left:24px}
.box.flush .table th:last-child,.box.flush .table td:last-child{padding-right:24px}

/* ---------- Empty state ---------- */
.empty{padding:48px 20px;text-align:center}
.box .empty{padding:20px 0}
.box.flush .empty{padding:40px 20px}
.empty h3{font-size:19px}
.empty h3 + p{margin-top:6px}
.empty > i{display:block;width:64px;height:64px;margin:0 auto 16px;border-radius:50%;background:#FDEEEF;font-size:28px;line-height:64px;color:#D0101E}
.empty p{margin:0;font-size:15px;color:#5F6670}
.empty.ok > i{background:#E7F6EE;color:#13804A}
.empty .btn{margin-top:20px}

/* ---------- Pages ---------- */
.pages{padding:20px;border-top:1px solid #EEF0F2;text-align:center}
.pages a{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;margin:2px;padding:0 6px;border:1px solid #E5E7EB;border-radius:19px;background:#fff;font-size:14px;color:#383D45;vertical-align:middle}
.pages a[aria-current]{border-color:#D0101E;background:#D0101E;color:#fff}

/* ---------- Files: a document's line (its type, name, Göster / Sil) ---------- */
.files li{display:flex;align-items:center;min-height:52px;padding:8px 0;border-top:1px solid #EEF0F2}
.files li:first-child{border-top:0}
.files li > i{display:flex;align-items:center;justify-content:center;flex:none;width:36px;height:36px;margin-right:12px;border-radius:9px;background:#F1F2F4;font-size:18px;color:#5F6670}
.files li > div{flex:1;min-width:0}
.files b{display:block;font-weight:500}
.files small{display:block;font-size:13px;color:#5F6670}
.files .btn{flex:none;margin-left:8px}
.files form{display:inline}

/* ---------- Searchable dropdown (select[data-placeholder], panel.js) ---------- */
.dd{position:relative}
.dd > button{display:block;position:relative;width:100%;height:44px;padding:0 36px 0 12px;border:1px solid #D6D9DE;border-radius:8px;background:#fff;text-align:left;font-size:15px;color:#1D2026}
.dd > button:focus,.dd.open > button{outline:0;border-color:#D0101E;box-shadow:0 0 0 3px rgba(208,16,30,.13)}
.dd > button span{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.dd > button small{display:none}
.dd > button:after{content:"\e908";position:absolute;right:12px;top:50%;margin-top:-8px;font:16px/1 "ntech-icons";color:#737A84}
.dd.open > button:after{transform:rotate(180deg)}
.dd > div{display:none;position:absolute;top:100%;left:0;z-index:20;width:100%;min-width:260px;margin-top:6px;padding:8px;border:1px solid #E5E7EB;border-radius:12px;background:#fff;box-shadow:0 18px 40px rgba(17,19,24,.18);color:#1D2026}
.dd.open > div{display:block}
.dd > div:before{content:"\e91b";position:absolute;left:20px;top:21px;font:17px/1 "ntech-icons";color:#737A84}
.dd > div input[type=text]{height:42px;line-height:40px;padding-left:38px;background:#F8F9FA;font-size:14.5px}
.dd ul{position:relative;max-height:296px;margin-top:6px;overflow-y:auto}
.dd ul:empty:after{content:"Sonuç yok";display:block;padding:12px;font-size:14px;color:#5F6670}
.dd li{position:relative;padding:10px 36px 10px 12px;border-radius:6px;font-size:14.5px;line-height:20px;cursor:pointer}
.dd li.on{background:#F3F4F6}
.dd li.sel{font-weight:600;color:#C20E1C}
.dd li.sel:after{content:"\e906";position:absolute;right:12px;top:12px;font:16px/1 "ntech-icons"}
.dd mark{background:#FFF1B8;color:inherit}
.dd > button.bos span{color:#8C929B} /* a list of many with none chosen: "Tümü" */
.dd.multi li{padding-left:40px}
.dd.multi li:before{content:"";position:absolute;left:12px;top:11px;width:18px;height:18px;border:1.5px solid #BCC1C8;border-radius:5px;background:#fff no-repeat center;box-sizing:border-box}
.dd.multi li.sel{font-weight:500;color:#1D2026}
.dd.multi li.sel:before{border-color:#D0101E;background-color:#D0101E;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5l2.5 2.5 4.5-5'/%3E%3C/svg%3E")}
.dd.multi li.sel:after{display:none}
.box.over,.box.flush.over{overflow:visible} /* a dropdown in it opens past its edge */

/* ---------- Responsive ---------- */
@media (max-width:1400px){
  .table th.min{white-space:normal} /* a long header (TALEP TARİHİ) takes two lines rather than widen its narrow column */
}
@media (max-width:1180px){
  .table th,.table td{padding-left:8px;padding-right:8px}
  .box.flush .table th:first-child,.box.flush .table td:first-child{padding-left:16px}
  .box.flush .table th:last-child,.box.flush .table td:last-child{padding-right:16px}
  .table td.wrap{min-width:140px}
  .table .mid{min-width:100px}
  .cols{display:block}
  .cols > aside{position:static;width:auto;margin:0}
}
@media (max-width:1023px){
  .top{position:-webkit-sticky;position:sticky;top:0;z-index:30;height:64px;padding:0 16px 0 8px;border-bottom:1px solid #E5E7EB;background:#fff}
  .menu-btn{display:block}
  .top > .logo{display:none}
  .ttl{margin-left:8px}
  .ttl h1{font-size:18px}
  .ttl h1 i{display:none}
  .side{top:0;z-index:100;transform:translateX(-100%);transition:transform .2s}
  .side .logo{display:flex;align-items:center;flex:none;margin:-16px -8px 8px;padding:0 16px;height:64px;border-bottom:1px solid #E5E7EB}
  .menu-open{overflow:hidden}
  .menu-open .side{transform:none;box-shadow:0 0 40px rgba(17,19,24,.25)}
  .menu-open:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:90;background:rgba(17,19,24,.45)}
  .main{margin-left:0;padding:16px}
  /* tables as cards: each cell's label from the header (panel.js) */
  .table thead{display:none}
  .table tr{display:flex;flex-direction:column;padding:10px 16px;border-bottom:1px solid #EEF0F2}
  .table tbody tr:last-child{border-bottom:0}
  .table td{display:grid;grid-template-columns:auto 1fr;align-items:center;justify-items:end;padding:5px 0;border:0;text-align:right}
  .table td:before{content:attr(data-label);margin-right:16px;font-size:12px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:#8C929B;text-align:left;white-space:nowrap}
  .table .min,.table .end,.table td.wrap,.table .mid{width:auto;min-width:0}
  .table td.first{order:-1;display:block;justify-items:start;padding-bottom:8px;text-align:left}
  .table td.first:before,.table td:empty{display:none}
  .table td small{grid-column:2}
  .table tfoot td{border-top:0}
  .box.flush .table th:first-child,.box.flush .table td:first-child,.box.flush .table th:last-child,.box.flush .table td:last-child{padding-left:0;padding-right:0}
  .box.flush .table tr{padding-left:24px;padding-right:24px}
}
@media (max-width:767px){
  .ttl .back span,.ttl > .btn span{display:none}
  .perm .subs .check{flex-basis:100%}
  .ttl > .btn i{margin:0}
  .ttl > .btn{width:44px;padding:0}
  .box{padding:20px 16px}
  .box > h2{margin:-20px -16px 16px;padding:14px 16px}
  .box.flush > .facts > div{padding-left:16px;padding-right:16px}
  .grid4{grid-template-columns:minmax(0,1fr)}
  .grid4 .w2{grid-column:auto}
  .formbar .btn{flex:1}
  .foot2{flex-wrap:wrap;margin:20px -16px -20px;padding:14px 16px}
  .foot2 .hint{margin:0 0 12px}
  .box.flush .table tr{padding-left:16px;padding-right:16px}
  .find{flex-wrap:wrap}
  .top{flex-wrap:wrap;align-items:flex-start;height:auto;min-height:64px}
  .top > .menu-btn{margin-top:10px}
  .ttl{flex-wrap:wrap}
  .ttl h1{min-height:64px}
  .ttl > .find{order:2;flex:0 0 calc(100% + 44px);flex-wrap:nowrap;min-width:0;margin:0 0 12px -44px;padding:0 0 0 8px}
  .ttl > .find + .btn{order:1;margin-left:auto}
  .ttl > .find .ico{flex:1 1 auto;width:auto;min-width:0}
  .ttl > .find .all{margin:0 12px 0 0}
  .find .ico{flex-basis:calc(100% - 70px);max-width:none}
  .find small{width:100%;margin:8px 0 0;padding:0}
  .find .all{margin:10px 16px 0 0}
  .find select{flex:1 1 100%;margin:8px 0 0}
  .kv > div{display:block}
  .kv dt,.kv.genis dt{width:auto;margin-bottom:2px;font-size:13px}
  .head{display:block}
  .half{display:block;margin:0}
  .half > *{margin-left:0;margin-right:0}
  .todo a{padding:14px 16px}
  .note{flex-wrap:wrap}
  .dlg{padding:22px 18px}
  input[type=text],input[type=search],input[type=email],input[type=password],input[type=number],input[type=date],input[type=tel],select,textarea{font-size:16px} /* iPhone zooms into a smaller field */
}

/* A busy button (panel.js) shows only its spinner. Last in the file, so it wins over every button's own colour */
.btn.busy,.btn.busy:hover{color:transparent}