@northdata/fomantic-ui 2.8.722 → 2.9.400

package/lib/semantic-ui/dist/components/grid.css

@@ -1,10 +1,10 @@
 /*!
- * # Fomantic-UI - Grid
- * http://github.com/fomantic/Fomantic-UI/
+ * # Fomantic-UI 2.9.4 - Grid
+ * https://github.com/fomantic/Fomantic-UI/
  *
  *
  * Released under the MIT license
- * http://opensource.org/licenses/MIT
+ * https://opensource.org/licenses/MIT
  *
  */
 
@@ -14,38 +14,17 @@
 *******************************/
 
 .ui.grid {
-  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;
-  -webkit-box-align: stretch;
-      -ms-flex-align: stretch;
-          align-items: stretch;
+  flex-flow: row wrap;
+  align-items: stretch;
   padding: 0;
 }
 
-/*----------------------
+/* ----------------------
       Remove Gutters
------------------------*/
-
+----------------------- */
 .ui.grid {
-  margin-top: -1rem;
-  margin-bottom: -1rem;
-  margin-left: -1rem;
-  margin-right: -1rem;
-}
-.ui.relaxed.grid {
-  margin-left: -1.5rem;
-  margin-right: -1.5rem;
-}
-.ui[class*="very relaxed"].grid {
-  margin-left: -2.5rem;
-  margin-right: -2.5rem;
+  margin: -1rem -1rem;
 }
 
 /* Preserve Rows Spacing on Consecutive Grids */
@@ -53,10 +32,9 @@
   margin-top: 1rem;
 }
 
-/*-------------------
+/* -------------------
        Columns
---------------------*/
-
+-------------------- */
 
 /* Standard 16 column */
 .ui.grid > .column:not(.row),
@@ -73,37 +51,24 @@
   padding-right: 1rem;
 }
 
-/*-------------------
+/* -------------------
         Rows
---------------------*/
-
+-------------------- */
 .ui.grid > .row {
   position: relative;
-  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;
-  -webkit-box-pack: inherit;
-      -ms-flex-pack: inherit;
-          justify-content: inherit;
-  -webkit-box-align: stretch;
-      -ms-flex-align: stretch;
-          align-items: stretch;
+  flex-flow: row wrap;
+  justify-content: inherit;
+  align-items: stretch;
   width: 100% !important;
   padding: 0;
   padding-top: 1rem;
   padding-bottom: 1rem;
 }
 
-/*-------------------
+/* -------------------
        Columns
---------------------*/
-
+-------------------- */
 
 /* Vertical padding when no rows */
 .ui.grid > .column:not(.row) {
@@ -115,19 +80,17 @@
   margin-bottom: 0;
 }
 
-/*-------------------
+/* -------------------
       Content
---------------------*/
-
+-------------------- */
 .ui.grid > .row > img,
 .ui.grid > .row > .column > img {
   max-width: 100%;
 }
 
-/*-------------------
+/* -------------------
     Loose Coupling
---------------------*/
-
+-------------------- */
 
 /* Collapse Margin on Consecutive Grid */
 .ui.grid > .ui.grid:first-child {
@@ -145,9 +108,7 @@
 
 /* Align Dividers with Gutter */
 .ui.grid .row + .ui.divider {
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
+  flex-grow: 1;
   margin: 1rem 1rem;
 }
 .ui.grid .column + .ui.vertical.divider {
@@ -157,8 +118,7 @@
 /* Remove Border on Last Horizontal Segment */
 .ui.grid > .row > .column:last-child > .horizontal.segment,
 .ui.grid > .column:last-child > .horizontal.segment {
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
 }
 
 
@@ -167,10 +127,9 @@
 *******************************/
 
 
-/*-------------------
+/* -------------------
      Column Count
---------------------*/
-
+-------------------- */
 
 /* Assume full width with one column */
 .ui.grid > .column:only-child,
@@ -294,10 +253,9 @@
   width: 6.25% !important;
 }
 
-/*-------------------
-    Column Width
---------------------*/
-
+/* -------------------
+        Column Width
+    -------------------- */
 
 /* Sizing Combinations */
 .ui.grid > .row > [class*="one wide"].column,
@@ -397,10 +355,9 @@
   width: 100% !important;
 }
 
-/*----------------------
-    Width per Device
------------------------*/
-
+/* ----------------------
+        Width per Device
+    ----------------------- */
 
 /* Mobile Sizing Combinations */
 @media only screen and (min-width: 320px) and (max-width: 767.98px) {
@@ -902,10 +859,9 @@
   }
 }
 
-/*----------------------
-     Vertically Aligned
-  -----------------------*/
-
+/* ----------------------
+       Vertically Aligned
+    ----------------------- */
 
 /* Top Aligned */
 .ui[class*="top aligned"].grid > .column:not(.row),
@@ -913,13 +869,9 @@
 .ui.grid > [class*="top aligned"].row > .column,
 .ui.grid > [class*="top aligned"].column:not(.row),
 .ui.grid > .row > [class*="top aligned"].column {
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  flex-direction: column;
   vertical-align: top;
-  -ms-flex-item-align: start !important;
-      align-self: flex-start !important;
+  align-self: flex-start !important;
 }
 
 /* Middle Aligned */
@@ -928,13 +880,9 @@
 .ui.grid > [class*="middle aligned"].row > .column,
 .ui.grid > [class*="middle aligned"].column:not(.row),
 .ui.grid > .row > [class*="middle aligned"].column {
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  flex-direction: column;
   vertical-align: middle;
-  -ms-flex-item-align: center !important;
-      align-self: center !important;
+  align-self: center !important;
 }
 
 /* Bottom Aligned */
@@ -943,194 +891,88 @@
 .ui.grid > [class*="bottom aligned"].row > .column,
 .ui.grid > [class*="bottom aligned"].column:not(.row),
 .ui.grid > .row > [class*="bottom aligned"].column {
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  flex-direction: column;
   vertical-align: bottom;
-  -ms-flex-item-align: end !important;
-      align-self: flex-end !important;
+  align-self: flex-end !important;
 }
 
-/*----------------------
-    Horizontally Centered
-  -----------------------*/
-
+/* ----------------------
+      Horizontally Centered
+    ----------------------- */
 
 /* Left Aligned */
 .ui[class*="left aligned"].grid > .column,
 .ui[class*="left aligned"].grid > .row > .column,
 .ui.grid > [class*="left aligned"].row > .column,
-.ui.grid > [class*="left aligned"].column.column,
-.ui.grid > .row > [class*="left aligned"].column.column {
+.ui.ui.grid > [class*="left aligned"].column,
+.ui.ui.grid > .row > [class*="left aligned"].column {
   text-align: left;
-  -ms-flex-item-align: inherit;
-      align-self: inherit;
+  align-self: inherit;
 }
 
 /* Center Aligned */
 .ui[class*="center aligned"].grid > .column,
 .ui[class*="center aligned"].grid > .row > .column,
 .ui.grid > [class*="center aligned"].row > .column,
-.ui.grid > [class*="center aligned"].column.column,
-.ui.grid > .row > [class*="center aligned"].column.column {
+.ui.ui.grid > [class*="center aligned"].column,
+.ui.ui.grid > .row > [class*="center aligned"].column {
   text-align: center;
-  -ms-flex-item-align: inherit;
-      align-self: inherit;
+  align-self: inherit;
 }
 .ui[class*="center aligned"].grid {
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  justify-content: center;
 }
 
 /* Right Aligned */
 .ui[class*="right aligned"].grid > .column,
 .ui[class*="right aligned"].grid > .row > .column,
 .ui.grid > [class*="right aligned"].row > .column,
-.ui.grid > [class*="right aligned"].column.column,
-.ui.grid > .row > [class*="right aligned"].column.column {
+.ui.ui.grid > [class*="right aligned"].column,
+.ui.ui.grid > .row > [class*="right aligned"].column {
   text-align: right;
-  -ms-flex-item-align: inherit;
-      align-self: inherit;
-}
-
-/* Justified */
-.ui.justified.grid > .column,
-.ui.justified.grid > .row > .column,
-.ui.grid > .justified.row > .column,
-.ui.grid > .justified.column.column,
-.ui.grid > .row > .justified.column.column {
-  text-align: justify;
-  -webkit-hyphens: auto;
-      -ms-hyphens: auto;
-          hyphens: auto;
+  align-self: inherit;
 }
 
-/*----------------------
+/* ----------------------
          Colored
------------------------*/
-
+----------------------- */
 .ui.grid > .primary.row,
 .ui.grid > .primary.column,
 .ui.grid > .row > .primary.column {
   background-color: #007388;
-  color: #FFFFFF;
+  color: #fff;
 }
 .ui.grid > .secondary.row,
 .ui.grid > .secondary.column,
 .ui.grid > .row > .secondary.column {
-  background-color: #1B1C1D;
-  color: #FFFFFF;
-}
-.ui.grid > .red.row,
-.ui.grid > .red.column,
-.ui.grid > .row > .red.column {
-  background-color: #af4e4a;
-  color: #FFFFFF;
-}
-.ui.grid > .orange.row,
-.ui.grid > .orange.column,
-.ui.grid > .row > .orange.column {
-  background-color: #F2711C;
-  color: #FFFFFF;
-}
-.ui.grid > .yellow.row,
-.ui.grid > .yellow.column,
-.ui.grid > .row > .yellow.column {
-  background-color: #FBBD08;
-  color: #FFFFFF;
-}
-.ui.grid > .olive.row,
-.ui.grid > .olive.column,
-.ui.grid > .row > .olive.column {
-  background-color: #9baf66;
-  color: #FFFFFF;
-}
-.ui.grid > .green.row,
-.ui.grid > .green.column,
-.ui.grid > .row > .green.column {
-  background-color: #66af8b;
-  color: #FFFFFF;
-}
-.ui.grid > .teal.row,
-.ui.grid > .teal.column,
-.ui.grid > .row > .teal.column {
-  background-color: #66afac;
-  color: #FFFFFF;
-}
-.ui.grid > .blue.row,
-.ui.grid > .blue.column,
-.ui.grid > .row > .blue.column {
-  background-color: #007388;
-  color: #FFFFFF;
-}
-.ui.grid > .violet.row,
-.ui.grid > .violet.column,
-.ui.grid > .row > .violet.column {
-  background-color: #a166af;
-  color: #FFFFFF;
-}
-.ui.grid > .purple.row,
-.ui.grid > .purple.column,
-.ui.grid > .row > .purple.column {
-  background-color: #af6690;
-  color: #FFFFFF;
-}
-.ui.grid > .pink.row,
-.ui.grid > .pink.column,
-.ui.grid > .row > .pink.column {
-  background-color: #E03997;
-  color: #FFFFFF;
-}
-.ui.grid > .brown.row,
-.ui.grid > .brown.column,
-.ui.grid > .row > .brown.column {
-  background-color: #af9666;
-  color: #FFFFFF;
-}
-.ui.grid > .grey.row,
-.ui.grid > .grey.column,
-.ui.grid > .row > .grey.column {
-  background-color: #9ab5c1;
-  color: #FFFFFF;
-}
-.ui.grid > .black.row,
-.ui.grid > .black.column,
-.ui.grid > .row > .black.column {
-  background-color: #1B1C1D;
-  color: #FFFFFF;
+  background-color: #1b1c1d;
+  color: #fff;
 }
 
-/*----------------------
-      Equal Width
------------------------*/
-
+/* ----------------------
+          Equal Width
+    ----------------------- */
 .ui[class*="equal width"].grid > .column:not(.row),
 .ui[class*="equal width"].grid > .row > .column,
 .ui.grid > [class*="equal width"].row > .column {
   display: inline-block;
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
+  flex-grow: 1;
 }
 .ui[class*="equal width"].grid > .wide.column,
 .ui[class*="equal width"].grid > .row > .wide.column,
 .ui.grid > [class*="equal width"].row > .wide.column {
-  -webkit-box-flex: 0;
-      -ms-flex-positive: 0;
-          flex-grow: 0;
+  flex-grow: 0;
 }
 
-/*-------------------
-        Stackable
-  --------------------*/
-
+/* -------------------
+          Stackable
+    -------------------- */
 @media only screen and (max-width: 767.98px) {
-  .ui.stackable.grid {
+  body > .ui.stackable.grid,
+  .ui:not(.segment):not(.grid) .ui.stackable.grid {
     width: auto;
-    margin-left: 0 !important;
-    margin-right: 0 !important;
+    margin-left: 0;
+    margin-right: 0;
   }
   .ui.stackable.grid > .row > .wide.column,
   .ui.stackable.grid > .wide.column,
@@ -1140,9 +982,8 @@
   .ui.stackable.grid > .column:not(.row),
   .ui.grid > .stackable.stackable.stackable.row > .column {
     width: 100% !important;
-    margin: 0 0 !important;
-    -webkit-box-shadow: none !important;
-            box-shadow: none !important;
+    margin: 0 !important;
+    box-shadow: none !important;
     padding: 1rem 1rem;
   }
   .ui.stackable.grid:not(.vertically) > .row {
@@ -1160,8 +1001,8 @@
 /* Don't pad inside segment or nested grid */
   .ui.grid .ui.stackable.grid,
   .ui.segment:not(.vertical) .ui.stackable.page.grid {
-    margin-left: -1rem !important;
-    margin-right: -1rem !important;
+    margin-left: -1rem;
+    margin-right: -1rem;
   }
   
 /* Divided Stackable */
@@ -1176,141 +1017,145 @@
   .ui.stackable.celled.grid > .row > .column,
   .ui.stackable.divided:not(.vertically).grid > .row > .column {
     border-top: 1px solid rgba(34, 36, 38, 0.15);
-    -webkit-box-shadow: none !important;
-            box-shadow: none !important;
+    box-shadow: none !important;
     padding-top: 2rem !important;
     padding-bottom: 2rem !important;
   }
 }
 
-/*----------------------
+/* ----------------------
      Only (Device)
------------------------*/
-
+----------------------- */
 
 /* These include arbitrary class repetitions for forced specificity */
 
 /* Mobile Only Hide */
 @media only screen and (max-width: 767.98px) {
-  .ui[class*="tablet only"].grid.grid.grid:not(.mobile),
-  .ui.grid.grid.grid > [class*="tablet only"].row:not(.mobile),
-  .ui.grid.grid.grid > [class*="tablet only"].column:not(.mobile),
-  .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.mobile) {
+  .ui.ui.ui[class*="tablet only"].grid:not(.mobile),
+  .ui.ui.ui.grid > [class*="tablet only"].row:not(.mobile),
+  .ui.ui.ui.grid > [class*="tablet only"].column:not(.mobile),
+  .ui.ui.ui.grid > .row > [class*="tablet only"].column:not(.mobile) {
     display: none !important;
   }
-  .ui[class*="computer only"].grid.grid.grid:not(.mobile),
-  .ui.grid.grid.grid > [class*="computer only"].row:not(.mobile),
-  .ui.grid.grid.grid > [class*="computer only"].column:not(.mobile),
-  .ui.grid.grid.grid > .row > [class*="computer only"].column:not(.mobile) {
+  .ui.ui.ui[class*="computer only"].grid:not(.mobile),
+  .ui.ui.ui.grid > [class*="computer only"].row:not(.mobile),
+  .ui.ui.ui.grid > [class*="computer only"].column:not(.mobile),
+  .ui.ui.ui.grid > .row > [class*="computer only"].column:not(.mobile) {
     display: none !important;
   }
-  .ui[class*="large screen only"].grid.grid.grid:not(.mobile),
-  .ui.grid.grid.grid > [class*="large screen only"].row:not(.mobile),
-  .ui.grid.grid.grid > [class*="large screen only"].column:not(.mobile),
-  .ui.grid.grid.grid > .row > [class*="large screen only"].column:not(.mobile) {
+  .ui.ui.ui[class*="large screen only"].grid:not(.mobile),
+  .ui.ui.ui.grid > [class*="large screen only"].row:not(.mobile),
+  .ui.ui.ui.grid > [class*="large screen only"].column:not(.mobile),
+  .ui.ui.ui.grid > .row > [class*="large screen only"].column:not(.mobile) {
     display: none !important;
   }
-  .ui[class*="widescreen only"].grid.grid.grid:not(.mobile),
-  .ui.grid.grid.grid > [class*="widescreen only"].row:not(.mobile),
-  .ui.grid.grid.grid > [class*="widescreen only"].column:not(.mobile),
-  .ui.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile) {
+  .ui.ui.ui[class*="widescreen only"].grid:not(.mobile),
+  .ui.ui.ui.grid > [class*="widescreen only"].row:not(.mobile),
+  .ui.ui.ui.grid > [class*="widescreen only"].column:not(.mobile),
+  .ui.ui.ui.grid > .row > [class*="widescreen only"].column:not(.mobile) {
     display: none !important;
   }
 }
 
 /* Tablet Only Hide */
 @media only screen and (min-width: 768px) and (max-width: 991.98px) {
-  .ui[class*="mobile only"].grid.grid.grid:not(.tablet),
-  .ui.grid.grid.grid > [class*="mobile only"].row:not(.tablet),
-  .ui.grid.grid.grid > [class*="mobile only"].column:not(.tablet),
-  .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.tablet) {
+  .ui.ui.ui[class*="mobile only"].grid:not(.tablet),
+  .ui.ui.ui.grid > [class*="mobile only"].row:not(.tablet),
+  .ui.ui.ui.grid > [class*="mobile only"].column:not(.tablet),
+  .ui.ui.ui.grid > .row > [class*="mobile only"].column:not(.tablet) {
     display: none !important;
   }
-  .ui[class*="computer only"].grid.grid.grid:not(.tablet),
-  .ui.grid.grid.grid > [class*="computer only"].row:not(.tablet),
-  .ui.grid.grid.grid > [class*="computer only"].column:not(.tablet),
-  .ui.grid.grid.grid > .row > [class*="computer only"].column:not(.tablet) {
+  .ui.ui.ui[class*="computer only"].grid:not(.tablet),
+  .ui.ui.ui.grid > [class*="computer only"].row:not(.tablet),
+  .ui.ui.ui.grid > [class*="computer only"].column:not(.tablet),
+  .ui.ui.ui.grid > .row > [class*="computer only"].column:not(.tablet) {
     display: none !important;
   }
-  .ui[class*="large screen only"].grid.grid.grid:not(.mobile),
-  .ui.grid.grid.grid > [class*="large screen only"].row:not(.mobile),
-  .ui.grid.grid.grid > [class*="large screen only"].column:not(.mobile),
-  .ui.grid.grid.grid > .row > [class*="large screen only"].column:not(.mobile) {
+  .ui.ui.ui[class*="large screen only"].grid:not(.mobile),
+  .ui.ui.ui.grid > [class*="large screen only"].row:not(.mobile),
+  .ui.ui.ui.grid > [class*="large screen only"].column:not(.mobile),
+  .ui.ui.ui.grid > .row > [class*="large screen only"].column:not(.mobile) {
     display: none !important;
   }
-  .ui[class*="widescreen only"].grid.grid.grid:not(.mobile),
-  .ui.grid.grid.grid > [class*="widescreen only"].row:not(.mobile),
-  .ui.grid.grid.grid > [class*="widescreen only"].column:not(.mobile),
-  .ui.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile) {
+  .ui.ui.ui[class*="widescreen only"].grid:not(.mobile),
+  .ui.ui.ui.grid > [class*="widescreen only"].row:not(.mobile),
+  .ui.ui.ui.grid > [class*="widescreen only"].column:not(.mobile),
+  .ui.ui.ui.grid > .row > [class*="widescreen only"].column:not(.mobile) {
     display: none !important;
   }
 }
 
 /* Computer Only Hide */
 @media only screen and (min-width: 992px) and (max-width: 1199.98px) {
-  .ui[class*="mobile only"].grid.grid.grid:not(.computer),
-  .ui.grid.grid.grid > [class*="mobile only"].row:not(.computer),
-  .ui.grid.grid.grid > [class*="mobile only"].column:not(.computer),
-  .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.computer) {
+  .ui.ui.ui[class*="mobile only"].grid:not(.computer),
+  .ui.ui.ui.grid > [class*="mobile only"].row:not(.computer),
+  .ui.ui.ui.grid > [class*="mobile only"].column:not(.computer),
+  .ui.ui.ui.grid > .row > [class*="mobile only"].column:not(.computer) {
     display: none !important;
   }
-  .ui[class*="tablet only"].grid.grid.grid:not(.computer),
-  .ui.grid.grid.grid > [class*="tablet only"].row:not(.computer),
-  .ui.grid.grid.grid > [class*="tablet only"].column:not(.computer),
-  .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.computer) {
+  .ui.ui.ui[class*="tablet only"].grid:not(.computer),
+  .ui.ui.ui.grid > [class*="tablet only"].row:not(.computer),
+  .ui.ui.ui.grid > [class*="tablet only"].column:not(.computer),
+  .ui.ui.ui.grid > .row > [class*="tablet only"].column:not(.computer) {
     display: none !important;
   }
-  .ui[class*="large screen only"].grid.grid.grid:not(.mobile),
-  .ui.grid.grid.grid > [class*="large screen only"].row:not(.mobile),
-  .ui.grid.grid.grid > [class*="large screen only"].column:not(.mobile),
-  .ui.grid.grid.grid > .row > [class*="large screen only"].column:not(.mobile) {
+  .ui.ui.ui[class*="large screen only"].grid:not(.mobile),
+  .ui.ui.ui.grid > [class*="large screen only"].row:not(.mobile),
+  .ui.ui.ui.grid > [class*="large screen only"].column:not(.mobile),
+  .ui.ui.ui.grid > .row > [class*="large screen only"].column:not(.mobile) {
     display: none !important;
   }
-  .ui[class*="widescreen only"].grid.grid.grid:not(.mobile),
-  .ui.grid.grid.grid > [class*="widescreen only"].row:not(.mobile),
-  .ui.grid.grid.grid > [class*="widescreen only"].column:not(.mobile),
-  .ui.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile) {
+  .ui.ui.ui[class*="widescreen only"].grid:not(.mobile),
+  .ui.ui.ui.grid > [class*="widescreen only"].row:not(.mobile),
+  .ui.ui.ui.grid > [class*="widescreen only"].column:not(.mobile),
+  .ui.ui.ui.grid > .row > [class*="widescreen only"].column:not(.mobile) {
     display: none !important;
   }
 }
 
 /* Large Screen Only Hide */
 @media only screen and (min-width: 1200px) and (max-width: 1919.98px) {
-  .ui[class*="mobile only"].grid.grid.grid:not(.computer),
-  .ui.grid.grid.grid > [class*="mobile only"].row:not(.computer),
-  .ui.grid.grid.grid > [class*="mobile only"].column:not(.computer),
-  .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.computer) {
+  .ui.ui.ui[class*="mobile only"].grid:not(.computer),
+  .ui.ui.ui.grid > [class*="mobile only"].row:not(.computer),
+  .ui.ui.ui.grid > [class*="mobile only"].column:not(.computer),
+  .ui.ui.ui.grid > .row > [class*="mobile only"].column:not(.computer) {
     display: none !important;
   }
-  .ui[class*="tablet only"].grid.grid.grid:not(.computer),
-  .ui.grid.grid.grid > [class*="tablet only"].row:not(.computer),
-  .ui.grid.grid.grid > [class*="tablet only"].column:not(.computer),
-  .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.computer) {
+  .ui.ui.ui[class*="tablet only"].grid:not(.computer),
+  .ui.ui.ui.grid > [class*="tablet only"].row:not(.computer),
+  .ui.ui.ui.grid > [class*="tablet only"].column:not(.computer),
+  .ui.ui.ui.grid > .row > [class*="tablet only"].column:not(.computer) {
     display: none !important;
   }
-  .ui[class*="widescreen only"].grid.grid.grid:not(.mobile),
-  .ui.grid.grid.grid > [class*="widescreen only"].row:not(.mobile),
-  .ui.grid.grid.grid > [class*="widescreen only"].column:not(.mobile),
-  .ui.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile) {
+  .ui.ui.ui[class*="widescreen only"].grid:not(.mobile),
+  .ui.ui.ui.grid > [class*="widescreen only"].row:not(.mobile),
+  .ui.ui.ui.grid > [class*="widescreen only"].column:not(.mobile),
+  .ui.ui.ui.grid > .row > [class*="widescreen only"].column:not(.mobile) {
     display: none !important;
   }
 }
 
 /* Widescreen Only Hide */
 @media only screen and (min-width: 1920px) {
-  .ui[class*="mobile only"].grid.grid.grid:not(.computer),
-  .ui.grid.grid.grid > [class*="mobile only"].row:not(.computer),
-  .ui.grid.grid.grid > [class*="mobile only"].column:not(.computer),
-  .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.computer) {
+  .ui.ui.ui[class*="mobile only"].grid:not(.computer),
+  .ui.ui.ui.grid > [class*="mobile only"].row:not(.computer),
+  .ui.ui.ui.grid > [class*="mobile only"].column:not(.computer),
+  .ui.ui.ui.grid > .row > [class*="mobile only"].column:not(.computer) {
     display: none !important;
   }
-  .ui[class*="tablet only"].grid.grid.grid:not(.computer),
-  .ui.grid.grid.grid > [class*="tablet only"].row:not(.computer),
-  .ui.grid.grid.grid > [class*="tablet only"].column:not(.computer),
-  .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.computer) {
+  .ui.ui.ui[class*="tablet only"].grid:not(.computer),
+  .ui.ui.ui.grid > [class*="tablet only"].row:not(.computer),
+  .ui.ui.ui.grid > [class*="tablet only"].column:not(.computer),
+  .ui.ui.ui.grid > .row > [class*="tablet only"].column:not(.computer) {
     display: none !important;
   }
 }
+.ui.grid .left.attached.column {
+  padding-right: 0;
+}
+.ui.grid .right.attached.column {
+  padding-left: 0;
+}
 
 
 /*******************************