froala_editor.css 48 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354
  1. /*!
  2. * froala_editor v3.0.3 (https://www.froala.com/wysiwyg-editor)
  3. * License https://froala.com/wysiwyg-editor/terms/
  4. * Copyright 2014-2019 Froala Labs
  5. */
  6. .clearfix::after {
  7. clear: both;
  8. display: block;
  9. content: "";
  10. height: 0; }
  11. .hide-by-clipping {
  12. position: absolute;
  13. width: 1px;
  14. height: 1px;
  15. padding: 0;
  16. margin: -1px;
  17. overflow: hidden;
  18. clip: rect(0, 0, 0, 0);
  19. border: 0; }
  20. .fr-element, .fr-element:focus {
  21. outline: 0 solid transparent; }
  22. .fr-box.fr-basic {
  23. border-radius: 10px;
  24. -moz-border-radius: 10px;
  25. -webkit-border-radius: 10px;
  26. -moz-background-clip: padding;
  27. -webkit-background-clip: padding-box;
  28. background-clip: padding-box; }
  29. .fr-box.fr-basic .fr-element {
  30. font-family: sans-serif;
  31. color: #414141;
  32. font-size: 14px;
  33. line-height: 1.6;
  34. padding: 20px;
  35. -webkit-box-sizing: border-box;
  36. -moz-box-sizing: border-box;
  37. box-sizing: border-box;
  38. overflow-x: auto;
  39. min-height: 60px;
  40. text-align: left; }
  41. .fr-box.fr-basic.fr-rtl .fr-element {
  42. text-align: right; }
  43. .fr-element {
  44. background: transparent;
  45. position: relative;
  46. z-index: 2;
  47. -webkit-user-select: auto; }
  48. .fr-element a {
  49. user-select: auto;
  50. -o-user-select: auto;
  51. -moz-user-select: auto;
  52. -khtml-user-select: auto;
  53. -webkit-user-select: auto;
  54. -ms-user-select: auto; }
  55. .fr-element.fr-disabled {
  56. user-select: none;
  57. -o-user-select: none;
  58. -moz-user-select: none;
  59. -khtml-user-select: none;
  60. -webkit-user-select: none;
  61. -ms-user-select: none; }
  62. .fr-element [contenteditable="true"] {
  63. outline: 0 solid transparent; }
  64. .fr-box a.fr-floating-btn {
  65. -webkit-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  66. -moz-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  67. box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  68. border-radius: 100%;
  69. -moz-border-radius: 100%;
  70. -webkit-border-radius: 100%;
  71. -moz-background-clip: padding;
  72. -webkit-background-clip: padding-box;
  73. background-clip: padding-box;
  74. height: 40px;
  75. width: 40px;
  76. text-align: center;
  77. background: #FFF;
  78. color: #333333;
  79. -webkit-transition: background 0.2s ease 0s, color 0.2s ease 0s, transform 0.2s ease 0s;
  80. -moz-transition: background 0.2s ease 0s, color 0.2s ease 0s, transform 0.2s ease 0s;
  81. -ms-transition: background 0.2s ease 0s, color 0.2s ease 0s, transform 0.2s ease 0s;
  82. -o-transition: background 0.2s ease 0s, color 0.2s ease 0s, transform 0.2s ease 0s;
  83. outline: none;
  84. left: 0;
  85. top: 0;
  86. line-height: 40px;
  87. -webkit-transform: scale(0);
  88. -moz-transform: scale(0);
  89. -ms-transform: scale(0);
  90. -o-transform: scale(0);
  91. text-align: center;
  92. display: block;
  93. -webkit-box-sizing: border-box;
  94. -moz-box-sizing: border-box;
  95. box-sizing: border-box;
  96. border: none; }
  97. .fr-box a.fr-floating-btn svg {
  98. -webkit-transition: transform 0.2s ease 0s;
  99. -moz-transition: transform 0.2s ease 0s;
  100. -ms-transition: transform 0.2s ease 0s;
  101. -o-transition: transform 0.2s ease 0s;
  102. fill: #333333; }
  103. .fr-box a.fr-floating-btn i, .fr-box a.fr-floating-btn svg {
  104. font-size: 14px;
  105. line-height: 40px; }
  106. .fr-box a.fr-floating-btn.fr-btn + .fr-btn {
  107. margin-left: 10px; }
  108. .fr-box a.fr-floating-btn:hover {
  109. background: #ebebeb;
  110. cursor: pointer; }
  111. .fr-box a.fr-floating-btn:hover svg {
  112. fill: #333333; }
  113. .fr-box .fr-visible a.fr-floating-btn {
  114. -webkit-transform: scale(1);
  115. -moz-transform: scale(1);
  116. -ms-transform: scale(1);
  117. -o-transform: scale(1); }
  118. iframe.fr-iframe {
  119. width: 100%;
  120. border: none;
  121. position: relative;
  122. padding: 20px;
  123. display: block;
  124. z-index: 2;
  125. -webkit-box-sizing: border-box;
  126. -moz-box-sizing: border-box;
  127. box-sizing: border-box; }
  128. .fr-wrapper {
  129. position: relative;
  130. z-index: 1; }
  131. .fr-wrapper::after {
  132. clear: both;
  133. display: block;
  134. content: "";
  135. height: 0; }
  136. .fr-wrapper .fr-placeholder {
  137. position: absolute;
  138. font-size: 14px;
  139. color: #AAA;
  140. font-family: sans-serif;
  141. z-index: 1;
  142. display: none;
  143. top: 0;
  144. left: 0;
  145. right: 0;
  146. overflow: hidden; }
  147. .fr-wrapper.show-placeholder .fr-placeholder {
  148. display: block; }
  149. .fr-wrapper ::-moz-selection {
  150. background: #b5d6fd;
  151. color: #000; }
  152. .fr-wrapper ::selection {
  153. background: #b5d6fd;
  154. color: #000; }
  155. .fr-box.fr-basic .fr-wrapper {
  156. background: #FFF;
  157. border: 1px solid #CCCCCC;
  158. border-bottom-color: #efefef;
  159. top: 0;
  160. left: 0; }
  161. .fr-box.fr-basic.fr-top .fr-wrapper {
  162. border-top: 0; }
  163. .fr-box.fr-basic.fr-bottom .fr-wrapper {
  164. border-bottom: 0;
  165. border-radius: 10px 10px 0 0;
  166. -moz-border-radius: 10px 10px 0 0;
  167. -webkit-border-radius: 10px 10px 0 0;
  168. -moz-background-clip: padding;
  169. -webkit-background-clip: padding-box;
  170. background-clip: padding-box; }
  171. @media (min-width: 992px) {
  172. .fr-box.fr-document {
  173. min-width: 21cm; }
  174. .fr-box.fr-document .fr-wrapper {
  175. text-align: left;
  176. padding: 30px;
  177. min-width: 21cm;
  178. background: #efefef; }
  179. .fr-box.fr-document .fr-wrapper .fr-element {
  180. text-align: left;
  181. background: #FFF;
  182. width: 21cm;
  183. margin: auto;
  184. min-height: 26cm !important;
  185. padding: 1cm 2cm;
  186. overflow: visible;
  187. z-index: auto; }
  188. .fr-box.fr-document .fr-wrapper .fr-element hr {
  189. margin-left: -2cm;
  190. margin-right: -2cm;
  191. background: #efefef;
  192. height: 1cm;
  193. outline: none;
  194. border: none; }
  195. .fr-box.fr-document .fr-wrapper .fr-element img {
  196. z-index: 1; } }
  197. .fr-tooltip {
  198. position: absolute;
  199. top: 0;
  200. left: 0;
  201. padding: 0 8px;
  202. border-radius: 2px;
  203. -moz-border-radius: 2px;
  204. -webkit-border-radius: 2px;
  205. -moz-background-clip: padding;
  206. -webkit-background-clip: padding-box;
  207. background-clip: padding-box;
  208. background: #222222;
  209. color: #FFF;
  210. font-size: 11px;
  211. line-height: 22px;
  212. font-family: Arial, Helvetica, sans-serif;
  213. -webkit-transition: opacity 0.2s ease 0s;
  214. -moz-transition: opacity 0.2s ease 0s;
  215. -ms-transition: opacity 0.2s ease 0s;
  216. -o-transition: opacity 0.2s ease 0s;
  217. -webkit-opacity: 0;
  218. -moz-opacity: 0;
  219. opacity: 0;
  220. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  221. left: -3000px;
  222. user-select: none;
  223. -o-user-select: none;
  224. -moz-user-select: none;
  225. -khtml-user-select: none;
  226. -webkit-user-select: none;
  227. -ms-user-select: none;
  228. z-index: 2147483647;
  229. text-rendering: optimizelegibility;
  230. -webkit-font-smoothing: antialiased;
  231. -moz-osx-font-smoothing: grayscale; }
  232. .fr-tooltip.fr-visible {
  233. -webkit-opacity: 1;
  234. -moz-opacity: 1;
  235. opacity: 1;
  236. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
  237. .fr-toolbar .fr-btn-wrap, .fr-popup .fr-btn-wrap, .fr-modal .fr-btn-wrap {
  238. float: left;
  239. white-space: nowrap;
  240. position: relative; }
  241. .fr-toolbar .fr-btn-wrap.fr-hidden, .fr-popup .fr-btn-wrap.fr-hidden, .fr-modal .fr-btn-wrap.fr-hidden {
  242. display: none; }
  243. .fr-toolbar .fr-command.fr-btn, .fr-popup .fr-command.fr-btn, .fr-modal .fr-command.fr-btn {
  244. background: transparent;
  245. color: #333333;
  246. -moz-outline: 0;
  247. outline: none;
  248. border: 0;
  249. line-height: 1;
  250. cursor: pointer;
  251. text-align: left;
  252. margin: 4px 2px;
  253. padding: 0;
  254. -webkit-transition: all 0.5s;
  255. -moz-transition: all 0.5s;
  256. -ms-transition: all 0.5s;
  257. -o-transition: all 0.5s;
  258. border-radius: 4px;
  259. -moz-border-radius: 4px;
  260. -webkit-border-radius: 4px;
  261. -moz-background-clip: padding;
  262. -webkit-background-clip: padding-box;
  263. background-clip: padding-box;
  264. z-index: 2;
  265. position: relative;
  266. -webkit-box-sizing: border-box;
  267. -moz-box-sizing: border-box;
  268. box-sizing: border-box;
  269. text-decoration: none;
  270. user-select: none;
  271. -o-user-select: none;
  272. -moz-user-select: none;
  273. -khtml-user-select: none;
  274. -webkit-user-select: none;
  275. -ms-user-select: none;
  276. float: left;
  277. height: 40px; }
  278. .fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-options, .fr-popup .fr-command.fr-btn.fr-dropdown.fr-options, .fr-modal .fr-command.fr-btn.fr-dropdown.fr-options {
  279. border-radius: 0 4px 4px 0;
  280. -moz-border-radius: 0 4px 4px 0;
  281. -webkit-border-radius: 0 4px 4px 0;
  282. -moz-background-clip: padding;
  283. -webkit-background-clip: padding-box;
  284. background-clip: padding-box; }
  285. .fr-toolbar .fr-command.fr-btn.fr-btn-hover, .fr-popup .fr-command.fr-btn.fr-btn-hover, .fr-modal .fr-command.fr-btn.fr-btn-hover {
  286. border-radius: 4px 0 0 4px;
  287. -moz-border-radius: 4px 0 0 4px;
  288. -webkit-border-radius: 4px 0 0 4px;
  289. -moz-background-clip: padding;
  290. -webkit-background-clip: padding-box;
  291. background-clip: padding-box; }
  292. .fr-toolbar .fr-command.fr-btn::-moz-focus-inner, .fr-popup .fr-command.fr-btn::-moz-focus-inner, .fr-modal .fr-command.fr-btn::-moz-focus-inner {
  293. border: 0;
  294. padding: 0; }
  295. .fr-toolbar .fr-command.fr-btn.fr-btn-text, .fr-popup .fr-command.fr-btn.fr-btn-text, .fr-modal .fr-command.fr-btn.fr-btn-text {
  296. width: auto; }
  297. .fr-toolbar .fr-command.fr-btn i, .fr-toolbar .fr-command.fr-btn svg, .fr-popup .fr-command.fr-btn i, .fr-popup .fr-command.fr-btn svg, .fr-modal .fr-command.fr-btn i, .fr-modal .fr-command.fr-btn svg {
  298. display: block;
  299. text-align: center;
  300. float: none;
  301. margin: 8px 7px;
  302. width: 24px; }
  303. .fr-toolbar .fr-command.fr-btn svg.fr-svg, .fr-popup .fr-command.fr-btn svg.fr-svg, .fr-modal .fr-command.fr-btn svg.fr-svg {
  304. height: 24px; }
  305. .fr-toolbar .fr-command.fr-btn svg path, .fr-popup .fr-command.fr-btn svg path, .fr-modal .fr-command.fr-btn svg path {
  306. -webkit-transition: all 0.5s;
  307. -moz-transition: all 0.5s;
  308. -ms-transition: all 0.5s;
  309. -o-transition: all 0.5s;
  310. fill: #333333; }
  311. .fr-toolbar .fr-command.fr-btn span.fr-sr-only, .fr-popup .fr-command.fr-btn span.fr-sr-only, .fr-modal .fr-command.fr-btn span.fr-sr-only {
  312. position: absolute;
  313. width: 1px;
  314. height: 1px;
  315. padding: 0;
  316. margin: -1px;
  317. overflow: hidden;
  318. clip: rect(0, 0, 0, 0);
  319. border: 0; }
  320. .fr-toolbar .fr-command.fr-btn span, .fr-popup .fr-command.fr-btn span, .fr-modal .fr-command.fr-btn span {
  321. font-size: 14px;
  322. display: block;
  323. line-height: 17px;
  324. min-width: 30px;
  325. float: left;
  326. text-overflow: ellipsis;
  327. overflow: hidden;
  328. white-space: nowrap;
  329. height: 17px;
  330. font-weight: bold;
  331. padding: 0 4px; }
  332. .fr-toolbar .fr-command.fr-btn img, .fr-popup .fr-command.fr-btn img, .fr-modal .fr-command.fr-btn img {
  333. margin: 8px 7px;
  334. width: 24px; }
  335. .fr-toolbar .fr-command.fr-btn.fr-btn-active-popup, .fr-popup .fr-command.fr-btn.fr-btn-active-popup, .fr-modal .fr-command.fr-btn.fr-btn-active-popup {
  336. background: #d6d6d6; }
  337. .fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-selection span, .fr-popup .fr-command.fr-btn.fr-dropdown.fr-selection span, .fr-modal .fr-command.fr-btn.fr-dropdown.fr-selection span {
  338. font-weight: normal; }
  339. .fr-toolbar .fr-command.fr-btn.fr-dropdown i, .fr-toolbar .fr-command.fr-btn.fr-dropdown span, .fr-toolbar .fr-command.fr-btn.fr-dropdown img, .fr-toolbar .fr-command.fr-btn.fr-dropdown svg, .fr-popup .fr-command.fr-btn.fr-dropdown i, .fr-popup .fr-command.fr-btn.fr-dropdown span, .fr-popup .fr-command.fr-btn.fr-dropdown img, .fr-popup .fr-command.fr-btn.fr-dropdown svg, .fr-modal .fr-command.fr-btn.fr-dropdown i, .fr-modal .fr-command.fr-btn.fr-dropdown span, .fr-modal .fr-command.fr-btn.fr-dropdown img, .fr-modal .fr-command.fr-btn.fr-dropdown svg {
  340. margin-left: 3px;
  341. margin-right: 11px; }
  342. .fr-toolbar .fr-command.fr-btn.fr-dropdown:after, .fr-popup .fr-command.fr-btn.fr-dropdown:after, .fr-modal .fr-command.fr-btn.fr-dropdown:after {
  343. position: absolute;
  344. width: 0;
  345. height: 0;
  346. border-left: 4px solid transparent;
  347. border-right: 4px solid transparent;
  348. border-top: 4px solid #333333;
  349. right: 2px;
  350. top: 18px;
  351. -webkit-transition: all 0.3s;
  352. -moz-transition: all 0.3s;
  353. -ms-transition: all 0.3s;
  354. -o-transition: all 0.3s;
  355. content: ""; }
  356. .fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active, .fr-popup .fr-command.fr-btn.fr-dropdown.fr-active, .fr-modal .fr-command.fr-btn.fr-dropdown.fr-active {
  357. fill: #333333;
  358. background: #d6d6d6;
  359. -webkit-transition: 0.5s ease;
  360. -moz-transition: 0.5s ease;
  361. -ms-transition: 0.5s ease;
  362. -o-transition: 0.5s ease; }
  363. .fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active:hover, .fr-popup .fr-command.fr-btn.fr-dropdown.fr-active:hover, .fr-modal .fr-command.fr-btn.fr-dropdown.fr-active:hover {
  364. background: #ebebeb;
  365. fill: #333333; }
  366. .fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active:hover::after, .fr-popup .fr-command.fr-btn.fr-dropdown.fr-active:hover::after, .fr-modal .fr-command.fr-btn.fr-dropdown.fr-active:hover::after {
  367. border-top-color: #333333; }
  368. .fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active:after, .fr-popup .fr-command.fr-btn.fr-dropdown.fr-active:after, .fr-modal .fr-command.fr-btn.fr-dropdown.fr-active:after {
  369. border-top: 0;
  370. border-bottom: 4px solid #222222; }
  371. .fr-toolbar .fr-command.fr-btn.fr-disabled, .fr-popup .fr-command.fr-btn.fr-disabled, .fr-modal .fr-command.fr-btn.fr-disabled {
  372. color: #bdbdbd;
  373. cursor: default;
  374. -webkit-opacity: 0.3;
  375. -moz-opacity: 0.3;
  376. opacity: 0.3;
  377. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
  378. .fr-toolbar .fr-command.fr-btn.fr-disabled::after, .fr-popup .fr-command.fr-btn.fr-disabled::after, .fr-modal .fr-command.fr-btn.fr-disabled::after {
  379. border-top-color: #bdbdbd; }
  380. .fr-toolbar .fr-command.fr-btn.fr-hidden, .fr-popup .fr-command.fr-btn.fr-hidden, .fr-modal .fr-command.fr-btn.fr-hidden {
  381. display: none; }
  382. .fr-toolbar .fr-tabs .fr-command.fr-btn, .fr-popup .fr-tabs .fr-command.fr-btn, .fr-modal .fr-tabs .fr-command.fr-btn {
  383. margin: 0;
  384. width: 46px;
  385. height: 40px;
  386. border-radius: 0;
  387. -moz-border-radius: 0;
  388. -webkit-border-radius: 0;
  389. -moz-background-clip: padding;
  390. -webkit-background-clip: padding-box;
  391. background-clip: padding-box; }
  392. .fr-toolbar .fr-tabs .fr-command.fr-btn:not(:hover):not(:focus).fr-active, .fr-toolbar .fr-tabs .fr-command.fr-btn:not(:hover):not(:focus).fr-active-tab, .fr-popup .fr-tabs .fr-command.fr-btn:not(:hover):not(:focus).fr-active, .fr-popup .fr-tabs .fr-command.fr-btn:not(:hover):not(:focus).fr-active-tab, .fr-modal .fr-tabs .fr-command.fr-btn:not(:hover):not(:focus).fr-active, .fr-modal .fr-tabs .fr-command.fr-btn:not(:hover):not(:focus).fr-active-tab {
  393. background: #FFF; }
  394. .fr-toolbar .fr-tabs .fr-command.fr-btn span, .fr-popup .fr-tabs .fr-command.fr-btn span, .fr-modal .fr-tabs .fr-command.fr-btn span {
  395. height: 27px; }
  396. .fr-toolbar .fr-tabs .fr-command.fr-btn img, .fr-toolbar .fr-tabs .fr-command.fr-btn svg, .fr-popup .fr-tabs .fr-command.fr-btn img, .fr-popup .fr-tabs .fr-command.fr-btn svg, .fr-modal .fr-tabs .fr-command.fr-btn img, .fr-modal .fr-tabs .fr-command.fr-btn svg {
  397. margin: 8px 11px;
  398. width: 24px;
  399. height: 24px; }
  400. .fr-toolbar .fr-btn-grp .fr-command.fr-btn.fr-active:not(.fr-dropdown) svg path, .fr-toolbar .fr-more-toolbar .fr-command.fr-btn.fr-active:not(.fr-dropdown) svg path, .fr-toolbar .fr-buttons:not(.fr-tabs) .fr-command.fr-btn.fr-active:not(.fr-dropdown) svg path, .fr-popup .fr-btn-grp .fr-command.fr-btn.fr-active:not(.fr-dropdown) svg path, .fr-popup .fr-more-toolbar .fr-command.fr-btn.fr-active:not(.fr-dropdown) svg path, .fr-popup .fr-buttons:not(.fr-tabs) .fr-command.fr-btn.fr-active:not(.fr-dropdown) svg path, .fr-modal .fr-btn-grp .fr-command.fr-btn.fr-active:not(.fr-dropdown) svg path, .fr-modal .fr-more-toolbar .fr-command.fr-btn.fr-active:not(.fr-dropdown) svg path, .fr-modal .fr-buttons:not(.fr-tabs) .fr-command.fr-btn.fr-active:not(.fr-dropdown) svg path {
  401. fill: #0098f7; }
  402. .fr-toolbar.fr-disabled .fr-btn, .fr-toolbar.fr-disabled .fr-btn.fr-active, .fr-popup.fr-disabled .fr-btn, .fr-popup.fr-disabled .fr-btn.fr-active, .fr-modal.fr-disabled .fr-btn, .fr-modal.fr-disabled .fr-btn.fr-active {
  403. color: #bdbdbd;
  404. -webkit-opacity: 0.3;
  405. -moz-opacity: 0.3;
  406. opacity: 0.3;
  407. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
  408. .fr-toolbar.fr-disabled .fr-btn.fr-dropdown::after, .fr-toolbar.fr-disabled .fr-btn.fr-active.fr-dropdown::after, .fr-popup.fr-disabled .fr-btn.fr-dropdown::after, .fr-popup.fr-disabled .fr-btn.fr-active.fr-dropdown::after, .fr-modal.fr-disabled .fr-btn.fr-dropdown::after, .fr-modal.fr-disabled .fr-btn.fr-active.fr-dropdown::after {
  409. border-top-color: #bdbdbd; }
  410. .fr-toolbar.fr-rtl .fr-btn-grp.fr-float-left, .fr-popup.fr-rtl .fr-btn-grp.fr-float-left, .fr-modal.fr-rtl .fr-btn-grp.fr-float-left {
  411. float: right; }
  412. .fr-toolbar.fr-rtl .fr-btn-grp.fr-float-right, .fr-popup.fr-rtl .fr-btn-grp.fr-float-right, .fr-modal.fr-rtl .fr-btn-grp.fr-float-right {
  413. float: left; }
  414. .fr-toolbar.fr-rtl .fr-command.fr-btn, .fr-toolbar.fr-rtl .fr-btn-wrap, .fr-popup.fr-rtl .fr-command.fr-btn, .fr-popup.fr-rtl .fr-btn-wrap, .fr-modal.fr-rtl .fr-command.fr-btn, .fr-modal.fr-rtl .fr-btn-wrap {
  415. float: right; }
  416. .fr-toolbar.fr-rtl .fr-command.fr-btn.fr-dropdown.fr-options, .fr-toolbar.fr-rtl .fr-btn-wrap.fr-dropdown.fr-options, .fr-popup.fr-rtl .fr-command.fr-btn.fr-dropdown.fr-options, .fr-popup.fr-rtl .fr-btn-wrap.fr-dropdown.fr-options, .fr-modal.fr-rtl .fr-command.fr-btn.fr-dropdown.fr-options, .fr-modal.fr-rtl .fr-btn-wrap.fr-dropdown.fr-options {
  417. border-radius: 4px 0 0 4px;
  418. -moz-border-radius: 4px 0 0 4px;
  419. -webkit-border-radius: 4px 0 0 4px;
  420. -moz-background-clip: padding;
  421. -webkit-background-clip: padding-box;
  422. background-clip: padding-box; }
  423. .fr-toolbar.fr-rtl .fr-command.fr-btn.fr-btn-hover, .fr-toolbar.fr-rtl .fr-btn-wrap.fr-btn-hover, .fr-popup.fr-rtl .fr-command.fr-btn.fr-btn-hover, .fr-popup.fr-rtl .fr-btn-wrap.fr-btn-hover, .fr-modal.fr-rtl .fr-command.fr-btn.fr-btn-hover, .fr-modal.fr-rtl .fr-btn-wrap.fr-btn-hover {
  424. border-radius: 0 4px 4px 0;
  425. -moz-border-radius: 0 4px 4px 0;
  426. -webkit-border-radius: 0 4px 4px 0;
  427. -moz-background-clip: padding;
  428. -webkit-background-clip: padding-box;
  429. background-clip: padding-box; }
  430. .fr-toolbar.fr-inline > .fr-command.fr-btn:not(.fr-hidden), .fr-toolbar.fr-inline > .fr-btn-wrap:not(.fr-hidden) {
  431. display: -webkit-inline-flex;
  432. display: -ms-inline-flexbox;
  433. display: inline-flex;
  434. float: none; }
  435. .fr-desktop .fr-command:hover, .fr-desktop .fr-command:focus, .fr-desktop .fr-command.fr-btn-hover, .fr-desktop .fr-command.fr-expanded {
  436. outline: 0;
  437. color: #333333; }
  438. .fr-desktop .fr-command:hover:not(.fr-table-cell), .fr-desktop .fr-command:focus:not(.fr-table-cell), .fr-desktop .fr-command.fr-btn-hover:not(.fr-table-cell), .fr-desktop .fr-command.fr-expanded:not(.fr-table-cell) {
  439. background: #ebebeb; }
  440. .fr-desktop .fr-command:hover::after, .fr-desktop .fr-command:focus::after, .fr-desktop .fr-command.fr-btn-hover::after, .fr-desktop .fr-command.fr-expanded::after {
  441. border-top-color: #333333; }
  442. .fr-desktop .fr-command.fr-selected:not(.fr-table-cell), .fr-desktop .fr-command:active {
  443. color: #333333;
  444. background: #d6d6d6; }
  445. .fr-desktop .fr-command.fr-active:hover, .fr-desktop .fr-command.fr-active:focus, .fr-desktop .fr-command.fr-active.fr-btn-hover, .fr-desktop .fr-command.fr-active.fr-expanded {
  446. background: #ebebeb; }
  447. .fr-desktop .fr-command.fr-active:active {
  448. background: #d6d6d6; }
  449. .fr-desktop .fr-command.fr-disabled:hover, .fr-desktop .fr-command.fr-disabled:focus, .fr-desktop .fr-command.fr-disabled.fr-selected {
  450. background: transparent; }
  451. .fr-desktop.fr-disabled .fr-command:hover, .fr-desktop.fr-disabled .fr-command:focus, .fr-desktop.fr-disabled .fr-command.fr-selected {
  452. background: transparent; }
  453. .fr-toolbar.fr-mobile .fr-command.fr-blink, .fr-popup.fr-mobile .fr-command.fr-blink {
  454. background: #d6d6d6; }
  455. .fr-command.fr-btn.fr-options {
  456. width: 16px;
  457. margin-left: -5px; }
  458. .fr-command.fr-btn.fr-options.fr-btn-hover, .fr-command.fr-btn.fr-options:hover, .fr-command.fr-btn.fr-options:focus {
  459. border-left: solid 1px #FAFAFA;
  460. -webkit-transition: border-left 0s, background-color 0.5s;
  461. -moz-transition: border-left 0s, background-color 0.5s;
  462. -ms-transition: border-left 0s, background-color 0.5s;
  463. -o-transition: border-left 0s, background-color 0.5s; }
  464. .fr-command.fr-btn + .fr-dropdown-menu {
  465. background: #FFF;
  466. display: inline-block;
  467. position: absolute;
  468. right: auto;
  469. bottom: auto;
  470. height: auto;
  471. z-index: 4;
  472. border-radius: 4px;
  473. -moz-border-radius: 4px;
  474. -webkit-border-radius: 4px;
  475. -moz-background-clip: padding;
  476. -webkit-background-clip: padding-box;
  477. background-clip: padding-box;
  478. -webkit-overflow-scrolling: touch;
  479. overflow: hidden;
  480. zoom: 1;
  481. -webkit-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  482. -moz-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  483. box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); }
  484. .fr-command.fr-btn + .fr-dropdown-menu.test-height .fr-dropdown-wrapper {
  485. -webkit-transition: none;
  486. -moz-transition: none;
  487. -ms-transition: none;
  488. -o-transition: none;
  489. height: auto;
  490. max-height: 275px; }
  491. .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper {
  492. padding: 0;
  493. margin: auto;
  494. display: inline-block;
  495. text-align: left;
  496. position: relative;
  497. -webkit-box-sizing: border-box;
  498. -moz-box-sizing: border-box;
  499. box-sizing: border-box;
  500. -webkit-transition: height 0.3s;
  501. -moz-transition: height 0.3s;
  502. -ms-transition: height 0.3s;
  503. -o-transition: height 0.3s;
  504. margin-top: 0;
  505. float: left;
  506. height: 0;
  507. margin-top: 0 !important; }
  508. .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content {
  509. position: relative; }
  510. .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list {
  511. list-style-type: none;
  512. margin: 0;
  513. padding: 8px 0;
  514. min-width: 72px; }
  515. .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li {
  516. padding: 0;
  517. margin: 0;
  518. font-size: 15px; }
  519. .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a {
  520. padding: 0 20px;
  521. line-height: 200%;
  522. display: flex;
  523. cursor: pointer;
  524. white-space: nowrap;
  525. color: inherit;
  526. text-decoration: none;
  527. border-radius: 0;
  528. -moz-border-radius: 0;
  529. -webkit-border-radius: 0;
  530. -moz-background-clip: padding;
  531. -webkit-background-clip: padding-box;
  532. background-clip: padding-box; }
  533. .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a svg {
  534. width: 24px;
  535. height: 24px;
  536. margin: 3px 4px; }
  537. .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a svg path {
  538. fill: #333333; }
  539. .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a.fr-active {
  540. background: #d6d6d6; }
  541. .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a.fr-disabled {
  542. color: #bdbdbd;
  543. cursor: default; }
  544. .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a .fr-shortcut {
  545. margin-left: 20px;
  546. font-weight: bold;
  547. -webkit-opacity: 0.75;
  548. -moz-opacity: 0.75;
  549. opacity: 0.75; }
  550. .fr-command.fr-btn.fr-active + .fr-dropdown-menu {
  551. display: inline-block;
  552. -webkit-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  553. -moz-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  554. box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); }
  555. .fr-bottom > .fr-command.fr-btn + .fr-dropdown-menu {
  556. border-radius: 2px 2px 0 0;
  557. -moz-border-radius: 2px 2px 0 0;
  558. -webkit-border-radius: 2px 2px 0 0;
  559. -moz-background-clip: padding;
  560. -webkit-background-clip: padding-box;
  561. background-clip: padding-box; }
  562. .fr-toolbar.fr-rtl .fr-dropdown-wrapper, .fr-popup.fr-rtl .fr-dropdown-wrapper {
  563. text-align: right !important; }
  564. body.prevent-scroll {
  565. overflow: hidden; }
  566. body.prevent-scroll.fr-mobile {
  567. position: fixed;
  568. -webkit-overflow-scrolling: touch; }
  569. .fr-modal {
  570. color: #222222;
  571. font-family: Arial, Helvetica, sans-serif;
  572. position: fixed;
  573. overflow-x: auto;
  574. overflow-y: scroll;
  575. top: 0;
  576. left: 0;
  577. bottom: 0;
  578. right: 0;
  579. width: 100%;
  580. z-index: 2147483640;
  581. text-rendering: optimizelegibility;
  582. -webkit-font-smoothing: antialiased;
  583. -moz-osx-font-smoothing: grayscale;
  584. text-align: center;
  585. line-height: 1.2; }
  586. .fr-modal.fr-middle .fr-modal-wrapper {
  587. margin-top: 0;
  588. margin-bottom: 0;
  589. margin-left: auto;
  590. margin-right: auto;
  591. top: 50%;
  592. left: 50%;
  593. -webkit-transform: translate(-50%, -50%);
  594. -moz-transform: translate(-50%, -50%);
  595. -ms-transform: translate(-50%, -50%);
  596. -o-transform: translate(-50%, -50%);
  597. position: absolute; }
  598. .fr-modal .fr-modal-wrapper {
  599. border-radius: 10px;
  600. -moz-border-radius: 10px;
  601. -webkit-border-radius: 10px;
  602. -moz-background-clip: padding;
  603. -webkit-background-clip: padding-box;
  604. background-clip: padding-box;
  605. background-clip: padding-box;
  606. margin: 20px auto;
  607. display: inline-block;
  608. background: #FFF;
  609. min-width: 300px;
  610. -webkit-box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
  611. -moz-box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
  612. box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
  613. border: 0;
  614. overflow: hidden;
  615. width: 90%;
  616. position: relative; }
  617. @media (min-width: 768px) and (max-width: 991px) {
  618. .fr-modal .fr-modal-wrapper {
  619. margin: 30px auto;
  620. width: 70%; } }
  621. @media (min-width: 992px) {
  622. .fr-modal .fr-modal-wrapper {
  623. margin: 50px auto;
  624. width: 960px; } }
  625. .fr-modal .fr-modal-wrapper .fr-modal-head {
  626. background: #FFF;
  627. overflow: hidden;
  628. position: absolute;
  629. width: 100%;
  630. min-height: 42px;
  631. z-index: 3;
  632. border-bottom: solid #efefef 1px;
  633. -webkit-transition: all 0.2s ease 0s;
  634. -moz-transition: all 0.2s ease 0s;
  635. -ms-transition: all 0.2s ease 0s;
  636. -o-transition: all 0.2s ease 0s; }
  637. .fr-modal .fr-modal-wrapper .fr-modal-head .fr-modal-head-line {
  638. height: 56px;
  639. padding: 0 10px; }
  640. .fr-modal .fr-modal-wrapper .fr-modal-head .fr-modal-close {
  641. margin: 10px;
  642. position: absolute;
  643. top: 0;
  644. right: 0; }
  645. .fr-modal .fr-modal-wrapper .fr-modal-head h4 {
  646. font-size: 20px;
  647. padding: 19px 10px;
  648. margin: 0;
  649. font-weight: 400;
  650. line-height: 18px;
  651. display: inline-block;
  652. float: left; }
  653. .fr-modal .fr-modal-wrapper div.fr-modal-body {
  654. height: 100%;
  655. min-height: 150px;
  656. overflow-y: auto;
  657. padding-bottom: 20px; }
  658. .fr-modal .fr-modal-wrapper div.fr-modal-body:focus {
  659. outline: 0; }
  660. .fr-modal .fr-modal-wrapper div.fr-modal-body button.fr-command {
  661. height: 36px;
  662. line-height: 1;
  663. color: #0098f7;
  664. padding: 10px;
  665. cursor: pointer;
  666. text-decoration: none;
  667. border: none;
  668. background: none;
  669. font-size: 16px;
  670. outline: none;
  671. -webkit-transition: background 0.2s ease 0s;
  672. -moz-transition: background 0.2s ease 0s;
  673. -ms-transition: background 0.2s ease 0s;
  674. -o-transition: background 0.2s ease 0s;
  675. border-radius: 2px;
  676. -moz-border-radius: 2px;
  677. -webkit-border-radius: 2px;
  678. -moz-background-clip: padding;
  679. -webkit-background-clip: padding-box;
  680. background-clip: padding-box; }
  681. .fr-modal .fr-modal-wrapper div.fr-modal-body button.fr-command + button {
  682. margin-left: 24px; }
  683. .fr-modal .fr-modal-wrapper div.fr-modal-body button.fr-command:hover, .fr-modal .fr-modal-wrapper div.fr-modal-body button.fr-command:focus {
  684. background: #ebebeb;
  685. color: #0098f7; }
  686. .fr-modal .fr-modal-wrapper div.fr-modal-body button.fr-command:active {
  687. background: #d6d6d6;
  688. color: #0098f7; }
  689. .fr-modal .fr-modal-wrapper div.fr-modal-body button::-moz-focus-inner {
  690. border: 0; }
  691. .fr-desktop .fr-modal-wrapper .fr-modal-head i:hover {
  692. background: #ebebeb; }
  693. .fr-overlay {
  694. position: fixed;
  695. top: 0;
  696. bottom: 0;
  697. left: 0;
  698. right: 0;
  699. background: #000;
  700. -webkit-opacity: 0.5;
  701. -moz-opacity: 0.5;
  702. opacity: 0.5;
  703. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  704. z-index: 2147483639; }
  705. .fr-popup {
  706. position: absolute;
  707. display: none;
  708. color: #222222;
  709. background: #FFF;
  710. -webkit-box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
  711. -moz-box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
  712. box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
  713. font-family: Arial, Helvetica, sans-serif;
  714. -webkit-box-sizing: border-box;
  715. -moz-box-sizing: border-box;
  716. box-sizing: border-box;
  717. user-select: none;
  718. -o-user-select: none;
  719. -moz-user-select: none;
  720. -khtml-user-select: none;
  721. -webkit-user-select: none;
  722. -ms-user-select: none;
  723. margin-top: 10px;
  724. z-index: 2147483635;
  725. text-align: left;
  726. border-radius: 6px;
  727. -moz-border-radius: 6px;
  728. -webkit-border-radius: 6px;
  729. -moz-background-clip: padding;
  730. -webkit-background-clip: padding-box;
  731. background-clip: padding-box;
  732. text-rendering: optimizelegibility;
  733. -webkit-font-smoothing: antialiased;
  734. -moz-osx-font-smoothing: grayscale;
  735. line-height: 1.2; }
  736. .fr-popup .fr-icon {
  737. text-align: center;
  738. vertical-align: middle;
  739. font-size: 20px;
  740. line-height: 1;
  741. cursor: pointer;
  742. font-weight: 400;
  743. box-sizing: content-box;
  744. padding: 6px; }
  745. .fr-popup .fr-icon-container {
  746. padding: 20px;
  747. max-height: 200px;
  748. overflow: auto;
  749. -webkit-box-sizing: border-box;
  750. -moz-box-sizing: border-box;
  751. box-sizing: border-box; }
  752. @supports not (-ms-high-contrast: none) {
  753. .fr-popup .fr-icon-container {
  754. grid-template-columns: repeat(auto-fill, minmax(36px, 36px));
  755. display: grid; } }
  756. @media (min-width: 768px) {
  757. .fr-popup .fr-icon-container {
  758. min-width: 276px; } }
  759. @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  760. .fr-popup .fr-icon-container {
  761. display: inline-flex;
  762. -ms-flex-flow: row wrap; } }
  763. @media screen and (-ms-high-contrast: active) and (max-width: 768px), (-ms-high-contrast: none) and (max-width: 768px) {
  764. .fr-popup .fr-icon-container {
  765. width: 236px; } }
  766. .fr-popup .fr-input-focus {
  767. background: whitesmoke; }
  768. .fr-popup.fr-above {
  769. margin-top: -10px;
  770. border-top: 0; }
  771. .fr-popup.fr-active {
  772. display: block; }
  773. .fr-popup.fr-hidden {
  774. -webkit-opacity: 0;
  775. -moz-opacity: 0;
  776. opacity: 0;
  777. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
  778. .fr-popup.fr-empty {
  779. display: none !important; }
  780. .fr-popup .fr-hs {
  781. display: block !important; }
  782. .fr-popup .fr-hs.fr-hidden {
  783. display: none !important; }
  784. .fr-popup .fr-input-line {
  785. position: relative;
  786. padding: 15px 0; }
  787. .fr-popup .fr-input-line input[type="text"], .fr-popup .fr-input-line textarea {
  788. width: 100%;
  789. margin-bottom: 1px;
  790. border-radius: 2px;
  791. -moz-border-radius: 2px;
  792. -webkit-border-radius: 2px;
  793. -moz-background-clip: padding;
  794. -webkit-background-clip: padding-box;
  795. background-clip: padding-box;
  796. border: solid 1px #999999;
  797. color: #222222;
  798. font-size: 14px;
  799. background: #FFF;
  800. position: relative;
  801. z-index: 2;
  802. padding: 4px 12px;
  803. -webkit-box-sizing: border-box;
  804. -moz-box-sizing: border-box;
  805. box-sizing: border-box;
  806. -webkit-transition: border 0.5s, padding 0.5s;
  807. -moz-transition: border 0.5s, padding 0.5s;
  808. -ms-transition: border 0.5s, padding 0.5s;
  809. -o-transition: border 0.5s, padding 0.5s; }
  810. .fr-popup .fr-input-line input[type="text"]:hover, .fr-popup .fr-input-line textarea:hover {
  811. border: solid 1px #515151; }
  812. .fr-popup .fr-input-line input[type="text"]:focus, .fr-popup .fr-input-line textarea:focus {
  813. border: solid 2px #0098f7;
  814. padding: 3px 11px; }
  815. .fr-popup .fr-input-line input[type="text"] {
  816. height: 46px; }
  817. .fr-popup .fr-input-line input + label, .fr-popup .fr-input-line textarea + label {
  818. position: absolute;
  819. top: 29px;
  820. left: 12px;
  821. font-size: 14px;
  822. color: grey;
  823. -webkit-transition: all 0.5s ease;
  824. -moz-transition: all 0.5s ease;
  825. -ms-transition: all 0.5s ease;
  826. -o-transition: all 0.5s ease;
  827. z-index: 3;
  828. display: block;
  829. background: #FFF;
  830. padding: 0;
  831. cursor: text; }
  832. .fr-popup .fr-input-line input.fr-not-empty + label, .fr-popup .fr-input-line textarea.fr-not-empty + label {
  833. color: gray;
  834. width: auto;
  835. left: 4px;
  836. padding: 0 4px;
  837. font-size: 11px;
  838. top: 9px; }
  839. .fr-popup input, .fr-popup textarea {
  840. user-select: text;
  841. -o-user-select: text;
  842. -moz-user-select: text;
  843. -khtml-user-select: text;
  844. -webkit-user-select: text;
  845. -ms-user-select: text;
  846. border-radius: 0;
  847. -moz-border-radius: 0;
  848. -webkit-border-radius: 0;
  849. -moz-background-clip: padding;
  850. -webkit-background-clip: padding-box;
  851. background-clip: padding-box;
  852. outline: none; }
  853. .fr-popup textarea {
  854. resize: none; }
  855. .fr-popup .fr-buttons {
  856. white-space: nowrap;
  857. line-height: 0; }
  858. .fr-popup .fr-buttons .fr-btn {
  859. margin-left: 4px;
  860. margin-right: 4px;
  861. display: inline-block;
  862. float: none; }
  863. .fr-popup .fr-buttons .fr-btn i {
  864. float: left; }
  865. .fr-popup .fr-buttons .fr-separator {
  866. display: inline-block;
  867. float: none; }
  868. .fr-popup .fr-buttons.fr-tabs {
  869. border-radius: 6px 6px 0 0;
  870. -moz-border-radius: 6px 6px 0 0;
  871. -webkit-border-radius: 6px 6px 0 0;
  872. -moz-background-clip: padding;
  873. -webkit-background-clip: padding-box;
  874. background-clip: padding-box;
  875. background-color: #f5f5f5;
  876. overflow: hidden; }
  877. @media (max-width: 768px) {
  878. .fr-popup .fr-buttons.fr-tabs.fr-tabs-scroll {
  879. overflow: scroll;
  880. overflow-y: hidden;
  881. width: 276px; } }
  882. .fr-popup .fr-buttons:not(.fr-tabs) {
  883. padding: 5px; }
  884. .fr-popup .fr-layer {
  885. border-radius: 6px;
  886. -moz-border-radius: 6px;
  887. -webkit-border-radius: 6px;
  888. -moz-background-clip: padding;
  889. -webkit-background-clip: padding-box;
  890. background-clip: padding-box;
  891. width: 195px;
  892. -webkit-box-sizing: border-box;
  893. -moz-box-sizing: border-box;
  894. box-sizing: border-box;
  895. margin: 20px;
  896. display: none; }
  897. @media (min-width: 768px) {
  898. .fr-popup .fr-layer {
  899. width: 260px; } }
  900. .fr-popup .fr-layer.fr-active {
  901. display: inline-block; }
  902. .fr-popup .fr-action-buttons {
  903. z-index: 7;
  904. height: 36px;
  905. text-align: right; }
  906. .fr-popup .fr-action-buttons button.fr-command {
  907. height: 36px;
  908. line-height: 1;
  909. color: #0098f7;
  910. padding: 10px;
  911. cursor: pointer;
  912. text-decoration: none;
  913. border: none;
  914. background: none;
  915. font-size: 16px;
  916. outline: none;
  917. -webkit-transition: background 0.2s ease 0s;
  918. -moz-transition: background 0.2s ease 0s;
  919. -ms-transition: background 0.2s ease 0s;
  920. -o-transition: background 0.2s ease 0s;
  921. border-radius: 2px;
  922. -moz-border-radius: 2px;
  923. -webkit-border-radius: 2px;
  924. -moz-background-clip: padding;
  925. -webkit-background-clip: padding-box;
  926. background-clip: padding-box; }
  927. .fr-popup .fr-action-buttons button.fr-command + button {
  928. margin-left: 24px; }
  929. .fr-popup .fr-action-buttons button.fr-command:hover, .fr-popup .fr-action-buttons button.fr-command:focus {
  930. background: #ebebeb;
  931. color: #0098f7; }
  932. .fr-popup .fr-action-buttons button.fr-command:active {
  933. background: #d6d6d6;
  934. color: #0098f7; }
  935. .fr-popup .fr-action-buttons button::-moz-focus-inner {
  936. border: 0; }
  937. .fr-popup .fr-checkbox {
  938. position: relative;
  939. display: inline-block;
  940. width: 18px;
  941. height: 18px;
  942. padding: 10px;
  943. border-radius: 100%;
  944. line-height: 1;
  945. -webkit-box-sizing: content-box;
  946. -moz-box-sizing: content-box;
  947. box-sizing: content-box;
  948. vertical-align: middle; }
  949. .fr-popup .fr-checkbox svg {
  950. margin-left: 2px;
  951. margin-top: 2px;
  952. display: none;
  953. width: 10px;
  954. height: 10px; }
  955. .fr-popup .fr-checkbox span {
  956. border-radius: 2px;
  957. -moz-border-radius: 2px;
  958. -webkit-border-radius: 2px;
  959. -moz-background-clip: padding;
  960. -webkit-background-clip: padding-box;
  961. background-clip: padding-box;
  962. width: 18px;
  963. height: 18px;
  964. display: inline-block;
  965. position: relative;
  966. z-index: 1;
  967. -webkit-box-sizing: border-box;
  968. -moz-box-sizing: border-box;
  969. box-sizing: border-box;
  970. -webkit-transition: background 0.2s ease 0s, border-color 0.2s ease 0s;
  971. -moz-transition: background 0.2s ease 0s, border-color 0.2s ease 0s;
  972. -ms-transition: background 0.2s ease 0s, border-color 0.2s ease 0s;
  973. -o-transition: background 0.2s ease 0s, border-color 0.2s ease 0s; }
  974. .fr-popup .fr-checkbox input {
  975. position: absolute;
  976. z-index: 2;
  977. -webkit-opacity: 0;
  978. -moz-opacity: 0;
  979. opacity: 0;
  980. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  981. border: 0 none;
  982. cursor: pointer;
  983. height: 18px;
  984. margin: 0;
  985. padding: 0;
  986. width: 18px;
  987. top: 7px;
  988. left: 7px; }
  989. .fr-popup .fr-checkbox input:not(:checked) + span {
  990. border: solid 2px #999999; }
  991. .fr-popup .fr-checkbox input:not(:checked):active + span {
  992. background-color: #f5f5f5; }
  993. .fr-popup .fr-checkbox input:not(:checked):focus + span, .fr-popup .fr-checkbox input:not(:checked):hover + span {
  994. border-color: #515151; }
  995. .fr-popup .fr-checkbox input:checked + span {
  996. background: #0098f7;
  997. border: solid 2px #0098f7; }
  998. .fr-popup .fr-checkbox input:checked + span svg {
  999. display: block; }
  1000. .fr-popup .fr-checkbox input:checked:active + span {
  1001. background-color: #EcF5Ff; }
  1002. .fr-popup .fr-checkbox input:checked:focus + span, .fr-popup .fr-checkbox input:checked:hover + span {
  1003. -webkit-opacity: 0.8;
  1004. -moz-opacity: 0.8;
  1005. opacity: 0.8;
  1006. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
  1007. .fr-popup .fr-checkbox-line {
  1008. font-size: 14px;
  1009. line-height: 1.4px;
  1010. margin-top: 10px; }
  1011. .fr-popup .fr-checkbox-line label {
  1012. cursor: pointer;
  1013. margin: 0 5px;
  1014. vertical-align: middle; }
  1015. .fr-popup.fr-rtl {
  1016. direction: rtl;
  1017. text-align: right; }
  1018. .fr-popup.fr-rtl .fr-action-buttons {
  1019. text-align: left; }
  1020. .fr-popup.fr-rtl .fr-input-line input + label, .fr-popup.fr-rtl .fr-input-line textarea + label {
  1021. left: auto;
  1022. right: 0; }
  1023. .fr-popup.fr-rtl .fr-buttons .fr-separator.fr-vs {
  1024. float: right; }
  1025. .fr-text-edit-layer {
  1026. width: 250px;
  1027. -webkit-box-sizing: border-box;
  1028. -moz-box-sizing: border-box;
  1029. box-sizing: border-box;
  1030. display: block !important; }
  1031. .fr-toolbar {
  1032. color: #222222;
  1033. background: #FFF;
  1034. position: relative;
  1035. font-family: Arial, Helvetica, sans-serif;
  1036. -webkit-box-sizing: border-box;
  1037. -moz-box-sizing: border-box;
  1038. box-sizing: border-box;
  1039. user-select: none;
  1040. -o-user-select: none;
  1041. -moz-user-select: none;
  1042. -khtml-user-select: none;
  1043. -webkit-user-select: none;
  1044. -ms-user-select: none;
  1045. border-radius: 2px;
  1046. -moz-border-radius: 2px;
  1047. -webkit-border-radius: 2px;
  1048. -moz-background-clip: padding;
  1049. -webkit-background-clip: padding-box;
  1050. background-clip: padding-box;
  1051. text-align: left;
  1052. border: 1px solid #CCCCCC;
  1053. text-rendering: optimizelegibility;
  1054. -webkit-font-smoothing: antialiased;
  1055. -moz-osx-font-smoothing: grayscale;
  1056. line-height: 1.2;
  1057. padding-bottom: 0;
  1058. -webkit-transition: padding-bottom 0.5s;
  1059. -moz-transition: padding-bottom 0.5s;
  1060. -ms-transition: padding-bottom 0.5s;
  1061. -o-transition: padding-bottom 0.5s; }
  1062. .fr-toolbar::after {
  1063. clear: both;
  1064. display: block;
  1065. content: "";
  1066. height: 0; }
  1067. .fr-toolbar::after {
  1068. height: 0; }
  1069. .fr-toolbar .fr-newline {
  1070. clear: both;
  1071. display: block;
  1072. content: "";
  1073. margin-left: 9px;
  1074. margin-right: 9px;
  1075. background: #efefef;
  1076. height: 1px;
  1077. -webkit-transition: height 0.5s;
  1078. -moz-transition: height 0.5s;
  1079. -ms-transition: height 0.5s;
  1080. -o-transition: height 0.5s; }
  1081. .fr-toolbar.fr-toolbar-open {
  1082. padding-bottom: 48px; }
  1083. .fr-toolbar.fr-toolbar-open .fr-newline {
  1084. height: 0; }
  1085. .fr-toolbar .fr-float-right {
  1086. float: right; }
  1087. .fr-toolbar .fr-float-left {
  1088. float: left; }
  1089. .fr-toolbar .fr-more-toolbar {
  1090. float: left;
  1091. border-radius: 0;
  1092. -moz-border-radius: 0;
  1093. -webkit-border-radius: 0;
  1094. -moz-background-clip: padding;
  1095. -webkit-background-clip: padding-box;
  1096. background-clip: padding-box;
  1097. background-color: #f5f5f5;
  1098. -webkit-transition: height 0.5s;
  1099. -moz-transition: height 0.5s;
  1100. -ms-transition: height 0.5s;
  1101. -o-transition: height 0.5s;
  1102. height: 0;
  1103. z-index: 2;
  1104. overflow: hidden;
  1105. position: absolute;
  1106. -webkit-box-sizing: border-box;
  1107. -moz-box-sizing: border-box;
  1108. box-sizing: border-box;
  1109. width: 100%; }
  1110. .fr-toolbar .fr-more-toolbar.fr-expanded {
  1111. height: 48px; }
  1112. .fr-toolbar .fr-more-toolbar.fr-overflow-visible {
  1113. overflow: visible; }
  1114. .fr-toolbar .fr-more-toolbar > .fr-command.fr-btn {
  1115. margin-left: 4px;
  1116. margin-right: 4px; }
  1117. .fr-toolbar .fr-btn-grp {
  1118. display: inline-block;
  1119. margin: 0 17px 0 12px; }
  1120. @media (max-width: 768px) {
  1121. .fr-toolbar .fr-btn-grp {
  1122. margin: 0 7px 0 6px; } }
  1123. .fr-toolbar .fr-command.fr-btn.fr-open {
  1124. margin-top: 10px;
  1125. margin-bottom: -1px;
  1126. border-radius: 4px 4px 0 0;
  1127. -moz-border-radius: 4px 4px 0 0;
  1128. -webkit-border-radius: 4px 4px 0 0;
  1129. -moz-background-clip: padding;
  1130. -webkit-background-clip: padding-box;
  1131. background-clip: padding-box; }
  1132. .fr-toolbar .fr-command.fr-btn.fr-open:not(:hover):not(:focus):not(:active) {
  1133. background: #f5f5f5; }
  1134. .fr-toolbar.fr-rtl {
  1135. text-align: right; }
  1136. .fr-toolbar.fr-inline {
  1137. display: none;
  1138. -webkit-box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
  1139. -moz-box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
  1140. box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
  1141. border: 0;
  1142. white-space: nowrap;
  1143. position: absolute;
  1144. margin-top: 5px;
  1145. z-index: 2147483630; }
  1146. .fr-toolbar.fr-inline.fr-above {
  1147. margin-top: -10px;
  1148. border-top: 0; }
  1149. .fr-toolbar.fr-inline .fr-newline {
  1150. height: 0; }
  1151. .fr-toolbar.fr-top {
  1152. top: 0;
  1153. border-bottom: 0;
  1154. border-radius: 10px 10px 0 0;
  1155. -moz-border-radius: 10px 10px 0 0;
  1156. -webkit-border-radius: 10px 10px 0 0;
  1157. -moz-background-clip: padding;
  1158. -webkit-background-clip: padding-box;
  1159. background-clip: padding-box; }
  1160. .fr-toolbar.fr-bottom {
  1161. bottom: 0;
  1162. border-top: 0;
  1163. padding-bottom: 0;
  1164. border-radius: 0 0 10px 10px;
  1165. -moz-border-radius: 0 0 10px 10px;
  1166. -webkit-border-radius: 0 0 10px 10px;
  1167. -moz-background-clip: padding;
  1168. -webkit-background-clip: padding-box;
  1169. background-clip: padding-box; }
  1170. .fr-toolbar.fr-bottom .fr-newline {
  1171. padding-top: 0;
  1172. -webkit-transition: padding-top 0.5s;
  1173. -moz-transition: padding-top 0.5s;
  1174. -ms-transition: padding-top 0.5s;
  1175. -o-transition: padding-top 0.5s; }
  1176. .fr-toolbar.fr-bottom.fr-toolbar-open .fr-newline {
  1177. padding-top: 48px;
  1178. background: #FFF; }
  1179. .fr-toolbar.fr-bottom .fr-command.fr-btn.fr-open {
  1180. margin-top: -1px;
  1181. margin-bottom: 10px;
  1182. border-radius: 0 0 4px 4px;
  1183. -moz-border-radius: 0 0 4px 4px;
  1184. -webkit-border-radius: 0 0 4px 4px;
  1185. -moz-background-clip: padding;
  1186. -webkit-background-clip: padding-box;
  1187. background-clip: padding-box; }
  1188. .fr-toolbar.fr-sticky-on {
  1189. border-radius: 0;
  1190. -moz-border-radius: 0;
  1191. -webkit-border-radius: 0;
  1192. -moz-background-clip: padding;
  1193. -webkit-background-clip: padding-box;
  1194. background-clip: padding-box; }
  1195. .fr-separator {
  1196. background: #ebebeb;
  1197. display: block;
  1198. vertical-align: top;
  1199. float: left; }
  1200. .fr-separator + .fr-separator {
  1201. display: none; }
  1202. .fr-separator.fr-vs {
  1203. height: 32px;
  1204. width: 1px;
  1205. margin: 4px; }
  1206. .fr-separator.fr-hs {
  1207. clear: both;
  1208. width: calc(100% - (2 * 4px));
  1209. margin: 0 4px; }
  1210. .fr-separator.fr-hidden {
  1211. display: none !important; }
  1212. .fr-rtl .fr-separator {
  1213. float: right; }
  1214. .fr-toolbar.fr-inline .fr-separator.fr-hs {
  1215. float: none; }
  1216. .fr-toolbar.fr-inline .fr-separator.fr-vs {
  1217. float: none;
  1218. display: inline-block; }
  1219. .second-toolbar {
  1220. border: 1px solid #CCCCCC;
  1221. border-top: 0;
  1222. background: #FFF;
  1223. line-height: 1.4;
  1224. border-radius: 0 0 10px 10px;
  1225. -moz-border-radius: 0 0 10px 10px;
  1226. -webkit-border-radius: 0 0 10px 10px;
  1227. -moz-background-clip: padding;
  1228. -webkit-background-clip: padding-box;
  1229. background-clip: padding-box; }
  1230. .second-toolbar::after {
  1231. clear: both;
  1232. display: block;
  1233. content: "";
  1234. height: 0; }
  1235. #logo {
  1236. float: left;
  1237. outline: none; }
  1238. #logo > span {
  1239. display: inline-block;
  1240. float: left;
  1241. font-family: sans-serif;
  1242. padding: 11px 5px 10px 15px;
  1243. font-size: 12px;
  1244. font-weight: 500;
  1245. color: #b1b2b7;
  1246. -webkit-transition: color 0.3s;
  1247. -moz-transition: color 0.3s;
  1248. -ms-transition: color 0.3s;
  1249. -o-transition: color 0.3s; }
  1250. #logo > svg {
  1251. height: 20px;
  1252. width: 47px;
  1253. margin: 7px 0;
  1254. cursor: pointer; }
  1255. #logo > svg * {
  1256. -webkit-transition: fill 0.3s;
  1257. -moz-transition: fill 0.3s;
  1258. -ms-transition: fill 0.3s;
  1259. -o-transition: fill 0.3s; }
  1260. #logo:hover > span, #logo:focus > span {
  1261. color: #0098f7; }
  1262. #logo:hover > svg .fr-logo, #logo:focus > svg .fr-logo {
  1263. fill: #0098f7; }
  1264. .fr-visibility-helper {
  1265. display: none;
  1266. margin-left: 0 !important; }
  1267. @media (min-width: 768px) {
  1268. .fr-visibility-helper {
  1269. margin-left: 1px !important; } }
  1270. @media (min-width: 992px) {
  1271. .fr-visibility-helper {
  1272. margin-left: 2px !important; } }
  1273. @media (min-width: 1200px) {
  1274. .fr-visibility-helper {
  1275. margin-left: 3px !important; } }
  1276. .fr-opacity-0 {
  1277. -webkit-opacity: 0;
  1278. -moz-opacity: 0;
  1279. opacity: 0;
  1280. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
  1281. .fr-box {
  1282. position: relative; }
  1283. /**
  1284. * Postion sticky hacks.
  1285. */
  1286. .fr-sticky {
  1287. position: -webkit-sticky;
  1288. position: -moz-sticky;
  1289. position: -ms-sticky;
  1290. position: -o-sticky;
  1291. position: sticky; }
  1292. .fr-sticky-off {
  1293. position: relative; }
  1294. .fr-sticky-on {
  1295. position: fixed;
  1296. z-index: 10; }
  1297. .fr-sticky-on.fr-sticky-ios {
  1298. position: absolute;
  1299. left: 0;
  1300. right: 0;
  1301. width: auto !important; }
  1302. .fr-sticky-dummy {
  1303. display: none; }
  1304. .fr-sticky-on + .fr-sticky-dummy, .fr-sticky-box > .fr-sticky-dummy {
  1305. display: block; }
  1306. span.fr-sr-only {
  1307. position: absolute;
  1308. width: 1px;
  1309. height: 1px;
  1310. padding: 0;
  1311. margin: -1px;
  1312. overflow: hidden;
  1313. clip: rect(0, 0, 0, 0);
  1314. border: 0; }