@charset "utf-8";
/* CSS Document */

/*  ///  --------------------  CHART  --------------------  ///  */

/*
  ------------  COPY OF GLOBAL VALUES  ------------

	/* ---------- Chart ---------- 
--od-chart-ff: var(--od-ff-condensed);
--od-chart-fz: var(--od-fz-sm);
--od-chart-fw: 500;
--od-chart-c: #232323;
--od-chart-bg:white;
--od-chart-lh: normal;
--od-chart-w: 100%;
--od-chart-h: auto;
--od-chart-p: 0;
--od-chart-m: 0;
--od-chart-gtc: 10rem 1fr 10rem;
--od-chart-gtr: auto;
--od-chart-gta: "col1 col2 col3";
--od-chart-cg: 1rem;
--od-chart-jc: default;
--od-chart-ai: default;
--od-chart-ta: center;
--od-chart-bdw: 1.5px;
--od-chart-bds: solid;
--od-chart-bdc: #dcdcdc;
--od-chart-bdr: 0 0 0.5rem 0.5rem;
--od-chart-bxshdw: 1px 2px 4px 2px rgb(0, 0, 0, .15);
*/

.chart-intro {
  background: white;
  padding: 0.5rem 0.5rem 1rem 0.5rem;
  border-bottom: 0.2rem solid var(--od-c-whiteRock);
}

.chartCon {
  --od-chart-w: 100%;
  --od-chart-m: 0;
  width: var(--od-chart-w);
  margin: var(--od-chart-m);
}

h3.chart-h3 {
  --od-chart-p: 0.25em 0;
  --od-chart-m: 0 0 0.35em 0;
  --od-chart-bg: rgb(0, 0, 0, 0.01);
  text-align: var(--od-chart-ta);
  margin: var(--od-chart-m);
  padding: var(--od-chart-p);
  box-shadow: var(--od-chart-bxs);
  background: var(--od-chart-bg);
}

h4.chart-h4 {
  --od-chart-bg: var(--od-c-offBlack);
  --od-chart-p: 0.35em 0;
  --od-chart-m: 0 -.3rem 1rem -.3rem;
  --od-chart-c: white;
  color: var(--od-chart-c);
  background: var(--od-chart-bg);
  text-align: var(--od-chart-ta);
  margin: var(--od-chart-m);
  padding: var(--od-chart-p);
}

.chart-section {
  --od-chart-p: 0 .3rem 1rem .3rem;
  --od-chart-m: 0 0 1rem 0;
  position: relative;
  border-radius: var(--od-chart-bdr);
  background: var(--od-chart-bg);
  padding: var(--od-chart-p);
  margin: var(--od-chart-m);
}

.chart-header {
  --od-chart-bg: var(--od-c-bisonHide);
  --od-chart-m: 0 0 0.2em 0;
  background: var(--od-chart-bg);
  margin: var(--od-chart-m);
}

.chart-gridCon>*,
[class^="chart-gridCon"]>* {
  --od-chart-c: #232323;
  --od-chart-p: 0.35em;
  --od-chart-pt: 0.35em;
  --od-chart-pr: 0.35em;
  --od-chart-pb: 0.35em;
  --od-chart-pl: 0.35em;
  font-family: var(--od-chart-ff);
  font-size: var(--od-chart-fz);
  font-weight: var(--od-chart-fw);
  color: var(--od-chart-c);
  padding: var(--od-chart-p);
  padding-top: var(--od-chart-pt);
  padding-right: var(--od-chart-pr);
  padding-bottom: var(--od-chart-pb);
  padding-left: var(--od-chart-pl);
}

.chart-header>* {
  --od-chart-c: black;
  --od-chart-ff: var(--od-ff-heading);
  --od-chart-fz: var(--od-fz-ms);
  color: var(--od-chart-c);
  font-family: var(--od-chart-ff);
  font-size: var(--od-chart-fz);
  line-height: var(--od-chat-lh);
  text-transform: uppercase;
}

.chart-col1 {
  grid-area: col1;
  --od-chart-bdw: 1.5px;
  --od-chart-bds: solid;
  text-align: var(--od-chart-ta);
  justify-content: var(--od-chart-jc);
  border-right: var(--od-chart-bdw) var(--od-chart-bds) var(--od-chart-bdc);
}

.chart-col2 {
  grid-area: col2;
  text-align: var(--od-chart-ta);
  justify-content: var(--od-chart-jc);
}

.chart-col3 {
  --od-chart-bdw: 1.5px;
  --od-chart-bds: solid;
  grid-area: col3;
  column-gap: var(--od-chart-cg);
  text-align: var(--od-chart-ta);
  justify-content: var(--od-chart-jc);
  border-left: var(--od-chart-bdw) var(--od-chart-bds) var(--od-chart-bdc);
}

.chart-gridCon {
  --od-chart-p: 0.2em 0;
  --od-chart-dis: grid;
  --od-chart-jc: center;
  display: var(--od-chart-dis);
  grid-template-columns: var(--od-chart-gtc);
  grid-template-rows: var(--od-chart-gtr);
  grid-template-areas: var(--od-chart-gta);
  text-align: var(--od-chart-ta);
  padding: var(--od-chart-p);
}

.chart-header.chart-gridCon {
  --od-chart-p: 0 .3rem;
  padding: var(--od-chart-p);
}


.chart-gridCon:nth-child(even) {
  --od-chart-bg: #efefef;
  background-color: var(--od-chart-bg);
}



/*  ///  ----------  TRAINING MOS CHART  ----------  ///  */

[id^="train"] .chart-gridCon>* {
  grid-template-columns: 7.5rem 1fr;
}




/*  ///  -----  MEDIA QUERIES  -----  ///  */


@media (max-width: 600px) {

  .chart-gridCon {
    --od-chart-gtc: 9rem 1fr;
    --od-chart-gta: "col1 col2"
      "col1 col3";
  }

  .chart-header {
    row-gap: .2rem;
  }

  .chart-gridCon .chart-col3 {
    --od-chart-pt: 0;
    border-left: unset;
    border-top: 1.5px solid #dcdcdc;
  }

  .chart-gridCon :is(.chart-col2, .chart-col3) {
    --od-chart-ta: left;
    --od-chart-pt: 0.2em;
    --od-chart-pr: 0.5em;
    --od-chart-pb: 0.2em;
    --od-chart-pl: 0.5em;
    text-align: var(--od-chart-ta);
    border-right: unset;
  }

  .chart-gridCon .chart-col1 {
    --od-chart-dis: flex;
    --od-chart-ai: center;
    --od-chart-jc: center;
    --od-chart-w: 7rem;
    display: var(--od-chart-dis);
    align-items: var(--od-chart-ai);
    justify-content: var(--od-chart-jc);
  }

}

/*  end max-width 600px  */



/*
  ----------------  HTML CODE  ----------------
        <!-- /// TRAINING /// -->
        <section id="trainGordon" class="noContainer">
          <h2 class="darkBar">Training Units</h2>

          <div class="contentContainer">

            <!--  ///  CHART HEADER   ///-->
            <div class="chart-header chart-gridCon">
              <div class="chart-col1">MOS</div>
              <div class="chart-col2">Title of MOS</div>
              <div class="chart-col3">Length</div>
            </div>

            <h4 class="chart-h4">Enlisted</h4>

            <div class="chart-section">

              <div class="chart-gridCon">
                <div class="chart-col1">94D</div>
                <div class="chart-col2">Air Traffic Control Equipment Repairer</div>
                <div class="chart-col3">27 weeks 1 day</div>
              </div>
              <div class="chart-gridCon">
                <div class="chart-col1">94E</div>
                <div class="chart-col2">Radio And Communications Security Repairer</div>
                <div class="chart-col3">21 weeks 1 day</div>
              </div>
              <div class="chart-gridCon">
                <div class="chart-col1">94F</div>
                <div class="chart-col2">Computer/Detection Systems Repairer</div>
                <div class="chart-col3">20 weeks 2 days</div>
              </div>
              <div class="chart-gridCon">
                <div class="chart-col1">94R</div>
                <div class="chart-col2">Avionics and Survivability Equipment Repairer</div>
                <div class="chart-col3">17 weeks 3 days</div>
              </div>

            </div><!-- /.chart-section -->

            <h4 class="chart-h4">Warrant Officers</h4>

            <div class="chart-section">

              <div class="chart-gridCon">
                <div class="chart-col1">948B (WOBC)</div>
                <div class="chart-col2">Electronic Systems Maintenance</div>
                <div class="chart-col3">14 weeks 1 day</div>
              </div>
              <div class="chart-gridCon">
                <div class="chart-col1">948B (WOAC)</div>
                <div class="chart-col2">Electronic Systems Maintenance</div>
                <div class="chart-col3">9 weeks 1 day</div>
              </div>

            </div><!-- /.chart-section -->

          </div><!-- .contentContainer -->

        </section>

*/

/*  end of file  */