/* * # Semantic - Grid * http://github.com/semantic-org/semantic-ui/ * * * Copyright 2013 Contributors * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /*------------------- Theme --------------------*/ /* To override a theme for an individual element specify theme name below */ /* Theme to load site variables */ /* Path to user override folder */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /* Import */ /******************************* Global Variables *******************************/ /*------------------- Paths --------------------*/ /*------------------- Page --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Fonts --------------------*/ /*------------------- Icons --------------------*/ /* Width of largest icon */ /******************************* BG Colors *******************************/ /******************************* Colors *******************************/ /*------------------- Background --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Neutrals ---*/ /*------------------- Text Colors --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Sizes --------------------*/ /*------------------- Transitions --------------------*/ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Neutrals ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Neutrals ---*/ /*------------------- Active --------------------*/ /*--- Standard ---*/ /*--- Emotive ---*/ /*--- Neutrals ---*/ /* Inherited From Site */ /******************************* Grid *******************************/ /******************************* Variations *******************************/ /*-------------- Page ---------------*/ /* Standard */ /* Fitted */ /*-------------- Relaxed ---------------*/ /*-------------- Divided ---------------*/ /*-------------- Celled ---------------*/ /*-------------- Stackable ---------------*/ /******************************* User Global Variables *******************************/ /******************************* User Variable Overrides *******************************/ /******************************* User Global Variables *******************************/ /******************************* User Variable Overrides *******************************/ /******************************* Standard *******************************/ .ui.grid { display: block; text-align: left; font-size: 0em; margin: 0%; padding: 0%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body > .ui.grid { margin-left: 0% !important; margin-right: 0% !important; } .ui.grid:after, .ui.row:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /*------------------- Columns --------------------*/ /* Standard 16 column */ .ui.grid > .column, .ui.grid > .row > .column { display: inline-block; text-align: left; font-size: 1rem; width: 6.25%; padding-left: 1.5%; padding-right: 1.5%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; vertical-align: top; } /*------------------- Rows --------------------*/ .ui.grid > .row { display: block; width: 100% !important; margin-top: 1rem; padding: 1rem 0% 0%; font-size: 0rem; } .ui.grid > .row:first-child { padding-top: 0rem; margin-top: 0rem; } /*------------------- Columns --------------------*/ /* Vertical padding when no rows */ .ui.grid > .column { margin-top: 1rem; margin-bottom: 1rem; } /*------------------- Content --------------------*/ .ui.grid > .row > img, .ui.grid > .row > .column > img { max-width: 100%; } .ui.grid .column > .ui.segment:only-child { margin: 0em; } /******************************* Variations *******************************/ /*----------------------- Page Grid (Responsive) -------------------------*/ .ui.page.grid { min-width: 320px; padding-left: 0%; padding-right: 0%; margin-left: 13%; margin-right: 13%; } @media only screen and (max-width: 767px) { .ui.page.grid { margin-left: 1em; margin-right: 1em; } } @media only screen and (min-width: 768px) { .ui.page.grid { margin-left: 8%; margin-right: 8%; } } @media only screen and (min-width: 992px) { .ui.page.grid { margin-left: 13%; margin-right: 13%; } } @media only screen and (min-width: 1400px) { .ui.page.grid { margin-left: 18%; margin-right: 18%; } } @media only screen and (min-width: 1900px) { .ui.page.grid { margin-left: 23%; margin-right: 23%; } } /*------------------- Column Width --------------------*/ /* Sizing Combinations */ .ui.grid > .row > .one.wide.column, .ui.grid > .column.row > .one.wide.column, .ui.grid > .one.wide.column, .ui.column.grid > .one.wide.column { width: 6.25% !important; } .ui.grid > .row > .two.wide.column, .ui.grid > .column.row > .two.wide.column, .ui.grid > .two.wide.column, .ui.column.grid > .two.wide.column { width: 12.5% !important; } .ui.grid > .row > .three.wide.column, .ui.grid > .column.row > .three.wide.column, .ui.grid > .three.wide.column, .ui.column.grid > .three.wide.column { width: 18.75% !important; } .ui.grid > .row > .four.wide.column, .ui.grid > .column.row > .four.wide.column, .ui.grid > .four.wide.column, .ui.column.grid > .four.wide.column { width: 25% !important; } .ui.grid > .row > .five.wide.column, .ui.grid > .column.row > .five.wide.column, .ui.grid > .five.wide.column, .ui.column.grid > .five.wide.column { width: 31.25% !important; } .ui.grid > .row > .six.wide.column, .ui.grid > .column.row > .six.wide.column, .ui.grid > .six.wide.column, .ui.column.grid > .six.wide.column { width: 37.5% !important; } .ui.grid > .row > .seven.wide.column, .ui.grid > .column.row > .seven.wide.column, .ui.grid > .seven.wide.column, .ui.column.grid > .seven.wide.column { width: 43.75% !important; } .ui.grid > .row > .eight.wide.column, .ui.grid > .column.row > .eight.wide.column, .ui.grid > .eight.wide.column, .ui.column.grid > .eight.wide.column { width: 50% !important; } .ui.grid > .row > .nine.wide.column, .ui.grid > .column.row > .nine.wide.column, .ui.grid > .nine.wide.column, .ui.column.grid > .nine.wide.column { width: 56.25% !important; } .ui.grid > .row > .ten.wide.column, .ui.grid > .column.row > .ten.wide.column, .ui.grid > .ten.wide.column, .ui.column.grid > .ten.wide.column { width: 62.5% !important; } .ui.grid > .row > .eleven.wide.column, .ui.grid > .column.row > .eleven.wide.column, .ui.grid > .eleven.wide.column, .ui.column.grid > .eleven.wide.column { width: 68.75% !important; } .ui.grid > .row > .twelve.wide.column, .ui.grid > .column.row > .twelve.wide.column, .ui.grid > .twelve.wide.column, .ui.column.grid > .twelve.wide.column { width: 75% !important; } .ui.grid > .row > .thirteen.wide.column, .ui.grid > .column.row > .thirteen.wide.column, .ui.grid > .thirteen.wide.column, .ui.column.grid > .thirteen.wide.column { width: 81.25% !important; } .ui.grid > .row > .fourteen.wide.column, .ui.grid > .column.row > .fourteen.wide.column, .ui.grid > .fourteen.wide.column, .ui.column.grid > .fourteen.wide.column { width: 87.5% !important; } .ui.grid > .row > .fifteen.wide.column, .ui.grid > .column.row > .fifteen.wide.column, .ui.grid > .fifteen.wide.column, .ui.column.grid > .fifteen.wide.column { width: 93.75% !important; } .ui.grid > .row > .sixteen.wide.column, .ui.grid > .column.row > .sixteen.wide.column, .ui.grid > .sixteen.wide.column, .ui.column.grid > .sixteen.wide.column { width: 100% !important; } /*------------------- Column Count --------------------*/ /* Assume full width with one column */ .ui.one.column.grid > .row > .column, .ui.one.column.grid > .column, .ui.grid > .one.column.row > .column { width: 100%; } .ui.two.column.grid > .row > .column, .ui.two.column.grid > .column, .ui.grid > .two.column.row > .column { width: 50%; } .ui.three.column.grid > .row > .column, .ui.three.column.grid > .column, .ui.grid > .three.column.row > .column { width: 33.33333333333333%; } .ui.four.column.grid > .row > .column, .ui.four.column.grid > .column, .ui.grid > .four.column.row > .column { width: 25%; } .ui.five.column.grid > .row > .column, .ui.five.column.grid > .column, .ui.grid > .five.column.row > .column { width: 20%; } .ui.six.column.grid > .row > .column, .ui.six.column.grid > .column, .ui.grid > .six.column.row > .column { width: 16.666666666666664%; } .ui.seven.column.grid > .row > .column, .ui.seven.column.grid > .column, .ui.grid > .seven.column.row > .column { width: 14.285714285714285%; } .ui.eight.column.grid > .row > .column, .ui.eight.column.grid > .column, .ui.grid > .eight.column.row > .column { width: 12.5%; } .ui.nine.column.grid > .row > .column, .ui.nine.column.grid > .column, .ui.grid > .nine.column.row > .column { width: 11.11111111111111%; } .ui.ten.column.grid > .row > .column, .ui.ten.column.grid > .column, .ui.grid > .ten.column.row > .column { width: 10%; } .ui.eleven.column.grid > .row > .column, .ui.eleven.column.grid > .column, .ui.grid > .eleven.column.row > .column { width: 9.090909090909092%; } .ui.twelve.column.grid > .row > .column, .ui.twelve.column.grid > .column, .ui.grid > .twelve.column.row > .column { width: 8.333333333333332%; } .ui.thirteen.column.grid > .row > .column, .ui.thirteen.column.grid > .column, .ui.grid > .thirteen.column.row > .column { width: 7.6923076923076925%; } .ui.fourteen.column.grid > .row > .column, .ui.fourteen.column.grid > .column, .ui.grid > .fourteen.column.row > .column { width: 7.142857142857142%; } .ui.fifteen.column.grid > .row > .column, .ui.fifteen.column.grid > .column, .ui.grid > .fifteen.column.row > .column { width: 6.666666666666667%; } .ui.sixteen.column.grid > .row > .column, .ui.sixteen.column.grid > .column, .ui.grid > .sixteen.column.row > .column { width: 6.25%; } /* Assume full width with one column */ .ui.grid > .column:only-child, .ui.grid > .row > .column:only-child { width: 100%; } /*---------------------- Relaxed -----------------------*/ .ui.relaxed.grid > .column, .ui.relaxed.grid > .row > .column { padding-left: 2.5%; padding-right: 2.5%; } .ui.very.relaxed.grid > .column, .ui.very.relaxed.grid > .row > .column { padding-left: 4%; padding-right: 4%; } /*---------------------- Fitted -----------------------*/ .ui.fitted.grid { margin-left: -1.5%; margin-right: -1.5%; } .ui.relaxed.fitted.grid { margin-left: -2.5%; margin-right: -2.5%; } /*---------------------- "Floated" -----------------------*/ .ui.grid .left.floated.column { float: left; } .ui.grid .right.floated.column { float: right; } /*---------------------- Divided -----------------------*/ .ui.divided.grid:not(.vertically), .ui.divided.grid:not(.vertically) > .row { display: table; max-width: 100%; } .ui.divided.grid:not(.vertically) > .column:not(.row), .ui.divided.grid:not(.vertically) > .row > .column { display: table-cell; -webkit-box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1), -2px 0px 0px 0px rgba(255, 255, 255, 0.3); box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1), -2px 0px 0px 0px rgba(255, 255, 255, 0.3); } .ui.divided.grid:not(.vertically) > .column.row { display: table; } .ui.divided.grid:not(.vertically) > .column:first-child, .ui.divided.grid:not(.vertically) > .row > .column:first-child { -webkit-box-shadow: none; box-shadow: none; } /* Divided Row */ .ui.grid > .divided.row { display: table; } .ui.grid > .divided.row > .column { display: table-cell; -webkit-box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1), -2px 0px 0px 0px rgba(255, 255, 255, 0.3); box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1), -2px 0px 0px 0px rgba(255, 255, 255, 0.3); } .ui.grid > .divided.row > .column:first-child { -webkit-box-shadow: none; box-shadow: none; } /* Vertically Divided */ .ui.vertically.divided.grid > .row { position: relative; } .ui.vertically.divided.grid > .row:before { position: absolute; content: ''; top: 0px; left: 0px; width: 100%; height: 1px; margin: 0% 1.5%; -webkit-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(255, 255, 255, 0.3); box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(255, 255, 255, 0.3); } .ui.vertically.divided.grid > .row:first-child:before { -webkit-box-shadow: none; box-shadow: none; } /* Inverted Divided */ .ui.inverted.divided.grid > .row { -webkit-box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.15), -2px 0px 0px 0px rgba(0, 0, 0, 0.15); box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.15), -2px 0px 0px 0px rgba(0, 0, 0, 0.15); } .ui.inverted.vertically.divided.grid > .row { -webkit-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15), 0px -2px 0px 0px rgba(0, 0, 0, 0.15); box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15), 0px -2px 0px 0px rgba(0, 0, 0, 0.15); } /*---------------------- Celled -----------------------*/ .ui.celled.grid { display: table; max-width: 100%; -webkit-box-shadow: 0px 0px 0px 1px #dddddd; box-shadow: 0px 0px 0px 1px #dddddd; } .ui.celled.grid > .row, .ui.celled.grid > .column.row, .ui.celled.grid > .column.row:first-child { display: table; width: 100%; margin-top: 0em; padding-top: 0em; -webkit-box-shadow: 0px -1px 0px 0px #dddddd; box-shadow: 0px -1px 0px 0px #dddddd; } .ui.celled.grid > .column:not(.row), .ui.celled.grid > .row > .column { display: table-cell; padding: 0.75em; -webkit-box-shadow: -1px 0px 0px 0px #dddddd; box-shadow: -1px 0px 0px 0px #dddddd; } .ui.celled.grid > .column:first-child, .ui.celled.grid > .row > .column:first-child { -webkit-box-shadow: none; box-shadow: none; } .ui.celled.page.grid { -webkit-box-shadow: none; box-shadow: none; } /*---------------------- Horizontally Centered -----------------------*/ /* Vertical Centered */ .ui.left.aligned.grid, .ui.left.aligned.grid > .row > .column, .ui.left.aligned.grid > .column, .ui.grid .left.aligned.column, .ui.grid > .left.aligned.row > .column { text-align: left; } .ui.center.aligned.grid, .ui.center.aligned.grid > .row > .column, .ui.center.aligned.grid > .column, .ui.grid .center.aligned.column, .ui.grid > .center.aligned.row > .column { text-align: center; } .ui.right.aligned.grid, .ui.right.aligned.grid > .row > .column, .ui.right.aligned.grid > .column, .ui.grid .right.aligned.column, .ui.grid > .right.aligned.row > .column { text-align: right; } .ui.justified.grid, .ui.justified.grid > .row > .column, .ui.justified.grid > .column, .ui.grid .justified.column, .ui.grid > .justified.row > .column { text-align: justify; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } /*---------------------- Vertically Centered -----------------------*/ /* Vertical Centered */ .ui.top.aligned.grid, .ui.top.aligned.grid > .row > .column, .ui.top.aligned.grid > .column, .ui.grid .top.aligned.column, .ui.grid > .top.aligned.row > .column { vertical-align: top; } .ui.middle.aligned.grid, .ui.middle.aligned.grid > .row > .column, .ui.middle.aligned.grid > .column, .ui.grid .middle.aligned.column, .ui.grid > .middle.aligned.row > .column { vertical-align: middle; } .ui.bottom.aligned.grid, .ui.bottom.aligned.grid > .row > .column, .ui.bottom.aligned.grid > .column, .ui.grid .bottom.aligned.column, .ui.grid > .bottom.aligned.row > .column { vertical-align: bottom; } /*---------------------- Equal Height Columns -----------------------*/ .ui.grid > .equal.height.row { display: table; max-width: 100%; } .ui.grid > .equal.height.row > .column { display: table-cell; } /*---------------------- Only (Device) -----------------------*/ /* Mobile Only */ @media only screen and (max-width: 767px) { .ui.mobile.only.grid, .ui.grid > .mobile.only.row { display: block !important; } .ui.grid > .row > .mobile.only.column { display: inline-block !important; } .ui.divided.mobile.only.grid, .ui.celled.mobile.only.grid, .ui.divided.mobile.only.grid .row, .ui.celled.mobile.only.grid .row, .ui.divided.grid .mobile.only.row, .ui.celled.grid .mobile.only.row, .ui.grid .mobile.only.equal.height.row, .ui.mobile.only.grid .equal.height.row { display: table !important; } .ui.divided.grid > .row > .mobile.only.column, .ui.celled.grid > .row > .mobile.only.column, .ui.divided.mobile.only.grid > .row > .column, .ui.celled.mobile.only.grid > .row > .column, .ui.divided.mobile.only.grid > .column, .ui.celled.mobile.only.grid > .column { display: table-cell !important; } } @media only screen and (min-width: 768px) { .ui.mobile.only.grid, .ui.grid > .mobile.only.row, .ui.grid > .mobile.only.column, .ui.grid > .row > .mobile.only.column { display: none; } } /* Tablet Only */ @media only screen and (min-width: 768px) and (max-width: 991px) { .ui.tablet.only.grid, .ui.grid > .tablet.only.row { display: block !important; } .ui.grid > .row > .tablet.only.column { display: inline-block !important; } .ui.divided.tablet.only.grid, .ui.celled.tablet.only.grid, .ui.divided.tablet.only.grid .row, .ui.celled.tablet.only.grid .row, .ui.divided.grid .tablet.only.row, .ui.celled.grid .tablet.only.row, .ui.grid .tablet.only.equal.height.row, .ui.tablet.only.grid .equal.height.row { display: table !important; } .ui.divided.grid > .row > .tablet.only.column, .ui.celled.grid > .row > .tablet.only.column, .ui.divided.tablet.only.grid > .row > .column, .ui.celled.tablet.only.grid > .row > .column, .ui.divided.tablet.only.grid > .column, .ui.celled.tablet.only.grid > .column { display: table-cell !important; } } @media only screen and (max-width: 767px), (min-width: 992px) { .ui.tablet.only.grid, .ui.grid > .tablet.only.row, .ui.grid > .tablet.only.column, .ui.grid > .row > .tablet.only.column { display: none; } } /* Computer Only */ @media only screen and (min-width: 992px) { .ui.computer.only.grid, .ui.grid > .computer.only.row { display: block !important; } .ui.grid > .row > .computer.only.column { display: inline-block !important; } .ui.divided.computer.only.grid, .ui.celled.computer.only.grid, .ui.divided.computer.only.grid .row, .ui.celled.computer.only.grid .row, .ui.divided.grid .computer.only.row, .ui.celled.grid .computer.only.row, .ui.grid .computer.only.equal.height.row, .ui.computer.only.grid .equal.height.row { display: table !important; } .ui.divided.grid > .row > .computer.only.column, .ui.celled.grid > .row > .computer.only.column, .ui.divided.computer.only.grid > .row > .column, .ui.celled.computer.only.grid > .row > .column, .ui.divided.computer.only.grid > .column, .ui.celled.computer.only.grid > .column { display: table-cell !important; } } @media only screen and (max-width: 991px) { .ui.computer.only.grid, .ui.grid > .computer.only.row, .ui.grid > .computer.only.column, .ui.grid > .row > .computer.only.column { display: none; } } /*------------------- Doubling --------------------*/ /* Mobily Only */ @media only screen and (max-width: 767px) { .ui.two.column.doubling.grid > .row > .column, .ui.two.column.doubling.grid > .column, .ui.grid > .two.column.doubling.row > .column { width: 100%; } .ui.three.column.doubling.grid > .row > .column, .ui.three.column.doubling.grid > .column, .ui.grid > .three.column.doubling.row > .column { width: 100%; } .ui.four.column.doubling.grid > .row > .column, .ui.four.column.doubling.grid > .column, .ui.grid > .four.column.doubling.row > .column { width: 100%; } .ui.five.column.doubling.grid > .row > .column, .ui.five.column.doubling.grid > .column, .ui.grid > .five.column.doubling.row > .column { width: 100%; } .ui.six.column.doubling.grid > .row > .column, .ui.six.column.doubling.grid > .column, .ui.grid > .six.column.doubling.row > .column { width: 50%; } .ui.seven.column.doubling.grid > .row > .column, .ui.seven.column.doubling.grid > .column, .ui.grid > .seven.column.doubling.row > .column { width: 50%; } .ui.eight.column.doubling.grid > .row > .column, .ui.eight.column.doubling.grid > .column, .ui.grid > .eight.column.doubling.row > .column { width: 50%; } .ui.nine.column.doubling.grid > .row > .column, .ui.nine.column.doubling.grid > .column, .ui.grid > .nine.column.doubling.row > .column { width: 50%; } .ui.ten.column.doubling.grid > .row > .column, .ui.ten.column.doubling.grid > .column, .ui.grid > .ten.column.doubling.row > .column { width: 50%; } .ui.twelve.column.doubling.grid > .row > .column, .ui.twelve.column.doubling.grid > .column, .ui.grid > .twelve.column.doubling.row > .column { width: 33.33333333333333%; } .ui.fourteen.column.doubling.grid > .row > .column, .ui.fourteen.column.doubling.grid > .column, .ui.grid > .fourteen.column.doubling.row > .column { width: 33.33333333333333%; } .ui.sixteen.column.doubling.grid > .row > .column, .ui.sixteen.column.doubling.grid > .column, .ui.grid > .sixteen.column.doubling.row > .column { width: 25%; } } /* Tablet Only */ @media only screen and (min-width: 768px) and (max-width: 991px) { .ui.two.column.doubling.grid > .row > .column, .ui.two.column.doubling.grid > .column, .ui.grid > .two.column.doubling.row > .column { width: 100%; } .ui.three.column.doubling.grid > .row > .column, .ui.three.column.doubling.grid > .column, .ui.grid > .three.column.doubling.row > .column { width: 50%; } .ui.four.column.doubling.grid > .row > .column, .ui.four.column.doubling.grid > .column, .ui.grid > .four.column.doubling.row > .column { width: 50%; } .ui.five.column.doubling.grid > .row > .column, .ui.five.column.doubling.grid > .column, .ui.grid > .five.column.doubling.row > .column { width: 33.33333333333333%; } .ui.six.column.doubling.grid > .row > .column, .ui.six.column.doubling.grid > .column, .ui.grid > .six.column.doubling.row > .column { width: 33.33333333333333%; } .ui.eight.column.doubling.grid > .row > .column, .ui.eight.column.doubling.grid > .column, .ui.grid > .eight.column.doubling.row > .column { width: 33.33333333333333%; } .ui.eight.column.doubling.grid > .row > .column, .ui.eight.column.doubling.grid > .column, .ui.grid > .eight.column.doubling.row > .column { width: 25%; } .ui.nine.column.doubling.grid > .row > .column, .ui.nine.column.doubling.grid > .column, .ui.grid > .nine.column.doubling.row > .column { width: 25%; } .ui.ten.column.doubling.grid > .row > .column, .ui.ten.column.doubling.grid > .column, .ui.grid > .ten.column.doubling.row > .column { width: 20%; } .ui.twelve.column.doubling.grid > .row > .column, .ui.twelve.column.doubling.grid > .column, .ui.grid > .twelve.column.doubling.row > .column { width: 16.666666666666664%; } .ui.fourteen.column.doubling.grid > .row > .column, .ui.fourteen.column.doubling.grid > .column, .ui.grid > .fourteen.column.doubling.row > .column { width: 14.285714285714285%; } .ui.sixteen.column.doubling.grid > .row > .column, .ui.sixteen.column.doubling.grid > .column, .ui.grid > .sixteen.column.doubling.row > .column { width: 12.5%; } } /*------------------- Stackable --------------------*/ @media only screen and (max-width: 767px) { .ui.stackable.grid { display: block !important; padding: 0em; margin: 0em; } .ui.stackable.grid > .row > .column, .ui.stackable.grid > .column { display: block !important; width: auto !important; margin: 0.5em 0em 0em !important; padding: 0.5em 0em 0em !important; -webkit-box-shadow: none !important; box-shadow: none !important; } .ui.stackable.divided.grid > .column, .ui.stackable.celled.grid > .row > .column { border-top: 1px dotted rgba(0, 0, 0, 0.1); } .ui.stackable.grid > .row:first-child > .column:first-child, .ui.stackable.grid > .column:first-child { margin-top: 0em !important; padding-top: 0em !important; } .ui.stackable.divided.grid > .row:first-child > .column:first-child, .ui.stackable.celled.grid > .row:first-child > .column:first-child, .ui.stackable.divided.grid > .column:first-child, .ui.stackable.celled.grid > .column:first-child { border-top: none !important; } .ui.stackable.page.grid > .row > .column, .ui.stackable.page.grid > .column { padding-left: 1.5em !important; padding-right: 1.5em !important; } /* Remove pointers from vertical menus */ .ui.stackable.grid .vertical.pointing.menu .item:after { display: none; } }