/* Variables
-------------------*/

:root {
    --primary-color: #136cb6 !important;
    --secondary-color: #003763 !important;
    --accessory-color: #009add !important;
    --icons-borders-color: #003763 !important;
    --text-color: #000;
    --text-light: #000;
    }

   
  .primary-color {
    background-color: var(--primary-color);
    color: var(--text-color);
    }
  .secondary-color {
    background-color: var(--secondary-color);
    color: var(--text-color);
    }
  .accessory-color {
    background-color: var(--accessory-color);
    color: var(--text-color);
    }
  .icon-color {
    background-color: var(icons-borders-color);
    color: var(--text-color);
    }
  
    h2, .h2, .section-landing .row > div .section-landing-sub-heading, .page_section h2, .color-inverse h2, h2 p {
      color: #136cb6 !important;
  }
  

  /* Nucor Logo Swap
  -------------------*/
  .navbar-brand {
    display: none !important;
  }

  .navbar-brand2 {
    display: block;
    background-image: url("metlspan-logo.jpeg");
    width: 120px;
    height: 60px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.navbar-brand2 a {
  width: 120px !important;
  height: 60px !important;
  display: block;
}

.navbar-brand2 img {
  display: none;
}

/*
.nucor-solidbg {
  background: url("quick-contact-background.jpg");
  background-size: cover;
}*/



.footer .footer-bottom {
  background-color: var(--secondary-color) !important;
}
  

  
  /* Nucor Nav
  -------------------*/
  .navbar-static-top.navbar .menu-bar > .navbar-nav > li > a:hover {
    background-color: var(--primary-color);
    border-radius: 2px;
    color: #ffffff !important;
    }
  
  .navbar-static-top.navbar .menu-bar > .navbar-nav > li > a:hover span {
    color: #ffffff !important;
    text-transform: none;
    }
  
    .navbar-static-top.navbar .menu-bar > .navbar-nav > li > a {
    text-transform: none;
    color: #555559 !important;
    }
  
    .nucor-line-details .crmEntityFormView {
      padding-top: 2rem !important;
    }

    
  

  /* Nucor Image Swap 
  -------------------*/

  .NucorHeroOverlay {
    background-color: rgba(000, 000, 000, .25);
    height: 100%;
    width: 100%;
    min-height: 40vh !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }

.NucorCardOverlay {
  background-color: rgba(000, 000, 000, .2);
  height: 100%;
  width: 100%;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}

  .NucorHero {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: rgba(000, 000, 000, .3) !important;
    background-image:  url("Metl-Span-Hero.jpg") !important;
    min-height: 40vh !important;
  }

  .NucorCard1 {
    background-image:  url("Metl-Span-Panel1.jpg") !important;
  }

  .NucorCard2 {
    background-image:  url("Metl-Span-Panel2.jpg") !important;
  }

  .NucorCard3 {
    background-image:  url("Metl-Span-Panel3.jpg") !important;
  }

  .NucorCard4 {
    background-image:  url("Metl-Span-Panel4.jpg") !important;
  }

  .NucorHeroInterior {
    background-image:  url("Metl-Span-HeroInterior.jpg") !important;
  }

  .NucorHeroInterior {
    flex-wrap: wrap; 
    margin: 0px; 
    min-height: auto; 
    background-image: url("/background11.jpg"); 
    background-position: center center; 
    background-repeat: no-repeat; 
    background-size: cover;
  }


  .Nucor-HeroInteriorOverlay {
    background-color: rgba(000, 000, 000, .2);
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
  }

  
/* Nucor Content Swap
*/
    
  /* Nucor CMS Content Styles
  -------------------*/
  
    h1.siteTitle {
      font-weight: 400 !important;
      font-size: 60px !important;
      letter-spacing: 1px !important;
      text-transform : none;
      text-align: center !important;
      text-shadow: none !important;
      font-family: "Red Hat Display", sans-serif !important;
    }
  
    #cards-container {
      padding: 5rem 1rem !important;
  }

  .nucor-solidbg {

  }
  
   /* Nucor Panels
  -------------------*/
  
  #cards-container {
    background-color: #eee;
  }
  
  .card {
    border-radius: 0px !important;
    background-color: #fff;
    border: 1px solid #ddd;
    transition: all .3s;
    transform-style: preserve-3d;
    }
  
  .card:hover {
    background-color: #f7f7f7;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    text-decoration: none !important;
    transform: scale(1.0125);
    }
  
  .card-image {
      min-height: 220px;
      display:flex;
      align-items: center;
      background-position: center center; 
      background-repeat: no-repeat; 
      background-size: cover;
    }
  
  .card-image#order-management {
    background-image: url("/order-management-thumb.png"); 
  }
  
  .card-image#change-requests {
    background-image: url("/change-requests-thumb.png"); 
  }
  
  .card-image#fab-sketches {
    background-image: url("/fab-sketches-thumb.png"); 
  }
  
  .card-heading {
    display: block;
    font-size: 36px;
    line-height: 110%;
    text-transform: none;
    text-align: center;
    font-family: "Red Hat Display", sans-serif !important;
    font-weight: normal !important;
    text-shadow: 1px 1px 8px rgba(000, 000, 000, .2);
    margin: 0 auto;
    color: #fff;
  }
  
  .card-body {
    background: transparent !important;
    margin: 1rem 2rem 3rem;
    }
  
  
  .card-body a, .card-body a:hover {
  text-decoration: none !important;
  }
  
  .card-img {
    width: 100%;
    }
  
  .card-default p{
    color:#333 !important;
    padding: 1rem 0 2rem !important;
    }
  
  .card-default .btn {
    width: 100%;
    }
  
  

  .btn-primary{
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
    border-radius: 0px;
    }
  
  .vert-center-container{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    }
  
   /* Filter Panel
  -------------------*/
  .filter-vertical {
    color: #000;
    }
  
    #entitylist-filters:before {
      content: "Filter";
      font-size: 2rem;
      font-family: "Red Hat Display", sans-serif !important;
      font-weight: bold !important;
    }
    .filter-vertical label.entitylist-filter-option-group-label {
      font-size: 1.25rem;
      font-weight: bold;
    }
      .filter-vertical .panel {
        color: #000;
        background-color: #F0F0F0;
        }
  
        .filter-vertical .panel:hover {
          background-color: #F0F0F0;
          box-shadow: none;
          text-decoration: none !important;
          }
  
          .filter-vertical .panel .entitylist-filter-option-group {
            margin-bottom: 2rem !important;
          }
  
          .filter-vertical .panel-default .btn {
            width: 100% !important;
            margin-bottom: 1rem !important;
          }

          .filter-vertical .panel-default .btn:hover {
            
            color: #ffffff !important;
          }
  
          .filter-vertical input.form-control {
            border: 1px solid #D9D9D9 !important;
            padding: 10px 10px;
            padding-right: 20px;
            background-color: #fff;
          }
  
          .filter-vertical .pull-right{
            float: none !important;
          }
          .filter-vertical .entitylist-filter-option-group-box-overflow {
            border: transparent 1px solid !important;
            transition: all .25s ease-out 50ms;
          }
  
          .filter-vertical .entitylist-filter-option-group-box-overflow:hover {
            border: #0a41c2 1px solid !important;
          }
         
   
          
  .filter-vertical .entitylist-filter-option-group-label h4 {
    color: #000;
    }
  
  /* Data Table
  ------------------- */
  a.selected-view {
      font-size: 2rem;
      font-family: "Red Hat Display", sans-serif !important;
      font-weight: bold !important;
      color: #000 !important;
  }
  
  .view-grid .table thead tr th:first-child{
    padding-left: 1rem;
  }
  
  .view-grid .table thead tr th a  {
    color: #000000 !important;
    font-family: "Red Hat Display", sans-serif !important;
    font-weight: bold !important;
    }
  
  .view-grid tbody td {
    padding: 30px;
  }
  
  .view-grid tbody tr:nth-child(odd) {
    background-color: #F7F7F7 !important;
  }
  .view-grid .table tbody tr {
    transition: all .25s ease-out 50ms;
    padding: 1rem;
    border-bottom: transparent 2px solid !important;
    }
  
  .view-grid .table tbody tr td {
    border-top: none !important;
    }
  
    .view-grid .table tbody tr td:first-child{
      padding-left: 1rem;
      transition: border-bottom .125s ease-out 50ms;
    }
  
    .view-grid .table tbody tr td:first-child a{
        font-size: 18px;
        font-weight: 700 !important;
    }
  
  
  .view-grid .table tbody tr:hover {
    background-color: #CADCF2 !important;
    border-bottom: var(--accessory-color) 2px solid !important;
    }
    
    .view-grid .table tbody tr:hover td:first-child {
      padding-left: 1rem;
      }
  
  
      .grid-actions {
        border-bottom: none !important;
      }
  
  
  
  .crmEntityFormView fieldset {
    margin-bottom: 0px !important;
  }
  
  /* Custom Grid
  -------------------*/
  table.customGrid thead tr th:first-child{
    padding-left: 1rem;
  }
  
  table.customGrid thead tr th a  {
    color: #000000 !important;
    font-family: "Red Hat Display", sans-serif !important;
    font-weight: bold !important;
    }
  
  table.customGrid tbody tr:nth-child(odd) {
    background-color: #F7F7F7 !important;
  }
  table.customGrid tbody tr {
    transition: all .25s ease-out 50ms;
    padding: 1rem;
    border-bottom: transparent 2px solid !important;
    }
  
    table.customGrid tbody tr td {
    border-top: none !important;
    }
  
    table.customGrid tbody tr td:first-child{
      padding-left: 1rem;
      transition: border-bottom .125s ease-out 50ms;
    }
  
    table.customGrid tbody tr td:first-child a{
        font-size: 18px;
        font-weight: 700 !important;
    }
  
      table.customGrid  thead tr th  {
        color: #000000 !important;
        font-family: "Red Hat Display", sans-serif !important;
        font-weight: bold !important;
        }
  
  
        table.customGrid tbody tr:hover {
          background-color: #CADCF2 !important;
          border-bottom: var(--accessory-color) 2px solid !important;
          }
        
          table.customGrid tbody tr:hover td:first-child {
            padding-left: 1rem;
            }
        
  
  
  tr.highlight {
    background-color: #CADCF2 !important;
    border-bottom: #0a41c2 2px solid !important;
  }


  /* Data Entry
---------------------- */
.nucor-input-wrapper .crmEntityFormView .cell {
  padding: 0 28px 0 0 !important;
  font-family: "Red Hat Display", sans-serif !important;
}

.nucor-input-wrapper .tab-title {
  background-position: right !important;
  padding: 10px 0px;

  background-repeat: no-repeat;
  height: 60px !important;
  cursor: pointer; 
}

.nucor-input-wrapper .tab-title:hover {
  border-bottom: 2px #136cb6 solid !important ;
}

.nucor-input-wrapper .crmEntityFormView .tab-title {
  border-bottom: 2px #000000 solid !important ;
}

.nucor-input-wrapper .tab-title:hover {
  border-bottom: 2px #136cb6 solid !important ;
  color: #136cb6 !important;
}


.nucor-input-wrapper .form-control {
  font-family: "Red Hat Display", sans-serif !important;
  font-weight: bold !important;
  float: left !important;
}

.nucor-input-wrapper .crmEntityFormView .form-control.readonly, .crmEntityFormView .form-control[readonly][disabled], .form-readonly .form-control {
  padding-left: 12px !important;
}


.nucor-input-wrapper .form-control-cell .control{
  float: left;
  width: 100% !important;
}

.nucor-input-wrapper .form-control:focus {
  font-family: Poppins !important;
  font-weight: bold !important;
  border: #136cb6 solid 1px !important;
}


.nucor-input-wrapper .input-group {
  font-family: Poppins !important;
  font-weight: bold !important;
  border: #dedede solid 1px !important;
}

.nucor-input-wrapper .control .input-group {
  font-family: Poppins !important;
  font-weight: bold !important;
  border: none !important;
  height: 4rem !important;
  line-height: 4rem !important;
  
}

.nucor-input-wrapper .input-group .form-control:not(.query.form-control) {
  border: none !important;
  height: 4rem !important;
  line-height: 4rem !important;
}


.nucor-input-wrapper .input-group .input-group-btn {
  border: none !important;
  height: 4rem !important;
  line-height: 4rem !important;
}

.nucor-input-wrapper .input-group:focus  {
  border: #136cb6 solid 1px !important;
}


.nucor-input-wrapper .form-control-cell .control {
  border: #dedede solid 1px !important;
}

.query.form-control{
	border-width: 2px !important;
    border-style: inset !important;
    border-color: light-dark(rgb(118, 118, 118), rgb(133, 133, 133)) !important;
    border-image: initial !important;
}

.nucor-input-wrapper .control .form-control:not(.query.form-control) {
  border: none !important;
  box-shadow: none !important;
  height: 4rem !important;
  line-height: 4rem !important;
}

.nucor-input-wrapper .control button {
  border: none !important;
}


.nucor-input-wrapper .text-muted {
  color: #333 !important;
  line-height: 4rem;
  padding-left: 10px;
}

.nucor-input-wrapper .info {
  padding-top: 10px !important;
}


.nucor-input-wrapper .input-group .form-control:focus  {
}
.nucor-input-wrapper .input-group .input-group-btn:focus  {
}
.nucor-input-wrapper .form-control:focus {
}

.nucor-input-wrapper .submit-btn  {
  padding: 1rem 4rem !important;
  line-height: 4rem !important;
}


.nucor-input-wrapper .input-group .input-group-btn .button2, .nucor-input-wrapper .input-group .input-group-btn .btn-default {
border: none !important;
background-color: none !important;
border-radius: none !important;
}


  
   /* Pagination
  -------------------*/
  .view-pagination {
    text-align: center;
  }
  
  .view-pagination ul.pagination li{}
  
  .view-pagination ul.pagination li a{
    width: 50px;
    height: 50px;
    line-height: 40px;
    font-size: 1.25rem;
    font-weight: 700 !important;
  }
  
  .view-pagination ul.pagination l.disabled a{
    width: 50px;
    height: 50px;
    line-height: 40px;
    font-size: 1.25rem;
    font-weight: 700 !important;
  }
  
  .view-pagination ul.pagination li.active a {
    width: 50px;
    height: 50px;
    line-height: 40px;
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
    border-radius: 5px;
    font-size: 1.25rem;
    font-weight: 700 !important;
  }
  
  .pagination {
      display: flex;
      justify-content: center;
      text-align: center;
      top: 50%;
      left: 100%;
      margin: 0 auto;
  }
  .pagination a {
      position: relative;
      float: left;
      padding: 6px 12px;
      text-decoration: none;
      color: #666;
      width: 50px;
      height: 50px;
      line-height: 40px;
      font-size: 1.25rem;
      font-weight: 700 !important;
  
  }
  .pagination a.disabled {
      width: 50px;
      height: 50px;
      line-height: 40px;
      font-size: 1.25rem;
      font-weight: 700 !important;
      cursor: not-allowed;
  }
  .pagination a:link { 
    text-decoration: none; 
  } 
  .pagination a:visited { 
    text-decoration: none; 
  } 
  
  .pagination a:hover {
        background-color: transparent;
        border-color: transparent;
        z-index: 2;
        color: var(--accessory-color);
  }
  .pagination a.active {
      width: 50px;
      height: 50px;
      line-height: 40px;
      background-color: var(--accessory-color) !important;
      color: #FFFFFF !important;
      border-radius: 5px;
      font-size: 1.25rem;
      font-weight: 700 !important;
      text-decoration: none;
  }
  
   /* Buttons
  -------------------*/
  
  .button1 {
  padding: 1rem !important;
  transition: background-color .25s ease-out 50ms !important;
  }
  
  .button1:hover {
    color: #ffffff;
    background-color: var(--accessory-color);
    border-color: var(--accessory-color);
  }
  
  .btn-default {
    transition: background-color .25s ease-out 50ms !important; 
  }
  
  .btn-default:hover {
    color: #ffffff !important;
    background-color: var(--accessory-color) !important;
  }

  .btn:hover {
    color: #ffffff !important;
  }
  
  
  
   /* Accordion style fixes
  -------------------*/
  .accordion-wrapper {
  }
  
  .accordion-wrapper .panel-heading {
    background-color:#eee !important;
    padding: 0 !important;
  }
  
  .accordion-wrapper .panel-title {
    padding: 2rem;
  }
  
  .accordion-wrapper ol li {
    margin-bottom: .5rem;
  }
  
  
  .nucor-data-wrapper {
         background-color: #fff;
         padding: 1rem;
         font-family: "Red Hat Display", sans-serif !important;
      }
  
  .nucor-data-wrapper .form-control {
      font-size: 24px !important;
      font-weight: normal !important;
      display: block;
      width: 100%;
      height: auto !important; 
      padding: 0px !important; 
      line-height: auto !important;
      text-transform: none !important;
      font-family: "Red Hat Display", sans-serif !important;
  }
  
  .nucor-data-wrapper .view-grid  {
      }
  
  .nucor-data-wrapper .view-grid .table thead tr th a  {
      color: #fff !important;
      text-decoration: none !important;
      font-size: 12px !important;
      font-weight: normal !important;
      font-family: "Red Hat Display", sans-serif !important;
      line-height: 1 !important;
      transition: color .25s ease-out 50ms;
      }
  
      .nucor-data-wrapper .table thead tr th {
        color: #fff !important;
      text-decoration: none !important;
      font-size: 12px !important;
      font-weight: normal !important;
      font-family: "Red Hat Display", sans-serif !important;
      line-height: 1 !important;
      transition: color .25s ease-out 50ms;
      padding-top: 10px;
      padding-bottom: 10px;
      }
  
  .nucor-data-wrapper .view-grid .table>thead>tr>th a:hover {
      color: #C9E7E1 !important;
  }
  
  .nucor-data-wrapper .table>thead>tr>th {
      line-height: 1 !important;
  }
  
  .nucor-data-wrapper .table thead tr th {
     background-color: #333 !important;
      }
  
  .nucor-data-wrapper .table thead tr {
      background-color: #333 !important;
      transition: all 3s 1s;
      }
  
  .nucor-data-wrapper .table thead tr:hover & {
      background-color: #333 !important;
      transform: scale(1.2);
      }
  
  .nucor-data-wrapper .table thead tr th {
      }
  
  .nucor-data-wrapper .table tbody tr {
      }
  
  .nucor-data-wrapper .table tbody tr td {
      }
  
      .nucor-data-wrapper .table tbody tr td:first-child{
      
      }
  
      .nucor-data-wrapper .table tbody tr td:first-child a{
          font-size: 24px;
      }
  
  
  .nucor-data-wrapper .table tbody tr:hover {
      }
  
  /*
  .crmEntityFormView {
      background-color: #ffffff;
      box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
      border-radius: 2px !important;
  }
  */
  
    /* Small devices (tablets, 768px and up) */
    @media (min-width: 768px) { 
    
  
    }
   
   /* Medium devices (desktops, 992px and up) */
   @media (min-width: 992px) { 
      
     .container {
      width: 992px !important;
    }
   }
   
   /* Large devices (large desktops, 1200px and up) */
   @media (min-width: 1440px) { 
     
     .container {
       width: 1480px !important;
     }
   
    }
  
    #navbar .dropdown-search {
      margin: 0 !important;
      padding: 10px;
      background-color: #ffffff;
    }
  
    .loginBox2 .btn-primary {
      color: #ffffff !important;
    }
  
    
  /* Nate Hibma June 23
  -------------------*/
  
  /*.fa, .caret, .glyphicon {
      color: #E6CC8D;
    }
    .navbar-static-top.navbar .menu-bar > .navbar-nav > li > a:hover,
    .navbar-static-top.navbar .menu-bar > .navbar-nav > li > a:hover > span {
      font-weight: 400px;
      text-decoration: none;
      color:#000;
    }
  */
  
    /* Custom styles added by Nate Hibma, June 2023 */
  
    .wrapper-body {
      min-height: calc(100vh - 132px) !important;
    }
  /*
    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover {
      color: #307067 !important;
    }
  */
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover {
    background-color: var(--primary-color) !important;
  }
  
    /*
    .navbar a:hover {
      background:rgba(255,255,255, 0.7) !important;
    }
    */
  
    .navbar-static-top.navbar-inverse .navbar-brand a {
      display: block;
    }
  
    li.divider-vertical {
      opacity: 0.2;
    }
  
    .style-card {
      background-color: #4DA684;
      box-shadow: 2px 2px 5px rgba(000, 000, 000, .3);
    }
  
    .style-card a {
      text-decoration: none;
    }
  
    /*---
    .style-card p {
      color: #fff;
      margin: 0;
      padding: 1em;
      text-align: right;
    }*/
  
    .style-card:hover {
      color: #fff;
      background-color: var(--primary-color) !important;
    }
  
    .style-card:hover img {
      opacity: 1;
    }
  
    .style-card:hover p {
      text-decoration: underline;
      color: #eee;
    }
  
  .panel-body {
      background-color: #F4F5F8 !important;
    }
  
  
  
  
  
      /*ENM Remove 2/13/24 
    .entitylist-filter-option-group .h4 {
      color: #fff !important;
    }*/
  
  
  th:nth-child(14){
      display: None
  }
  
  .nucor-data-wrapper .table>thead>tr>th a {
      line-height: 1em !important;
  }
  
  th:nth-child(15){
      display: None
  }
  
  td:first-child { 
      text-align: left; 
      }
  
  
  
  
  
  /* Helper Classes - NH added 2/20/24. Intended to be general--not necessarily Nucor specific 
  -------------------*/
  
  .white-text {
    color: #fff;
  }
  
  .padding {
    padding: 3rem 0;
    }
    
    .extra-padding {
    padding: 5rem 0;
    }
    
    .padding-top {
    padding-top: 3rem;
    }
    
    .padding-bottom {
    padding-bottom: 3rem;
    }
    
    .display-flex-center {
    display: flex;
    align-items: center;
    }
    
    .more-line-height {
    line-height: 175%;
    }
    
    p.lead {
    font-size: 2.4rem;
    opacity: 1;
    font-weight: 500;
    }
    
    .nucor-center {
      text-align: center;
    }
  
    .nucor-center .btn.disabled, .nucor-center  .btn[disabled],  .nucor-center  fieldset[disabled] .btn {
      cursor: not-allowed;
      opacity: .65;
      filter: alpha(opacity = 65);
      -webkit-box-shadow: none;
      box-shadow: none;
  }
    
    /* Contact us page */
    .crmEntityFormView, .entitylist, .modal-content, .popover-content {
      border: none !important;
    }
  
    .crmEntityFormView .tab-title {
      border-bottom: none !important;
    }
  
    .crmEntityFormView .actions {
      border-top: none !important;
    }
  
    #entityFormPanel h2 {
      color: #333 !important;
      margin-bottom: 1em !important;
    }
  
    h2.tab-title {
      color: #333 !important;
      margin-bottom: 1em !important;
    }
  
    /* // Class */
  .center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  
  /* // Usage as a mixin */
  .element {
    .center-block();
  }