canvas.css 34 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598
  1. * {
  2. font-family: 'Open Sans', sans-serif;
  3. box-sizing: border-box;
  4. -moz-box-sizing: border-box;
  5. }
  6. html, body {
  7. height: 100%;
  8. }
  9. p {
  10. font-size: 0.95em;
  11. }
  12. pre {
  13. border: none;
  14. background-color: #eceff1;
  15. visibility: hidden;
  16. }
  17. /* ----------------------------------------------
  18. Logo
  19. ----------------------------------------------- */
  20. a.logo {
  21. display: block;
  22. }
  23. a.logo img {
  24. display: block;
  25. width: 60%;
  26. margin: auto;
  27. }
  28. /* ----------------------------------------------
  29. Form header
  30. ----------------------------------------------- */
  31. .form-header {
  32. width: 100%;
  33. margin: 0 auto 1.14em auto;
  34. /* background-color:#546e7a; */
  35. background-color: #eceff1;
  36. border-radius: 0 0 5px 5px;
  37. min-height: 6em;
  38. }
  39. .form-header h1 {
  40. color: #444;
  41. font-size: 1.9em;
  42. text-align: left;
  43. }
  44. .form-header h2 {
  45. font-size: 1.4em;
  46. color: #444;
  47. }
  48. .form-header p {
  49. font-size: 0.9em;
  50. margin-top: 1em;
  51. color: #444;
  52. }
  53. .form-header label {
  54. font-size: 1.1em;
  55. margin-top: 1.8em;
  56. margin-right: 0.3em;
  57. color: #444;
  58. }
  59. .form-header input {
  60. width: 62%;
  61. outline: none;
  62. border: 1px solid #eceff1;
  63. border-radius: 4px;
  64. padding: 0.45em;
  65. }
  66. /* ----------------------------------------------
  67. Jump to
  68. ----------------------------------------------- */
  69. .jump-to {
  70. width: 100%;
  71. margin: -1.14em auto 2.14em auto;
  72. background-color: #eceff1;
  73. border-radius: 5px;
  74. min-height: 6em;
  75. padding: 1em 1em 0.3em 1em;
  76. display: none;
  77. }
  78. .jump-to label {
  79. font-size: 1.1em;
  80. margin-right: 0.3em;
  81. color: #444;
  82. }
  83. .jump-to ul {
  84. list-style-type: none;
  85. padding-left: 0;
  86. }
  87. /* ----------------------------------------------
  88. Saved tags
  89. ----------------------------------------------- */
  90. .saved-tags {
  91. width: 100%;
  92. margin: -1.14em auto 1.04em auto;
  93. background-color: #eceff1;
  94. border-radius: 5px;
  95. padding: 1em 1em 1em 1em;
  96. }
  97. .saved-tags label {
  98. font-size: 1.1em;
  99. margin-right: 1.8em;
  100. color: #444;
  101. }
  102. .saved-tags p {
  103. display: inline;
  104. line-height: 2.25em;
  105. }
  106. /* ----------------------------------------------
  107. DROPDOWN MENU (User DASHBOARD menu)
  108. ----------------------------------------------- */
  109. /* User area button and dropdown menu in the header: only shown when logged in */
  110. .form-header .user-profile {
  111. font-size: 1em;
  112. margin-top: 1.8em;
  113. margin-right: 0.3em;
  114. color: #444;
  115. min-width: 80%;
  116. margin-left: 3.5em;
  117. }
  118. .form-header .user-profile li:hover {
  119. background-color: #ffffff;
  120. }
  121. .form-header .user-profile img {
  122. width: 2.6em;
  123. margin-right: 0.5em;
  124. }
  125. .form-header .user-profile button {
  126. padding: 0.2em 1em;
  127. width: 90%;
  128. border: none;
  129. border-radius: 2px;
  130. outline: 0;
  131. background-color: transparent;
  132. transition: all 0.5s;
  133. }
  134. .form-header .user-profile button:hover {
  135. padding: 0.2em;
  136. }
  137. /* Bootstrap dropdown classes */
  138. ul.dropdown-menu {
  139. border: none;
  140. border-radius: 2px;
  141. width: 90%;
  142. margin: 0 5%;
  143. box-shadow: none;
  144. background-color: #48585f;
  145. }
  146. ul.dropdown-menu a {
  147. color: #ffffff;
  148. }
  149. /* The button When the drop down menu is open */
  150. .dropdown.open button#dropdownMenu1 {
  151. background-color: #ffffff;
  152. }
  153. /* ----------------------------------------------
  154. Masonry Blocks
  155. ----------------------------------------------- */
  156. .masonry-layout7-5 {
  157. -webkit-column-count: 5;
  158. /* Chrome, Safari, Opera */
  159. -moz-column-count: 5;
  160. /* Firefox */
  161. column-count: 5;
  162. -webkit-column-gap: 0;
  163. /* Chrome, Safari, Opera */
  164. -moz-column-gap: 0;
  165. /* Firefox */
  166. column-gap: 0;
  167. }
  168. .masonry-layout4 {
  169. -webkit-column-count: 4;
  170. /* Chrome, Safari, Opera */
  171. -moz-column-count: 4;
  172. /* Firefox */
  173. column-count: 4;
  174. -webkit-column-gap: 0;
  175. /* Chrome, Safari, Opera */
  176. -moz-column-gap: 0;
  177. /* Firefox */
  178. column-gap: 0;
  179. }
  180. .masonry-layout2 {
  181. -webkit-column-count: 2;
  182. /* Chrome, Safari, Opera */
  183. -moz-column-count: 2;
  184. /* Firefox */
  185. column-count: 2;
  186. -webkit-column-gap: 0;
  187. /* Chrome, Safari, Opera */
  188. -moz-column-gap: 0;
  189. /* Firefox */
  190. column-gap: 0;
  191. }
  192. .masonry-layout__panel {
  193. break-inside: avoid;
  194. padding: 0.36em;
  195. }
  196. .masonry-layout__panel-content {
  197. padding: 5px 4px;
  198. border-radius: 10px;
  199. }
  200. /* ----------------------------------------------
  201. Field content and items
  202. ----------------------------------------------- */
  203. /* Tooltip */
  204. .tooltip-inner {
  205. padding: 7px 10px 7px 10px;
  206. text-align: left;
  207. }
  208. /* The field introduction text */
  209. /*
  210. .intro {
  211. padding: 1em 1.3em 0 1.3em;
  212. color: rgba(0, 0, 0, 0.75);
  213. font-style: italic;
  214. }
  215. */
  216. /* The description text toggler btn */
  217. /*
  218. .intro-toggle {
  219. padding: 0.25em 1.2em;
  220. border: none;
  221. outline: none;
  222. background-color: transparent;
  223. }
  224. */
  225. /* The show/hide text Bootstrap Glyphicon icon */
  226. /*
  227. .intro-toggle-icon {
  228. padding: 0.4em;
  229. font-size: 1em;
  230. }
  231. */
  232. .field-title {
  233. font-size: 1.4em;
  234. margin-left: 0.8em;
  235. line-height: 1.5;
  236. }
  237. .field-title a {
  238. float: right;
  239. color: rgb(51, 51, 51);
  240. }
  241. .field-title .glyphicon-question-sign {
  242. margin: 0.225em 0.5em 0 0;
  243. }
  244. .field-title .glyphicon-question-sign:hover {
  245. color: #ffffff !important;
  246. }
  247. /* Item list in the field */
  248. ul.item_list {
  249. list-style-type: none;
  250. padding-left: 0;
  251. width: 100%;
  252. /* To make a place holder for empty lists. Being able to drop cards in empty fields */
  253. min-height: 0.5em;
  254. }
  255. li.added_item {
  256. width: 100%;
  257. margin: 0.5em auto;
  258. padding-top: 6px;
  259. padding-bottom: 2px;
  260. /* border-radius: 0.35em; */
  261. height: auto;
  262. overflow: scroll;
  263. /* cursor: move; */
  264. cursor: text;
  265. }
  266. ul.item_list .expandable {
  267. font-size: 0.95em;
  268. margin-left: 14px;
  269. margin-bottom: 1px;
  270. padding: 0.5em 0.5em 0.5em 1em;
  271. border-radius: 0.35em;
  272. border: 1px solid rgba(255, 255, 255, 0.2);
  273. width: 85% !important;
  274. outline: none;
  275. display: inline-block;
  276. background-color: rgba(255, 255, 255, 0.75);
  277. /* For auto expansion jQuery code */
  278. box-sizing: padding-box;
  279. overflow: hidden;
  280. }
  281. ul.item_list hr {
  282. width: 95%;
  283. color: rgb(255, 255, 255);
  284. /* margin-top: 0.2em; */
  285. /* margin-bottom: 0.2em; */
  286. /* margin-left: auto; */
  287. /* margin-right: auto; */
  288. border-style: solid;
  289. border-width: 1px;
  290. }
  291. /* ----------------------------------------------
  292. Zoom animation
  293. ----------------------------------------------- */
  294. .zoom-in-regular {
  295. -webkit-animation-name: zoom-in-regular; /* Safari 4.0-8.0 */
  296. -webkit-animation-duration: 0.5s; /* Safari 4.0-8.0 */
  297. animation-name: zoom-in-regular;
  298. animation-duration: 0.5s;
  299. /* transform: scale(1.05); */
  300. }
  301. /* Standard */
  302. @keyframes zoom-in-regular {
  303. from {
  304. -ms-transform: scale(1); /* IE 9 */
  305. -webkit-transform: scale(1); /* Safari */
  306. transform: scale(1);
  307. background-color: rgba(255, 255, 255, 0.75);
  308. }
  309. to {
  310. -ms-transform: scale(1.02); /* IE 9 */
  311. -webkit-transform: scale(1.02); /* Safari */
  312. transform: scale(1.02);
  313. background-color: rgba(255, 255, 255, 1);
  314. }
  315. }
  316. /* Safari 4.0-8.0 */
  317. @-webkit-keyframes zoom-in-regular {
  318. from {
  319. -ms-transform: scale(1); /* IE 9 */
  320. -webkit-transform: scale(1); /* Safari */
  321. transform: scale(1);
  322. background-color: rgba(255, 255, 255, 0.75);
  323. }
  324. to {
  325. -ms-transform: scale(1.02); /* IE 9 */
  326. -webkit-transform: scale(1.02); /* Safari */
  327. transform: scale(1.02);
  328. background-color: rgba(255, 255, 255, 1);
  329. }
  330. }
  331. .zoom-in-less {
  332. -webkit-animation-name: zoom-in-less; /* Safari 4.0-8.0 */
  333. -webkit-animation-duration: 0.5s; /* Safari 4.0-8.0 */
  334. animation-name: zoom-in-less;
  335. animation-duration: 0.5s;
  336. /* transform: scale(1.05); */
  337. }
  338. /* Standard */
  339. @keyframes zoom-in-less {
  340. from {
  341. -ms-transform: scale(1); /* IE 9 */
  342. -webkit-transform: scale(1); /* Safari */
  343. transform: scale(1);
  344. background-color: rgba(255, 255, 255, 0.75);
  345. }
  346. to {
  347. -ms-transform: scale(1.01); /* IE 9 */
  348. -webkit-transform: scale(1.01); /* Safari */
  349. transform: scale(1.01);
  350. background-color: rgba(255, 255, 255, 1);
  351. }
  352. }
  353. /* Safari 4.0-8.0 */
  354. @-webkit-keyframes zoom-in-less {
  355. from {
  356. -ms-transform: scale(1); /* IE 9 */
  357. -webkit-transform: scale(1); /* Safari */
  358. transform: scale(1);
  359. background-color: rgba(255, 255, 255, 0.75);
  360. }
  361. to {
  362. -ms-transform: scale(1.01); /* IE 9 */
  363. -webkit-transform: scale(1.01); /* Safari */
  364. transform: scale(1.01);
  365. background-color: rgba(255, 255, 255, 1);
  366. }
  367. }
  368. .zoom-in-least {
  369. -webkit-animation-name: zoom-in-least; /* Safari 4.0-8.0 */
  370. -webkit-animation-duration: 0.5s; /* Safari 4.0-8.0 */
  371. animation-name: zoom-in-least;
  372. animation-duration: 0.5s;
  373. /* transform: scale(1.05); */
  374. }
  375. /* Standard */
  376. @keyframes zoom-in-least {
  377. from {
  378. -ms-transform: scale(1); /* IE 9 */
  379. -webkit-transform: scale(1); /* Safari */
  380. transform: scale(1);
  381. background-color: rgba(255, 255, 255, 0.75);
  382. }
  383. to {
  384. -ms-transform: scale(1.005); /* IE 9 */
  385. -webkit-transform: scale(1.005); /* Safari */
  386. transform: scale(1.005);
  387. background-color: rgba(255, 255, 255, 1);
  388. }
  389. }
  390. /* Safari 4.0-8.0 */
  391. @-webkit-keyframes zoom-in-least {
  392. from {
  393. -ms-transform: scale(1); /* IE 9 */
  394. -webkit-transform: scale(1); /* Safari */
  395. transform: scale(1);
  396. background-color: rgba(255, 255, 255, 0.75);
  397. }
  398. to {
  399. -ms-transform: scale(1.005); /* IE 9 */
  400. -webkit-transform: scale(1.005); /* Safari */
  401. transform: scale(1.005);
  402. background-color: rgba(255, 255, 255, 1);
  403. }
  404. }
  405. .zoom-out-regular {
  406. -webkit-animation-name: zoom-out-regular; /* Safari 4.0-8.0 */
  407. -webkit-animation-duration: 0.5s; /* Safari 4.0-8.0 */
  408. animation-name: zoom-out-regular;
  409. animation-duration: 0.5s;
  410. /* transform: scale(1); */
  411. }
  412. /* Standard */
  413. @keyframes zoom-out-regular {
  414. from {
  415. -ms-transform: scale(1.02); /* IE 9 */
  416. -webkit-transform: scale(1.02); /* Safari */
  417. transform: scale(1.02);
  418. background-color: rgba(255, 255, 255, 1);
  419. }
  420. to {
  421. -ms-transform: scale(1); /* IE 9 */
  422. -webkit-transform: scale(1); /* Safari */
  423. transform: scale(1);
  424. background-color: rgba(255, 255, 255, 0.75);
  425. }
  426. }
  427. /* Safari 4.0-8.0 */
  428. @-webkit-keyframes zoom-out-regular {
  429. from {
  430. -ms-transform: scale(1.02); /* IE 9 */
  431. -webkit-transform: scale(1.02); /* Safari */
  432. transform: scale(1.02);
  433. background-color: rgba(255, 255, 255, 1);
  434. }
  435. to {
  436. -ms-transform: scale(1); /* IE 9 */
  437. -webkit-transform: scale(1); /* Safari */
  438. transform: scale(1);
  439. background-color: rgba(255, 255, 255, 0.75);
  440. }
  441. }
  442. .zoom-out-less {
  443. -webkit-animation-name: zoom-out-less; /* Safari 4.0-8.0 */
  444. -webkit-animation-duration: 0.5s; /* Safari 4.0-8.0 */
  445. animation-name: zoom-out-less;
  446. animation-duration: 0.5s;
  447. /* transform: scale(1); */
  448. }
  449. /* Standard */
  450. @keyframes zoom-out-less {
  451. from {
  452. -ms-transform: scale(1.01); /* IE 9 */
  453. -webkit-transform: scale(1.01); /* Safari */
  454. transform: scale(1.01);
  455. background-color: rgba(255, 255, 255, 1);
  456. }
  457. to {
  458. -ms-transform: scale(1); /* IE 9 */
  459. -webkit-transform: scale(1); /* Safari */
  460. transform: scale(1);
  461. background-color: rgba(255, 255, 255, 0.75);
  462. }
  463. }
  464. /* Safari 4.0-8.0 */
  465. @-webkit-keyframes zoom-out-less {
  466. from {
  467. -ms-transform: scale(1.01); /* IE 9 */
  468. -webkit-transform: scale(1.01); /* Safari */
  469. transform: scale(1.01);
  470. background-color: rgba(255, 255, 255, 1);
  471. }
  472. to {
  473. -ms-transform: scale(1); /* IE 9 */
  474. -webkit-transform: scale(1); /* Safari */
  475. transform: scale(1);
  476. background-color: rgba(255, 255, 255, 0.75);
  477. }
  478. }
  479. .zoom-out-least {
  480. -webkit-animation-name: zoom-out-least; /* Safari 4.0-8.0 */
  481. -webkit-animation-duration: 0.5s; /* Safari 4.0-8.0 */
  482. animation-name: zoom-out-least;
  483. animation-duration: 0.5s;
  484. /* transform: scale(1); */
  485. }
  486. /* Standard */
  487. @keyframes zoom-out-least {
  488. from {
  489. -ms-transform: scale(1.005); /* IE 9 */
  490. -webkit-transform: scale(1.005); /* Safari */
  491. transform: scale(1.005);
  492. background-color: rgba(255, 255, 255, 1);
  493. }
  494. to {
  495. -ms-transform: scale(1); /* IE 9 */
  496. -webkit-transform: scale(1); /* Safari */
  497. transform: scale(1);
  498. background-color: rgba(255, 255, 255, 0.75);
  499. }
  500. }
  501. /* Safari 4.0-8.0 */
  502. @-webkit-keyframes zoom-out-least {
  503. from {
  504. -ms-transform: scale(1.005); /* IE 9 */
  505. -webkit-transform: scale(1.005); /* Safari */
  506. transform: scale(1.005);
  507. background-color: rgba(255, 255, 255, 1);
  508. }
  509. to {
  510. -ms-transform: scale(1); /* IE 9 */
  511. -webkit-transform: scale(1); /* Safari */
  512. transform: scale(1);
  513. background-color: rgba(255, 255, 255, 0.75);
  514. }
  515. }
  516. /* ----------------------------------------------
  517. List item handles: Bootstrap Glyphicon
  518. ----------------------------------------------- */
  519. ul.item_list span.glyphicon {
  520. border-radius: 100%;
  521. margin-right: 10px;
  522. color: #ffffff;
  523. font-size: 1.2em;
  524. cursor: pointer;
  525. }
  526. span.glyphicon:hover {
  527. color: rgba(0, 0, 0, 0.5);
  528. }
  529. /* The handle icon for each item */
  530. span.handle {
  531. margin-left: 14px;
  532. /* cursor: move; */
  533. }
  534. /* Placeholder for sorting items */
  535. .sort-placeholder {
  536. border-radius: 0.35em;
  537. background-color: rgba(40, 40, 40, 0.35);
  538. width: 85%;
  539. height: 2.5em;
  540. padding: 0.5em 0.5em;
  541. margin-left: 1em;
  542. }
  543. /* ----------------------------------------------
  544. Tag selected term link
  545. ----------------------------------------------- */
  546. p.tag-selected-term {
  547. margin-top: 20px;
  548. display: none;
  549. }
  550. p.tag-selected-term a {
  551. color: #ffffff;
  552. font-size: 1.05em;
  553. margin-left: 1em;
  554. margin-top: 2em;
  555. padding: 1em 1em 1em 2em;
  556. background-image: url('../icons/tag.svg');
  557. background-size: 2.2em;
  558. background-position: left;
  559. background-repeat: no-repeat;
  560. }
  561. /* ----------------------------------------------
  562. USER INPUT:
  563. Add new items in each field
  564. ----------------------------------------------- */
  565. .user-input {
  566. width: 100%;
  567. margin-left: 1em;
  568. margin-top: 2em;
  569. padding-bottom: 1.5em;
  570. display: none;
  571. /* Shown (slide up and down) by jQuery when adding ideas */
  572. }
  573. /* The div containing all the user input things */
  574. .add_box {
  575. /* Make room for the absolutely positioned div at the buttom each card always keeping a distance from the buttom of the card (as high as the height of the absolutely positined icon div + some distance) */
  576. padding-bottom: 5.3em;
  577. }
  578. /* Add an idea link */
  579. a.add-idea {
  580. color: #ffffff;
  581. font-size: 1.05em;
  582. margin-left: 1em;
  583. margin-top: 2em;
  584. padding: 1em 1em 1em 2em;
  585. background-image: url('../icons/lightbulb.svg');
  586. background-size: 1.4em;
  587. background-position: left;
  588. background-repeat: no-repeat;
  589. }
  590. /* Textarea of a new item input */
  591. .new_item {
  592. width: 90%;
  593. border: 1px solid #ffffff;
  594. border-radius: 0.35em;
  595. outline: none;
  596. padding-left: 0.5em;
  597. /* for auto expantion jQuery code */
  598. box-sizing: border-box;
  599. overflow: hidden;
  600. }
  601. /* The add button */
  602. .add_btn {
  603. background-color: transparent;
  604. color: #ffffff;
  605. padding: 0.25em 1.2em;
  606. border: 0.12em solid #ffffff;
  607. border-radius: 0.5em;
  608. }
  609. .add_btn:hover {
  610. color: #37474f;
  611. border-color: #37474f;
  612. }
  613. li.added_item span {
  614. display: inline;
  615. margin-top: 5em;
  616. }
  617. .expandable {
  618. box-sizing: border-box;
  619. /* remove the user resizing for the text fields */
  620. resize: none;
  621. /* display: inline-block; */
  622. width: 75% !important;
  623. }
  624. .user-input span.chars {
  625. font-size: 1.1em;
  626. color: rgba(255, 255, 255, 0.7);
  627. }
  628. /* Tag */
  629. a.tag {
  630. background-color: rgba(55, 71, 79, 0.5);
  631. color: #ffffff;
  632. padding: 1px 2px;
  633. border: 1px solid rgba(0, 0, 0, 0.1);
  634. text-decoration: none;
  635. white-space: nowrap;
  636. }
  637. a.tag:hover {
  638. background-color: rgba(255, 255, 255, 0.5);
  639. color: rgba(55, 71, 79, 0.5);
  640. padding: 1px 2px;
  641. border: 1px solid rgba(0, 0, 0, 0.1);
  642. text-decoration: none;
  643. cursor: pointer;
  644. }
  645. /* Background shadow on all types of popups */
  646. div#shadow {
  647. display: none;
  648. width: 100%;
  649. height: 100%;
  650. position: fixed;
  651. top: 0;
  652. left: 0;
  653. z-index: 2;
  654. background-color: rgba(0, 0, 0, 0.5);
  655. }
  656. /* ----------------------------------------------
  657. Move window and tag windows
  658. ----------------------------------------------- */
  659. div.window {
  660. position: fixed;
  661. z-index: 3;
  662. top: 20%;
  663. border-radius: 10px;
  664. padding: 1em 1.5em 1em 1em;
  665. background-color: rgba(236, 239, 241, 0.95);
  666. display: none;
  667. }
  668. div.window button.close {
  669. outline: 0;
  670. position: relative;
  671. top: -8px;
  672. font-size: 2.5em;
  673. }
  674. div.window h2 {
  675. margin: 0 0 0.4em 0;
  676. font-size: 1.4em;
  677. line-height: 1.5;
  678. }
  679. div.window p {
  680. font-size: 0.95em;
  681. }
  682. /* ----------------------------------------------
  683. Move window
  684. ----------------------------------------------- */
  685. div#move-window {
  686. left: 35%;
  687. width: 30%;
  688. }
  689. div#move-window .move-window-button {
  690. background-color: transparent;
  691. color: rgb(51, 51, 51);
  692. padding: 0.25em 1.2em;
  693. border: 0.12em solid rgb(51, 51, 51);
  694. border-radius: 0.5em;
  695. }
  696. div#move-window .move-window-button:hover {
  697. color: #ffffff;
  698. border-color: #ffffff;
  699. }
  700. div#move-window h2 {
  701. }
  702. div#move-window ul {
  703. list-style-type: none;
  704. padding-left: 0;
  705. margin-bottom: 0;
  706. }
  707. /* ----------------------------------------------
  708. Tag window
  709. ----------------------------------------------- */
  710. div#tag-window {
  711. width: 50%;
  712. max-height: 80%;
  713. /* Center window horizontally and vertically */
  714. top: 50%;
  715. left: 50%;
  716. transform: translate(-50%, -50%);
  717. /*
  718. }
  719. div#tag-window div#tag-window-container {
  720. */
  721. overflow: scroll;
  722. }
  723. /*
  724. div#tag-window h2#tag-description {
  725. }
  726. */
  727. div#tag-window textarea#tag-description {
  728. font-size: 0.95em;
  729. outline: none;
  730. width: 100%;
  731. border: 1px solid #ffffff;
  732. border-radius: 0.35em;
  733. margin: 0 0 0.75em 0;
  734. padding-left: 0.5em;
  735. resize: none;
  736. color: rgb(117, 117, 117);
  737. }
  738. div#tag-window span.chars {
  739. font-size: 1.1em;
  740. color: rgb(117, 117, 117);
  741. }
  742. div#tag-window .tag-window-button {
  743. background-color: transparent;
  744. color: rgb(51, 51, 51);
  745. padding: 0.25em 1.2em;
  746. border: 0.12em solid rgb(51, 51, 51);
  747. border-radius: 0.5em;
  748. }
  749. div#tag-window .tag-window-button:hover {
  750. color: #ffffff;
  751. border-color: #ffffff;
  752. }
  753. div#tag-window #delete-tag {
  754. display: none;
  755. }
  756. div#tag-window h2.similar-tags {
  757. margin: 0.95em 0 -0.2em 0;
  758. }
  759. div#tag-window p.similar-tags-tag {
  760. margin: 0.95em 0 0.4em 0;
  761. }
  762. div#tag-window p.similar-tags-description {
  763. margin: 0;
  764. }
  765. div#tag-window p.similar-tags-description-none {
  766. margin: 0.25em 0 0 0;
  767. display: none;
  768. }
  769. div#tag-window p.similar-tags-username {
  770. margin: 0;
  771. font-size: 0.75em;
  772. }
  773. /* ----------------------------------------------
  774. Field bottom area
  775. ----------------------------------------------- */
  776. div.card {
  777. position: relative;
  778. }
  779. .field-bottom {
  780. background-color: rgba(0, 0, 0, 0.25);
  781. border-radius: 0 0 10px 10px;
  782. height: 40px;
  783. bottom: 0;
  784. position: absolute;
  785. left: 0;
  786. width: 100%;
  787. }
  788. .field-bottom > img[src*=field] {
  789. width: 25px;
  790. height: 25px;
  791. margin-top: 7px;
  792. margin-left: 10px;
  793. }
  794. .field-bottom > img[src*=number] {
  795. float: right;
  796. width: 25px;
  797. height: 18px;
  798. margin-top: 11px;
  799. margin-right: 10px;
  800. }
  801. /* ----------------------------------------------
  802. FORM Import & Export buttons
  803. ----------------------------------------------- */
  804. .imp-exp-btn {
  805. margin-top: 2.5em;
  806. padding-left: 5px;
  807. padding-right: 5px;
  808. }
  809. button.json_exp, button.share_canvas, .pdf_exp {
  810. border: none;
  811. border-radius: 0.5em;
  812. padding: 1em 0;
  813. width: 60%;
  814. outline: none;
  815. }
  816. button.json_exp:hover, button.share_canvas:hover {
  817. opacity: 0.75;
  818. }
  819. .pdf_exp:hover {
  820. text-decoration: underline;
  821. }
  822. button.json_exp {
  823. background-color: #aed581;
  824. margin: 1em auto 0 auto;
  825. }
  826. button.share_canvas {
  827. background-color: #a67de0;
  828. margin: 0.5em auto 0.4em auto;
  829. }
  830. .pdf_exp {
  831. background-color: #85ade5;
  832. margin: 0.5em auto 0.4em auto;
  833. }
  834. /* The sign up or login to save link for unregistered users */
  835. a.login-to-save {
  836. display: block;
  837. padding: 1em;
  838. color: #444;
  839. border: none;
  840. border-radius: 0.5em;
  841. padding: 1em 0;
  842. width: 60%;
  843. outline: none;
  844. margin: 1em auto 0 auto;
  845. background-color: #aed581;
  846. }
  847. /* The save canvas PHP under the save/export buttons */
  848. .save-canvas-feedback p {
  849. text-align: center;
  850. color: #15af97;
  851. }
  852. .save-canvas-feedback span {
  853. color: #15af97;
  854. margin-right: 0.4em;
  855. }
  856. .save-canvas-feedback-fail p {
  857. text-align: center;
  858. color: #37474f;
  859. }
  860. .save-canvas-feedback-fail span {
  861. color: #37474f;
  862. margin-right: 0.4em;
  863. }
  864. /* Sharing the canvas */
  865. /* The share canvas button */
  866. .share_canvas{
  867. }
  868. .share_canvas_email{
  869. display: none;
  870. }
  871. .share_canvas_email input{
  872. width: 80%;
  873. padding: 1em;
  874. border-radius: 5px;
  875. border: 1px solid #444;
  876. }
  877. .share_canvas_email input:focus{
  878. outline: none;
  879. }
  880. /* The send btn */
  881. .share_canvas_send{
  882. border: none;
  883. border-radius: 0.5em;
  884. padding: 1em 0;
  885. width: 25%;
  886. outline: none;
  887. background-color: #546e7a;
  888. color: #ffffff;
  889. }
  890. /* ----------------------------------------------
  891. Footer
  892. ----------------------------------------------- */
  893. footer {
  894. font-size: 1em;
  895. margin-top: 2em;
  896. padding: 1.5em;
  897. background-color: #37474f;
  898. color: #ffffff;
  899. }
  900. footer .license a {
  901. color: #759BCF;
  902. }
  903. footer .license {
  904. margin: 0.5em auto 1.8em auto;
  905. }
  906. footer .contact p {
  907. color: #18AE90;
  908. }
  909. footer .contact h2 {
  910. color: #6bb5b4;
  911. }
  912. footer p.ethics-copy.terms, footer p.ethics-copy.privacy {
  913. text-decoration: none;
  914. padding: 0 0.5em;
  915. display: inline-block;
  916. }
  917. footer p.cc {
  918. margin-top: 2.8em;
  919. }
  920. footer p.terms, footer p.privacy {
  921. margin: 1.9em auto;
  922. }
  923. footer .privacy a {
  924. color: #a67de0;
  925. }
  926. footer .terms a {
  927. color: #aed581;
  928. }
  929. /* Footer license icons */
  930. footer .license-icons ul {
  931. list-style-type: none;
  932. margin-left: 0;
  933. padding-left: 0;
  934. }
  935. footer .license-icons li {
  936. display: inline-block;
  937. margin: 1.2em 0.2em;
  938. }
  939. footer .license-icons ul img {
  940. width: 3.5em;
  941. }
  942. /* ----------------------------------------------
  943. Dialog windows
  944. ----------------------------------------------- */
  945. div.dialog {
  946. display: none;
  947. width: 26%;
  948. position: fixed;
  949. top: 37%;
  950. left: 37%;
  951. font-family: 'Open Sans', sans-serif;
  952. z-index: 2;
  953. background-color: rgba(236, 239, 241, 0.95);
  954. border-radius: 5px;
  955. min-height: 150px;
  956. }
  957. div.dialog h2 {
  958. font-size: 1.4em;
  959. margin: 0;
  960. color: #444;
  961. }
  962. div.dialog p {
  963. font-size: 0.95em;
  964. color: rgb(51, 51, 51);
  965. }
  966. div.dialog button {
  967. position: relative;
  968. top: -8px;
  969. font-size: 2.5em;
  970. outline: 0;
  971. color: #444;
  972. float: right;
  973. }
  974. div.dialog-header {
  975. background-color: rgb(200, 200, 200);
  976. padding: 0.65em 0.75em 0.65em 0.75em;
  977. border-radius: 5px 5px 0 0;
  978. width: 100%;
  979. }
  980. div.dialog-content {
  981. padding: 0.75em 1.5em 0.75em 0.75em;
  982. }
  983. /* ----------------------------------------------
  984. Masonry Colors (ADAPT)
  985. ----------------------------------------------- */
  986. .bg--blue {
  987. background-color: #85ade5;
  988. }
  989. .bg--darkblue {
  990. background-color: #8b99e0;
  991. }
  992. .bg--green {
  993. background-color: #aed581;
  994. }
  995. .bg--seagreen {
  996. background-color: #6bb5b4;
  997. }
  998. .bg--purple {
  999. background-color: #a281d1;
  1000. }
  1001. .bg--green1 {
  1002. background-color: #29bca4;
  1003. }
  1004. .bg--x {
  1005. background-color: #ce93d8;
  1006. }
  1007. .bg--mineral {
  1008. background-color: #607d8b;
  1009. }
  1010. /* ================================================
  1011. MEDIA QUERIES
  1012. ================================================= */
  1013. /* ----------------- 1 COL ----------------- */
  1014. @media (max-width: 499px) {
  1015. .masonry-layout7-5 {
  1016. column-count: 1;
  1017. column-gap: 0;
  1018. }
  1019. .masonry-layout4 {
  1020. column-count: 1;
  1021. column-gap: 0;
  1022. }
  1023. .masonry-layout2 {
  1024. column-count: 1;
  1025. column-gap: 0;
  1026. }
  1027. /* Adjust the height of culumns to maintain the layout */
  1028. .field_01, .field_04, .field_09, .field_06 {
  1029. min-height: 250px;
  1030. }
  1031. .field_03, .field_05, .field_02 {
  1032. min-height: 250px;
  1033. }
  1034. .field_07, .field_08 {
  1035. min-height: 250px;
  1036. }
  1037. .field_10 {
  1038. min-height: 250px;
  1039. }
  1040. /* Adjusting textarea heights */
  1041. .added_item .expandable {
  1042. height: 8em;
  1043. }
  1044. /* Dialog */
  1045. div.dialog {
  1046. width: 60%;
  1047. left: 20%;
  1048. }
  1049. /* Form Header */
  1050. .form-header {
  1051. width: 100%;
  1052. margin: 0 auto 2.14em auto;
  1053. padding-bottom: 2em;
  1054. }
  1055. .form-header h1 {
  1056. margin-bottom: 1em;
  1057. }
  1058. .form-header label {
  1059. margin-top: 0.6em;
  1060. display: block;
  1061. text-align: left;
  1062. }
  1063. .form-header input {
  1064. width: 95%;
  1065. display: block;
  1066. }
  1067. .form-header p {
  1068. margin-top: 1.85em;
  1069. }
  1070. /* Jump to */
  1071. .jump-to-click-area {
  1072. position: fixed;
  1073. top: 0;
  1074. margin-left: -15px;
  1075. height: 48px;
  1076. width: 100%;
  1077. z-index: 2;
  1078. cursor: pointer;
  1079. display: none;
  1080. }
  1081. .jump-to-click-area-toggle {
  1082. display: block;
  1083. }
  1084. .jump-to {
  1085. width: 100%;
  1086. overflow: hidden;
  1087. min-height: 64px;
  1088. border-radius: 5px;
  1089. display: block;
  1090. }
  1091. .jump-to-toggle {
  1092. /* display: none; */
  1093. position: fixed;
  1094. top: 0;
  1095. z-index: 1;
  1096. margin-left: -15px;
  1097. border-radius: 0;
  1098. padding-top: 2em;
  1099. }
  1100. /*
  1101. .jump-to-list {
  1102. }
  1103. */
  1104. .jump-to-list-toggle {
  1105. display: none;
  1106. }
  1107. .jump-to hr {
  1108. color: rgb(222, 222, 222);
  1109. margin-top: 0.2em;
  1110. margin-bottom: 0.2em;
  1111. margin-left: auto;
  1112. margin-right: auto;
  1113. border-style: solid;
  1114. border-width: 1px;
  1115. }
  1116. .jump-to ul {
  1117. margin-top: 5px;
  1118. width: 110%;
  1119. margin-left: -15px;
  1120. margin-bottom: -5px;
  1121. padding-top: 5px;
  1122. padding-left: 15px;
  1123. padding-bottom: 10px;
  1124. }
  1125. .jump-to-img {
  1126. margin-right: 5px;
  1127. height: 18px;
  1128. width: 18px;
  1129. display: none;
  1130. }
  1131. .jump-to-img-toggle {
  1132. display: inline;
  1133. }
  1134. /*
  1135. .jump-to .jump-to-arrow {
  1136. display: inline-block;
  1137. }
  1138. */
  1139. /*
  1140. .jump-to label {
  1141. cursor: pointer;
  1142. }
  1143. */
  1144. .jump-to-arrow-90 {
  1145. transform: rotate(90deg);
  1146. transition: .3s;
  1147. }
  1148. .jump-to-arrow-0 {
  1149. transform: rotate(0deg);
  1150. transition: .3s;
  1151. }
  1152. /* Saved tags */
  1153. .saved-tags {
  1154. padding: 1em 1em 0.3em 1em;
  1155. }
  1156. .saved-tags label {
  1157. margin-right: 0.3em;
  1158. }
  1159. .saved-tags p {
  1160. display: block;
  1161. }
  1162. /* Move window */
  1163. div#move-window {
  1164. left: 15%;
  1165. width: 70%;
  1166. }
  1167. /* Tag window */
  1168. div#tag-window {
  1169. width: 75%;
  1170. }
  1171. div#tag-window textarea#tag-description {
  1172. width: 100%;
  1173. }
  1174. /* User area button and dropdown menu in the header: only shown when logged in */
  1175. .form-header .user-profile {
  1176. margin-left: 0;
  1177. width: 95%;
  1178. }
  1179. /* The button When the drop down menu is open */
  1180. .dropdown button#dropdownMenu1 {
  1181. width: 100%;
  1182. margin: auto;
  1183. }
  1184. /* Bootstrap dropdown classes */
  1185. ul.dropdown-menu {
  1186. margin-left: 0;
  1187. width: 100%;
  1188. margin: auto;
  1189. }
  1190. }
  1191. /* ----------------- 2 COL ----------------- */
  1192. @media (min-width: 500px) and (max-width: 934px) {
  1193. .masonry-layout7-5 {
  1194. column-count: 2;
  1195. column-gap: 0;
  1196. }
  1197. .masonry-layout4 {
  1198. column-count: 2;
  1199. column-gap: 0;
  1200. }
  1201. /* Adjust the height of culumns to maintain the layout */
  1202. .field_01, .field_04, .field_09, .field_06 {
  1203. min-height: 460px;
  1204. }
  1205. .field_02 {
  1206. min-height: 930px;
  1207. }
  1208. .field_03, .field_05 {
  1209. min-height: 460px;
  1210. }
  1211. .field_07, .field_08 {
  1212. min-height: 460px;
  1213. }
  1214. .field_10 {
  1215. min-height: 460px;
  1216. }
  1217. /* Adjusting textarea heights */
  1218. .added_item .expandable {
  1219. height: 8em;
  1220. }
  1221. /* Dialog */
  1222. div.dialog {
  1223. width: 46%;
  1224. left: 27%;
  1225. }
  1226. /* Form Header */
  1227. .form-header {
  1228. width: 100%;
  1229. }
  1230. .form-header h1 {
  1231. text-align: center;
  1232. }
  1233. .form-header label {
  1234. margin-top: 1.8em;
  1235. display: block;
  1236. text-align: center;
  1237. }
  1238. .form-header input {
  1239. width: 50%;
  1240. display: block;
  1241. margin: auto;
  1242. }
  1243. .form-header p {
  1244. margin-top: 1.85em;
  1245. }
  1246. a.logo img {
  1247. display: block;
  1248. width: 40%;
  1249. margin: auto;
  1250. }
  1251. /* Saved tags */
  1252. .saved-tags {
  1253. padding: 1em 1em 0.3em 1em;
  1254. }
  1255. .saved-tags label {
  1256. margin-right: 0.3em;
  1257. }
  1258. .saved-tags p {
  1259. display: block;
  1260. }
  1261. /* Move window */
  1262. div#move-window {
  1263. left: 25%;
  1264. width: 50%;
  1265. }
  1266. /* Tag window */
  1267. div#tag-window {
  1268. width: 75%;
  1269. }
  1270. div#tag-window textarea#tag-description {
  1271. width: 100%;
  1272. }
  1273. /* User area button and dropdown menu in the header: only shown when logged in */
  1274. .form-header .user-profile {
  1275. margin-left: 0;
  1276. width: 50%;
  1277. margin: 2em auto;
  1278. }
  1279. /* The button When the drop down menu is open */
  1280. .dropdown button#dropdownMenu1 {
  1281. width: 60%;
  1282. margin: 0 20%;
  1283. }
  1284. /* Bootstrap dropdown classes */
  1285. ul.dropdown-menu {
  1286. margin-left: 0;
  1287. width: 60%;
  1288. margin: 0 20%;
  1289. }
  1290. }
  1291. /* ----------------- 4 COL Smaller ----------------- */
  1292. @media (min-width: 935px) and (max-width: 991px) {
  1293. .masonry-layout7-5 {
  1294. column-count: 4;
  1295. column-gap: 0;
  1296. }
  1297. .masonry-layout4 {
  1298. column-count: 4;
  1299. column-gap: 0;
  1300. }
  1301. /* Adjust the height of culumns to maintain the layout */
  1302. .field_01, .field_04, .field_09, .field_06 {
  1303. min-height: 500px;
  1304. }
  1305. .field_02 {
  1306. min-height: 1010px;
  1307. }
  1308. .field_03, .field_05 {
  1309. min-height: 500px;
  1310. }
  1311. .field_07, .field_08 {
  1312. min-height: 500px;
  1313. }
  1314. .field_10 {
  1315. min-height: 500px;
  1316. }
  1317. /* Dialog */
  1318. div.dialog {
  1319. width: 30%;
  1320. left: 37%;
  1321. }
  1322. /* Form Header */
  1323. .form-header {
  1324. width: 100%;
  1325. }
  1326. .form-header h1 {
  1327. text-align: center;
  1328. }
  1329. .form-header label {
  1330. margin-top: 1.8em;
  1331. display: block;
  1332. text-align: center;
  1333. }
  1334. .form-header input {
  1335. width: 50%;
  1336. display: block;
  1337. margin: auto;
  1338. }
  1339. .form-header p {
  1340. margin-top: 1.85em;
  1341. }
  1342. /* User area button and dropdown menu in the header: only shown when logged in */
  1343. .form-header .user-profile {
  1344. margin-left: 0;
  1345. width: 60%;
  1346. margin: 2em auto;
  1347. transition: all 0.4s;
  1348. }
  1349. /* Tag window */
  1350. div#tag-window {
  1351. width: 75%;
  1352. }
  1353. /* The button When the drop down menu is open */
  1354. .dropdown button#dropdownMenu1 {
  1355. width: 62%;
  1356. margin: 0 18%;
  1357. }
  1358. /* Bootstrap dropdown classes */
  1359. ul.dropdown-menu {
  1360. margin-left: 0;
  1361. width: 62%;
  1362. margin: 0 18%;
  1363. }
  1364. }
  1365. @media (min-width: 935px) and (max-width: 1153px) {
  1366. /* Adjusting textarea heights */
  1367. .added_item .expandable {
  1368. height: 8em;
  1369. }
  1370. }
  1371. /* ---------------- 4 COL Large ---------------- */
  1372. @media (min-width: 992px) and (max-width: 1153px) {
  1373. .masonry-layout7-5 {
  1374. column-count: 4;
  1375. column-gap: 0;
  1376. }
  1377. .masonry-layout4 {
  1378. column-count: 4;
  1379. column-gap: 0;
  1380. }
  1381. /* DESKTOP version: HOLDING THE CANVAS DEFAULT LAYOUT FORM */
  1382. /* Adjust the height of culumns to maintain the layout */
  1383. .field_01, .field_04, .field_09, .field_06 {
  1384. min-height: 480px;
  1385. }
  1386. .field_02 {
  1387. min-height: 970px;
  1388. }
  1389. .field_03, .field_05 {
  1390. min-height: 480px;
  1391. }
  1392. .field_07, .field_08 {
  1393. min-height: 480px;
  1394. }
  1395. .field_10 {
  1396. min-height: 480px;
  1397. }
  1398. /* Dialog */
  1399. div.dialog {
  1400. width: 30%;
  1401. left: 37%;
  1402. }
  1403. /* Form Header */
  1404. .form-header {
  1405. width: 100%;
  1406. min-height: 8em;
  1407. }
  1408. .form-header h1 {
  1409. font-size: 1.7em;
  1410. }
  1411. .form-header label {
  1412. margin-top: 1.8em;
  1413. display: block;
  1414. text-align: left;
  1415. }
  1416. .form-header input {
  1417. width: 100%;
  1418. display: block;
  1419. }
  1420. .form-header p {
  1421. margin-top: 2em;
  1422. }
  1423. /* Tag window */
  1424. div#tag-window {
  1425. width: 75%;
  1426. }
  1427. }
  1428. @media (min-width: 1052px) and (max-width: 1153px) {
  1429. /* Adjusting textarea heights */
  1430. .added_item .expandable {
  1431. height: 8em;
  1432. }
  1433. .new_item {}
  1434. }
  1435. /* ---------------- 5 COL ---------------- */
  1436. @media (min-width: 1154px) and (max-width: 1650px) {
  1437. /* DESKTOP version: HOLDING THE CANVAS DEFAULT LAYOUT FORM */
  1438. /* Adjust the height of culumns to maintain the layout */
  1439. .field_01, .field_02, .field_09 {
  1440. min-height: 917px;
  1441. }
  1442. .field_03, .field_05 {
  1443. min-height: 428px;
  1444. }
  1445. .field_04, .field_06 {
  1446. min-height: 478px;
  1447. }
  1448. .field_07, .field_08 {
  1449. min-height: 390px;
  1450. }
  1451. .field_10 {
  1452. min-height: 390px;
  1453. }
  1454. }
  1455. @media (min-width: 1154px) and (max-width: 1702px) {
  1456. /* Adjusting textarea heights */
  1457. .added_item .expandable {
  1458. height: 8.5em;
  1459. }
  1460. .new_item {}
  1461. }
  1462. /* ---------------------------------------------- */
  1463. @media (min-width: 1651px) {
  1464. /* DESKTOP version: HOLDING THE CANVAS DEFAULT LAYOUT FORM */
  1465. /* Adjust the height of culumns to maintain the layout */
  1466. .field_01, .field_02, .field_09 {
  1467. min-height: 775px;
  1468. }
  1469. .field_03, .field_05 {
  1470. min-height: 375px;
  1471. }
  1472. .field_04, .field_06 {
  1473. min-height: 390px;
  1474. }
  1475. .field_07, .field_08 {
  1476. min-height: 340px;
  1477. }
  1478. .field_10 {
  1479. min-height: 340px;
  1480. }
  1481. }
  1482. /* ---------------- Header space bug fix ---------------- */
  1483. @media (min-width: 500px) and (max-width: 991px) {
  1484. .form-header {
  1485. padding-bottom: 30px;
  1486. }
  1487. }
  1488. @media (min-width: 1154px) and (max-width: 1240px) {
  1489. input.proj_title {
  1490. margin-right: -9px;
  1491. }
  1492. }