/*
The next several styles are for the Simple Insights home page and category pages.
*/

/*
-oneX-col-sm-4 mb-4 is really too small, but didn't want to change the DOM for the gridComponent.

NOTE - For some reason, the aem-element-spacing class shows up in two places in the DOM, but just once in EY's code base.
So, I'm having to put main in front of all these styles to target just the <main> tag.
*/

main .aem-element-spacing .clickable-card h4{ /* needed less space below our headings for the clickable cards. */
    margin-bottom: 12px;
  }

  /* end of clickable card styling */


  main .aem-element-spacing p {
      margin-top: 0px; /* needed to remove unnecessary margin top, seen on /careers homepage */
  }
  main .aem-element-spacing h4 a h2 {
      margin-top: 0px;  /* for goofy nesting of headings on /careers home page */
      margin-bottom: 0px;  /* for goofy nesting of headings on /careers home page */
  }

  main .aem-element-spacing a img .-oneX-col-12 {
      padding-left: 0px;
  }

  main .aem-element-spacing input, .aem-element-spacing select{
      margin-bottom: 16px; /* for action module fields */
  }

  main, .custom-breadcrumbs {
      background-color: #fff; /* to get rid of gray background for the entire page */
      /* don't need the following anymore, since the -oneX-container provides the 15px padding needed for this */
      /* padding-left:30px;*/ /* default padding for mobile pages to constrain the width of the content on pages */
      /* padding-right: 30px; */
  }

  main .w-50 {
      width: 50% !important;  /* need for Simple Insight article images */
  }

  main .float-right {
      float: right !important; /* need for Simple Insight article images */
      margin-left: 0.5rem !important; /* need for Simple Insight article images */
  }

.d-none {
    display: none !important /* needed for some SI code that still uses some legacy bootstrap classes */
}

.d-block {
    display: block !important /* needed for some SI code that still uses some legacy bootstrap classes */
}

.text-uppercase {
    text-transform: uppercase !important;
}


  /* stuff from UX */
  main .aem-element-spacing h1{
      margin-bottom: 32px;

  }


  main .aem-element-spacing h2{
      margin-bottom: 24px;
       margin-top: 48px;  /* I may want to change this to padding-top.  Then if the background of the div is colored, the text won't be at the very top of the div */
  }

  @media(min-width: 768px) {
  main .aem-element-spacing h2{
      margin-top: 56px;
  }
  }

  @media(min-width: 1200px) {
  main .aem-element-spacing h2{
      margin-top: 64px;
  }
  }

  main .aem-element-spacing h3{
      margin-bottom: 24px;

  }
  main .aem-element-spacing h4{
      margin-bottom: 24px;
      margin-top: 0px; /* don't know why, but <h4> was having some margin top, seemed to come from browser.  Seen on /careers home page */

  }
  main .aem-element-spacing h5{
      margin-bottom: 24px;

  }
  main .aem-element-spacing h6{
      margin-bottom: 16px;

  }

  main .aem-element-spacing .-oneX-body--primary{
      margin-bottom: 24px;
  }
  main .aem-element-spacing .-oneX-body--secondary{
      margin-bottom: 24px;
  }
  main .aem-element-spacing .-oneX-body--tertiary{
      margin-bottom: 24px;
  }

  main .aem-element-spacing button, main .aem-element-spacing input.-oneX-btn-primary, main .aem-element-spacing input.-oneX-btn-secondary, main .aem-element-spacing input.-oneX-btn-ghost, main .aem-element-spacing input.-oneX-btn-primary__anchor, main .aem-element-spacing input.-oneX-btn-secondary__anchor, main .aem-element-spacing input.-oneX-btn-ghost__anchor, main .aem-element-spacing a.-oneX-btn-primary, main .aem-element-spacing a.-oneX-btn-secondary, main .aem-element-spacing a.-oneX-btn-ghost, main .aem-element-spacing a.-oneX-btn-primary__anchor, main .aem-element-spacing a.-oneX-btn-secondary__anchor, main .aem-element-spacing a.-oneX-btn-ghost__anchor{
      margin-bottom: 24px;
  }

  main .aem-element-spacing img{
      padding-left: 0px; /* needed to eliminate the 15px padding when EY used the -oneX-col-12 directly on an <img> tag.  Can be seen on /careers home page */
      padding-right: 0px;
      /*float:left;
      margin-right: 10px;*/
  }

  main .aem-element-spacing .img-spacing{ /* added for clickable card with image to avoid double focus on image and anchor*/
      margin-bottom: 24px;
  }
  main .aem-element-spacing .img-spacing a {/* added for clickable card with image to avoid double focus on image and anchor*/
    padding: 0px;
  }

  /* end of stuff from UX */

  /* start of stuff to handle unstyled inline links, so that we don't see blue inline links */
  main .aem-element-spacing a {

      font-weight: 400;
      color: #d62311;
      margin: -2px;
      outline: none;
      padding: 2px;
      text-decoration: none
  }

  main .aem-element-spacing a:visited{
      color: #d62311
  }

  main .aem-element-spacing a:hover{
      color: #a11b13;
      text-decoration: underline
  }

  main .aem-element-spacing a:focus{
      outline: 2px solid #0073a8;
      color: #a11b13;
      outline-offset: 0;
      text-decoration: underline
  }

  main .aem-element-spacing a:active{
      color: #701611;
      outline: none;
      text-decoration: underline
  }

  /* 06/26/2024 - Scenario of Anchor looks like button - 1x styles gets override by above anchor styles 
Anchored button - Primary and Secondary - Adding 1x styles  */

main .aem-element-spacing a.-oneX-btn-primary__anchor:active {
    background-color: #701611;
    border: none;
    color: #fff;
    margin-bottom: 0;
    margin-top: 0;
    outline: none
}

main .aem-element-spacing a.-oneX-btn-secondary__anchor:active {
    background-color: #fff;
    border: 2px solid #701611;
    color: #701611;
    text-decoration: none
}

main .aem-element-spacing a.-oneX-btn-primary__anchor:hover {
    background-color: #a11b13;
    border: none;
    color: #fff;
    outline: none;
    text-decoration: none
}

main .aem-element-spacing a.-oneX-btn-secondary__anchor:hover {
	background-color: #fff;
    border: 2px solid #a11b13;
    color: #a11b13;
    text-decoration: none
}

main .aem-element-spacing a.-oneX-btn-primary__anchor:focus {
	text-decoration: none;
    outline: 2px solid #0073a8;
    outline-offset: 2px;
}

main .aem-element-spacing a.-oneX-btn-secondary__anchor:focus {
    text-decoration: none;
    outline: 2px solid #0073a8;
    outline-offset: 2px
}

main .aem-element-spacing .-oneX-btn-primary__anchor,
 main .aem-element-spacing .-oneX-btn-primary__anchor:active, 
 main .aem-element-spacing .-oneX-btn-primary__anchor:hover, 
 main .aem-element-spacing .-oneX-btn-primary__anchor:focus, 
 main .aem-element-spacing .-oneX-btn-primary__anchor:visited{
	color:white;
	text-decoration: none;
}

main .aem-element-spacing .-oneX-btn-primary__anchor, 
  main .aem-element-spacing .-oneX-btn-primary__anchor:visited,
  main .aem-element-spacing .-oneX-btn-primary__anchor:hover, 
  main .aem-element-spacing .-oneX-btn-primary__anchor:focus, 
  main .aem-element-spacing .-oneX-btn-primary__anchor:active{
      color:white;
      padding: 0 48px;
      text-decoration: none;
  }

  /* end of stuff to handle unstyled inline links, so that we don't see blue inline links */

  /* Stuff to Handle Secondary Nav Button with 1x Anchor classes
  Above styles cover only primary anchor links */
  main .aem-element-spacing .-oneX-btn-secondary__anchor, 
  main .aem-element-spacing .-oneX-btn-secondary__anchor:visited,
  main .aem-element-spacing .-oneX-btn-secondary__anchor:focus, 
  main .aem-element-spacing .-oneX-btn-secondary__anchor:active{
      color:#d62311;
      padding: 0 48px;
      text-decoration: none;
  }

  main .aem-element-spacing .-oneX-btn-secondary__anchor:hover{
      padding: 0 47px;
      text-decoration: none;
  }

  #notice,  #notice-expand{ /* privacy notice to start from bottom left corner*/
              left: 0px;
  }


  /* styling action module in simple insights... added class "aem-action-module" as identifier*/
  main .aem-action-module .-oneX-row {

      text-align: center;
  }

  main .aem-action-module .-oneX-row  .-oneX-col-sm-4{

      border : 1px solid #d62311;
  }

  /*end of action module*/


  /* adding additional spacing for clickable cards in SI */

  /*accordion related overrides*/
main .aem-element-spacing h3.cmp-accordion__header{
    margin-bottom: 10px;
    margin-top: 10px;
}

main .aem-element-spacing h3.cmp-accordion__header button{
    margin-bottom:0px;
    padding-right: 32px;
}

main .aem-element-spacing h3.cmp-accordion__header .-oneX-panel__chevron-down{
    margin-top: 0px;
}
  /*accordion related overrides*/

  /* Tab Module Overrides*/
  .cmp-container.-oneX-container .tabs{
      background-color: #fff;
      
  }
  .cmp-tabs__tablist{
      display:flex;
      flex-wrap:wrap;
      padding-left:0;
      list-style:none;
      border: 1px solid #cbcbcb;
      }

  .cmp-tabs__tab{
      flex-basis:0;
      flex-grow:1; 
      text-align:left;
      box-sizing:border-box;
      border-bottom:2px solid transparent;
      padding:1rem 1rem;
      cursor:pointer
      }
  .cmp-tabs__tab--active{
      border-color:#d62311;
      }
  .cmp-tabs__tabpanel:not(.-oneX-hidden){
      padding: 20px;
      }
  .cmp-tabs__tabpanel--active{
      display:block;
      }
 
/*Tab Module Overrides*/

/* Action Modules */
   .-dc-quote-container, .-dc-quote-container-large {
        width: 100%;
        margin: 0 0 16px 0;
        padding: 36px 36px 20px 36px;
        text-align: center;
    }
    .-dc-quote-container > h4, .-dc-quote-container-large > h4 {
        margin-bottom: 16px !important;
    }
    .-dc-quote-container .quoteSelect, .-dc-quote-container-large .quoteSelect {
        justify-content: center;
    }
    .get-quote_zip, .get-quote_state {
        width: 160px;
        margin-right: 16px;
    }
    @media (min-width: 768px) {
        .-dc-quote-container {
            width: auto;
            float: right;
            margin: 0 0 16px 16px;
            text-align: left;
        }
        .-dc-quote-container .quoteSelect {
            justify-content: start;
        }
    }
.padding-around{
    padding: 1.25rem;
}

.bottom-margin{
    margin-bottom: 1.25rem;
}

.text-center{
    text-align: center;
}

.bg-white{
    background: white;
}

.custom-breadcrumbs{
    border-bottom: 1px solid #e4e3e3;
}
 
div.link-type-button a:hover{
text-decoration: none;
}

/*Feedback from UX for MAC users - Apply semi bold for bold tags- 07/20/22 */
strong, b {

    font-family: "MecherleSans-Semibold";
    font-weight:400;

  }