/* maritimedex — style.css
   Base · Form elements · Buttons · Dropdown · Layout · Page top · Company list · Home page · Company profile · Company map · Ports · Sign-in pages · Account pages · Add company · Empty state · Pages · Tooltip · Badge · Table · Responsive
   Ready for the next modules, not on a page yet: .field.err, .btn.icon, .badge red / blue, the tooltip */

/* ---------- Base ---------- */
*,*:before,*:after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{overscroll-behavior-y:none} /* no bounce past the top or the end (Mac touchpad): the fixed side menu stayed while the bar moved, a gap opened */
body{display:flex;flex-direction:column;min-height:100vh;margin:0;background:#F5F7FA;font:14px/1.45 "IBM Plex Sans",sans-serif;color:#0B1B30;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:#1F6FD6;text-decoration:none}
img{max-width:100%;border:0;vertical-align:middle}
.flag{flex:none;width:16px;height:10px;margin:-2px 8px 0 0;border-radius:2px;box-shadow:0 0 0 1px rgba(11,27,48,.1);object-fit:cover} /* every flag (conn.php flag(), app.js) */
[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:#33445A}
input[type=text],input[type=search],input[type=email],input[type=password],input[type=url],select,textarea{display:block;width:100%;height:44px;padding:0 12px;border:1px solid #D5DDE7;border-radius:8px;background-color:#fff;font-size:15px;color:#0B1B30;-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 (Chrome
   on a Mac sends a click above the line to the start). A field with its own height has its own line-height too */
input[type=text],input[type=search],input[type=email],input[type=password],input[type=url]{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='%236B7B90' 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,.dd > button:focus,.dd.open > button{outline:0;border-color:#1F6FD6;box-shadow:0 0 0 3px rgba(31,111,214,.15)}
::placeholder{color:#6B7B90}
input[readonly]{background-color:#F8FAFC;color:#33445A}
input[type=checkbox],input[type=radio]{width:18px;height:18px;margin:0 8px 0 0;border:1.5px solid #B8C4D3;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:#1F6FD6;background-color:#1F6FD6;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:#1F6FD6;background:#1F6FD6;box-shadow:inset 0 0 0 3.5px #fff}
input[type=checkbox]:focus{box-shadow:0 0 0 3px rgba(31,111,214,.15)}
input[type=radio]:checked:focus{box-shadow:inset 0 0 0 3.5px #fff,0 0 0 3px rgba(31,111,214,.15)}
button:disabled{opacity:.55;cursor:not-allowed}
.check{display:inline-block;margin:0 16px 8px 0;font-size:14.5px;font-weight:400;color:#0B1B30;cursor:pointer}
.field{margin-bottom:16px}
.field small{display:block;margin-top:6px;font-size:13px;color:#5B6B7F}
.field.err input,.field.err select,.field.err textarea,.field.err .dd > button{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}
.ico{position:relative}
.ico > i{position:absolute;left:12px;top:12px;z-index:1;font-size:20px;color:#6B7B90;pointer-events:none}
.ico input,.ico select,.ico .dd > button{padding-left:42px}
.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:#6B7B90}
.pw button i{display:block;line-height:1}
button.link{padding:0;border:0;background:none;font-weight:500;color:#1F6FD6}

.btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 16px;border:1px solid #D5DDE7;border-radius:8px;background:#fff;font-size:14.5px;font-weight:600;line-height:1;color:#33445A;white-space:nowrap;vertical-align:middle;cursor:pointer}
.btn + .btn{margin-left:4px}
.btn:hover{border-color:#9DB4D0}
.btn i{margin-right:8px;font-size:18px}
.btn i.end{margin:0 0 0 8px}
.btn.primary{border-color:#1F6FD6;background:#1F6FD6;color:#fff}
.btn.primary:hover{border-color:#1858B0;background:#1858B0}
.btn.soft{border-color:#EEF4FD;background:#EEF4FD;color:#1F6FD6}
.btn.soft:hover{border-color:#DFEAFB;background:#DFEAFB}
.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}
.btn[aria-pressed=true]{border-color:#CFE0F6;background:#EEF4FD;color:#1F6FD6}
.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} /* a link-button on its way (app.js): not twice */
.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):after{border-color:rgba(11,27,48,.15);border-top-color:#1F6FD6} /* primary, red: white */
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Dropdown (app.js turns every select[data-placeholder] into this) ---------- */
.dd{position:relative}
.dd > button{display:block;position:relative;width:100%;height:44px;padding:0 36px 0 12px;border:1px solid #D5DDE7;border-radius:8px;background:#fff;text-align:left;font-size:15px;color:#0B1B30}
.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 "maritimedex-icons";color:#6B7B90}
.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 #E3E8EF;border-radius:12px;background:#fff;box-shadow:0 18px 40px rgba(11,27,48,.18);color:#0B1B30}
.dd.open > div{display:block}
.dd > div:before{content:"\e91b";position:absolute;left:20px;top:21px;font:17px/1 "maritimedex-icons";color:#6B7B90}
.dd > div input[type=text]{height:42px;line-height:40px;padding-left:38px;background:#F8FAFC;font-size:14.5px}
.dd ul{position:relative;max-height:296px;margin-top:6px;overflow-y:auto}
.dd ul:empty:after{content:"No matches";display:block;padding:12px;font-size:14px;color:#5B6B7F}
.dd li{position:relative;padding:10px 36px 10px 12px;border-radius:6px;font-size:14.5px;line-height:20px;cursor:pointer}
.dd li.sel{font-weight:600;color:#1F6FD6}
.dd li.pic{padding-left:42px;text-indent:-30px}
.dd .flag{margin:-2px 13px 0 1px} /* as wide as an icon (18 + 12): the names in line */
.dd li.sel:after{content:"\e906";position:absolute;right:12px;top:12px;font:16px/1 "maritimedex-icons";text-indent:0}
.dd mark{background:#FFF1B8;color:inherit}

/* ---------- Layout ---------- */
.top{position:-webkit-sticky;position:sticky;top:0;z-index:50;display:flex;align-items:center;height:73px;padding-right:30px;border-bottom:1px solid #E3E8EF;background:#fff}
.menu-btn,.search-btn{display:none;position:relative;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:#0B1B30;box-shadow:0 -6px #0B1B30,0 6px #0B1B30}
.logo{flex:none;width:260px;padding-left:20px;border-right:1px solid #E3E8EF;line-height:72px} /* 20 px in: in line with the menu's icons */
.search-btn{width:40px;font-size:22px}
.search-btn i{display:block}
.search-open .search-btn{color:#1F6FD6}
.search{position:relative;flex:1;max-width:480px;margin:0 16px 0 30px}
.search > i{position:absolute;left:14px;top:12px;font-size:20px;color:#6B7B90}
.search input[type=search]{padding-left:42px;background:#F8FAFC;font-size:14.5px}
.ttl{display:flex;flex:1;align-items:center;min-width:0;margin:0 16px 0 30px}
.ttl h1{min-width:0;overflow:hidden;font-size:20px;white-space:nowrap;text-overflow:ellipsis}
/* The title on the page itself (head.php $ticon: .top.flat; the account pages, Add company, invoice, payment): no white bar, its icon in a tile; from 1024 px, where the logo
   has a column of its own: fixed there like the menu under it (the title goes up with the page, the logo stays) */
.ttl h1 i{display:none}
@media (min-width:1024px){
  .top.flat{position:static;padding-left:260px;background:none;border-bottom:0}
  .top.flat > .logo{position:fixed;top:0;left:0;z-index:50;height:73px;background:#fff;border-bottom:1px solid #E3E8EF}
  .top.flat + .main{padding-top:4px}
  .flat .ttl{max-width:960px} /* in line with a narrow page (.narrow): Add company's steps end where its box ends */
  .flat .ttl h1{display:flex;align-items:center;font-size:22px}
  .flat .ttl h1 i{display:flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;margin-right:14px;border-radius:10px;background:#EEF4FD;font-size:20px;color:#1F6FD6}
}
.account{display:flex;align-items:center;margin-left:auto}
.account a{padding:0 10px;font-size:15px;font-weight:500;line-height:44px;color:#33445A}
.account .btn{margin-left:10px;padding:0 18px}

.side{position:fixed;top:73px;bottom:0;left:0;z-index:40;display:flex;flex-direction:column;width:260px;padding:20px 10px;overflow-y:auto;border-right:1px solid #E3E8EF;background:#fff}
.side nav a{display:flex;align-items:center;height:38px;padding:0 10px;border-radius:10px;font-size:14.5px;color:#33445A}
.side nav a:hover,.dd li.on,.p_search > ul > li:hover{background:#F3F6FA}
.side nav a i,.dd li i{width:18px;text-indent:0;margin-right:12px;font-size:18px;color:#6B7B90}
.side nav a.active{background:#EEF4FD;color:#1F6FD6}
.side nav a.active i,.dd li.sel i{color:inherit}
.side nav a .num{min-width:20px;height:20px;margin-left:auto;padding:0 6px;border-radius:10px;background:#DFEAFB;font-size:11px;font-weight:600;line-height:20px;text-align:center;color:#1858B0} /* a count (Billing: payments waiting) */
.side h2{padding:16px 12px;font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:#5B6B7F}
/* the signed-in user at the bottom (sys/usr.php): the first letter in a circle, the name; Profile and Log out open above it (app.js) */
.uside{position:relative;margin:auto -10px -20px;padding:9px 10px;border-top:1px solid #E3E8EF} /* as high as the footer: their lines meet */
.uside > button{display:flex;align-items:center;width:100%;height:46px;padding:0 10px;border:0;border-radius:10px;background:none;font-size:14.5px;font-weight:500;color:#0B1B30;text-align:left;cursor:pointer}
.uside > button:hover,.uside.open > button{background:#F3F6FA}
.uside.on > button{background:#EEF4FD;color:#1F6FD6}
.uside .ini{display:flex;align-items:center;justify-content:center;flex:none;width:30px;height:30px;margin:0 10px 0 -4px;border-radius:50%;background:#DFEAFB;font-size:13px;font-weight:600;color:#1858B0} /* soft blue, as the Billing count */
.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:#8A97A8;transition:transform .15s}
.uside.open > button > i{transform:rotate(180deg)}
.umenu{position:absolute;left:10px;right:10px;bottom:100%;margin-bottom:6px;padding:6px;border:1px solid #E3E8EF;border-radius:10px;background:#fff;box-shadow:0 8px 24px rgba(11,27,48,.12)}
.side .logo{display:none}

.main{flex:1 0 auto;margin-left:260px;padding:20px 30px 40px}
.narrow > *{max-width:960px} /* head.php $narrow: Add company, My Company, Billing, the claim page, the info pages */
.foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-left:260px;padding:22px 30px;border-top:1px solid #E3E8EF;background:#fff;font-size:14px;color:#5B6B7F}
.foot a{margin-left:24px;color:#5B6B7F;white-space:nowrap}
.foot a:hover{color:#1F6FD6}
.box{padding:24px;border:1px solid #E3E8EF;border-radius:12px;background:#fff}
.box h1{margin-bottom:8px;font-size:26px}
.box > h2{display:flex;align-items:center;margin:-24px -24px 20px;padding:16px 24px;border-bottom:1px solid #EDF1F5;font-size:18px}
.box > h2 > i{flex:none;width:34px;height:34px;margin-right:12px;border-radius:9px;background:#EEF4FD;font-size:18px;line-height:34px;text-align:center;color:#1F6FD6}
.box > h2 small{margin-left:auto;padding-left:12px;font-size:13.5px;font-weight:400;color:#5B6B7F;white-space:nowrap}
.box p{margin-bottom:20px;font-size:15px;color:#5B6B7F}

/* ---------- Page top (dark band: title and text centred, the filter bar under them; wide screens: as wide as its fields, narrower: up to 780px) ---------- */
.pg-top,.profile,.hero{border-radius:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='204' fill='none' stroke='%23fff' stroke-opacity='.1'%3E%3Cpath d='M0 17q75-16 150 0t150 0M0 51q75 20 150 0t150 0M0 85q75-12 150 0t150 0M0 119q75 18 150 0t150 0M0 153q75-20 150 0t150 0M0 187q75 14 150 0t150 0'/%3E%3C/svg%3E") 0 0/300px 204px,linear-gradient(115deg,#0B1B30,#10305A) #0B1B30;color:#fff}
.pg-top{position:relative;z-index:5;margin-bottom:20px;padding:28px 32px;text-align:center}
.pg-top .left{margin-bottom:20px}
.pg-top > form{display:inline-block;max-width:100%;text-align:left;vertical-align:top}
.pg-top h1{font-size:30px;line-height:1.2}
.pg-top p{margin-top:6px;font-size:16px;line-height:1.6;color:#B8C6D9}
.p_search > ul{display:flex;padding:5px;border-radius:12px;background:#fff;box-shadow:0 12px 32px rgba(2,8,20,.28)}
.p_search > ul > li{position:relative;width:230px;min-width:0;border-radius:8px}
.p_search > ul > li + li:not(.end):before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:1px;background:#E3E8EF}
.p_search > ul > li > i{position:absolute;left:15px;top:50%;z-index:1;margin-top:-10px;font-size:20px;color:#1F6FD6;pointer-events:none}
.p_search > ul > li.end{flex:none;width:auto;margin-left:5px} /* the button never narrower than itself */
.p_search .dd > button{height:54px;padding:24px 38px 6px 46px;border:0;background:none;font-weight:600;line-height:22px}
.p_search .dd > button small{display:block;position:absolute;left:46px;top:8px;font-size:12px;font-weight:500;line-height:16px;color:#5B6B7F}
.p_search .dd > button:after{right:14px}
.p_search .dd > button:focus,.p_search .dd.open > button{box-shadow:inset 0 0 0 2px #1F6FD6}
.p_search .dd > div{margin-top:10px;min-width:300px}
.p_search .btn{height:54px;padding:0 18px;font-size:15px}

/* ---------- Company list ---------- */
.list{border:1px solid #E3E8EF;border-radius:12px;background:#fff;overflow:hidden}
.list article{position:relative;min-height:141px;padding:20px 24px 14px 220px;border-bottom:1px solid #EDF1F5}
.list article:last-child{border-bottom:0}
.list article:hover,.table tbody tr:hover{background:#FAFBFD}
.list article > img,.list article:before,.co > img,.co:before{position:absolute;left:20px;top:20px;width:180px;height:100px;border:1px solid #E3E8EF;border-radius:10px;background:#fff;object-fit:contain}
.list article:before,.co:before{content:"\e929";background:#F8FAFC;font:30px/98px "maritimedex-icons";text-align:center;color:#C3CDD9}
.list h2{margin-bottom:8px;font-size:17px}
.list h2 a{color:#0F1419}
.list h2 a:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0}
.list p{font-size:14px;color:#5B6B7F}
.list p .km{margin-left:16px}
.list p .km i{margin-right:5px;font-size:15px;color:#1F6FD6;vertical-align:-2px}
.list ul{margin-top:12px}
.list li{display:inline-block;margin:0 6px 6px 0;padding:4px 10px;border-radius:8px;background:#F1F4F8;font-size:12.5px;color:#33445A}
.list.fol article{padding-right:160px} /* Following: the button in the middle on the right */
.list.fol article > .btn{position:absolute;top:50%;right:24px;z-index:1;transform:translateY(-50%)}

/* ---------- Home page: hero (search + join card) · .part sections · port finder (port search, popular ports, a radar of the companies around the chosen port) · how it works · recently added ---------- */
.eyebrow{margin-bottom:10px;font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#1F6FD6}
.pitch .eyebrow,.dark .eyebrow{color:#8DB8F5}
.hero{position:relative;z-index:5;display:flex;align-items:center;margin-bottom:44px;padding:48px}
.pitch{flex:1;min-width:0}
.pitch h1{max-width:640px;font-size:42px;line-height:1.12;letter-spacing:-.01em}
.pitch > p{max-width:600px;margin:16px 0 28px;font-size:17px;line-height:1.6;color:#B8C6D9}
.pitch .p_search{display:inline-block;max-width:100%}
.join{flex:none;width:380px;margin-left:48px;padding:30px;border-radius:16px;background:#fff;color:#0B1B30;box-shadow:0 24px 60px rgba(2,8,20,.4)}
.join h2{font-size:24px;line-height:1.25}
.join h2 + p{margin:12px 0 4px;font-size:15px;line-height:1.6;color:#5B6B7F}
.join .btn{height:50px;margin-top:20px;font-size:15.5px}
.part{margin-bottom:48px}
.part-head{display:flex;align-items:flex-end;margin-bottom:18px}
.part-head h2,.part .big{flex:1;font-size:26px}
.part-head a{margin-left:16px;font-size:14.5px;font-weight:600;white-space:nowrap}
.part-head a i{margin-left:6px;vertical-align:-2px}
.lead{max-width:680px;margin:10px 0 24px;font-size:16px;line-height:1.6;color:#5B6B7F}
.finder{display:flex;align-items:center;margin-bottom:48px;padding:52px 56px;border:1px solid #E3E8EF;border-radius:16px;background:#fff}
.findinfo{flex:0 1 540px;min-width:0;margin-right:56px}
.finder h2{font-size:30px;line-height:1.2;letter-spacing:-.01em;text-wrap:balance}
.finder h2 + p{margin:14px 0 26px;font-size:16px;line-height:1.65;color:#5B6B7F;text-wrap:balance}
.finder form{display:flex}
.finder .ico{flex:1;min-width:0}
.finder input[type=search]{height:52px;line-height:50px;font-size:16px}
.finder .ico > i{top:16px}
.finder form .btn{height:52px;margin-left:8px;padding:0 26px;font-size:15px}
.popular{display:flex;flex-wrap:wrap;align-items:center;margin-top:16px;font-size:14px;color:#5B6B7F}
.popular small{margin-right:4px;font-size:14px}
.popular a{margin:4px 8px 4px 0;padding:5px 12px;border:1px solid #E3E8EF;border-radius:20px;font-weight:500;color:#33445A;transition:border-color .15s,background-color .15s,color .15s}
.popular a:hover,.popular .on{border-color:#CFE0F6;background:#EEF4FD;color:#1F6FD6}
.findinfo > .go{display:inline-block;margin-top:22px}
.radar{text-align:center}
.radar svg{display:block;width:100%;height:auto}
.finder > .radar{flex:1 0 300px}
.finder .radar svg{max-width:400px;margin:0 auto}
.radar .rim{stroke:#DCE7F7;stroke-width:.6}
.radar .ring{fill:none;stroke:#D3E0F1;stroke-width:.5;stroke-dasharray:2 2}
.radar .axis{fill:none;stroke:#E3EBF5;stroke-width:.4}
.radar .sweep{transform-origin:100px 100px;animation:sweep 8s linear infinite}
@keyframes sweep{to{transform:rotate(360deg)}}
.radar g{display:none}
.radar .on{display:inline}
.radar g path{fill:none;stroke:#1F6FD6;stroke-width:3.8;stroke-linecap:round;stroke-opacity:.45}
.radar g .many{stroke-width:4.6;stroke-opacity:.8}
.radar .me{fill:#1F6FD6;stroke:#fff;stroke-width:2}
.radar text{font:500 6.5px "IBM Plex Sans",sans-serif;fill:#8A9AB0;paint-order:stroke;stroke:#fff;stroke-width:2.5px;stroke-linejoin:round}
.radar p{margin-top:10px;font-size:14px;color:#5B6B7F;text-wrap:balance}
.radar p b{font-weight:600;color:#0B1B30}
.radar .go{display:inline-block;margin-top:10px}
.around .radar{max-width:280px;margin:0 auto}
.go{font-size:15px;font-weight:600}
.go i{margin-left:6px;vertical-align:-2px}
.go:hover{color:#1858B0}
.how{display:flex;margin:0 -10px}
.how > div{flex:1;min-width:0;margin:0 10px;padding:40px;border:1px solid #E3E8EF;border-radius:16px;background:#fff}
.how .dark{border-color:#0F2340;background:#0F2340;color:#fff}
.how h3{font-size:24px}
.how > div > p{margin-top:10px;font-size:15.5px;line-height:1.6;color:#5B6B7F}
.how .dark > p,.dark .steps p{color:#B8C6D9}
.how > div > .eyebrow{margin:0 0 10px;font-size:12px;color:#5B6B7F}
.how .dark > .eyebrow{color:#8DB8F5}
.steps{margin:28px 0 32px;list-style:none;counter-reset:step}
.steps li{position:relative;min-height:46px;margin-bottom:22px;padding-left:66px;counter-increment:step}
.steps li:before{content:"0" counter(step);position:absolute;left:0;top:0;width:46px;height:46px;border:1px solid #DCE3EC;border-radius:50%;font-size:14px;font-weight:500;line-height:44px;text-align:center;color:#1F6FD6}
.dark .steps li:before{border-color:rgba(255,255,255,.2);color:#8DB8F5}
.steps h4{padding-top:1px;font-size:16.5px}
.steps p{margin-top:4px;font-size:14.5px;line-height:1.55;color:#5B6B7F}
.how .btn{height:48px;padding:0 22px;font-size:15px}

/* ---------- Company profile: dark head (wide logo, name, country, website, Follow, stats) · .cp = content + contact column ---------- */
.profile{margin-bottom:20px;padding:28px 32px}
.profile .head{display:flex;align-items:center}
.profile .head > img,.profile .head > b{flex:none;width:180px;height:100px;margin-right:28px;padding:10px 14px;border-radius:12px;background:#fff;object-fit:contain;font-size:34px;line-height:80px;text-align:center;color:#0B1B30}
.profile .info{flex:1;min-width:0}
.profile h1{font-size:28px}
.profile .info p{margin-top:6px;font-size:15px;color:#B8C6D9}
.profile .info p > *{display:inline-block;margin:4px 20px 0 0}
.profile .info p a{color:#8EC1FF}
.profile .info i{margin-right:6px}
.profile .info h1 i{margin:0;font-size:22px;color:#4ADE80;vertical-align:.04em}
.profile .acts{flex:none;width:160px;margin-left:28px}
.profile .acts .btn{display:flex;width:100%;border-color:rgba(255,255,255,.3);background:none;color:#fff}
.profile .acts .btn:hover{background:rgba(255,255,255,.08)}
.profile .acts .btn[aria-pressed=true]{background:rgba(255,255,255,.14)}
.stats{display:flex;margin:24px -32px -28px;border-top:1px solid rgba(255,255,255,.12);border-radius:0 0 14px 14px;background:rgba(11,27,48,.35)}
.stats div{flex:1;padding:14px 32px 16px;border-left:1px solid rgba(255,255,255,.1)}
.stats div:first-child{border-left:0}
.stats dt{font-size:11.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:#8FA3BC}
.stats dd{margin-top:2px;font-size:19px;font-weight:600}
.stats small{font-size:13px;font-weight:400;color:#B8C6D9}
.cp{display:flex}
.cp > div{display:flex;flex-direction:column;flex:1;min-width:0}
.cp > aside{position:-webkit-sticky;position:sticky;top:93px;flex:none;align-self:flex-start;width:340px;margin-left:20px}
.cp .box{margin-bottom:20px;scroll-margin-top:93px}
.cp > div > .box:last-child{flex-grow:1}
.txt{font-size:15.5px;line-height:1.7;color:#33445A}
.txt p,.txt ul,.txt ol{margin:0 0 14px;font-size:inherit;color:inherit}
.txt ul,.txt ol{padding-left:22px}
.txt ul{list-style:disc}
.txt a{text-decoration:underline}
.txt h2,.txt h3,.txt h4{margin:22px 0 10px;font-size:17px}
.txt > :last-child{margin-bottom:0}
.msg textarea{min-height:192px}

/* ---------- Company sections: spec rows (services, categories, brands) · intro (about, Read more) · ports (search in the top right corner) · branches · message form · claim ---------- */
.intro.clamp .txt{max-height:6.8em;overflow:hidden;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.more{display:inline-flex;align-items:center;margin-top:8px;padding:0;border:0;background:none;font-size:14px;font-weight:600;color:#1F6FD6}
.more i{margin-left:4px;font-size:16px}
.intro:not(.clamp) .more i{transform:rotate(180deg)}
.sub{margin:24px 0 12px;font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#5B6B7F}
h2 + .sub,h2 + div > .sub,.find + div > .sub{margin-top:0}
.spec{display:flex;margin-top:22px;padding-top:22px;border-top:1px solid #EDF1F5}
h2 + .spec{margin-top:0;padding-top:0;border-top:0}
.spec h3{flex:none;width:180px;padding-right:20px;font-size:16px}
.spec h3 small{display:block;margin-top:4px;font-size:13px;font-weight:400;color:#5B6B7F}
.spec ul{display:flex;flex-wrap:wrap;flex:1;min-width:0;margin-bottom:-14px}
.spec li{width:50%;padding:0 16px 14px 0;font-size:14.5px;color:#33445A}
.cats li{position:relative;padding-left:26px}
.cats i{position:absolute;left:0;top:3px;color:#13804A}
.brands li{width:33.333%}
.brands b{display:block;font-weight:600;color:#0B1B30}
.brands span{font-size:13px;color:#5B6B7F}
.brands .blue{color:#1F6FD6}
.brands .green{color:#13804A}
.svc h3{padding-top:6px}
.svc ul{margin-bottom:-8px}
.svc li{width:auto;padding:0 8px 8px 0}
.svc span{display:inline-flex;align-items:center;height:36px;padding:0 12px;border:1px solid #CFE0F6;border-radius:8px;background:#F5F9FF;font-size:14.5px;font-weight:500;color:#0B1B30}
.svc i{margin-right:8px;font-size:17px;color:#1F6FD6}
.svc + *{margin-top:22px;padding-top:22px;border-top:1px solid #EDF1F5}
.offices{display:flex;flex-wrap:wrap;margin:0 -5px -10px}
.offices li{position:relative;width:calc(33.333% - 10px);margin:0 5px 10px}
.wfind{position:relative}
.find{position:absolute;top:15px;right:24px;width:220px}
.find input[type=search]{height:36px;line-height:34px;font-size:14px}
.find > i{top:9px;font-size:18px}
.find input{padding-left:38px}
.offices a{display:block;height:100%;padding:14px 16px 14px 54px;border:1px solid #CFE0F6;border-radius:10px;background:#F5F9FF;color:#0B1B30;transition:border-color .15s}
.offices a:hover{border-color:#9DB4D0}
.offices a:hover b{color:#1F6FD6}
.offices i{position:absolute;left:14px;top:15px;width:28px;height:28px;border-radius:50%;background:#1F6FD6;font-size:15px;line-height:28px;text-align:center;color:#fff}
.offices b{display:block;font-size:15px}
.offices small{font-size:12.5px;color:#5B6B7F}
.country{display:flex;padding:12px 0;border-top:1px solid #EDF1F5}
.country:last-child{padding-bottom:0}
.country > b{flex:none;width:150px;padding-top:3px;font-size:14px;font-weight:600}
.country ul{flex:1;margin-bottom:-6px}
.country li{display:inline-block;margin:0 6px 6px 0}
.country a{display:block;padding:3px 10px;border-radius:8px;background:#F1F4F8;font-size:13.5px;color:#33445A}
.country a:hover{background:#EEF4FD;color:#1F6FD6}
.box .none{margin:0}
.branches > li{display:flex;align-items:center;padding:20px 0;border-top:1px solid #EDF1F5}
.branches > li:first-child{padding-top:0;border-top:0}
.branches > li:last-child{padding-bottom:0}
.branches > li > i{flex:none;width:40px;height:40px;margin-right:16px;border-radius:10px;background:#F1F4F8;font-size:19px;line-height:40px;text-align:center;color:#6B7B90}
.branches > li.head > i{background:#EEF4FD;color:#1F6FD6}
.where{position:relative;flex:1;min-width:0}
.where h3{font-size:16px}
.where h3 a{color:#0B1B30}
.where h3 a:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0}
.branches > li:hover h3 a{color:#1F6FD6}
.branches .badge{flex:none;margin-left:16px}
.where p{margin:4px 0 0;font-size:14px;color:#5B6B7F}
.claim{margin-bottom:20px;padding:20px 22px;border:1px dashed #BFD0E6;border-radius:12px;background:#F8FAFC}
.claim h2{font-size:16px}
.claim p{margin:6px 0 14px;font-size:14px;color:#5B6B7F}

/* ---------- Company map: map.php + map.js (our own map on a canvas; popup cards come from map.php) ---------- */
.mapbox{position:relative;height:calc(100vh - 133px);min-height:420px;overflow:hidden;border:1px solid #E3E8EF;border-radius:14px;background:#E9EEF4}
.omap{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;background:#D3E2F2;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}
.omap.drag{cursor:grabbing}
.omap.hand{cursor:pointer}
.omap canvas{display:block}
.mapzoom{position:absolute;right:16px;bottom:28px;z-index:2;display:flex;flex-direction:column;overflow:hidden;border-radius:10px;background:#fff;box-shadow:0 2px 10px rgba(11,27,48,.18)}
.mapzoom button{width:40px;height:40px;padding:0;border:0;background:none;font-size:22px;line-height:40px;color:#33445A;cursor:pointer}
.mapzoom button:hover{background:#F3F6FA;color:#1F6FD6}
.mapzoom button + button{border-top:1px solid #E3E8EF}
/* the pin map (add company): "My location" bottom left, white as the zoom buttons; while asking its icon turns; not allowed or not found:
   a line above it */
.maploc{position:absolute;left:16px;bottom:28px;z-index:2;display:flex;align-items:center;height:40px;padding:0 14px 0 11px;border:0;border-radius:10px;background:#fff;box-shadow:0 2px 10px rgba(11,27,48,.18);font-size:14px;font-weight:500;color:#33445A;cursor:pointer}
.maploc svg{flex:none;margin-right:8px}
.maploc:hover,.maploc.wait{background:#F3F6FA;color:#1F6FD6}
.maploc.wait svg{animation:spin 1.2s linear infinite}
.maplocmsg{position:absolute;left:16px;right:72px;bottom:76px;z-index:2;max-width:max-content;margin:0;padding:6px 10px;border-radius:8px;background:#fff;box-shadow:0 2px 10px rgba(11,27,48,.18);font-size:12.5px;line-height:1.35;color:#D93025}
.mapsrc{position:absolute;right:16px;bottom:6px;margin:0;font-size:11px;color:#7C8BA0}
.mapop{position:absolute;z-index:3;padding:14px 16px;border-radius:12px;background:#fff;box-shadow:0 8px 28px rgba(11,27,48,.22);transform:translate(-50%,-100%);cursor:default}
.mapop:after{content:"";position:absolute;left:50%;bottom:-6px;width:12px;height:12px;margin-left:-6px;background:#fff;transform:rotate(45deg)}
.mapop .x{position:absolute;right:6px;top:6px;z-index:1;width:28px;height:28px;padding:0;border:0;border-radius:6px;background:#fff;font-size:16px;color:#5B6B7F;cursor:pointer}
.mapop .x:hover{background:#F3F6FA}
.mapop .pops h3{padding-right:26px}
.maphead{position:absolute;left:16px;top:16px;z-index:2;padding:14px 18px;border-radius:12px;background:#fff;box-shadow:0 4px 18px rgba(11,27,48,.14)}
.maphead h1{font-size:18px}
.maphead > a{position:absolute;right:18px;top:16px;font-size:13.5px;font-weight:500}
.maphead > a i{margin-left:4px;font-size:15px;vertical-align:-2px}
.maphead form{display:flex;width:440px;margin-top:12px}
.maphead .ico{flex:1;min-width:0}
.maphead .ico + .ico{margin-left:8px}
.maphead .ico + .ico .dd > div{left:auto;right:0}
.maphead .dd ul{max-height:240px}
.pop{display:block;width:220px;color:#0B1B30}
.pop span{display:block;height:92px;margin-bottom:10px;padding:8px;border:1px solid #E3E8EF;border-radius:10px;text-align:center}
.pop span img{width:100%;height:100%;object-fit:contain}
.pop span b{font-size:26px;line-height:74px;color:#1F6FD6}
.pop strong{display:block;font-size:15px;line-height:1.3}
.pop:hover strong,.pops a:hover strong{color:#1F6FD6}
.pop small,.pops small{display:block;margin-top:3px;font-size:13px;color:#5B6B7F}
.pop em{display:block;margin-top:4px;font-size:12.5px;font-style:normal;color:#5B6B7F}
.pops{width:240px;max-height:280px;overflow-y:auto}
.pops h3{margin-bottom:4px;font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#5B6B7F}
.pops a{display:block;padding:8px 0;border-top:1px solid #EDF1F5;color:#0B1B30}
.pops strong{font-size:14px;font-weight:600}
.pop-wait{margin:0;padding:6px 2px;font-size:14px;color:#5B6B7F}

/* ---------- Ports: list (.pf filter, table) · port page (service filter, company list in the box, nearby ports) ---------- */
.ports .near{font-weight:600}
.pf input[type=search]{height:54px;line-height:54px;padding:0 14px 0 46px;border:0;border-radius:8px;background:none;font-size:15px;font-weight:600;color:#0B1B30}
.pf input[type=search]:focus{box-shadow:inset 0 0 0 2px #1F6FD6}
.ports td a b{font-weight:600;color:#0B1B30}
.ports td a:hover b{color:#1F6FD6}
.unk{color:#9AA8B8}
.portfilter{display:flex;align-items:center;margin-bottom:20px}
.portfilter .ico{flex:1;max-width:300px}
.box .portfilter p{margin:0 0 0 auto;padding-left:16px;font-size:13.5px}
.box > .list{margin:0 -24px -24px;border:0;border-top:1px solid #EDF1F5;border-radius:0 0 12px 12px}
.box .list p{margin:0;font-size:14px}
.near a{display:flex;align-items:baseline;justify-content:space-between;padding:9px 0;border-bottom:1px solid #F1F4F8;color:#0B1B30}
.near li:last-child a{padding-bottom:0;border-bottom:0}
.near a:hover b{color:#1F6FD6}
.near b{font-weight:500}
.near small{margin-left:12px;font-size:13px;color:#5B6B7F;white-space:nowrap}

/* ---------- Sign-in pages (sys/pages: log in, sign up, password reset): a page of its own (head.php $bare), on the left navy with a faint radar, on the right the form ---------- */
.au{display:flex;min-height:100vh;background:#fff}
.au-l{position:relative;display:flex;flex-direction:column;width:50%;padding:28px 40px;background:linear-gradient(150deg,#163A6B 0%,#0B1B30 55%);color:#fff;overflow:hidden}
.au-l > svg{position:absolute;right:-340px;top:50%;width:900px;height:900px;margin-top:-450px}
.au-l header{position:relative;display:flex;align-items:center}
.au-l header > a{flex:none}
.au-l nav{display:flex;align-items:center;margin-left:auto}
.au-l nav a{margin-left:28px;font-size:15px;font-weight:500;color:#fff}
.au-l nav .btn{height:40px;padding:0 18px}
.au-l .say{position:relative;max-width:520px;margin:auto 0}
.au-l h2{font-size:42px;font-weight:600;line-height:1.2;letter-spacing:-.01em}
.au-l .say p{margin-top:14px;font-size:17px;line-height:1.55;color:#AFC2DC}
.au-r{display:flex;flex-direction:column;width:50%;padding:28px 40px}
.au-r .in{width:100%;max-width:400px;margin:auto}
.au-r .in > i{display:block;width:56px;height:56px;margin-bottom:20px;border-radius:50%;background:#EEF4FD;font-size:26px;line-height:56px;text-align:center;color:#1F6FD6}
.au-r h1{margin-bottom:6px;font-size:28px}
.au-r .in > p{margin-bottom:28px;font-size:15px;color:#5B6B7F}
.au-r .in .alt{margin:24px 0 0;font-size:14.5px;color:#5B6B7F}
.au-r .in .alt + .alt{margin-top:8px}
.au-r .terms{margin-top:14px;font-size:13px;color:#5B6B7F}
.au-r footer{margin-top:24px;font-size:13px;text-align:center;color:#8592A3}
.au-r footer a{margin-left:14px;color:#8592A3}

/* ---------- Account pages (sys: profile, following, messages, company, billing): the site's own layout; the title with the menu's icon in place of the search, from 1024 px on the page itself (head.php $ticon: .ttl), a list's box full width; Profile as the payment page (.box.two: the tabs and the form in the card, the account beside it: .me), Account in the side menu (sys/usr.php); a section's parts as tabs, one address each ---------- */
.work p b{color:#0B1B30}
.work .btns{justify-content:flex-start;margin-top:4px}
.two .tabs{margin:-28px -32px 24px;padding:0 24px}
.me{display:flex;flex-direction:column;align-items:center;text-align:center}
.me span{display:flex;align-items:center;justify-content:center;width:84px;height:84px;margin-bottom:16px;border-radius:50%;background:#1F6FD6;font-size:30px;font-weight:600;color:#fff}
.me b{font-size:18px;overflow-wrap:anywhere}
.box .me p{margin:4px 0 0;font-size:14.5px;overflow-wrap:anywhere}
.me small{margin-top:14px;padding:4px 12px;border-radius:12px;background:#EEF4FD;font-size:13px;color:#1F6FD6}
.tabs{display:flex;margin:-24px -24px 24px;padding:0 16px;border-bottom:1px solid #EDF1F5;overflow-x:auto}
.tabs a{display:flex;flex:none;align-items:center;height:54px;margin:0 8px;padding-top:1px;border-bottom:2px solid transparent;font-size:15px;font-weight:500;color:#5B6B7F}
.tabs a i{margin-right:8px;font-size:18px}
.tabs a.on{border-color:#1F6FD6;color:#1F6FD6}
.tabs::after{content:'';flex:none;width:8px} /* when they scroll (a phone): room after the last one */

/* ---------- Add company (sys/add-company, five steps: ai/sirket-ekleme.md): numbered steps on top of the box · the code for the company email ·
   a company already listed (.dup) · logo tile · services · the map with a pin (map.js data-pick) · suggestions under a field (.sugg) · a part's heading (h3.fh) ·
   the list a field adds to (ul.added: ports, brands) · chips (product categories) · details.sg (a suggestion) · plan cards (.plans) and what they
   include (.incl) · a note (p.note) · the bar at the bottom. Two sides (.box.two: the payment page, Profile): a white card, an aside beside it on the page, at most 960.
   The payment page (sys/payment, .box.two.pay): a white card on the left (3D Secure the payer's choice under the expiry date: .sec), the invoice details (.ito)
   over the card form (.ccbrand: Visa or Mastercard lit as the number is typed); beside it on the page the plan (the toggle .seg, the price,
   the line, the total, consent, Pay) ---------- */
.stepper{display:flex;flex:none;width:380px;margin-left:auto;list-style:none;counter-reset:s} /* Add company's steps, in the title row (head.php $tside) */
.stepper li{display:flex;flex:1;align-items:center;font-size:14.5px;font-weight:500;color:#8A97A8;white-space:nowrap}
.stepper li:before{counter-increment:s;content:counter(s);flex:none;width:28px;height:28px;margin-right:10px;border:1.5px solid #D5DDE7;border-radius:50%;font-size:13px;font-weight:600;line-height:25px;text-align:center}
.stepper li:after{content:"";flex:1;height:1.5px;margin:0 14px;background:#E3E8EF}
.stepper li:last-child{flex:none}
.stepper li:last-child:after{display:none}
.stepper .on{color:#0B1B30}
.stepper .on:before{border-color:#1F6FD6;background:#1F6FD6;color:#fff}
.stepper .done:before{content:"\e906";border-color:#13804A;background:#13804A;font:15px/25px "maritimedex-icons";color:#fff}
.stepper .done:after{background:#13804A}
.stepper .done a{color:#33445A}
.stepper .done a:hover{color:#1F6FD6}
.box p.hint{margin:0 0 20px;font-size:14.5px}
/* the company email (step 1, the claim page): the part before @ typed, the domain fixed beside it (.mailat; app.js: the website's as it is
   typed; .none: no website yet) */
.webmail .field{max-width:516px} /* the website and the company email: as wide as the other forms' fields */
.webrow{display:grid;grid-template-columns:minmax(0,516px) minmax(260px,1fr);grid-template-rows:auto 1fr;align-items:start;column-gap:56px} /* those fields on the left, why we ask on the right (step 1, the claim page); the claim page's button under its one field */
.webrow .whynote{grid-column:2;grid-row:1 / span 2}
.whynote{padding:16px 18px;border-radius:10px;background:#F3F6FA;font-size:14px;line-height:1.55;color:#33445A}
.whynote b{display:block;margin-bottom:6px;color:#0B1B30}
.whynote strong{font-weight:600;color:#0B1B30} /* the claim page's domain */
.mailat{display:flex}
.mailat .ico{flex:1;min-width:0}
.mailat input{border-top-right-radius:0;border-bottom-right-radius:0}
.mailat > span{display:flex;align-items:center;max-width:60%;padding:0 14px;border:1px solid #D5DDE7;border-left:0;border-radius:0 8px 8px 0;background:#F3F6FA;font-size:15px;color:#33445A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mailat.none > span{color:#8A97A8}
/* the company email verified (step 1, the Company tab): the website and the email as text (.ver), Change on the right; a live company's
   "needs our approval" and the new ones waiting (small.wait) under them */
.ver{display:flex;flex-wrap:wrap;align-items:center;margin-bottom:24px;padding:14px 16px;border:1px solid #E3E8EF;border-radius:10px;background:#F8FAFC;font-size:15px;color:#0B1B30}
.ver > span{display:flex;align-items:center;min-width:0;margin-right:28px;overflow-wrap:anywhere}
.ver > span > i{flex:none;margin-right:8px;font-size:18px;color:#6B7B90}
.ver em{display:flex;align-items:center;margin-left:10px;font-size:13px;font-style:normal;font-weight:600;color:#13804A;white-space:nowrap}
.ver em i{margin-right:4px;font-size:16px}
.ver .link{margin-left:auto;font-size:14px}
.ver small{flex-basis:100%;margin-top:8px;font-size:13px;color:#5B6B7F}
.ver small.wait{color:#B45309}
.code{max-width:516px;margin-bottom:4px;padding:18px 20px;border:1px solid #CFE0F6;border-radius:12px;background:#F5F9FF} /* as wide as the fields above it */
.code label{margin-bottom:10px;font-size:14.5px;font-weight:400}
.code label b{color:#0B1B30}
.code div{display:flex}
.code input[type=text]{width:150px;margin-right:10px;font-size:22px;font-weight:600;letter-spacing:.5em;text-indent:.5em;text-align:center}
.code small{display:block;margin-top:10px;font-size:13px;color:#5B6B7F}
.dup{display:flex;align-items:center;margin-bottom:16px;padding:12px 14px;border:1px solid #F3D19C;border-radius:10px;background:#FFF8EC}
.dup > i{flex:none;margin-right:12px;font-size:20px;color:#B45309}
.dup div{flex:1;min-width:0}
.dup b{display:block;font-size:14.5px;color:#0B1B30}
.box .dup p{margin:2px 0 0;font-size:13.5px}
.dup .btn{flex:none;margin-left:12px}
/* Claim (/claim/{company}, sys/claim/index.php): the listed company (.claimc: logo or the lists' empty frame, name, flag and place, website), the user's draft that
   goes (.note.warn) */
.claimc{display:flex;align-items:center;margin:0 -24px 24px;padding:0 24px 24px;border-bottom:1px solid #EDF1F5} /* no frame, a line under it to the box's edges */
.claimc > img,.claimc > i{flex:none;width:136px;height:75px;margin-right:18px;border:1px solid #E3E8EF;border-radius:8px;background:#fff;object-fit:contain}
.claimc > i{display:flex;align-items:center;justify-content:center;background:#F8FAFC;font-size:26px;color:#C3CDD9} /* no logo: as in the lists */
.claimc p i{flex:none;width:16px;margin-right:8px;font-size:15px;color:#8A97A8}
.claimc div{flex:1;min-width:0}
.claimc b{display:block;font-size:16.5px;color:#0B1B30}
.box .claimc p{display:flex;align-items:center;margin:6px 0 0;font-size:14px;color:#5B6B7F}
.box p.note.warn{margin:0 0 20px;background:#FFF8EC}
.note.warn i{color:#B45309}
.similar a{font-weight:500}
/* step 1, the Company tab: the logo (.tile); on its right the name and under it the logo's button (.logo-up), its warning on the right */
.idn{display:flex;margin-bottom:16px}
.idn > .field{flex:none;margin:0 20px 0 0}
.idn > div + div{flex:1;min-width:0}
.idn .field + .logo-up{margin-top:-4px}
.logo-up{display:flex;flex-wrap:wrap;align-items:center}
.tile{width:180px;height:100px;border:1px solid #E3E8EF;border-radius:12px;background:#fff;overflow:hidden}
.tile img{display:block;width:100%;height:100%;object-fit:contain}
.tile.blank{display:flex;align-items:center;justify-content:center;border-style:dashed;font-size:28px;color:#B8C4D3}
.logo-up label.btn{position:relative;margin:0;overflow:hidden;font-size:14.5px;font-weight:400}
.logo-up label.btn:focus-within{border-color:#1F6FD6;box-shadow:0 0 0 3px rgba(31,111,214,.15)}
.logo-up input{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0}
.box .logo-up p{margin:0 0 0 14px;font-size:13px}
.box .logo-up p:empty{display:none} /* no note: only a warning when the file chosen will not do (app.js) */
.box .logo-up p.err{color:#D93025}
.field small.err{color:#D93025} /* a field's warning under it (About the company: contact details) */
.field textarea.bad{border-color:#D93025}
.field label small{display:inline;margin-left:6px;font-weight:400;color:#8A97A8}
.svcs{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));margin:0 -4px}
.svcs label{position:relative;margin:0 4px 8px;font-size:14.5px;font-weight:400;line-height:1.3;color:#33445A;cursor:pointer}
.svcs input{position:absolute;left:12px;top:50%;margin-top:-9px}
.svcs span{display:flex;align-items:center;height:100%;min-height:44px;padding:8px 12px 8px 38px;border:1px solid #D5DDE7;border-radius:8px}
.svcs span i{margin:0 10px 0 2px;font-size:18px;color:#6B7B90}
.svcs input:checked + span{border-color:#1F6FD6;background:#F4F8FE;color:#0B1B30}
.svcs input:checked + span i{color:#1F6FD6}
.svcs input:disabled,.svcs input:disabled + span{opacity:.5;cursor:not-allowed}
.svcs.who{grid-template-columns:1fr 1fr}
.box.inv{max-width:960px}
.inv .hint{text-align:center}
.pickmap{position:relative;height:320px;overflow:hidden;border:1px solid #D5DDE7;border-radius:10px;background:#D3E2F2}
.pickmap .mapsrc{margin:0;font-size:11px}
.sugg{position:absolute;left:0;right:0;top:100%;z-index:20;margin-top:4px;padding:6px;border:1px solid #E3E8EF;border-radius:10px;background:#fff;box-shadow:0 12px 32px rgba(11,27,48,.12)}
.sugg li{display:flex;align-items:center;min-height:40px;padding:6px 10px;border-radius:8px;font-size:14.5px;cursor:pointer}
.sugg li.on,.sugg li:hover{background:#F3F6FA}
.field .sugg small{margin:0 0 0 auto;padding-left:12px;font-size:13px;color:#8A97A8;text-align:right}
.box h3.fh{display:flex;align-items:baseline;margin:32px 0 4px;padding-top:28px;border-top:1px solid #EDF1F5;font-size:17px} /* a part of a step (Services; Ports, Categories, Brands): a thin line above it */
.fh + p.hint{margin-bottom:14px}
.fh small{margin-left:auto;padding-left:12px;font-size:13px;font-weight:400;color:#5B6B7F} /* on its right: how many are ticked */
.fh small b{font-weight:600;color:#1F6FD6}
.added{margin:-8px 0 16px;border:1px solid #E3E8EF;border-radius:10px}
.added:empty{display:none}
.added li{display:flex;align-items:center;min-height:52px;padding:6px 8px 6px 14px;border-top:1px solid #EDF1F5;font-size:14.5px}
.added li:first-child{border-top:0}
.added b{font-weight:500}
.added small{margin-left:8px;font-size:13px;color:#8A97A8}
.added .check{margin:0 8px 0 auto;font-size:13.5px}
.added select{width:200px;height:36px;margin-left:auto;font-size:14px}
.added .x{flex:none;width:36px;height:36px;margin-left:4px;padding:0;border:0;border-radius:8px;background:none;font-size:18px;color:#8A97A8}
.added .x:hover{background:#F3F6FA;color:#33445A}
.chips{display:flex;flex-wrap:wrap}
.chips label{position:relative;margin:0 8px 8px 0;font-size:14px;font-weight:400;color:#33445A;cursor:pointer}
.chips input{position:absolute;left:11px;top:9px}
.chips span{display:block;padding:8px 14px 8px 37px;border:1px solid #D5DDE7;border-radius:18px;line-height:18px}
.chips input:checked + span{border-color:#1F6FD6;background:#F4F8FE;color:#0B1B30}
.sg{margin:0 0 8px}
.sg summary{display:flex;align-items:center;width:max-content;font-size:13.5px;font-weight:500;color:#1F6FD6;cursor:pointer;list-style:none}
.sg summary::-webkit-details-marker{display:none}
.sg summary i{margin-right:4px;font-size:15px}
.sg[open] summary{margin-bottom:12px}
.sg .row{max-width:640px}
.plans{display:flex;margin:4px -8px 24px}
.plans > *{position:relative;flex:1;margin:0 8px;font-size:14px;font-weight:400;color:#5B6B7F}
.plans label{cursor:pointer}
.plans input{position:absolute;right:20px;top:20px}
.plans span{display:block;height:100%;padding:20px;border:1px solid #D5DDE7;border-radius:12px}
.plans input:checked + span{border-color:#1F6FD6;box-shadow:0 0 0 3px rgba(31,111,214,.12)}
.plans em{position:absolute;left:20px;top:-10px;padding:2px 8px;border-radius:6px;background:#1F6FD6;font-size:12px;font-style:normal;font-weight:600;color:#fff}
.plans b{display:block;margin-bottom:10px;font-size:16px;color:#0B1B30}
.plans strong{font-size:34px;line-height:1.2;color:#0B1B30}
.plans small{display:block;margin-top:2px;font-size:14px}
.save{display:inline-flex;align-items:center;margin-top:14px;padding:4px 10px;border-radius:12px;background:#E7F6EE;font-size:12.5px;font-style:normal;font-weight:600;color:#13804A}
.save:before{content:"";width:6px;height:6px;margin-right:6px;border-radius:50%;background:currentColor}
.incl{display:flex;flex-wrap:wrap;margin-bottom:16px}
.incl li{display:flex;width:50%;padding:4px 16px 4px 0;font-size:14.5px;color:#33445A}
.incl i{flex:none;margin:2px 10px 0 0;font-size:16px;color:#13804A}
.box p.note{display:flex;margin:0;padding:12px 16px;border-radius:10px;background:#F3F6FA;font-size:14.5px;color:#33445A}
.note i{flex:none;margin:2px 10px 0 0;font-size:18px;color:#1F6FD6}
.box.two{display:grid;grid-template-columns:minmax(0,1fr) 380px;align-items:start;max-width:960px;padding:0;border:0;border-radius:0;background:none}
.two > :first-child{padding:28px 32px 32px;border:1px solid #E3E8EF;border-radius:12px;background:#fff}
.ito{margin-bottom:28px;padding-bottom:24px;border-bottom:1px solid #EDF1F5;font-size:14.5px;line-height:1.55;color:#5B6B7F;overflow-wrap:anywhere}
.ito a{margin-left:10px;font-weight:600;color:#1F6FD6;white-space:nowrap}
.ito b{display:block;font-size:15px;color:#0B1B30}
.ito span{display:block;white-space:pre-line}
.two aside h3{margin-bottom:16px;font-size:17px;text-align:center}
.pay .field{margin-bottom:28px}
.pay .row > .field{flex-basis:120px}
.pay .row .field{margin-bottom:0}
.pay input[type=text]{height:50px;line-height:48px}
.pay .ico > i{top:15px}
.pay .alert{margin-bottom:16px}
.pay p[data-cc=msg]{margin:20px 0 0}
.pay .sec{display:flex;align-items:flex-start;margin:28px 0 0;font-size:13.5px;line-height:1.45;color:#5B6B7F} /* 3D Secure: the payer's choice, under the expiry date (as far from it as the fields are from each other) */
.pay .sec input{flex:none;margin:2px 10px 0 0}
.pay .sec b{display:block;font-size:14.5px;font-weight:500;color:#0B1B30}
.ccbrand{float:right;margin-top:1px;font-size:11.5px;font-weight:400;letter-spacing:.06em;white-space:nowrap;color:#8A97A8}
.ccbrand b{font-weight:600}
.ccbrand.visa b + b,.ccbrand.mc b:first-child{opacity:.3}
.ccbrand.visa b,.ccbrand.mc b{color:#1F6FD6}
.two > aside{padding:20px 40px 40px}
.seg{display:flex;padding:4px;border:1px solid #E3E8EF;border-radius:999px;background:#fff}
.seg label{position:relative;flex:1;margin:0;cursor:pointer}
.seg input{position:absolute;opacity:0}
.seg span{display:block;padding:8px 4px;border-radius:999px;font-size:14px;font-weight:500;text-align:center;white-space:nowrap;color:#33445A}
.seg input:checked + span{background:#1F6FD6;font-weight:600;color:#fff}
.seg input:focus-visible + span{box-shadow:0 0 0 3px rgba(31,111,214,.3)}
.pay .saving{display:flex;justify-content:center;min-height:24px;margin:20px 0 6px}
.pay .price{display:flex;justify-content:center;align-items:baseline;margin:0 0 22px;font-size:16px;color:#5B6B7F}
.pay .price b{margin-right:6px;font-size:34px;font-weight:700;line-height:1.2;color:#0B1B30}
.badge:empty{display:none}
.two .line{display:flex;justify-content:space-between;margin:0;padding:12px 0;border-top:1px solid #E3E8EF;font-size:15px;color:#0B1B30}
.two .line span + span{margin-left:16px;font-weight:600;white-space:nowrap}
.pay .until{display:flex;margin:-4px 0 12px;font-size:13.5px;color:#5B6B7F}
.pay .until i{margin:1px 6px 0 0;font-size:16px}
.pay .until b{font-weight:600;color:#0B1B30}
.two .total{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:20px;padding-top:14px;border-top:1px solid #D5DDE7;font-size:17px}
.two .total dt{color:#5B6B7F}
.two .total dd{font-size:22px;font-weight:700;color:#0B1B30}
.check.terms{display:block;margin:0 0 24px;font-size:14px;color:#33445A}
.two aside .btn{width:100%;height:48px;font-size:15.5px}

/* My Company (sys/my-company/index.php): one card, the company (.co: as in All Companies, the badge for the services), where it stands
   (p.note), at the bottom (.foot2) Delete or Hide listing on the left (.del, .del.hide) and what to do on the right. Delete opens a pop-up
   (dialog.dlg, app.js [data-open]) that says what goes, its button .btn.red; Hide listing its own, the icon blue (.dlg.blue) */
.co{position:relative;min-height:100px;margin-bottom:22px;padding-left:200px}
.box .co > img,.box .co:before{left:0;top:0}
.co h2{margin:4px 0 8px;font-size:20px}
.box .co p{margin:0 0 12px;font-size:14px}
/* what waits for our approval (index.php: Withdraw); the tabs' note on the edit pages (.note.ed); a field's value waiting (.wait) */
.pend{display:flex;align-items:center;margin-top:12px;padding:14px 16px;border:1px solid #F6D9A8;border-radius:10px;background:#FFF8EC;font-size:14.5px;color:#33445A}
.pend > i{flex:none;margin-right:12px;font-size:20px;color:#B45309}
.pend > div{flex:1;min-width:0;overflow-wrap:anywhere}
.pend b{color:#0B1B30}
.pend small{font-size:13px;color:#5B6B7F}
.pend form{margin-left:12px}
.pend.no{border-color:#F3C7C3;background:#FDF3F2}
.pend.no > i{color:#C5221F}
.box p.note.ed{margin-bottom:24px}
.field small.wait,.box .logo-up p.wait{color:#B45309}
.del{display:inline-flex;align-items:center;justify-content:center;margin-right:auto;padding:0;border:0;background:none;font:inherit;font-size:14px;font-weight:500;color:#C5221F;cursor:pointer}
.del i{margin-right:8px}
.del.hide{color:#33445A}
.btn.red{border-color:#D93025;background:#D93025;color:#fff}
.dlg{width:calc(100% - 32px);max-width:460px;margin:auto;padding:28px;border:0;border-radius:14px;box-shadow:0 20px 60px rgba(11,27,48,.25)}
.dlg::backdrop{background:rgba(11,27,48,.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:48px;height:48px;margin-right:14px;border-radius:50%;background:#FDECEC;font-size:22px;color:#C5221F}
.dlg.blue h3 span{background:#EEF4FD;color:#1F6FD6}
.dlg p{margin-bottom:12px;font-size:14.5px;color:#5B6B7F}
.dlg li,.gone li{display:flex;padding:8px 0;border-top:1px solid #EDF1F5;font-size:14.5px}
.dlg li i,.gone li i{flex:none;margin:2px 10px 0 0;color:#5B6B7F}
.gone{margin-bottom:16px}
.box .gone + p.note{margin-bottom:20px}
.dlg .note{margin-top:6px;padding:10px 12px;border-radius:10px;background:#F3F6FA;font-size:13.5px}
.dlg form + form,.dlg form + .btn{margin-left:8px}
.foot2{display:flex;align-items:center;margin:28px -24px -24px;padding:16px 24px;border-top:1px solid #EDF1F5}
.foot2 span{margin-right:16px;font-size:13.5px;color:#8A97A8}
.foot2 .btn.primary{margin-left:auto}
.foot2 .del ~ .btn{margin-left:8px}

/* ---------- Messages (sys/messages; ai/uyelik.md): two panes (.mbox): the list with the search on top and "Show older
   conversations" at its end · the open conversation (.mhead, bubbles: mine on the right, the reply at the bottom); phones: one of them
   (.open: the conversation, a back arrow) · the company page's form (.msg: the note when signed out, the sent message) ---------- */
.mbox{display:grid;grid-template-columns:330px minmax(0,1fr);height:calc(100vh - 150px);min-height:540px;border:1px solid #E3E8EF;border-radius:12px;background:#fff;overflow:hidden}
.mside{display:flex;flex-direction:column;min-height:0;border-right:1px solid #EDF1F5}
.msearch{position:relative;flex:none;padding:12px;border-bottom:1px solid #EDF1F5}
.msearch > i{position:absolute;top:50%;left:24px;margin-top:-9px;font-size:18px;color:#6B7B90}
.msearch input[type=search]{height:40px;line-height:38px;padding:0 36px 0 38px;font-size:14.5px}
.msearch a{position:absolute;top:50%;right:18px;display:flex;align-items:center;justify-content:center;width:28px;height:28px;margin-top:-14px;font-size:16px;color:#6B7B90}
.mlist{flex:1;overflow:auto}
.mnone{padding:24px 16px;text-align:center;font-size:14px;color:#5B6B7F}
.mmore{display:block;width:100%;padding:14px;border:0;background:none;font-size:14px;font-weight:600;color:#1F6FD6}
.mmore:hover{background:#FAFBFD}
.mbody .mmore{width:auto;margin:0 auto 14px;padding:6px 14px;border:1px solid #E3E8EF;border-radius:16px;background:#fff;font-size:13px}
.av{display:flex;flex:none;align-items:center;justify-content:center;width:68px;height:40px;padding:3px;border:1px solid #E3E8EF;border-radius:8px;background:#fff;overflow:hidden;font-size:18px;color:#C3CDD9}
.av img{width:100%;height:100%;object-fit:contain}
.mrow .av{margin-right:12px}
.av.ini{width:40px;margin:0 14px;padding:0;border:0;border-radius:50%;background:#DFEAFB;font-size:16px;font-weight:600;color:#1858B0}
.mrow{display:flex;padding:14px 16px;border-bottom:1px solid #EDF1F5;color:#5B6B7F}
.mrow:hover{background:#FAFBFD}
.mrow.on{background:#EEF4FD}
.mrow .av.ini{margin-right:26px}
.mb{flex:1;min-width:0}
.mb > span{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.mb > .mt{display:flex;align-items:baseline}
.mt b{flex:1;min-width:0;overflow:hidden;font-size:15px;font-weight:500;color:#0F1419;text-overflow:ellipsis}
.mt time{flex:none;margin-left:8px;font-size:12.5px;color:#8293A8}
.ms{margin-top:2px;font-size:14px;color:#33445A}
.mp{margin-top:2px;font-size:13.5px;color:#8293A8}
.mrow.new .mt b,.mrow.new .ms{font-weight:600;color:#0F1419}
.mrow.new .mt time{font-weight:600;color:#1F6FD6}
.mrow.new .mt time:before{content:"";display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%;background:#1F6FD6;vertical-align:1px}
.mconv{display:flex;flex-direction:column;min-width:0;min-height:0}
.mconv > .empty{margin:auto}
.mhead{display:flex;flex:none;align-items:center;padding:14px 20px;border-bottom:1px solid #EDF1F5}
.mhead .av{margin-right:12px}
.mhead .av.ini{margin:0 12px 0 0}
.mhead > div{min-width:0}
.mhead h2{overflow:hidden;font-size:16px;white-space:nowrap;text-overflow:ellipsis}
.mhead h2 a{color:#0F1419}
.mhead h2 small{font-size:14px;font-weight:400;color:#5B6B7F}
.mhead h2 small a{color:#1F6FD6}
.mhead p{margin-top:2px;overflow:hidden;font-size:13.5px;white-space:nowrap;text-overflow:ellipsis;color:#5B6B7F}
.mback{display:none}
.mbody{flex:1;min-height:0;padding:20px;overflow:auto;overflow-anchor:none;background:#FAFBFD} /* app.js keeps the place when earlier messages come in */
.mday{margin:0 0 14px;text-align:center;font-size:12.5px;color:#8293A8}
.bub{display:flex;flex-direction:column;align-items:flex-start;max-width:78%;margin-bottom:14px}
.bub p{padding:10px 14px;border:1px solid #E3E8EF;border-radius:14px 14px 14px 4px;background:#fff;font-size:14.5px;line-height:1.55;text-align:left;color:#0F1419;overflow-wrap:anywhere}
.bub time{margin-top:4px;font-size:12px;color:#8293A8}
.bub.me{align-items:flex-end;margin-left:auto}
.bub.me p{border-color:#1F6FD6;border-radius:14px 14px 4px 14px;background:#1F6FD6;color:#fff}
.mreply{display:flex;flex:none;flex-wrap:wrap;align-items:flex-end;padding:14px 16px;border-top:1px solid #EDF1F5}
.mreply .alert{flex:0 0 100%;margin:0 0 10px}
.mreply .btn{margin-left:10px}
.mreply textarea{flex:1;width:auto;height:44px;min-height:44px;max-height:160px;resize:none}
.mclosed{display:flex;flex:none;align-items:center;margin:0;padding:16px 20px;border-top:1px solid #EDF1F5;font-size:14px;color:#5B6B7F}
.mclosed i{margin-right:8px}
.msg p.note.warn{margin:0 0 14px;padding:10px 12px;font-size:13.5px}
.msg .note i{margin:1px 8px 0 0;font-size:16px}
.msg .alert a{font-weight:600}

/* ---------- Search (sys/search, ai/arama.md): the suggestions under the top search box (.sugg: services, companies, ports, See all results;
   app.js) · the results page's plain title (.shead) with its shortcuts (.qlinks) ---------- */
.search .sugg{top:50px;z-index:60;max-height:calc(100vh - 90px);overflow-y:auto;border-radius:12px;box-shadow:0 12px 32px rgba(11,27,48,.14)} /* on top of the field lists' .sugg (Add company) */
.sugg h6{margin:6px 10px 4px;font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#8293A8}
.sugg a{display:flex;align-items:center;padding:8px 10px;border-radius:8px;font-size:14.5px;color:#0F1419}
.sugg a.on,.sugg a:hover{background:#F3F6FA}
.sugg b{font-weight:600}
.sugg .lg,.sugg .ic{display:flex;flex:none;align-items:center;justify-content:center;width:54px;height:30px;margin-right:12px}
.sugg .lg{padding:2px;border:1px solid #E3E8EF;border-radius:6px;background:#fff;overflow:hidden;font-size:15px;color:#C3CDD9}
.sugg .lg img{width:100%;height:100%;object-fit:contain}
.sugg .ic{font-size:18px;color:#1F6FD6}
.sugg .nm{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.sugg a small{flex:none;max-width:45%;margin-left:12px;overflow:hidden;font-size:13px;white-space:nowrap;text-overflow:ellipsis;color:#6B7B90}
.sugg small .flag{margin-right:6px}
.sugg .all{margin-top:4px;border-top:1px solid #EDF1F5;border-radius:0 0 8px 8px;font-weight:600;color:#1F6FD6}
.sugg .all > i{margin-left:12px;font-size:18px}
.shead{margin:6px 0 20px}
.shead .qlinks{margin-bottom:-8px}
.shead h1{font-size:24px;line-height:1.25;overflow-wrap:anywhere}
.shead p{margin-top:4px;font-size:15px;color:#5B6B7F}
.qlinks{display:flex;flex-wrap:wrap;margin-top:14px}
.qlinks a{display:inline-flex;align-items:center;min-height:36px;margin:0 8px 8px 0;padding:6px 14px;border:1px solid #D5DDE7;border-radius:18px;background:#fff;font-size:14px;font-weight:500;color:#0F1419}
.qlinks a:hover{border-color:#9DB4D0}
.qlinks a i{margin-right:8px;font-size:16px;color:#1F6FD6}

/* ---------- Empty state: <div class="empty"><i class="i-search"></i><h2>…</h2><p>…</p> buttons</div>: an empty list (h2); an empty page always as
   <section class="box"><div class="empty">… (one pattern, h3: My Company, Following, Messages, Billing, a port with no companies, 404) ---------- */
.empty{padding:48px 20px;text-align:center}
.box .empty{padding:20px 0} /* as much space under the text or button as above the icon */
.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:#EEF4FD;font-size:28px;line-height:64px;color:#1F6FD6}
.empty p{margin:0;font-size:15px;color:#5B6B7F}
.empty p:last-child{margin-bottom:-3px} /* the line's room under the letters */
.empty .btn{margin:20px 4px 0}

/* ---------- Pages ---------- */
.pages{padding:24px 20px 32px;text-align:center}
.pages a{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;margin:2px;padding:0 6px;border:1px solid #E3E8EF;border-radius:20px;background:#fff;font-size:14px;color:#33445A;vertical-align:middle}
.pages i{font-size:18px}
.pages a:hover{border-color:#9DB4D0}
.pages a[aria-current]{border-color:#1F6FD6;background:#1F6FD6;color:#fff}

/* ---------- Tooltip: <span data-tip="Within 50 km"> shows the text above it on hover / focus (add tabindex="0" for keyboard and touch); not used on a page yet ---------- */
[data-tip]{position:relative;outline:0}
[data-tip]:after{content:attr(data-tip);display:none;position:absolute;left:50%;bottom:100%;z-index:10;margin-bottom:8px;padding:6px 10px;border-radius:7px;background:#0B1B30;box-shadow:0 6px 18px rgba(11,27,48,.18);font:500 12.5px/1.3 "IBM Plex Sans",sans-serif;letter-spacing:0;text-transform:none;color:#fff;white-space:nowrap;transform:translateX(-50%);pointer-events:none}
[data-tip]:hover:after,[data-tip]:focus:after{display:block}
[data-tip]:focus-visible{border-radius:4px;box-shadow:0 0 0 3px rgba(31,111,214,.25)}

/* ---------- Badge ---------- */
.badge{display:inline-block;padding:3px 10px;border-radius:999px;background:#F1F4F8;font-size:12.5px;font-weight:600;line-height:18px;color:#33445A;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:#EEF4FD;color:#1F6FD6}

/* ---------- Table (app.js copies the header into data-label for phones) ---------- */
.table{width:100%;border-collapse:collapse;font-size:14.5px}
.table th{padding:10px 16px;border-bottom:1px solid #E3E8EF;text-align:left;font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#5B6B7F;white-space:nowrap}
.table td{padding:14px 16px;border-bottom:1px solid #EDF1F5;vertical-align:middle}
.table tbody tr:last-child td{border-bottom:0}
.table td small{display:block;margin-top:2px;font-size:13px;color:#5B6B7F}
.table .end{text-align:right;white-space:nowrap}
.bills td:nth-child(n+2){white-space:nowrap}

/* ---------- Responsive ---------- */
/* ---------- Info pages (sys/info: about, pricing, contact, privacy, terms; ai/sayfalar.md): laid out as My Company (the title with its icon on
   the page, at most 960). A long text (.doc, Terms and Privacy): the date over it (p.upd), its parts listed on the right (.toc, stays in view; not on phones) */
.doc{display:flex;align-items:flex-start;padding:36px 40px 40px}
.doc article{flex:1;min-width:0;max-width:760px}
.doc article h2{margin:36px 0 12px;font-size:20px;line-height:1.3;scroll-margin-top:24px}
.doc article h2:first-child{margin-top:0}
.box.doc p,.doc li,.doc td,.doc th{margin-bottom:14px;font-size:15.5px;line-height:1.7;color:#33445A}
.doc ul{margin:0 0 14px;padding-left:20px;list-style:disc}
.doc li{margin-bottom:6px}
.doc li::marker{color:#8A97A8}
.doc b,.doc th{font-weight:600;color:#0B1B30}
.doc table{width:100%;margin:4px 0 14px;border-collapse:collapse}
.doc th,.doc td{margin:0;padding:12px 0;border-top:1px solid #EDF1F5;text-align:left;vertical-align:top}
.doc th{width:140px;padding-right:20px}
.toc{position:sticky;top:24px;order:2;flex:none;width:200px;margin-left:40px}
.toc b{display:block;margin-bottom:10px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#8A97A8}
.toc a{display:block;padding:5px 0 5px 14px;border-left:2px solid #E3E8EF;font-size:14px;line-height:1.4;color:#5B6B7F}
.toc a:hover{border-color:#1F6FD6;color:#1F6FD6}
.box.doc p.more{display:flex;flex-wrap:wrap;margin:-8px 0 14px}
.box.doc p.more a{margin:6px 28px 0 0} /* the space between the rows above each: the margin below stays the paragraph's (it meets the next one's) */
.box.doc p.upd{margin:0 0 20px;font-size:13.5px;color:#8A97A8}
.box.doc p.src{margin:32px 0 0;font-size:13.5px;color:#8A97A8}
.src a{color:inherit;text-decoration:underline}
.price .incl{margin-bottom:20px}
.foot2 span i{margin-right:6px}
.contact form .btn{margin-top:4px}
.contact aside h3{margin-bottom:20px;text-align:left}
.cinfo li{display:flex;margin-bottom:16px;font-size:15px;line-height:1.55;color:#33445A}
.cinfo i{flex:none;width:20px;margin:2px 14px 0 0;font-size:18px;color:#1F6FD6}

@media (max-width:1660px){ /* the home page's top: the box beside the search (.join) only from 1661 px, where both fit side by side (the user's
  choice; the top bar's + Add your company and the section further down stay); the rest centred (phones: left, the 600 px block) */
  .join{display:none}
  .pitch{text-align:center}
  .pitch h1,.pitch > p{margin-left:auto;margin-right:auto}
  .pitch .p_search{text-align:left}
}
@media (max-width:1460px){
  .pg-top h1{font-size:26px}
  .pitch h1{font-size:36px}
  .p_search > ul > li{width:190px}
}
@media (max-height:759px){
  .cp > aside{position:static}
}
@media (max-width:1320px){
  .pg-top > form{display:block;max-width:780px;margin:0 auto}
  .p_search > ul > li{flex:1;width:auto}
  .profile .head > img,.profile .head > b{width:144px;height:80px;margin-right:24px;padding:8px 12px;font-size:28px;line-height:64px}
  .profile .acts{width:150px;margin-left:24px}
  .cp{display:block}
  .cp > aside{position:static;width:auto;margin:0}
  .hero{display:block;padding:40px}
  .pitch .p_search{display:block;max-width:760px;margin:0 auto}
  .finder{padding:40px}
  .findinfo{margin-right:40px}
  .finder h2{font-size:26px}
  .how > div{padding:32px}
  .au-l nav a:not(.btn){display:none}
}
@media (max-width:1023px){
  .menu-btn{display:block}
  .top{flex-wrap:wrap;height:auto;padding:0 16px 0 8px}
  .search-btn{display:block} /* the search: a magnifier, its box on a row of its own when tapped (as on phones) */
  .logo{width:auto;padding:0 8px;border:0}
  .ttl{margin-left:16px}
  .search{display:none;order:3;flex:0 0 calc(100% - 8px);max-width:none;margin:0 0 12px 8px}
  .search-open .search{display:block}
  .search .sugg{top:48px;max-height:calc(100vh - 130px)}
  .stepper{width:auto}
  .stepper li{position:relative;flex:none}
  .stepper li:before{margin-right:0}
  .stepper span{display:none}
  .stepper .done a{position:absolute;left:0;top:0;width:28px;height:28px;font-size:0}
  .stepper li:after{flex:none;width:18px;margin:0 6px}
  .side .logo{display:block;margin:-20px -10px 12px;padding:0 20px;border-bottom:1px solid #E3E8EF}
  .side{top:0;z-index:100;transform:translateX(-100%);transition:transform .2s}
  .menu-open{overflow:hidden}
  .menu-open .side{transform:none;box-shadow:0 0 40px rgba(11,27,48,.25)}
  .menu-open:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:90;background:rgba(11,27,48,.45)}
  .main{margin-left:0;padding:16px}
  .mapbox{height:calc(100vh - 105px);height:calc(100dvh - 105px)}
  .findinfo{margin-right:32px}
  .finder > .radar{flex-basis:250px}
  .foot{margin-left:0;padding:20px 16px}
  .doc{display:block;padding:24px 20px 28px}
  .webrow{display:block}
  .whynote{margin-bottom:20px}
  .toc{display:none}
  .au-l,.au-r{padding:24px 28px}
  .au-l > svg{right:-260px;width:600px;height:600px;margin-top:-300px}
  .au-l h2{font-size:32px}
}
@media (max-width:767px){
  .top{padding:0 12px 0 4px}
  .top > .logo{display:none}
  input[type=text],input[type=search],input[type=email],input[type=password],input[type=url],select,textarea,.dd > div input[type=text],.search input[type=search],.find input[type=search],.pf input[type=search],.added select,.msearch input[type=search]{font-size:16px} /* iPhone: Safari zooms in on a field under 16px */
  .account{height:60px}
  .logo{line-height:60px}
  .sugg a small{max-width:40%}
  .account a{padding:0 8px;font-size:14.5px}
  .account .btn{height:36px;padding:0 12px}
  .ttl{margin-left:4px}
  .ttl h1{font-size:18px}
  .au{display:block}
  .au-l,.au-r{width:auto}
  .au-l{padding:14px 16px}
  .au-l > svg,.au-l .say{display:none}
  .au-l nav a.btn{height:36px;margin-left:0;padding:0 14px}
  .au-r{padding:28px 16px 20px}
  .au-r .in{margin:0 auto 32px}
  .foot{display:block;text-align:center}
  .foot nav{margin-top:6px;line-height:2}
  .foot a{margin:0 8px}
  .list article{min-height:80px;padding:16px 16px 10px 116px}
  .list article > img,.list article:before,.co > img,.co:before{left:16px;top:16px;width:84px;height:48px}
  .list article:before,.co:before{font-size:20px;line-height:46px}
  .list h2{font-size:16px}
  .list p .km{display:block;margin:3px 0 0}
  .list.fol article{padding-right:16px}
  .mbox{display:block;height:auto;min-height:0}
  .mbox.open{display:flex;height:calc(100vh - 92px);height:calc(100dvh - 92px);min-height:420px}
  .mbox.open .mside,.mbox:not(.open) .mconv{display:none}
  .mbox.open .mconv{flex:1}
  .mside{border:0}
  .mrow.on{background:none}
  .mback{display:flex;flex:none;align-items:center;justify-content:center;width:36px;height:36px;margin:0 10px 0 -10px;font-size:22px;color:#33445A}
  .mhead{padding:12px 16px}
  .mhead .av{margin-right:10px}
  .mbody{padding:16px}
  .bub{max-width:88%}
  .mreply{padding:12px}
  .list.fol article > .btn{position:relative;top:auto;right:auto;margin:8px 0 6px;transform:none}
  .profile{padding:22px 18px}
  .profile .head{display:block}
  .profile .head > img,.profile .head > b{display:block;margin:0 0 16px}
  .profile h1{font-size:22px}
  .profile .acts{width:auto;margin:18px 0 0}
  .profile .info h1 i{font-size:18px}
  .stats{flex-wrap:wrap;margin:20px -18px -22px}
  .stats div{flex:none;width:50%;padding:12px 18px}
  .stats div:nth-child(odd){border-left:0}
  .stats div:nth-child(n+3){border-top:1px solid rgba(255,255,255,.1)}
  .stats dd{font-size:17px}
  .mapbox{height:calc(100vh - 92px);height:calc(100dvh - 92px);border-radius:12px} /* the visible screen: the zoom and location buttons not under the browser's bar */
  .hero,.finder{margin-bottom:32px;padding:30px 22px}
  .pitch h1{font-size:30px}
  .pitch > p{font-size:15.5px}
  .part{margin-bottom:36px}
  .part-head h2,.part .big{font-size:22px}
  .finder{display:block}
  .findinfo{max-width:none;margin:0 0 30px}
  .radar{max-width:300px;margin:0 auto}
  .how{display:block;margin:0}
  .how > div{margin:0 0 16px;padding:28px 22px}
  .maphead{left:10px;top:10px;padding:10px 14px}
  .maphead h1{font-size:16px}
  .maphead > a{right:14px;top:12px}
  .maphead form{margin-top:10px}
  .cp .box{scroll-margin-top:80px}
  .offices li{width:calc(50% - 10px)}
  .spec{display:block}
  .spec h3{width:auto;margin-bottom:14px;padding:0}
  .spec h3 small{display:inline;margin-left:8px}
  .country{display:block}
  .country > b{display:block;width:auto;margin-bottom:8px;padding:0}
  .code{padding:16px}
  .code input[type=text]{width:130px}
  .dup{flex-wrap:wrap}
  .ver > span{flex-wrap:wrap;flex-basis:100%;margin:0 0 8px}
  .ver em{flex-basis:100%;margin:6px 0 0 26px} /* Verified under the email, in line with it */
  .ver .link{margin-left:0}
  .dup .btn{margin:10px 0 0 32px}
  .claimc > img,.claimc > i{width:96px;height:53px;margin-right:12px}
  .idn{display:block}
  .idn > .field{margin:0 0 16px}
  .box .logo-up p{flex-basis:100%;margin:8px 0 0}
  .pickmap{height:260px}
  .plans{display:block;margin:4px 0 20px}
  .plans > *{margin:0}
  .plans > * + *{margin-top:20px}
  .incl li{width:100%}
  .svcs.who i{display:none}
  .box.two{display:block}
  .two > :first-child{padding:20px 20px 24px}
  .two > aside{padding:28px 0 0}
  .two .tabs{margin:-20px -20px 20px;padding:0 12px}
  .co{min-height:48px;padding-left:100px}
  .pend{flex-wrap:wrap}
  .pend > div{flex-basis:calc(100% - 44px)}
  .pend form{margin:12px 0 0 32px}
  .co h2{margin-top:0;font-size:17px}
  .foot2 .del{order:3;flex:1 0 100%;margin:14px 0 0}
  .foot2 .del + .btn{margin-left:0}
  .added li{flex-wrap:wrap;padding:8px 4px 8px 12px}
  .added .x{order:1;margin-left:auto}
  .added .check,.added select{order:2;flex:0 0 100%;margin:6px 0 2px}
  .added .check{padding-left:26px}
  .foot2{flex-wrap:wrap}
  .foot2 span{flex:1 0 100%;margin:0 0 12px}
  .foot2 .btn{flex:1}
  .foot2 .btn + .btn{margin-left:8px}
}
@media (max-width:600px){
  .top{padding:0 8px 0 0}
  .pg-top{padding:24px 18px 18px}
  .pg-top h1{font-size:24px}
  .pg-top p{font-size:15px}
  .p_search > ul{flex-wrap:wrap}
  .p_search > ul > li,.p_search > ul > li.end{flex:none;width:100%;margin:0}
  .p_search > ul > li + li:not(.end):before{left:12px;right:12px;top:0;bottom:auto;width:auto;height:1px}
  .p_search > ul > li.end{margin-top:5px}
  .p_search .btn{width:100%}
  .p_search .dd > div{min-width:0}
  .list ul{display:none}
  .pages{padding:20px 4px 24px}
  .pages a{min-width:36px;height:36px}
  .table thead{display:none}
  .table tr{display:block;padding:10px 0;border-bottom:1px solid #EDF1F5}
  .table tbody tr:last-child{border-bottom:0}
  .table td{display:block;display:grid;grid-template-columns:auto 1fr;align-items:center;justify-items:end;padding:6px 0;border:0;text-align:right}
  .table td small{grid-column:2}
  .table td:before{content:attr(data-label);margin-right:16px;font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#5B6B7F;text-align:left}
  .btns .btn{flex:1}
  .cats li{width:100%}
  .find{position:relative;top:auto;right:auto;width:auto;margin-bottom:16px}
  .ports .table td{display:flex;align-items:center;justify-content:flex-end}
  .ports .table td:before{margin-right:auto}
  .ports .table td:first-child{display:block;justify-items:start;padding-bottom:8px;text-align:left}
  .ports .table td:first-child:before{display:none}
  .ports .table td small{margin-top:2px}
  .brands li{width:50%}
  .branches > li > i{display:none}
  .maphead{right:10px}
  .pitch{text-align:left}
  .finder form{display:block}
  .finder form .btn{width:100%;margin:8px 0 0}
  .maphead form{width:auto}
  .maphead .ico > i{display:none}
  .maphead .ico .dd > button{padding-left:12px}
}
@media (max-width:420px){
  .search-btn{width:36px}
  .account a{padding:0 5px;font-size:13.5px}
  .account .btn{margin-left:5px;padding:0 10px}
  .box > h2 small{display:none}
  .offices li{width:calc(100% - 10px)}
  .maphead{padding:10px 12px}
  .maphead .ico + .ico{margin-left:6px}
  .maphead .ico .dd > button{padding:0 26px 0 10px;font-size:14px}
  .maphead .dd > button:after{right:8px}
}
@media (max-width:360px){
  .menu-btn{width:42px}
  .search-btn{width:34px}
  .top{padding-right:4px}
  .finder{padding:26px 18px}
  .account a{padding:0 4px;font-size:13px}
  .account .btn{margin-left:4px;padding:0 8px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .radar .sweep{animation:none}
}

/* A busy button (app.js busy()) shows only its spinner: its text and icon go. Last in the file, so it wins over every button's own colour
   (.btn.red, the dialogs', the bars') */
.btn.busy,.btn.busy:hover{color:transparent}