Advertisement
Guest User

Untitled

a guest
Jun 28th, 2017
87
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 116.29 KB | None | 0 0
  1. /* GENERAL */
  2.  
  3. .ffb-canvas {
  4. -webkit-box-sizing: border-box;
  5. -moz-box-sizing: border-box;
  6. box-sizing: border-box;
  7. }
  8. .ffb-canvas *,
  9. .ffb-canvas *:before,
  10. .ffb-canvas *:after {
  11. -webkit-box-sizing: inherit;
  12. -moz-box-sizing: inherit;
  13. box-sizing: inherit;
  14. }
  15.  
  16. .qtip,
  17. .qtip *,
  18. .qtip *:before,
  19. .qtip *:after {
  20. -webkit-box-sizing: border-box;
  21. -moz-box-sizing: border-box;
  22. box-sizing: border-box;
  23. }
  24.  
  25. /* DASHICONS RESET FIX */
  26.  
  27. .ffb-canvas .dashicons,
  28. .ffb-canvas .dashicons-before::before {
  29. width: auto;
  30. height: auto;
  31. }
  32.  
  33. /* CLEARFIX */
  34.  
  35. .clearfix:before,
  36. .clearfix:after {
  37. content: " ";
  38. display: table;
  39. }
  40.  
  41. .clearfix:after {
  42. clear: both;
  43. }
  44.  
  45. /* CANVAS */
  46.  
  47. .ffb-canvas {
  48. font-size: 12px;
  49. margin: 0 -12px -12px -12px;
  50.  
  51. -webkit-touch-callout: none; /* iOS Safari */
  52. -webkit-user-select: none; /* Chrome/Safari/Opera */
  53. -khtml-user-select: none; /* Konqueror */
  54. -moz-user-select: none; /* Firefox */
  55. -ms-user-select: none; /* Internet Explorer/Edge */
  56. user-select: none; /* Non-prefixed version, currently
  57. not supported by any browser */
  58. }
  59.  
  60. .ffb-canvas__add-section-button-wrapper {
  61. text-align: center;
  62. /*background-color: #fafafa;*/
  63. margin: 12px 4px 4px 4px;
  64. padding: 17px;
  65. position: relative;
  66. /*transition: 0.2s margin ease;*/
  67. /*border: 1px dashed #d0d0d0;*/
  68. /*cursor: pointer;*/
  69. }
  70.  
  71. .ffb-canvas__add-section-button-wrapper.action-add-section-triggered {
  72. cursor: default;
  73. }
  74.  
  75. /*.ffb-canvas__add-section-button-wrapper:hover,
  76. .ffb-canvas__add-section-button-wrapper.action-add-section-triggered {
  77. background-color: #fafafa;
  78. }*/
  79.  
  80. /*
  81. .ffb-canvas__add-section-button {
  82. text-align: left;
  83. font-size: 18px;
  84. background: #32d316;
  85. border-radius: 5px;
  86. display: inline-block;
  87. font-size: 36px;
  88. margin: 20px auto 0;
  89. padding: 10px;
  90. text-align: center;
  91. color: #ffffff;
  92. cursor: pointer;
  93. }
  94.  
  95. .ffb-canvas__add-section-button:hover {
  96. color: #23282d;
  97. }*/
  98.  
  99. .ffb-canvas__add-section-button {
  100. -webkit-transition: none !important;
  101. -moz-transition: none !important;
  102. -o-transition: none !important;
  103. -ms-transition: none !important;
  104. transition: none !important;
  105. -webkit-box-shadow: none !important;
  106. -moz-box-shadow: none !important;
  107. -o-box-shadow: none !important;
  108. -ms-box-shadow: none !important;
  109. box-shadow: none !important;
  110.  
  111. display: inline-block;
  112. margin: 0 10px;
  113. width: 32px;
  114. height: 32px;
  115. background-image: url('images/ffb-add-section-icons3.png');
  116. background-repeat: no-repeat;
  117. text-decoration: none;
  118.  
  119. position: absolute;
  120. top: 17px;
  121. left: 50%;
  122. margin: 0 0 0 -16px;
  123. }
  124.  
  125. .ffbvr .ffb-canvas__add-section-button {
  126. background-image: url('images/ffbvr/ffb-add-section-icons3.png');
  127. }
  128.  
  129. .ffb-canvas__add-section-button {
  130. background-position: -560px 0;
  131. }
  132.  
  133. .ffb-canvas__add-section-button-wrapper:hover .ffb-canvas__add-section-button {
  134. background-position: -560px -70px;
  135. }
  136.  
  137. /*
  138.  
  139. .ffb-canvas__add-section-button {
  140. -webkit-transition: none !important;
  141. -moz-transition: none !important;
  142. -o-transition: none !important;
  143. -ms-transition: none !important;
  144. transition: none !important;
  145. -webkit-box-shadow: none !important;
  146. -moz-box-shadow: none !important;
  147. -o-box-shadow: none !important;
  148. -ms-box-shadow: none !important;
  149. box-shadow: none !important;
  150. }
  151.  
  152. .ffb-canvas__add-section-button {
  153. display: inline-block;
  154. line-height: 20px;
  155. background-color: #32d316;
  156. color: #ffffff;
  157. text-decoration: none;
  158. border-radius: 2px;
  159. font-size: 13px;
  160. position: absolute;
  161. top: 28px;
  162. left: 50%;
  163. transform: translateX(-50%);
  164. }
  165.  
  166. .ffb-canvas__add-section-button:hover {
  167. background-color: #22c306;
  168. color: #ffffff;
  169. }
  170.  
  171. .ffb-canvas__add-section-button i {
  172. padding: 8px 0 8px 13px;
  173. display: inline-block;
  174. height: 36px;
  175. line-height: 20px;
  176. font-size: 14px;
  177. }
  178.  
  179. .ffb-canvas__add-section-button span {
  180. padding: 8px 12px 8px 9px;
  181. display: inline-block;
  182. height: 36px;
  183. line-height: 20px;
  184. }
  185.  
  186. */
  187.  
  188. .ffb-canvas__add-section-items {
  189. height: 32px; /* should equal the height of the ADD button which is positioned absolutely */
  190. /*transition: 0.5242s height ease;*/
  191. }
  192.  
  193. /*.ffb-canvas__add-section-button-wrapper.action-add-section-triggered .ffb-canvas__add-section-items {
  194. height: 52px;
  195. }*/
  196.  
  197. .ffb-canvas__add-section-item {
  198. display: none;
  199. margin: 0 8px;
  200. width: 32px;
  201. height: 32px;
  202. background-image: url('images/ffb-add-section-icons3.png');
  203. background-repeat: no-repeat;
  204. text-decoration: none;
  205. transition: none !important;
  206. cursor: pointer;
  207. }
  208.  
  209. .ffbvr .ffb-canvas__add-section-item {
  210. background-image: url('images/ffbvr/ffb-add-section-icons3.png');
  211. }
  212.  
  213. .ffb-canvas__add-section-button-wrapper.action-add-section .ffb-canvas__add-section-item {
  214. display: inline-block;
  215. }
  216.  
  217. .ffb-canvas__add-section-button-wrapper.action-add-section .ffb-canvas__add-section-button {
  218. display: none;
  219. }
  220.  
  221. /*
  222.  
  223. .ffb-canvas__add-section-item {
  224. animation-duration: 0.1142s;
  225. }
  226. .ffb-canvas__add-section-button-wrapper.action-add-section-triggered .ffb-canvas__add-section-item {
  227. display: inline-block;
  228. -webkit-transition: none !important;
  229. -moz-transition: none !important;
  230. -o-transition: none !important;
  231. -ms-transition: none !important;
  232. transition: none !important;
  233. -webkit-box-shadow: none !important;
  234. -moz-box-shadow: none !important;
  235. -o-box-shadow: none !important;
  236. -ms-box-shadow: none !important;
  237. box-shadow: none !important;
  238. }
  239.  
  240. .ffb-canvas__add-section-item:nth-child(1) {
  241. animation-delay: 0.0s;
  242. }
  243.  
  244. .ffb-canvas__add-section-item:nth-child(2) {
  245. animation-delay: 0.04s;
  246. }
  247.  
  248. .ffb-canvas__add-section-item:nth-child(3) {
  249. animation-delay: 0.08s;
  250. }
  251.  
  252. .ffb-canvas__add-section-item:nth-child(4) {
  253. animation-delay: 0.12s;
  254. }
  255.  
  256. .ffb-canvas__add-section-item:nth-child(5) {
  257. animation-delay: 0.16s;
  258. }
  259.  
  260. .ffb-canvas__add-section-item:nth-child(6) {
  261. animation-delay: 0.20s;
  262. }
  263.  
  264. .ffb-canvas__add-section-item:nth-child(7) {
  265. animation-delay: 0.24s;
  266. }
  267.  
  268. .ffb-canvas__add-section-item:nth-child(8) {
  269. animation-delay: 0.28s;
  270. }
  271. */
  272.  
  273. .ffb-canvas__add-section-item__grid-1 {
  274. background-position: 0px 0px;
  275. }
  276.  
  277. .ffb-canvas__add-section-item__grid-2 {
  278. background-position: -70px 0px;
  279. }
  280.  
  281. .ffb-canvas__add-section-item__grid-3 {
  282. background-position: -140px 0px;
  283. }
  284.  
  285. .ffb-canvas__add-section-item__grid-4 {
  286. background-position: -210px 0px;
  287. }
  288.  
  289. .ffb-canvas__add-section-item__grid-bs {
  290. background-position: -280px 0px;
  291. }
  292.  
  293. .ffb-canvas__add-section-item__element {
  294. background-position: -350px 0px;
  295. }
  296.  
  297. .ffb-canvas__add-section-item__library {
  298. background-position: -420px 0px;
  299. }
  300.  
  301. .ffb-canvas__add-section-item__cancel {
  302. background-position: -490px 0px;
  303. }
  304.  
  305. .ffb-canvas__add-section-item__grid-1:hover {
  306. background-position: 0px -70px;
  307. }
  308.  
  309. .ffb-canvas__add-section-item__grid-2:hover {
  310. background-position: -70px -70px;
  311. }
  312.  
  313. .ffb-canvas__add-section-item__grid-3:hover {
  314. background-position: -140px -70px;
  315. }
  316.  
  317. .ffb-canvas__add-section-item__grid-4:hover {
  318. background-position: -210px -70px;
  319. }
  320.  
  321. .ffb-canvas__add-section-item__grid-bs:hover {
  322. background-position: -280px -70px;
  323. }
  324.  
  325. .ffb-canvas__add-section-item__element:hover {
  326. background-position: -350px -70px;
  327. }
  328.  
  329. .ffb-canvas__add-section-item__library:hover {
  330. background-position: -420px -70px;
  331. }
  332.  
  333. .ffb-canvas__add-section-item__cancel:hover {
  334. background-position: -490px -70px;
  335. }
  336.  
  337. /* CANVAS - CONTEXTMENU */
  338.  
  339. .ffb-canvas-contextmenu {
  340. border-radius: 0;
  341. margin: 0;
  342. padding: 0;
  343. line-height: 18px;
  344. width: 120px;
  345. min-width: 0;
  346. max-width: auto;
  347. font-size: 12px;
  348. border: 1px solid #bbbbbb;
  349.  
  350. -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.09);
  351. -moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.09);
  352. box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.09);
  353. }
  354.  
  355. .ffb-canvas-contextmenu .context-menu-item {
  356. margin: 0;
  357. padding: 7px 17px;
  358. /*border-bottom: 1px solid #dddddd;*/
  359. }
  360.  
  361. .ffb-canvas-contextmenu .context-menu-item:last-child {
  362. border-bottom: none;
  363. }
  364.  
  365. .ffb-canvas-contextmenu .context-menu-item.context-menu-hover {
  366. background-color: #32d316;
  367. color: #ffffff;
  368. }
  369.  
  370. .ffbvr .ffb-canvas-contextmenu .context-menu-item.context-menu-hover {
  371. background-color: #2eb515;
  372. }
  373.  
  374. .ffb-canvas-contextmenu .context-menu-item.context-menu-hover:last-child {
  375. background-color: #ff0048;
  376. }
  377.  
  378. .ffb-options-page .ff-popup-button-wrapper:not(:last-child) .ff-popup-button {
  379. border-bottom: none;
  380. cursor: pointer;
  381. }
  382.  
  383. .ffb-options-page .ff-popup-button:hover {
  384. background-color: #32d316;
  385. }
  386.  
  387. .ffbvr .ffb-options-page .ff-popup-button:hover {
  388. background-color: #2eb515;
  389. }
  390.  
  391. /* ELEMENTS (GENERAL) */
  392.  
  393. .ffb-element {
  394. background-color: #ffffff;
  395. border: 1px solid #dddddd;
  396. box-shadow: 0 2px 16px rgba(0, 0, 0, 0.02);
  397. margin: 16px 8px 0 8px !important;
  398. position: relative;
  399. animation-duration: 0.3s;
  400. opacity: 1;
  401. }
  402. /*
  403. .ffb-element-disabled > .ffb-element-preview,
  404. .ffb-element-disabled > .ffb-dropzone {
  405. opacity: 0.35 !important;
  406. }*/
  407.  
  408. .ffb-element-disabled > .ffb-element-preview:before,
  409. .ffb-element-disabled > .ffb-dropzone:before {
  410. content: ' ';
  411. position: absolute;
  412. top: 0;
  413. right: 0;
  414. bottom: 0;
  415. left: 0;
  416. display: block;
  417. background-color: rgba(250,250,250,0.75);
  418. z-index: 1;
  419. pointer-events: none;
  420. }
  421.  
  422. .ffb-element-disabled > .ffb-dropzone:before {
  423. top: 25px; /* el header height */
  424. }
  425.  
  426. /*.ffb-element-disabled > .ffb-header .ffb-header-name {
  427. color: #ff0048;
  428. }*/
  429.  
  430. body:not(.ffb-canvas-drag-in-progress) .ffb-element-is-hovered.ffb-element-disabled {
  431. box-shadow: 0 0 0 1px #ff0048 !important;
  432. }
  433. body:not(.ffb-canvas-drag-in-progress) .ffb-element-is-hovered.ffb-element-disabled {
  434. border-color: #ff0048 !important;
  435. }
  436.  
  437. body:not(.ffb-canvas-drag-in-progress) .ffb-element-is-hovered.ffb-element-is-collapsed.ffb-element-disabled > .ffb-header {
  438. border-bottom-color: #ff0048 !important;
  439. }
  440.  
  441. /*body:not(.ffb-canvas-drag-in-progress) .ffb-element-disabled .ffb-element-is-hovered {
  442. box-shadow: 0 0 0 1px #ff0048 !important;
  443. }
  444. body:not(.ffb-canvas-drag-in-progress) .ffb-element-disabled .ffb-element-is-hovered {
  445. border-color: #ff0048 !important;
  446. }
  447.  
  448. body:not(.ffb-canvas-drag-in-progress) .ffb-element-is-collapsed.ffb-element-disabled .ffb-element-is-hovered > .ffb-header {
  449. border-bottom-color: #ff0048 !important;
  450. }*/
  451.  
  452. .ffb-element.ffb-element-anim-copy {
  453. animation-duration: 1s;
  454. }
  455.  
  456. /* ELEMENT __ HEADER */
  457.  
  458. .ffb-header {
  459. background-color: #fafafa;
  460. text-transform: capitalize;
  461. border-bottom: 1px solid #dddddd;
  462. color: #23282d;
  463. cursor: pointer;
  464. }
  465.  
  466. .ffb-header-name {
  467. float: left;
  468. font-weight: 600;
  469. padding: 0 8px 0 8px;
  470. font-size: 11px;
  471. /*cursor: move;*/
  472.  
  473. max-width: calc(100% - 71px);
  474. overflow: hidden;
  475. text-overflow: ellipsis;
  476. white-space: nowrap;
  477. }
  478.  
  479. .ffb-header-name,
  480. .ffb-header-name:hover {
  481. color: #23282d;
  482. }
  483.  
  484. .ffb-element-column > .ffb-header > .ffb-header-name {
  485. /*max-width: calc(100% - 120px);*/
  486. max-width: 100%;
  487. }
  488.  
  489. .ffb-element.ffb-element-dropzone-no > .ffb-header > .ffb-header-name {
  490. /*max-width: calc(100% - 72px);*/
  491. max-width: 100%;
  492. }
  493.  
  494. .ffb-header__button {
  495. color: #666666;
  496. font-size: 15px;
  497. /*padding: 0 8px;*/
  498. width: 24px;
  499. /*opacity: 0.5;*/
  500. }
  501.  
  502. .ffb-header-name,
  503. .ffb-header__button {
  504. height: 24px;
  505. line-height: 24px;
  506. }
  507.  
  508. .ffb-header__button {
  509. background-image: url('images/ffb-header-icons5.png');
  510. background-repeat: no-repeat;
  511. }
  512.  
  513. .ffbvr .ffb-header__button {
  514. background-image: url('images/ffbvr/ffb-header-icons5.png');
  515. }
  516.  
  517. .ffb-header__button-right {
  518. float: right;
  519. /*border-left: 1px solid #dddddd;*/
  520. }
  521.  
  522. .ffb-header__button-left {
  523. float: left;
  524. /*border-right: 1px solid #dddddd;*/
  525. }
  526.  
  527. .ffb-header__button:hover {
  528. cursor: pointer;
  529. background-color: #ffffff;
  530. /*opacity: 1;*/
  531. }
  532.  
  533. .ffb-header__button.action-add-element {
  534. background-position: -8px -8px;
  535. }
  536.  
  537. .ffb-header__button.action-edit-element {
  538. background-position: -48px -8px;
  539. }
  540.  
  541. .ffb-header__button.action-toggle-context-menu {
  542. background-position: -88px -8px;
  543. }
  544.  
  545. .ffb-header__button.action-column-bigger {
  546. background-position: -127px -8px;
  547. /*width: 23;*/
  548. }
  549.  
  550. .ffb-header__button.action-column-smaller {
  551. background-position: -169px -8px;
  552. /*width: 23;*/
  553. }
  554.  
  555. .ffb-header__button.action-preview-element {
  556. background-position: -248px -8px;
  557. position: relative;
  558. cursor: help;
  559. }
  560.  
  561. .ffb-header__button.action-toggle-collapse {
  562. background-position: -288px -8px;
  563. position: relative;
  564. z-index: 1;
  565. }
  566.  
  567. .ffb-header__button.action-toggle-collapse.action-is-collapsed {
  568. background-position: -328px -8px;
  569. position: relative;
  570. z-index: 1;
  571. }
  572.  
  573. .ffb-header__button.action-add-element:hover {
  574. background-position: -8px -48px;
  575. }
  576.  
  577. .ffb-header__button.action-edit-element:hover {
  578. background-position: -48px -48px;
  579. }
  580.  
  581. .ffb-header__button.action-toggle-context-menu:hover {
  582. background-position: -88px -48px;
  583. }
  584.  
  585. .ffb-header__button.action-column-bigger:hover {
  586. background-position: -127px -48px;
  587. /*width: 23;*/
  588. }
  589.  
  590. .ffb-header__button.action-column-smaller:hover {
  591. background-position: -169px -48px;
  592. /*width: 23;*/
  593. }
  594.  
  595. .ffb-header__button.action-preview-element:hover {
  596. background-position: -248px -48px;
  597. }
  598.  
  599. .ffb-header__button.action-toggle-collapse:hover {
  600. background-position: -288px -48px;
  601. position: relative;
  602. z-index: 1;
  603. }
  604.  
  605. .ffb-header__button.action-toggle-collapse.action-is-collapsed:hover {
  606. background-position: -328px -48px;
  607. position: relative;
  608. z-index: 1;
  609. }
  610.  
  611. .ffb-element > .ffb-header .ffb-header__button.action-text-color {
  612. background-position: 500px 500px;
  613. }
  614.  
  615. .ffb-element.ffb-text-color-dark > .ffb-header .ffb-header__button.action-text-color {
  616. background-position: -368px -8px;
  617. }
  618.  
  619. .ffb-element.ffb-text-color-dark > .ffb-header .ffb-header__button.action-text-color:hover {
  620. background-position: -368px -48px;
  621. }
  622.  
  623. .ffb-element.ffb-text-color-light > .ffb-header .ffb-header__button.action-text-color {
  624. background-position: -408px -8px;
  625. }
  626.  
  627. .ffb-element.ffb-text-color-light > .ffb-header .ffb-header__button.action-text-color:hover {
  628. background-position: -408px -48px;
  629. }
  630.  
  631. .ffb-element.ffb-text-color-inherit > .ffb-header .ffb-header__button.action-text-color {
  632. background-position: -448px -8px;
  633. }
  634.  
  635. .ffb-element.ffb-text-color-inherit > .ffb-header .ffb-header__button.action-text-color:hover {
  636. background-position: -448px -48px;
  637. }
  638.  
  639. .ffb-header__button-preview-content {
  640. display: none;
  641. position: absolute;
  642. z-index: 1;
  643. bottom: 100%;
  644. left: 100%;
  645. margin: 0 0 1px 1px;
  646. box-shadow: 5px 10px 60px rgba(0,0,0,0.3);
  647. pointer-events: none;
  648. }
  649.  
  650. .ffb-header__button.action-preview-element:hover .ffb-header__button-preview-content {
  651. display: block;
  652. }
  653.  
  654. .ffb-header__button-preview-content img {
  655. display: block;
  656. height: auto;
  657. max-width: 380px;
  658. max-height: 380px;
  659. }
  660.  
  661. .ffb-element:not(.ffb-element-is-hovered):not(:hover) > .ffb-header > .ffb-header__button-right {
  662. display: none !important;
  663. }
  664.  
  665. .ffb-element:not(:hover) > .ffb-header > .ffb-header__button-right.context-menu-active {
  666. opacity: 1;
  667. background-color: #ffffff;
  668. background-position: -88px -48px;
  669. }
  670.  
  671. .ffb-element:not(.ffb-element-is-hovered):hover .ffb-element:not(:hover) > .ffb-header > .ffb-header__button-right {
  672. display: none !important;
  673. }
  674.  
  675. /* DO NOT DELETE !!!
  676. .ffb-element:not(.ffb-element-is-hovered) > .ffb-header > .ffb-header__button-right:not(.context-menu-active) {
  677. display: none !important;
  678. }
  679.  
  680. .ffb-element:not(.ffb-element-is-hovered) > .ffb-header > .ffb-header__button-right.context-menu-active {
  681. opacity: 1;
  682. background-color: #ffffff;
  683. }
  684.  
  685. .ffb-element.ffb-element-is-hovered .ffb-element:not(.ffb-element-is-hovered) > .ffb-header > .ffb-header__button-right:not(.context-menu-active) {
  686. display: none !important;
  687. }*/
  688.  
  689. body:not(.ffb-canvas-drag-in-progress) .ffb-element-is-hovered {
  690. box-shadow: 0 0 0 1px #32d316 !important;
  691. }
  692.  
  693. .ffbvr body:not(.ffb-canvas-drag-in-progress) .ffb-element-is-hovered {
  694. box-shadow: 0 0 0 1px #2eb515 !important;
  695. }
  696. /*
  697. body:not(.ffb-canvas-drag-in-progress) .ffb-element-is-hovered,
  698. body:not(.ffb-canvas-drag-in-progress) .ffb-element-is-hovered > .ffb-header,
  699. body:not(.ffb-canvas-drag-in-progress) .ffb-element-is-hovered > .ffb-header > .ffb-header__button {
  700. border-color: #aaa !important;
  701. }*/
  702.  
  703. body:not(.ffb-canvas-drag-in-progress) .ffb-element-is-hovered {
  704. border-color: #32d316 !important;
  705. }
  706.  
  707. .ffbvr body:not(.ffb-canvas-drag-in-progress) .ffb-element-is-hovered {
  708. border-color: #2eb515 !important;
  709. }
  710.  
  711. body:not(.ffb-canvas-drag-in-progress) .ffb-element-is-hovered.ffb-element-is-collapsed > .ffb-header {
  712. border-bottom-color: #32d316 !important;
  713. }
  714.  
  715. .ffbvr body:not(.ffb-canvas-drag-in-progress) .ffb-element-is-hovered.ffb-element-is-collapsed > .ffb-header {
  716. border-bottom-color: #2eb515 !important;
  717. }
  718.  
  719.  
  720. .ffb-element.action-toggle-context-menu-opened > .ffb-header {
  721. display: block;
  722. }
  723.  
  724. /* ELEMENT COLLAPSING */
  725.  
  726. .ffb-element-is-collapsed {
  727. border-bottom: none;
  728. }
  729.  
  730. .ffb-header__button.action-toggle-collapse {
  731. display: none;
  732. }
  733.  
  734. /*.ffb-element-section > .ffb-header .ffb-header__button.action-toggle-collapse,
  735. .ffb-element-section-bootstrap > .ffb-header .ffb-header__button.action-toggle-collapse {
  736. display: block;
  737. }
  738. */
  739. .ffb-element-dropzone-yes:not(.ffb-element-column) > .ffb-header .ffb-header__button.action-toggle-collapse {
  740. display: block;
  741. }
  742.  
  743. /* ELEMENT __ NO DROPZONE */
  744.  
  745. .ffb-element-dropzone-no .ffb-element-preview {
  746. background-color: #fafafa;
  747. cursor: pointer;
  748. overflow: hidden;
  749. }
  750.  
  751. .ffb-element-dropzone-no .ffb-header {
  752. position: absolute;
  753. top: 0;
  754. right: 0;
  755. left: 0;
  756. width: 100%;
  757. display: none;
  758. background-color: #f0f0f0;
  759.  
  760. }
  761.  
  762. .ffb-element-dropzone-no.ffb-element-disabled > .ffb-header {
  763. z-index: 2; /* needed because of DISABLED element overlay */
  764. }
  765. .ffb-element.ffb-element-disabled .ffb-element-dropzone-no.ffb-element-disabled > .ffb-header {
  766. z-index: auto; /* needed because of DISABLED element overlay */
  767. }
  768.  
  769. .ffb-element-dropzone-no:hover .ffb-header,
  770. .ffb-element-is-hovered.ffb-element-dropzone-no .ffb-header {
  771. display: block;
  772. }
  773.  
  774. .ffb-element-dropzone-no .ffb-element-preview {
  775. padding: 25px 15px 40px 15px;
  776. text-align: center;
  777. }
  778.  
  779. .ffb-element-dropzone-no .ffb-preview-icon {
  780. margin: 15px auto 0 auto;
  781. padding: 0 10px;
  782. background-color: #fafafa;
  783. display: inline-block;
  784. }
  785.  
  786. .ffb-element-dropzone-no .ffb-preview-icon-content {
  787. display: inline-block;
  788. /*width: 46px;
  789. height: 46px;
  790. line-height: 46px;*/
  791. /*font-size: 20px;*/
  792. border-radius: 99px;
  793. /*background-color: #f0f0f0;*/
  794. text-align: center;
  795. font-size: 34px;
  796. line-height: 34px;
  797. }
  798.  
  799. .ffb-element-dropzone-no .ffb-preview-empty {
  800. margin: 15px auto 0 auto;
  801. padding: 0 10px;
  802. background-color: #fafafa;
  803. display: inline-block;
  804. }
  805.  
  806. .ffb-element-dropzone-no .ffb-preview-empty-content {
  807. display: inline-block;
  808. border-radius: 99px;
  809. text-align: center;
  810. font-size: 34px;
  811. line-height: 34px;
  812. color: #bbbbbb;
  813. }
  814.  
  815. .ffb-element-dropzone-yes > .ffb-element-preview > .ffb-preview-empty {
  816. display: none;
  817. }
  818.  
  819. .ffb-element-dropzone-no .ffb-preview-heading-lg {
  820. font-size: 17px;
  821. line-height: 26px;
  822. font-weight: 400;
  823. margin: 15px 0 0 0;
  824. word-wrap: break-word;
  825. color: #23282d;
  826. }
  827.  
  828. .ffb-element-dropzone-no .ffb-preview-heading-lg span {
  829. background-color: #fafafa;
  830. padding: 0 10px;
  831. }
  832.  
  833. .ffb-element-dropzone-no .ffb-preview-heading-sm + .ffb-preview-heading-lg {
  834. margin: 0 0 0 0;
  835. }
  836.  
  837. .ffb-element-dropzone-no .ffb-preview-heading-sm {
  838. font-size: 15px;
  839. line-height: 26px;
  840. font-weight: 300;
  841. margin: 3px 0 0 0;
  842. word-wrap: break-word;
  843. color: #23282d;
  844. }
  845.  
  846. .ffb-element-dropzone-no .ffb-preview-heading-sm span {
  847. background-color: #fafafa;
  848. padding: 0 10px;
  849. }
  850.  
  851. .ffb-element-dropzone-no .ffb-preview-text {
  852. font-size: 12px;
  853. line-height: 19px;
  854. margin: 6px 0 0 0;
  855. word-wrap: break-word;
  856. color: #808080;
  857. }
  858.  
  859. .ffb-element-dropzone-no .ffb-preview-image {
  860. display:block;
  861. max-width: 50%;
  862. max-height: 50px;
  863. height: auto;
  864. margin: 10px auto 0 auto;
  865. }
  866.  
  867. .ffb-element-dropzone-no .ffb-preview-divider {
  868. display:block;
  869. width: 50%;
  870. height: 1px;
  871. margin: 15px auto 0 auto;
  872. background-color: #23282d;
  873. }
  874.  
  875. .ffb-element-dropzone-no .ffb-preview-icon:first-child + .ffb-preview-divider:last-child {
  876. margin-top: -23px;
  877. margin-bottom: 22px;
  878. }
  879.  
  880. .ffb-element-dropzone-no .ffb-preview-heading-lg:first-child + .ffb-preview-divider:last-child {
  881. margin-top: -12px;
  882. margin-bottom: 11px;
  883. }
  884.  
  885. .ffb-element-dropzone-no .ffb-preview-button {
  886. margin: 20px 5px 0 5px;
  887. background-color: #f0f0f0;
  888. border-radius: 3px;
  889. display: inline-block;
  890. font-weight: 700;
  891. padding: 8px 15px;
  892. }
  893.  
  894. .ffb-element-dropzone-no .ffb-preview-text + .ffb-preview-heading-lg {
  895. margin-top: 5px;
  896. }
  897.  
  898. .ffb-element-dropzone-no .ffb-preview-image + .ffb-preview-text {
  899. margin-top: 15px;
  900. }
  901.  
  902. .ffb-element-dropzone-no .ffb-preview-icon + .ffb-preview-heading-sm {
  903. margin-top: 15px;
  904. }
  905.  
  906.  
  907. /* ELEMENT __ DROPZONE */
  908.  
  909. .ffb-dropzone {
  910. min-height: 100px;
  911. padding: 0 8px 16px 8px;
  912. }
  913.  
  914. .ffb-dropzone-canvas {
  915. min-height: 0;
  916. }
  917.  
  918. .ffb-dropzone-canvas:empty {
  919. /*margin-top: -6px;*/
  920. }
  921.  
  922. .ffb-dropzone-canvas:after {
  923. display: none !important;
  924. }
  925.  
  926. .ffb-dropzone:empty {
  927. cursor: pointer;
  928. position: relative;
  929. }
  930.  
  931. .ffb-dropzone:empty:after {
  932. content: ' ';
  933. position: absolute;
  934. top: 50%;
  935. left: 50%;
  936. width: 40px;
  937. height: 40px;
  938. margin: -20px 0 0 -20px;
  939. background-image: url('images/ffb-add-inside-dropzone2.png');
  940. background-repeat: no-repeat;
  941. background-position: 0 0;
  942. }
  943.  
  944. .ffbvr .ffb-dropzone:empty:after {
  945. background-image: url('images/ffbvr/ffb-add-inside-dropzone2.png');
  946. }
  947.  
  948. .ffb-dropzone:empty:hover:after {
  949. background-position: center;
  950. background-position: 0 -500px;
  951. }
  952.  
  953. .ffb-canvas .ui-sortable-placeholder {
  954. /*visibility: visible !important;*/
  955. /*background-color: rgba(91,188,46,0.2) !important;*/
  956. /*border: 1px dashed rgba(0,0,0,0.2) !important;*/
  957. /*max-height: 80px;*/
  958. /*transition: 1s height ease;*/
  959. /*-webkit-animation: none !important;
  960. animation: none !important;*/
  961. width: 100%;
  962. height: 0;
  963. position: relative;
  964. /*padding: 0 !important;
  965. margin: 0 !important;*/
  966. }
  967.  
  968. .ffb-canvas .ui-sortable-placeholder:after {
  969. content: ' ';
  970. display: block;
  971. position: absolute;
  972. top: 6px;
  973. left: 8px;
  974. width: calc(100% - 16px);
  975. height: 4px;
  976. background-color: #32d316;
  977. }
  978.  
  979. .ffbvr .ffb-canvas .ui-sortable-placeholder:after {
  980. background-color: #2eb515;
  981. }
  982.  
  983. .ffb-element-row > .ffb-dropzone > .ui-sortable-placeholder,
  984. .ffb-element-section > .ffb-dropzone > .ui-sortable-placeholder {
  985. width: 0;
  986. height: 0;
  987. float: left;
  988. }
  989.  
  990. .ffb-element-row > .ffb-dropzone > .ui-sortable-placeholder:after,
  991. .ffb-element-section > .ffb-dropzone > .ui-sortable-placeholder:after {
  992. width: 4px;
  993. top: 16px;
  994. left: -2px;
  995. }
  996.  
  997. .ffb-canvas > .ffb-dropzone > .ui-sortable-placeholder:first-child:after,
  998. .ffb-canvas > .ffb-dropzone > .ui-sortable-placeholder:first-child:after,
  999. .ffb-canvas > .ffb-dropzone > .ui-sortable-helper:first-child + .ui-sortable-placeholder:after,
  1000. .ffb-canvas > .ffb-dropzone > .ui-sortable-helper:first-child + .ui-sortable-placeholder:after {
  1001. top: -10px;
  1002. }
  1003.  
  1004. .ffb-element-row > .ffb-dropzone > .ui-sortable-placeholder:after,
  1005. .ffb-element-section > .ffb-dropzone > .ui-sortable-placeholder:after {
  1006. height: 127px;
  1007. }
  1008.  
  1009. .ffb-element-row > .ffb-dropzone > .ui-sortable-placeholder:first-child:last-child:after,
  1010. .ffb-element-section > .ffb-dropzone > .ui-sortable-placeholder:first-child:last-child:after,
  1011. .ffb-element-row > .ffb-dropzone > .ui-sortable-helper:first-child + .ui-sortable-placeholder:last-child:after,
  1012. .ffb-element-section > .ffb-dropzone > .ui-sortable-helper:first-child + .ui-sortable-placeholder:last-child:after {
  1013. height: 68px;
  1014. }
  1015.  
  1016.  
  1017. .ffb-canvas .ui-sortable-placeholder--cant-be-dropped {
  1018. background-color: #FFC6C6;
  1019. }
  1020.  
  1021. /* ELEMENT -- SECTION */
  1022.  
  1023. /*.ffb-element-section > .ffb-dropzone {
  1024. padding-right: 32px;
  1025. padding-left: 32px;
  1026. }*/
  1027.  
  1028. /* ELEMENT -- COLUMN */
  1029.  
  1030. .ffb-element-column {
  1031. min-height: 1px;
  1032. position: relative;
  1033. float: left;
  1034. }
  1035.  
  1036. .ffb-element-column-anim-width {
  1037. transition: 0.25s width ease;
  1038. }
  1039.  
  1040. /*
  1041. .ffb-element-column:first-child {
  1042. margin-left: 2%;
  1043. }
  1044.  
  1045. .ffb-element-column:last-child {
  1046. margin-right: 2%;
  1047. }
  1048. */
  1049. .ffb-element-col-1 { width: calc( 8.3% - 16.1px ); }
  1050. .ffb-element-col-2 { width: calc( 16.6% - 16.1px ); }
  1051. .ffb-element-col-3 { width: calc( 25% - 16.1px ); }
  1052. .ffb-element-col-4 { width: calc( 33.3% - 16.1px ); }
  1053. .ffb-element-col-5 { width: calc( 41.6% - 16.1px ); }
  1054. .ffb-element-col-6 { width: calc( 50% - 16.1px ); }
  1055. .ffb-element-col-7 { width: calc( 58.3% - 16.1px ); }
  1056. .ffb-element-col-8 { width: calc( 66.6% - 16.1px ); }
  1057. .ffb-element-col-9 { width: calc( 75% - 16.1px ); }
  1058. .ffb-element-col-10 { width: calc( 83.3% - 16.1px ); }
  1059. .ffb-element-col-11 { width: calc( 91.6% - 16.1px ); }
  1060. .ffb-element-col-12 { width: calc( 100% - 16.1px ); }
  1061.  
  1062. .ffb-element-adding-anim:after,
  1063. .ffb-element-removing-anim:after {
  1064. content: ' ';
  1065. display: block;
  1066. position: absolute;
  1067. top: 0;
  1068. right: 0;
  1069. bottom: 0;
  1070. left: 0;
  1071. /*background-color: rgba(250,250,250,0.5);*/
  1072. }
  1073.  
  1074.  
  1075.  
  1076. /*.ffb-element:hover {
  1077. border-color: red;
  1078. }
  1079.  
  1080. .ffb-element:hover .ffb-element:hover {
  1081. border-color: blue;
  1082. }*/
  1083.  
  1084.  
  1085. /* FFB GENERAL TOOLTIP */
  1086.  
  1087. .ffb-tooltip {
  1088. background-color: rgba(0,0,0,0.7) !important;
  1089. color: #ffffff !important;
  1090. margin-top: -8px;
  1091. min-width: 0;
  1092. border-radius: 2px;
  1093. padding: 3px 8px;
  1094. font-size: 11px;
  1095. margin-top: -34px;
  1096. white-space: nowrap;
  1097. position: relative;
  1098. }
  1099.  
  1100. .ffb-tooltip:after {
  1101. content: ' ';
  1102. position: absolute;
  1103. bottom: -10px;
  1104. left: 50%;
  1105. margin-left: -5px;
  1106. border-color: rgba(0,0,0,0.7) transparent transparent transparent;
  1107. border-style: solid;
  1108. border-width: 5px;
  1109. width: 0px;
  1110. height: 0px;
  1111. }
  1112.  
  1113. /* MODAL */
  1114.  
  1115. /* BLUR */
  1116.  
  1117. /* html.ffb-modal-opened #wpcontent,
  1118. html.ffb-modal-opened #adminmenumain,
  1119. html.ffb-modal-opened #wpfooter {
  1120. -webkit-filter: blur(3px);
  1121. -moz-filter: blur(3px);
  1122. filter: blur(3px);
  1123. }
  1124.  
  1125. html.ffb-modal-opened #adminmenuback,
  1126. html.ffb-modal-opened #adminmenuwrap {
  1127. margin-left: -15px;
  1128. padding-left: 15px;
  1129. }*/
  1130.  
  1131. .ffb-modal,
  1132. .ffb-modal * {
  1133. box-sizing: border-box;
  1134. }
  1135. .ffb-modal *::after,
  1136. .ffb-modal *::before {
  1137. box-sizing: border-box;
  1138. }
  1139.  
  1140. .ffb-modal {
  1141. display: none;
  1142. position: fixed;
  1143. top: 0;
  1144. right: 0;
  1145. bottom: 0;
  1146. left: 0;
  1147. background-color: rgba(0, 0, 0, 0.5);
  1148. z-index: 99998; /* 1 below wp admin bar */
  1149. }
  1150.  
  1151. .ffb-modal .ffb-modal {
  1152. background-color: rgba(0, 0, 0, 0.25);
  1153. }
  1154.  
  1155. .ffb-modal__vcenter-wrapper {
  1156. display: table;
  1157. width: 100%;
  1158. height: 100%;
  1159. }
  1160.  
  1161. .ffb-modal__vcenter {
  1162. display: table-cell;
  1163. vertical-align: middle;
  1164. width: 100%;
  1165. height: 100%;
  1166. }
  1167.  
  1168. .ffb-modal__box {
  1169. max-width: 1022px;
  1170. height: calc(100% - 80px);
  1171. position: relative;
  1172. margin: 20px auto 0 auto;
  1173. /*box-shadow: 5px 10px 60px rgba(0,0,0,0.3);*/
  1174. box-shadow: 5px 10px 100px rgba(0,0,0,0.4);
  1175. }
  1176.  
  1177. /*.ffb-modal__box .ffb-modal__box {
  1178. box-shadow: 5px 10px 100px rgba(0,0,0,0.4);
  1179. }
  1180. */
  1181. .ffb-modal__header {
  1182. position: absolute;
  1183. top: 0;
  1184. width: 100%;
  1185. background-color: #32d316;
  1186. color: #ffffff;
  1187. text-align: center;
  1188. line-height: 48px;
  1189. border-radius: 3px 3px 0 0;
  1190. }
  1191. .ffbvr .ffb-modal__header {
  1192. background-color: #2eb515;
  1193. }
  1194.  
  1195. .ffb-modal__header .ffb-modal__name {
  1196. padding: 25px 35px 25px 35px;
  1197. font-size: 30px;
  1198. text-align: left;
  1199. font-weight: 400;
  1200. }
  1201.  
  1202. .ffb-modal__header .ffb-modal__name span {
  1203. letter-spacing: 0.5px;
  1204. }
  1205.  
  1206. .ffb-modal__header span {
  1207. float: left;
  1208. }
  1209.  
  1210. .ffb-modal__header-icon-preview,
  1211. .ffb-modal__header-icon-close {
  1212. height: 48px;
  1213. line-height: 48px !important;
  1214. padding: 0 10px;
  1215. text-align: center;
  1216. opacity: 0.6;
  1217. font-size: 28px;
  1218. text-decoration: none;
  1219. color: #ffffff;
  1220. -webkit-box-shadow: none !important;
  1221. -moz-box-shadow: none !important;
  1222. -o-box-shadow: none !important;
  1223. -ms-box-shadow: none !important;
  1224. box-shadow: none !important;
  1225. }
  1226.  
  1227. .ffb-modal__header-icon-preview {
  1228. float: left;
  1229. margin: 0 5px 0 5px;
  1230. position: relative;
  1231. z-index: 3;
  1232. cursor: pointer;
  1233. }
  1234.  
  1235. .ffb-modal__header-icon-preview .ffb-modal__header-icon-preview-content {
  1236. display: none;
  1237. position: absolute;
  1238. top: 100%;
  1239. left: 100%;
  1240. box-shadow: 5px 10px 60px rgba(0,0,0,0.3);
  1241. pointer-events: none;
  1242. }
  1243.  
  1244. .ffb-modal__header-icon-preview:hover .ffb-modal__header-icon-preview-content {
  1245. display: block;
  1246. }
  1247.  
  1248. .ffb-modal__header-icon-preview-content img {
  1249. display: block;
  1250. height: auto;
  1251. max-width: 400px;
  1252. max-height: 300px;
  1253. }
  1254.  
  1255.  
  1256.  
  1257.  
  1258. .ffb-modal__button-image_preview .ffb-modal__header-icon-preview-content {
  1259. display: none;
  1260. position: absolute;
  1261. bottom: 140%;
  1262. left: 0;
  1263. box-shadow: 5px 10px 60px rgba(0,0,0,0.3);
  1264. pointer-events: none;
  1265. }
  1266.  
  1267. .ffb-modal__button-image_preview:hover .ffb-modal__header-icon-preview-content {
  1268. display: block;
  1269. }
  1270.  
  1271. .ffb-modal__button-image_preview .ffb-modal__header-icon-preview-content img {
  1272. display: block;
  1273. height: auto;
  1274. max-width: 400px;
  1275. max-height: 300px;
  1276. }
  1277.  
  1278.  
  1279.  
  1280.  
  1281.  
  1282. .ffb-modal__header-icon-close {
  1283. float: right;
  1284. margin: 0 -15px 0 0;
  1285. display: none !important;
  1286. }
  1287.  
  1288. .ffb-modal__header-icon-close {
  1289. position: relative;
  1290. line-height: 28px !important;
  1291. top: -3px;
  1292. right: -9px;
  1293. }
  1294.  
  1295. .ffb-modal__header-icon-preview:focus,
  1296. .ffb-modal__header-icon-close:focus {
  1297. color: #ffffff;
  1298. opacity: 0.4;
  1299. }
  1300.  
  1301. .ffb-modal__header-icon-preview:hover,
  1302. .ffb-modal__header-icon-close:hover {
  1303. opacity: 1;
  1304. color: #ffffff;
  1305. outline: none;
  1306. }
  1307.  
  1308. .ffb-modal__body {
  1309. position: absolute;
  1310. top: 98px;
  1311. right: 0;
  1312. left: 0;
  1313. bottom: 85px;
  1314. background-color: #ffffff;
  1315. }
  1316.  
  1317. .ffb-modal__footer {
  1318. position: absolute;
  1319. bottom: 0;
  1320. width: 100%;
  1321. background-color: #f5f5f5;
  1322. line-height: 84px;
  1323. text-align: right;
  1324. padding: 0 35px;
  1325. border-top: 1px solid #e5e5e5;
  1326. border-radius: 0 0 3px 3px;
  1327.  
  1328. -webkit-touch-callout: none; /* iOS Safari */
  1329. -webkit-user-select: none; /* Safari */
  1330. -khtml-user-select: none; /* Konqueror HTML */
  1331. -moz-user-select: none; /* Firefox */
  1332. -ms-user-select: none; /* Internet Explorer/Edge */
  1333. user-select: none; /* Non-prefixed version, currently
  1334. supported by Chrome and Opera */
  1335. }
  1336.  
  1337. .ffb-modal__footer .ffb-modal__button-image_preview,
  1338. .ffb-modal__footer .ffb-modal__button-save_all,
  1339. .ffb-modal__footer .ffb-modal__button-save,
  1340. .ffb-modal__footer .ffb-modal__button-cancel {
  1341. -webkit-transition: none !important;
  1342. -moz-transition: none !important;
  1343. -o-transition: none !important;
  1344. -ms-transition: none !important;
  1345. transition: none !important;
  1346. -webkit-box-shadow: none !important;
  1347. -moz-box-shadow: none !important;
  1348. -o-box-shadow: none !important;
  1349. -ms-box-shadow: none !important;
  1350. box-shadow: none !important;
  1351.  
  1352. padding: 12px 28px;
  1353. font-size: 14px;
  1354.  
  1355. -webkit-touch-callout: none; /* iOS Safari */
  1356. -webkit-user-select: none; /* Safari */
  1357. -khtml-user-select: none; /* Konqueror HTML */
  1358. -moz-user-select: none; /* Firefox */
  1359. -ms-user-select: none; /* Internet Explorer/Edge */
  1360. user-select: none; /* Non-prefixed version, currently
  1361. supported by Chrome and Opera */
  1362. }
  1363.  
  1364. .ffb-modal__footer .ffb-modal__button-image_preview {
  1365. display: inline-block;
  1366. line-height: 20px;
  1367. background-color: #ff00aa;
  1368. color: #ffffff;
  1369. text-decoration: none;
  1370. border-radius: 3px;
  1371. font-size: 22px;
  1372. padding-top: 9px;
  1373. padding-bottom: 9px;
  1374. line-height: 26px;
  1375. position: relative;
  1376. min-width: 70px;
  1377. cursor: help;
  1378.  
  1379. float: left;
  1380. margin-top: 20px;
  1381. margin-right: 8px;
  1382. }
  1383.  
  1384. .ffb-modal__footer .ffb-modal__button-image_preview:hover {
  1385. background-color: #ef009a;
  1386. }
  1387.  
  1388. .ffb-modal__footer .ffb-modal__button-image_preview i {
  1389. position: relative;
  1390. top: 1px;
  1391. }
  1392.  
  1393. .ffb-modal__footer .ffb-modal__button-save_all {
  1394. display: inline-block;
  1395. line-height: 20px;
  1396. background-color: #7154fc;
  1397. color: #ffffff;
  1398. text-decoration: none;
  1399. border-radius: 3px;
  1400.  
  1401. float: left;
  1402. margin-top: 20px;
  1403. }
  1404.  
  1405. .ffb-modal__footer .ffb-modal__button-save_all:hover {
  1406. background-color: #6144ec;
  1407. }
  1408.  
  1409. .ffb-modal__footer .ffb-modal__button-save {
  1410. display: inline-block;
  1411. line-height: 20px;
  1412. background-color: #32d316;
  1413. color: #ffffff;
  1414. text-decoration: none;
  1415. border-radius: 3px;
  1416. }
  1417.  
  1418. .ffbvr .ffb-modal__footer .ffb-modal__button-save {
  1419. background-color: #2eb515;
  1420. }
  1421.  
  1422. .ffb-modal__footer .ffb-modal__button-save:hover {
  1423. background-color: #22c306;
  1424. }
  1425.  
  1426. .ffbvr .ffb-modal__footer .ffb-modal__button-save:hover {
  1427. background-color: #1ea505;
  1428. }
  1429.  
  1430. .ffb-modal__footer .ffb-modal__button-cancel {
  1431. display: inline-block;
  1432. line-height: 20px;
  1433. background-color: #888888;
  1434. color: #ffffff;
  1435. text-decoration: none;
  1436. border-radius: 3px;
  1437. margin-left: 4px;
  1438. }
  1439. .ffb-modal__footer .ffb-modal__button-cancel:hover {
  1440. background-color: #777777;
  1441. }
  1442.  
  1443. .ffb-modal__tab-headers {
  1444. background-color: #32d316;
  1445. padding: 0 35px;
  1446. margin-top: -10px;
  1447.  
  1448. -webkit-touch-callout: none;
  1449. -webkit-user-select: none;
  1450. -moz-user-select: none;
  1451. -ms-user-select: none;
  1452. user-select: none;
  1453. }
  1454.  
  1455. .ffbvr .ffb-modal__tab-headers {
  1456. background-color: #2eb515;
  1457. }
  1458.  
  1459. .ffb-modal__tab-header {
  1460. padding: 17px 22px;
  1461. margin: 0 8px 0 0;
  1462. cursor: pointer;
  1463. float: left;
  1464. color: #ffffff;
  1465. border-radius: 3px 3px 0 0;
  1466. font-size: 13px;
  1467. font-weight: 600;
  1468. position: relative;
  1469. /*background-color: #22c306;*/
  1470. background-color: rgba(255,255,255,0.15);
  1471. }
  1472.  
  1473. .ffb-modal__tab-header:hover {
  1474. /*background-color: #12b300;*/
  1475. background-color: rgba(255,255,255,0.25);
  1476. }
  1477.  
  1478. .ffb-modal__tab-header.ffb-modal__tab-header--active,
  1479. .ffb-modal__tab-header.ffb-modal__tab-header--active:hover {
  1480. background-color: #ffffff;
  1481. /*color: #12b300;*/
  1482. color: #444444;
  1483. z-index: 1;
  1484. }
  1485.  
  1486. /*.ffb-modal__tab-header--filled.ffb-modal__tab-header--active:before,
  1487. .ffb-modal__tab-header--filled:before {
  1488. content: ' ';
  1489. display: inline-block;
  1490. position: relative;
  1491. top: 1px;
  1492. width: 11px;
  1493. height: 11px;
  1494. border-radius: 99px;
  1495. background-color: #ff00aa;
  1496. margin-right: 7px;
  1497. }*/
  1498. /*
  1499. .ffb-modal__tab-header--filled-global {
  1500. color:red;
  1501. }
  1502. */
  1503. .ffb-modal__tab-header--filled.ffb-modal__tab-header--active:before,
  1504. .ffb-modal__tab-header--filled:before,
  1505. .ffb-modal__tab-header--filled-global.ffb-modal__tab-header--active:after,
  1506. .ffb-modal__tab-header--filled-global:after {
  1507. content: 'EDIT';
  1508. letter-spacing: 0.2px;
  1509. display: block;
  1510. position: absolute;
  1511. top: -8px;
  1512. right: -5px;
  1513. padding: 0 6px;
  1514. height: 16px;
  1515. line-height: 16px;
  1516. text-align: center;
  1517. border-radius: 99px;
  1518. z-index: 1;
  1519. background-color: #ff00aa;
  1520. color: #ffffff;
  1521. font-weight: 500;
  1522. opacity: 0.5;
  1523. font-size: 10px;
  1524. }
  1525.  
  1526. .ffb-modal__tab-header--filled.ffb-modal__tab-header--active:before,
  1527. .ffb-modal__tab-header--filled-global.ffb-modal__tab-header--active:after{
  1528. opacity: 1;
  1529. }
  1530.  
  1531. .ffb-modal__tab-header--filled-global.ffb-modal__tab-header--active:after,
  1532. .ffb-modal__tab-header--filled-global:after {
  1533. /*background-position: -48px -48px;*/
  1534. content: 'GLB';
  1535. background-color: rgba(70,70,255,1);
  1536. }
  1537.  
  1538. .ffb-modal__tab-header--filled.ffb-modal__tab-header--filled-global.ffb-modal__tab-header--active:before,
  1539. .ffb-modal__tab-header--filled.ffb-modal__tab-header--filled-global:before {
  1540. right: 31px;
  1541. }
  1542.  
  1543. .ffb-modal__tab-header--filled.ffb-modal__tab-header--active,
  1544. .ffb-modal__tab-header--filled.ffb-modal__tab-header--active:hover {
  1545. /*color: #ff00aa;*/
  1546. /*color: #444444;*/
  1547. /*box-shadow: inset 0 3px 0 0 #ff00aa;*/
  1548. }
  1549.  
  1550. /*
  1551. .ffb-modal__tab-header--filled.ffb-modal__tab-header--active,
  1552. .ffb-modal__tab-header--filled.ffb-modal__tab-header--active:hover {
  1553. color: #ff00aa;
  1554. }
  1555.  
  1556. .ffb-modal__tab-header--filled {
  1557. background-color: #ff00aa;
  1558. }
  1559.  
  1560. .ffb-modal__tab-header--filled:hover {
  1561. background-color: #ef009a;
  1562. }
  1563.  
  1564. */
  1565.  
  1566. .ffb-modal__tab-header:last-child {
  1567. margin-right: 0;
  1568. }
  1569.  
  1570. .ffb-modal__tab-header[data-tab-header-name="Styles"]:not(:first-child) {
  1571. margin-left: 16px;
  1572. }
  1573.  
  1574. .ffb-modal__tab-header[data-tab-header-name="Styles"] {
  1575. margin-right: 24px;
  1576. }
  1577.  
  1578. .ffb-modal__tab-content {
  1579. display: none;
  1580. }
  1581.  
  1582. .ffb-modal__tab-content.ffb-modal__tab-content--active {
  1583. display: block;
  1584. }
  1585.  
  1586. .ffb-modal__content--options {
  1587. padding: 15px 0 0 0;
  1588. overflow-y: auto;
  1589. overflow-x: hidden;
  1590. position: absolute;
  1591. top: 42px;
  1592. right: 0;
  1593. bottom: 0;
  1594. left: 0;
  1595. }
  1596.  
  1597. .ffb-modal__content--options:after {
  1598. content: ' ';
  1599. display: block;
  1600. width: 100%;
  1601. height: 40px;
  1602. }
  1603.  
  1604.  
  1605. .ffb-modal__content-system > .ffb-modal__content--options {
  1606. top: 113px;
  1607. }
  1608.  
  1609. .ffb-modal__hide-global-styles .ffb-modal__content-system > .ffb-modal__content--options
  1610.  
  1611. {
  1612. top: 42px;
  1613. }
  1614.  
  1615. .ffb-modal .ff-repeatable-header .ff-popup-container {
  1616. top: 28px !important;
  1617. }
  1618.  
  1619. .ffb-modal .ffb-modal__tab-content[data-id="st"] .ffb-modal__content--options {
  1620. top:42px;
  1621. }
  1622.  
  1623. .ffb-modal .ffb-modal__tab-content[data-id="st"] .ffb-gl-switcher-holder {
  1624. display:none;
  1625. }
  1626.  
  1627. /* INSTANCE/GLOBAL */
  1628.  
  1629. .ffb-modal__content-system > .ffb-gl-switcher-holder {
  1630. border-bottom: 1px solid #e5e5e5;
  1631. padding: 17px 31px 0 31px;
  1632. text-align: left;
  1633.  
  1634. -webkit-touch-callout: none;
  1635. -webkit-user-select: none;
  1636. -moz-user-select: none;
  1637. -ms-user-select: none;
  1638. user-select: none;
  1639. }
  1640.  
  1641. .ffb-modal__global-styles .ffb-modal__content-system .ffb-gl-switcher-holder {
  1642. display:none;
  1643. }
  1644.  
  1645. .ffb-modal__global-styles .ffb-modal__content--options {
  1646. top:42px;
  1647. }
  1648.  
  1649. .ffb-modal__content-system > .ffb-gl-switcher-holder .ffb-switch-to {
  1650. display: inline-block;
  1651. text-align: center;
  1652. font-size: 13px;
  1653. font-weight: 600;
  1654. margin: 0 4px -1px 4px;
  1655. padding: 17px 44px; /*17px 44px*/
  1656. background-color: #f9f9f9;
  1657. border: 1px solid transparent;
  1658. border-bottom-color: #e5e5e5;
  1659. /*color: #919191;*/
  1660. cursor: pointer;
  1661. }
  1662.  
  1663. .ffb-modal__content-system > .ffb-gl-switcher-holder .ffb-switch-to:hover {
  1664. /*color: #444444;*/
  1665. background-color: #f4f4f4;
  1666. }
  1667.  
  1668. .ffb-modal__content-system > .ffb-gl-switcher-holder .ffb-switch-to--active {
  1669. background-color: #ffffff !important;
  1670. border: 1px solid #e5e5e5;
  1671. border-top-color: #e5e5e5;
  1672. border-right-color: #e5e5e5;
  1673. border-bottom-color: #ffffff;
  1674. border-left-color: #e5e5e5;
  1675. border-radius: 3px 3px 0 0;
  1676. color: #444444 !important;
  1677. }
  1678.  
  1679. .ffb-modal__content-system > .ffb-save-bar {
  1680. position: absolute;
  1681. bottom: 0;
  1682. }
  1683.  
  1684. .ffb-modal__content-system > .ffb-save-bar {
  1685. width: 100%;
  1686. height: 0;
  1687. }
  1688.  
  1689. .ffb-modal__content-system > .ffb-save-bar .ffb-save-bar-btn {
  1690. display: inline-block;
  1691. text-align: center;
  1692. line-height: 20px;
  1693. background-color: #888888;
  1694. color: #ffffff;
  1695. text-decoration: none;
  1696. border-radius: 3px;
  1697. margin: 15px;
  1698. padding: 12px 28px;
  1699. font-size: 14px;
  1700. cursor: pointer;
  1701. position: absolute;
  1702. bottom: 10px;
  1703. }
  1704.  
  1705. .ffb-modal__content-system > .ffb-save-bar .ffb-save-bar-btn:hover {
  1706. background-color: #777777;
  1707. }
  1708.  
  1709. .ffb-modal__content-system > .ffb-save-bar .ffb-save-global-button {
  1710. background-color: #7154fc;
  1711. left: 20px;
  1712. }
  1713.  
  1714. .ffb-modal__content-system > .ffb-save-bar .ffb-save-global-button:hover {
  1715. background-color: #6144ec;
  1716. }
  1717.  
  1718. .ffb-modal__content-system > .ffb-save-bar .ffb-cancel-global-button {
  1719. right: 20px;
  1720. }
  1721.  
  1722.  
  1723. /* MOVE INTO JAVASCRIPT */
  1724.  
  1725. .action-column-bigger,
  1726. .action-column-smaller {
  1727. display: none;
  1728. }
  1729.  
  1730. .ffb-element-column > .ffb-header .action-column-bigger,
  1731. .ffb-element-column > .ffb-header .action-column-smaller {
  1732. display: block;
  1733. }
  1734.  
  1735. .ffb-element-section > .ffb-element-preview,
  1736. .ffb-element-row > .ffb-element-preview,
  1737. .ffb-element-column > .ffb-element-preview {
  1738. display: none;
  1739. }
  1740.  
  1741. .action-add-element {
  1742. /*display: none;*/
  1743. }
  1744.  
  1745. .ffb-element-section > .ffb-header .action-add-element,
  1746. .ffb-element-container > .ffb-header .action-add-element,
  1747. .ffb-element-row > .ffb-header .action-add-element,
  1748. .ffb-element-column > .ffb-header .action-add-element {
  1749. display: block;
  1750. }
  1751.  
  1752. /* FILTERABLE LIBRARY */
  1753.  
  1754. .ffb-filterable-library {
  1755. overflow: hidden;
  1756. position: absolute;
  1757. top: 0;
  1758. right: 0;
  1759. bottom: 0;
  1760. left: 0;
  1761. }
  1762. /*
  1763. .ffb-filterable-library:before {
  1764. content: '';
  1765. display: block;
  1766. width: 30%;
  1767. height: 100%;
  1768. position: absolute;
  1769. top: 0;
  1770. bottom: 0;
  1771. left: 0;
  1772. background-color: #fafafa;
  1773. border-right: 1px solid #dddddd;
  1774. left: 1px;
  1775. }*/
  1776.  
  1777. .ffb-filterable-library ul,
  1778. .ffb-filterable-library li {
  1779. list-style: none;
  1780. padding: 0;
  1781. margin: 0;
  1782. }
  1783.  
  1784. ul.ffb-filterable-library__filters {
  1785. width: 280px;
  1786. position: absolute;
  1787. top: 0;
  1788. bottom: 0;
  1789. left: 0;
  1790. overflow-y: auto;
  1791. overflow-x: hidden;
  1792. padding: 26px 0 26px 0;
  1793. background-color: #ffffff;
  1794. }
  1795.  
  1796. ul.ffb-filterable-library__filters:after {
  1797. content: ' ';
  1798. float: left;
  1799. width: 100%;
  1800. height: 60px;
  1801.  
  1802. display: none;
  1803. }
  1804.  
  1805. ul.ffb-filterable-library__filters li {
  1806. background-color: #ffffff;
  1807. /*border-bottom: 1px solid #dddddd;*/
  1808. cursor: pointer;
  1809. font-weight: 500;
  1810. padding: 6px 10px 6px 44px;
  1811. /*font-size: 14px;*/
  1812. }
  1813.  
  1814. ul.ffb-filterable-library__filters li:first-child {
  1815. /*border-top: 1px solid #dddddd;*/
  1816. }
  1817.  
  1818. ul.ffb-filterable-library__filters li:hover{
  1819. background-color: #f5f5f5;
  1820. border-right: none;
  1821. }
  1822.  
  1823. ul.ffb-filterable-library__filters li.ffb-filterable-library__filter--active {
  1824. background-color: #32d316;
  1825. color: #ffffff;
  1826. border-right: none;
  1827. }
  1828.  
  1829. .ffbvr ul.ffb-filterable-library__filters li.ffb-filterable-library__filter--active {
  1830. background-color: #2eb515;
  1831. }
  1832.  
  1833. .ffb-filterable-library__top-bar {
  1834. width: calc(100% - 280px);
  1835. height: 76px;
  1836. position: absolute;
  1837. top: 0;
  1838. right: 0;
  1839. bottom: 0;
  1840. z-index: 1;
  1841. border-left: 1px solid #dddddd;
  1842. border-bottom: 1px solid rgba(0,0,0,0.1) !important
  1843. }
  1844.  
  1845. input.ffb-filterable-library__search {
  1846. -webkit-box-shadow: none !important;
  1847. -moz-box-shadow: none !important;
  1848. -o-box-shadow: none !important;
  1849. -ms-box-shadow: none !important;
  1850. box-shadow: none !important;
  1851. width: 100%;
  1852. height: 74px;
  1853. line-height: 74px !important;
  1854. padding: 0 34px;
  1855. margin: 0;
  1856. font-size: 24px !important;
  1857. font-weight: 300;
  1858. border: none;
  1859. /*border-bottom: 1px solid #dddddd;*/
  1860. /*color: #999999;*/
  1861. }
  1862.  
  1863. input.ffb-filterable-library__search:focus {
  1864. border-color: #dddddd;
  1865. }
  1866.  
  1867. input.ffb-filterable-library__search::-webkit-input-placeholder {
  1868. color: #aaaaaa;
  1869. }
  1870.  
  1871. input.ffb-filterable-library__search::-moz-placeholder {
  1872. color: #aaaaaa;
  1873. opacity: 1;
  1874. }
  1875. input.ffb-filterable-library__search:-ms-input-placeholder {
  1876. color: #aaaaaa;
  1877. }
  1878.  
  1879. .ffb-filterable-library__content {
  1880. background: #fafafa;
  1881. width: calc(100% - 280px);
  1882. position: absolute;
  1883. top: 75px;
  1884. bottom: 0;
  1885. right: 0;
  1886. padding: 15px;
  1887. overflow-y: auto;
  1888. overflow-x: hidden;
  1889. border-left: 1px solid #dddddd;
  1890. }
  1891.  
  1892. .ffb-filterable-library__content:after {
  1893. content: ' ';
  1894. float: left;
  1895. width: 100%;
  1896. height: 60px;
  1897. }
  1898.  
  1899. .ffb-filterable-library__content .ffb-flib-item {
  1900. /*float: left;*/
  1901. display: inline-block;
  1902. vertical-align: top;
  1903. width: calc(25% - 40px);
  1904. text-align: center;
  1905. margin: 20px;
  1906. cursor: pointer;
  1907. font-size: 16px;
  1908. line-height: 30px;
  1909. }
  1910.  
  1911. .ffb-filterable-library__content .ffb-flib-item:hover {
  1912. color: #22c306;
  1913. }
  1914.  
  1915. .ffbvr .ffb-filterable-library__content .ffb-flib-item:hover {
  1916. color: #1ea505;
  1917. }
  1918.  
  1919. .ffb-filterable-library__content .ffb-flib-item.ffb-flib--width-0 {
  1920. width: calc(20% - 40px);
  1921. }
  1922.  
  1923. .ffb-filterable-library__content .ffb-flib-item.ffb-flib--width-2 {
  1924. width: calc(50% - 40px);
  1925. }
  1926.  
  1927. .ffb-filterable-library__content .ffb-flib-item.ffb-flib--width-3 {
  1928. width: calc(75% - 40px);
  1929. }
  1930.  
  1931. .ffb-filterable-library__content .ffb-flib-item.ffb-flib--width-4 {
  1932. width: calc(100% - 40px);
  1933. }
  1934.  
  1935. .ffb-filterable-library__content .ffb-flib-item[data-type="section"] {
  1936. width: calc(50% - 40px);
  1937. }
  1938.  
  1939. .ffb-filterable-library__content .ffb-flib-item img {
  1940. width:100%;
  1941. height: auto;
  1942. display: block;
  1943. border: 4px solid #ffffff;
  1944. box-shadow: 0px 2px 7px rgba(0,0,0,0.15);
  1945. /*border-radius: 2px;*/
  1946. margin: 0 0 14px 0;
  1947. }
  1948.  
  1949. .ffb-filterable-library__content .ffb-flib-item:hover img {
  1950. border-color: #32d316;
  1951. }
  1952.  
  1953. .ffbvr .ffb-filterable-library__content .ffb-flib-item:hover img {
  1954. border-color: #2eb515;
  1955. }
  1956.  
  1957. /* FF OPTIONS STYLE OVERWRITE */
  1958.  
  1959. .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header .ff-repeatable-title {
  1960. font-size: 12px;
  1961. padding: 7px 10px 6px 10px;
  1962. cursor: pointer;
  1963. }
  1964.  
  1965. .ffb-options .form-table,
  1966. .ffb-options .form-table td,
  1967. .ffb-options .form-table td p,
  1968. .ffb-options .form-table th,
  1969. .ffb-options .form-wrap label {
  1970. font-size: 12px;
  1971. }
  1972.  
  1973. .ffb-options .column-title{
  1974. font-size: 13px;
  1975. margin-top: 5px;
  1976. }
  1977.  
  1978.  
  1979. .ffb-options input,
  1980. .ffb-options select,
  1981. .ffb-options textarea {
  1982. font-size: 12px;
  1983. -webkit-border-radius: 0px !important;
  1984. border-radius: 0px !important;
  1985. }
  1986. /*
  1987. .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-controls-top > .ff-repeatable-add-above,
  1988. .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-controls-bottom > .ff-repeatable-add-below {
  1989. display: none;
  1990. }
  1991.  
  1992. .ffb-options .ff-repeatable-boxed > .ff-repeatable-item:last-child > .ff-repeatable-controls-bottom > .ff-repeatable-add-below {
  1993. display: block;
  1994. }
  1995.  
  1996. .ffb-options .ff-repeatable-boxed {
  1997. -webkit-box-shadow: none !important;
  1998. -moz-box-shadow: none !important;
  1999. -o-box-shadow: none !important;
  2000. -ms-box-shadow: none !important;
  2001. box-shadow: none !important;
  2002. background-color: #f5f5f5;
  2003. padding: 20px 20px 60px 20px;
  2004. }
  2005.  
  2006. .ffb-options .ff-repeatable-boxed .ff-repeatable-header {
  2007. -webkit-box-shadow: none !important;
  2008. -moz-box-shadow: none !important;
  2009. -o-box-shadow: none !important;
  2010. -ms-box-shadow: none !important;
  2011. box-shadow: none !important;
  2012. background-color: #fafafa !important;
  2013. border: 1px solid #dddddd !important;;
  2014. margin: 0 !important;
  2015. }
  2016.  
  2017. .ffb-options .ff-repeatable-boxed .ff-repeatable-content {
  2018. -webkit-box-shadow: none !important;
  2019. -moz-box-shadow: none !important;
  2020. -o-box-shadow: none !important;
  2021. -ms-box-shadow: none !important;
  2022. box-shadow: none !important;
  2023. background-color: #ffffff !important;
  2024. border: 1px solid #dddddd !important;
  2025. border-top: none !important;
  2026. }
  2027.  
  2028. .ffb-options .ff-repeatable-boxed .ff-repeatable-item {
  2029. -webkit-box-shadow: none !important;
  2030. -moz-box-shadow: none !important;
  2031. -o-box-shadow: none !important;
  2032. -ms-box-shadow: none !important;
  2033. box-shadow: none !important;
  2034. margin: 0 0 15px 0 !important;
  2035. }
  2036. */
  2037. .ffb-options .form-table {
  2038. margin: 0;
  2039. padding: 0;
  2040. }
  2041.  
  2042. .ffb-options .form-table th {
  2043. width: 220px;
  2044. /*padding: 30px 0 35px 50px;*/
  2045. padding: 40px 0 40px 60px;
  2046. font-size: 13px !important;
  2047. line-height: 1.5;
  2048. /*font-weight: 100;*/
  2049. }
  2050.  
  2051. .ffb-options .form-table td {
  2052. /*padding: 21px 50px 35px 50px;*/
  2053. padding: 31px 60px 31px 60px;
  2054. }
  2055.  
  2056. .ffb-options .form-table tr {
  2057. border-bottom: 1px solid #eeeeee;
  2058. }
  2059.  
  2060. .ffb-options .form-table tr:last-child {
  2061. border-bottom: none;
  2062. }
  2063.  
  2064. .ffb-options select,
  2065. .ffb-options input[type='text'],
  2066. .ffb-options input[type='number'],
  2067. .ffb-options textarea {
  2068. min-width: 190px;
  2069. margin-right: 6px;
  2070. margin-left: 0;
  2071. line-height: 20px;
  2072. }
  2073.  
  2074. .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-handle,
  2075. .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-settings,
  2076. .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-show-advanced-tools {
  2077. border-left: 1px solid #dddddd;
  2078. }
  2079.  
  2080. .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-show-advanced-tools {
  2081. cursor: pointer;
  2082. position: absolute;
  2083. top: 0;
  2084. color: #aaaaaa;
  2085. height: 43px;
  2086. line-height: 43px;
  2087. margin: 0;
  2088. padding: 0;
  2089. right: 60px;
  2090. font-size: 18px;
  2091. width: 26px;
  2092. }
  2093.  
  2094. .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header:hover > .ff-repeatable-handle {
  2095. color: #aaaaaa;
  2096. }
  2097.  
  2098. .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-handle {
  2099. right: 0;
  2100. }
  2101.  
  2102. .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-handle:after {
  2103. position: relative;
  2104. left: -1px;
  2105. }
  2106.  
  2107. .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-settings {
  2108. right: 0px;
  2109. }
  2110.  
  2111. .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-settings:after {
  2112. position: relative;
  2113. left: -1px;
  2114. }
  2115.  
  2116. .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-show-advanced-tools {
  2117. right: 29px;
  2118. }
  2119.  
  2120. .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-show-advanced-tools:after {
  2121.  
  2122. }
  2123.  
  2124. .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-handle:hover,
  2125. .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-settings:hover,
  2126. .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-show-advanced-tools:hover {
  2127. background-color: #ffffff;
  2128. color: #000000;
  2129. }
  2130.  
  2131. .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-handle,
  2132. .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-handle:before,
  2133. .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-handle:after,
  2134. .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-settings,
  2135. .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-settings:before,
  2136. .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-settings:after,
  2137. .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-show-advanced-tools,
  2138. .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-settings:before,
  2139. .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-settings:after {
  2140. width: 28px;
  2141. height: 28px;
  2142. line-height: 28px;
  2143. font-size: 14px;
  2144. }
  2145.  
  2146. .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-handle,
  2147. .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-handle:before,
  2148. .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-handle:after {
  2149. font-size: 24px;
  2150. }
  2151.  
  2152. .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header .ff-repeatable-title {
  2153. line-height: 15px;
  2154. }
  2155.  
  2156. .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-handle,
  2157. .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-settings,
  2158. .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-show-advanced-tools {
  2159. display: none;
  2160. }
  2161.  
  2162. .ffb-options .ff-repeatable-boxed > .ff-repeatable-item:hover > .ff-repeatable-header > .ff-repeatable-handle,
  2163. .ffb-options .ff-repeatable-boxed > .ff-repeatable-item:hover > .ff-repeatable-header > .ff-repeatable-settings,
  2164. .ffb-options .ff-repeatable-boxed > .ff-repeatable-item:hover > .ff-repeatable-header > .ff-show-advanced-tools {
  2165. display: block;
  2166. }
  2167.  
  2168. .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-show-advanced-tools--active {
  2169. display: block;
  2170. /*background-color: #ffc107;*/
  2171. color: #32d316 !important;
  2172. /*border-color: transparent;*/
  2173. background-position: -46px -86px !important;
  2174. }
  2175.  
  2176. .ffbvr .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-show-advanced-tools--active {
  2177. color: #2eb515 !important;
  2178. }
  2179.  
  2180. .ffb-options .ff-repeatable-boxed > .ff-repeatable-item:not(:hover) > .ff-repeatable-header > .ff-show-advanced-tools--active {
  2181. /*right: 0;*/
  2182. /*box-shadow: 1px 0 0 0 #dddddd; NOLINES */
  2183. }
  2184.  
  2185. .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-handle {
  2186. right: auto;
  2187. border-left: none !important;
  2188. border-right: 1px solid #dddddd;
  2189. display: block;
  2190. }
  2191.  
  2192. .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header .ff-repeatable-title {
  2193. position: relative;
  2194. left: 29px;
  2195. }
  2196.  
  2197. .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-handle,
  2198. .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-settings,
  2199. .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-show-advanced-tools {
  2200. background-image: url('images/ffb-header-icons5.png');
  2201. background-repeat: no-repeat;
  2202. }
  2203.  
  2204. .ffbvr .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-handle,
  2205. .ffbvr .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-settings,
  2206. .ffbvr .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-show-advanced-tools {
  2207. background-image: url('images/ffbvr/ffb-header-icons5.png');
  2208. }
  2209.  
  2210. .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-handle:before,
  2211. .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-handle:after,
  2212. .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-settings:before,
  2213. .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-settings:after,
  2214. .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-show-advanced-tools:before,
  2215. .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-show-advanced-tools:after {
  2216. display: none;
  2217. }
  2218.  
  2219.  
  2220.  
  2221. .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-show-advanced-tools {
  2222. background-position: -46px -6px;
  2223. }
  2224.  
  2225. .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-settings {
  2226. background-position: -86px -6px;
  2227. }
  2228.  
  2229. .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-handle {
  2230. background-position: -286px -6px;
  2231. }
  2232.  
  2233. .ffb-options .ff-repeatable-boxed > .ff-repeatable-item-closed > .ff-repeatable-header > .ff-repeatable-handle {
  2234. background-position: -326px -6px;
  2235. }
  2236.  
  2237. .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-show-advanced-tools:hover {
  2238. background-position: -46px -46px;
  2239. }
  2240.  
  2241. .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-settings:hover {
  2242. background-position: -86px -46px;
  2243. }
  2244.  
  2245. .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-handle:hover {
  2246. background-position: -286px -46px;
  2247. }
  2248.  
  2249. .ffb-options .ff-repeatable-boxed > .ff-repeatable-item-closed > .ff-repeatable-header > .ff-repeatable-handle:hover {
  2250. background-position: -326px -46px;
  2251. }
  2252.  
  2253.  
  2254.  
  2255.  
  2256. .ffb-options .ff-repeatable-handle,
  2257. .ffb-options .ff-repeatable-settings,
  2258. .ffb-options .ff-show-advanced-tools {
  2259. border-left: none !important;
  2260. border-right: none !important;
  2261. }
  2262.  
  2263.  
  2264.  
  2265. .ffb-options .ff-popup-backdrop {
  2266. cursor: default;
  2267. }
  2268.  
  2269. .ffb-options .ff-repeatable-boxed .ff-repeatable-header {
  2270. }
  2271. /*
  2272. .ffb-options .ff-repeatable-boxed > .ff-repeatable-item.ui-sortable-helper.ff-repeatable-item-closed > .ff-repeatable-header {
  2273. margin: 0;
  2274. -webkit-box-shadow: none !important;
  2275. -moz-box-shadow: none !important;
  2276. -o-box-shadow: none !important;
  2277. -ms-box-shadow: none !important;
  2278. box-shadow: none !important;
  2279. }
  2280.  
  2281. .ffb-options .ff-repeatable-boxed > .ff-repeatable-item.ui-sortable-helper.ff-repeatable-item-opened {
  2282. -webkit-box-shadow: none !important;
  2283. -moz-box-shadow: none !important;
  2284. -o-box-shadow: none !important;
  2285. -ms-box-shadow: none !important;
  2286. box-shadow: none !important;
  2287. }
  2288.  
  2289. .ffb-options .ff-repeatable-boxed > .ff-repeatable-item.ui-sortable-helper.ff-repeatable-item-opened > .ff-repeatable-header {
  2290. margin: 0;
  2291. -webkit-box-shadow: none !important;
  2292. -moz-box-shadow: none !important;
  2293. -o-box-shadow: none !important;
  2294. -ms-box-shadow: none !important;
  2295. box-shadow: none !important;
  2296. }
  2297.  
  2298.  
  2299. .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-controls-bottom {
  2300. top: 105%;
  2301. }
  2302.  
  2303. .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-controls-bottom > .ff-repeatable-add-below {
  2304. border-radius: 5px;
  2305. background-color: #ddd;
  2306. width: 30px;
  2307. height: 30px;
  2308. line-height: 30px;
  2309. }
  2310.  
  2311. .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-controls-bottom > .ff-repeatable-add-below:before {
  2312. content: '\f132';
  2313. -moz-osx-font-smoothing: grayscale;
  2314. display: inline-block;
  2315. font-family: 'dashicons';
  2316. font-size: 20px;
  2317. font-style: normal;
  2318. font-weight: 400;
  2319. height: 20px;
  2320. line-height: 1;
  2321. text-align: center;
  2322. text-decoration: inherit;
  2323. vertical-align: top;
  2324. width: 20px;
  2325. background: none;
  2326. border-radius: 0;
  2327. position: static !important;
  2328. }
  2329.  
  2330. .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-controls-bottom > .ff-repeatable-add-below:after {
  2331. display: none;
  2332. }
  2333. */
  2334.  
  2335. .ffb-options p.description code {
  2336. padding: 1px 6px;
  2337. font-size: 11px;
  2338. font-style: normal;
  2339. }
  2340.  
  2341. .ffb-options input.input-short {
  2342. width: 80px;
  2343. max-width: auto;
  2344. min-width: 0;
  2345. }
  2346.  
  2347. .ffb-options select.select-short {
  2348. width: 80px;
  2349. max-width: auto;
  2350. min-width: 0;
  2351. }
  2352.  
  2353. .ffb-options input::-webkit-input-placeholder {
  2354. color: #aaaaaa;
  2355. }
  2356.  
  2357. .ffb-options input::-moz-placeholder {
  2358. color: #aaaaaa;
  2359. opacity: 1;
  2360. }
  2361. .ffb-options input:-ms-input-placeholder {
  2362. color: #aaaaaa;
  2363. }
  2364.  
  2365. .ffb-options table.ffb-box-model-table th {
  2366. }
  2367.  
  2368. .ffb-options table.ffb-box-model-table td {
  2369. border: none;
  2370. }
  2371.  
  2372. .ffb-options table.ffb-box-model-table th,
  2373. .ffb-options table.ffb-box-model-table td {
  2374. padding: 2px 3px;
  2375. }
  2376. .ffb-options table.ffb-box-model-table input,
  2377. .ffb-options table.ffb-box-model-table select {
  2378. width: 120px;
  2379. height: 28px;
  2380. }
  2381.  
  2382. .ffb-options table.ffb-box-model-table input,
  2383. .ffb-options table.ffb-box-model-table select,
  2384. .ffb-options table.ffb-box-model-table label {
  2385. margin: 0 !important;
  2386. }
  2387.  
  2388. .ffb-options .ff-open-icon-library-button-wrapper,
  2389. .ffb-options .ff-open-image-library-button-wrapper {
  2390. display: inline-block;
  2391. position: relative;
  2392. }
  2393.  
  2394. .ffb-options .ff-open-icon-library-button-wrapper .ff-open-library-remove,
  2395. .ffb-options .ff-open-icon-library-button-wrapper-new .ff-open-library-remove{
  2396. top: 5px;
  2397. left: -26px;
  2398. }
  2399.  
  2400. .ffb-options .ff-open-image-library-button-wrapper .ff-open-library-remove,
  2401. .ffb-options .ff-open-image-library-button-wrapper-new .ff-open-library-remove{
  2402. top: -1px;
  2403. left: -26px;
  2404. }
  2405.  
  2406. .ffb-options a.ff-open-library-button.ff-open-library-icon-button{
  2407. vertical-align: middle;
  2408. margin: 4px 6px 4px 0;
  2409. }
  2410.  
  2411. .ffb-options .ff-open-library-button-preview,
  2412. .ffb-options .ff-open-library-button-title {
  2413. height: 28px;
  2414. }
  2415.  
  2416. .ffb-options .ff-open-library-remove {
  2417. position: absolute;
  2418. top: 26px;
  2419. left: -1px;
  2420. padding-right: 3px;
  2421. visibility: visible !important;
  2422. opacity: 0;
  2423. }
  2424.  
  2425. .ffb-options .ff-open-image-library-button-wrapper .ff-open-library-remove:before {
  2426. margin-top: 6px;
  2427. }
  2428.  
  2429. .ffb-options .ff-open-icon-library-button-wrapper:hover .ff-open-library-remove,
  2430. .ffb-options .ff-open-library-button-wrapper:hover .ff-open-library-remove {
  2431. opacity: 1;
  2432. }
  2433.  
  2434. /* ADVANCED SETTINGS MODAL */
  2435.  
  2436. .ffb-modal-nested {
  2437. display:none;
  2438. }
  2439.  
  2440. .ffb-options .ff-repeatable-item-closed__open-popup > .ff-repeatable-content {
  2441. height: 0px;
  2442. padding: 0;
  2443. display: block !important;
  2444. overflow: hidden;
  2445. }
  2446.  
  2447. .ffb-options .ff-advanced-options .ffb-modal__box {
  2448. height: calc(100% - 80px);
  2449. position: relative;
  2450. left: 1.618%;
  2451. top: -1%;
  2452. }
  2453.  
  2454. .ffb-options .ffb-modal-opener-button {
  2455. display: none;
  2456. }
  2457.  
  2458. #post-body-content {
  2459. /*height:0px;*/
  2460. /*visibility:hidden;*/
  2461. /*overflow:hidden;*/
  2462. }
  2463.  
  2464.  
  2465. /*
  2466. #wp-content-editor-container {
  2467. max-height: 200px;
  2468. overflow: hidden;
  2469. }*/
  2470.  
  2471.  
  2472.  
  2473.  
  2474.  
  2475. /****************************************************************************************************************/
  2476. /****************************************************************************************************************/
  2477. /****************************************************************************************************************/
  2478. /* COLOR PICKER WITH LIB */
  2479. /****************************************************************************************************************/
  2480. /****************************************************************************************************************/
  2481. /****************************************************************************************************************/
  2482.  
  2483. .qtip {
  2484. border: none;
  2485. max-width: 100%;
  2486. }
  2487.  
  2488. .qtip-modal {
  2489. background-color: transparent;
  2490. position: fixed; /* does not work on ubuntu without being fixed! was absolute before btw */
  2491. }
  2492.  
  2493. #qtip-overlay {
  2494. position: fixed;
  2495. }
  2496.  
  2497. #qtip-overlay .qtip-overlay-minimal {
  2498. background: none;
  2499. position: fixed;
  2500. top: 0;
  2501. right: 0;
  2502. bottom: 0;
  2503. left: 0;
  2504. }
  2505.  
  2506. .fftm__option-type--color-picker {
  2507. display: inline-block;
  2508. position: relative;
  2509. vertical-align: middle;
  2510. margin-left: -26px;
  2511. margin-right: 12px;
  2512. }
  2513.  
  2514. .fftm__option-type--color-picker__select {
  2515. width: 28px;
  2516. height: 28px;
  2517. line-height: 28px;
  2518. font-size: 14px;
  2519. font-weight: 700;
  2520. text-align: center;
  2521. background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==');
  2522. background-position: 1px 1px;
  2523. border-radius: 99px;
  2524. cursor: pointer;
  2525. float: right;
  2526. margin: 1px 0 0 0;
  2527. /*margin: 8px 0 18px 0;*/
  2528. }
  2529.  
  2530. .fftm__option-type--color-picker__select:hover {
  2531. box-shadow: inset 0 0 0 1px rgba(0,0,0,0.3);
  2532. }
  2533.  
  2534. .fftm__option-type--color-picker__label {
  2535. cursor: default;
  2536. }
  2537.  
  2538. .ffb-options .form-table td fieldset label.fftm__option-type--color-picker__label {
  2539. margin-top: 3px !important;
  2540. margin-bottom: 5px !important;
  2541. line-height: 22px;
  2542. }
  2543.  
  2544. .fftm__option-type--color-picker__select-preview-color {
  2545. background: rgba(247,247,248,1);
  2546. width: 100%;
  2547. height: 100%;
  2548. overflow: hidden;
  2549. border-radius: 99px;
  2550. box-shadow: inset 0 0 0 1px rgba(0,0,0,0.20111);
  2551. }
  2552.  
  2553. .fftm__option-type--color-picker__select .fftm__option-type--color-picker__window {
  2554. display: none;
  2555. }
  2556.  
  2557. .fftm__option-type--color-picker__window {
  2558. width: 588px;
  2559. height: 349px;
  2560. background: #ffffff;
  2561. box-shadow: 0 1px 7px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.31123);
  2562. font-size: 12px;
  2563. color: #424258;
  2564. position: relative;
  2565. left: -15px; /* because of reset div */
  2566. }
  2567.  
  2568. .fftm__option-type--color-picker--library-color-is-active:not(.fftm__option-type--color-picker--library-color-is-locked) + .fftm__option-type--color-picker__window-spacer {
  2569. /* this will help with position calculation of the modal because the modal would otherwise have different size if you had the color library shown or hidden */
  2570. width: 100%;
  2571. height: 42px;
  2572. }
  2573.  
  2574. .fftm__option-type--color-picker__window .sp-container {
  2575. border: none;
  2576. background: none;
  2577. overflow: visible;
  2578. padding-top: 4px;
  2579. }
  2580.  
  2581. /*.fftm__option-type--color-picker__window .sp-container,
  2582. .fftm__option-type--color-picker__window .sp-container * {
  2583. box-sizing: border-box;aaaaaaaaaa
  2584. }*/
  2585.  
  2586. .fftm__option-type--color-picker__window .sp-dragger {
  2587. background: none;
  2588. box-shadow: inset 0 0 0 1px #ffffff, 0 0 0 1px #000000;
  2589. border: none;
  2590. margin: 5px 0 0 5px;
  2591. width: 10px;
  2592. height: 10px;
  2593. border-radius: 99px;
  2594. cursor: pointer;
  2595. }
  2596.  
  2597. .fftm__option-type--color-picker__window .sp-color,
  2598. .fftm__option-type--color-picker__window .sp-hue,
  2599. .fftm__option-type--color-picker__window .sp-clear,
  2600. .fftm__option-type--color-picker__window .sp-alpha-inner,
  2601. .fftm__option-type--color-picker__window .sp-initial {
  2602. border: none;
  2603. }
  2604.  
  2605. .fftm__option-type--color-picker__window .sp-val,
  2606. .fftm__option-type--color-picker__window .sp-hue,
  2607. .fftm__option-type--color-picker__window .sp-clear,
  2608. .fftm__option-type--color-picker__window .sp-alpha-inner {
  2609. box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2);
  2610. }
  2611.  
  2612. .fftm__option-type--color-picker__window .sp-picker-container {
  2613. border: none;
  2614. width: 212px;
  2615. padding-top: 6px;
  2616. }
  2617.  
  2618. .fftm__option-type--color-picker__window .sp-picker-container,
  2619. .sp-palette-container .fftm__option-type--color-picker__window {
  2620. margin-bottom: 0;
  2621. padding-bottom: 0;
  2622. }
  2623.  
  2624. .sp-initial span {
  2625. width: 32px;
  2626. height: 32px;
  2627. }
  2628.  
  2629. .sp-initial .sp-palette-row-initial span:first-child > span {
  2630. box-shadow: inset 0px 1px 0 0px rgba(0,0,0,0.220111), inset 0px -1px 0 0px rgba(0,0,0,0.220111), inset 1px 0 0 0px rgba(0,0,0,0.220111);
  2631. }
  2632.  
  2633. .sp-initial .sp-palette-row-initial span:last-child > span {
  2634. box-shadow: inset 0px 1px 0 0px rgba(0,0,0,0.220111), inset 0px -1px 0 0px rgba(0,0,0,0.220111), inset -1px 0 0 0px rgba(0,0,0,0.220111);
  2635. }
  2636.  
  2637. .sp-input-container {
  2638. width: 121px;
  2639. }
  2640.  
  2641. .fftm__option-type--color-picker__window .sp-alpha-handle {
  2642. background: #ffffff;
  2643. opacity: 1;
  2644. border: 1px solid rgba(0,0,0,0.9);
  2645. box-shadow: 0 1px 2px 0 rgba(0,0,0,0.25);
  2646. border-radius: 3px;
  2647. width: 4px;
  2648. margin-left: -1px;
  2649. cursor: pointer;
  2650. }
  2651.  
  2652. /*
  2653. .fftm__option-type--color-picker__window .sp-initial:after {
  2654. content: ' ';
  2655. position: absolute;
  2656. top: 0;
  2657.  
  2658. }*/
  2659.  
  2660. .fftm__option-type--color-picker__window .sp-slider {
  2661. background: #ffffff;
  2662. opacity: 1;
  2663. border: 1px solid rgba(0,0,0,0.9);
  2664. box-shadow: 0 1px 2px 0 rgba(0,0,0,0.25);
  2665. border-radius: 3px;
  2666. height: 4px;
  2667. cursor: pointer;
  2668. margin-top: 1px;
  2669. }
  2670.  
  2671. .fftm__option-type--color-picker__window .sp-alpha {
  2672. background-position: -2px -2px;
  2673. }
  2674.  
  2675. .fftm__option-type--color-picker__window .sp-input {
  2676. border: 1px solid #dddddd;
  2677. border-radius: 0;
  2678. line-height: 22px;
  2679. padding: 4px 7px;
  2680. /*font-size: 11px !important;*/
  2681. font-family: 'Open Sans', sans-serif;
  2682. }
  2683.  
  2684. .fftm__option-type--color-picker__window .sp-input:focus {
  2685. border-color: #b4b4b8;
  2686. }
  2687.  
  2688. .fftm__option-type--color-picker__window .sp-thumb-el:not(.sp-thumb-active) .sp-thumb-inner {
  2689. cursor: pointer;
  2690. }
  2691.  
  2692. .fftm__option-type--color-picker__window .sp-container {
  2693. float: left;
  2694. }
  2695.  
  2696. .fftm__option-type--color-picker__window .sp-button-container {
  2697. display: none;
  2698. }
  2699.  
  2700. .sp-thumb-el .sp-thumb-inner:hover:before,
  2701. .sp-thumb-el .sp-thumb-inner:hover:after {
  2702. content: ' ';
  2703. display: block;
  2704. position: absolute;
  2705. top: -220px;
  2706. right: -537px;
  2707. bottom: -1px;
  2708. left: 212px;
  2709. }
  2710.  
  2711. .sp-thumb-el .sp-thumb-inner:hover:before {
  2712. background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==');
  2713. background-repeat: repeat;
  2714. }
  2715.  
  2716. .sp-thumb-el .sp-thumb-inner:hover:after {
  2717. background-color: inherit;
  2718. }
  2719.  
  2720. .sp-thumb-el:last-child .sp-thumb-inner:hover:before,
  2721. .sp-thumb-el:last-child .sp-thumb-inner:hover:after {
  2722. right: -505px;
  2723. left: 180px;
  2724. }
  2725.  
  2726. .fftm__option-type--color-picker__library-tabs {
  2727. border-left: 1px solid #d3d3d3;
  2728. float: right;
  2729. padding: 15px 6px 0 6px;
  2730. text-align: center;
  2731. /*height: 40px;*/
  2732. }
  2733.  
  2734. .fftm__option-type--color-picker__picker-tabs {
  2735. float: left;
  2736. width: 212px;
  2737. text-align: center;
  2738. padding: 10px 10px 0 10px;
  2739. background-color: #f5f5f5;
  2740. box-shadow: 0 -1px 0 0 #d3d3d3 inset;
  2741. }
  2742.  
  2743. .fftm__option-type--color-picker__picker-tab {
  2744. display: block;
  2745. padding: 12px 0;
  2746. width: 50%;
  2747. font-size: 12px;
  2748. float: left;
  2749. /*height: 26px;*/
  2750. }
  2751.  
  2752. .fftm__option-type--color-picker__picker-tab__picker {
  2753. border-radius: 3px 3px 0 0;
  2754. border: 1px solid #d3d3d3;
  2755. }
  2756.  
  2757. .fftm__option-type--color-picker__picker-tab__palette {
  2758. border-radius: 3px 3px 0 0;
  2759. border: 1px solid #d3d3d3;
  2760. }
  2761.  
  2762. .fftm__option-type--color-picker__picker-tab--active--picker .fftm__option-type--color-picker__picker-tab__picker {
  2763. background-color: #ffffff;
  2764. color: #424258;
  2765. cursor: default;
  2766. font-weight: 700;
  2767. border-bottom-color: transparent;
  2768. }
  2769.  
  2770. .fftm__option-type--color-picker__picker-tab--active--picker .fftm__option-type--color-picker__picker-tab__palette {
  2771. /*background-color: #f1f1f1;*/
  2772. color: #666666;
  2773. cursor: pointer;
  2774. border-top-color: transparent;
  2775. border-right-color: transparent;
  2776. border-left-color: transparent;
  2777. }
  2778.  
  2779. .fftm__option-type--color-picker__picker-tab--active--palette .fftm__option-type--color-picker__picker-tab__picker {
  2780. /*background-color: #f1f1f1;*/
  2781. color: #666666;
  2782. cursor: pointer;
  2783. border-top-color: transparent;
  2784. border-right-color: transparent;
  2785. border-left-color: transparent;
  2786. }
  2787.  
  2788. .fftm__option-type--color-picker__picker-tab--active--palette .fftm__option-type--color-picker__picker-tab__palette {
  2789. background-color: #ffffff;
  2790. color: #424258;
  2791. cursor: default;
  2792. font-weight: 700;
  2793. border-bottom-color: transparent;
  2794. }
  2795.  
  2796. .fftm__option-type--color-picker__palette {
  2797. position: absolute;
  2798. top: 64px;
  2799. left: 10px;
  2800. width: 192px;
  2801. height: 176px;
  2802. z-index: 9999995;
  2803. }
  2804.  
  2805. .fftm__option-type--color-picker__palette-color {
  2806. float: left;
  2807. width: 38.4px;
  2808. height: 44px;
  2809. margin: 0;
  2810. cursor: pointer;
  2811. box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  2812. }
  2813.  
  2814. .fftm__option-type--color-picker__palette-color:nth-child(1) {
  2815. box-shadow: 1px 1px 0 0 rgba(0, 0, 0, 0.15) inset;
  2816. }
  2817.  
  2818. .fftm__option-type--color-picker__palette-color:nth-child(2),
  2819. .fftm__option-type--color-picker__palette-color:nth-child(3),
  2820. .fftm__option-type--color-picker__palette-color:nth-child(4) {
  2821. box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.15) inset;
  2822. }
  2823.  
  2824. .fftm__option-type--color-picker__palette-color:nth-child(5) {
  2825. box-shadow: -1px 1px 0 0 rgba(0, 0, 0, 0.15) inset;
  2826. }
  2827.  
  2828. .fftm__option-type--color-picker__palette-color:nth-child(6),
  2829. .fftm__option-type--color-picker__palette-color:nth-child(11) {
  2830. box-shadow: 1px 0 0 0 rgba(0, 0, 0, 0.15) inset;
  2831. }
  2832.  
  2833. .fftm__option-type--color-picker__palette-color:nth-child(10),
  2834. .fftm__option-type--color-picker__palette-color:nth-child(15) {
  2835. box-shadow: -1px 0 0 0 rgba(0, 0, 0, 0.15) inset;
  2836. }
  2837.  
  2838.  
  2839.  
  2840. .fftm__option-type--color-picker__palette-color:nth-child(16) {
  2841. box-shadow: 1px -1px 0 0 rgba(0, 0, 0, 0.15) inset;
  2842. }
  2843.  
  2844. .fftm__option-type--color-picker__palette-color:nth-child(17),
  2845. .fftm__option-type--color-picker__palette-color:nth-child(18),
  2846. .fftm__option-type--color-picker__palette-color:nth-child(19) {
  2847. box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.15) inset;
  2848. }
  2849.  
  2850. .fftm__option-type--color-picker__palette-color:nth-child(20) {
  2851. box-shadow: -1px -1px 0 0 rgba(0, 0, 0, 0.15) inset;
  2852. }
  2853.  
  2854. .fftm__option-type--color-picker__palette-color:hover {
  2855. transform: scale(1.2);
  2856. transition: 0.15s transform ease, 0.15s box-shadow ease;
  2857. box-shadow: 0 1px 12px rgba(0, 0, 0, 0.2);
  2858. }
  2859.  
  2860. .fftm__option-type--color-picker__picker-tab--active--picker .sp-top {
  2861. visibility: visible;
  2862. }
  2863.  
  2864. .fftm__option-type--color-picker__picker-tab--active--picker .fftm__option-type--color-picker__palette {
  2865. visibility: hidden;
  2866. }
  2867.  
  2868. .fftm__option-type--color-picker__picker-tab--active--palette .sp-top {
  2869. visibility: hidden;
  2870. }
  2871.  
  2872. .fftm__option-type--color-picker__picker-tab--active--palette .fftm__option-type--color-picker__palette {
  2873. visibility: visible;
  2874. }
  2875.  
  2876.  
  2877.  
  2878.  
  2879.  
  2880.  
  2881.  
  2882. .fftm__option-type--color-picker__library {
  2883. padding: 10px 5px 10px 10px;
  2884. border-left: 1px solid #d3d3d3;
  2885. float: right;
  2886. height: 235px;
  2887. position: relative;
  2888. }
  2889.  
  2890. .fftm__option-type--color-picker__library:after {
  2891. background-color: rgba(255,255,255,1);
  2892. content: ' ';
  2893. display: block;
  2894. position: absolute;
  2895. top: 0;
  2896. right: 0;
  2897. bottom: 0;
  2898. left: 0;
  2899. }
  2900.  
  2901. .fftm__option-type--color-picker--library-color-is-active:not(.fftm__option-type--color-picker--library-color-is-locked) .fftm__option-type--color-picker__library:after {
  2902. display: none;
  2903. }
  2904.  
  2905. .fftm__option-type--color-picker--library-color-is-active:not(.fftm__option-type--color-picker--library-color-is-locked) .fftm__option-type--color-picker__no-library-text {
  2906. display: none;
  2907. }
  2908.  
  2909. .fftm__option-type--color-picker--library-color-is-active:not(.fftm__option-type--color-picker--library-color-is-locked) .fftm__option-type--color-picker__library-color-position,
  2910. .fftm__option-type--color-picker--library-color-is-active:not(.fftm__option-type--color-picker--library-color-is-locked) .fftm__option-type--color-picker__library-color-name {
  2911. display: block;
  2912. }
  2913.  
  2914. .fftm__option-type--color-picker__library-tabs label {
  2915. position: relative;
  2916. top: 108px;
  2917. z-index: 1;
  2918. padding: 9px 12px 11px 12px;
  2919. display: inline-block;
  2920. }
  2921.  
  2922. .fftm__option-type--color-picker--library-color-is-active:not(.fftm__option-type--color-picker--library-color-is-locked) .fftm__option-type--color-picker__library-tabs label {
  2923. position: static;
  2924. top: auto;
  2925. font-size: 13px;
  2926. }
  2927.  
  2928.  
  2929.  
  2930. .fftm__option-type--color-picker__library,
  2931. .fftm__option-type--color-picker__library-tabs {
  2932. width: 376px;
  2933. }
  2934.  
  2935. .fftm__option-type--color-picker__library-colors {
  2936. margin: 5px 0 0 -2px;
  2937. visibility: hidden;
  2938. }
  2939.  
  2940. .fftm__option-type--color-picker--library-color-is-active:not(.fftm__option-type--color-picker--library-color-is-locked) .fftm__option-type--color-picker__library-colors {
  2941. visibility: visible;
  2942. }
  2943.  
  2944. .fftm__option-type--color-picker__library-color__clicker {
  2945. width: 36px;
  2946. height: 36px;
  2947. float: left;
  2948. margin: 0;
  2949. cursor: pointer;
  2950. position: relative;
  2951. z-index: 1;
  2952. }
  2953.  
  2954. .fftm__option-type--color-picker__library-color {
  2955. pointer-events: none;
  2956. width: 36px;
  2957. height: 36px;
  2958. line-height: 36px;
  2959. text-align: center;
  2960. font-size: 15px;
  2961. font-weight: 700;
  2962. float: left;
  2963. margin: 0 0 0 -36px;
  2964. cursor: pointer;
  2965. position: relative;
  2966. background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABlBMVEXMzMz////TjRV2AAAAHklEQVR4AWNghAIGCMDgjwgFCDDSw2M0PSCD0fQAACRcAgF4ciGUAAAAAElFTkSuQmCC);
  2967. background-position: 0 0;
  2968. }
  2969.  
  2970. .fftm__option-type--color-picker__library-color-preview {
  2971. background: rgba(247,247,248,1);
  2972. width: 100%;
  2973. height: 100%;
  2974. box-shadow: 0 0 0 2px rgba(255,255,255,1) inset, 0 0 0 3px rgba(0, 0, 0, 0.12) inset;
  2975. }
  2976.  
  2977. .fftm__option-type--color-picker__library-color--active,
  2978. .fftm__option-type--color-picker__library-color__clicker:hover + .fftm__option-type--color-picker__library-color {
  2979. transform: scale(1.382);
  2980. transition: 0.1s transform ease;
  2981. border-radius: 200px;
  2982. z-index: 2;
  2983. }
  2984.  
  2985. .fftm__option-type--color-picker__library-color--active {
  2986. z-index: 1; /* needs to be under hover state which is "2" */
  2987. }
  2988.  
  2989.  
  2990. .fftm__option-type--color-picker__library-color--active .fftm__option-type--color-picker__library-color-preview,
  2991. .fftm__option-type--color-picker__library-color__clicker:hover + .fftm__option-type--color-picker__library-color .fftm__option-type--color-picker__library-color-preview {
  2992. box-shadow: 0 1px 12px rgba(0, 0, 0, 0.2);
  2993. transition: 0.1s box-shadow ease;
  2994. border-radius: 200px;
  2995. }
  2996.  
  2997. .fftm__option-type--color-picker__library-color__clicker:not(:hover) + .fftm__option-type--color-picker__library-color:not(.fftm__option-type--color-picker__library-color--active) .fftm__option-type--color-picker__library-color-preview {
  2998. color: transparent !important;
  2999. }
  3000.  
  3001. .fftm__option-type--color-picker__library-color-position-wrapper {
  3002. display: none;
  3003.  
  3004. background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==');
  3005. background-position: 1px 1px;
  3006. float: left;
  3007. width: 32px;
  3008. height: 32px;
  3009. line-height: 32px;
  3010. font-size: 13px;
  3011. font-weight: 700;
  3012. margin: 0 4px 0 0;
  3013. text-align: center;
  3014. }
  3015.  
  3016. .fftm__option-type--color-picker__library-color-position {
  3017. display: none;
  3018. width: 100%;
  3019. height: 100%;
  3020. box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12);
  3021. }
  3022.  
  3023. .fftm__option-type--color-picker__library-color-name {
  3024. display: none;
  3025. float: left;
  3026. width: 356px;
  3027. font-size: 12px;
  3028. line-height: 22px;
  3029. padding: 4px 7px;
  3030. border: 1px solid #dddddd;
  3031. margin: 0;
  3032. }
  3033.  
  3034. .fftm__option-type--color-picker__library-color-name:focus {
  3035. border-color: #b4b4b8;
  3036. }
  3037.  
  3038. .fftm__option-type--color-picker__no-library-text {
  3039. float: left;
  3040. line-height: 32px;
  3041. width: calc(100% - 4px);
  3042. text-align: center;
  3043. font-size: 12px;
  3044. color: #b4b4b8;
  3045. }
  3046.  
  3047. .fftm__option-type--color-picker__window--library-color-yes .fftm__option-type--color-picker__no-library-text {
  3048. display: none;
  3049. }
  3050.  
  3051. .fftm__option-type--color-picker__window--library-color-yes .fftm__option-type--color-picker__library-color-name,
  3052. .fftm__option-type--color-picker__window--library-color-yes .fftm__option-type--color-picker__library-color-position {
  3053. display: block;
  3054. }
  3055.  
  3056. .fftm__option-type--color-picker__library-color__tooltip {
  3057. background: #ffffca;
  3058. border-radius: 0;
  3059. min-width: 140px;
  3060. background: rgba(0,0,0,0.7);
  3061. box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  3062. border-radius: 0;
  3063. min-width: 0;
  3064. color: #ffffff;
  3065. padding: 4px 7px;
  3066. margin: -8px 0 0 0px;
  3067. font-size: 11px;
  3068. line-height: 15px;
  3069. }
  3070.  
  3071. .fftm__option-type--color-picker__history-preview {
  3072. width: 32px;
  3073. height: 32px;
  3074. position: absolute;
  3075. z-index: 9999995;
  3076. }
  3077.  
  3078. .fftm__option-type--color-picker__history-old {
  3079. top: 247px;
  3080. left: 10px;
  3081. box-shadow: inset 0px 1px 0 0px rgba(0,0,0,0.220111), inset 0px -1px 0 0px rgba(0,0,0,0.220111), inset 1px 0 0 0px rgba(0,0,0,0.220111);
  3082. cursor: pointer;
  3083. }
  3084.  
  3085. .fftm__option-type--color-picker__history-new {
  3086. top: 247px;
  3087. left: 42px;
  3088. box-shadow: inset 0px 1px 0 0px rgba(0,0,0,0.220111), inset 0px -1px 0 0px rgba(0,0,0,0.220111), inset -1px 0 0 0px rgba(0,0,0,0.220111);
  3089. }
  3090.  
  3091. .fftm__option-type--color-picker__history-mockup-wrapper {
  3092. box-shadow: 0 1px 12px rgba(0, 0, 0, 0.2);
  3093. /*border: 1px solid #b4b4b8;*/
  3094. }
  3095.  
  3096. .fftm__option-type--color-picker__history-mockup h2 {
  3097. font-size: 28px;
  3098. line-height: 40px;
  3099. padding: 30px 30px 0 30px;
  3100. margin: 0;
  3101. background-color: inherit;
  3102. color: inherit;
  3103. }
  3104.  
  3105. .fftm__option-type--color-picker__history-mockup p {
  3106. font-size: 15px;
  3107. line-height: 21px;
  3108. padding: 0 30px 30px 30px;
  3109. margin: 0 0 0 0;
  3110. background-color: inherit;
  3111. color: inherit;
  3112. }
  3113.  
  3114. .fftm__option-type--color-picker__history-preview__var1 h2,
  3115. .fftm__option-type--color-picker__history-preview__var1 p {
  3116. background-color: #ffffff;
  3117. }
  3118.  
  3119. .fftm__option-type--color-picker__history-preview__var2 h2,
  3120. .fftm__option-type--color-picker__history-preview__var2 p {
  3121. color: #ffffff;
  3122. }
  3123.  
  3124. .fftm__option-type--color-picker__history-preview__var3 h2,
  3125. .fftm__option-type--color-picker__history-preview__var3 p {
  3126. background-color: #000000;
  3127. }
  3128.  
  3129. .fftm__option-type--color-picker__history-preview__var4 h2,
  3130. .fftm__option-type--color-picker__history-preview__var4 p {
  3131. color: #000000;
  3132. }
  3133.  
  3134. .sp-thumb-inner {
  3135. opacity: 0;
  3136. }
  3137.  
  3138. .qtip-content,
  3139. .qtip-default {
  3140. background: transparent;
  3141. }
  3142.  
  3143. .qtip-content {
  3144. overflow: visible;
  3145. padding: 0;
  3146. }
  3147.  
  3148. .fftm__option-type--color-picker__window:not(.fftm__option-type--color-picker--library-color-is-active),
  3149. .fftm__option-type--color-picker__window.fftm__option-type--color-picker--library-color-is-locked {
  3150. width: 212px;
  3151. height: 384px;
  3152. }
  3153.  
  3154. .fftm__option-type--color-picker__window:not(.fftm__option-type--color-picker--library-color-is-active) .fftm__option-type--color-picker__library,
  3155. .fftm__option-type--color-picker__window.fftm__option-type--color-picker--library-color-is-locked .fftm__option-type--color-picker__library {
  3156. display: none;
  3157. }
  3158.  
  3159. .fftm__option-type--color-picker__window:not(.fftm__option-type--color-picker--library-color-is-active) .fftm__option-type--color-picker__library-tabs,
  3160. .fftm__option-type--color-picker__window.fftm__option-type--color-picker--library-color-is-locked .fftm__option-type--color-picker__library-tabs {
  3161. position: absolute;
  3162. bottom: 58px;
  3163. left: 0;
  3164. width: 214px;
  3165. z-index: 9999999;
  3166. border: none;
  3167. padding-top: 5px;
  3168. padding-bottom: 5px;
  3169. }
  3170.  
  3171. .fftm__option-type--color-picker__window:not(.fftm__option-type--color-picker--library-color-is-active) .fftm__option-type--color-picker__library-tabs label,
  3172. .fftm__option-type--color-picker__window.fftm__option-type--color-picker--library-color-is-locked .fftm__option-type--color-picker__library-tabs label {
  3173. position: static;
  3174. padding: 8px 8px;
  3175. }
  3176.  
  3177. /* LOCKED COLOR LIB - START */
  3178. .fftm__option-type--color-picker__window.fftm__option-type--color-picker--library-color-is-locked {
  3179. height: 347px;
  3180. }
  3181.  
  3182. .fftm__option-type--color-picker__window.fftm__option-type--color-picker--library-color-is-locked .fftm__option-type--color-picker__library-tabs label {
  3183. display: none;
  3184. }
  3185. /* LOCKED COLOR LIB - END */
  3186.  
  3187. /*
  3188. .fftm__option-type--color-picker {
  3189. position: relative;
  3190. }
  3191.  
  3192. .fftm__option-type--color-picker .fftm__option-type__reset {
  3193. display: none;
  3194. position: absolute;
  3195. top: -6px;
  3196. right: -6px;
  3197. background-color: #ee0000;
  3198. color: #ffffff;
  3199. text-align: center;
  3200. border-radius: 99px;
  3201. width: 16px;
  3202. height: 16px;
  3203. line-height: 16px;
  3204. font-size: 14px;
  3205. overflow: hidden;
  3206. }
  3207.  
  3208. .fftm__option-type--color-picker .fftm__option-type__reset:after {
  3209. content: "\f335";
  3210. -moz-osx-font-smoothing: grayscale;
  3211. display: inline-block;
  3212. font-family: 'dashicons';
  3213. display: block;
  3214. width: 100%;
  3215. height: 100%;
  3216. }
  3217.  
  3218. .fftm__option-type--color-picker:hover .fftm__option-type__reset {
  3219. display: block;
  3220. }
  3221. */
  3222.  
  3223.  
  3224. .fftm__option-type--color-picker .fftm__option-type__reset {
  3225. display: inline-block;
  3226. visibility: hidden;
  3227. cursor: pointer;
  3228. margin: 9px 4px 0 4px;
  3229. }
  3230. .fftm__option-type--color-picker:hover .fftm__option-type__reset {
  3231. visibility: visible;
  3232. }
  3233. .fftm__option-type--color-picker .fftm__option-type__reset:before {
  3234. -moz-osx-font-smoothing: grayscale;
  3235. -webkit-font-smoothing: antialiased;
  3236. font-family: 'dashicons';
  3237. text-align: center;
  3238. padding: 0;
  3239. margin: 0;
  3240. font-size: 19px;
  3241. width: 18px;
  3242. height: 14px;
  3243. line-height: 14px;
  3244. display: inline-block;
  3245. content: "\f158";
  3246. color: #aaaaaa;
  3247. cursor: pointer;
  3248. float: left;
  3249. }
  3250.  
  3251. .fftm__option-type--color-picker .fftm__option-type__reset:hover:before {
  3252. color: #aa0000;
  3253. }
  3254.  
  3255. /*.fftm__option-type__is-reset:after {
  3256. content: ' ';
  3257. display: block;
  3258. position: absolute;
  3259. top: 2px;
  3260. left: 0;
  3261. width: 28px;
  3262. height: 28px;
  3263. border-radius: 99px;
  3264. overflow: hidden;
  3265. background-repeat: no-repeat;
  3266. background-position: center center;
  3267. box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2) inset;
  3268. }*/
  3269.  
  3270. .fftm__option-type__is-reset .fftm__option-type--color-picker__select-preview-color {
  3271. background: url('images/ffb-color-picker-is-reset2.png') !important;
  3272. background-position: center center !important;
  3273. overflow: hidden;
  3274. text-indent: 50px;
  3275. }
  3276.  
  3277. .fftm__option-type--color-picker__btn-save,
  3278. .fftm__option-type--color-picker__btn-cancel {
  3279. border-radius: 2px;
  3280. color: #ffffff;
  3281. display: inline-block;
  3282. padding: 0;
  3283. text-decoration: none;
  3284. width: 93px;
  3285. height: 36px;
  3286. line-height: 36px;
  3287. text-align: center;
  3288. position: absolute;
  3289. bottom: 10px;
  3290. cursor: pointer;
  3291. z-index: 1;
  3292. font-size: 13px;
  3293. }
  3294.  
  3295. .fftm__option-type--color-picker__btn-save {
  3296. background-color: #32d316;
  3297. left: 10px;
  3298. }
  3299.  
  3300. .ffbvr .fftm__option-type--color-picker__btn-save {
  3301. background-color: #2eb515;
  3302. }
  3303.  
  3304. .fftm__option-type--color-picker__btn-save:hover,
  3305. .fftm__option-type--color-picker__btn-save:focus {
  3306. background-color: #22c306;
  3307. }
  3308.  
  3309. .ffbvr .fftm__option-type--color-picker__btn-save:hover,
  3310. .ffbvr .fftm__option-type--color-picker__btn-save:focus {
  3311. background-color: #1ea505;
  3312. }
  3313.  
  3314. .fftm__option-type--color-picker__btn-cancel {
  3315. background-color: #888888;
  3316. left: 109px;
  3317. }
  3318.  
  3319. .fftm__option-type--color-picker__btn-cancel:hover,
  3320. .fftm__option-type--color-picker__btn-cancel:focus {
  3321. background-color: #777777;
  3322. }
  3323.  
  3324. .fftm__option-type--color-picker__window:after {
  3325. content: ' ';
  3326. position: absolute;
  3327. bottom: 0;
  3328. width: 100%;
  3329. height: 57px;
  3330. left: 0;
  3331. background-color: #f5f5f5;
  3332. border-top: 1px solid #d3d3d3;
  3333. }
  3334.  
  3335.  
  3336.  
  3337.  
  3338.  
  3339.  
  3340.  
  3341.  
  3342.  
  3343.  
  3344.  
  3345.  
  3346.  
  3347.  
  3348.  
  3349.  
  3350.  
  3351.  
  3352. .ffb-options .ff-repeatable-boxed,
  3353. .ffb-options .ff-repeatable-boxed .ff-repeatable-item,
  3354. .ffb-options .ff-repeatable-boxed .ff-repeatable-header {
  3355. box-shadow: none !important;
  3356. border: none !important;
  3357. }
  3358.  
  3359. .ffb-options .ff-repeatable-boxed > .ff-repeatable-item.ui-sortable-helper.ff-repeatable-item-opened {
  3360. box-shadow: 0 2px 16px rgba(0, 0, 0, 0.02) !important;
  3361. }
  3362. .ffb-options .ff-repeatable-boxed > .ff-repeatable-item.ui-sortable-helper.ff-repeatable-item-opened > .ff-repeatable-header {
  3363. box-shadow: none !important;
  3364. }
  3365.  
  3366. .ffb-options .ff-repeatable-boxed .ff-repeatable-header {
  3367. margin: 0 !important;
  3368. background-color: #f5f5f5 !important;
  3369. }
  3370.  
  3371. .ffb-options .ff-repeatable-boxed .ff-repeatable-controls-top,
  3372. .ffb-options .ff-repeatable-boxed .ff-repeatable-controls-bottom {
  3373. display: none !important;
  3374. }
  3375.  
  3376. .ffb-options .ff-repeatable-boxed .ff-repeatable-item:last-child > .ff-repeatable-controls-bottom {
  3377. display: block !important;
  3378. }
  3379.  
  3380. .ffb-options .ff-repeatable-boxed .ff-repeatable-controls-bottom {
  3381. /*background-color: transparent !important;*/
  3382.  
  3383. width: calc(100% + 2px) !important;
  3384. height: 48px;
  3385. padding: 0 !important;
  3386. margin: 0 !important;
  3387. top: auto !important;
  3388. right: auto !important;
  3389. bottom: -65px !important;
  3390. left: -1px !important;
  3391. /*border: 1px dashed transparent !important;*/
  3392. background-color: transparent !important;
  3393. }
  3394.  
  3395. .ffb-options .ff-repeatable-boxed .ff-repeatable-boxed .ff-repeatable-controls-bottom {
  3396. background-color: transparent !important;
  3397. }
  3398.  
  3399. .ffb-options .ff-repeatable-boxed .ff-repeatable-controls-bottom:hover {
  3400. /*background-color: #fafafa !important; */
  3401. }
  3402.  
  3403. .ffb-options .ff-repeatable-boxed .ff-repeatable-add-below {
  3404. /*background-color: #32d316 !important;*/
  3405. background-color: #fafafa !important;
  3406.  
  3407. cursor: pointer !important;
  3408. float: none !important;
  3409. width: 100% !important;
  3410. height: 40px !important;
  3411. line-height: 40px !important;
  3412. margin: 0 auto !important;
  3413. padding: 0 !important;
  3414. text-align: center !important;
  3415. border-radius: 0 !important;
  3416.  
  3417. font-size: 0 !important;
  3418. text-indent: -200px;
  3419. }
  3420.  
  3421. .ffb-options .ff-repeatable-boxed .ff-repeatable-add-below:before {
  3422. background-color: transparent !important;
  3423.  
  3424. background-position: center center !important;
  3425. background-repeat: no-repeat !important;
  3426. content: ' ' !important;
  3427. height: 22px !important;
  3428. width: 22px !important;
  3429. display: block !important;
  3430. position: static !important;
  3431. border-radius: 0 !important;
  3432. position: relative !important;
  3433. top: 9px !important;
  3434. right: auto !important;
  3435. bottom: auto !important;
  3436. left: auto !important;
  3437.  
  3438. }
  3439.  
  3440.  
  3441.  
  3442.  
  3443. .ffb-options .ff-repeatable-boxed .ff-repeatable-add-below:before {
  3444. content: ' ' !important;
  3445. width: 22px !important;
  3446. height: 22px !important;
  3447. display: block !important;
  3448. margin: 0 auto !important;
  3449. background-image: url('images/ffb-add-repeatable-icon5.png') !important;
  3450. background-repeat: no-repeat !important;
  3451. }
  3452.  
  3453. .ffbvr .ffb-options .ff-repeatable-boxed .ff-repeatable-add-below:before {
  3454. background-image: url('images/ffbvr/ffb-add-repeatable-icon5.png') !important;
  3455. }
  3456.  
  3457. .ffb-options .ff-repeatable-boxed .ff-repeatable-add-below:before {
  3458. background-position: -10px -10px !important;
  3459. }
  3460. .ffb-options .ff-repeatable-boxed .ff-repeatable-add-below:hover:before {
  3461. background-position: -10px -110px !important;
  3462. }
  3463.  
  3464.  
  3465.  
  3466. .ffb-options .ff-repeatable-boxed > .ff-repeatable-item {
  3467. transition: none !important;
  3468. }
  3469.  
  3470.  
  3471. .ffb-options .ff-repeatable-boxed .ff-repeatable-item {
  3472. border: 1px solid #dddddd !important;
  3473. box-shadow: 0 2px 16px rgba(0, 0, 0, 0.02) !important;
  3474. background: none !important;
  3475. }
  3476.  
  3477. .ffb-options .ff-repeatable-boxed .ff-repeatable-item .ff-repeatable-item {
  3478. background-color: #fafafa !important;
  3479. }
  3480.  
  3481. .ffb-options .ff-repeatable-boxed .ff-repeatable-item .ff-repeatable-item .ff-repeatable-item {
  3482. background-color: #ffffff !important;
  3483. }
  3484.  
  3485. .ffb-options .ff-repeatable-boxed .ff-repeatable-item .ff-repeatable-item .ff-repeatable-item .ff-repeatable-item {
  3486. background-color: #fafafa !important;
  3487. }
  3488.  
  3489. .ffb-options .ff-repeatable-boxed .ff-repeatable-item .ff-repeatable-item .ff-repeatable-item .ff-repeatable-item .ff-repeatable-item {
  3490. background-color: #ffffff !important;
  3491. }
  3492.  
  3493. .ffb-options .ff-repeatable-boxed .ff-repeatable-item > .ff-repeatable-header {
  3494. background-color: #fafafa !important;
  3495. }
  3496.  
  3497. .ffb-options .ff-repeatable-boxed .ff-repeatable-item .ff-repeatable-item > .ff-repeatable-header {
  3498. background-color: #f5f5f5 !important;
  3499. }
  3500.  
  3501. .ffb-options .ff-repeatable-boxed .ff-repeatable-item .ff-repeatable-item .ff-repeatable-item > .ff-repeatable-header {
  3502. background-color: #fafafa !important;
  3503. }
  3504.  
  3505. .ffb-options .ff-repeatable-boxed .ff-repeatable-item .ff-repeatable-item .ff-repeatable-item .ff-repeatable-item .ff-repeatable-item > .ff-repeatable-header {
  3506. background-color: #f5f5f5 !important;
  3507. }
  3508.  
  3509. .ffb-options .ff-advanced-options + .ff-repeatable-boxed .ff-repeatable-item {
  3510. margin-top: 16px !important;
  3511. }
  3512.  
  3513. .ffb-options .ff-repeatable-boxed .ff-repeatable-item {
  3514. margin-bottom: 16px !important;
  3515. }
  3516.  
  3517. .ffb-options .ff-repeatable-boxed .ff-repeatable-item-opened > .ff-repeatable-header {
  3518. border-bottom: 1px solid #dddddd !important;
  3519. }
  3520.  
  3521. .ffb-options .ff-repeatable-boxed .ff-repeatable-item-closed > .ff-repeatable-content {
  3522. display: none;
  3523. }
  3524.  
  3525. .ffb-options .ff-repeatable-boxed .ff-repeatable-item-opened > .ff-repeatable-content {
  3526. display: block !important;
  3527. height: auto !important;
  3528. }
  3529.  
  3530. .ffb-options .ff-repeatable-boxed .ff-repeatable-boxed {
  3531. margin: 20px 25px 70px 25px !important;
  3532. }
  3533.  
  3534. .ffb-options .ff-repeatable-boxed .ff-repeatable-controls-bottom,
  3535. .ffb-options .ff-repeatable-boxed .ff-repeatable-item.ff-repeatable-item-empty-add {
  3536. background: #ffffff !important;
  3537. /*border: 1px dashed #dddddd !important;*/
  3538. box-shadow: none !important;
  3539. }
  3540.  
  3541. .ffb-options .ff-repeatable-boxed .ff-repeatable-boxed .ff-repeatable-boxed .ff-repeatable-item.ff-repeatable-item-empty-add {
  3542. background: #fafafa !important;
  3543. }
  3544.  
  3545. .ffb-options .ff-repeatable-boxed .ff-repeatable,
  3546. .ffb-options .ff-repeatable-boxed .ff-repeatable-content {
  3547. padding: 0 !important;
  3548. margin: 0 !important;
  3549. }
  3550.  
  3551. .ffb-options .ff-repeatable-boxed .ff-repeatable-content {
  3552. /*padding: 15px 25px !important;*/
  3553. /*padding: 18px 28px !important;*/
  3554. padding: 21px 25px !important;
  3555. background-color: #ffffff;
  3556. }
  3557.  
  3558. .ffb-options .ff-repeatable-boxed .ff-repeatable-boxed .ff-repeatable-content {
  3559. background-color: #fafafa;
  3560. }
  3561.  
  3562. .ffb-options .ff-repeatable-boxed .ff-repeatable-boxed .ff-repeatable-boxed .ff-repeatable-content {
  3563. background-color: #ffffff;
  3564. }
  3565.  
  3566. .ffb-options .ff-repeatable-boxed .ff-repeatable-boxed .ff-repeatable-boxed .ff-repeatable-boxed .ff-repeatable-content {
  3567. background-color: #fafafa;
  3568. }
  3569.  
  3570. .ffb-options .ff-repeatable-boxed .ff-repeatable-boxed .ff-repeatable-content .ff-repeatable-item.ff-repeatable-item-empty-add-ffb {
  3571. background-color: #f5f5f5 !important;
  3572. }
  3573.  
  3574. .ffb-options .ff-repeatable-boxed .ff-repeatable-boxed .ff-repeatable-boxed .ff-repeatable-content .ff-repeatable-item.ff-repeatable-item-empty-add-ffb {
  3575. background-color: #fafafa !important;
  3576. }
  3577.  
  3578. .ffb-options .ff-repeatable-boxed .ff-repeatable-boxed .ff-repeatable-boxed .ff-repeatable-boxed .ff-repeatable-item.ff-repeatable-item-empty-add-ffb {
  3579. background-color: #f5f5f5 !important;
  3580. }
  3581.  
  3582. /*.ffb-options .ff-repeatable-boxed.ff-can-be-empty,
  3583. .ffb-options .ff-repeatable-boxed .ff-repeatable-boxed.ff-can-be-empty {
  3584. margin-bottom: 68px !important;
  3585. }*/
  3586.  
  3587. .ffb-options .ff-repeatable-boxed .ff-repeatable-item.ff-repeatable-item-empty-add-ffb {
  3588. margin-top: 16px;
  3589. background-color: #fafafa !important;
  3590. border: 1px dashed #d0d0d0 !important;
  3591. /*border: 1px solid transparent !important;*/
  3592. }
  3593.  
  3594. .ffb-options .ff-repeatable-boxed .ff-repeatable-item.ff-repeatable-item-empty-add-ffb:first-child {
  3595. margin-top: 0 !important;
  3596. }
  3597.  
  3598. .ffb-options .ff-repeatable-boxed .ff-repeatable-item.ff-repeatable-item-empty-add-ffb:last-child {
  3599. margin-bottom: 0 !important;
  3600. }
  3601.  
  3602. .ffb-options .ff-repeatable-boxed .ff-repeatable-item .ff-repeatable-item.ff-repeatable-item-empty-add-ffb:last-child:not(:first-child) {
  3603. margin-bottom: 16px !important;
  3604. }
  3605.  
  3606. /* second modal start (keep in mind that it does not have to original from a modal, some modal options are printed directly into admin pages without being in physical modal) */
  3607.  
  3608. .ffb-options .ff-repeatable-boxed .ffb-modal .ffb-options .ff-repeatable-boxed .ff-repeatable-item.ff-repeatable-item-empty-add {
  3609. background-color: #fafafa !important;
  3610. }
  3611.  
  3612. .ffb-options .ff-repeatable-boxed .ffb-modal .ffb-options .ff-repeatable-boxed .ff-repeatable-item > .ff-repeatable-header {
  3613. background-color: #fafafa !important;
  3614. }
  3615.  
  3616. .ffb-options .ff-repeatable-boxed .ffb-modal .ffb-options .ff-repeatable-boxed .ff-repeatable-content {
  3617. background-color: #ffffff !important;
  3618. }
  3619.  
  3620. /* second modal end */
  3621.  
  3622. .ffb-options .ff-repeatable-boxed .ff-repeatable-item.ff-repeatable-item-empty-add-ffb .ff-repeatable-add-ffb {
  3623. height: 54px;
  3624. position: relative;
  3625. cursor: pointer;
  3626. }
  3627.  
  3628. .ffb-options .ff-repeatable-item.ff-repeatable-item-empty-add-ffb:before {
  3629. content: ' ' !important;
  3630. background-color: transparent !important;
  3631. border-radius: 0 !important;
  3632. position: absolute !important;
  3633. top: 50% !important;
  3634. left: 50% !important;
  3635. right: auto !important;
  3636. bottom: auto !important;
  3637. width: 30px !important;
  3638. height: 30px !important;
  3639. display: block !important;
  3640. margin: -15px 0 0 -15px !important;
  3641. background-image: url('images/ffb-add-repeatable-icon5.png') !important;
  3642. background-repeat: no-repeat !important;
  3643. }
  3644.  
  3645. .ffbvr .ffb-options .ff-repeatable-item.ff-repeatable-item-empty-add-ffb:before {
  3646. background-image: url('images/ffbvr/ffb-add-repeatable-icon5.png') !important;
  3647. }
  3648.  
  3649. .ffb-options .ff-repeatable-item.ff-repeatable-item-empty-add-ffb:before {
  3650. background-position: -10px -10px !important;
  3651. }
  3652. .ffb-options .ff-repeatable-item.ff-repeatable-item-empty-add-ffb:hover:before {
  3653. background-position: -10px -110px !important;
  3654. }
  3655.  
  3656. /*.ffb-options .ff-repeatable-item .ff-repeatable-item.ff-repeatable-item-empty-add-ffb {
  3657. margin-bottom: 20px;
  3658. }
  3659. */
  3660. .ffb-options .ff-repeatable-template-holder + .ff-repeatable-item:last-child {
  3661. margin-top: 0 !important;
  3662. margin-bottom: 0 !important;
  3663. }
  3664.  
  3665. .ffb-options .ff-repeatable-boxed,
  3666. .ffb-options .ff-repeatable-boxed .ff-repeatable-boxed {
  3667. margin-top: 4px !important;
  3668. margin-bottom: 4px !important;
  3669. }
  3670.  
  3671.  
  3672. .ffb-options .ff-popup-container {
  3673. z-index: 1;
  3674. }
  3675.  
  3676. .ffb-options .ff-popup-button-wrapper:last-child .ff-popup-button {
  3677. border-color: #bbbbbb;
  3678. }
  3679.  
  3680. .ffb-options .ff-popup .ff-popup-button:hover {
  3681. background-color: #32d316;
  3682. }
  3683.  
  3684. .ffbvr .ffb-options .ff-popup .ff-popup-button:hover {
  3685. background-color: #2eb515;
  3686. }
  3687.  
  3688. /*.ffb-options .ff-popup li:last-child .ff-popup-button:hover {
  3689. background-color: #ff0048;
  3690. }*/
  3691.  
  3692. .ffb-options .ff-repeatable-add-below + .ff-popup-container {
  3693. transform: translateY(-50%);
  3694. bottom: auto !important;
  3695. left: 55% !important;
  3696. }
  3697.  
  3698. .ffb-options-page .select2-drop.ff-select2 {
  3699. position: fixed !important;
  3700. }
  3701. .ffb-options-page .select2-container,
  3702. .ffb-options-page .select2-drop,
  3703. .ffb-options-page .select2-search,
  3704. .ffb-options-page .select2-search input{
  3705. min-width: 190px;
  3706. }
  3707.  
  3708. .ffb-options label,
  3709. .ffb-options .form-table td fieldset label,
  3710. .ffb-options .form-table td p {
  3711. margin: 4px 0 !important;
  3712. }
  3713.  
  3714. .ffb-modal .ff-popup-button.ff-repeatable-remove:hover,
  3715. .ffb-options .ff-popup-button.ff-repeatable-remove:hover {
  3716. background-color: #ff0048 !important;
  3717. }
  3718.  
  3719. .ffb-options-page .ff-modal-library .media-modal-icon {
  3720. position: absolute;
  3721. top: 50%;
  3722. left: 50%;
  3723. margin: -10px 0 0 -10px;
  3724. width: 20px;
  3725. height: 20px;
  3726. }
  3727.  
  3728. .ffb-options .ff-repeatable-boxed .ff-repeatable-item.ui-sortable-placeholder {
  3729. background: none !important;
  3730. border: none !important;
  3731. box-shadow: none !important;
  3732. width: 100% !important;
  3733. height: 0 !important;
  3734. margin: 0 !important;
  3735. padding: 0 !important;
  3736. }
  3737.  
  3738. .ffb-options .ff-repeatable-boxed .ff-repeatable-item.ui-sortable-placeholder:before {
  3739. content: ' ' !important;
  3740. position: absolute !important;
  3741. display: block !important;
  3742. top: auto !important;
  3743. right: auto !important;
  3744. bottom: 6px !important;
  3745. left: 0 !important;
  3746. width: 100% !important;
  3747. height: 4px !important;
  3748. border: none !important;
  3749. background-color: #32d316 !important;
  3750. }
  3751.  
  3752. .ffbvr .ffb-options .ff-repeatable-boxed .ff-repeatable-item.ui-sortable-placeholder:before {
  3753. background-color: #2eb515 !important;
  3754. }
  3755.  
  3756. .ffb-options .ff-repeatable-boxed .ff-repeatable-item.ui-sortable-placeholder:after {
  3757. display: none !important;
  3758. }
  3759.  
  3760. .ffb-options .ff-options__tinymce-holder--tinymce-disabled .ff-options__tinymce-disable {
  3761. display: none;
  3762. }
  3763.  
  3764. .ffb-options .ff-options__tinymce-holder--tinymce-enabled .ff-options__tinymce-enable {
  3765. display: none;
  3766. }
  3767.  
  3768. .ffb-options .ff-options__tinymce-disable,
  3769. .ffb-options .ff-options__tinymce-enable {
  3770. margin-bottom: 10px;
  3771. }
  3772.  
  3773. .ffb-options .ff-options__tinymce-holder .mce-tinymce {
  3774. border: 1px solid #dddddd;
  3775. }
  3776.  
  3777.  
  3778. /*
  3779. .ffb-options-page .mce-menu .mce-menu-item-normal.mce-active,
  3780. .ffb-options-page .mce-menu .mce-menu-item-preview.mce-active,
  3781. .ffb-options-page .mce-menu .mce-menu-item.mce-selected,
  3782. .ffb-options-page .mce-menu .mce-menu-item:focus,
  3783. .ffb-options-page .mce-menu .mce-menu-item:hover {
  3784. background-color: #666666;
  3785. }
  3786.  
  3787. .ffb-options-page .mce-menu-item:hover,
  3788. .ffb-options-page .mce-menu-item.mce-selected,
  3789. .ffb-options-page .mce-menu-item:focus {
  3790. background-color: #666666;
  3791. }*/
  3792.  
  3793.  
  3794. .ffb-options textarea {
  3795. line-height: 20px !important;
  3796. padding: 5px 8px !important;
  3797. }
  3798.  
  3799. .ffb-options p.description {
  3800. line-height: 20px !important;
  3801. }
  3802.  
  3803. .ffb-options p.warning {
  3804. line-height: 20px !important;
  3805. color: #ff1833;
  3806. border: 1px solid #ff1833;
  3807. padding: 10px 16px;
  3808. border-radius: 3px;
  3809. }
  3810.  
  3811. .ffb-modal-add-element .ffb-modal__footer .ffb-modal__button-image_preview,
  3812. .ffb-modal-add-element .ffb-modal__footer .ffb-modal__button-save,
  3813. .ffb-modal-add-element .ff-global-style-select,
  3814. .ffb-modal-add-element .ffb-modal__footer .ffb-modal__button-save_all {
  3815. display: none;
  3816. }
  3817.  
  3818.  
  3819.  
  3820. .ff-select2-minwidth {
  3821. min-width: 190px;
  3822. }
  3823.  
  3824. .ffb-modal-save-default-element-settings {
  3825. font-size: 12px;
  3826. position: relative;
  3827. left: 180px;
  3828. top: -68px;
  3829. color: white;
  3830. opacity: 0.5;
  3831. cursor: pointer;
  3832. }
  3833.  
  3834. .ffb-modal-save-default-element-settings:hover {
  3835. opacity: 1;
  3836. background: red;
  3837. color: yellow;
  3838. }
  3839.  
  3840. /* code areas */
  3841.  
  3842. .ffb-options .ffb-options-textarea-code-wrapper {
  3843. /*color: #aaaaaa;*/
  3844. /*color: #ff4992;*/
  3845. /*color: #00ff9c;*/
  3846. color: rgba(0,255,156,0.65);
  3847. padding: 5px 0;
  3848. /*border-left: 40px solid rgba(255,255,255,0.15);*/
  3849. }
  3850.  
  3851. .ffb-options .ffb-options-textarea-code-wrapper,
  3852. .ffb-options .ffb-options-textarea-code-wrapper textarea,
  3853. .ffb-options textarea.ff-options__tinymce {
  3854. font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace !important;
  3855. font-size: 12px !important;
  3856. line-height: 16px !important;
  3857. /*background-color: #0000aa;*/
  3858. background-color: #5900ff !important;
  3859. }
  3860.  
  3861. .ffb-options .ffb-options-textarea-code-prefix {
  3862. padding-left: 9px;
  3863. }
  3864.  
  3865. .ffb-options .form-table td fieldset .ffb-options-textarea-code-wrapper {
  3866. padding: 5px 0 !important;
  3867. margin: 0 0 0 0 !important;
  3868. width: auto !important;
  3869. display: block !important;
  3870. }
  3871.  
  3872. .ffb-options .form-table td fieldset .ffb-options-textarea-code-wrapper textarea{
  3873. padding-left: 40px !important;
  3874. }
  3875.  
  3876. .ffb-options .form-table td fieldset .ffb-options-textarea-code-wrapper .ff-hiding-box:not([style*="display: none"]) + .ff-opt-label-textarea > textarea {
  3877. padding-left: 71px !important;
  3878. }
  3879.  
  3880. .ffb-options .ffb-options-textarea-code-wrapper textarea,
  3881. .ffb-options textarea.ff-options__tinymce {
  3882. height: 157px;
  3883. /*color: #ffffff !important;*/
  3884. color: rgb(0,255,156) !important;
  3885. padding: 0 !important;
  3886. margin: 0 !important;
  3887. border-radius: 3px !important;
  3888. }
  3889.  
  3890. .ffb-options textarea.ff-options__tinymce {
  3891. padding: 5px 8px !important;
  3892. }
  3893.  
  3894. .ffb-options .ffb-options-textarea-code-wrapper textarea,
  3895. .ffb-options .ffb-options-textarea-code-wrapper textarea:hover,
  3896. .ffb-options .ffb-options-textarea-code-wrapper textarea:active,
  3897. .ffb-options .ffb-options-textarea-code-wrapper textarea:focus,
  3898. .ffb-options textarea.ff-options__tinymce,
  3899. .ffb-options textarea.ff-options__tinymce:hover,
  3900. .ffb-options textarea.ff-options__tinymce:active,
  3901. .ffb-options textarea.ff-options__tinymce:focus {
  3902. border: none !important;
  3903. overflow: auto !important;
  3904. outline: none !important;
  3905.  
  3906. -webkit-box-shadow: none !important;
  3907. -moz-box-shadow: none !important;
  3908. box-shadow: none !important;
  3909. }
  3910.  
  3911. /* element JavaScript */
  3912.  
  3913. .ffb-options .ffb-options-textarea-code-el-js .ffb-options-textarea-code-js-start:before {
  3914. content: '<script type="text/javascript">';
  3915. display: block;
  3916. }
  3917.  
  3918. .ffb-options .ffb-options-textarea-code-el-js .ffb-options-textarea-code-js-end:before {
  3919. content: '</script>';
  3920. display: block;
  3921. }
  3922.  
  3923. .ffb-options .ffb-options-textarea-code-el-js .ffb-options-textarea-code-jquery-start:before {
  3924. content: '(function($){';
  3925. display: block;
  3926. padding-left: 31px;
  3927. }
  3928.  
  3929. .ffb-options .ffb-options-textarea-code-el-js .ffb-options-textarea-code-jquery-end:before {
  3930. content: '})(jQuery);';
  3931. display: block;
  3932. padding-left: 31px;
  3933. }
  3934.  
  3935. .ffb-options .form-table td fieldset .ffb-options-textarea-code-el-js .ffb-options-textarea-code-js-start + .ff-hiding-box:not([style*="display: none"]) + textarea {
  3936. padding-left: 71px !important;
  3937. }
  3938.  
  3939.  
  3940. /* custom code CSS */
  3941. .ffb-options .ffb-options-textarea-code-cc-css .ff-media-query-before:not(:empty) + .ff-selector {
  3942. padding-left: 31px;
  3943. }
  3944. .ffb-options .ffb-options-textarea-code-cc-css .ff-media-query-before:not(:empty) ~ .ff-selector-after {
  3945. padding-left: 31px;
  3946. }
  3947.  
  3948. .ffb-options .form-table td fieldset .ffb-options-textarea-code-cc-css .ff-media-query-before:not(:empty) ~ textarea {
  3949. padding-left: 71px !important;
  3950. }
  3951.  
  3952. /* custom code JS */
  3953.  
  3954. .ffb-options .ffb-options-textarea-code-cc-js .ffb-options-textarea-code-cc-js-js-start:before {
  3955. content: '<script type="text/javascript">';
  3956. display: block;
  3957. }
  3958.  
  3959. .ffb-options .ffb-options-textarea-code-cc-js .ffb-options-textarea-code-cc-js-js-end:before {
  3960. content: '</script>';
  3961. display: block;
  3962. }
  3963.  
  3964. .ffb-options .ffb-options-textarea-code-cc-js .ffb-options-textarea-code-cc-js-jquery-start:before {
  3965. content: '(function($){';
  3966. display: block;
  3967. padding-left: 31px;
  3968. }
  3969.  
  3970. .ffb-options .ffb-options-textarea-code-cc-js .ffb-options-textarea-code-cc-js-jquery-end:before {
  3971. content: '})(jQuery);';
  3972. display: block;
  3973. padding-left: 31px;
  3974. }
  3975.  
  3976. .ffb-options .ffb-options-textarea-code-cc-js .ffb-options-textarea-code-cc-js-docready-start:before {
  3977. content: '$(document).ready(function(){';
  3978. display: block;
  3979. padding-left: 62px;
  3980. }
  3981.  
  3982. .ffb-options .ffb-options-textarea-code-cc-js .ffb-options-textarea-code-cc-js-docready-end:before {
  3983. content: '});';
  3984. display: block;
  3985. padding-left: 62px;
  3986. }
  3987.  
  3988. .ffb-options .form-table td fieldset .ffb-options-textarea-code-cc-js .ffb-options-textarea-code-cc-js-js-start + .ff-hiding-box:not([style*="display: none"]) + .ff-hiding-box:not([style*="display: none"]) + textarea {
  3989. padding-left: 102px !important;
  3990. }
  3991.  
  3992. .ffb-options .form-table td fieldset .ffb-options-textarea-code-cc-js .ffb-options-textarea-code-cc-js-js-start + .ff-hiding-box:not([style*="display: none"]) + .ff-hiding-box[style*="display: none"] + textarea {
  3993. padding-left: 71px !important;
  3994. }
  3995.  
  3996. .ffb-options .form-table td fieldset .ffb-options-textarea-code-cc-js .ffb-options-textarea-code-cc-js-js-start + .ff-hiding-box[style*="display: none"] + .ff-hiding-box[style*="display: none"] + textarea {
  3997. padding-left: 40px !important;
  3998. }
  3999.  
  4000. .ffb-options .ff-unique-css-class-box-styling {
  4001. /*background-color: #5900ff;*/
  4002. background-color: #fafafa !important;
  4003. color: #ff00aa !important;
  4004. font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace !important;
  4005. font-size: 14px !important;
  4006. line-height: 20px !important;
  4007. padding: 12px 15px !important;
  4008. display: inline-block !important;
  4009. }
  4010.  
  4011.  
  4012.  
  4013.  
  4014. /**********************************************************************************************************************/
  4015. /* NOTIFICATION SYSTEM
  4016. /**********************************************************************************************************************/
  4017.  
  4018.  
  4019. .ffb-notification-box {
  4020. position: fixed;
  4021. bottom: 122px;
  4022. left: 16px;
  4023. z-index: 99999999;
  4024. }
  4025.  
  4026. /*.fftm-notify {
  4027. position: fixed;
  4028. bottom: 20px;
  4029. left: 320px;
  4030. }*/
  4031.  
  4032. .fftm-canvas__editor-mode--off .fftm-notify {
  4033. left: 20px;
  4034. }
  4035.  
  4036. .fftm-notify__item {
  4037. margin: 20px 35px 0 0;
  4038. padding: 8px 20px 8px 52px;
  4039. border-radius: 3px;
  4040. color: #ffffff;
  4041. font-size: 15px;
  4042. line-height: 28px;
  4043. font-family: 'Roboto', sans-serif;
  4044. position: relative;
  4045. float: left;
  4046. clear: both;
  4047.  
  4048. /*-webkit-transition: all 0.4s ease;
  4049. -moz-transition: all 0.4s ease;
  4050. transition: all 0.4s ease;*/
  4051.  
  4052. -webkit-touch-callout: none;
  4053. -webkit-user-select: none;
  4054. -moz-user-select: none;
  4055. -ms-user-select: none;
  4056. user-select: none;
  4057. }
  4058.  
  4059. .fftm-notify__item-content {
  4060. position: relative;
  4061. z-index: 1;
  4062. }
  4063.  
  4064. .fftm-notify__item i {
  4065. float: left;
  4066. margin-right: 20px;
  4067. font-size: 28px;
  4068. line-height: 28px;
  4069. }
  4070.  
  4071. .fftm-notify__item .fftm-notify__item-type-icon {
  4072. position: absolute;
  4073. display: block;
  4074. margin: 0;
  4075. padding: 0;
  4076. z-index: 0;
  4077. top: 8px;
  4078. left: 10px;
  4079. color: rgba(255,255,255,0.5);
  4080. font-size: 28px;
  4081. line-height: 1;
  4082. width: 32px;
  4083. text-align: center;
  4084. }
  4085.  
  4086. .fftm-notify__item-type--info {
  4087. background: rgba(0,0,0,0.6924);
  4088. }
  4089.  
  4090. .fftm-notify__item-type--success {
  4091. background: rgba(50,211,22,0.9);
  4092. }
  4093.  
  4094. .fftm-notify__item-type--warning {
  4095. background: rgba(255,163,0,0.9);
  4096. }
  4097.  
  4098. .fftm-notify__item-type--error {
  4099. background: rgba(255,50,50,0.9);
  4100. }
  4101.  
  4102. .fftm-notify__item-type--info,
  4103. .fftm-notify__item-type--success,
  4104. .fftm-notify__item-type--warning {
  4105. cursor: pointer;
  4106. }
  4107.  
  4108. .fftm-notify__item--anim-enter--ended.fftm-notify__item-type--info:hover,
  4109. .fftm-notify__item--anim-enter--ended.fftm-notify__item-type--success:hover,
  4110. .fftm-notify__item--anim-enter--ended.fftm-notify__item-type--warning:hover {
  4111. opacity: 0.8 !important;
  4112. }
  4113.  
  4114. .fftm-notify__item-type--error {
  4115. cursor: not-allowed;
  4116. }
  4117.  
  4118.  
  4119.  
  4120.  
  4121.  
  4122.  
  4123. .fftm-notify__item--anim-enter {
  4124. -webkit-animation: notifyItemEnter ease 0.247s forwards;
  4125. animation: notifyItemEnter ease 0.247s forwards;
  4126. transform-origin: 0 50%;
  4127. }
  4128.  
  4129. .fftm-notify__item--anim-exit {
  4130. -webkit-animation: notifyItemExit ease 0.437s forwards;
  4131. animation: notifyItemExit ease 0.437s forwards;
  4132. }
  4133.  
  4134. @-webkit-keyframes notifyItemEnter{
  4135. 0% {
  4136. opacity: 0;
  4137. transform: scale(1.5);
  4138. }
  4139. 100% {
  4140. opacity: 1;
  4141. transform: scale(1);
  4142. }
  4143. }
  4144.  
  4145. @keyframes notifyItemEnter{
  4146. 0% {
  4147. opacity: 0;
  4148. transform: scale(1.5);
  4149. }
  4150. 100% {
  4151. opacity: 1;
  4152. transform: scale(1);
  4153. }
  4154. }
  4155.  
  4156. @-webkit-keyframes notifyItemExit{
  4157. 0% {
  4158. -webkit-filter: opacity(1) blur(0);
  4159. }
  4160. 100% {
  4161. -webkit-filter: opacity(0) blur(40px);
  4162. -webkit-filter: opacity(0) blur(40px);
  4163. -webkit-filter: opacity(0) blur(40px);
  4164. }
  4165. }
  4166.  
  4167. @keyframes notifyItemExit{
  4168. 0% {
  4169. -webkit-filter: opacity(1) blur(0);
  4170. -moz-filter: opacity(1) blur(0);
  4171. filter: opacity(1) blur(0);
  4172. }
  4173. 100% {
  4174. -webkit-filter: opacity(0) blur(40px);
  4175. -moz-filter: opacity(0) blur(40px);
  4176. filter: opacity(0) blur(40px);
  4177. }
  4178. }
  4179.  
  4180. .ff-default-image-placeholder-qtip ul {
  4181. position: fixed;
  4182. top: 0;
  4183. bottom: 0;
  4184. width: 600px;
  4185. overflow-y: scroll;
  4186. background-color: rgba(0,0,0,0.5);
  4187. }
  4188.  
  4189. .ff-default-image-placeholder-qtip li {
  4190. border-bottom: 1px solid #ffffff;
  4191. border-right: 1px solid #ffffff;
  4192. width: 195px;
  4193. float: left;
  4194. }
  4195.  
  4196. .ff-default-image-placeholder-qtip li img {
  4197. width: 100%;
  4198. height: auto;
  4199. }
  4200.  
  4201. .ff-default-image-placeholder-qtip li img:hover {
  4202. box-shadow: 0 0 0 20px #32d316;
  4203. cursor: pointer;
  4204. }
  4205.  
  4206. .ffbvr .ff-default-image-placeholder-qtip li img:hover {
  4207. box-shadow: 0 0 0 20px #2eb515;
  4208. }
  4209.  
  4210.  
  4211. .fftm__option-type--color-picker__window, .fftm__option-type--color-picker__window *, .fftm__option-type--color-picker__window *:before, .fftm__option-type--color-picker__window *:after {
  4212. -webkit-box-sizing: border-box;
  4213. -moz-box-sizing: border-box;
  4214. box-sizing: border-box;
  4215. }
  4216.  
  4217. /*
  4218. .ffb-options .ffb-input-differ-from-default-value > input,
  4219. .ffb-options .ffb-input-differ-from-default-value > select,
  4220. .ffb-options .ffb-input-differ-from-default-value > textarea{
  4221. box-shadow: 0 0 0 2px rgba(255,0,170,0.6) !important;
  4222. }
  4223.  
  4224. .ffb-options .ffb-input-differ-from-default-value.fftm__option-type--color-picker__select{
  4225. box-shadow: 0 0 0 2px rgba(255,0,170,0.6) !important;
  4226. }*/
  4227.  
  4228. .ffb-options .ffb-input-differ-from-default-value > input,
  4229. .ffb-options .ffb-input-differ-from-default-value > select,
  4230. .ffb-options .ffb-input-differ-from-default-value > textarea,
  4231. .ffb-options .ffb-input-differ-from-default-value .ff-select2 {
  4232. border-color: rgba(255,0,170,0.6) !important;
  4233. box-shadow: 0 0 0 1px rgba(255,0,170,0.6) !important;
  4234. }
  4235.  
  4236. .ffb-options .ffb-input-differ-from-default-value.fftm__option-type--color-picker__select {
  4237. width: 22px;
  4238. height: 22px;
  4239. line-height: 22px;
  4240. margin-top: 3px;
  4241. margin-right: 3px;
  4242. margin-left: 3px;
  4243. }
  4244.  
  4245. .ffb-options .ffb-input-differ-from-default-value.fftm__option-type--color-picker__select .fftm__option-type--color-picker__select-preview-color {
  4246. /*box-shadow: none !important;
  4247. border: 2px solid rgba(255,0,170,0.6) !important;*/
  4248. box-shadow: 0 0 0 2px rgba(255,255,255,1), 0 0 0 4px rgba(255,0,170,0.6) !important;
  4249. }
  4250.  
  4251.  
  4252.  
  4253. .ffb-global-options-temporary-holder .ffb-options .ffb-input-differ-from-default-value > input,
  4254. .ffb-global-options-temporary-holder .ffb-options .ffb-input-differ-from-default-value > select,
  4255. .ffb-global-options-temporary-holder .ffb-options .ffb-input-differ-from-default-value > textarea,
  4256. .ffb-global-options-temporary-holder .ffb-options .ffb-input-differ-from-default-value .ff-select2{
  4257. border-color: rgba(75,75,255,0.8) !important;
  4258. box-shadow: 0 0 0 1px rgba(75,75,255,0.8) !important;
  4259. }
  4260.  
  4261. .ffb-global-options-temporary-holder .ffb-options .ffb-input-differ-from-default-value.fftm__option-type--color-picker__select {
  4262. width: 22px;
  4263. height: 22px;
  4264. line-height: 22px;
  4265. margin-top: 3px;
  4266. margin-right: 3px;
  4267. margin-left: 3px;
  4268. }
  4269.  
  4270. .ffb-global-options-temporary-holder .ffb-options .ffb-input-differ-from-default-value.fftm__option-type--color-picker__select .fftm__option-type--color-picker__select-preview-color {
  4271. /*box-shadow: none !important;
  4272. border: 2px solid rgba(75,75,255,0.8) !important;*/
  4273. box-shadow: 0 0 0 2px rgba(255,255,255,1), 0 0 0 4px rgba(75,75,255,0.8) !important;
  4274. }
  4275.  
  4276.  
  4277. /*.ffb-options .ff-repeatable.ffb-input-differ-from-default-value .ff-repeatable-item:not(.ff-repeatable-item-empty-add) {
  4278. box-shadow: 0 2px 16px rgba(0, 0, 0, 0.02), 0 0 0 2px rgba(255,0,170,0.6) !important;
  4279. }*/
  4280.  
  4281. #FreshBuilder {
  4282. display: none;
  4283. }
  4284.  
  4285. .ff-save-default-data {
  4286. cursor: pointer;
  4287. float: right;
  4288. opacity: 0.3;
  4289. top: -13px;
  4290. line-height: 10px;
  4291. font-size: 10px;
  4292. left: 0px;
  4293. position: absolute;
  4294. }
  4295.  
  4296. .ff-save-default-data:hover {
  4297. opacity: 1;
  4298. }
  4299.  
  4300. .ff-global-style-select {
  4301. display: inline-block;
  4302. text-align: center;
  4303. line-height: 33px;
  4304. /* background-color: rgba(70,70,255,1); */
  4305. background-color: rgba(70,70,255,0.1);
  4306. color: #ffffff;
  4307. text-decoration: none;
  4308. border-radius: 99px;
  4309. padding: 0px 36px 0px 21px;
  4310. font-size: 13px;
  4311. cursor: pointer;
  4312. vertical-align: middle;
  4313. position: relative;
  4314. margin: -6px 0 0 18px;
  4315. /* text-transform: uppercase; */
  4316. font-weight: 600;
  4317.  
  4318. -webkit-touch-callout: none;
  4319. -webkit-user-select: none;
  4320. -moz-user-select: none;
  4321. -ms-user-select: none;
  4322. user-select: none;
  4323. }
  4324.  
  4325. .ff-global-style-select:hover {
  4326. /*background-color: #1166ef;*/
  4327. background-color: rgba(70,70,255,1);
  4328. }
  4329.  
  4330. .ff-global-style-select:after {
  4331. content: '\f0d7';
  4332. font-family: 'ff-font-awesome';
  4333. -webkit-font-smoothing: antialiased;
  4334. -moz-osx-font-smoothing: grayscale;
  4335.  
  4336. position: absolute;
  4337. width: 10px;
  4338. height: 10px;
  4339. line-height: 10px;
  4340. text-align: center;
  4341. right: 15px;
  4342. top: 12px;
  4343. opacity: 1;
  4344. font-size: 13px;
  4345. text-align: center;
  4346. }
  4347.  
  4348. .ff-modal-menu-item[data-value="inherit"] .ff-modal-menu-item-inner,
  4349. .ff-modal-menu-item[data-value="dark"] .ff-modal-menu-item-inner,
  4350. .ff-modal-menu-item[data-value="light"] .ff-modal-menu-item-inner,
  4351. .ff-modal-menu-item[data-value="force-to-child-inherit"] .ff-modal-menu-item-inner,
  4352. .ff-modal-menu-item[data-value="force-to-child-dark"] .ff-modal-menu-item-inner,
  4353. .ff-modal-menu-item[data-value="force-to-child-light"] .ff-modal-menu-item-inner {
  4354. padding-left: 39px;
  4355. }
  4356.  
  4357. .ff-modal-menu-item[data-value="inherit"] .ff-modal-menu-item-inner:before,
  4358. .ff-modal-menu-item[data-value="dark"] .ff-modal-menu-item-inner:before,
  4359. .ff-modal-menu-item[data-value="light"] .ff-modal-menu-item-inner:before,
  4360. .ff-modal-menu-item[data-value="force-to-child-inherit"] .ff-modal-menu-item-inner:before,
  4361. .ff-modal-menu-item[data-value="force-to-child-dark"] .ff-modal-menu-item-inner:before,
  4362. .ff-modal-menu-item[data-value="force-to-child-light"] .ff-modal-menu-item-inner:before {
  4363. content: ' ';
  4364. position: absolute;
  4365. left: 14px;
  4366. top: 7px;
  4367. width: 24px;
  4368. height: 24px;
  4369. line-height: 24px;
  4370. margin: 0 5px 0 0;
  4371. background-image: url('images/ffb-header-icons5.png');
  4372. background-repeat: no-repeat;
  4373. }
  4374.  
  4375. .ffbvr .ff-modal-menu-item[data-value="inherit"] .ff-modal-menu-item-inner:before,
  4376. .ffbvr .ff-modal-menu-item[data-value="dark"] .ff-modal-menu-item-inner:before,
  4377. .ffbvr .ff-modal-menu-item[data-value="light"] .ff-modal-menu-item-inner:before,
  4378. .ffbvr .ff-modal-menu-item[data-value="force-to-child-inherit"] .ff-modal-menu-item-inner:before,
  4379. .ffbvr .ff-modal-menu-item[data-value="force-to-child-dark"] .ff-modal-menu-item-inner:before,
  4380. .ffbvr .ff-modal-menu-item[data-value="force-to-child-light"] .ff-modal-menu-item-inner:before {
  4381. background-image: url('images/ffbvr/ffb-header-icons5.png');
  4382. }
  4383.  
  4384. .ff-modal-menu-item[data-value="light"] .ff-modal-menu-item-inner:before,
  4385. .ff-modal-menu-item[data-value="force-to-child-light"] .ff-modal-menu-item-inner:before {
  4386. background-position: -408px -48px;
  4387. }
  4388.  
  4389. .ff-modal-menu-item[data-value="dark"] .ff-modal-menu-item-inner:before,
  4390. .ff-modal-menu-item[data-value="force-to-child-dark"] .ff-modal-menu-item-inner:before {
  4391. background-position: -368px -48px;
  4392. }
  4393.  
  4394. .ff-modal-menu-item[data-value="inherit"] .ff-modal-menu-item-inner:before,
  4395. .ff-modal-menu-item[data-value="force-to-child-inherit"] .ff-modal-menu-item-inner:before {
  4396. background-position: -448px -48px;
  4397. }
  4398.  
  4399. .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-handle,
  4400. .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-repeatable-settings,
  4401. .ffb-options .ff-repeatable-boxed > .ff-repeatable-item > .ff-repeatable-header > .ff-show-advanced-tools {
  4402. display: block;
  4403. }
  4404.  
  4405. .ff-repeatable-ig-changed-wrapper {
  4406. position: absolute;
  4407. top: 0;
  4408. right: 57px;
  4409. padding: 0 11px 0 0;
  4410. }
  4411.  
  4412. .ff-repeatable-instance-changed,
  4413. .ff-repeatable-global-changed {
  4414. float: left;
  4415. padding: 0 4px;
  4416. height: 12px;
  4417. line-height: 12px;
  4418. text-align: center;
  4419. border-radius: 99px;
  4420. z-index: 1;
  4421. background-color: #ff00aa;
  4422. color: #ffffff;
  4423. font-weight: 500;
  4424. /* opacity: 0.25; */
  4425. opacity: 1;
  4426. display: none;
  4427. font-size: 8px;
  4428. margin: 8px 0 0 5px;
  4429. }
  4430.  
  4431. .ff-repeatable-instance-changed:before {
  4432. content: 'EDIT';
  4433. }
  4434.  
  4435. .ff-repeatable-global-changed:before {
  4436. content: 'GLB';
  4437. }
  4438.  
  4439. .ff-repeatable-global-changed {
  4440. background-color: rgba(70,70,255,1);
  4441. }
  4442.  
  4443. .ff-repeatable-item.ff-repeatable-instance-changed-active > .ff-repeatable-header .ff-repeatable-instance-changed,
  4444. .ff-repeatable-item.ff-repeatable-global-changed-active > .ff-repeatable-header .ff-repeatable-global-changed {
  4445. display: block;
  4446. }
  4447.  
  4448. /*.ff-repeatable-item:hover .ff-repeatable-instance-changed,
  4449. .ff-repeatable-item:hover .ff-repeatable-global-changed {
  4450. opacity: 1;
  4451. }*/
  4452.  
  4453. /*
  4454. .ffb-modal__tab-content-instance-changed .ffb-gl-switcher-holder .ffb-switch-to__instance,
  4455. .ffb-modal__tab-content-instance-changed ~ .ffb-global-options-temporary-holder .ffb-gl-switcher-holder .ffb-switch-to__instance {
  4456. color: #ff00aa !important;
  4457. }
  4458.  
  4459. .ffb-modal__tab-content-global-changed .ffb-gl-switcher-holder .ffb-switch-to__global,
  4460. .ffb-modal__tab-content-global-changed ~ .ffb-global-options-temporary-holder .ffb-gl-switcher-holder .ffb-switch-to__global {
  4461. color: rgba(70,70,255,1) !important;
  4462. }
  4463. */
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement