/* TAB COMPONENT - pure CSS (no Javascript) */

/* OVERVIEW:  In order to create a set of tabs and their corresponding content,
   it is necessary to have a group of radio buttons serve as the underlying
   structural element for the tabs because a radio button group provides
   the ability, within HTML/CSS, to keep track of a single CHECKED item.
   Similarly, tabs also  have a single tab selected at any given time, so
   that is why the radio group is used.

   In using a group of radio buttons as the underlying elements to track
   which tab is SELECTED (CHECKED in radio button parlance), it is not
   necessary for the actual radio buttons to be visible in order to work.
   In addition to a radio button itself being able to accept a click from
   the user, the HTML Label element corresponding to each INPUT/radio button 
   can also accept a mouse click as long as it is VISIBLE - and if the
   label is visible, then it can be styled.  Therefore, in order to create
   the tabs, a set of radio buttons is styled so that the buttons are
   hidden, and then the corresponding labels are styled as tabs.

   Because of the limited way in which CSS selectors work (one-way 
   heirarchical selection), it is necessary to employ CSS Flexbox in 
   order to properly POSITION on the screen the various HTML elements 
   that make up the tabs and tab content.  This is because the ordering 
   of elements in the HTML had to be created in order to cause the DOM
   to be structured in such a way that elements could be selected for 
   styling based upon the currently checked item - but this ordering 
   within the HTML does not correspond to the order in which items
   must be presented on-screen.  The ordering of the elements is
   the last set of rules applied.

   Naming conventions and styling selectors are created in such a way 
   as not to affect any content that is displayed in the tab set and
   rules are fully name-spaced so as not to interfere with any other 
   items on the page so long as the #tabscontainer name is unique to the page.*/

/* Style the overall container */
.tabscontainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  position: relative;
  margin: 30px 0 30px 0;
  padding: 0;
  width: 100%;
}
/* Set the font-family for all text within the .tabscontainer */
.tabscontainer * {font-family: 'Source Sans Pro', sans-serif;}
/* Style the radio group that corresponds to the tabs */   
.tabscontainer > [name="radiogroupfortabs"] {
  position: absolute; 
  visibility: hidden; 
}
/* Set Flexbox ordering of radio items within the .tabscontainer.  
   A unique rule has to be created for each tab. */
.tabscontainer > #radiofortab1{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;}
.tabscontainer > #radiofortab2{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;}
.tabscontainer > #radiofortab3{-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3;}
.tabscontainer > #radiofortab4{-webkit-box-ordinal-group:5;-ms-flex-order:4;order:4;}
/* Style all radio group LABELS (by class) to look like tabs.
   The currently selected tab is re-styled by another rule
   near the end.  Could use the background-image attribute
   here instead of colors in order to give the tabs any 
   appearance.  If doing this, then would have to create
   a separate rule for each tab and */
.tabscontainer > [id^="tab-label"] {
  position: relative;
  top: 0px;
  max-height: 18px;  
  margin: 4px 2px 0 0;
  display: inline-table;  
  padding: 12px 21px;
  border-radius: 5px 5px 0 0;
  border-width: 1px 1px 1px 1px;
  border-style: solid;
  border-color: #000000;
  color: #0e0360;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  background: #d0d0d0; /* was #B0B0B0; */
  cursor: pointer;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
/* Style any unselected tab (INPUT element's label) when the pointer hovers over it.
   Could use the background-image attribute here instead of colors in order to give 
   the tab any appearance. */
.tabscontainer > [id^="tab-label"]:hover {
  background: #B0B0B0; /* was #969696;  */
}
/* Style all of the content DIVs including setting DISPLAY to None to start with.
   The DIV corresponding to the currently selected tab is displayed by the rule
   near the end. */
.tabscontainer > [id^="tab-content"] {
    -webkit-box-ordinal-group: 1000;
    -ms-flex-order: 999;
    order: 999; /* Set to a high value - just has to be at least one more than the number of tabs */
    display: none;    
    z-index: 2;
    top: 48px;
    width: 100%;
    min-height: 5em;
    overflow: hidden;    
    font-size: 14px !important;
    border-width: 1px;
    border-style: solid;
    padding: 20px 25px 25px 25px;
    background: #ffffff; /* #d0d0d0; */
    margin-top: -1px;
}

.tabscontainer table {
  border-collapse:collapse;
  margin-top: 10px;
  width: 100%;
}

.tabscontainer h2 {
  text-align: left;
}

.tabscontainer h3:first-of-type {
  margin-top: 0.5rem;
}
.tabscontainer div:not(#tab-content1) h3 {
  text-align: center; 
}
.tabscontainer #tab-content1 h3 {
  margin-top: 2rem;
}

.tabscontainer thead {
  padding: 6px 0 6px 0; 
  text-align: center; 
  font-size: 16px; 
  color: #0e0360;"
}

.tabscontainer th {
  text-align: left;
  padding-right: 7px;
  min-width: 100px;
  vertical-align: text-top;
  font-weight: bold;
  color: #000000; /* was #0e0360; */
  padding: 4px;
}

.tabscontainer table td {
  padding: 4px;
}

.tabscontainer .media-items.grid {
  margin-top: 1.5rem;
}

.tabscontainer p img {
  max-width: 100%;
}

.tabscontainer div[id^="tab-content"] table.striped tr:nth-of-type(odd) {
  background-color: #d8d8d8;
  padding: 7px;
}

.tabscontainer .option_group {
  margin-bottom: 25px;
}

.tabscontainer .option_group h3 {
  color: #0e0360;
  text-align: center;
}

/* Style the currently selected tab (checked INPUT element's label) 
   by first selecting the lone checked item from the radiogroup for 
   the tabs and then select the label (by class) that follows the 
   checked INPUT element (INPUT element within the named group - 
   radiogroupfortabs) in order to apply the following effects 
   to just the selected tab/label.  Could use the background-image 
   attribute here instead of colors in order to give the tab any
   appearance. */
.tabscontainer > [name="radiogroupfortabs"]:checked + [id^="tab-label"] {
  z-index: 4;
  margin-top: 0px;
  padding-top: 16px;
  background: #ffffff; /* was #d0d0d0; */
  border-color: #000 #000 #ffffff #000; /*was #000 #000 #d0d0d0 #000;*/
  font-weight: bold;
}
/* Display the content DIV that corresponds to the selected tab (because 
   of the limitations of CSS selectors, this could not be done with a 
   single rule.  A unique rule has to be created for each tab/tab content
   within the tab set.) */
#radiofortab1:checked ~ #tab-content1{display: block;}
#radiofortab2:checked ~ #tab-content2{display: block;}
#radiofortab3:checked ~ #tab-content3{display: block;}
#radiofortab4:checked ~ #tab-content4{display: block;}
#radiofortab5:checked ~ #tab-content5{display: block;}

@media screen and (max-width: 1140px) {
  .tabscontainer > [id^="tab-label"] {
    border-radius: 5px !important;
    border: 1px solid black !important;
  }
  .tabscontainer > [id^="tab-label"] {
    margin-bottom: 1px;
  }
  .tabscontainer > [id^="tab-label"]:last-of-type {
    margin-bottom: 6px;
  }
}

/* ------------------- END OF TAB COMPONENT --------------------- */


/* ******** IE Hacks for display:grid ******** */
_:-ms-lang(x), .grid > div:nth-of-type(1) { -ms-grid-column: 1; }
_:-ms-lang(x), .grid > div:nth-of-type(2) { -ms-grid-column: 2; }
_:-ms-lang(x), .grid > div:nth-of-type(3) { -ms-grid-column: 3; }
_:-ms-lang(x), .grid > div:nth-of-type(4) { -ms-grid-column: 4; }
/* ******** end hacks ******** */

/* ************************* Products Grid ********************** */
/* ******** Start with IE Hacks ******** */
/* display as flexbox instead of grid */
_:-ms-lang(x), .products.grid { 
  display: -webkit-box !important; 
  display: -ms-flexbox !important; 
  display: flex !important;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
_:-ms-lang(x), .products.grid .mediaitem {
  margin-bottom: 15px;
}
/* ******** end hacks ******** */
.products.grid {
  display: -ms-grid;
  display: grid;
  -ms-flex-line-pack: justify;
  grid-gap: 15px;
  grid-auto-rows: -webkit-min-content;
  grid-auto-rows: min-content;
}
@media screen and (max-width: 650px) {
  .products.grid {
    grid-template-columns: 1fr 1fr;
    -ms-grid-columns: 1fr 1fr;
  }
}
@media screen and (max-width: 250px) {
  .products.grid {
    grid-template-columns: 1fr;
    -ms-grid-columns: 1fr;
  }
}

/* ************************* Media Items/Videos Grid ********************** */
/* Start with IE hacks */
/* Put padding at right of some grid items since grid-gap not honored */
_:-ms-lang(x), .media-items.grid > div { margin-right: 15px\0; }

.media-items.grid, .videos-only.grid {
  display: -ms-grid;
    display: grid;
  grid-gap: 15px;
  -ms-flex-line-pack: justify;
      align-content: space-between;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  grid-auto-rows: -webkit-min-content;
  grid-auto-rows: min-content;
}
/* .media-items.grid:not(:first-child), .videos-only.grid:not(:first-child) {
  margin-top: 20px;
} */
@media screen and (max-width: 449px) {
  .media-items.grid, .videos-only.grid {
    grid-template-columns: minmax(140px,300px);
    -ms-grid-columns: minmax(140px,300px);
  }
}
@media screen and (min-width: 450px) {
  .media-items.grid {
    grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr);
    -ms-grid-columns: minmax(150px, 1fr) minmax(150px, 1fr);
  }
  .videos-only.grid {
    grid-template-columns: minmax(150px, 300px) minmax(150px, 300px);
    -ms-grid-columns: minmax(150px, 300px) minmax(150px, 300px);
  }
}
@media screen and (min-width: 750px) {
  .media-items.grid {
    grid-template-columns: 1fr 1fr 1fr;
    -ms-grid-columns: 1fr 1fr 1fr;
  }
}
@media screen and (min-width: 1200px) {
  .media-items.grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    -ms-grid-columns: 1fr 1fr 1fr 1fr;
  }
  .videos-only.grid {
    grid-template-columns: minmax(150px, 300px) minmax(150px, 300px) minmax(150px, 300px);
    -ms-grid-columns: minmax(150px, 300px) minmax(150px, 300px) minmax(150px, 300px);
  }
}
.media-items.grid + .videos-only.grid {
  margin-top: 1rem;
}
.mediaitem {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
        -ms-flex-direction: column;
          flex-direction: column;
    justify-content: center;
    border-radius: 10px; /* This and the following line placed here just to show where media items will be displayed */
    background-color: #eeeeee;
    border: 1px solid #d0d0d0;
    padding: 10px;
}
.mediaitem iframe {
  width: 100%;
}
.docwithpreview {
    text-align: center;
    margin-top: 2.25em;
}
.docpreviewcaption {
  font-weight: 700;
}
.docpreviewimg {
    margin-top: 0.5em;
}
.docpreviewimg img {
    max-width: 100%;
}
#main_img {
  min-width: 1px; /* IE hack */
}
.mediaitem .mediaitemthumb {
  min-height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mediaitemthumb a {
  width: 100%;
  min-width: 1px;/* IE hack */
  display: flex;
  justify-content: center;
  height: auto;
  min-height: 1px;
}
.mediaitemthumb img {
  max-width: 100%;
  height: auto;
  min-width: 1px;/* IE hack */
}
.mediaitemcaption{
  font-family: "Trebuchet MS", Verdana, Helvetica, Arial;
  font-weight: bold;
  font-size: 10pt;
  color: #0e0360;
  min-height: 20px;
  text-align: center;  
  margin-top: 7px;
}

.product-images.grid {
  display: -ms-grid;
      display: grid;
  border-bottom: 1px solid black;
  grid-gap: 15px;
  -ms-grid-columns: 1fr minmax(0px, 175px);
  grid-template-columns: 1fr minmax(0px, 175px);
  padding-bottom: 30px;
}
/* IE hack to put padding at bottom of .two-1fr365px since grid-gap not honored */
_:-ms-lang(x), .product-images.grid > div:first-of-type { margin-right: 15px\0; }

@media screen and (max-width: 650px) {
  .product-images.grid {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr
  }
}
.product-images.grid > div:nth-of-type(1) {
  -ms-grid-column: 1;
}
.product-images.grid > div:nth-of-type(2) {
  -ms-grid-column: 2;
}

.product-images.grid img {
  width: 100%;
}

#capabilities_statement {
    display: -ms-grid;
    display: grid;
    grid-gap: 15px;
    padding: 1rem;
    background: #eee;
    margin-top: 1.5rem;
    border-radius: 10px;
    border: 1px solid #d0d0d0;
    align-items: center;
}
#capabilities_statement div {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 1rem;
    color: #0e0360;
}
#capabilities_statement > div:first-of-type {
    text-align: center;
}
@media screen and (max-width:480px) {
    #capabilities_statement {
        grid-template-rows: 70px 1fr;
    }
}
@media screen and (min-width:481px) {
    #capabilities_statement {
        grid-template-columns: 70px 1fr;
    }
}
/* IE hacks (assumes always large screen) */
_:-ms-lang(x), #capabilities_statement > div:last-of-type { padding-left: 15px\0; }
#capabilities_statement > div:first-of-type {
    -ms-grid-column: 1;
}
#capabilities_statement > div:last-of-type {
    -ms-grid-column: 2;
}