You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

2028 lines
68 KiB

  1. /*!
  2. * # Semantic UI 2.1.6 - Grid
  3. * http://github.com/semantic-org/semantic-ui/
  4. *
  5. *
  6. * Copyright 2015 Contributors
  7. * Released under the MIT license
  8. * http://opensource.org/licenses/MIT
  9. *
  10. */
  11. /*******************************
  12. Standard
  13. *******************************/
  14. .ui.grid {
  15. display: -webkit-box;
  16. display: -webkit-flex;
  17. display: -ms-flexbox;
  18. display: flex;
  19. -webkit-box-orient: horizontal;
  20. -webkit-box-direction: normal;
  21. -webkit-flex-direction: row;
  22. -ms-flex-direction: row;
  23. flex-direction: row;
  24. -webkit-flex-wrap: wrap;
  25. -ms-flex-wrap: wrap;
  26. flex-wrap: wrap;
  27. -webkit-box-align: stretch;
  28. -webkit-align-items: stretch;
  29. -ms-flex-align: stretch;
  30. align-items: stretch;
  31. padding: 0em;
  32. }
  33. /*----------------------
  34. Remove Gutters
  35. -----------------------*/
  36. .ui.grid {
  37. margin-top: -1rem;
  38. margin-bottom: -1rem;
  39. margin-left: -1rem;
  40. margin-right: -1rem;
  41. }
  42. .ui.relaxed.grid {
  43. margin-left: -1.5rem;
  44. margin-right: -1.5rem;
  45. }
  46. .ui[class*="very relaxed"].grid {
  47. margin-left: -2.5rem;
  48. margin-right: -2.5rem;
  49. }
  50. /* Preserve Rows Spacing on Consecutive Grids */
  51. .ui.grid + .grid {
  52. margin-top: 1rem;
  53. }
  54. /*-------------------
  55. Columns
  56. --------------------*/
  57. /* Standard 16 column */
  58. .ui.grid > .column:not(.row),
  59. .ui.grid > .row > .column {
  60. position: relative;
  61. display: inline-block;
  62. width: 6.25%;
  63. padding-left: 1rem;
  64. padding-right: 1rem;
  65. vertical-align: top;
  66. }
  67. .ui.grid > * {
  68. padding-left: 1rem;
  69. padding-right: 1rem;
  70. }
  71. /*-------------------
  72. Rows
  73. --------------------*/
  74. .ui.grid > .row {
  75. position: relative;
  76. display: -webkit-box;
  77. display: -webkit-flex;
  78. display: -ms-flexbox;
  79. display: flex;
  80. -webkit-box-orient: horizontal;
  81. -webkit-box-direction: normal;
  82. -webkit-flex-direction: row;
  83. -ms-flex-direction: row;
  84. flex-direction: row;
  85. -webkit-flex-wrap: wrap;
  86. -ms-flex-wrap: wrap;
  87. flex-wrap: wrap;
  88. -webkit-box-pack: inherit;
  89. -webkit-justify-content: inherit;
  90. -ms-flex-pack: inherit;
  91. justify-content: inherit;
  92. -webkit-box-align: stretch;
  93. -webkit-align-items: stretch;
  94. -ms-flex-align: stretch;
  95. align-items: stretch;
  96. width: 100% !important;
  97. padding: 0rem;
  98. padding-top: 1rem;
  99. padding-bottom: 1rem;
  100. }
  101. /*-------------------
  102. Columns
  103. --------------------*/
  104. /* Vertical padding when no rows */
  105. .ui.grid > .column:not(.row) {
  106. padding-top: 1rem;
  107. padding-bottom: 1rem;
  108. }
  109. .ui.grid > .row > .column {
  110. margin-top: 0em;
  111. margin-bottom: 0em;
  112. }
  113. /*-------------------
  114. Content
  115. --------------------*/
  116. .ui.grid > .row > img,
  117. .ui.grid > .row > .column > img {
  118. max-width: 100%;
  119. }
  120. /*-------------------
  121. Loose Coupling
  122. --------------------*/
  123. /* Collapse Margin on Consecutive Grid */
  124. .ui.grid > .ui.grid:first-child {
  125. margin-top: 0em;
  126. }
  127. .ui.grid > .ui.grid:last-child {
  128. margin-bottom: 0em;
  129. }
  130. /* Segment inside Aligned Grid */
  131. .ui.grid .aligned.row > .column > .segment:not(.compact):not(.attached),
  132. .ui.aligned.grid .column > .segment:not(.compact):not(.attached) {
  133. width: 100%;
  134. }
  135. /* Align Dividers with Gutter */
  136. .ui.grid .row + .ui.divider {
  137. -webkit-box-flex: 1;
  138. -webkit-flex-grow: 1;
  139. -ms-flex-positive: 1;
  140. flex-grow: 1;
  141. margin: 1rem 1rem;
  142. }
  143. .ui.grid .column + .ui.vertical.divider {
  144. height: calc(50% - 1rem );
  145. }
  146. /* Remove Border on Last Horizontal Segment */
  147. .ui.grid > .row > .column:last-child > .horizontal.segment,
  148. .ui.grid > .column:last-child > .horizontal.segment {
  149. box-shadow: none;
  150. }
  151. /*******************************
  152. Variations
  153. *******************************/
  154. /*-----------------------
  155. Page Grid
  156. -------------------------*/
  157. @media only screen and (max-width: 767px) {
  158. .ui.page.grid {
  159. width: auto;
  160. padding-left: 0em;
  161. padding-right: 0em;
  162. margin-left: 0em;
  163. margin-right: 0em;
  164. }
  165. }
  166. @media only screen and (min-width: 768px) and (max-width: 991px) {
  167. .ui.page.grid {
  168. width: auto;
  169. margin-left: 0em;
  170. margin-right: 0em;
  171. padding-left: 2em;
  172. padding-right: 2em;
  173. }
  174. }
  175. @media only screen and (min-width: 992px) and (max-width: 1199px) {
  176. .ui.page.grid {
  177. width: auto;
  178. margin-left: 0em;
  179. margin-right: 0em;
  180. padding-left: 3%;
  181. padding-right: 3%;
  182. }
  183. }
  184. @media only screen and (min-width: 1200px) and (max-width: 1919px) {
  185. .ui.page.grid {
  186. width: auto;
  187. margin-left: 0em;
  188. margin-right: 0em;
  189. padding-left: 15%;
  190. padding-right: 15%;
  191. }
  192. }
  193. @media only screen and (min-width: 1920px) {
  194. .ui.page.grid {
  195. width: auto;
  196. margin-left: 0em;
  197. margin-right: 0em;
  198. padding-left: 23%;
  199. padding-right: 23%;
  200. }
  201. }
  202. /*-------------------
  203. Column Count
  204. --------------------*/
  205. /* Assume full width with one column */
  206. .ui.grid > .column:only-child,
  207. .ui.grid > .row > .column:only-child {
  208. width: 100%;
  209. }
  210. /* Grid Based */
  211. .ui[class*="one column"].grid > .row > .column,
  212. .ui[class*="one column"].grid > .column:not(.row) {
  213. width: 100%;
  214. }
  215. .ui[class*="two column"].grid > .row > .column,
  216. .ui[class*="two column"].grid > .column:not(.row) {
  217. width: 50%;
  218. }
  219. .ui[class*="three column"].grid > .row > .column,
  220. .ui[class*="three column"].grid > .column:not(.row) {
  221. width: 33.33333333%;
  222. }
  223. .ui[class*="four column"].grid > .row > .column,
  224. .ui[class*="four column"].grid > .column:not(.row) {
  225. width: 25%;
  226. }
  227. .ui[class*="five column"].grid > .row > .column,
  228. .ui[class*="five column"].grid > .column:not(.row) {
  229. width: 20%;
  230. }
  231. .ui[class*="six column"].grid > .row > .column,
  232. .ui[class*="six column"].grid > .column:not(.row) {
  233. width: 16.66666667%;
  234. }
  235. .ui[class*="seven column"].grid > .row > .column,
  236. .ui[class*="seven column"].grid > .column:not(.row) {
  237. width: 14.28571429%;
  238. }
  239. .ui[class*="eight column"].grid > .row > .column,
  240. .ui[class*="eight column"].grid > .column:not(.row) {
  241. width: 12.5%;
  242. }
  243. .ui[class*="nine column"].grid > .row > .column,
  244. .ui[class*="nine column"].grid > .column:not(.row) {
  245. width: 11.11111111%;
  246. }
  247. .ui[class*="ten column"].grid > .row > .column,
  248. .ui[class*="ten column"].grid > .column:not(.row) {
  249. width: 10%;
  250. }
  251. .ui[class*="eleven column"].grid > .row > .column,
  252. .ui[class*="eleven column"].grid > .column:not(.row) {
  253. width: 9.09090909%;
  254. }
  255. .ui[class*="twelve column"].grid > .row > .column,
  256. .ui[class*="twelve column"].grid > .column:not(.row) {
  257. width: 8.33333333%;
  258. }
  259. .ui[class*="thirteen column"].grid > .row > .column,
  260. .ui[class*="thirteen column"].grid > .column:not(.row) {
  261. width: 7.69230769%;
  262. }
  263. .ui[class*="fourteen column"].grid > .row > .column,
  264. .ui[class*="fourteen column"].grid > .column:not(.row) {
  265. width: 7.14285714%;
  266. }
  267. .ui[class*="fifteen column"].grid > .row > .column,
  268. .ui[class*="fifteen column"].grid > .column:not(.row) {
  269. width: 6.66666667%;
  270. }
  271. .ui[class*="sixteen column"].grid > .row > .column,
  272. .ui[class*="sixteen column"].grid > .column:not(.row) {
  273. width: 6.25%;
  274. }
  275. /* Row Based Overrides */
  276. .ui.grid > [class*="one column"].row > .column {
  277. width: 100% !important;
  278. }
  279. .ui.grid > [class*="two column"].row > .column {
  280. width: 50% !important;
  281. }
  282. .ui.grid > [class*="three column"].row > .column {
  283. width: 33.33333333% !important;
  284. }
  285. .ui.grid > [class*="four column"].row > .column {
  286. width: 25% !important;
  287. }
  288. .ui.grid > [class*="five column"].row > .column {
  289. width: 20% !important;
  290. }
  291. .ui.grid > [class*="six column"].row > .column {
  292. width: 16.66666667% !important;
  293. }
  294. .ui.grid > [class*="seven column"].row > .column {
  295. width: 14.28571429% !important;
  296. }
  297. .ui.grid > [class*="eight column"].row > .column {
  298. width: 12.5% !important;
  299. }
  300. .ui.grid > [class*="nine column"].row > .column {
  301. width: 11.11111111% !important;
  302. }
  303. .ui.grid > [class*="ten column"].row > .column {
  304. width: 10% !important;
  305. }
  306. .ui.grid > [class*="eleven column"].row > .column {
  307. width: 9.09090909% !important;
  308. }
  309. .ui.grid > [class*="twelve column"].row > .column {
  310. width: 8.33333333% !important;
  311. }
  312. .ui.grid > [class*="thirteen column"].row > .column {
  313. width: 7.69230769% !important;
  314. }
  315. .ui.grid > [class*="fourteen column"].row > .column {
  316. width: 7.14285714% !important;
  317. }
  318. .ui.grid > [class*="fifteen column"].row > .column {
  319. width: 6.66666667% !important;
  320. }
  321. .ui.grid > [class*="sixteen column"].row > .column {
  322. width: 6.25% !important;
  323. }
  324. /* Celled Page */
  325. .ui.celled.page.grid {
  326. box-shadow: none;
  327. }
  328. /*-------------------
  329. Column Width
  330. --------------------*/
  331. /* Sizing Combinations */
  332. .ui.grid > .row > [class*="one wide"].column,
  333. .ui.grid > .column.row > [class*="one wide"].column,
  334. .ui.grid > [class*="one wide"].column,
  335. .ui.column.grid > [class*="one wide"].column {
  336. width: 6.25% !important;
  337. }
  338. .ui.grid > .row > [class*="two wide"].column,
  339. .ui.grid > .column.row > [class*="two wide"].column,
  340. .ui.grid > [class*="two wide"].column,
  341. .ui.column.grid > [class*="two wide"].column {
  342. width: 12.5% !important;
  343. }
  344. .ui.grid > .row > [class*="three wide"].column,
  345. .ui.grid > .column.row > [class*="three wide"].column,
  346. .ui.grid > [class*="three wide"].column,
  347. .ui.column.grid > [class*="three wide"].column {
  348. width: 18.75% !important;
  349. }
  350. .ui.grid > .row > [class*="four wide"].column,
  351. .ui.grid > .column.row > [class*="four wide"].column,
  352. .ui.grid > [class*="four wide"].column,
  353. .ui.column.grid > [class*="four wide"].column {
  354. width: 25% !important;
  355. }
  356. .ui.grid > .row > [class*="five wide"].column,
  357. .ui.grid > .column.row > [class*="five wide"].column,
  358. .ui.grid > [class*="five wide"].column,
  359. .ui.column.grid > [class*="five wide"].column {
  360. width: 31.25% !important;
  361. }
  362. .ui.grid > .row > [class*="six wide"].column,
  363. .ui.grid > .column.row > [class*="six wide"].column,
  364. .ui.grid > [class*="six wide"].column,
  365. .ui.column.grid > [class*="six wide"].column {
  366. width: 37.5% !important;
  367. }
  368. .ui.grid > .row > [class*="seven wide"].column,
  369. .ui.grid > .column.row > [class*="seven wide"].column,
  370. .ui.grid > [class*="seven wide"].column,
  371. .ui.column.grid > [class*="seven wide"].column {
  372. width: 43.75% !important;
  373. }
  374. .ui.grid > .row > [class*="eight wide"].column,
  375. .ui.grid > .column.row > [class*="eight wide"].column,
  376. .ui.grid > [class*="eight wide"].column,
  377. .ui.column.grid > [class*="eight wide"].column {
  378. width: 50% !important;
  379. }
  380. .ui.grid > .row > [class*="nine wide"].column,
  381. .ui.grid > .column.row > [class*="nine wide"].column,
  382. .ui.grid > [class*="nine wide"].column,
  383. .ui.column.grid > [class*="nine wide"].column {
  384. width: 56.25% !important;
  385. }
  386. .ui.grid > .row > [class*="ten wide"].column,
  387. .ui.grid > .column.row > [class*="ten wide"].column,
  388. .ui.grid > [class*="ten wide"].column,
  389. .ui.column.grid > [class*="ten wide"].column {
  390. width: 62.5% !important;
  391. }
  392. .ui.grid > .row > [class*="eleven wide"].column,
  393. .ui.grid > .column.row > [class*="eleven wide"].column,
  394. .ui.grid > [class*="eleven wide"].column,
  395. .ui.column.grid > [class*="eleven wide"].column {
  396. width: 68.75% !important;
  397. }
  398. .ui.grid > .row > [class*="twelve wide"].column,
  399. .ui.grid > .column.row > [class*="twelve wide"].column,
  400. .ui.grid > [class*="twelve wide"].column,
  401. .ui.column.grid > [class*="twelve wide"].column {
  402. width: 75% !important;
  403. }
  404. .ui.grid > .row > [class*="thirteen wide"].column,
  405. .ui.grid > .column.row > [class*="thirteen wide"].column,
  406. .ui.grid > [class*="thirteen wide"].column,
  407. .ui.column.grid > [class*="thirteen wide"].column {
  408. width: 81.25% !important;
  409. }
  410. .ui.grid > .row > [class*="fourteen wide"].column,
  411. .ui.grid > .column.row > [class*="fourteen wide"].column,
  412. .ui.grid > [class*="fourteen wide"].column,
  413. .ui.column.grid > [class*="fourteen wide"].column {
  414. width: 87.5% !important;
  415. }
  416. .ui.grid > .row > [class*="fifteen wide"].column,
  417. .ui.grid > .column.row > [class*="fifteen wide"].column,
  418. .ui.grid > [class*="fifteen wide"].column,
  419. .ui.column.grid > [class*="fifteen wide"].column {
  420. width: 93.75% !important;
  421. }
  422. .ui.grid > .row > [class*="sixteen wide"].column,
  423. .ui.grid > .column.row > [class*="sixteen wide"].column,
  424. .ui.grid > [class*="sixteen wide"].column,
  425. .ui.column.grid > [class*="sixteen wide"].column {
  426. width: 100% !important;
  427. }
  428. /*----------------------
  429. Width per Device
  430. -----------------------*/
  431. /* Mobile Sizing Combinations */
  432. @media only screen and (min-width: 320px) and (max-width: 767px) {
  433. .ui.grid > .row > [class*="one wide mobile"].column,
  434. .ui.grid > .column.row > [class*="one wide mobile"].column,
  435. .ui.grid > [class*="one wide mobile"].column,
  436. .ui.column.grid > [class*="one wide mobile"].column {
  437. width: 6.25% !important;
  438. }
  439. .ui.grid > .row > [class*="two wide mobile"].column,
  440. .ui.grid > .column.row > [class*="two wide mobile"].column,
  441. .ui.grid > [class*="two wide mobile"].column,
  442. .ui.column.grid > [class*="two wide mobile"].column {
  443. width: 12.5% !important;
  444. }
  445. .ui.grid > .row > [class*="three wide mobile"].column,
  446. .ui.grid > .column.row > [class*="three wide mobile"].column,
  447. .ui.grid > [class*="three wide mobile"].column,
  448. .ui.column.grid > [class*="three wide mobile"].column {
  449. width: 18.75% !important;
  450. }
  451. .ui.grid > .row > [class*="four wide mobile"].column,
  452. .ui.grid > .column.row > [class*="four wide mobile"].column,
  453. .ui.grid > [class*="four wide mobile"].column,
  454. .ui.column.grid > [class*="four wide mobile"].column {
  455. width: 25% !important;
  456. }
  457. .ui.grid > .row > [class*="five wide mobile"].column,
  458. .ui.grid > .column.row > [class*="five wide mobile"].column,
  459. .ui.grid > [class*="five wide mobile"].column,
  460. .ui.column.grid > [class*="five wide mobile"].column {
  461. width: 31.25% !important;
  462. }
  463. .ui.grid > .row > [class*="six wide mobile"].column,
  464. .ui.grid > .column.row > [class*="six wide mobile"].column,
  465. .ui.grid > [class*="six wide mobile"].column,
  466. .ui.column.grid > [class*="six wide mobile"].column {
  467. width: 37.5% !important;
  468. }
  469. .ui.grid > .row > [class*="seven wide mobile"].column,
  470. .ui.grid > .column.row > [class*="seven wide mobile"].column,
  471. .ui.grid > [class*="seven wide mobile"].column,
  472. .ui.column.grid > [class*="seven wide mobile"].column {
  473. width: 43.75% !important;
  474. }
  475. .ui.grid > .row > [class*="eight wide mobile"].column,
  476. .ui.grid > .column.row > [class*="eight wide mobile"].column,
  477. .ui.grid > [class*="eight wide mobile"].column,
  478. .ui.column.grid > [class*="eight wide mobile"].column {
  479. width: 50% !important;
  480. }
  481. .ui.grid > .row > [class*="nine wide mobile"].column,
  482. .ui.grid > .column.row > [class*="nine wide mobile"].column,
  483. .ui.grid > [class*="nine wide mobile"].column,
  484. .ui.column.grid > [class*="nine wide mobile"].column {
  485. width: 56.25% !important;
  486. }
  487. .ui.grid > .row > [class*="ten wide mobile"].column,
  488. .ui.grid > .column.row > [class*="ten wide mobile"].column,
  489. .ui.grid > [class*="ten wide mobile"].column,
  490. .ui.column.grid > [class*="ten wide mobile"].column {
  491. width: 62.5% !important;
  492. }
  493. .ui.grid > .row > [class*="eleven wide mobile"].column,
  494. .ui.grid > .column.row > [class*="eleven wide mobile"].column,
  495. .ui.grid > [class*="eleven wide mobile"].column,
  496. .ui.column.grid > [class*="eleven wide mobile"].column {
  497. width: 68.75% !important;
  498. }
  499. .ui.grid > .row > [class*="twelve wide mobile"].column,
  500. .ui.grid > .column.row > [class*="twelve wide mobile"].column,
  501. .ui.grid > [class*="twelve wide mobile"].column,
  502. .ui.column.grid > [class*="twelve wide mobile"].column {
  503. width: 75% !important;
  504. }
  505. .ui.grid > .row > [class*="thirteen wide mobile"].column,
  506. .ui.grid > .column.row > [class*="thirteen wide mobile"].column,
  507. .ui.grid > [class*="thirteen wide mobile"].column,
  508. .ui.column.grid > [class*="thirteen wide mobile"].column {
  509. width: 81.25% !important;
  510. }
  511. .ui.grid > .row > [class*="fourteen wide mobile"].column,
  512. .ui.grid > .column.row > [class*="fourteen wide mobile"].column,
  513. .ui.grid > [class*="fourteen wide mobile"].column,
  514. .ui.column.grid > [class*="fourteen wide mobile"].column {
  515. width: 87.5% !important;
  516. }
  517. .ui.grid > .row > [class*="fifteen wide mobile"].column,
  518. .ui.grid > .column.row > [class*="fifteen wide mobile"].column,
  519. .ui.grid > [class*="fifteen wide mobile"].column,
  520. .ui.column.grid > [class*="fifteen wide mobile"].column {
  521. width: 93.75% !important;
  522. }
  523. .ui.grid > .row > [class*="sixteen wide mobile"].column,
  524. .ui.grid > .column.row > [class*="sixteen wide mobile"].column,
  525. .ui.grid > [class*="sixteen wide mobile"].column,
  526. .ui.column.grid > [class*="sixteen wide mobile"].column {
  527. width: 100% !important;
  528. }
  529. }
  530. /* Tablet Sizing Combinations */
  531. @media only screen and (min-width: 768px) and (max-width: 991px) {
  532. .ui.grid > .row > [class*="one wide tablet"].column,
  533. .ui.grid > .column.row > [class*="one wide tablet"].column,
  534. .ui.grid > [class*="one wide tablet"].column,
  535. .ui.column.grid > [class*="one wide tablet"].column {
  536. width: 6.25% !important;
  537. }
  538. .ui.grid > .row > [class*="two wide tablet"].column,
  539. .ui.grid > .column.row > [class*="two wide tablet"].column,
  540. .ui.grid > [class*="two wide tablet"].column,
  541. .ui.column.grid > [class*="two wide tablet"].column {
  542. width: 12.5% !important;
  543. }
  544. .ui.grid > .row > [class*="three wide tablet"].column,
  545. .ui.grid > .column.row > [class*="three wide tablet"].column,
  546. .ui.grid > [class*="three wide tablet"].column,
  547. .ui.column.grid > [class*="three wide tablet"].column {
  548. width: 18.75% !important;
  549. }
  550. .ui.grid > .row > [class*="four wide tablet"].column,
  551. .ui.grid > .column.row > [class*="four wide tablet"].column,
  552. .ui.grid > [class*="four wide tablet"].column,
  553. .ui.column.grid > [class*="four wide tablet"].column {
  554. width: 25% !important;
  555. }
  556. .ui.grid > .row > [class*="five wide tablet"].column,
  557. .ui.grid > .column.row > [class*="five wide tablet"].column,
  558. .ui.grid > [class*="five wide tablet"].column,
  559. .ui.column.grid > [class*="five wide tablet"].column {
  560. width: 31.25% !important;
  561. }
  562. .ui.grid > .row > [class*="six wide tablet"].column,
  563. .ui.grid > .column.row > [class*="six wide tablet"].column,
  564. .ui.grid > [class*="six wide tablet"].column,
  565. .ui.column.grid > [class*="six wide tablet"].column {
  566. width: 37.5% !important;
  567. }
  568. .ui.grid > .row > [class*="seven wide tablet"].column,
  569. .ui.grid > .column.row > [class*="seven wide tablet"].column,
  570. .ui.grid > [class*="seven wide tablet"].column,
  571. .ui.column.grid > [class*="seven wide tablet"].column {
  572. width: 43.75% !important;
  573. }
  574. .ui.grid > .row > [class*="eight wide tablet"].column,
  575. .ui.grid > .column.row > [class*="eight wide tablet"].column,
  576. .ui.grid > [class*="eight wide tablet"].column,
  577. .ui.column.grid > [class*="eight wide tablet"].column {
  578. width: 50% !important;
  579. }
  580. .ui.grid > .row > [class*="nine wide tablet"].column,
  581. .ui.grid > .column.row > [class*="nine wide tablet"].column,
  582. .ui.grid > [class*="nine wide tablet"].column,
  583. .ui.column.grid > [class*="nine wide tablet"].column {
  584. width: 56.25% !important;
  585. }
  586. .ui.grid > .row > [class*="ten wide tablet"].column,
  587. .ui.grid > .column.row > [class*="ten wide tablet"].column,
  588. .ui.grid > [class*="ten wide tablet"].column,
  589. .ui.column.grid > [class*="ten wide tablet"].column {
  590. width: 62.5% !important;
  591. }
  592. .ui.grid > .row > [class*="eleven wide tablet"].column,
  593. .ui.grid > .column.row > [class*="eleven wide tablet"].column,
  594. .ui.grid > [class*="eleven wide tablet"].column,
  595. .ui.column.grid > [class*="eleven wide tablet"].column {
  596. width: 68.75% !important;
  597. }
  598. .ui.grid > .row > [class*="twelve wide tablet"].column,
  599. .ui.grid > .column.row > [class*="twelve wide tablet"].column,
  600. .ui.grid > [class*="twelve wide tablet"].column,
  601. .ui.column.grid > [class*="twelve wide tablet"].column {
  602. width: 75% !important;
  603. }
  604. .ui.grid > .row > [class*="thirteen wide tablet"].column,
  605. .ui.grid > .column.row > [class*="thirteen wide tablet"].column,
  606. .ui.grid > [class*="thirteen wide tablet"].column,
  607. .ui.column.grid > [class*="thirteen wide tablet"].column {
  608. width: 81.25% !important;
  609. }
  610. .ui.grid > .row > [class*="fourteen wide tablet"].column,
  611. .ui.grid > .column.row > [class*="fourteen wide tablet"].column,
  612. .ui.grid > [class*="fourteen wide tablet"].column,
  613. .ui.column.grid > [class*="fourteen wide tablet"].column {
  614. width: 87.5% !important;
  615. }
  616. .ui.grid > .row > [class*="fifteen wide tablet"].column,
  617. .ui.grid > .column.row > [class*="fifteen wide tablet"].column,
  618. .ui.grid > [class*="fifteen wide tablet"].column,
  619. .ui.column.grid > [class*="fifteen wide tablet"].column {
  620. width: 93.75% !important;
  621. }
  622. .ui.grid > .row > [class*="sixteen wide tablet"].column,
  623. .ui.grid > .column.row > [class*="sixteen wide tablet"].column,
  624. .ui.grid > [class*="sixteen wide tablet"].column,
  625. .ui.column.grid > [class*="sixteen wide tablet"].column {
  626. width: 100% !important;
  627. }
  628. }
  629. /* Computer/Desktop Sizing Combinations */
  630. @media only screen and (min-width: 992px) {
  631. .ui.grid > .row > [class*="one wide computer"].column,
  632. .ui.grid > .column.row > [class*="one wide computer"].column,
  633. .ui.grid > [class*="one wide computer"].column,
  634. .ui.column.grid > [class*="one wide computer"].column {
  635. width: 6.25% !important;
  636. }
  637. .ui.grid > .row > [class*="two wide computer"].column,
  638. .ui.grid > .column.row > [class*="two wide computer"].column,
  639. .ui.grid > [class*="two wide computer"].column,
  640. .ui.column.grid > [class*="two wide computer"].column {
  641. width: 12.5% !important;
  642. }
  643. .ui.grid > .row > [class*="three wide computer"].column,
  644. .ui.grid > .column.row > [class*="three wide computer"].column,
  645. .ui.grid > [class*="three wide computer"].column,
  646. .ui.column.grid > [class*="three wide computer"].column {
  647. width: 18.75% !important;
  648. }
  649. .ui.grid > .row > [class*="four wide computer"].column,
  650. .ui.grid > .column.row > [class*="four wide computer"].column,
  651. .ui.grid > [class*="four wide computer"].column,
  652. .ui.column.grid > [class*="four wide computer"].column {
  653. width: 25% !important;
  654. }
  655. .ui.grid > .row > [class*="five wide computer"].column,
  656. .ui.grid > .column.row > [class*="five wide computer"].column,
  657. .ui.grid > [class*="five wide computer"].column,
  658. .ui.column.grid > [class*="five wide computer"].column {
  659. width: 31.25% !important;
  660. }
  661. .ui.grid > .row > [class*="six wide computer"].column,
  662. .ui.grid > .column.row > [class*="six wide computer"].column,
  663. .ui.grid > [class*="six wide computer"].column,
  664. .ui.column.grid > [class*="six wide computer"].column {
  665. width: 37.5% !important;
  666. }
  667. .ui.grid > .row > [class*="seven wide computer"].column,
  668. .ui.grid > .column.row > [class*="seven wide computer"].column,
  669. .ui.grid > [class*="seven wide computer"].column,
  670. .ui.column.grid > [class*="seven wide computer"].column {
  671. width: 43.75% !important;
  672. }
  673. .ui.grid > .row > [class*="eight wide computer"].column,
  674. .ui.grid > .column.row > [class*="eight wide computer"].column,
  675. .ui.grid > [class*="eight wide computer"].column,
  676. .ui.column.grid > [class*="eight wide computer"].column {
  677. width: 50% !important;
  678. }
  679. .ui.grid > .row > [class*="nine wide computer"].column,
  680. .ui.grid > .column.row > [class*="nine wide computer"].column,
  681. .ui.grid > [class*="nine wide computer"].column,
  682. .ui.column.grid > [class*="nine wide computer"].column {
  683. width: 56.25% !important;
  684. }
  685. .ui.grid > .row > [class*="ten wide computer"].column,
  686. .ui.grid > .column.row > [class*="ten wide computer"].column,
  687. .ui.grid > [class*="ten wide computer"].column,
  688. .ui.column.grid > [class*="ten wide computer"].column {
  689. width: 62.5% !important;
  690. }
  691. .ui.grid > .row > [class*="eleven wide computer"].column,
  692. .ui.grid > .column.row > [class*="eleven wide computer"].column,
  693. .ui.grid > [class*="eleven wide computer"].column,
  694. .ui.column.grid > [class*="eleven wide computer"].column {
  695. width: 68.75% !important;
  696. }
  697. .ui.grid > .row > [class*="twelve wide computer"].column,
  698. .ui.grid > .column.row > [class*="twelve wide computer"].column,
  699. .ui.grid > [class*="twelve wide computer"].column,
  700. .ui.column.grid > [class*="twelve wide computer"].column {
  701. width: 75% !important;
  702. }
  703. .ui.grid > .row > [class*="thirteen wide computer"].column,
  704. .ui.grid > .column.row > [class*="thirteen wide computer"].column,
  705. .ui.grid > [class*="thirteen wide computer"].column,
  706. .ui.column.grid > [class*="thirteen wide computer"].column {
  707. width: 81.25% !important;
  708. }
  709. .ui.grid > .row > [class*="fourteen wide computer"].column,
  710. .ui.grid > .column.row > [class*="fourteen wide computer"].column,
  711. .ui.grid > [class*="fourteen wide computer"].column,
  712. .ui.column.grid > [class*="fourteen wide computer"].column {
  713. width: 87.5% !important;
  714. }
  715. .ui.grid > .row > [class*="fifteen wide computer"].column,
  716. .ui.grid > .column.row > [class*="fifteen wide computer"].column,
  717. .ui.grid > [class*="fifteen wide computer"].column,
  718. .ui.column.grid > [class*="fifteen wide computer"].column {
  719. width: 93.75% !important;
  720. }
  721. .ui.grid > .row > [class*="sixteen wide computer"].column,
  722. .ui.grid > .column.row > [class*="sixteen wide computer"].column,
  723. .ui.grid > [class*="sixteen wide computer"].column,
  724. .ui.column.grid > [class*="sixteen wide computer"].column {
  725. width: 100% !important;
  726. }
  727. }
  728. /* Large Monitor Sizing Combinations */
  729. @media only screen and (min-width: 1200px) and (max-width: 1919px) {
  730. .ui.grid > .row > [class*="one wide large screen"].column,
  731. .ui.grid > .column.row > [class*="one wide large screen"].column,
  732. .ui.grid > [class*="one wide large screen"].column,
  733. .ui.column.grid > [class*="one wide large screen"].column {
  734. width: 6.25% !important;
  735. }
  736. .ui.grid > .row > [class*="two wide large screen"].column,
  737. .ui.grid > .column.row > [class*="two wide large screen"].column,
  738. .ui.grid > [class*="two wide large screen"].column,
  739. .ui.column.grid > [class*="two wide large screen"].column {
  740. width: 12.5% !important;
  741. }
  742. .ui.grid > .row > [class*="three wide large screen"].column,
  743. .ui.grid > .column.row > [class*="three wide large screen"].column,
  744. .ui.grid > [class*="three wide large screen"].column,
  745. .ui.column.grid > [class*="three wide large screen"].column {
  746. width: 18.75% !important;
  747. }
  748. .ui.grid > .row > [class*="four wide large screen"].column,
  749. .ui.grid > .column.row > [class*="four wide large screen"].column,
  750. .ui.grid > [class*="four wide large screen"].column,
  751. .ui.column.grid > [class*="four wide large screen"].column {
  752. width: 25% !important;
  753. }
  754. .ui.grid > .row > [class*="five wide large screen"].column,
  755. .ui.grid > .column.row > [class*="five wide large screen"].column,
  756. .ui.grid > [class*="five wide large screen"].column,
  757. .ui.column.grid > [class*="five wide large screen"].column {
  758. width: 31.25% !important;
  759. }
  760. .ui.grid > .row > [class*="six wide large screen"].column,
  761. .ui.grid > .column.row > [class*="six wide large screen"].column,
  762. .ui.grid > [class*="six wide large screen"].column,
  763. .ui.column.grid > [class*="six wide large screen"].column {
  764. width: 37.5% !important;
  765. }
  766. .ui.grid > .row > [class*="seven wide large screen"].column,
  767. .ui.grid > .column.row > [class*="seven wide large screen"].column,
  768. .ui.grid > [class*="seven wide large screen"].column,
  769. .ui.column.grid > [class*="seven wide large screen"].column {
  770. width: 43.75% !important;
  771. }
  772. .ui.grid > .row > [class*="eight wide large screen"].column,
  773. .ui.grid > .column.row > [class*="eight wide large screen"].column,
  774. .ui.grid > [class*="eight wide large screen"].column,
  775. .ui.column.grid > [class*="eight wide large screen"].column {
  776. width: 50% !important;
  777. }
  778. .ui.grid > .row > [class*="nine wide large screen"].column,
  779. .ui.grid > .column.row > [class*="nine wide large screen"].column,
  780. .ui.grid > [class*="nine wide large screen"].column,
  781. .ui.column.grid > [class*="nine wide large screen"].column {
  782. width: 56.25% !important;
  783. }
  784. .ui.grid > .row > [class*="ten wide large screen"].column,
  785. .ui.grid > .column.row > [class*="ten wide large screen"].column,
  786. .ui.grid > [class*="ten wide large screen"].column,
  787. .ui.column.grid > [class*="ten wide large screen"].column {
  788. width: 62.5% !important;
  789. }
  790. .ui.grid > .row > [class*="eleven wide large screen"].column,
  791. .ui.grid > .column.row > [class*="eleven wide large screen"].column,
  792. .ui.grid > [class*="eleven wide large screen"].column,
  793. .ui.column.grid > [class*="eleven wide large screen"].column {
  794. width: 68.75% !important;
  795. }
  796. .ui.grid > .row > [class*="twelve wide large screen"].column,
  797. .ui.grid > .column.row > [class*="twelve wide large screen"].column,
  798. .ui.grid > [class*="twelve wide large screen"].column,
  799. .ui.column.grid > [class*="twelve wide large screen"].column {
  800. width: 75% !important;
  801. }
  802. .ui.grid > .row > [class*="thirteen wide large screen"].column,
  803. .ui.grid > .column.row > [class*="thirteen wide large screen"].column,
  804. .ui.grid > [class*="thirteen wide large screen"].column,
  805. .ui.column.grid > [class*="thirteen wide large screen"].column {
  806. width: 81.25% !important;
  807. }
  808. .ui.grid > .row > [class*="fourteen wide large screen"].column,
  809. .ui.grid > .column.row > [class*="fourteen wide large screen"].column,
  810. .ui.grid > [class*="fourteen wide large screen"].column,
  811. .ui.column.grid > [class*="fourteen wide large screen"].column {
  812. width: 87.5% !important;
  813. }
  814. .ui.grid > .row > [class*="fifteen wide large screen"].column,
  815. .ui.grid > .column.row > [class*="fifteen wide large screen"].column,
  816. .ui.grid > [class*="fifteen wide large screen"].column,
  817. .ui.column.grid > [class*="fifteen wide large screen"].column {
  818. width: 93.75% !important;
  819. }
  820. .ui.grid > .row > [class*="sixteen wide large screen"].column,
  821. .ui.grid > .column.row > [class*="sixteen wide large screen"].column,
  822. .ui.grid > [class*="sixteen wide large screen"].column,
  823. .ui.column.grid > [class*="sixteen wide large screen"].column {
  824. width: 100% !important;
  825. }
  826. }
  827. /* Widescreen Sizing Combinations */
  828. @media only screen and (min-width: 1920px) {
  829. .ui.grid > .row > [class*="one wide widescreen"].column,
  830. .ui.grid > .column.row > [class*="one wide widescreen"].column,
  831. .ui.grid > [class*="one wide widescreen"].column,
  832. .ui.column.grid > [class*="one wide widescreen"].column {
  833. width: 6.25% !important;
  834. }
  835. .ui.grid > .row > [class*="two wide widescreen"].column,
  836. .ui.grid > .column.row > [class*="two wide widescreen"].column,
  837. .ui.grid > [class*="two wide widescreen"].column,
  838. .ui.column.grid > [class*="two wide widescreen"].column {
  839. width: 12.5% !important;
  840. }
  841. .ui.grid > .row > [class*="three wide widescreen"].column,
  842. .ui.grid > .column.row > [class*="three wide widescreen"].column,
  843. .ui.grid > [class*="three wide widescreen"].column,
  844. .ui.column.grid > [class*="three wide widescreen"].column {
  845. width: 18.75% !important;
  846. }
  847. .ui.grid > .row > [class*="four wide widescreen"].column,
  848. .ui.grid > .column.row > [class*="four wide widescreen"].column,
  849. .ui.grid > [class*="four wide widescreen"].column,
  850. .ui.column.grid > [class*="four wide widescreen"].column {
  851. width: 25% !important;
  852. }
  853. .ui.grid > .row > [class*="five wide widescreen"].column,
  854. .ui.grid > .column.row > [class*="five wide widescreen"].column,
  855. .ui.grid > [class*="five wide widescreen"].column,
  856. .ui.column.grid > [class*="five wide widescreen"].column {
  857. width: 31.25% !important;
  858. }
  859. .ui.grid > .row > [class*="six wide widescreen"].column,
  860. .ui.grid > .column.row > [class*="six wide widescreen"].column,
  861. .ui.grid > [class*="six wide widescreen"].column,
  862. .ui.column.grid > [class*="six wide widescreen"].column {
  863. width: 37.5% !important;
  864. }
  865. .ui.grid > .row > [class*="seven wide widescreen"].column,
  866. .ui.grid > .column.row > [class*="seven wide widescreen"].column,
  867. .ui.grid > [class*="seven wide widescreen"].column,
  868. .ui.column.grid > [class*="seven wide widescreen"].column {
  869. width: 43.75% !important;
  870. }
  871. .ui.grid > .row > [class*="eight wide widescreen"].column,
  872. .ui.grid > .column.row > [class*="eight wide widescreen"].column,
  873. .ui.grid > [class*="eight wide widescreen"].column,
  874. .ui.column.grid > [class*="eight wide widescreen"].column {
  875. width: 50% !important;
  876. }
  877. .ui.grid > .row > [class*="nine wide widescreen"].column,
  878. .ui.grid > .column.row > [class*="nine wide widescreen"].column,
  879. .ui.grid > [class*="nine wide widescreen"].column,
  880. .ui.column.grid > [class*="nine wide widescreen"].column {
  881. width: 56.25% !important;
  882. }
  883. .ui.grid > .row > [class*="ten wide widescreen"].column,
  884. .ui.grid > .column.row > [class*="ten wide widescreen"].column,
  885. .ui.grid > [class*="ten wide widescreen"].column,
  886. .ui.column.grid > [class*="ten wide widescreen"].column {
  887. width: 62.5% !important;
  888. }
  889. .ui.grid > .row > [class*="eleven wide widescreen"].column,
  890. .ui.grid > .column.row > [class*="eleven wide widescreen"].column,
  891. .ui.grid > [class*="eleven wide widescreen"].column,
  892. .ui.column.grid > [class*="eleven wide widescreen"].column {
  893. width: 68.75% !important;
  894. }
  895. .ui.grid > .row > [class*="twelve wide widescreen"].column,
  896. .ui.grid > .column.row > [class*="twelve wide widescreen"].column,
  897. .ui.grid > [class*="twelve wide widescreen"].column,
  898. .ui.column.grid > [class*="twelve wide widescreen"].column {
  899. width: 75% !important;
  900. }
  901. .ui.grid > .row > [class*="thirteen wide widescreen"].column,
  902. .ui.grid > .column.row > [class*="thirteen wide widescreen"].column,
  903. .ui.grid > [class*="thirteen wide widescreen"].column,
  904. .ui.column.grid > [class*="thirteen wide widescreen"].column {
  905. width: 81.25% !important;
  906. }
  907. .ui.grid > .row > [class*="fourteen wide widescreen"].column,
  908. .ui.grid > .column.row > [class*="fourteen wide widescreen"].column,
  909. .ui.grid > [class*="fourteen wide widescreen"].column,
  910. .ui.column.grid > [class*="fourteen wide widescreen"].column {
  911. width: 87.5% !important;
  912. }
  913. .ui.grid > .row > [class*="fifteen wide widescreen"].column,
  914. .ui.grid > .column.row > [class*="fifteen wide widescreen"].column,
  915. .ui.grid > [class*="fifteen wide widescreen"].column,
  916. .ui.column.grid > [class*="fifteen wide widescreen"].column {
  917. width: 93.75% !important;
  918. }
  919. .ui.grid > .row > [class*="sixteen wide widescreen"].column,
  920. .ui.grid > .column.row > [class*="sixteen wide widescreen"].column,
  921. .ui.grid > [class*="sixteen wide widescreen"].column,
  922. .ui.column.grid > [class*="sixteen wide widescreen"].column {
  923. width: 100% !important;
  924. }
  925. }
  926. /*----------------------
  927. Centered
  928. -----------------------*/
  929. .ui.centered.grid,
  930. .ui.centered.grid > .row,
  931. .ui.grid > .centered.row {
  932. text-align: center;
  933. -webkit-box-pack: center;
  934. -webkit-justify-content: center;
  935. -ms-flex-pack: center;
  936. justify-content: center;
  937. }
  938. .ui.centered.grid > .column:not(.aligned):not(.row),
  939. .ui.centered.grid > .row > .column:not(.aligned),
  940. .ui.grid .centered.row > .column:not(.aligned) {
  941. text-align: left;
  942. }
  943. .ui.grid > .centered.column,
  944. .ui.grid > .row > .centered.column {
  945. display: block;
  946. margin-left: auto;
  947. margin-right: auto;
  948. }
  949. /*----------------------
  950. Relaxed
  951. -----------------------*/
  952. .ui.relaxed.grid > .column:not(.row),
  953. .ui.relaxed.grid > .row > .column,
  954. .ui.grid > .relaxed.row > .column {
  955. padding-left: 1.5rem;
  956. padding-right: 1.5rem;
  957. }
  958. .ui[class*="very relaxed"].grid > .column:not(.row),
  959. .ui[class*="very relaxed"].grid > .row > .column,
  960. .ui.grid > [class*="very relaxed"].row > .column {
  961. padding-left: 2.5rem;
  962. padding-right: 2.5rem;
  963. }
  964. /* Coupling with UI Divider */
  965. .ui.relaxed.grid .row + .ui.divider,
  966. .ui.grid .relaxed.row + .ui.divider {
  967. margin-left: 1.5rem;
  968. margin-right: 1.5rem;
  969. }
  970. .ui[class*="very relaxed"].grid .row + .ui.divider,
  971. .ui.grid [class*="very relaxed"].row + .ui.divider {
  972. margin-left: 2.5rem;
  973. margin-right: 2.5rem;
  974. }
  975. /*----------------------
  976. Padded
  977. -----------------------*/
  978. .ui.padded.grid:not(.vertically):not(.horizontally) {
  979. margin: 0em !important;
  980. }
  981. [class*="horizontally padded"].ui.grid {
  982. margin-left: 0em !important;
  983. margin-right: 0em !important;
  984. }
  985. [class*="vertically padded"].ui.grid {
  986. margin-top: 0em !important;
  987. margin-bottom: 0em !important;
  988. }
  989. /*----------------------
  990. "Floated"
  991. -----------------------*/
  992. .ui.grid [class*="left floated"].column {
  993. margin-right: auto;
  994. }
  995. .ui.grid [class*="right floated"].column {
  996. margin-left: auto;
  997. }
  998. /*----------------------
  999. Divided
  1000. -----------------------*/
  1001. .ui.divided.grid:not([class*="vertically divided"]) > .column:not(.row),
  1002. .ui.divided.grid:not([class*="vertically divided"]) > .row > .column {
  1003. box-shadow: -1px 0px 0px 0px rgba(34, 36, 38, 0.15);
  1004. }
  1005. /* Swap from padding to margin on columns to have dividers align */
  1006. .ui[class*="vertically divided"].grid > .column:not(.row),
  1007. .ui[class*="vertically divided"].grid > .row > .column {
  1008. margin-top: 1rem;
  1009. margin-bottom: 1rem;
  1010. padding-top: 0rem;
  1011. padding-bottom: 0rem;
  1012. }
  1013. .ui[class*="vertically divided"].grid > .row {
  1014. margin-top: 0em;
  1015. margin-bottom: 0em;
  1016. }
  1017. /* No divider on first column on row */
  1018. .ui.divided.grid:not([class*="vertically divided"]) > .column:first-child,
  1019. .ui.divided.grid:not([class*="vertically divided"]) > .row > .column:first-child {
  1020. box-shadow: none;
  1021. }
  1022. /* Divided Row */
  1023. .ui.grid > .divided.row > .column {
  1024. box-shadow: -1px 0px 0px 0px rgba(34, 36, 38, 0.15);
  1025. }
  1026. .ui.grid > .divided.row > .column:first-child {
  1027. box-shadow: none;
  1028. }
  1029. /* Vertically Divided */
  1030. .ui[class*="vertically divided"].grid > .row {
  1031. position: relative;
  1032. }
  1033. .ui[class*="vertically divided"].grid > .row:before {
  1034. position: absolute;
  1035. content: "";
  1036. top: 0em;
  1037. left: 0px;
  1038. width: calc(100% - 2rem );
  1039. height: 1px;
  1040. margin: 0% 1rem;
  1041. box-shadow: 0px -1px 0px 0px rgba(34, 36, 38, 0.15);
  1042. }
  1043. /* Padded Horizontally Divided */
  1044. [class*="horizontally padded"].ui.divided.grid,
  1045. .ui.padded.divided.grid:not(.vertically):not(.horizontally) {
  1046. width: 100%;
  1047. }
  1048. /* First Row Vertically Divided */
  1049. .ui[class*="vertically divided"].grid > .row:first-child:before {
  1050. box-shadow: none;
  1051. }
  1052. /* Inverted Divided */
  1053. .ui.inverted.divided.grid:not([class*="vertically divided"]) > .column:not(.row),
  1054. .ui.inverted.divided.grid:not([class*="vertically divided"]) > .row > .column {
  1055. box-shadow: -1px 0px 0px 0px rgba(255, 255, 255, 0.1);
  1056. }
  1057. .ui.inverted.divided.grid:not([class*="vertically divided"]) > .column:not(.row):first-child,
  1058. .ui.inverted.divided.grid:not([class*="vertically divided"]) > .row > .column:first-child {
  1059. box-shadow: none;
  1060. }
  1061. .ui.inverted[class*="vertically divided"].grid > .row:before {
  1062. box-shadow: 0px -1px 0px 0px rgba(255, 255, 255, 0.1);
  1063. }
  1064. /* Relaxed */
  1065. .ui.relaxed[class*="vertically divided"].grid > .row:before {
  1066. margin-left: 1.5rem;
  1067. margin-right: 1.5rem;
  1068. width: calc(100% - 3rem );
  1069. }
  1070. .ui[class*="very relaxed"][class*="vertically divided"].grid > .row:before {
  1071. margin-left: 5rem;
  1072. margin-right: 5rem;
  1073. width: calc(100% - 5rem );
  1074. }
  1075. /*----------------------
  1076. Celled
  1077. -----------------------*/
  1078. .ui.celled.grid {
  1079. width: 100%;
  1080. margin: 1em 0em;
  1081. box-shadow: 0px 0px 0px 1px #D4D4D5;
  1082. }
  1083. .ui.celled.grid > .row {
  1084. width: 100% !important;
  1085. margin: 0em;
  1086. padding: 0em;
  1087. box-shadow: 0px -1px 0px 0px #D4D4D5;
  1088. }
  1089. .ui.celled.grid > .column:not(.row),
  1090. .ui.celled.grid > .row > .column {
  1091. box-shadow: -1px 0px 0px 0px #D4D4D5;
  1092. }
  1093. .ui.celled.grid > .column:first-child,
  1094. .ui.celled.grid > .row > .column:first-child {
  1095. box-shadow: none;
  1096. }
  1097. .ui.celled.grid > .column:not(.row),
  1098. .ui.celled.grid > .row > .column {
  1099. padding: 1em;
  1100. }
  1101. .ui.relaxed.celled.grid > .column:not(.row),
  1102. .ui.relaxed.celled.grid > .row > .column {
  1103. padding: 1.5em;
  1104. }
  1105. .ui[class*="very relaxed"].celled.grid > .column:not(.row),
  1106. .ui[class*="very relaxed"].celled.grid > .row > .column {
  1107. padding: 2em;
  1108. }
  1109. /* Internally Celled */
  1110. .ui[class*="internally celled"].grid {
  1111. box-shadow: none;
  1112. margin: 0em;
  1113. }
  1114. .ui[class*="internally celled"].grid > .row:first-child {
  1115. box-shadow: none;
  1116. }
  1117. .ui[class*="internally celled"].grid > .row > .column:first-child {
  1118. box-shadow: none;
  1119. }
  1120. /*----------------------
  1121. Vertically Aligned
  1122. -----------------------*/
  1123. /* Top Aligned */
  1124. .ui[class*="top aligned"].grid > .column:not(.row),
  1125. .ui[class*="top aligned"].grid > .row > .column,
  1126. .ui.grid > [class*="top aligned"].row > .column,
  1127. .ui.grid > [class*="top aligned"].column:not(.row),
  1128. .ui.grid > .row > [class*="top aligned"].column {
  1129. -webkit-box-orient: vertical;
  1130. -webkit-box-direction: normal;
  1131. -webkit-flex-direction: column;
  1132. -ms-flex-direction: column;
  1133. flex-direction: column;
  1134. vertical-align: top;
  1135. -webkit-align-self: flex-start !important;
  1136. -ms-flex-item-align: start !important;
  1137. align-self: flex-start !important;
  1138. }
  1139. /* Middle Aligned */
  1140. .ui[class*="middle aligned"].grid > .column:not(.row),
  1141. .ui[class*="middle aligned"].grid > .row > .column,
  1142. .ui.grid > [class*="middle aligned"].row > .column,
  1143. .ui.grid > [class*="middle aligned"].column:not(.row),
  1144. .ui.grid > .row > [class*="middle aligned"].column {
  1145. -webkit-box-orient: vertical;
  1146. -webkit-box-direction: normal;
  1147. -webkit-flex-direction: column;
  1148. -ms-flex-direction: column;
  1149. flex-direction: column;
  1150. vertical-align: middle;
  1151. -webkit-align-self: center !important;
  1152. -ms-flex-item-align: center !important;
  1153. align-self: center !important;
  1154. }
  1155. /* Bottom Aligned */
  1156. .ui[class*="bottom aligned"].grid > .column:not(.row),
  1157. .ui[class*="bottom aligned"].grid > .row > .column,
  1158. .ui.grid > [class*="bottom aligned"].row > .column,
  1159. .ui.grid > [class*="bottom aligned"].column:not(.row),
  1160. .ui.grid > .row > [class*="bottom aligned"].column {
  1161. -webkit-box-orient: vertical;
  1162. -webkit-box-direction: normal;
  1163. -webkit-flex-direction: column;
  1164. -ms-flex-direction: column;
  1165. flex-direction: column;
  1166. vertical-align: bottom;
  1167. -webkit-align-self: flex-end !important;
  1168. -ms-flex-item-align: end !important;
  1169. align-self: flex-end !important;
  1170. }
  1171. /* Stretched */
  1172. .ui.stretched.grid > .row > .column,
  1173. .ui.stretched.grid > .column,
  1174. .ui.grid > .stretched.row > .column,
  1175. .ui.grid > .stretched.column:not(.row),
  1176. .ui.grid > .row > .stretched.column {
  1177. display: -webkit-inline-box !important;
  1178. display: -webkit-inline-flex !important;
  1179. display: -ms-inline-flexbox !important;
  1180. display: inline-flex !important;
  1181. -webkit-align-self: stretch;
  1182. -ms-flex-item-align: stretch;
  1183. align-self: stretch;
  1184. -webkit-box-orient: vertical;
  1185. -webkit-box-direction: normal;
  1186. -webkit-flex-direction: column;
  1187. -ms-flex-direction: column;
  1188. flex-direction: column;
  1189. }
  1190. .ui.stretched.grid > .row > .column > *,
  1191. .ui.stretched.grid > .column > *,
  1192. .ui.grid > .stretched.row > .column > *,
  1193. .ui.grid > .stretched.column:not(.row) > *,
  1194. .ui.grid > .row > .stretched.column > * {
  1195. -webkit-box-flex: 1;
  1196. -webkit-flex-grow: 1;
  1197. -ms-flex-positive: 1;
  1198. flex-grow: 1;
  1199. }
  1200. /*----------------------
  1201. Horizontally Centered
  1202. -----------------------*/
  1203. /* Left Aligned */
  1204. .ui[class*="left aligned"].grid > .column,
  1205. .ui[class*="left aligned"].grid > .row > .column,
  1206. .ui.grid > [class*="left aligned"].row > .column,
  1207. .ui.grid > [class*="left aligned"].column.column,
  1208. .ui.grid > .row > [class*="left aligned"].column {
  1209. text-align: left;
  1210. -webkit-align-self: inherit;
  1211. -ms-flex-item-align: inherit;
  1212. align-self: inherit;
  1213. }
  1214. /* Center Aligned */
  1215. .ui[class*="center aligned"].grid > .column,
  1216. .ui[class*="center aligned"].grid > .row > .column,
  1217. .ui.grid > [class*="center aligned"].row > .column,
  1218. .ui.grid > [class*="center aligned"].column.column,
  1219. .ui.grid > .row > [class*="center aligned"].column {
  1220. text-align: center;
  1221. -webkit-align-self: inherit;
  1222. -ms-flex-item-align: inherit;
  1223. align-self: inherit;
  1224. }
  1225. .ui[class*="center aligned"].grid {
  1226. -webkit-box-pack: center;
  1227. -webkit-justify-content: center;
  1228. -ms-flex-pack: center;
  1229. justify-content: center;
  1230. }
  1231. /* Right Aligned */
  1232. .ui[class*="right aligned"].grid > .column,
  1233. .ui[class*="right aligned"].grid > .row > .column,
  1234. .ui.grid > [class*="right aligned"].row > .column,
  1235. .ui.grid > [class*="right aligned"].column.column,
  1236. .ui.grid > .row > [class*="right aligned"].column {
  1237. text-align: right;
  1238. -webkit-align-self: inherit;
  1239. -ms-flex-item-align: inherit;
  1240. align-self: inherit;
  1241. }
  1242. /* Justified */
  1243. .ui.justified.grid > .column,
  1244. .ui.justified.grid > .row > .column,
  1245. .ui.grid > .justified.row > .column,
  1246. .ui.grid > .justified.column.column,
  1247. .ui.grid > .row > .justified.column {
  1248. text-align: justify;
  1249. -webkit-hyphens: auto;
  1250. -moz-hyphens: auto;
  1251. -ms-hyphens: auto;
  1252. hyphens: auto;
  1253. }
  1254. /*----------------------
  1255. Colored
  1256. -----------------------*/
  1257. .ui.grid > .row > .red.column,
  1258. .ui.grid > .row > .orange.column,
  1259. .ui.grid > .row > .yellow.column,
  1260. .ui.grid > .row > .olive.column,
  1261. .ui.grid > .row > .green.column,
  1262. .ui.grid > .row > .teal.column,
  1263. .ui.grid > .row > .blue.column,
  1264. .ui.grid > .row > .violet.column,
  1265. .ui.grid > .row > .purple.column,
  1266. .ui.grid > .row > .pink.column,
  1267. .ui.grid > .row > .brown.column,
  1268. .ui.grid > .row > .grey.column,
  1269. .ui.grid > .row > .black.column {
  1270. margin-top: -1rem;
  1271. margin-bottom: -1rem;
  1272. padding-top: 1rem;
  1273. padding-bottom: 1rem;
  1274. }
  1275. /* Red */
  1276. .ui.grid > .red.row,
  1277. .ui.grid > .red.column,
  1278. .ui.grid > .row > .red.column {
  1279. background-color: #DB2828 !important;
  1280. color: #FFFFFF;
  1281. }
  1282. /* Orange */
  1283. .ui.grid > .orange.row,
  1284. .ui.grid > .orange.column,
  1285. .ui.grid > .row > .orange.column {
  1286. background-color: #F2711C !important;
  1287. color: #FFFFFF;
  1288. }
  1289. /* Yellow */
  1290. .ui.grid > .yellow.row,
  1291. .ui.grid > .yellow.column,
  1292. .ui.grid > .row > .yellow.column {
  1293. background-color: #FBBD08 !important;
  1294. color: #FFFFFF;
  1295. }
  1296. /* Olive */
  1297. .ui.grid > .olive.row,
  1298. .ui.grid > .olive.column,
  1299. .ui.grid > .row > .olive.column {
  1300. background-color: #B5CC18 !important;
  1301. color: #FFFFFF;
  1302. }
  1303. /* Green */
  1304. .ui.grid > .green.row,
  1305. .ui.grid > .green.column,
  1306. .ui.grid > .row > .green.column {
  1307. background-color: #21BA45 !important;
  1308. color: #FFFFFF;
  1309. }
  1310. /* Teal */
  1311. .ui.grid > .teal.row,
  1312. .ui.grid > .teal.column,
  1313. .ui.grid > .row > .teal.column {
  1314. background-color: #00B5AD !important;
  1315. color: #FFFFFF;
  1316. }
  1317. /* Blue */
  1318. .ui.grid > .blue.row,
  1319. .ui.grid > .blue.column,
  1320. .ui.grid > .row > .blue.column {
  1321. background-color: #2185D0 !important;
  1322. color: #FFFFFF;
  1323. }
  1324. /* Violet */
  1325. .ui.grid > .violet.row,
  1326. .ui.grid > .violet.column,
  1327. .ui.grid > .row > .violet.column {
  1328. background-color: #6435C9 !important;
  1329. color: #FFFFFF;
  1330. }
  1331. /* Purple */
  1332. .ui.grid > .purple.row,
  1333. .ui.grid > .purple.column,
  1334. .ui.grid > .row > .purple.column {
  1335. background-color: #A333C8 !important;
  1336. color: #FFFFFF;
  1337. }
  1338. /* Pink */
  1339. .ui.grid > .pink.row,
  1340. .ui.grid > .pink.column,
  1341. .ui.grid > .row > .pink.column {
  1342. background-color: #E03997 !important;
  1343. color: #FFFFFF;
  1344. }
  1345. /* Brown */
  1346. .ui.grid > .brown.row,
  1347. .ui.grid > .brown.column,
  1348. .ui.grid > .row > .brown.column {
  1349. background-color: #A5673F !important;
  1350. color: #FFFFFF;
  1351. }
  1352. /* Grey */
  1353. .ui.grid > .grey.row,
  1354. .ui.grid > .grey.column,
  1355. .ui.grid > .row > .grey.column {
  1356. background-color: #767676 !important;
  1357. color: #FFFFFF;
  1358. }
  1359. /* Black */
  1360. .ui.grid > .black.row,
  1361. .ui.grid > .black.column,
  1362. .ui.grid > .row > .black.column {
  1363. background-color: #1B1C1D !important;
  1364. color: #FFFFFF;
  1365. }
  1366. /*----------------------
  1367. Equal Width
  1368. -----------------------*/
  1369. .ui[class*="equal width"].grid > .column:not(.row),
  1370. .ui[class*="equal width"].grid > .row > .column,
  1371. .ui.grid > [class*="equal width"].row > .column {
  1372. display: inline-block;
  1373. -webkit-box-flex: 1;
  1374. -webkit-flex-grow: 1;
  1375. -ms-flex-positive: 1;
  1376. flex-grow: 1;
  1377. }
  1378. .ui[class*="equal width"].grid > .wide.column,
  1379. .ui[class*="equal width"].grid > .row > .wide.column,
  1380. .ui.grid > [class*="equal width"].row > .wide.column {
  1381. -webkit-box-flex: 0;
  1382. -webkit-flex-grow: 0;
  1383. -ms-flex-positive: 0;
  1384. flex-grow: 0;
  1385. }
  1386. /*----------------------
  1387. Reverse
  1388. -----------------------*/
  1389. /* Mobile */
  1390. @media only screen and (max-width: 767px) {
  1391. .ui[class*="mobile reversed"].grid,
  1392. .ui[class*="mobile reversed"].grid > .row,
  1393. .ui.grid > [class*="mobile reversed"].row {
  1394. -webkit-box-orient: horizontal;
  1395. -webkit-box-direction: reverse;
  1396. -webkit-flex-direction: row-reverse;
  1397. -ms-flex-direction: row-reverse;
  1398. flex-direction: row-reverse;
  1399. }
  1400. .ui[class*="mobile vertically reversed"].grid,
  1401. .ui.stackable[class*="mobile reversed"] {
  1402. -webkit-box-orient: vertical;
  1403. -webkit-box-direction: reverse;
  1404. -webkit-flex-direction: column-reverse;
  1405. -ms-flex-direction: column-reverse;
  1406. flex-direction: column-reverse;
  1407. }
  1408. /* Divided Reversed */
  1409. .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .column:first-child,
  1410. .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:first-child {
  1411. box-shadow: -1px 0px 0px 0px rgba(34, 36, 38, 0.15);
  1412. }
  1413. .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .column:last-child,
  1414. .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:last-child {
  1415. box-shadow: none;
  1416. }
  1417. /* Vertically Divided Reversed */
  1418. .ui.grid[class*="vertically divided"][class*="mobile vertically reversed"] > .row:first-child:before {
  1419. box-shadow: 0px -1px 0px 0px rgba(34, 36, 38, 0.15);
  1420. }
  1421. .ui.grid[class*="vertically divided"][class*="mobile vertically reversed"] > .row:last-child:before {
  1422. box-shadow: none;
  1423. }
  1424. /* Celled Reversed */
  1425. .ui[class*="mobile reversed"].celled.grid > .row > .column:first-child {
  1426. box-shadow: -1px 0px 0px 0px #D4D4D5;
  1427. }
  1428. .ui[class*="mobile reversed"].celled.grid > .row > .column:last-child {
  1429. box-shadow: none;
  1430. }
  1431. }
  1432. /* Tablet */
  1433. @media only screen and (min-width: 768px) and (max-width: 991px) {
  1434. .ui[class*="tablet reversed"].grid,
  1435. .ui[class*="tablet reversed"].grid > .row,
  1436. .ui.grid > [class*="tablet reversed"].row {
  1437. -webkit-box-orient: horizontal;
  1438. -webkit-box-direction: reverse;
  1439. -webkit-flex-direction: row-reverse;
  1440. -ms-flex-direction: row-reverse;
  1441. flex-direction: row-reverse;
  1442. }
  1443. .ui[class*="tablet vertically reversed"].grid {
  1444. -webkit-box-orient: vertical;
  1445. -webkit-box-direction: reverse;
  1446. -webkit-flex-direction: column-reverse;
  1447. -ms-flex-direction: column-reverse;
  1448. flex-direction: column-reverse;
  1449. }
  1450. /* Divided Reversed */
  1451. .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .column:first-child,
  1452. .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:first-child {
  1453. box-shadow: -1px 0px 0px 0px rgba(34, 36, 38, 0.15);
  1454. }
  1455. .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .column:last-child,
  1456. .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:last-child {
  1457. box-shadow: none;
  1458. }
  1459. /* Vertically Divided Reversed */
  1460. .ui.grid[class*="vertically divided"][class*="tablet vertically reversed"] > .row:first-child:before {
  1461. box-shadow: 0px -1px 0px 0px rgba(34, 36, 38, 0.15);
  1462. }
  1463. .ui.grid[class*="vertically divided"][class*="tablet vertically reversed"] > .row:last-child:before {
  1464. box-shadow: none;
  1465. }
  1466. /* Celled Reversed */
  1467. .ui[class*="tablet reversed"].celled.grid > .row > .column:first-child {
  1468. box-shadow: -1px 0px 0px 0px #D4D4D5;
  1469. }
  1470. .ui[class*="tablet reversed"].celled.grid > .row > .column:last-child {
  1471. box-shadow: none;
  1472. }
  1473. }
  1474. /* Computer */
  1475. @media only screen and (min-width: 992px) {
  1476. .ui[class*="computer reversed"].grid,
  1477. .ui[class*="computer reversed"].grid > .row,
  1478. .ui.grid > [class*="computer reversed"].row {
  1479. -webkit-box-orient: horizontal;
  1480. -webkit-box-direction: reverse;
  1481. -webkit-flex-direction: row-reverse;
  1482. -ms-flex-direction: row-reverse;
  1483. flex-direction: row-reverse;
  1484. }
  1485. .ui[class*="computer vertically reversed"].grid {
  1486. -webkit-box-orient: vertical;
  1487. -webkit-box-direction: reverse;
  1488. -webkit-flex-direction: column-reverse;
  1489. -ms-flex-direction: column-reverse;
  1490. flex-direction: column-reverse;
  1491. }
  1492. /* Divided Reversed */
  1493. .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .column:first-child,
  1494. .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:first-child {
  1495. box-shadow: -1px 0px 0px 0px rgba(34, 36, 38, 0.15);
  1496. }
  1497. .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .column:last-child,
  1498. .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:last-child {
  1499. box-shadow: none;
  1500. }
  1501. /* Vertically Divided Reversed */
  1502. .ui.grid[class*="vertically divided"][class*="computer vertically reversed"] > .row:first-child:before {
  1503. box-shadow: 0px -1px 0px 0px rgba(34, 36, 38, 0.15);
  1504. }
  1505. .ui.grid[class*="vertically divided"][class*="computer vertically reversed"] > .row:last-child:before {
  1506. box-shadow: none;
  1507. }
  1508. /* Celled Reversed */
  1509. .ui[class*="computer reversed"].celled.grid > .row > .column:first-child {
  1510. box-shadow: -1px 0px 0px 0px #D4D4D5;
  1511. }
  1512. .ui[class*="computer reversed"].celled.grid > .row > .column:last-child {
  1513. box-shadow: none;
  1514. }
  1515. }
  1516. /*-------------------
  1517. Doubling
  1518. --------------------*/
  1519. /* Tablet Only */
  1520. @media only screen and (min-width: 768px) and (max-width: 991px) {
  1521. .ui.doubling.grid {
  1522. width: auto;
  1523. }
  1524. .ui.grid > .doubling.row,
  1525. .ui.doubling.grid > .row {
  1526. margin: 0em !important;
  1527. padding: 0em !important;
  1528. }
  1529. .ui.grid > .doubling.row > .column,
  1530. .ui.doubling.grid > .row > .column {
  1531. display: inline-block !important;
  1532. padding-top: 1rem !important;
  1533. padding-bottom: 1rem !important;
  1534. box-shadow: none !important;
  1535. margin: 0em;
  1536. }
  1537. .ui[class*="two column"].doubling.grid > .row > .column,
  1538. .ui[class*="two column"].doubling.grid > .column:not(.row),
  1539. .ui.grid > [class*="two column"].doubling.row.row > .column {
  1540. width: 100% !important;
  1541. }
  1542. .ui[class*="three column"].doubling.grid > .row > .column,
  1543. .ui[class*="three column"].doubling.grid > .column:not(.row),
  1544. .ui.grid > [class*="three column"].doubling.row.row > .column {
  1545. width: 50% !important;
  1546. }
  1547. .ui[class*="four column"].doubling.grid > .row > .column,
  1548. .ui[class*="four column"].doubling.grid > .column:not(.row),
  1549. .ui.grid > [class*="four column"].doubling.row.row > .column {
  1550. width: 50% !important;
  1551. }
  1552. .ui[class*="five column"].doubling.grid > .row > .column,
  1553. .ui[class*="five column"].doubling.grid > .column:not(.row),
  1554. .ui.grid > [class*="five column"].doubling.row.row > .column {
  1555. width: 33.33333333% !important;
  1556. }
  1557. .ui[class*="six column"].doubling.grid > .row > .column,
  1558. .ui[class*="six column"].doubling.grid > .column:not(.row),
  1559. .ui.grid > [class*="six column"].doubling.row.row > .column {
  1560. width: 33.33333333% !important;
  1561. }
  1562. .ui[class*="seven column"].doubling.grid > .row > .column,
  1563. .ui[class*="seven column"].doubling.grid > .column:not(.row),
  1564. .ui.grid > [class*="seven column"].doubling.row.row > .column {
  1565. width: 33.33333333% !important;
  1566. }
  1567. .ui[class*="eight column"].doubling.grid > .row > .column,
  1568. .ui[class*="eight column"].doubling.grid > .column:not(.row),
  1569. .ui.grid > [class*="eight column"].doubling.row.row > .column {
  1570. width: 25% !important;
  1571. }
  1572. .ui[class*="nine column"].doubling.grid > .row > .column,
  1573. .ui[class*="nine column"].doubling.grid > .column:not(.row),
  1574. .ui.grid > [class*="nine column"].doubling.row.row > .column {
  1575. width: 25% !important;
  1576. }
  1577. .ui[class*="ten column"].doubling.grid > .row > .column,
  1578. .ui[class*="ten column"].doubling.grid > .column:not(.row),
  1579. .ui.grid > [class*="ten column"].doubling.row.row > .column {
  1580. width: 20% !important;
  1581. }
  1582. .ui[class*="eleven column"].doubling.grid > .row > .column,
  1583. .ui[class*="eleven column"].doubling.grid > .column:not(.row),
  1584. .ui.grid > [class*="eleven column"].doubling.row.row > .column {
  1585. width: 20% !important;
  1586. }
  1587. .ui[class*="twelve column"].doubling.grid > .row > .column,
  1588. .ui[class*="twelve column"].doubling.grid > .column:not(.row),
  1589. .ui.grid > [class*="twelve column"].doubling.row.row > .column {
  1590. width: 16.66666667% !important;
  1591. }
  1592. .ui[class*="thirteen column"].doubling.grid > .row > .column,
  1593. .ui[class*="thirteen column"].doubling.grid > .column:not(.row),
  1594. .ui.grid > [class*="thirteen column"].doubling.row.row > .column {
  1595. width: 16.66666667% !important;
  1596. }
  1597. .ui[class*="fourteen column"].doubling.grid > .row > .column,
  1598. .ui[class*="fourteen column"].doubling.grid > .column:not(.row),
  1599. .ui.grid > [class*="fourteen column"].doubling.row.row > .column {
  1600. width: 14.28571429% !important;
  1601. }
  1602. .ui[class*="fifteen column"].doubling.grid > .row > .column,
  1603. .ui[class*="fifteen column"].doubling.grid > .column:not(.row),
  1604. .ui.grid > [class*="fifteen column"].doubling.row.row > .column {
  1605. width: 14.28571429% !important;
  1606. }
  1607. .ui[class*="sixteen column"].doubling.grid > .row > .column,
  1608. .ui[class*="sixteen column"].doubling.grid > .column:not(.row),
  1609. .ui.grid > [class*="sixteen column"].doubling.row.row > .column {
  1610. width: 12.5% !important;
  1611. }
  1612. }
  1613. /* Mobily Only */
  1614. @media only screen and (max-width: 767px) {
  1615. .ui.grid > .doubling.row,
  1616. .ui.doubling.grid > .row {
  1617. margin: 0em !important;
  1618. padding: 0em !important;
  1619. }
  1620. .ui.grid > .doubling.row > .column,
  1621. .ui.doubling.grid > .row > .column {
  1622. padding-top: 1rem !important;
  1623. padding-bottom: 1rem !important;
  1624. margin: 0em !important;
  1625. box-shadow: none !important;
  1626. }
  1627. .ui[class*="two column"].doubling:not(.stackable).grid > .row > .column,
  1628. .ui[class*="two column"].doubling:not(.stackable).grid > .column:not(.row),
  1629. .ui.grid > [class*="two column"].doubling:not(.stackable).row.row > .column {
  1630. width: 100% !important;
  1631. }
  1632. .ui[class*="three column"].doubling:not(.stackable).grid > .row > .column,
  1633. .ui[class*="three column"].doubling:not(.stackable).grid > .column:not(.row),
  1634. .ui.grid > [class*="three column"].doubling:not(.stackable).row.row > .column {
  1635. width: 50% !important;
  1636. }
  1637. .ui[class*="four column"].doubling:not(.stackable).grid > .row > .column,
  1638. .ui[class*="four column"].doubling:not(.stackable).grid > .column:not(.row),
  1639. .ui.grid > [class*="four column"].doubling:not(.stackable).row.row > .column {
  1640. width: 50% !important;
  1641. }
  1642. .ui[class*="five column"].doubling:not(.stackable).grid > .row > .column,
  1643. .ui[class*="five column"].doubling:not(.stackable).grid > .column:not(.row),
  1644. .ui.grid > [class*="five column"].doubling:not(.stackable).row.row > .column {
  1645. width: 50% !important;
  1646. }
  1647. .ui[class*="six column"].doubling:not(.stackable).grid > .row > .column,
  1648. .ui[class*="six column"].doubling:not(.stackable).grid > .column:not(.row),
  1649. .ui.grid > [class*="six column"].doubling:not(.stackable).row.row > .column {
  1650. width: 50% !important;
  1651. }
  1652. .ui[class*="seven column"].doubling:not(.stackable).grid > .row > .column,
  1653. .ui[class*="seven column"].doubling:not(.stackable).grid > .column:not(.row),
  1654. .ui.grid > [class*="seven column"].doubling:not(.stackable).row.row > .column {
  1655. width: 50% !important;
  1656. }
  1657. .ui[class*="eight column"].doubling:not(.stackable).grid > .row > .column,
  1658. .ui[class*="eight column"].doubling:not(.stackable).grid > .column:not(.row),
  1659. .ui.grid > [class*="eight column"].doubling:not(.stackable).row.row > .column {
  1660. width: 50% !important;
  1661. }
  1662. .ui[class*="nine column"].doubling:not(.stackable).grid > .row > .column,
  1663. .ui[class*="nine column"].doubling:not(.stackable).grid > .column:not(.row),
  1664. .ui.grid > [class*="nine column"].doubling:not(.stackable).row.row > .column {
  1665. width: 33.33333333% !important;
  1666. }
  1667. .ui[class*="ten column"].doubling:not(.stackable).grid > .row > .column,
  1668. .ui[class*="ten column"].doubling:not(.stackable).grid > .column:not(.row),
  1669. .ui.grid > [class*="ten column"].doubling:not(.stackable).row.row > .column {
  1670. width: 33.33333333% !important;
  1671. }
  1672. .ui[class*="eleven column"].doubling:not(.stackable).grid > .row > .column,
  1673. .ui[class*="eleven column"].doubling:not(.stackable).grid > .column:not(.row),
  1674. .ui.grid > [class*="eleven column"].doubling:not(.stackable).row.row > .column {
  1675. width: 33.33333333% !important;
  1676. }
  1677. .ui[class*="twelve column"].doubling:not(.stackable).grid > .row > .column,
  1678. .ui[class*="twelve column"].doubling:not(.stackable).grid > .column:not(.row),
  1679. .ui.grid > [class*="twelve column"].doubling:not(.stackable).row.row > .column {
  1680. width: 33.33333333% !important;
  1681. }
  1682. .ui[class*="thirteen column"].doubling:not(.stackable).grid > .row > .column,
  1683. .ui[class*="thirteen column"].doubling:not(.stackable).grid > .column:not(.row),
  1684. .ui.grid > [class*="thirteen column"].doubling:not(.stackable).row.row > .column {
  1685. width: 33.33333333% !important;
  1686. }
  1687. .ui[class*="fourteen column"].doubling:not(.stackable).grid > .row > .column,
  1688. .ui[class*="fourteen column"].doubling:not(.stackable).grid > .column:not(.row),
  1689. .ui.grid > [class*="fourteen column"].doubling:not(.stackable).row.row > .column {
  1690. width: 25% !important;
  1691. }
  1692. .ui[class*="fifteen column"].doubling:not(.stackable).grid > .row > .column,
  1693. .ui[class*="fifteen column"].doubling:not(.stackable).grid > .column:not(.row),
  1694. .ui.grid > [class*="fifteen column"].doubling:not(.stackable).row.row > .column {
  1695. width: 25% !important;
  1696. }
  1697. .ui[class*="sixteen column"].doubling:not(.stackable).grid > .row > .column,
  1698. .ui[class*="sixteen column"].doubling:not(.stackable).grid > .column:not(.row),
  1699. .ui.grid > [class*="sixteen column"].doubling:not(.stackable).row.row > .column {
  1700. width: 25% !important;
  1701. }
  1702. }
  1703. /*-------------------
  1704. Stackable
  1705. --------------------*/
  1706. @media only screen and (max-width: 767px) {
  1707. .ui.stackable.grid {
  1708. width: auto;
  1709. margin-left: 0em !important;
  1710. margin-right: 0em !important;
  1711. }
  1712. .ui.stackable.grid > .row > .wide.column,
  1713. .ui.stackable.grid > .wide.column,
  1714. .ui.stackable.grid > .column.grid > .column,
  1715. .ui.stackable.grid > .column.row > .column,
  1716. .ui.stackable.grid > .row > .column,
  1717. .ui.stackable.grid > .column:not(.row),
  1718. .ui.grid > .stackable.stackable.row > .column {
  1719. width: 100% !important;
  1720. margin: 0em 0em !important;
  1721. box-shadow: none !important;
  1722. padding: 1rem 1rem !important;
  1723. }
  1724. .ui.stackable.grid:not(.vertically) > .row {
  1725. margin: 0em;
  1726. padding: 0em;
  1727. }
  1728. /* Coupling */
  1729. .ui.container > .ui.stackable.grid > .column,
  1730. .ui.container > .ui.stackable.grid > .row > .column {
  1731. padding-left: 0em !important;
  1732. padding-right: 0em !important;
  1733. }
  1734. /* Don't pad inside segment or nested grid */
  1735. .ui.grid .ui.stackable.grid,
  1736. .ui.segment:not(.vertical) .ui.stackable.page.grid {
  1737. margin-left: -1rem !important;
  1738. margin-right: -1rem !important;
  1739. }
  1740. /* Divided Stackable */
  1741. .ui.stackable.divided.grid > .row:first-child > .column:first-child,
  1742. .ui.stackable.celled.grid > .row:first-child > .column:first-child,
  1743. .ui.stackable.divided.grid > .column:not(.row):first-child,
  1744. .ui.stackable.celled.grid > .column:not(.row):first-child {
  1745. border-top: none !important;
  1746. }
  1747. .ui.inverted.stackable.celled.grid > .column:not(.row),
  1748. .ui.inverted.stackable.divided.grid > .column:not(.row),
  1749. .ui.inverted.stackable.celled.grid > .row > .column,
  1750. .ui.inverted.stackable.divided.grid > .row > .column {
  1751. border-top: 1px solid rgba(255, 255, 255, 0.1);
  1752. }
  1753. .ui.stackable.celled.grid > .column:not(.row),
  1754. .ui.stackable.divided:not(.vertically).grid > .column:not(.row),
  1755. .ui.stackable.celled.grid > .row > .column,
  1756. .ui.stackable.divided:not(.vertically).grid > .row > .column {
  1757. border-top: 1px solid rgba(34, 36, 38, 0.15);
  1758. box-shadow: none !important;
  1759. padding-top: 2rem !important;
  1760. padding-bottom: 2rem !important;
  1761. }
  1762. .ui.stackable.celled.grid > .row {
  1763. box-shadow: none !important;
  1764. }
  1765. .ui.stackable.divided:not(.vertically).grid > .column:not(.row),
  1766. .ui.stackable.divided:not(.vertically).grid > .row > .column {
  1767. padding-left: 0em !important;
  1768. padding-right: 0em !important;
  1769. }
  1770. }
  1771. /*----------------------
  1772. Only (Device)
  1773. -----------------------*/
  1774. /* These include arbitrary class repetitions for forced specificity */
  1775. /* Mobile Only Hide */
  1776. @media only screen and (max-width: 767px) {
  1777. .ui[class*="tablet only"].grid.grid.grid:not(.mobile),
  1778. .ui.grid.grid.grid > [class*="tablet only"].row:not(.mobile),
  1779. .ui.grid.grid.grid > [class*="tablet only"].column:not(.mobile),
  1780. .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.mobile) {
  1781. display: none !important;
  1782. }
  1783. .ui[class*="computer only"].grid.grid.grid:not(.mobile),
  1784. .ui.grid.grid.grid > [class*="computer only"].row:not(.mobile),
  1785. .ui.grid.grid.grid > [class*="computer only"].column:not(.mobile),
  1786. .ui.grid.grid.grid > .row > [class*="computer only"].column:not(.mobile) {
  1787. display: none !important;
  1788. }
  1789. .ui[class*="large screen only"].grid.grid.grid:not(.mobile),
  1790. .ui.grid.grid.grid > [class*="large screen only"].row:not(.mobile),
  1791. .ui.grid.grid.grid > [class*="large screen only"].column:not(.mobile),
  1792. .ui.grid.grid.grid > .row > [class*="large screen only"].column:not(.mobile) {
  1793. display: none !important;
  1794. }
  1795. .ui[class*="widescreen only"].grid.grid.grid:not(.mobile),
  1796. .ui.grid.grid.grid > [class*="widescreen only"].row:not(.mobile),
  1797. .ui.grid.grid.grid > [class*="widescreen only"].column:not(.mobile),
  1798. .ui.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile) {
  1799. display: none !important;
  1800. }
  1801. }
  1802. /* Tablet Only Hide */
  1803. @media only screen and (min-width: 768px) and (max-width: 991px) {
  1804. .ui[class*="mobile only"].grid.grid.grid:not(.tablet),
  1805. .ui.grid.grid.grid > [class*="mobile only"].row:not(.tablet),
  1806. .ui.grid.grid.grid > [class*="mobile only"].column:not(.tablet),
  1807. .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.tablet) {
  1808. display: none !important;
  1809. }
  1810. .ui[class*="computer only"].grid.grid.grid:not(.tablet),
  1811. .ui.grid.grid.grid > [class*="computer only"].row:not(.tablet),
  1812. .ui.grid.grid.grid > [class*="computer only"].column:not(.tablet),
  1813. .ui.grid.grid.grid > .row > [class*="computer only"].column:not(.tablet) {
  1814. display: none !important;
  1815. }
  1816. .ui[class*="large screen only"].grid.grid.grid:not(.mobile),
  1817. .ui.grid.grid.grid > [class*="large screen only"].row:not(.mobile),
  1818. .ui.grid.grid.grid > [class*="large screen only"].column:not(.mobile),
  1819. .ui.grid.grid.grid > .row > [class*="large screen only"].column:not(.mobile) {
  1820. display: none !important;
  1821. }
  1822. .ui[class*="widescreen only"].grid.grid.grid:not(.mobile),
  1823. .ui.grid.grid.grid > [class*="widescreen only"].row:not(.mobile),
  1824. .ui.grid.grid.grid > [class*="widescreen only"].column:not(.mobile),
  1825. .ui.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile) {
  1826. display: none !important;
  1827. }
  1828. }
  1829. /* Computer Only Hide */
  1830. @media only screen and (min-width: 992px) and (max-width: 1199px) {
  1831. .ui[class*="mobile only"].grid.grid.grid:not(.computer),
  1832. .ui.grid.grid.grid > [class*="mobile only"].row:not(.computer),
  1833. .ui.grid.grid.grid > [class*="mobile only"].column:not(.computer),
  1834. .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.computer) {
  1835. display: none !important;
  1836. }
  1837. .ui[class*="tablet only"].grid.grid.grid:not(.computer),
  1838. .ui.grid.grid.grid > [class*="tablet only"].row:not(.computer),
  1839. .ui.grid.grid.grid > [class*="tablet only"].column:not(.computer),
  1840. .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.computer) {
  1841. display: none !important;
  1842. }
  1843. .ui[class*="large screen only"].grid.grid.grid:not(.mobile),
  1844. .ui.grid.grid.grid > [class*="large screen only"].row:not(.mobile),
  1845. .ui.grid.grid.grid > [class*="large screen only"].column:not(.mobile),
  1846. .ui.grid.grid.grid > .row > [class*="large screen only"].column:not(.mobile) {
  1847. display: none !important;
  1848. }
  1849. .ui[class*="widescreen only"].grid.grid.grid:not(.mobile),
  1850. .ui.grid.grid.grid > [class*="widescreen only"].row:not(.mobile),
  1851. .ui.grid.grid.grid > [class*="widescreen only"].column:not(.mobile),
  1852. .ui.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile) {
  1853. display: none !important;
  1854. }
  1855. }
  1856. /* Large Screen Only Hide */
  1857. @media only screen and (min-width: 1200px) and (max-width: 1919px) {
  1858. .ui[class*="mobile only"].grid.grid.grid:not(.computer),
  1859. .ui.grid.grid.grid > [class*="mobile only"].row:not(.computer),
  1860. .ui.grid.grid.grid > [class*="mobile only"].column:not(.computer),
  1861. .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.computer) {
  1862. display: none !important;
  1863. }
  1864. .ui[class*="tablet only"].grid.grid.grid:not(.computer),
  1865. .ui.grid.grid.grid > [class*="tablet only"].row:not(.computer),
  1866. .ui.grid.grid.grid > [class*="tablet only"].column:not(.computer),
  1867. .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.computer) {
  1868. display: none !important;
  1869. }
  1870. .ui[class*="widescreen only"].grid.grid.grid:not(.mobile),
  1871. .ui.grid.grid.grid > [class*="widescreen only"].row:not(.mobile),
  1872. .ui.grid.grid.grid > [class*="widescreen only"].column:not(.mobile),
  1873. .ui.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile) {
  1874. display: none !important;
  1875. }
  1876. }
  1877. /* Widescreen Only Hide */
  1878. @media only screen and (min-width: 1920px) {
  1879. .ui[class*="mobile only"].grid.grid.grid:not(.computer),
  1880. .ui.grid.grid.grid > [class*="mobile only"].row:not(.computer),
  1881. .ui.grid.grid.grid > [class*="mobile only"].column:not(.computer),
  1882. .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.computer) {
  1883. display: none !important;
  1884. }
  1885. .ui[class*="tablet only"].grid.grid.grid:not(.computer),
  1886. .ui.grid.grid.grid > [class*="tablet only"].row:not(.computer),
  1887. .ui.grid.grid.grid > [class*="tablet only"].column:not(.computer),
  1888. .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.computer) {
  1889. display: none !important;
  1890. }
  1891. }
  1892. /*******************************
  1893. Theme Overrides
  1894. *******************************/
  1895. /*******************************
  1896. Site Overrides
  1897. *******************************/