:root{--navy:#233365;--navy2:#314577;--teal:#cf2336;--mint:#fff0f2;--bg:#f4f6fb;--card:#fff;--border:#dce2ed;--muted:#67718a;--text:#263552;--danger:#b51d2d;--shadow:0 12px 34px rgba(35,51,101,.065);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text)}*{box-sizing:border-box}body{margin:0;background:var(--bg);font-size:14px}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.55;cursor:not-allowed}.loading{padding:35vh 10%;text-align:center;color:var(--muted)}.login-wrap{display:grid;grid-template-columns:minmax(280px, .85fr) minmax(380px, 1fr);min-height:100vh}.login-art{background:linear-gradient(148deg,#102d3a,#215668);padding:8vw 6vw;color:#fff;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}.login-art::after{content:"";position:absolute;bottom:-20%;right:-35%;width:90%;aspect-ratio:1;border:90px solid rgba(110,215,195,.13);border-radius:50%}.logo{font-size:20px;font-weight:850;letter-spacing:.19em}.logo span{color:#4bd1bf}.login-art h1{font-size:clamp(34px,4vw,61px);line-height:1.06;letter-spacing:-.04em;max-width:550px;margin:0}.login-art p{max-width:410px;line-height:1.7;color:#c7dbdf}.art-footer{color:#acc5c8;font-size:12px}.login-panel{display:grid;place-items:center;padding:40px 20px}.login-card{background:white;border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);padding:35px;max-width:520px;width:100%}.eyebrow{text-transform:uppercase;letter-spacing:.14em;color:var(--teal);font-size:11px;font-weight:800}.login-card h2{font-size:28px;letter-spacing:-.035em;margin:8px 0}.login-card>p{color:var(--muted);margin:0 0 24px}.field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.field-grid .wide,.wide{grid-column:1/-1}.control{display:flex;flex-direction:column;gap:6px;min-width:0}.control>label{color:#415966;font-size:12px;font-weight:700}.control input,.control select,.control textarea,.search{min-height:41px;width:100%;border:1px solid #cddbdd;border-radius:8px;background:#fff;color:var(--text);padding:9px 11px;outline:none}.control textarea{min-height:88px;resize:vertical}.control input:focus,.control select:focus,.control textarea:focus,.search:focus{border-color:#26a99c;box-shadow:0 0 0 3px #0a948c1e}.control input[readonly]{background:#f3f8f8;font-weight:750;color:#0c716a}.hint{font-size:11px;color:var(--muted)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:8px;min-height:39px;padding:8px 15px;font-weight:750;border:1px solid var(--border);background:#fff;color:var(--text)}.btn.primary{border-color:var(--teal);background:var(--teal);color:white}.btn.primary:hover{background:#087c76}.btn.secondary{background:#eff7f5;border-color:#beddd7;color:#087c76}.btn.danger{color:var(--danger)}.btn.mini{min-height:29px;padding:5px 9px;font-size:12px}.login-card .btn.primary{width:100%;margin-top:18px}.layout{display:grid;grid-template-columns:242px minmax(0,1fr);min-height:100vh}.sidebar{background:var(--navy);color:white;display:flex;flex-direction:column;padding:27px 14px;position:sticky;top:0;height:100vh}.sidebar .logo{padding:0 12px 28px}.nav-title{font-size:10px;color:#84a7b1;font-weight:800;letter-spacing:.16em;margin:20px 12px 10px;text-transform:uppercase}.nav-btn{width:100%;border:0;background:transparent;text-align:left;color:#d2e1e5;border-radius:8px;padding:11px 12px;font-weight:600}.nav-btn:hover,.nav-btn.active{background:#244a56;color:white}.sidebar-bottom{margin-top:auto;border-top:1px solid #345360;padding:15px 10px 0}.sidebar-bottom small{display:block;color:#9cb8c0;margin:5px 0 11px}.sidebar-bottom .btn{width:100%;background:#254653;color:white;border:1px solid #41616e}.content-wrap{min-width:0}.topbar{height:69px;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 31px}.topbar .crumb{font-size:12px;color:var(--muted)}.topbar .session{display:flex;align-items:center;gap:11px;font-size:12px;color:var(--muted)}.topbar strong{color:var(--text)}.main{max-width:1430px;margin:auto;padding:31px}.heading{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;margin-bottom:23px;flex-wrap:wrap}.heading h1{font-size:28px;letter-spacing:-.035em;margin:5px 0}.heading p{color:var(--muted);margin:5px 0 0}.actions{display:flex;gap:8px;flex-wrap:wrap}.panel{background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);margin-bottom:18px;overflow:hidden}.panel-head{padding:17px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:10px}.panel-head h2{font-size:15px;margin:0;letter-spacing:-.01em}.panel-body{padding:20px}.panel .field-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.panel .field-grid.cols2{grid-template-columns:repeat(2,minmax(0,1fr))}.section-label{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#0a7774;margin:0 0 16px}.toolbar{display:flex;gap:12px;padding:18px 20px;align-items:center}.toolbar .search{max-width:410px}.table-scroll{overflow:auto}table{width:100%;border-collapse:collapse;text-align:left}th{background:#f5f9f8;color:#516b76;font-size:11px;text-transform:uppercase;letter-spacing:.06em}th,td{padding:13px 16px;border-bottom:1px solid #e8eded;white-space:nowrap}td.wrap{white-space:normal;min-width:250px}tbody tr:hover{background:#f9fcfb}.tag{border-radius:100px;background:#e3f6f0;color:#097369;font-size:11px;padding:4px 9px;font-weight:750}.empty{padding:32px;color:var(--muted);text-align:center}.form-actions{display:flex;justify-content:flex-end;gap:10px;padding:20px;border-top:1px solid var(--border);background:#fcfdfd}.notice{background:#e5f7f2;border:1px solid #c1e8dc;color:#126c67;padding:12px 15px;border-radius:9px;margin-bottom:20px}.two-panel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.inline-check{display:flex;gap:8px;align-items:center;color:#38535c}.inline-check input{accent-color:var(--teal);width:16px;height:16px}.check-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.form-title{color:#0b6c69;font-size:12px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;margin:8px 0 16px}.metric{display:flex;flex-direction:column;gap:5px;padding:14px 18px;background:#eaf7f4;border-radius:9px}.metric strong{font-size:21px}.metric span{color:#50757a;font-size:12px}#toast{position:fixed;right:20px;bottom:20px;z-index:9;max-width:430px;background:#153b43;color:#fff;border-radius:9px;padding:14px 19px;box-shadow:0 12px 35px #0002;display:none}#toast.error{background:#9b3933}.modal-backdrop{position:fixed;inset:0;background:#09243099;display:grid;place-items:center;z-index:5;padding:20px}.modal{width:min(520px,100%);background:#fff;border-radius:14px;padding:25px;box-shadow:0 20px 65px #0016}.modal h2{margin:0 0 8px}.modal p{color:var(--muted)}.modal .actions{justify-content:flex-end;margin-top:22px}.help{color:var(--muted);font-size:12px;margin:10px 0}.sep{border:0;border-top:1px solid var(--border);margin:21px 0}.pill{font-size:11px;color:#376a70;padding:6px 9px;border:1px solid #d8e9e8;border-radius:99px}@media(max-width:1050px){.layout{grid-template-columns:190px minmax(0,1fr)}.main{padding:22px}.panel .field-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.check-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.topbar{padding:0 20px}}@media(max-width:680px){.login-wrap{grid-template-columns:1fr}.login-art{display:none}.login-panel{padding:20px 12px;min-height:100vh}.login-card{padding:23px}.layout{display:block}.sidebar{position:relative;height:auto;padding:14px;display:block}.sidebar .logo{padding:0 4px 10px}.sidebar nav{display:flex;gap:5px;overflow-x:auto}.nav-title{display:none}.nav-btn{white-space:nowrap;padding:9px 11px;width:auto}.sidebar-bottom{display:none}.topbar{height:auto;min-height:64px;padding:10px 13px}.topbar .session{flex-wrap:wrap;justify-content:flex-end}.main{padding:15px}.heading h1{font-size:23px}.panel .field-grid,.panel .field-grid.cols2,.two-panel{grid-template-columns:1fr}.field-grid{grid-template-columns:1fr}.check-grid{grid-template-columns:1fr 1fr}.toolbar{flex-wrap:wrap}.field-grid .wide{grid-column:1}.form-actions{flex-wrap:wrap}}


/* Identidad corporativa BRILOP Forwarding & Logistics.
   Únicamente presentación: la operación, los datos y los documentos no se alteran. */
:root{color-scheme:light;--brand-navy:#233365;--brand-red:#cf2336;--brand-red-dark:#ab1e2d;--brand-navy-light:#314577;--brand-pale:#fff0f2}
body{background:var(--bg)}
/* Logo proporcionado por la empresa, respetando su diseño original. */
.brand-lockup{display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid #e4e9f2;border-radius:12px;padding:9px;width:100%;box-shadow:0 8px 24px rgba(6,18,45,.13)}
.brand-logo{display:block;width:100%;height:auto;object-fit:contain}
.login-art{background:linear-gradient(147deg,#1d2a57 0%,#233365 62%,#3b4c7f 100%)}
.login-art::after{border-color:rgba(231,52,69,.14)}
.login-art .brand-lockup{max-width:255px;padding:13px;align-self:flex-start;position:relative;z-index:1}
.login-art .art-footer{color:#ccd4ec}
.login-art p{color:#d7def1}
.login-art .eyebrow{color:#ffb7c0}
.sidebar{background:linear-gradient(180deg,#233365 0%,#1b274e 100%);border-top:4px solid var(--brand-red)}
.sidebar .brand-lockup{max-width:213px;margin:0 auto 16px;padding:9px;flex-shrink:0}
.nav-title{color:#aebde5}
.nav-btn{color:#e5eaf8;transition:background-color .16s ease}
.nav-btn:hover{background:#344777;color:white}
.nav-btn.active{background:#3b4676;color:white;box-shadow:inset 4px 0 0 var(--brand-red)}
.sidebar-bottom{border-top-color:#4a5784}
.sidebar-bottom small{color:#bec8e2}
.sidebar-bottom .btn{background:#31416f;border-color:#64739d;color:white}
.sidebar-bottom .btn:hover{background:#3e4e81}
.topbar{border-bottom:2px solid #e8ecf5}
.topbar strong,.heading h1,.panel-head h2{color:var(--brand-navy)}
.eyebrow,.form-title,.section-label{color:var(--brand-red)}
.control>label{color:#344361}
.control input,.control select,.control textarea,.search{border-color:#cfd7e5}
.control input:focus,.control select:focus,.control textarea:focus,.search:focus{border-color:var(--brand-red);box-shadow:0 0 0 3px rgba(207,35,54,.13)}
.control input[readonly]{background:#f2f4fa;color:var(--brand-navy)}
.btn.primary{border-color:var(--brand-red);background:var(--brand-red);color:#fff}
.btn.primary:hover{background:var(--brand-red-dark)}
.btn.secondary{background:#fff0f2;border-color:#f3ccd1;color:#a91d30}
.btn.secondary:hover{background:#ffe3e8}
.btn:focus-visible,.nav-btn:focus-visible{outline:3px solid #d92c44;outline-offset:2px}
.panel{border-color:#dbe2ed}
.panel-head{border-bottom-color:#e3e8f1}
th{background:#f1f4fa;color:#485773}
th,td{border-bottom-color:#e8ecf4}
tbody tr:hover{background:#f9f6f8}
.metric{background:#eef1f9}
.metric span{color:#4d5d7d}
.tag{background:#fff0f2;color:#ac1d31}
.notice{background:#fff0f2;border-color:#f4cbd2;color:#8b2534}
.inline-check input{accent-color:var(--brand-red)}
.pill{border-color:#e2e7f2;color:#44567e}
#toast{background:var(--brand-navy)}
#toast.error{background:#a61d2b}
@media(max-width:680px){
 .sidebar .brand-lockup{max-width:118px;margin:0 0 13px 4px;padding:5px}
 .login-art .brand-lockup{max-width:185px}
}

/* ==========================================================
   Selector buscable - Cliente / Proveedor / Consignatario
   ========================================================== */

.role-search-field{
  position:relative;
}

.role-search{
  position:relative;
  width:100%;
}

.role-search-control{
  display:flex;
  align-items:center;
  min-height:44px;
  width:100%;
  background:#fff;
  border:1px solid #cfd8e6;
  border-radius:8px;
  transition:border-color .15s ease, box-shadow .15s ease;
}

.role-search.open .role-search-control,
.role-search-control:focus-within{
  border-color:#263b77;
  box-shadow:0 0 0 3px rgba(38,59,119,.09);
}

.role-search-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 42px;
  color:#63718a;
}

.role-search-icon svg{
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
}

.role-search-input{
  width:100%;
  min-width:0;
  height:42px;
  padding:0 8px 0 0;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  color:#17284b;
  font:inherit;
}

.role-search-input::-webkit-search-cancel-button{
  cursor:pointer;
}

.role-search-toggle{
  width:42px;
  align-self:stretch;
  border:0;
  border-left:1px solid #edf0f5;
  background:transparent;
  color:#34445f;
  font-size:20px;
  cursor:pointer;
}

.role-search-toggle:hover{
  background:#f5f7fb;
}

.role-search-menu{
  position:absolute;
  z-index:1000;
  top:calc(100% + 5px);
  left:0;
  right:0;
  max-height:280px;
  overflow-y:auto;
  background:#fff;
  border:1px solid #d2d9e5;
  border-radius:8px;
  box-shadow:0 12px 30px rgba(22,35,65,.14);
  padding:5px;
}

.role-search-option{
  display:block;
  width:100%;
  padding:10px 12px;
  text-align:left;
  border:0;
  border-radius:6px;
  background:#fff;
  color:#17284b;
  font:inherit;
  cursor:pointer;
}

.role-search-option:hover,
.role-search-option.active{
  background:#eef2fa;
  color:#20366f;
}

.role-search-empty{
  padding:12px;
  color:#68758b;
  font-size:14px;
}



/* === CATALOGO BRILOP V2 === */

.catalog-shell{
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:var(--shadow);
  overflow:hidden;
}

.catalog-tabs{
  display:flex;
  gap:6px;
  padding:14px 18px 0;
  border-bottom:1px solid var(--border);
  background:#fbfcff;
}

.catalog-tab{
  border:0;
  border-bottom:3px solid transparent;
  background:transparent;
  padding:12px 18px;
  font-weight:750;
  color:var(--muted);
  cursor:pointer;
}

.catalog-tab:hover{
  color:var(--navy);
  background:#f4f6fb;
}

.catalog-tab.active{
  color:var(--navy);
  border-bottom-color:var(--teal);
}

.catalog-list-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  padding:24px 24px 18px;
}

.catalog-list-header h2,
.catalog-form-heading h2{
  margin:5px 0 4px;
  font-size:22px;
  color:var(--navy);
}

.catalog-list-header p,
.catalog-form-heading p{
  margin:0;
  color:var(--muted);
}

.catalog-toolbar{
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 24px 20px;
}

.catalog-search-box{
  position:relative;
  flex:1;
  max-width:600px;
}

.catalog-search-box input{
  width:100%;
  min-height:42px;
  padding:9px 12px 9px 42px;
  border:1px solid #cfd7e5;
  border-radius:8px;
  outline:none;
  color:var(--text);
  background:#fff;
}

.catalog-search-box input:focus{
  border-color:var(--teal);
  box-shadow:0 0 0 3px rgba(207,35,54,.10);
}

.catalog-search-icon{
  position:absolute;
  left:13px;
  top:50%;
  transform:translateY(-50%);
  width:18px;
  height:18px;
  color:#69758c;
}

.catalog-search-icon svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
}

.catalog-result-count{
  margin-left:auto;
  color:var(--muted);
  font-size:12px;
}

.catalog-table-wrap{
  overflow:auto;
  border-top:1px solid var(--border);
}

.catalog-table th{
  background:#f6f7fb;
}

.catalog-code{
  color:var(--navy);
}

.catalog-row-actions{
  text-align:right;
}

.catalog-limit-note{
  padding:12px 24px;
  background:#fff8e8;
  border-top:1px solid #f0e2bd;
  color:#786326;
  font-size:12px;
}

.catalog-form-card{
  padding:0;
}

.catalog-form-heading{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:20px;
  padding:24px;
  border-bottom:1px solid var(--border);
}

.catalog-section{
  padding:24px;
  border-bottom:1px solid var(--border);
}

.catalog-section-title{
  margin-bottom:18px;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.09em;
  color:var(--navy);
  font-weight:850;
}

.catalog-form-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:15px 16px;
}

.catalog-control{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.catalog-control label{
  font-size:12px;
  font-weight:750;
  color:#344361;
}

.catalog-control input{
  width:100%;
  min-height:42px;
  border:1px solid #cfd7e5;
  border-radius:8px;
  background:#fff;
  color:var(--text);
  padding:9px 11px;
  outline:none;
}

.catalog-control input:focus{
  border-color:var(--teal);
  box-shadow:0 0 0 3px rgba(207,35,54,.10);
}

.span-2{grid-column:span 2}
.span-3{grid-column:span 3}
.span-4{grid-column:span 4}
.span-6{grid-column:span 6}
.span-8{grid-column:span 8}
.span-9{grid-column:span 9}
.span-12{grid-column:1/-1}

.catalog-checkbox{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:42px;
  font-weight:700;
  color:#344361;
}

.catalog-checkbox input{
  width:17px;
  height:17px;
  accent-color:var(--teal);
}

.catalog-form-actions{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  padding:20px 24px;
  background:#fafbfe;
}

.catalog-form-actions-right{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.catalog-existing{
  margin:20px 24px 0;
  border:1px solid var(--border);
  border-radius:8px;
  background:#f8f9fc;
}

.catalog-existing summary{
  padding:12px 14px;
  cursor:pointer;
  font-weight:700;
  color:var(--navy);
}

.catalog-existing-body{
  padding:0 14px 14px;
}

@media(max-width:900px){
  .catalog-form-grid{
    grid-template-columns:repeat(6,minmax(0,1fr));
  }

  .span-8,
  .span-9,
  .span-12{
    grid-column:1/-1;
  }

  .span-6{
    grid-column:span 6;
  }

  .span-4{
    grid-column:span 3;
  }

  .catalog-list-header,
  .catalog-form-heading{
    align-items:flex-start;
    flex-direction:column;
  }
}

@media(max-width:680px){
  .catalog-form-grid{
    grid-template-columns:1fr;
  }

  .span-2,
  .span-3,
  .span-4,
  .span-6,
  .span-8,
  .span-9,
  .span-12{
    grid-column:1;
  }

  .catalog-tabs{
    overflow-x:auto;
  }

  .catalog-tab{
    white-space:nowrap;
  }

  .catalog-toolbar{
    flex-wrap:wrap;
  }

  .catalog-result-count{
    width:100%;
    margin-left:0;
  }

  .catalog-form-actions{
    flex-direction:column;
    align-items:stretch;
  }

  .catalog-form-actions-right{
    flex-direction:column;
  }
}



/* === TRAFICO FAST V2 === */

.traffic-form{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.traffic-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:var(--shadow);
  overflow:hidden;
}

.traffic-header-card{
  border-top:4px solid var(--navy);
}

.traffic-section-heading{
  min-height:68px;
  padding:16px 20px;
  border-bottom:1px solid var(--border);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  background:#fbfcff;
}

.traffic-section-heading h2{
  margin:3px 0 0;
  color:var(--navy);
  font-size:17px;
}

.traffic-kicker{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.13em;
  font-weight:850;
  color:var(--teal);
}

.traffic-number-badge{
  padding:8px 14px;
  border:1px solid #d7ddea;
  border-radius:7px;
  background:#fff;
  color:var(--navy);
  font-weight:850;
}

.traffic-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:15px;
  padding:20px;
}

.traffic-grid .control{
  height:100%;
}

.traffic-grid textarea{
  min-height:82px;
}

.traffic-span-2{grid-column:span 2}
.traffic-span-3{grid-column:span 3}
.traffic-span-4{grid-column:span 4}
.traffic-span-6{grid-column:span 6}
.traffic-span-12{grid-column:span 12}

.traffic-metric{
  height:100%;
  min-height:67px;
  padding:12px 14px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
  border:1px solid #d9dfeb;
  border-radius:8px;
  background:#f5f7fb;
}

.traffic-metric span{
  font-size:11px;
  color:var(--muted);
  font-weight:700;
}

.traffic-metric strong{
  color:var(--navy);
  font-size:18px;
}

.traffic-packages-btn{
  min-width:150px;
}

.traffic-check-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  padding:20px;
}

.traffic-check{
  min-height:44px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:10px 12px;
  border:1px solid #e0e4ed;
  border-radius:8px;
  background:#fafbfe;
  color:#344361;
  font-weight:650;
}

.traffic-check input{
  width:16px;
  height:16px;
  accent-color:var(--teal);
}

.traffic-actions{
  position:sticky;
  bottom:0;
  z-index:3;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:15px 18px;
  background:rgba(255,255,255,.97);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:0 -8px 30px rgba(35,51,101,.08);
  backdrop-filter:blur(8px);
}

.traffic-actions-left{
  display:flex;
  gap:9px;
  flex-wrap:wrap;
}

.traffic-save{
  min-width:170px;
}

@media(max-width:1050px){

  .traffic-grid{
    grid-template-columns:repeat(6,minmax(0,1fr));
  }

  .traffic-span-2{
    grid-column:span 2;
  }

  .traffic-span-3{
    grid-column:span 3;
  }

  .traffic-span-4,
  .traffic-span-6,
  .traffic-span-12{
    grid-column:span 6;
  }

  .traffic-check-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:680px){

  .traffic-grid{
    grid-template-columns:1fr;
  }

  .traffic-span-2,
  .traffic-span-3,
  .traffic-span-4,
  .traffic-span-6,
  .traffic-span-12{
    grid-column:1;
  }

  .traffic-section-heading{
    align-items:flex-start;
    flex-direction:column;
  }

  .traffic-check-grid{
    grid-template-columns:1fr;
  }

  .traffic-actions{
    position:relative;
    flex-direction:column;
    align-items:stretch;
  }

  .traffic-actions-left{
    flex-direction:column;
  }

  .traffic-save{
    width:100%;
  }
}