/* =====================================================
   Service Documents – Area 2 (with .ser_doc_group)
===================================================== */

body.mt.login.service #area-2,
body.mt.service-doc.service #area-2{
  display:block !important;
  background:var(--clr-primary-light,#F2F2F2) !important;
  padding:3rem 0 !important;
}

body.mt.login.service #content ,
body.mt.service-doc.service #content {
    padding-bottom: 5rem !important;
}



body.mt.login.service #area-2 .ser_doc_group,
body.mt.service-doc.service #area-2 .ser_doc_group{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:20px !important; 
}

body.mt.service-doc.service #area-2 .ser_doc_group #filter-element,
body.mt.service-doc.service #area-2 .ser_doc_group .filter_display{
  width:100% !important;
  display:flex !important;
  /* justify-content:center !important; */
}

body.mt.login.service #area-2 .ser_doc_group #filter-element,
body.mt.login.service #area-2 .ser_doc_group .filter_display{
  width:100% !important;
  display:none !important;
  /* justify-content:center !important; */
}


/* cards list item */
body.mt.login.service #area-2 .ser_doc_group .collection_list.col-ser-doc,
body.mt.service-doc.service #area-2 .ser_doc_group .collection_list.col-ser-doc{
  width:calc(50% - 12px) !important;
  padding:0 !important;
  margin:0 !important;
  display:flex !important;
}

@media (max-width:1200px){
  body.mt.login.service #area-2 .ser_doc_group .collection_list.col-ser-doc,
  body.mt.service-doc.service #area-2 .ser_doc_group .collection_list.col-ser-doc{
    width:100% !important;
  }
}

@media (max-width:900px){
  body.mt.login.service #area-2 .ser_doc_group,
  body.mt.service-doc.service #area-2 .ser_doc_group{
    gap:20px !important;
  }
}

/* card */
body.mt.login.service #area-2 .ser_doc_group .collection_container,
body.mt.service-doc.service #area-2 .ser_doc_group .collection_container{
  background:#fff !important;
  border-radius:var(--br-keyfact) !important;
  box-shadow:0 10px 22px rgb(0 0 0 / 8%) !important;
  padding:26px !important;
  width:100% !important;
  min-height:120px !important;
  box-sizing:border-box !important;
  transition:transform .2s ease, box-shadow .2s ease !important;

  display:grid !important;
  grid-template-columns:1fr auto !important;
  grid-template-areas:
    "number number"
    "title  title"
    "bar    bar"
    "date   file" !important;
  column-gap:10px !important;
  row-gap:10px !important;
  align-items:center !important;
}

body.mt.login.service #area-2 .ser_doc_group .collection_container:hover,
body.mt.service-doc.service #area-2 .ser_doc_group .collection_container:hover{
  transform:translateY(-2px) !important;
  box-shadow:0 14px 28px rgb(0 0 0 / 12%) !important;
}

/* document number (sits next to the title, separated by a divider) */
body.mt.login.service #area-2 .ser_doc_group .col_ser_doc_number,
body.mt.service-doc.service #area-2 .ser_doc_group .col_ser_doc_number{
  grid-area:number !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-self:start !important;
  width:fit-content !important;

  font-size: var(--fs-14) !important;
  font-weight:600 !important;
  color:var(--clr-accent,#339933) !important;
  background: color-mix(in srgb, var(--clr-accent, #339933) 10%, transparent) !important;
  border:1px solid var(--clr-accent,#339933) !important;
  border-radius:6px !important;
  padding:2px 12px !important;
  margin:0 !important;
}

/* vertical divider between number and title */
body.mt.login.service #area-2 .ser_doc_group .col_ser_doc_number::after,
body.mt.service-doc.service #area-2 .ser_doc_group .col_ser_doc_number::after{
  content:none !important;
  display:none !important;
}

body.mt.login.service #area-2 .ser_doc_group .col_ser_doc_number:empty,
body.mt.service-doc.service #area-2 .ser_doc_group .col_ser_doc_number:empty{
  display:none !important;
}

/* title */
body.mt.login.service #area-2 .ser_doc_group .col-ser-doc-title,
body.mt.service-doc.service #area-2 .ser_doc_group .col-ser-doc-title{
  grid-area:title !important;
  max-width: 80%;
  font-size: var(--fs-18) !important;
  font-weight:700 !important;
  color:#222 !important;
  margin:0 !important;
}

/* safety: nuke any leftover/legacy bar that used to live on the title itself,
   in case an older version of this rule is still cached/present */
body.mt.login.service #area-2 .ser_doc_group .col-ser-doc-title::after,
body.mt.service-doc.service #area-2 .ser_doc_group .col-ser-doc-title::after{
  content:none !important;
  display:none !important;
}

/* accent bar under the number/title row — anchored to the card, always starts at the left edge */
body.mt.login.service #area-2 .ser_doc_group .collection_container::after,
body.mt.service-doc.service #area-2 .ser_doc_group .collection_container::after{
  content:"" !important;
  grid-area:bar !important;
  display:block !important;
  justify-self:start !important;
  width:60px !important;
  height:3px !important;
  background:var(--clr-accent,#339933) !important;
  border-radius:999px !important;
}

/* date */
body.mt.login.service #area-2 .ser_doc_group .col-ser-doc-date,
body.mt.service-doc.service #area-2 .ser_doc_group .col-ser-doc-date{
  grid-area:date !important;

  font-size: var(--fs-14) !important;
  color:#7a7a7a !important;
  margin:0 !important;
  line-height: var(--lh-1-3) !important;
}

body.mt.login.service #area-2 .ser_doc_group .col-ser-doc-date::before,
body.mt.service-doc.service #area-2 .ser_doc_group .col-ser-doc-date::before{
  content:"Date of Revision: " !important;
  color:#7a7a7a !important;
}

/* download cell */
body.mt.login.service #area-2 .ser_doc_group .col-ser-doc-file,
body.mt.service-doc.service #area-2 .ser_doc_group .col-ser-doc-file{
  grid-area:file !important;

  margin:0 !important;
  justify-self:end !important;
  align-self:center !important;
  display:flex !important;
  align-items:center !important;
}

/* Download link */
body.mt.login.service #area-2
.ser_doc_group
.col-ser-doc-file
.filegallery_content_file > a[href],
body.mt.service-doc.service #area-2
.ser_doc_group
.col-ser-doc-file
.filegallery_content_file > a[href] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;

    text-decoration: none !important;
    color: var(--clr-accent, #339933) !important;

    font-size: 0 !important;
    line-height: 0 !important;

    padding: 0 !important;
    margin: 0 !important;
}

/* Download text */
body.mt.login.service #area-2
.ser_doc_group
.col-ser-doc-file
.filegallery_content_file > a[href]::before,
body.mt.service-doc.service #area-2
.ser_doc_group
.col-ser-doc-file
.filegallery_content_file > a[href]::before {
    content: "Download" !important;

    font-size: var(--fs-14) !important;
    line-height: var(--lh-1) !important;
    font-weight: 500 !important;

    color: var(--clr-accent, #339933) !important;
}

/* Download icon */
body.mt.login.service #area-2
.ser_doc_group
.col-ser-doc-file
.filegallery_content_file > a[href] svg,
body.mt.service-doc.service #area-2
.ser_doc_group
.col-ser-doc-file
.filegallery_content_file > a[href] svg {
    display: inline-block !important;

    width: 15px !important;
    height: 15px !important;

    flex-shrink: 0 !important;
}

/* Download icon color */
body.mt.login.service #area-2
.ser_doc_group
.col-ser-doc-file
.filegallery_content_file > a[href] svg path,
body.mt.service-doc.service #area-2
.ser_doc_group
.col-ser-doc-file
.filegallery_content_file > a[href] svg path {
    fill: var(--clr-accent, #339933) !important;
}

/* hide "Learn more" */
body.mt.login.service #area-2 .ser_doc_group .collection_link,
body.mt.service-doc.service #area-2 .ser_doc_group .collection_link{
  display:none !important;
}

/* responsive */
@media (max-width:1050px){
  body.mt.login.service #area-2 .ser_doc_group,
  body.mt.service-doc.service #area-2 .ser_doc_group{
    gap:20px !important;
  }

  body.mt.login.service #area-2 .ser_doc_group .collection_container,
  body.mt.service-doc.service #area-2 .ser_doc_group .collection_container{
    padding:22px !important;
    row-gap:12px !important;
  }
}

@media (max-width:520px){
  body.mt.login.service #area-2 .ser_doc_group .collection_container,
  body.mt.service-doc.service #area-2 .ser_doc_group .collection_container{
    padding:20px !important;
    grid-template-columns:1fr !important;
    grid-template-areas:
      "number"
      "title"
      "bar"
      "date"
      "file" !important;
    row-gap:10px !important;
  }

  body.mt.login.service #area-2 .ser_doc_group .col-ser-doc-file,
  body.mt.service-doc.service #area-2 .ser_doc_group .col-ser-doc-file{
    justify-self:start !important;
  }
}






/* Area 3 – remove paddings */
body.mt.service-doc.service #area-3{
  padding:0 !important;
  position:relative !important;
  background:none !important;
}

/* split background: top grey / bottom white */
body.mt.service-doc.service #area-3::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:
    linear-gradient(
      to bottom,
      var(--clr-primary-light,#F2F2F2) 0%,
      var(--clr-primary-light,#F2F2F2) 50%,
      #ffffff 50%,
      #ffffff 100%
    ) !important;
  z-index:0 !important;
}

/* keep banner above background */
body.mt.service-doc.service #area-3 .banner-left{
  position:relative !important;
  z-index:1 !important;
}

/* optional: remove container spacing influence */
body.mt.service-doc.service #area-3 .container{
  padding:0 !important;
  margin:0 auto !important;
}



/* Area 4 – white background */
body.mt.service-doc.service #area-4{
  background:#ffffff !important;
}

/* optional: keep spacing clean */
body.mt.service-doc.service #area-4 .container{
  background:transparent !important;
}



/* Area 5 – grey background */
body.mt.service-doc.service #area-5{
  background:var(--clr-primary-light,#F2F2F2) !important;
}

body.mt.service-doc.service #area-5 .container{
  background:transparent !important;
}


/* === FILTER FIX: force hide === */
body.mt.service-doc.service 
#area-2 
.ser_doc_group 
.collection_list.hide{
  display:none !important;
}