You are here

Home » API reference » Blazy 8.2

blazy.admin.css in Blazy 8.2

Same filename and directory in other branches
  1. 8 css/blazy.admin.css

File

css/blazy.admin.css
View source 
  1. /**

  2.  * @file

  3.  */

  4. 

  5. /* Fix for adminimal theme */

  6. body.path-admin .form--slick,

  7. body.path-admin .form--slick *,

  8. .form--slick *::before,

  9. .form--slick *::after {

  10.   box-sizing: border-box;

  11.   font-family: Arial, sans-serif;

  12. }

  13. 

  14. /**

  15.  * Form

  16.  */

  17. .form--slick {

  18.   font-size: 16px;

  19.   font-size: 1rem;

  20.   max-width: 100%;

  21.   padding: 0;

  22.   position: relative;

  23. }

  24. 

  25. .form--slick::after,

  26. .form--slick .fieldset-wrapper::after,

  27. .form--slick .form-checkboxes::after,

  28. .form--slick .claro-details__content::after {

  29.   content: "";

  30.   display: table;

  31.   clear: both;

  32. }

  33. 

  34. .form--slick .form-actions {

  35.   clear: both;

  36. }

  37. 

  38. .form--slick ~ .form-actions {

  39.   float: left;

  40.   width: 100%;

  41. }

  42. 

  43. .form--half,

  44. .form--slick .vertical-tabs {

  45.   border: 1px solid #dbe1e9;

  46.   background: #f9f9f9;

  47.   clear: both;

  48.   overflow: visible;

  49.   position: relative;

  50. }

  51. 

  52. .form--half,

  53. .form--slick .vertical-tabs,

  54. .form--slick .details--responsive .details--settings {

  55.   box-shadow: 0 0 0 4px #f9f9f9;

  56.   clear: both;

  57.   float: left;

  58.   margin: 30px auto;

  59.   width: 100%;

  60. }

  61. 

  62. .form--slick .vertical-tabs {

  63.   padding: 8px;

  64. }

  65. 

  66. .form--slick #edit-delete { /* csslint allow: ids */

  67.   display: block;

  68. }

  69. 

  70. .form--vanilla {

  71.   padding-top: 82px;

  72. }

  73. 

  74. /**

  75.  * Buttons

  76.  */

  77. .form--slick .button,

  78. .form--slick .button:link,

  79. .form--slick .button:visited,

  80. .form--slick .form-submit {

  81.   background: #dadada;

  82.   border: 1px solid #dadada;

  83.   border-radius: 0;

  84.   box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 1px 0 rgba(0, 0, 0, 0.08);

  85.   color: #111;

  86.   border-style: solid;

  87.   border-width: 1px;

  88.   cursor: pointer;

  89.   display: inline-block;

  90.   font-size: 13px;

  91.   min-height: 28px;

  92.   line-height: 26px;

  93.   margin: 0;

  94.   padding: 0 10px 1px;

  95.   text-decoration: none;

  96.   vertical-align: top;

  97.   white-space: nowrap;

  98. }

  99. 

  100. .form--slick .form-submit:focus {

  101.   box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);

  102. }

  103. 

  104. .form--slick .button:hover,

  105. .form--slick .button:active,

  106. .form--slick .form-submit:hover,

  107. .form--slick .form-submit:active {

  108.   background: #ff6d2c;

  109.   border-color: #ff6d2c;

  110.   box-shadow: 0 2px 5px -3px rgba(0, 0, 0, 0.5) inset;

  111.   color: #fff;

  112. }

  113. 

  114. .form--slick .form-disabled button,

  115. .form--slick .form-disabled label,

  116. .form--slick .form-disabled input,

  117. .form--slick .form-disabled select,

  118. .form--slick .form-disabled textarea,

  119. .form--slick .form-disabled .field-suffix {

  120.   cursor: not-allowed;

  121.   opacity: 0.6;

  122. }

  123. 

  124. /**

  125.  * Clearfix

  126.  */

  127. .form-item::before,

  128. .form-item::after,

  129. .fieldgroup.form-composite::before,

  130. .fieldgroup.form-composite::after,

  131. .details-wrapper::before,

  132. .details-wrapper::after,

  133. .clearfix::before,

  134. .clearfix::after {

  135.   content: " ";

  136.   display: table;

  137. }

  138. 

  139. .clearfix::after,

  140. .details-wrapper::after,

  141. .form-item::after,

  142. .fieldgroup.form-composite::after {

  143.   clear: both;

  144. }

  145. 

  146. /**

  147.  * Details.

  148.  */

  149. .form--slick details,

  150. .form--slick .vertical-tabs .vertical-tabs__pane {

  151.   margin: 0;

  152.   padding: 30px 0;

  153.   border-color: #808080;

  154. }

  155. 

  156. .form--slick details {

  157.   padding: 30px 15px;

  158. }

  159. 

  160. .form--slick details details {

  161.   background: none;

  162.   padding: 60px 0 1em;

  163. }

  164. 

  165. .form--slick .vertical-tabs details {

  166.   padding-left: 0;

  167.   padding-right: 0;

  168. }

  169. 

  170. .form--slick .details-description > small {

  171.   line-height: 1.2;

  172. }

  173. 

  174. .form--slick .details--responsive--ajax,

  175. .form--slick .details--responsive--ajax > .details-wrapper {

  176.   padding: 0;

  177. }

  178. 

  179. .form--slick details .details-description {

  180.   padding: 5px 15px;

  181. }

  182. 

  183. .form--slick .form-wrapper > details {

  184.   margin: 0;

  185.   padding: 0;

  186.   border: 0;

  187. }

  188. 

  189. .form--slick > .details-wrapper {

  190.   max-width: 100%;

  191.   padding: 40px 0 0;

  192. }

  193. 

  194. .form--slick details summary {

  195.   font-size: 18px;

  196.   font-size: 1.125rem;

  197.   padding: 0 0.8em;

  198. }

  199. 

  200. .form--slick .claro-details summary {

  201.   padding-left: 2em;

  202. }

  203. 

  204. .form--slick details .details-title {

  205.   background: none;

  206.   color: #111;

  207.   display: block;

  208.   font-size: 18px;

  209.   font-size: 1.125rem;

  210.   height: auto;

  211.   padding: 0;

  212.   text-transform: uppercase;

  213. }

  214. 

  215. .form--slick details .details-title:hover {

  216.   color: #ff6d2c;

  217.   text-decoration: none;

  218. }

  219. 

  220. .form--slick .details--responsive--ajax > summary,

  221. .form--slick .details--responsive--ajax .details--settings > summary {

  222.   position: absolute !important; /* csslint allow: known-properties, important */

  223.   clip: rect(1px, 1px, 1px, 1px);

  224.   overflow: hidden;

  225.   height: 1px;

  226.   width: 1px;

  227.   word-wrap: normal;

  228. }

  229. 

  230. .form--slick .details--responsive--ajax .details--responsive {

  231.   padding-left: 0;

  232.   padding-right: 0;

  233.   padding-top: 60px;

  234. }

  235. 

  236. .form--slick .details--responsive--ajax .details--responsive > .details-wrapper {

  237.   padding-left: 15px;

  238.   padding-right: 15px;

  239. }

  240. 

  241. .form--slick .details--responsive--ajax .details--responsive .details--settings {

  242.   border: 1px solid #dadada;

  243.   padding: 0;

  244. }

  245. 

  246. .form--slick .details--responsive--ajax .details--responsive .details--settings .details-wrapper {

  247.   margin-top: 0;

  248.   padding: 0;

  249. }

  250. 

  251. html.js .form--slick .collapsible,

  252. html.js .form--slick .collapsed {

  253.   clear: both;

  254.   border: 0;

  255. }

  256. 

  257. html.js .form--slick .collapsible summary,

  258. html.js .form--slick .collapsed summary {

  259.   background: none;

  260.   border: 0;

  261.   display: block;

  262.   padding: 0;

  263.   position: relative;

  264.   width: 100%;

  265. }

  266. 

  267. html.js .form--slick .collapsible .details-legend,

  268. html.js .form--slick .collapsed .details-legend {

  269.   background: none;

  270.   margin: 0;

  271.   padding: 0;

  272.   position: absolute;

  273.   width: 100%;

  274. }

  275. 

  276. html.js .form--slick .collapsible summary .icon {

  277.   display: none;

  278. }

  279. 

  280. html.js .form--slick .collapsible .details-legend::after {

  281.   content: "";

  282. }

  283. 

  284. html.js .form--slick .collapsible .details-legend .summary {

  285.   position: absolute !important; /* csslint allow: known-properties, important */

  286.   clip: rect(1px, 1px, 1px, 1px);

  287.   overflow: hidden;

  288.   height: 1px;

  289.   width: 1px;

  290.   word-wrap: normal;

  291.   margin: 0;

  292. }

  293. 

  294. html.js .form--slick .collapsible .details-legend .details-legend-prefix {

  295.   background: #37465b;

  296.   display: inline-block;

  297.   float: none;

  298.   height: 36px;

  299.   left: 0;

  300.   line-height: 42px;

  301.   margin-right: 10px;

  302.   position: relative;

  303.   top: 0;

  304.   vertical-align: middle;

  305.   width: 36px;

  306. }

  307. 

  308. html.js .form--slick .collapsible .details-legend .details-legend-prefix {

  309.   direction: ltr;

  310.   text-indent: -9999px; /* LTR */

  311. }

  312. 

  313. html.js .form--slick .collapsible .details-legend .details-legend-prefix::before,

  314. html.js .form--slick .collapsible .details-legend .details-legend-prefix::after {

  315.   display: inline-block;

  316.   width: 1.25rem;

  317.   height: 0.17857rem;

  318.   background: #fff;

  319.   border-radius: 0.08929rem;

  320.   position: absolute;

  321.   left: 8px;

  322.   content: '';

  323.   text-indent: 0;

  324.   transform-origin: 50% 50% 50%;

  325.   transition: top 0.3s 0.6s ease, transform 0.3s ease;

  326. }

  327. 

  328. html.js .form--slick .collapsible .details-legend .details-legend-prefix::before {

  329.   transform: rotate3d(0, 0, 1, 45deg);

  330.   top: 18px;

  331. }

  332. 

  333. html.js .form--slick .collapsible .details-legend .details-legend-prefix::after {

  334.   transform: rotate3d(0, 0, 1, -45deg);

  335.   top: 18px;

  336. }

  337. 

  338. html.js .form--slick .collapsed {

  339.   height: 40px;

  340.   margin: 20px 0;

  341.   padding: 0;

  342. }

  343. 

  344. html.js .form--slick .collapsed .details-legend .details-legend-prefix {

  345.   background: #bbc6d6;

  346. }

  347. 

  348. html.js .form--slick .collapsed .details-legend .details-legend-prefix::before,

  349. html.js .form--slick .collapsed .details-legend .details-legend-prefix::after {

  350.   transition: top 0.3s ease, transform 0.3s 0.5s ease;

  351.   top: 16px;

  352.   width: 18px;

  353. }

  354. 

  355. html.js .form--slick .collapsed .details-legend .details-legend-prefix::before {

  356.   transform: rotate3d(0, 0, 1, 90deg);

  357. }

  358. 

  359. html.js .form--slick .collapsed .details-legend .details-legend-prefix::after {

  360.   transform: rotate3d(0, 0, 1, 180deg);

  361. }

  362. 

  363. /**

  364.  * Fieldset.

  365.  */

  366. .form--slick > div[id^="field-"] {

  367.   clear: both;

  368.   width: 100%;

  369. }

  370. 

  371. /** Third party settings. */

  372. .form--slick ~ .form-item {

  373.   clear: both;

  374. }

  375. 

  376. .form--slick > div[id^="field-"] fieldset {

  377.   box-sizing: border-box; /* dups due to csslint ignoring inheritance */

  378.   border-left: 0;

  379.   border-right: 0;

  380.   float: none;

  381.   padding: 20px 0 0;

  382.   width: 100%;

  383. }

  384. 

  385. .form--slick > div[id^="field-"] fieldset legend {

  386.   padding-left: 20px;

  387.   z-index: 3;

  388. }

  389. 

  390. .form--slick > div[id^="field-"] fieldset .form-item {

  391.   border: 0;

  392. }

  393. 

  394. /**

  395.  * Tooltip

  396.  * !important declaration is to override Seven.

  397.  */

  398. .has-tooltip .form-item,

  399. .has-tooltip .form-composite > .fieldset-wrapper {

  400.   position: relative;

  401. }

  402. 

  403. .has-tooltip .form-item > .description,

  404. .has-tooltip .form-composite > .fieldset-wrapper > .description {

  405.   background: #000;

  406.   background: rgba(0, 0, 0, 0.9);

  407.   border-radius: 2px;

  408.   bottom: 120%;

  409.   box-shadow: 0 2px 10px -2px #000;

  410.   color: #dadada !important; /* csslint allow: known-properties, important */

  411.   display: block;

  412.   font-size: 12px;

  413.   font-size: 0.75rem;

  414.   line-height: 1.2;

  415.   min-height: 40px;

  416.   max-width: 320px;

  417.   min-width: 210px;

  418.   position: absolute !important; /* csslint allow: known-properties, important */

  419.   padding: 12px !important; /* csslint allow: known-properties, important */

  420.   opacity: 0;

  421.   overflow: hidden;

  422.   right: 0;

  423.   visibility: hidden;

  424.   transition: all 0.4s ease-in 0s;

  425.   text-align: left;

  426.   white-space: normal;

  427.   z-index: 99;

  428. }

  429. 

  430. .has-tooltip .form-item--tooltip-wide > .description {

  431.   min-width: 320px;

  432. }

  433. 

  434. .has-tooltip .form-item > .description ul {

  435.   margin: 1em 0;

  436.   padding-left: 1em;

  437. }

  438. 

  439. .has-tooltip .form-item > .description a,

  440. .has-tooltip .form-composite > .fieldset-wrapper > .description a {

  441.   color: #fff;

  442.   font-weight: 600;

  443. }

  444. 

  445. .has-tooltip .form-item > .description:after,

  446. .has-tooltip .form-composite > .fieldset-wrapper > .description:after {

  447.   border: 10px solid transparent;

  448.   border-right: 10px solid #000;

  449.   border-top: 0;

  450.   bottom: -10px;

  451.   content: "";

  452.   display: block;

  453.   height: 0;

  454.   opacity: .6;

  455.   position: absolute;

  456.   right: 20px;

  457.   width: 0;

  458.   z-index: 99;

  459. }

  460. 

  461. .has-tooltip .form-item.form-composite > .description,

  462. .has-tooltip .form-item.form-type-textarea > .description,

  463. .has-tooltip .form-composite > .fieldset-wrapper.form-composite > .description,

  464. .has-tooltip .form-composite > .fieldset-wrapper.form-type-textarea > .description {

  465.   margin-left: -30% !important; /* csslint allow: known-properties, important */

  466.   max-width: 60% !important; /* csslint allow: known-properties, important */

  467.   min-width: 60% !important; /* csslint allow: known-properties, important */

  468.   width: 60% !important; /* csslint allow: known-properties, important */

  469. }

  470. 

  471. .has-tooltip .form-item.is-selected > .description,

  472. .has-tooltip .form-item.is-hovered > .description,

  473. .has-tooltip .form-item.is-selected > .fieldset-wrapper > .description,

  474. .has-tooltip .form-item.is-hovered > .fieldset-wrapper > .description,

  475. .has-tooltip .form-composite > .fieldset-wrapper.is-selected > .description,

  476. .has-tooltip .form-composite > .fieldset-wrapper.is-hovered > .description,

  477. .has-tooltip .form-composite > .fieldset-wrapper.is-selected > .fieldset-wrapper > .description,

  478. .has-tooltip .form-composite > .fieldset-wrapper.is-hovered > .fieldset-wrapper > .description {

  479.   bottom: 100%;

  480.   display: block;

  481.   opacity: 1 !important; /* csslint allow: known-properties, important */

  482.   visibility: visible;

  483.   overflow: visible !important; /* csslint allow: known-properties, important */

  484. }

  485. 

  486. .has-tooltip .form-item.is-selected > .b-hint,

  487. .has-tooltip .form-item.is-hovered > .b-hint,

  488. .has-tooltip .form-item.is-selected > .fieldset-wrapper > .b-hint,

  489. .has-tooltip .form-item.is-hovered > .fieldset-wrapper > .b-hint,

  490. .has-tooltip .form-composite > .fieldset-wrapper.is-selected > .b-hint,

  491. .has-tooltip .form-composite > .fieldset-wrapper.is-hovered > .b-hint,

  492. .has-tooltip .form-composite > .fieldset-wrapper.is-selected > .fieldset-wrapper > .b-hint,

  493. .has-tooltip .form-composite > .fieldset-wrapper.is-hovered > .fieldset-wrapper > .b-hint {

  494.   display: block;

  495. }

  496. 

  497. .has-tooltip .form-item.is-selected > .description,

  498. .has-tooltip .form-item.is-selected > .fieldset-wrapper > .description,

  499. .has-tooltip .form-composite > .fieldset-wrapper.is-selected > .description,

  500. .has-tooltip .form-composite > .fieldset-wrapper.is-selected > .fieldset-wrapper > .description {

  501.   padding-left: 20px !important; /* csslint allow: known-properties, important */

  502. }

  503. 

  504. .has-tooltip .form-item.is-selected > .description:before,

  505. .has-tooltip .form-item.is-selected > .fieldset-wrapper > .description:before,

  506. .has-tooltip .form-composite > .fieldset-wrapper.is-selected > .description:before,

  507. .has-tooltip .form-composite > .fieldset-wrapper.is-selected > .fieldset-wrapper > .description:before {

  508.   color: #dadada;

  509.   content: "x";

  510.   display: block;

  511.   font-family: sans-serif;

  512.   height: 20px;

  513.   left: 5px;

  514.   line-height: 18px;

  515.   margin-top: -10px;

  516.   position: absolute;

  517.   top: 50%;

  518.   width: 20px;

  519.   z-index: 0;

  520. }

  521. 

  522. .has-tooltip .form-item--tooltip-bottom > .description {

  523.   bottom: auto !important; /* csslint allow: known-properties, important */

  524.   top: 100%;

  525. }

  526. 

  527. .has-tooltip .form-item--tooltip-bottom > .description::after {

  528.   border: 10px solid transparent;

  529.   border-right: 10px solid #000;

  530.   border-top: 10px solid transparent;

  531.   border-bottom: 10px solid #000;

  532.   bottom: auto;

  533.   top: -20px;

  534. }

  535. 

  536. .no-js .has-tooltip .form-item:hover > .fieldset-wrapper > .description,

  537. .no-js .has-tooltip .form-item:hover > .description {

  538.   bottom: 100%;

  539.   display: block;

  540.   opacity: 1 !important; /* csslint allow: known-properties, important */

  541.   visibility: visible;

  542.   overflow: visible !important; /* csslint allow: known-properties, important */

  543. }

  544. 

  545. .form-item .b-hint {

  546.   background: #828282;

  547.   border-radius: 50%;

  548.   color: #fff;

  549.   content: '?';

  550.   cursor: default;

  551.   display: none;

  552.   font-family: sans-serif;

  553.   font-size: 12px;

  554.   font-weight: 600;

  555.   line-height: 16px;

  556.   margin: 0;

  557.   width: 16px;

  558.   height: 16px;

  559.   position: absolute;

  560.   right: 5px;

  561.   text-align: center;

  562.   top: 5px;

  563.   z-index: 8;

  564. }

  565. 

  566. .form__header .form-item .b-hint {

  567.   top: 16px;

  568.   right: -5px;

  569. }

  570. 

  571. .form-item:hover > .b-hint {

  572.   display: block;

  573. }

  574. 

  575. /**

  576.  * Form items

  577.  */

  578. .form--slick .form-item {

  579.   box-sizing: border-box; /* dups due to csslint ignoring inheritance */

  580.   background: none;

  581.   border-bottom: 1px solid #dadada;

  582.   border-top: 1px solid white;

  583.   bottom: -1px;

  584.   float: left;

  585.   font-size: 13px;

  586.   font-size: 0.8125rem;

  587.   line-height: 32px;

  588.   margin: 0;

  589.   min-height: 72px;

  590.   padding: 20px 12px 12px;

  591.   position: relative;

  592.   width: 100%;

  593. }

  594. 

  595. .form--slick .form-checkboxes .form-item,

  596. .form--slick .form-radios .form-item {

  597.   margin: 0;

  598. }

  599. 

  600. .form--slick .form-radios {

  601.   margin-bottom: 10px;

  602. }

  603. 

  604. .form--slick .form-type-vertical-tabs {

  605.   width: 100%;

  606. }

  607. 

  608. .form--slick table .form-item {

  609.   background: none;

  610.   border: 0;

  611.   min-height: 32px;

  612.   padding: 5px;

  613. }

  614. 

  615. .form--slick .form-item input,

  616. .form--slick .form-item select {

  617.   float: left;

  618.   max-width: 150px;

  619.   min-width: 40px;

  620. }

  621. 

  622. .form--slick .form-type--boolean .form-boolean {

  623.   min-width: 18px;

  624. }

  625. 

  626. .form--slick .form-item .form-text,

  627. .form--slick .form-item .form-select,

  628. .form--slick .form-item .form-textarea {

  629.   background: #fff;

  630.   border: 1px solid #dadada;

  631.   border-radius: 0;

  632.   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07) inset;

  633.   line-height: 22px;

  634.   margin: 0; /* Fix for ember */

  635.   min-height: 22px;

  636.   padding: 2px 5px;

  637.   width: auto;

  638. }

  639. 

  640. .details--compact .form--slick .form-item .form-text,

  641. .form--slick .form-item .form-select,

  642. .form--slick .form-item .form-textarea {

  643.   width: 98%;

  644. }

  645. 

  646. .form--slick .form-item .form-text,

  647. .form--slick .form-item .form-select,

  648. .form--slick .form-item .form-textarea {

  649.   font-size: 14px;

  650.   font-size: 0.875rem;

  651. }

  652. 

  653. .form--slick .form-item .form-text:focus,

  654. .form--slick .form-item .form-select:focus,

  655. .form--slick .form-item .form-textarea:focus {

  656.   border-color: #ff6d2c;

  657.   box-shadow: 0 0 7px #ff6d2c;

  658. }

  659. 

  660. .form--slick .form-item .form-select {

  661.   line-height: 18px; /* Fix for Chrome linux */

  662.   min-height: 28px;

  663.   min-width: 120px;

  664.   padding: 4px 4px 2px; /* Fix for Chrome linux */

  665.   vertical-align: middle;

  666.   -moz-appearance: none;

  667.   -webkit-appearance: none;

  668.   appearance: none;

  669.   text-indent: .01px;

  670.   text-overflow: "";

  671.   white-space: nowrap; /* Fix for Bartik */

  672. }

  673. 

  674. .form--slick .form-type-textfield .field-prefix,

  675. .form--slick .form-type--textfield .form-item__prefix {

  676.   float: left;

  677.   line-height: 22px;

  678.   padding: 5px;

  679. }

  680. 

  681. .form--slick .form-type-textfield .field-suffix,

  682. .form--slick .form-type--textfield .form-item__prefix {

  683.   padding-left: 5px;

  684. }

  685. 

  686. .form--slick .form-radios {

  687.   margin-left: 180px;

  688. }

  689. 

  690. .form--half fieldset.form-item {

  691.   padding-left: 15px;

  692. }

  693. 

  694. /**

  695.  * Fixes for Adminimal gargantuan label.

  696.  */

  697. .form--slick .form-item label,

  698. .form--slick .form-item label.option {

  699.   font-weight: 400;

  700.   font-size: 14px;

  701.   font-size: 0.875rem;

  702.   line-height: 14px;

  703. }

  704. 

  705. .form--slick .form-item label {

  706.   display: block;

  707.   /* Overrides over-specified Seven */

  708.   padding: 2px 5px 2px 0 !important; /* csslint allow: known-properties, important */

  709.   margin: 0;

  710.   /* text-align: right; */

  711.   white-space: normal;

  712. }

  713. 

  714. .form--slick .form-item.form-type-textfield input {

  715.   width: auto;

  716.   max-width: 150px;

  717. }

  718. 

  719. .form--slick .form-item.form-type-textfield .form-number {

  720.   max-width: 50px;

  721. }

  722. 

  723. .form--slick .form-item.form-type-textfield .js-expandable {

  724.   transition: width 0.6s ease-out 0.8s, max-width 0.5s linear 0s;

  725. }

  726. 

  727. .form--slick .form-item.form-type-textfield.is-focused {

  728.   z-index: 3;

  729. }

  730. 

  731. .form--slick .form-item.form-type-textfield.is-focused .js-expandable {

  732.   max-width: 280px;

  733.   position: absolute;

  734.   width: 280px;

  735.   z-index: 2;

  736. }

  737. 

  738. .form--slick .fieldgroup.form-composite {

  739.   margin-bottom: -1px;

  740.   padding-bottom: 0;

  741.   padding-top: 0;

  742.   width: 100%;

  743. }

  744. 

  745. .form--slick .fieldgroup.form-composite > legend {

  746.   border-bottom: 1px solid #e7e7e7;

  747.   border-top: 1px solid #e7e7e7;

  748.   display: block;

  749.   font-size: 22px;

  750.   font-size: 1.375rem;

  751.   line-height: 42px;

  752.   margin-top: -1px;

  753.   min-height: 42px;

  754.   padding-right: 0 !important; /* csslint allow: known-properties, important */

  755.   padding-top: 20px;

  756.   width: 100%;

  757. }

  758. 

  759. .form--slick .vertical-tabs .form-item,

  760. .form--slick .vertical-tabs .form-item.form-type-textfield.is-focused {

  761.   min-height: 76px;

  762. }

  763. 

  764. .form--slick .vertical-tabs .fieldgroup.form-composite {

  765.   background: none;

  766.   padding: 0;

  767. }

  768. 

  769. .form--slick .vertical-tabs .fieldgroup.form-composite .form-item {

  770.   margin: -1px -1px 0 0;

  771.   padding-top: 20px;

  772. }

  773. 

  774. .form--slick .vertical-tabs .fieldgroup.form-composite .form-item:nth-child(3n+1) {

  775.   border-left: 0;

  776. }

  777. 

  778. .form--slick .vertical-tabs .has-tooltip .details-wrapper {

  779.   padding: 0;

  780. }

  781. 

  782. .form--slick .vertical-tabs .details--responsive > .details-wrapper {

  783.   padding: 40px 0 0;

  784. }

  785. 

  786. .form--slick .vertical-tabs .details--responsive .form-item input,

  787. .form--slick .vertical-tabs .details--responsive .form-item select {

  788.   max-width: 100px;

  789.   margin: 0; /* Fix for Ember */

  790. }

  791. 

  792. .form--slick .vertical-tabs .details--responsive .form-item .form-checkbox {

  793.   max-width: 100%;

  794. }

  795. 

  796. /**

  797.  * Checkboxes.

  798.  */

  799. .form--slick .form-type-radio {

  800.   border: 0;

  801. }

  802. 

  803. .form--slick .form-type-radio,

  804. .form--slick .form-type-checkbox {

  805.   position: relative;

  806. }

  807. 

  808. .form--slick .form-type-radio input,

  809. .form--slick .form-type-checkbox input[type=checkbox] {

  810.   background: none;

  811.   cursor: pointer;

  812.   font-size: 12px;

  813.   font-size: 0.75rem;

  814.   height: 22px;

  815.   display: inline-block;

  816.   float: none;

  817.   margin: 0; /* Fix for Ember */

  818.   opacity: 0;

  819.   width: 22px;

  820.   vertical-align: middle;

  821.   -webkit-appearance: none;

  822.   -moz-appearance: none;

  823.   appearance: none;

  824.   z-index: 2;

  825. }

  826. 

  827. /* Fix for UNIX FF + Chrome */

  828. .form--slick .form-type-checkbox input[type=checkbox] {

  829.   left: auto;

  830.   margin-top: 2px;

  831.   max-width: 100%;

  832.   min-height: 22px;

  833.   min-width: 22px;

  834.   position: absolute;

  835.   top: auto;

  836. }

  837. 

  838. .form--slick .form-type-checkbox .field-suffix {

  839.   color: transparent;

  840. }

  841. 

  842. .form--slick .form-type-radio label,

  843. .form--slick .form-type-checkbox label,

  844. .form--slick .form-type-checkbox .field-suffix {

  845.   line-height: 18px;

  846.   position: relative;

  847. }

  848. 

  849. .form--slick .form-type-radio label.option,

  850. .form--slick .form-type-checkbox .field-suffix {

  851.   padding-left: 0;

  852. }

  853. 

  854. .form--slick .form-type-checkbox label::before {

  855.   background: none;

  856.   border: 0;

  857. }

  858. 

  859. .form--slick .form-type-radio label::before,

  860. .form--slick .form-type-checkbox .field-suffix::before {

  861.   content: '';

  862.   display: block;

  863.   position: absolute;

  864.   text-align: center;

  865.   width: 22px;

  866. }

  867. 

  868. .form--slick .form-type-radio label::before {

  869.   font-size: 12px;

  870.   font-size: 0.75rem;

  871. }

  872. 

  873. .form--slick .form-type-radio label::before,

  874. .form--slick .form-type-checkbox .field-suffix {

  875.   box-sizing: border-box; /* dups due to csslint ignoring inheritance */

  876.   background: #fff;

  877.   border: 2px solid #dadada;

  878.   width: 22px;

  879.   height: 22px;

  880.   line-height: 22px;

  881.   margin-right: 5px;

  882.   left: 0;

  883.   top: 4px;

  884.   text-align: center;

  885.   transition: all 0.4s ease-in-out 0s;

  886. }

  887. 

  888. .form--slick .form-type-checkbox .field-suffix {

  889.   display: inline-block;

  890.   left: auto;

  891.   right: auto;

  892.   top: -4px;

  893.   vertical-align: middle;

  894. }

  895. 

  896. .form--slick .form-type-radio .form-radio:checked + label::before {

  897.   font-size: 32px;

  898.   line-height: 18px;

  899. }

  900. 

  901. .form--slick .form-type-radio .form-radio:checked + label::before,

  902. .form--slick .form-type-checkbox .form-checkbox:checked + .field-suffix {

  903.   background: #fff;

  904.   border-color: #ff6d2c;

  905.   color: #ff6d2c;

  906. }

  907. 

  908. .form--slick .form-type-radio .form-radio:focus,

  909. .form--slick .form-type-radio .form-checkbox:focus,

  910. .form--slick .form-type-checkbox .form-radio:focus,

  911. .form--slick .form-type-checkbox .form-checkbox:focus {

  912.   box-shadow: none;

  913. }

  914. 

  915. .form--slick .form-type-radio .form-radio:checked + label::before {

  916.   content: '\02022';

  917. }

  918. 

  919. .form--slick .form-type-checkbox .form-checkbox:checked + .field-suffix::before {

  920.   content: '\2713';

  921.   font-size: 16px;

  922.   line-height: 18px;

  923.   text-indent: -2px;

  924. }

  925. 

  926. .form--slick .form-type-radio label::before {

  927.   border-radius: 50%;

  928. }

  929. 

  930. /**

  931.  * Overrides

  932.  */

  933. .form--slick .form-type-textarea .grippie {

  934.   display: none;

  935. }

  936. 

  937. .form--slick .form-type-textarea .form-textarea {

  938.   resize: vertical;

  939. }

  940. 

  941. .form--slick .details-wrapper div[class*="-breakpoint"],

  942. .form--slick .vertical-tabs .details-wrapper div[class*="-unslick"] {

  943.   border: 0;

  944.   background: none;

  945. }

  946. 

  947. .form--slick .form-checkboxes {

  948.   border-top: 2px solid #e7e7e7;

  949.   clear: both;

  950.   margin-top: -1px;

  951.   width: 100%;

  952. }

  953. 

  954. /**

  955.  * Header

  956.  */

  957. .form--slick .form-item.fieldgroup.form-composite > legend {

  958.   padding: 10px 0;

  959. }

  960. 

  961. .form--slick .form-type-item,

  962. .ui-dialog-content .form--views > .details-wrapper > .description,

  963. .form--views > .details-wrapper > .description,

  964. .form--slick .form-item.fieldgroup.form-composite > legend,

  965. .form__title {

  966.   box-sizing: border-box; /* dups due to csslint ignoring inheritance */

  967.   background: #fafafa;

  968.   clear: both;

  969.   display: block;

  970.   float: none;

  971.   font-size: 20px;

  972.   font-size: 1.25rem;

  973.   font-weight: 400;

  974.   line-height: 1.2;

  975.   margin: 0;

  976.   min-height: 42px;

  977.   padding: 10px 5px 10px !important; /* csslint allow: known-properties, important */

  978.   text-align: center;

  979.   text-transform: uppercase;

  980.   width: 100%;

  981. }

  982. 

  983. td .form__title {

  984.   margin: -10px auto;

  985. }

  986. 

  987. .field-ui-overview td .form__title {

  988.   margin: 0 auto;

  989.   position: relative;

  990. }

  991. 

  992. .form--vanilla .form__header {

  993.   left: 0;

  994.   padding-left: 240px !important; /* csslint allow: known-properties, important */

  995.   position: absolute;

  996.   text-align: left;

  997.   top: 0;

  998. }

  999. 

  1000. .form--vanilla div[class*="-vanilla"] {

  1001.   background: none;

  1002.   border: 0;

  1003.   display: block;

  1004.   height: 62px;

  1005.   left: 0;

  1006.   position: absolute;

  1007.   top: 0;

  1008.   width: 100%;

  1009.   z-index: 3;

  1010. }

  1011. 

  1012. .form--slick .form-item.fieldgroup.form-composite > legend,

  1013. .form--slick .form-type-item,

  1014. .form__title {

  1015.   background: #e7e7e7;

  1016. }

  1017. 

  1018. .form--slick .details--no-checkboxes-label .form-item.fieldgroup.form-composite > legend {

  1019.   position: absolute !important; /* csslint allow: known-properties, important */

  1020.   clip: rect(1px, 1px, 1px, 1px);

  1021.   overflow: hidden;

  1022.   height: 1px;

  1023.   width: 1px;

  1024.   word-wrap: normal;

  1025. }

  1026. 

  1027. .ui-dialog-content .form--views > .details-wrapper > .description small,

  1028. .form--slick .form-type-item small,

  1029. .form__title small {

  1030.   display: block;

  1031.   font-size: 14px;

  1032.   margin-top: -1px;

  1033.   text-transform: none;

  1034. }

  1035. 

  1036. .form__header {

  1037.   margin-bottom: 0;

  1038. }

  1039. 

  1040. .form--slick .form__header .form-item {

  1041.   background: none;

  1042.   border: 0;

  1043.   float: none;

  1044. }

  1045. 

  1046. .form--slick .form__header .form-item input {

  1047.   width: 210px;

  1048.   max-width: 210px;

  1049. }

  1050. 

  1051. .form--slick .form__header .form-item .form-checkbox {

  1052.   max-width: 100%;

  1053.   width: auto;

  1054. }

  1055. 

  1056. .form--slick .form__header .form-item label {

  1057.   float: none;

  1058.   text-align: left;

  1059.   padding-left: 0 !important; /* csslint allow: known-properties, important */

  1060. }

  1061. 

  1062. .form--slick .form__header .form-item-skin label {

  1063.   width: auto;

  1064. }

  1065. 

  1066. .form--slick .form__header div[class*="-breakpoint"] input {

  1067.   width: 60px;

  1068. }

  1069. 

  1070. .form--slick .form__header .form-item-skin .description {

  1071.   bottom: 90% !important; /* csslint allow: known-properties, important */

  1072.   max-width: 480px;

  1073.   width: 480px;

  1074. }

  1075. 

  1076. .form--slick .form__title--grid {

  1077.   display: none;

  1078. }

  1079. 

  1080. .form--slick.form--grid-on .form__title--grid {

  1081.   display: block;

  1082. }

  1083. 

  1084. /**

  1085.  * Radios

  1086.  */

  1087. .form--slick .form-radios .form-item {

  1088.   background: none;

  1089.   border: 1px solid transparent;

  1090.   cursor: pointer;

  1091.   display: inline-block;

  1092.   padding: 0;

  1093.   width: auto;

  1094. }

  1095. 

  1096. .form--slick .form-radios .form-item input {

  1097.   cursor: pointer;

  1098.   display: block;

  1099.   height: 32px;

  1100.   opacity: 0;

  1101.   position: absolute;

  1102.   min-width: 60px;

  1103.   width: 100%;

  1104.   z-index: 9;

  1105. }

  1106. 

  1107. .form--slick .form-radios label {

  1108.   box-sizing: border-box; /* dups due to csslint ignoring inheritance */

  1109.   display: block;

  1110.   font-size: 12px;

  1111.   line-height: 12px;

  1112.   text-align: center;

  1113.   cursor: pointer;

  1114.   width: 100%;

  1115.   min-height: 45px;

  1116.   padding: 15px 5px 0;

  1117.   position: relative;

  1118. }

  1119. 

  1120. /* Fix for Shiny, Adminimal */

  1121. .ui-dialog-content .form--slick .form-item,

  1122. .ui-dialog-content .form--slick .form-item .form-item {

  1123.   clear: none;

  1124. }

  1125. 

  1126. .ui-dialog-content .form--views > .details-wrapper {

  1127.   /* Fix for Rubik */

  1128.   padding: 0 !important; /* csslint allow: known-properties, important */

  1129. }

  1130. 

  1131. .ui-dialog-content .form--slick > summary {

  1132.   background: none;

  1133.   border: 0;

  1134.   margin: 0;

  1135.   padding: 0;

  1136.   position: absolute;

  1137.   top: 0;

  1138. }

  1139. 

  1140. .ui-dialog-content .form--slick > summary .details-legend {

  1141.   margin: 0;

  1142.   padding: 10px 15px;

  1143.   position: absolute;

  1144.   text-transform: uppercase;

  1145.   white-space: nowrap;

  1146. }

  1147. 

  1148. .form--slick .form-item.form-type-radios,

  1149. .form--slick .form-item.fieldgroup.form-composite {

  1150.   border-left: 0;

  1151.   border-right: 0;

  1152.   clear: both;

  1153.   float: none;

  1154.   padding: 0;

  1155.   width: 100%;

  1156. }

  1157. 

  1158. /**

  1159.  * Misc

  1160.  */

  1161. .no-padding {

  1162.   padding: 0 !important; /* csslint allow: known-properties, important */

  1163. }

  1164. 

  1165. #edit-label-machine-name-suffix { /* csslint allow: ids */

  1166.   padding-left: 5px;

  1167. }

  1168. 

  1169. .path-admin-config-media-slick #main { /* csslint allow: ids */

  1170.   width: 100%;

  1171. }

  1172. 

  1173. #field-display-overview .field-plugin-settings-edit-form .form--slick .form-item { /* csslint allow: ids */

  1174.   margin: 0;

  1175. }

  1176. 

  1177. .form--optionset #edit-options { /* csslint allow: ids */

  1178.   clear: both;

  1179.   width: 100%;

  1180. }

  1181. 

  1182. /* Prevents overlapping Views edit options */

  1183. .ui-front [data-drupal-selector="edit-options"] details {

  1184.   clear: both;

  1185. }

  1186. 

  1187. [data-drupal-selector="edit-options-settings"] details {

  1188.   clear: none;

  1189. }

  1190. 

  1191. .form--slick.form--half {

  1192.   clear: both;

  1193.   margin: 30px auto;

  1194. }

  1195. 

  1196. .form--views.form--half {

  1197.   margin-top: 60px;

  1198. }

  1199. 

  1200. .form--slick .form-item label {

  1201.   line-height: 16px;

  1202. }

  1203. 

  1204. .form--slick .form-actions,

  1205. .form--optionset #edit-options { /* csslint allow: ids */

  1206.   clear: both;

  1207. }

  1208. 

  1209. .form--slick .form-wrapper--table .form-item {

  1210.   padding-left: 15px;

  1211. }

  1212. 

  1213. .form--slick .form-wrapper--table td .form-item {

  1214.   padding-left: 0;

  1215. }

  1216. 

  1217. .form--slick .form-wrapper--table th:first-child,

  1218. .form--slick .form-wrapper--table td:first-child {

  1219.   text-align: right;

  1220. }

  1221. 

  1222. .form--slick .form-wrapper--table td:first-child {

  1223.   font-size: 18px;

  1224.   font-weight: 600;

  1225.   line-height: 36px;

  1226.   text-transform: uppercase;

  1227. }

  1228. 

  1229. .form--slick .form-item--right {

  1230.   text-align: right;

  1231. }

  1232. 

  1233. .form--slick .form-item--left {

  1234.   text-align: left;

  1235. }

  1236. 

  1237. .form--slick .form-item--center {

  1238.   text-align: center;

  1239. }

  1240. 

  1241. .form--slick .fieldset__description {

  1242.   text-align: center;

  1243. }

  1244. 

  1245. @media screen and (min-width: 760px) {

  1246.   .form--slick .form-item {

  1247.     border-right: 1px solid #e7e7e7;

  1248.     padding-left: 0;

  1249.     padding-right: 0;

  1250.   }

  1251. 

  1252.   .form--slick .form-item label {

  1253.     /* Overrides over-specified Seven */

  1254.     padding: 2px 5px 2px 5px !important; /* csslint allow: known-properties, important */

  1255.   }

  1256. 

  1257.   .form--optionset .form-item,

  1258.   .form--slick .vertical-tabs__menu-item,

  1259.   .form--slick .vertical-tabs__menu-item.is-selected {

  1260.     width: 49.9999%;

  1261.   }

  1262. 

  1263.   .form--slick .vertical-tabs__menu-item,

  1264.   .form--slick .vertical-tabs__menu-item.is-selected {

  1265.     float: left;

  1266.   }

  1267. 

  1268.   .form--slick .form-item label {

  1269.     text-align: right;

  1270.   }

  1271. 

  1272.   .form--half .form-item,

  1273.   .toolbar-tray-open .form--optionset .form-item {

  1274.     width: 100%;

  1275.   }

  1276. 

  1277.   .form--slick .form-type-vertical-tabs {

  1278.     width: 100% !important; /* csslint allow: known-properties, important */

  1279.   }

  1280. 

  1281.   .has-tooltip .form-item > .description,

  1282.   .has-tooltip .form-composite > .fieldset-wrapper > .description {

  1283.     max-width: 100%;

  1284.   }

  1285. 

  1286.   .form--slick .form__header .form-item {

  1287.     display: inline-block;

  1288.     margin-right: -5px;

  1289.     vertical-align: top;

  1290.     padding-left: 4px;

  1291.     padding-right: 4px;

  1292.   }

  1293. 

  1294.   .form--slick .vertical-tabs .has-tooltip .details-wrapper {

  1295.     margin-right: -4px;

  1296.   }

  1297. 

  1298.   .form--slick .form__half--last .form-item,

  1299.   .toolbar-vertical .form--slick .form__half--last .form-item {

  1300.     float: right;

  1301.     width: auto;

  1302.   }

  1303. 

  1304.   .form--slick .form-item label {

  1305.     float: left;

  1306.     width: 160px;

  1307.     text-align: right;

  1308.     white-space: normal;

  1309.   }

  1310. 

  1311.   .form--slick.form--half .form-checkboxes .form-item {

  1312.     width: 33.3333%;

  1313.   }

  1314. 

  1315.   .form--slick.form--image .form-wrapper--caption .form-item {

  1316.     width: 49.9999%;

  1317.   }

  1318. 

  1319.   .field-plugin-settings-editing .form--slick {

  1320.     margin-top: 62px;

  1321.   }

  1322. 

  1323.   .form--slick.form--half {

  1324.     margin-bottom: 42px;

  1325.   }

  1326. 

  1327.   .ui-dialog .form--slick.form--half .form-item--style,

  1328.   .scroll .form--slick.form--half .form-item--style,

  1329.   .field-plugin-settings-editing .form--slick .form-item--style {

  1330.     background: none;

  1331.     border: 0;

  1332.     height: 42px;

  1333.     min-height: 32px;

  1334.     min-width: 330px;

  1335.     padding: 0;

  1336.     position: absolute;

  1337.     right: 0;

  1338.     top: -42px;

  1339.     width: auto;

  1340.     z-index: 9;

  1341.   }

  1342. 

  1343.   .form--slick .form__header .form-type-checkbox {

  1344.     max-width: 160px;

  1345.   }

  1346. 

  1347.   .form--slick #edit-delete { /* csslint allow: ids */

  1348.     position: absolute;

  1349.     right: 0;

  1350.   }

  1351. }

  1352. 

  1353. @media screen and (min-width: 1280px) {

  1354.   .form--slick .claro-details {

  1355.     box-shadow: none;

  1356.   }

  1357. 

  1358.   .form--slick.slick-form .vertical-tabs .claro-details .details-wrapper {

  1359.     top: -112px;

  1360.     position: relative;

  1361.   }

  1362. 

  1363.   .form--slick.slick-form .vertical-tabs .details-wrapper .details-wrapper {

  1364.     top: 0;

  1365.     margin: 2px;

  1366.   }

  1367. 

  1368.   .form--slick.slick-form .vertical-tabs .claro-details .details-wrapper .details-wrapper {

  1369.     padding: 0 1.5em 1em 1.5em;

  1370.   }

  1371. 

  1372.   .form--slick.slick-form .vertical-tabs .details-wrapper .details--settings .details-wrapper {

  1373.     margin: 0;

  1374.     padding: 0;

  1375.   }

  1376. 

  1377.   .form--slick .vertical-tabs details {

  1378.     overflow: visible;

  1379.   }

  1380. 

  1381.   .form--slick .vertical-tabs .details--responsive--ajax {

  1382.     padding: 0;

  1383.   }

  1384. 

  1385.   .form--slick .claro-details__description {

  1386.     padding: 1em;

  1387.   }

  1388. 

  1389.   .form--slick .form-type--boolean .form-boolean {

  1390.     margin-left: 0;

  1391.   }

  1392. 

  1393.   .form--slick .form-item .form-number {

  1394.     min-height: 2rem;

  1395.     padding: 2px 15px;

  1396.   }

  1397. 

  1398.   .form--slick .vertical-tabs .claro-details__content--vertical-tabs-item {

  1399.     margin: auto;

  1400.   }

  1401. 

  1402.   .form--optionset .form-item,

  1403.   .toolbar-tray-open .form--optionset .form-item {

  1404.     width: 33.2666%;

  1405.   }

  1406. 

  1407.   .form__half,

  1408.   .form--half .form-item,

  1409.   .toolbar-vertical.toolbar-tray-open .form--slick .form-item {

  1410.     width: 49.9999%;

  1411.   }

  1412. 

  1413.   .form--optionset .form-item.form-type--vertical-tabs,

  1414.   .toolbar-tray-open .form--optionset .form-item.form-type--vertical-tabs {

  1415.     width: 100%;

  1416.   }

  1417. 

  1418.   /** Blazy grid at Views UI */

  1419.   .form--blazy.form--views .form-item {

  1420.     width: 33.2666%;

  1421.   }

  1422. 

  1423.   .form--blazy.form--views .form-item select {

  1424.     min-width: 64px;

  1425.     width: 64px;

  1426.   }

  1427. 

  1428.   .form--blazy.form--views .form-item label {

  1429.     width: auto;

  1430.     min-width: 120px;

  1431.   }

  1432. 

  1433.   .form--blazy.form--views .form-item--style select {

  1434.     width: 120px;

  1435.   }

  1436. 

  1437.   .form__half {

  1438.     float: left;

  1439.   }

  1440. 

  1441.   .form--slick .vertical-tabs__menu-item,

  1442.   .form--slick .vertical-tabs__menu-item.is-selected,

  1443.   .form--optionset td .form-item,

  1444.   .toolbar-tray-open .form--optionset td .form-item {

  1445.     float: none;

  1446.     width: 100%;

  1447.   }

  1448. 

  1449.   .form--slick .vertical-tabs__items {

  1450.     margin-left: 190px;

  1451.   }

  1452. 

  1453.   .form--gridstack .vertical-tabs__items {

  1454.     margin-left: 0;

  1455.   }

  1456. 

  1457.   .form--slick .form-type-item {

  1458.     float: left;

  1459.     width: 100%;

  1460.   }

  1461. 

  1462.   .toolbar-tray-open .form--slick .form__half--last .form-item {

  1463.     float: right;

  1464.     width: auto;

  1465.   }

  1466. 

  1467.   .form--slick.form--half .form-checkboxes .form-item {

  1468.     width: 24.9999%;

  1469.   }

  1470. 

  1471.   .toolbar-tray-open .form--slick.slick-form .form__half--last .form-item {

  1472.     max-width: 24%;

  1473.   }

  1474. 

  1475.   .form--slick.form--image .form-wrapper--caption .form-item,

  1476.   .form--slick.form--caption-2 .form-wrapper--caption .form-item,

  1477.   .form--slick .form-wrapper--checkboxes.form-wrapper--count-2 .form-item {

  1478.     width: 49.9999%;

  1479.   }

  1480. 

  1481.   .form--slick.form--caption-3 .form-wrapper--caption .form-item,

  1482.   .form--slick .form-wrapper--checkboxes.form-wrapper--count-3 .form-item {

  1483.     width: 33.3333%;

  1484.   }

  1485. 

  1486.   .form--slick .form-wrapper--checkboxes.form-wrapper--count-max .form-item label {

  1487.     width: 160px;

  1488.   }

  1489. 

  1490.   .has-tooltip .form-item--tooltip-wide > .description {

  1491.     max-width: 480px;

  1492.     min-width: 480px;

  1493.   }

  1494. 

  1495.   .form--slick .form-item label {

  1496.     width: 180px;

  1497.   }

  1498. 

  1499.   .form--slick.form--half {

  1500.     max-width: 960px;

  1501.     min-width: 760px;

  1502.   }

  1503. 

  1504.   .form--blazy.form--views .form-item--style > .description {

  1505.     min-width: 640px;

  1506.   }

  1507. 

  1508.   /** Blazy grid at Views UI or Fied UI. */

  1509.   .form--blazy.form--grid-required .form-item,

  1510.   .form--style-on.form--namespace-blazy div[class*="grid"],

  1511.   .form--grid-on.form--grid-compact div[class*="grid"] {

  1512.     width: 33.2666%;

  1513.   }

  1514. 

  1515.   .form--style-on.form--namespace-blazy .form-item.form-item--grid-header,

  1516.   .form--grid-on.form--grid-compact .form-item.form-item--grid-header {

  1517.     width: 100%;

  1518.   }

  1519. 

  1520.   .form--blazy.form--grid-required .form-item select,

  1521.   .form--style-on.form--namespace-blazy div[class*="grid"] select,

  1522.   .form--grid-on.form--grid-compact div[class*="grid"] select {

  1523.     min-width: 64px;

  1524.     width: 64px;

  1525.   }

  1526. 

  1527.   .form--blazy.form--grid-required .form-item label,

  1528.   .form--style-on.form--namespace-blazy div[class*="grid"] label,

  1529.   .form--grid-on.form--grid-compact div[class*="grid"] label {

  1530.     width: auto;

  1531.     min-width: 120px;

  1532.   }

  1533. 

  1534.   .form--blazy.form--grid-required .form-item--style select,

  1535.   .form--style-on.form--namespace-blazy .form-item--style select,

  1536.   .form--grid-on.form--grid-compact .form-item--style select {

  1537.     width: 120px;

  1538.   }

  1539. }

  1540. 

  1541. @media screen and (min-width: 1400px) {

  1542.   .form--slick .form-item input,

  1543.   .form--slick .form-item select {

  1544.     max-width: 180px;

  1545.     min-width: 180px;

  1546.   }

  1547. }

  1548. 

  1549. /** Declutter form when Vanilla is enabled coz table form states are broken. */

  1550. .form--vanilla-on .form__title--media-switch,

  1551. .form--vanilla-on .form__title--fields,

  1552. .form--media-switch-rendered .form-item--background,

  1553. .form--media-switch-rendered .form-item--image-style,

  1554. .form--media-switch-rendered .form-item--ratio {

  1555.   display: none !important; /* csslint allow: known-properties, important */

  1556. }