/* Column Styles */

.column-row                           { margin-bottom: 30px; }
.column-row:last-of-type              { margin-bottom: 0px; }
.column-row-border                    { padding: 0px 0px 30px 0px; border-bottom: 1px solid #CCCCCC; }
.column-row-box                       { border: 1px solid #CCCCCC; }
.column-row-zebra                     { margin: 0px; padding: 20px 15px; background: #EFEFEF; }
.column-row-zebra:nth-child(odd)      { background: #FFFFFF; }

@media (min-width: 769px) {
  /* General Styles */
  .column-row:after                     { content: ""; display: block; clear: both; }
  .column-row > .column:first-child     { margin-left: 0; }

  /* Normal Margin */
  .column         { float: left; margin-left: 4%; }
  .column-one     { width: 4.66666666667%; }
  .column-two     { width: 13.3333333333%; }
  .column-three   { width: 22%; }
  .column-four    { width: 30.6666666667%; }
  .column-five    { width: 39.3333333333%; }
  .column-six     { width: 48%; }
  .column-seven   { width: 56.6666666667%; }
  .column-eight   { width: 65.3333333333%; }
  .column-nine    { width: 74.0%; }
  .column-ten     { width: 82.6666666667%; }
  .column-eleven  { width: 91.3333333333%; }
  .column-twelve  { width: 100%; margin-left: 0; }

  /* Double Margin */
  .column-row-double-margin .column         { margin-left: 8%; }
  .column-row-double-margin .column-one     { width: 1%; }
  .column-row-double-margin .column-two     { width: 10%; }
  .column-row-double-margin .column-three   { width: 19%; }
  .column-row-double-margin .column-four    { width: 28%; }
  .column-row-double-margin .column-five    { width: 37%; }
  .column-row-double-margin .column-six     { width: 46%; }
  .column-row-double-margin .column-seven   { width: 55%; }
  .column-row-double-margin .column-eight   { width: 64%; }
  .column-row-double-margin .column-nine    { width: 73%; }
  .column-row-double-margin .column-ten     { width: 82%; }
  .column-row-double-margin .column-eleven  { width: 91%; }

  /* Half Margin */
  .column-row-half-margin .column         { margin-left: 2%; }
  .column-row-half-margin .column-one     { width: 6.5%; }
  .column-row-half-margin .column-two     { width: 15%; }
  .column-row-half-margin .column-three   { width: 23.5%; }
  .column-row-half-margin .column-four    { width: 32%; }
  .column-row-half-margin .column-five    { width: 40.5%; }
  .column-row-half-margin .column-six     { width: 49%; }
  .column-row-half-margin .column-seven   { width: 57.5%; }
  .column-row-half-margin .column-eight   { width: 66%; }
  .column-row-half-margin .column-nine    { width: 74.5%; }
  .column-row-half-margin .column-ten     { width: 83%; }
  .column-row-half-margin .column-eleven  { width: 91.5%; }

  /* Quarter Margin */
  .column-row-quarter-margin .column          { margin-left: 1%; }
  .column-row-quarter-margin .column-one      { width: 7.4166666666667%; }
  .column-row-quarter-margin .column-two      { width: 15.833333333333%; }
  .column-row-quarter-margin .column-three    { width: 24.25%; }
  .column-row-quarter-margin .column-four     { width: 32.666666666667%; }
  .column-row-quarter-margin .column-five     { width: 41.083333333333%; }
  .column-row-quarter-margin .column-six      { width: 49.5%; }
  .column-row-quarter-margin .column-seven    { width: 57.916666666667%; }
  .column-row-quarter-margin .column-eight    { width: 66.333333333333%; }
  .column-row-quarter-margin .column-nine     { width: 74.75%; }
  .column-row-quarter-margin .column-ten      { width: 83.166666666667%; }
  .column-row-quarter-margin .column-eleven   { width: 91.583333333333%; }

  /* No Margin */
  .column-row-no-margin .column         { margin-left: 0; }
  .column-row-no-margin .column-one     { width: 8.3333333333333%; }
  .column-row-no-margin .column-two     { width: 16.666666666667%; }
  .column-row-no-margin .column-three   { width: 25%; }
  .column-row-no-margin .column-four    { width: 33.333333333333%; }
  .column-row-no-margin .column-five    { width: 41.666666666667%; }
  .column-row-no-margin .column-six     { width: 50%; }
  .column-row-no-margin .column-seven   { width: 58.333333333333%; }
  .column-row-no-margin .column-eight   { width: 66.666666666667%; }
  .column-row-no-margin .column-nine    { width: 75%; }
  .column-row-no-margin .column-ten     { width: 83.333333333333%; }
  .column-row-no-margin .column-eleven  { width: 91.666666666667%; }

  /* RTL Columns */
  .column-row-rtl > .column:first-child                 { margin-left: 0; margin-right: 0; }
  .column-row-rtl > .column                             { float: right; margin-left: 0; margin-right: 4%; }
  .column-row-rtl > .column-twelve                      { margin-left: 0; margin-right: 0; }
  .column-row-rtl.column-row-double-margin > .column    { margin-left: 0; margin-right: 8%; }
  .column-row-rtl.column-row-half-margin > .column      { margin-left: 0; margin-right: 2%; }
  .column-row-rtl.column-row-quarter-margin > .column   { margin-left: 0; margin-right: 1%; }
  .column-row-rtl.column-row-no-margin > .column        { margin-left: 0; margin-right: 0; }
}

@media (max-width: 768px) {
  .column { margin-bottom: 15px; }
}

/* Flex Styles */

.flex-row                 { margin-bottom: 30px; }
.flex-row-box             { border: 1px solid #CCCCCC; }
.flex-row-middle          { align-items: center; }
.flex-row-box-border > .flex-column:not(:last-child) { border-right: 1px solid #CCCCCC; }

@media (min-width: 769px) {
  /* General Styles */
  .flex-row                 { display: flex; justify-content: space-between; }
  .flex-row:last-of-type    { margin-bottom: 0px; }

  /* Normal Margin */
  .flex-column        {  }
  .flex-column-one    { width: 4.66666666667%; }
  .flex-column-two    { width: 13.3333333333%; }
  .flex-column-three  { width: 22%; }
  .flex-column-four   { width: 30.6666666667%; }
  .flex-column-five   { width: 39.3333333333%; }
  .flex-column-six    { width: 48%; }
  .flex-column-seven  { width: 56.6666666667%; }
  .flex-column-eight  { width: 65.3333333333%; }
  .flex-column-nine   { width: 74.0%; }
  .flex-column-ten    { width: 82.6666666667%; }
  .flex-column-eleven { width: 91.3333333333%; }
  .flex-column-twelve { width: 100%; margin-left: 0; }

  /* Double Margin */
  .flex-row-double-margin .flex-column          {  }
  .flex-row-double-margin .flex-column-one      { width: 1%; }
  .flex-row-double-margin .flex-column-two      { width: 10%; }
  .flex-row-double-margin .flex-column-three    { width: 19%; }
  .flex-row-double-margin .flex-column-four     { width: 28%; }
  .flex-row-double-margin .flex-column-five     { width: 37%; }
  .flex-row-double-margin .flex-column-six      { width: 46%; }
  .flex-row-double-margin .flex-column-seven    { width: 55%; }
  .flex-row-double-margin .flex-column-eight    { width: 64%; }
  .flex-row-double-margin .flex-column-nine     { width: 73%; }
  .flex-row-double-margin .flex-column-ten      { width: 82%; }
  .flex-row-double-margin .flex-column-eleven   { width: 91%; }

  /* Half Margin */
  .flex-row-half-margin .flex-column          {  }
  .flex-row-half-margin .flex-column-one      { width: 6.5%; }
  .flex-row-half-margin .flex-column-two      { width: 15%; }
  .flex-row-half-margin .flex-column-three    { width: 23.5%; }
  .flex-row-half-margin .flex-column-four     { width: 32%; }
  .flex-row-half-margin .flex-column-five     { width: 40.5%; }
  .flex-row-half-margin .flex-column-six      { width: 49%; }
  .flex-row-half-margin .flex-column-seven    { width: 57.5%; }
  .flex-row-half-margin .flex-column-eight    { width: 66%; }
  .flex-row-half-margin .flex-column-nine     { width: 74.5%; }
  .flex-row-half-margin .flex-column-ten      { width: 83%; }
  .flex-row-half-margin .flex-column-eleven   { width: 91.5%; }

  /* No Margin */
  .flex-row-no-margin .flex-column          { margin-left: 0; }
  .flex-row-no-margin .flex-column-one      { width: 8.3333333333333%; }
  .flex-row-no-margin .flex-column-two      { width: 16.666666666667%; }
  .flex-row-no-margin .flex-column-three    { width: 25%; }
  .flex-row-no-margin .flex-column-four     { width: 33.333333333333%; }
  .flex-row-no-margin .flex-column-five     { width: 41.666666666667%; }
  .flex-row-no-margin .flex-column-six      { width: 50%; }
  .flex-row-no-margin .flex-column-seven    { width: 58.333333333333%; }
  .flex-row-no-margin .flex-column-eight    { width: 66.666666666667%; }
  .flex-row-no-margin .flex-column-nine     { width: 75%; }
  .flex-row-no-margin .flex-column-ten      { width: 83.333333333333%; }
  .flex-row-no-margin .flex-column-eleven   { width: 91.666666666667%; }

  /* RTL Columns */
  .flex-row-rtl { flex-direction: row-reverse; }

  /* Flex Column Separator */
  .flex-column-separator          { position: relative; }
  .flex-column-separator::after   { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-right: 1px solid #CCCCCC; }

  /* Flex Column Box */
  .flex-column-box { height: 100%; padding: 0px 20px; border: 1px solid #CCCCCC; }
}

@media (max-width: 768px) {
  .flex-column                    { margin-bottom: 15px; }
  .flex-column-separator          { margin: 0px !important; }
  .flex-column-separator::after   { content: ""; display: block; width: 100%; border-bottom: 1px solid #CCCCCC; }
}

/* Grid Styles */

.grid-row                 { margin-bottom: 30px; }
.grid-row-gap             { gap: 20px; }
.grid-row-gap-double      { gap: 40px; }
.grid-row-gap-triple      { gap: 60px; }
.grid-row-box             { border: 1px solid #CCCCCC; }
.grid-row-middle          { align-items: center; justify-items: center; }

@media (min-width: 769px) {
  /* General Styles */
  .grid-row                 { display: grid; justify-content: center; }
  .grid-row:last-of-type    { margin-bottom: 0px; }
  .grid-row > .grid-column  {  }

  /* Grid Columns */
  .grid-row-one     { grid-template-columns: repeat(1, 1fr); }
  .grid-row-two     { grid-template-columns: repeat(2, 1fr); }
  .grid-row-three   { grid-template-columns: repeat(3, 1fr); }
  .grid-row-four    { grid-template-columns: repeat(4, 1fr); }
  .grid-row-five    { grid-template-columns: repeat(5, 1fr); }
  .grid-row-six     { grid-template-columns: repeat(6, 1fr); }
  .grid-row-seven   { grid-template-columns: repeat(7, 1fr); }
  .grid-row-eight   { grid-template-columns: repeat(8, 1fr); }
  .grid-row-nine    { grid-template-columns: repeat(9, 1fr); }
  .grid-row-ten     { grid-template-columns: repeat(10, 1fr); }
  .grid-row-eleven  { grid-template-columns: repeat(11, 1fr); }
  .grid-row-twelve  { grid-template-columns: repeat(12, 1fr); }
}

@media (max-width: 768px) {
  .grid-column { margin-bottom: 15px; }
}

/* Table Styles */

.table-row                              { margin-bottom: 30px; }
.table-row-box                          { border: 1px solid #CCCCCC; }
.table-row-middle > .table-column       { vertical-align: middle; }
.table-row-pad > .table-column          { padding: 20px; }
.table-row-pad-double > .table-column   { padding: 40px; }
.table-row-pad-triple > .table-column   { padding: 60px; }
.table-row-box-border > .table-column:not(:last-child) { border-right: 1px solid #CCCCCC; }

@media (min-width: 769px) {
  /* General Styles */
  .table-row                              { display: table; width: 100%; }
  .table-row-inline                       { width: auto; }
  .table-row:last-of-type                 { margin-bottom: 0px; }

  /* Normal Margin */
  .table-column         { display: table-cell; height: 100%; margin-left: 4%; }
  .table-column-one     { width: 4.66666666667%; }
  .table-column-two     { width: 13.3333333333%; }
  .table-column-three   { width: 22%; }
  .table-column-four    { width: 30.6666666667%; }
  .table-column-five    { width: 39.3333333333%; }
  .table-column-six     { width: 48%; }
  .table-column-seven   { width: 56.6666666667%; }
  .table-column-eight   { width: 65.3333333333%; }
  .table-column-nine    { width: 74.0%; }
  .table-column-ten     { width: 82.6666666667%; }
  .table-column-eleven  { width: 91.3333333333%; }
  .table-column-twelve  { width: 100%; margin-left: 0; }
}

@media (max-width: 768px) {
  .table-row-box-border > .table-column:not(:last-child) { border: 0px; }
}