/*
** FLEXBOX LAYOUT
*/

/*
** FMP Redundant Styles
*/

.btn a { color:#eeeeee; }
.btn-blue {
	line-height:normal;
  color: #eeeeee;
  background: #30c7f9;
  background: linear-gradient(#30c7f9, #004773);
  border: 1px solid #031d4e;
  border-radius: 5px;
  box-shadow: 2px 2px 4px rgba(0,0,0,0.5);
  transition: all 0.3s;
}
.btn-blue:hover {
 color:      #ffffff;   
 background: #6b9cf9; /* fallback */
 background: linear-gradient(#14b1e8, #002f60);
 transition: all 0.3s;  
}

/*
** VolkelStore Page Generator Styles namespaced with section class .vk
*/ 

/* Flex */
.flex-header,
.flex-line-wrapper,
.line-subcat,
.flex-line,
.flex-line a,
.flex-footer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; 
  align-items: center;
  width: 100%;
}


/* SubCategory Link Section */

section.ff { border: 1px solid black; }
.bs4 h1 { font-size:18px;font-style:normal; font-weight:400;margin:0.5em 0;text-transform: uppercase;}

#subcategory-hrefs { max-height: 215px; overflow-y: auto; }
#subcategory-hrefs > div { padding: 0 1px 2px 1px; } 
.inner-wrap { 
  margin: 0 2px 4px 2px; 
  border-width: 2px;
  border-style: solid;
  border-image: linear-gradient(to right bottom,#3868d9,#3963c8,#2046a1,#143074,#071e55) 1;
  padding: 2px; 
  text-align: left;
  cursor: pointer;
  transition: all .2s ease;
}

.inner-wrap.active { outline: 2px solid blue; background: #1f3965; border-image: linear-gradient(to right bottom, #00ffff, #00dbff ) 1; color: #eee; }
.inner-wrap.active a { color: #fff; }
.inner-wrap.active:hover { color: #fff; }
.inner-wrap.active:hover a { color: #fff; }

.inner-wrap:hover {  box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.5); transition: all 0.3s; }
.inner-wrap:hover a { color: #1f3965; transition: all 0.3s; }

#subcategory-hrefs div a { display: block; }
#subcategory-hrefs div a:hover { text-decoration: none; }
.subcat-title1 { font-size: 12px; }
.subcat-title2 { font-size: 13px; font-weight: 600; }

.vk .flex-header {
  /*position: -webkit-sticky;
  position: sticky;*/
  font-size: 16px;
  /*top:104px;*/
  text-transform:uppercase;
  /* z-index: 9997; */
}
.tech-image-wrap { align-items: center; }
.tech-image-wrap img { margin-right: 15px; }
.header-subcat-wrap { 
	background-color: #36f;
	color: #fff;
}
header-subcat { line-height: 1.2; }
h2 .subcat-title1 { font-size: 18px; padding-left: 3px; }
h2 .subcat-title2 { font-size: 18px; font-weight: 600;  padding-left: 3px; }
.ff .flex-header > div { padding-left:3px; border-right: 1px solid white; border-top: 1px solid white; text-transform: uppercase;}
.ff .flex-header > div:nth-child(1) { min-width: 300px; } /* part & desc */
.ff .flex-line { border-bottom: 1px solid #eee;}
.ff .flex-line div { padding-left:3px; border-right: 1px solid transparent;}
.ff .flex-line > div:nth-child(1) { min-width: 300px; }
.ff .flex-line div:nth-child(10) { align-items: center; }
.bs4 .col-1,
.bs4 .col-2,
.bs4 .col-3,
.bs4 .col-4 { padding-right: 0;}
.w-70px { flex: 1; min-width: 70px; }

.ff .flex-line div img { width: 100%; }

/* Flex Headings Titles */
.vk .flex-header,
.vk .flex-footer { height: 2rem; }

/* Size dropfilter */ 
.vk .flex-header ul { padding-left: 0; }

.vk .flex-footer { text-transform:uppercase; margin-bottom: 10vh;}
.vk .flex-footer div {line-height: 1.5rem; font-weight:500;}
.vk .flex-footer--segment { background: #ed7100; color: white; }

.vk .flex-header--segment { border-bottom: 2px solid white; }
.vk .flex-header--segment div { padding-left: 3px; } /* dropdown filter */
.vk .flex-header--segment ul { margin-left: -3px; } /* dropdown filter */
.vk .flex-header .flex-header--segment:nth-child(1) div:nth-child(2),
.vk .flex-header .flex-header--segment:nth-child(2) div{ 
  border-left: 2px solid white; 
}

/* Flex Lines */
.vk .flex-line-wrapper { position: relative; max-height: 50vh; top: 5px; overflow-y: auto;  box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.5);}
.vk .flex-line {
  line-height: 48px;
  border: 2px solid transparent;
  background: #fff;
  color: #000;
}
.vk .flex-line:hover { border: 2px solid #30c7f9 }

.vk .flex-header--segment div,
.vk .flex-line--segment div {
  line-height: 1.5;
  font-weight:500;
  margin: 0;
  letter-spacing: 0.5px;
  text-align: left;
}

/* Flex Segments: Header/Line/Footer  */

.vk .flex-header--segment,
.vk .flex-line--segment,
.vk .flex-footer--segment{ 
  min-width: 320px;
  display: flex;
  flex-wrap: nowrap; 
  flex: 1 1 50%;
  justify-content: center;
  align-self: stretch;
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
}

.vk .flex-line--segment div [data-line-desc] { font-weight: 600; }
.vk .flex-line--segment div [data-line-part] { font-size: 10px; }

.vk .flex-line--segment { border-bottom: 1px solid #eee; }
.vk .flex-line--segment div { padding-left: 3px; }
.vk .flex-line--segment:nth-child(2) div { padding-left: 12px; }

.vk .flex-line:nth-child(odd) .flex-line--segment {
  background: #fff; /* #eee */
}

.hide, /* BS4 dropped this class. Added back */
.filter-row-size { display: none !important; transition: all 0.8s;}
.float-right { float: right; }


.vk .flex-filter-overlay,
.filter-size-in { position:absolute; width:100%; background:#eee; color:black; border:2px solid #466091; text-transform: capitalize; z-index:10001;}

.filter-size-in input { width:100%; color: black; }
.filter-size-in input::placeholder { color: blue; opacity:.5; }

.filter-size-in li {position: relative; padding: 0 0 1px 1px; border: 1px solid #fff; transition-delay: 250ms; transition: all; overflow-x:clip; z-index:10001;}
.filter-size-in li:hover {background: #466091; color: white; padding: 0 0 1px 1px; border: 1px solid #fff; z-index:10001;}

.filter-size-in li.checked:after  { content: '\002713'; padding-left: 2px; color:red; font-weight: 800; z-index:10001;} 

/* flex footer is one segment */
.vk .flex-footer--segment{ flex: 1 1 100%; }

.vk .flex-header--segment { align-items:center; background: #466091; color: white; }

/* Filter Dropdown */
.vk .flex-header--segment div { justify-content: space-between; }

.grid-1-of-4 {
  flex: 1 1 25%;
  align-items: center;
  margin:0;  
}
.grid-2-of-4 {
  flex: 2 1 50%;
  align-items: center;
  margin:0;  
}
.grid-3-of-4 {
  flex: 2 1 75%;
  align-items: center;
  margin:0;  
}
.grid-4-of-4 {
  flex: 2 1 100%;
  align-items: center;
  justify-content: center;
  margin:0;  
}

.shad-2 { border: 1px solid #ddd; box-shadow: 2px 2px 4px #ccc; }
/*
** MEDIA QUERIES START HERE
*/
@media only screen and (max-width: 1199px) {
  /*sticky headers are disabled */
  .vk .flex-header { top:0; height: 1.875rem; } 
  .vk .flex-header div { font-size: 0.9375rem; }
  .vk .flex-header--segment { border-bottom: none; }  
  .vk .flex-line { font-size: 0.825rem; }

  .ff .flex-header .col-1,
  .ff .flex-line .col-1     { display: none; }  
}
  
@media only screen and (max-width: 991px) {
  #bread,
  .vk .flex-header { height: 3.2rem;}  
  .vk .flex-header div,
  .vk .flex-footer div { font-size: 0.75rem; }
  
  .vk .flex-header .flex-header--segment:nth-child(1) > div:nth-child(1),
  .vk .flex-header .flex-header--segment:nth-child(2) > div:nth-child(1) { 
    border-left: none; 
  }  

  .vk .flex-header--segment:nth-child(1) { border-bottom: 2px solid white; }
  .vk .flex-header--segment,
  .vk .flex-line--segment{ 
    min-width: 496px;
    display: flex;
    flex-wrap: wrap; 
    flex: 1 1 50%;
    justify-content: center;
    align-self: stretch;
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
}

@media only screen and (max-width: 767px) {
  .mob-hide { display: none; }
}

@media only screen and (max-width: 720px) {
  
  .xref-dia-wrap a { font-size: 1rem; min-width:3rem; min-height:3rem; padding:0.25rem; text-align:center;}

  .part-spec-side2.pl-2 { padding-left: 0 !important; }
  .mobile-hide { display: none !important; transition: all 0.8s;}
  .mobile-only{display:block !important;}
  
  #bread,  
  .vk .flex-header { height: 4rem;}  
  .vk .flex-header div,
  .vk .flex-header button  { font-size: 18px; }

  .vk .flex-header--segment,
  .vk .flex-line--segment{ min-width: 320px; }
  }

  .vk .flex-line  { font-size: 12px; }  
  .vk .flex-line > .flex-line--segment:nth-child(2) {border-bottom: 3px solid #9ce; }  
  
  .grid-1-of-4 { flex: 1 1 25%; }
  .grid-3-of-4 { flex: 1 1 75%; }
    
  .vk .flex-header .flex-header--segment div:not(:nth-child(1)) { 
    border-left: 2px solid white; 
  }
  partSize-footer { margin-bottom: 15vh;}
  div.mobile-hide,
  .grid-1-of-4.mobile-hide { display:none; }
}