/* ==========================================================================
   Ecesis EHS Software — Consolidated Stylesheet (ecesis.css)
   
   This file replaces:
     - /css/styleCustom.css (all styles migrated here)
     - https://www.w3schools.com/w3css/4/w3.css (CDN dependency removed)
     - Per-page inline <style> blocks (as pages are migrated)
   
   Load order: This file loads AFTER style.css.aspx, so it can override
   framework styles. Use !important only when the framework uses it first.
   
   Organization:
     1.  Brand Colors Reference
     2.  W3.CSS Replacements
     3.  Tab System (legacy + new)
     4.  Contact Modal
     5.  Typography & Text
     6.  Layout & Content Area
     7.  Buttons (CTAs)
     8.  Feature Lists & Checkmarks
     9.  Photo Gallery
     10. Forms
     11. Video Player
     12. Cookie Consent
     13. Icons
     14. Skip Link (Accessibility)
     15. Footer
     16. Responsive / Media Queries

   Date: February 2026
   ========================================================================== */


/* ==========================================================================
   1. Brand Colors Reference
   ==========================================================================
   Ecesis Green (primary):  #4b7a05
   Dark text / labels:      #474c58
   Body text:               #4b4b4b
   Heading text:            #151515
   Accent gold:             #c0a184
   Tab inactive grey:       #808080
   Tab active green:        #4b7a05
   Light grey bg:           #f0f0f0
   Form input bg:           #f5f5f5
   Border grey:             #ddd / #ccc
   Footer dark grey:        #58585a
   ========================================================================== */


/* ==========================================================================
   2. W3.CSS Replacements
   ==========================================================================
   Only the W3.CSS classes actually used across the 153 pages.
   Eliminates the external CDN dependency on w3schools.com.
   ========================================================================== */

.w3-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}
.w3-bar::after {
  content: "";
  display: table;
  clear: both;
}

.w3-btn {
  display: inline-block;
  padding: 8px 16px;
  vertical-align: middle;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
  border: none;
  font-size: 14px;
  line-height: 1.5;
}

.w3-container {
  padding: 0.01em 16px;
}

.w3-border {
  border: 1px solid #ccc !important;
}

.w3-text-white {
  color: #fff !important;
}

.w3-padding {
  padding: 8px 16px !important;
}

.w3-transparent {
  background-color: transparent !important;
}

.w3-hover-opacity:hover {
  opacity: 0.6;
}

.w3-display-container {
  position: relative;
}
.w3-display-topright {
  position: absolute;
  right: 0;
  top: 0;
}
.w3-display-bottomleft {
  position: absolute;
  left: 0;
  bottom: 0;
}

.w3-col {
  float: left;
  width: 100%;
}

.w3-button {
  display: inline-block;
  padding: 8px 16px;
  vertical-align: middle;
  text-decoration: none;
  color: inherit;
  background-color: inherit;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
  border: none;
}
.w3-button:hover {
  color: #000 !important;
  background-color: #ccc !important;
}

.w3-row-padding {
  padding: 0 8px;
}

.w3-table-all {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  display: table;
  border: 1px solid #ccc;
}
.w3-table-all td,
.w3-table-all th {
  padding: 8px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #ddd;
}


/* ==========================================================================
   3. Tab System
   ==========================================================================
   Legacy classes (e3-) work with existing 32 pages unchanged.
   New classes (ecesis-tab-) used on migrated pages.
   ========================================================================== */

/* --- Legacy tab classes --- */

.e3-black2, .e3-hover-black:hover {
  color: #000 !important;
  background-color: #fff !important;
}

.e3-button {
  color: #000 !important;
  background-color: #b6b6b6 !important;
}
.e3-button:hover {
  color: #4a4a4b !important;
  background-color: #ccc !important;
}

.e3-red, .w3-hover-red:hover {
  color: #fff !important;
  background-color: #4b7a05 !important;
}

/* Top border on tab panels connects them visually to the tab bar */
.w3-bar + .w3-container.w3-border,
.w3-bar ~ .city.w3-border {
  border-top: 3px solid #4b7a05;
}

/* --- New tab classes (for migrated pages) --- */

.ecesis-tab-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  background-color: #fff;
  gap: 0;
}

.ecesis-tab-btn {
  display: inline-block;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: #000;
  background-color: #808080;
  transition: background-color 0.2s ease;
}
.ecesis-tab-btn:hover {
  background-color: #999;
  color: #000;
}
.ecesis-tab-btn.ecesis-tab-active {
  background-color: #4b7a05;
  color: #fff;
}

.ecesis-tab-panel {
  padding: 16px;
  border: 1px solid #ccc;
  border-top: 3px solid #4b7a05;
}

.ecesis-tab-hidden {
  display: none !important;
}

/* Override framework 36px h3 inside tab panels */
.ecesis-tab-panel h3,
.city h3,
.w3-container.w3-border h3 {
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
}


/* ==========================================================================
   4. Contact Modal
   ==========================================================================
   Replaces all inline styles on #myModal in MasterTemplate.
   Visibility controlled by .ecesis-modal-open class (added by ecesis.js).
   ========================================================================== */

#myModal {
  display: none;
  position: fixed;
  z-index: 100000;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

#myModal.ecesis-modal-open {
  display: block;
}

#myModal > div {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 60%;
  max-width: 700px;
}

#myModal .close {
  float: right;
  font-size: 28px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  color: #000;
  opacity: 0.5;
}
#myModal .close:hover {
  opacity: 1;
}

#myModal .form-group {
  border: 1px solid #c0a184;
}

#myModal .form-control {
  background-color: #fff;
  border: none;
}

#captcha-warning {
  color: red;
  display: none;
  margin-top: 5px;
}

@media (max-width: 767px) {
  #myModal > div {
    width: 90%;
    padding: 15px;
  }
  #myModal {
    padding-top: 50px;
  }
}


/* ==========================================================================
   5. Typography & Text
   ========================================================================== */

.page .text-dark2 {
  color: #474c58;
  font-weight: bold;
}


/* ==========================================================================
   6. Layout & Content Area (#mainarea)
   ========================================================================== */

#mainarea {
  max-width: 1000px;
  margin: auto;
}

#mainarea p {
  margin: 0 0 15px 0;
}

#mainarea ul, #mainarea ol {
  margin: 0 0 0 20px;
  list-style: square;
}

#mainarea li {
  margin: 5px 0 0 20px;
  list-style: square;
}

#mainarea li:before {
  content: "\2022";
  color: #4a4a4b;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}


/* ==========================================================================
   7. Buttons (CTAs)
   ========================================================================== */


.moc-cta-btn {
  display: inline-block;
  padding: 14px 32px;
  font-family: "Lato", Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background-color: #4b7a05;
  border: 2px solid #4b7a05;
  border-radius: 0;
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  position: relative;
  z-index: 1;
  vertical-align: middle;
}
.moc-cta-btn:hover {
  background-color: #3d6504;
  border-color: #3d6504;
  color: #fff;
  text-decoration: none;
}
.moc-cta-btn-outline {
  background-color: transparent;
  color: #4b7a05;
}
.moc-cta-btn-outline:hover {
  background-color: #4b7a05;
  color: #fff;
}


/* ==========================================================================
   8. Feature Lists & Checkmarks
   ========================================================================== */

.featureList, .featureList ul {
  margin-top: 0 !important;
  padding-left: 2em !important;
  list-style-type: none !important;
}

.featureList li:before {
  position: absolute !important;
  margin-left: -1.3em !important;
  font-weight: bold !important;
}

.featureList li.tick:before {
  content: "\2713" !important;
  color: #4b7a05 !important;
}

.featureList li.cross:before {
  content: "\2717" !important;
  color: crimson !important;
}


/* ==========================================================================
   9. Photo Gallery
   ========================================================================== */

[data-photo-swipe-item] img {
  transition: opacity 0.2s ease;
}
[data-photo-swipe-item]:hover img {
  opacity: 0.85;
}


/* ==========================================================================
   10. Forms
   ========================================================================== */

.moc-contact-section .form-control {
  background-color: #fff;
  border: 1px solid #ccc;
}


/* ==========================================================================
   11. Video Player
   ========================================================================== */

.video2 {
  width: 100%;
  border: 1px solid black;
}

.wrappervideo {
  display: table;
  width: auto;
  position: relative;
}

.playpausevideo {
  background-image: url("/images/Compliance-Obligation-Video.png");
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background-size: cover;
  background-position: center;
}

.centerheadervideo {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 240px;
}


/* ==========================================================================
   12. Cookie Consent
   ==========================================================================
   Styles for cookieconsent.min.js (osano/cookieconsent library).
   Previously inlined in MasterTemplate <style> block (~4KB). The library
   does NOT self-inject CSS, so these must be in an external stylesheet.
   Position:fixed means the banner does not cause CLS.
   ========================================================================== */

/* Core .cc-* styles for cookieconsent.min.js */
.cc-window{opacity:1;transition:opacity 1s ease}.cc-window.cc-invisible{opacity:0}.cc-animate.cc-revoke{transition:transform 1s ease}.cc-animate.cc-revoke.cc-top{transform:translateY(-2em)}.cc-animate.cc-revoke.cc-bottom{transform:translateY(2em)}.cc-animate.cc-revoke.cc-active.cc-bottom,.cc-animate.cc-revoke.cc-active.cc-top,.cc-revoke:hover{transform:translateY(0)}.cc-grower{max-height:0;overflow:hidden;transition:max-height 1s}
.cc-link,.cc-revoke:hover{text-decoration:underline}.cc-revoke,.cc-window{position:fixed;overflow:hidden;box-sizing:border-box;font-family:Helvetica,Calibri,Arial,sans-serif;font-size:16px;line-height:1.5em;display:flex;flex-wrap:nowrap;z-index:9999}.cc-window.cc-static{position:static}.cc-window.cc-floating{padding:2em;max-width:24em;flex-direction:column}.cc-window.cc-banner{padding:1em 1.8em;width:100%;flex-direction:row}.cc-revoke{padding:.5em}.cc-header{font-size:18px;font-weight:700}.cc-btn,.cc-close,.cc-link,.cc-revoke{cursor:pointer}.cc-link{opacity:.8;display:inline-block;padding:.2em}.cc-link:hover{opacity:1}.cc-link:active,.cc-link:visited{color:initial}.cc-btn{display:block;padding:.4em .8em;font-size:.9em;font-weight:700;border-width:2px;border-style:solid;text-align:center;white-space:nowrap}.cc-highlight .cc-btn:first-child{background-color:transparent;border-color:transparent}.cc-highlight .cc-btn:first-child:focus,.cc-highlight .cc-btn:first-child:hover{background-color:transparent;text-decoration:underline}.cc-close{display:block;position:absolute;top:.5em;right:.5em;font-size:1.6em;opacity:.9;line-height:.75}.cc-close:focus,.cc-close:hover{opacity:1}
.cc-revoke.cc-top{top:0;left:3em;border-bottom-left-radius:.5em;border-bottom-right-radius:.5em}.cc-revoke.cc-bottom{bottom:0;left:3em;border-top-left-radius:.5em;border-top-right-radius:.5em}.cc-revoke.cc-left{left:3em;right:unset}.cc-revoke.cc-right{right:3em;left:unset}.cc-top{top:1em}.cc-left{left:1em}.cc-right{right:1em}.cc-bottom{bottom:1em}.cc-floating>.cc-link{margin-bottom:1em}.cc-floating .cc-message{display:block;margin-bottom:1em}.cc-window.cc-floating .cc-compliance{flex:1 0 auto}.cc-window.cc-banner{align-items:center}.cc-banner.cc-top{left:0;right:0;top:0}.cc-banner.cc-bottom{left:0;right:0;bottom:0}.cc-banner .cc-message{display:block;flex:1 1 auto;max-width:100%;margin-right:1em}.cc-compliance{display:flex;align-items:center;align-content:space-between}.cc-floating .cc-compliance>.cc-btn{flex:1}.cc-btn+.cc-btn{margin-left:.5em}
@media print{.cc-revoke,.cc-window{display:none}}@media screen and (max-width:900px){.cc-btn{white-space:normal}}@media screen and (max-width:414px) and (orientation:portrait),screen and (max-width:736px) and (orientation:landscape){.cc-window.cc-top{top:0}.cc-window.cc-bottom{bottom:0}.cc-window.cc-banner,.cc-window.cc-floating,.cc-window.cc-left,.cc-window.cc-right{left:0;right:0}.cc-window.cc-banner{flex-direction:column}.cc-window.cc-banner .cc-compliance{flex:1 1 auto}.cc-window.cc-floating{max-width:none}.cc-window .cc-message{margin-bottom:1em}.cc-window.cc-banner{align-items:unset}.cc-window.cc-banner .cc-message{margin-right:0}}
.cc-floating.cc-theme-classic{padding:1.2em;border-radius:5px}.cc-floating.cc-type-info.cc-theme-classic .cc-compliance{text-align:center;display:inline;flex:none}.cc-theme-classic .cc-btn{border-radius:5px}.cc-theme-classic .cc-btn:last-child{min-width:140px}.cc-floating.cc-type-info.cc-theme-classic .cc-btn{display:inline-block}
.cc-theme-edgeless.cc-window{padding:0}.cc-floating.cc-theme-edgeless .cc-message{margin:2em 2em 1.5em}.cc-banner.cc-theme-edgeless .cc-btn{margin:0;padding:.8em 1.8em;height:100%}.cc-banner.cc-theme-edgeless .cc-message{margin-left:1em}.cc-floating.cc-theme-edgeless .cc-btn+.cc-btn{margin-left:0}

/* Legacy #cookieConsent styles (from old jQuery ihavecookies plugin) */
#cookieConsent {
  background-color: rgba(20, 20, 20, 0.8);
  min-height: 26px;
  font-size: 14px;
  color: #ccc;
  line-height: 26px;
  padding: 8px 0 8px 30px;
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: none;
  z-index: 9999;
}
#cookieConsent a { color: #4b8ee7; text-decoration: none; }
#closeCookieConsent { float: right; cursor: pointer; height: 20px; width: 20px; margin: -15px 0 0 0; font-weight: bold; }
#closeCookieConsent:hover { color: #fff; }
#cookieConsent a.cookieConsentOK { background-color: #f1d600; color: #000; display: inline-block; border-radius: 5px; padding: 0 20px; cursor: pointer; float: right; margin: 0 60px 0 10px; }
#cookieConsent a.cookieConsentOK:hover { background-color: #e0c91f; }


/* ==========================================================================
   13. Icons (Green Picture Icons)
   ========================================================================== */

.containericons { display: block; max-width: 130px; text-align: center; }
.imageicons { margin-left: auto; margin-right: auto; width: auto; height: 110px; padding-bottom: 15px; padding-top: 1px; }
.overlayicons { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; transition: 0.5s ease; background-color: white; }
.containericons:hover .overlayicons { opacity: 1; }
.texticons { font-size: 14px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }


/* ==========================================================================
   14. Skip Link (Accessibility)
   ========================================================================== */

.skip-link {
  position: absolute;
  left: -9999px;
  top: -9999px;
  z-index: 999999;
  background: #4b7a05;
  color: #fff;
  padding: 8px 16px;
  font-size: 14px;
  text-decoration: none;
  border-radius: 4px;
}
.skip-link:focus {
  left: 10px;
  top: 10px;
}


/* ==========================================================================
   15. Footer
   ========================================================================== */

.ecesis-footer a {
  color: #fff;
  display: block;
  margin-bottom: 8px;
  text-decoration: none;
}
.ecesis-footer a:hover {
  text-decoration: underline;
}
.ecesis-footer h3 {
  font-size: 175%;
  color: #fff;
}


/* ==========================================================================
   16. Responsive / Media Queries
   ========================================================================== */

@media (max-width: 767px) {
  .w3-bar,
  .ecesis-tab-bar {
    flex-direction: column;
  }

  .w3-btn,
  .w3-button,
  .ecesis-tab-btn {
    width: 100%;
    text-align: center;
  }

  #mainarea {
    padding: 0 10px;
  }
}

@media (max-width: 480px) {
  .moc-cta-btn {
    display: block;
    width: 100%;
    padding: 12px 20px;
  }
}