forms.css 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721
  1. .bx-form-advanced-wrapper .bx-form-section-wrapper:first-child {
  2. margin-top:0;
  3. }
  4. .bx-form-advanced-wrapper .bx-form-section-divider:first-child {
  5. border-top:none;
  6. padding-top:0;
  7. }
  8. .bx-form-advanced-wrapper .bx-form-section-divider:first-child .bx-form-section-content {
  9. padding-top:0;
  10. }
  11. .bx-form-advanced-wrapper .bx-form-section-wrapper:last-child .bx-form-section-content {
  12. padding-bottom:0;
  13. }
  14. .bx-form-advanced-wrapper .bx-form-section-wrapper:first-child .bx-form-row-view-wrapper:first-child {
  15. padding-top:0;
  16. }
  17. .bx-form-section-wrapper {
  18. position:relative;
  19. }
  20. .bx-form-section {
  21. padding:0px;
  22. }
  23. .bx-form-section {
  24. margin:0;
  25. border: none;
  26. }
  27. .bx-form-section-header legend {
  28. position:relative;
  29. text-transform:uppercase;
  30. }
  31. .bx-form-section-header legend u {
  32. cursor:pointer;
  33. }
  34. .bx-form-section-header span {
  35. white-space: nowrap;
  36. text-transform: none;
  37. font-size: 0.75rem;
  38. }
  39. .bx-form-section-hidden .bx-form-section-content {
  40. display:none;
  41. }
  42. .bx-form-caption {
  43. margin-bottom:5px;
  44. }
  45. .bx-form-required {
  46. color:red;
  47. }
  48. .bx-form-warn {
  49. color:red;
  50. font-style:italic;
  51. }
  52. .bx-form-info {
  53. }
  54. /* section toggler */
  55. .bx-form-collapsable .bx-form-section-toggler {
  56. position:absolute;
  57. left: -2px;
  58. top: 2px;
  59. width:20px;
  60. height:20px;
  61. text-decoration:none;
  62. -moz-transform: rotate(90deg);
  63. -webkit-transform: rotate(90deg);
  64. -ms-transform: rotate(90deg);
  65. -o-transform: rotate(90deg);
  66. -webkit-transition: all 0.5s ease;
  67. -moz-transition: all 0.5s ease;
  68. -ms-transition: all 0.5s ease;
  69. -o-transition: all 0.5s ease;
  70. }
  71. .bx-form-collapsed .bx-form-section-toggler {
  72. -moz-transform: rotate(0deg);
  73. -webkit-transform: rotate(0deg);
  74. -ms-transform: rotate(0deg);
  75. -o-transform: rotate(0deg);
  76. }
  77. .bx-form-section-toggler .sys-icon {
  78. display: inline-block;
  79. vertical-align: top;
  80. margin: 0 0 0 5px;
  81. font-size:0.875rem;
  82. line-height:1.2rem;
  83. }
  84. /* form inputs */
  85. .bx-form-input-wrapper {
  86. position: relative;
  87. }
  88. .bx-form-input-disabled {}
  89. .bx-form-input-slider,
  90. .bx-form-input-doublerange,
  91. .bx-form-input-select_multiple,
  92. .bx-form-input-select,
  93. .bx-form-input-radio_set,
  94. .bx-form-input-checkbox_set,
  95. .bx-form-input-number,
  96. .bx-form-input-time,
  97. .bx-form-input-datepicker,
  98. .bx-form-input-datetime,
  99. .bx-form-input-textarea,
  100. .bx-form-input-wrapper-password,
  101. .bx-form-input-text {
  102. height:40px;
  103. height:2.5rem;
  104. width:100%;
  105. -moz-box-sizing: border-box;
  106. -ms-box-sizing: border-box;
  107. -webkit-box-sizing: border-box;
  108. box-sizing: border-box;
  109. -webkit-appearance: none;
  110. -moz-appearance: none;
  111. appearance: none;
  112. padding:7px 3px 7px 3px;
  113. padding:0.2rem 0.4rem;
  114. vertical-align:middle;
  115. border:2px solid #79bd9a;
  116. border:0.125rem solid #79bd9a;
  117. -webkit-border-radius:0.3rem;
  118. -moz-border-radius:0.3rem;
  119. border-radius:0.3rem;
  120. outline:none;
  121. background-color: #fff;
  122. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
  123. filter: alpha(opacity=90);
  124. -moz-opacity: 0.9;
  125. -khtml-opacity: 0.9;
  126. opacity: 0.9;
  127. }
  128. .bx-form-input-slider:focus,
  129. .bx-form-input-doublerange:focus,
  130. .bx-form-input-number:focus,
  131. .bx-form-input-time:focus,
  132. .bx-form-input-datepicker:focus,
  133. .bx-form-input-datetime:focus,
  134. .bx-form-input-textarea:focus,
  135. .bx-form-input-text:focus,
  136. .bx-form-input-wrapper-password.bx-form-input-focus {
  137. border-color:#6caa8a;
  138. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  139. filter: alpha(opacity=100);
  140. -moz-opacity: 1.0;
  141. -khtml-opacity: 1.0;
  142. opacity: 1.0;
  143. -webkit-transition: all 0.2s linear;
  144. -moz-transition: all 0.2s linear;
  145. -o-transition: all 0.2s linear;
  146. transition: all 0.2s linear;
  147. }
  148. .bx-form-input-wrapper-password {
  149. padding: 0 2.125rem 0 0;
  150. }
  151. .bx-form-input-wrapper-password > a {
  152. position: absolute;
  153. z-index: 1000;
  154. display: -webkit-flex;
  155. display: flex;
  156. -webkit-align-items: center;
  157. align-items: center;
  158. -webkit-justify-content: center;
  159. justify-content: center;
  160. top: 0;
  161. right: 0;
  162. height: 100%;
  163. margin: 0 0.5rem;
  164. }
  165. .bx-form-input-password {
  166. position: relative;
  167. -moz-box-sizing: border-box;
  168. -ms-box-sizing: border-box;
  169. -webkit-box-sizing: border-box;
  170. box-sizing: border-box;
  171. width: 100%;
  172. height: 100%;
  173. margin: 0;
  174. padding: 7px 3px 7px 3px;
  175. padding: 0.2rem 0.4rem;
  176. border: 0;
  177. background-color: transparent;
  178. }
  179. .bx-form-input-password:focus {
  180. border-color: transparent;
  181. outline: none;
  182. box-shadow: none;
  183. }
  184. .bx-form-input-select_multiple,
  185. .bx-form-input-radio_set,
  186. .bx-form-input-checkbox_set {
  187. height:auto;
  188. }
  189. .bx-form-input-textarea {
  190. padding:0.5rem;
  191. height:150px;
  192. height:10rem;
  193. line-height:normal;
  194. }
  195. .bx-form-input-datepicker {
  196. width:7.5rem;
  197. }
  198. .bx-form-input-datetime {
  199. width:10.2rem;
  200. }
  201. .bx-form-datepicker-modal {
  202. z-index:10001 !important;
  203. }
  204. .bx-form-input-number,
  205. .bx-form-input-time
  206. {
  207. width:6rem;
  208. }
  209. .bx-form-input-wrapper-file .bx-btn {
  210. float: none;
  211. display: inline-block;
  212. }
  213. .bx-form-input-file {
  214. position: fixed;
  215. top: -1000px;
  216. border: none;
  217. background-color: transparent;
  218. }
  219. .bx-form-input-wrapper-slider,
  220. .bx-form-input-wrapper-doublerange {
  221. position:relative;
  222. }
  223. .bx-form-input-wrapper-slider .ui-slider,
  224. .bx-form-input-wrapper-doublerange .ui-slider {
  225. position:absolute;
  226. top:0px;
  227. right:0px;
  228. }
  229. .bx-form-input-wrapper-slider .ui-slider .ui-slider-handle,
  230. .bx-form-input-wrapper-doublerange .ui-slider .ui-slider-handle {
  231. z-index: 1;
  232. }
  233. /* privacy group chooser */
  234. .bx-form-input-wrapper-pgc {
  235. position: relative;
  236. }
  237. .bx-form-input-pgc {
  238. position: absolute;
  239. display: -webkit-flex;
  240. display: flex;
  241. -webkit-align-items: center;
  242. align-items: center;
  243. -webkit-justify-content: center;
  244. justify-content: center;
  245. top: -1.375rem;
  246. right: 0;
  247. width: 1rem;
  248. height: 1rem;
  249. }
  250. .bx-form-input-pgc-popup .bx-form-input-wrapper-input_set {
  251. display: -webkit-flex;
  252. display: flex;
  253. -webkit-flex-wrap: nowrap;
  254. flex-wrap: nowrap;
  255. -webkit-align-items: center;
  256. align-items: center;
  257. }
  258. /* help popup */
  259. .bx-form-input-help-popup {
  260. max-width: 25rem;
  261. max-height: 25rem;
  262. overflow: auto;
  263. }
  264. /* switcher */
  265. .bx-switcher-cont {
  266. position:relative;
  267. width:60px;
  268. width:3.8rem;
  269. height:24px;
  270. height:1.5rem;
  271. overflow:hidden;
  272. cursor:pointer;
  273. background-color:#fff;
  274. border:2px solid #79bd9a;
  275. border:0.125rem solid #79bd9a;
  276. -moz-border-radius: 1rem;
  277. -webkit-border-radius: 1rem;
  278. border-radius: 1rem;
  279. }
  280. .bx-switcher-cont input {
  281. position:absolute;
  282. top:-32px;
  283. top:-2rem;
  284. }
  285. .bx-switcher-canvas {
  286. position:relative;
  287. width:90px;
  288. width:5.7rem;
  289. -webkit-transition: left 0.2s ease-in-out;
  290. -moz-transition: left 0.2s ease-in-out;
  291. -ms-transition: left 0.2s ease-in-out;
  292. -o-transition: left 0.2s ease-in-out;
  293. }
  294. .bx-switcher-cont.on .bx-switcher-canvas {
  295. left:3px;
  296. left:0.2rem;
  297. }
  298. .bx-switcher-cont.off .bx-switcher-canvas {
  299. left:-34px;
  300. left:-2.1rem;
  301. }
  302. .bx-switcher-on,
  303. .bx-switcher-off,
  304. .bx-switcher-handler {
  305. position:absolute;
  306. top:0rem;
  307. line-height:24px;
  308. line-height:1.5rem;
  309. color:#999;
  310. }
  311. .bx-switcher-on {
  312. left:0rem;
  313. width:34px;
  314. width:2.1rem;
  315. height:24px;
  316. height:1.5rem;
  317. margin-left:8px;
  318. margin-left:0.5rem;
  319. }
  320. .bx-switcher-off {
  321. left:65px;
  322. left:4.05rem;
  323. width:34px;
  324. width:2.1rem;
  325. height:24px;
  326. height:1.5rem;
  327. margin-left:3px;
  328. margin-left:0.2rem;
  329. }
  330. .bx-switcher-handler {
  331. left:36px;
  332. left:2.23rem;
  333. top:2px;
  334. top:0.13rem;
  335. width:20px;
  336. width:1.25rem;
  337. height:20px;
  338. height:1.25rem;
  339. margin:0rem;
  340. -moz-border-radius: 1rem;
  341. -webkit-border-radius: 1rem;
  342. border-radius: 1rem;
  343. -webkit-transition: background-color 0.2s ease-in-out;
  344. -moz-transition: background-color 0.2s ease-in-out;
  345. -ms-transition: background-color 0.2s ease-in-out;
  346. -o-transition: background-color 0.2s ease-in-out;
  347. transition: background-color 0.2s ease-in-out;
  348. }
  349. .bx-switcher-cont.on .bx-switcher-handler {
  350. background-color:#d0efa2;
  351. }
  352. .bx-switcher-cont.off .bx-switcher-handler {
  353. background-color:#e7938a;
  354. }
  355. .bx-form-element-wrapper-oneline .bx-form-element {
  356. display: -webkit-flex;
  357. display: flex;
  358. -webkit-flex-flow: row nowrap;
  359. flex-flow: row nowrap;
  360. -webkit-align-items: flex-start;
  361. align-items: flex-start;
  362. -webkit-justify-content: flex-start;
  363. justify-content: flex-start;
  364. }
  365. .bx-form-value-oneline,
  366. .bx-form-caption-oneline {
  367. float: none;
  368. }
  369. .bx-form-caption-oneline-switcher {
  370. line-height:26px;
  371. }
  372. .bx-form-input-wrapper-submit .bx-btn {
  373. float: none;
  374. }
  375. .bx-form-input-wrapper-input_set .bx-btn {
  376. float:left;
  377. }
  378. /* extra features */
  379. .bx-form-right-line-aligned {
  380. float:right;
  381. margin-top: 5px;
  382. }
  383. /* view mode */
  384. .bx-form-row-view-wrapper > div {
  385. position: relative;
  386. display: inline-block;
  387. width: 100%;
  388. vertical-align: bottom;
  389. white-space: normal;
  390. text-overflow: ellipsis;
  391. overflow: hidden;
  392. }
  393. .bx-form-row-view-ratevalue{
  394. display: flex !important;
  395. justify-content: flex-start;
  396. }
  397. .bx-form-row-view-ratevalue .bx-form-row-view-value{
  398. flex-grow: 2;
  399. }
  400. .bx-form-row-view-wrapper-textarea > div {
  401. vertical-align:top;
  402. }
  403. .bx-form-row-view-caption {
  404. font-weight:bold;
  405. }
  406. /****************************************
  407. * Custom reCaptcha Theme
  408. ****************************************/
  409. .bx-form-input-captcha-custom {
  410. background-color: #b71800;
  411. padding: 0.5em;
  412. border-radius: 1em;
  413. position: relative;
  414. overflow: auto;
  415. max-width: 480px;
  416. font: 0.75em/1em Helvetica, Arial, sans-serif;
  417. color: #ffffff;
  418. }
  419. .bx-form-input-captcha-custom a {
  420. color: #ffffff;
  421. text-decoration: none;
  422. }
  423. .bx-form-input-captcha-custom img,
  424. .bx-form-input-captcha-custom #recaptcha_image {
  425. width: 100% !important;
  426. height: auto !important;
  427. -webkit-border-radius: 0.5em;
  428. -moz-border-radius: 0.5em;
  429. border-radius: 0.5em;
  430. -moz-background-clip: padding;
  431. -webkit-background-clip: padding-box;
  432. background-clip: padding-box;
  433. }
  434. .bx-form-input-captcha-custom .solution {
  435. position: relative;
  436. float: left;
  437. width: 75%;
  438. }
  439. .bx-form-input-captcha-custom .solution-cnt {
  440. margin-top: 0.5em;
  441. padding: 1.2em 1em;
  442. -webkit-border-radius: 0.5em;
  443. -moz-border-radius: 0.5em;
  444. border-radius: 0.5em;
  445. -moz-background-clip: padding;
  446. -webkit-background-clip: padding-box;
  447. background-clip: padding-box;
  448. background-color: #fbe098;
  449. color: #000000;
  450. display: block;
  451. }
  452. .bx-form-input-captcha-custom .solution-cnt input {
  453. display: block;
  454. width: calc(90% - 2px);
  455. margin: 0.35em auto;
  456. -webkit-appereance: none;
  457. border: 1px solid #f7c236;
  458. font: inherit;
  459. font-size: 150%;
  460. outline: none;
  461. }
  462. .bx-form-input-captcha-custom .solution-cnt input:focus {
  463. border-color: #b71800;
  464. }
  465. .bx-form-input-captcha-custom .options {
  466. position: relative;
  467. float: right;
  468. width: 25%;
  469. }
  470. .bx-form-input-captcha-custom .options-cnt {
  471. margin-top: 0.5em;
  472. padding-left: 0.5em;
  473. -webkit-border-radius: 0.5em;
  474. -moz-border-radius: 0.5em;
  475. border-radius: 0.5em;
  476. -moz-background-clip: padding;
  477. -webkit-background-clip: padding-box;
  478. background-clip: padding-box;
  479. }
  480. .bx-form-input-captcha-custom .options-cnt a {
  481. background-color: #c5523d;
  482. display: block;
  483. padding: 0.5em 1.0em;
  484. border-top: 1px solid #000000;
  485. border-left: 1px solid #000000;
  486. border-right: 1px solid #000000;
  487. }
  488. .bx-form-input-captcha-custom .options-cnt a:first-child {
  489. border-radius: 0.5em 0.5em 0 0;
  490. }
  491. .bx-form-input-captcha-custom .options-cnt a:last-child {
  492. border-radius: 0 0 0.5em 0.5em;
  493. border-bottom: 1px solid #000000;
  494. }
  495. /****************************************
  496. * Overwrite 3d Party MiniColors plug-in
  497. ****************************************/
  498. .bx-form-input-wrapper.bx-form-input-wrapper-text .minicolors-theme-bootstrap .minicolors-swatch {
  499. top: 6px;
  500. left: 6px;
  501. width: 25px;
  502. width: 1.5625rem;
  503. height: 25px;
  504. height: 1.5625rem;
  505. border-radius: 20px;
  506. border-radius: 1.25rem;
  507. }
  508. /* auto-siggestion input */
  509. .bx-form-value .bx-form-input-autotoken:not(.bx-form-input-labels) {
  510. float:left;
  511. padding:0px;
  512. height:auto;
  513. box-shadow: none;
  514. min-height: 2.8rem;
  515. }
  516. .bx-form-value .bx-form-input-autotoken b {
  517. cursor:pointer;
  518. display:block;
  519. float:left;
  520. line-height: 40px;
  521. line-height: 2.5rem;
  522. padding-right: 1.5em;
  523. margin-left:0.1em;
  524. margin-right:0.1em;
  525. font-weight:normal;
  526. border-radius: 1.25rem;
  527. }
  528. .bx-form-value .bx-form-input-autotoken b:hover {
  529. opacity:0.7;
  530. }
  531. .bx-form-value .bx-form-input-autotoken b:after {
  532. font-family: 'sys-user', 'sys-user-fal';
  533. content: "\f00d";
  534. position:absolute;
  535. padding:0 0.5em;
  536. margin-left: 0.5em;
  537. font-size:0.7em;
  538. font-weight:bold;
  539. }
  540. .bx-form-value .bx-form-input-autotoken.bx-form-input-disabled b {
  541. cursor: default;
  542. }
  543. .bx-form-value .bx-form-input-autotoken.bx-form-input-disabled b:after{
  544. display: none;
  545. }
  546. .bx-form-value .bx-form-input-autotoken input {
  547. border:0;
  548. margin:0;
  549. padding:0 0 0 5px;
  550. width:auto;
  551. float:left;
  552. box-shadow: none;
  553. }
  554. .bx-form-value .bx-form-input-autotoken .bx-def-thumb-size {
  555. width: 2.5rem;
  556. height: 2.5rem;
  557. line-height: 2.5rem;
  558. float:left;
  559. }
  560. .bx-form-value .bx-form-input-autotoken .bx-base-pofile-unit-wo-info {
  561. display: inline-block;
  562. vertical-align: middle;
  563. margin-right: 8px;
  564. margin-right: 0.5rem;
  565. }
  566. .bx-form-value .bx-form-input-autotoken-labels b {
  567. padding-left: 1em;
  568. }
  569. .bx-form-value .bx-form-input-autotoken-labels-show-more,
  570. .bx-form-value .bx-form-input-autotoken-labels-sel b {
  571. display:inline-block;
  572. line-height:1.5rem;
  573. font-size:85%;
  574. padding-right:1em;
  575. margin-top:0.625rem;
  576. font-style:normal;
  577. }
  578. .bx-form-value .bx-form-input-autotoken-labels-show-more {
  579. margin-left:0.1em;
  580. margin-right:0.1em;
  581. }
  582. .bx-form-value .bx-form-input-autotoken-labels-sel b:after {
  583. display:none;
  584. }
  585. .bx-form-input-autotoken-labels-more {
  586. display:none;
  587. }
  588. .select2-container {
  589. width:100% !important;
  590. }
  591. /* Location field */
  592. .bx-form-input-location-country,
  593. .bx-form-input-location-zip,
  594. .bx-form-input-location-state,
  595. .bx-form-input-location-city {
  596. width:49%;
  597. }
  598. .bx-form-input-location-street {
  599. width:83%;
  600. }
  601. .bx-form-input-location-street_number {
  602. width:15%;
  603. }
  604. .bx-form-input-location-street_number,
  605. .bx-form-input-location-street,
  606. .bx-form-input-location-state,
  607. .bx-form-input-location-city {
  608. margin-bottom:0.25rem;
  609. }
  610. .bx-form-input-location-cont .bx-form-input-location-status-cont {
  611. float:none;
  612. width:98%;
  613. line-height:normal;
  614. }
  615. .bx-form-input-location-status {
  616. float:left;
  617. }
  618. .bx-form-input-location-copyright {
  619. float:right;
  620. }
  621. .bx-form-input-location-auto-cont {
  622. display:table;
  623. }
  624. .bx-form-input-location-auto-cont > div {
  625. display:table-cell;
  626. vertical-align:middle;
  627. }