style.css 23 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147
  1. :root {
  2. --w-70: 70%;
  3. --primary-color: #1c4587;
  4. --bg-grey: #EDEEF1;
  5. }
  6. /* login css */
  7. .login-container {
  8. background-color: var(--bg-grey);
  9. }
  10. .login-header {
  11. font-size: 30px;
  12. font-weight: 100;
  13. }
  14. .login-form {
  15. padding: 50px;
  16. }
  17. .login-form label {
  18. font-size: 14px;
  19. color: #454859;
  20. }
  21. .login-form .form-control {
  22. height: calc(1.5em + 0.75rem + 0.3px);;
  23. }
  24. .bg-holder {
  25. background-image: url(/login-rhs.jpg);
  26. background-size: cover;
  27. }
  28. .login-container .logo {
  29. font-size: 35px;
  30. font-weight: 800;
  31. color: rgb(13, 89, 175);
  32. }
  33. .login-container small {
  34. font-size: 12px;
  35. color: #999;
  36. }
  37. /* end of login */
  38. .w-70 {
  39. width: var(--w-70);
  40. }
  41. .text-warning-mellow {
  42. color: #d8a714!important;
  43. }
  44. .stag-primary-bg {
  45. background-color: var(--primary-color) !important;
  46. color: #fff;
  47. }
  48. .stag-primary-border {
  49. border-color: var(--primary-color) !important;
  50. }
  51. .navbar-brand {
  52. font-size: 25px;
  53. font-weight: 900;
  54. }
  55. .sidebar .nav-link {
  56. padding: .25rem 1rem;
  57. }
  58. .sidebar .nav-item {
  59. margin-right: 0;
  60. }
  61. .sidebar .nav-item .nav-child-list {
  62. list-style: none;
  63. }
  64. .sidebar .nav-item .nav-child-list .nav-item .nav-link {
  65. padding-left: 2.75rem;
  66. }
  67. .sidebar .if-not-collapsed, .sidebar .if-collapsed {
  68. display: none;
  69. }
  70. .sidebar .nav-item.nav-child-collapsed .if-collapsed {
  71. display: block;
  72. }
  73. .sidebar .nav-item:not(.nav-child-collapsed) .if-not-collapsed {
  74. display: block;
  75. }
  76. .sidebar .nav-item.nav-child-collapsed .nav-child-list {
  77. display: none;
  78. }
  79. .navbar-dark .nav-item .nav-link {
  80. color: #fff;
  81. }
  82. .dropdown-menu {
  83. margin-top: 7px;
  84. border-radius: 0;
  85. }
  86. .dropdown-item:not(:last-child) {
  87. border-bottom:1px solid #ddd;
  88. }
  89. main {
  90. padding:0 1rem;
  91. }
  92. /* ability to toggle the video pane (rhs) */
  93. .stag_rhs_toggle, .stag_rhs_toggle:hover {
  94. position: fixed;
  95. bottom: 0;
  96. right: 0;
  97. padding: 0.25rem 0.75rem;
  98. border-top-left-radius: 6px;
  99. background-color: var(--primary-color);
  100. color: #fff;
  101. z-index: 2;
  102. }
  103. body.stag_rhs_collapsed .v-split,
  104. body.stag_rhs_collapsed .app-right-panel {
  105. display: none !important;
  106. }
  107. .delete-column {
  108. width: 120px;
  109. }
  110. .m-negator {
  111. margin-left: -1.25rem !important;
  112. margin-right: -1.25rem !important;
  113. }
  114. .pl-3-5 {
  115. padding-left: 1.25rem !important;
  116. }
  117. .lh-24px {
  118. height: 24px;
  119. line-height: 24px;
  120. }
  121. .mcp-theme-1 *:not(i) {
  122. font-family: Verdana, sans-serif;
  123. font-size: 12px;
  124. }
  125. .mcp-theme-1 .font-size-11 {
  126. font-size: 11px;
  127. }
  128. .mcp-theme-1 .font-size-13 {
  129. font-size: 13px;
  130. }
  131. .mcp-theme-1 .font-size-14 {
  132. font-size: 14px;
  133. }
  134. .mcp-theme-1 .font-size-16 {
  135. font-size: 16px;
  136. }
  137. .mcp-theme-1 .font-underline {
  138. text-decoration: underline;
  139. }
  140. .mcp-theme-1 .on-hover-opaque {
  141. opacity: 0.6;
  142. }
  143. .mcp-theme-1 .on-hover-opaque:hover {
  144. opacity: 1;
  145. }
  146. .mcp-theme-1 .opacity-60 {
  147. opacity: .6;
  148. }
  149. .mcp-theme-1 .overflow-visible {
  150. overflow: visible;
  151. }
  152. .mcp-theme-1 .text-secondary-light {
  153. color: #c9ddef !important;
  154. }
  155. .mcp-theme-1 a, .mcp-theme-1 a:link {
  156. color: rgb(13, 89, 175);
  157. }
  158. .mcp-theme-1 .btn.btn-primary {
  159. background: rgb(13, 89, 175);
  160. border-color: rgb(13, 89, 175);
  161. box-shadow: none;
  162. }
  163. .mcp-theme-1 .nav-item {
  164. margin: 0;
  165. }
  166. .mcp-theme-1 .nav-link:hover {
  167. background: #e3e3e394;
  168. }
  169. .mcp-theme-1 .nav-link.active {
  170. background: #e2e2e2;
  171. }
  172. .mcp-theme-1 .text-sm {
  173. font-size: 85%;
  174. }
  175. .mcp-theme-1 .text-sm-incl-children,
  176. .mcp-theme-1 .text-sm-incl-children *:not(i) {
  177. font-size: 0.8rem;
  178. }
  179. .mcp-theme-1 .minutes-label {
  180. width: 40px;
  181. }
  182. .mcp-theme-1 .memo-textarea {
  183. min-width: 200px;
  184. height: 60px;
  185. }
  186. .main-row {
  187. display: flex;
  188. flex-wrap: nowrap;
  189. margin-right: -15px;
  190. margin-left: -15px;
  191. }
  192. .main-row > .sidebar {
  193. width: 180px;
  194. min-width: 180px;
  195. }
  196. .main-row > main {
  197. flex-grow: 1;
  198. }
  199. html, body {
  200. height: 100%;
  201. }
  202. body>nav.navbar {
  203. height: 55px;
  204. }
  205. .stag-content {
  206. height: calc(100% - 55px);
  207. }
  208. [moe][large] form {
  209. width: 450px;
  210. }
  211. .moe-disabled[moe] {
  212. cursor: not-allowed;
  213. }
  214. .moe-disabled[moe] [start][show] {
  215. opacity: 0.5;
  216. pointer-events: none;
  217. }
  218. .mcp-theme-1 .stag-no-wrap-td {
  219. max-width: 260px;
  220. }
  221. .mcp-theme-1 .stag-no-wrap {
  222. max-width: 250px;
  223. overflow: hidden;
  224. text-overflow: ellipsis;
  225. white-space: nowrap;
  226. display: block;
  227. }
  228. .mcp-theme-1 .form-control.form-control-sm:not(.min-width-unset) {
  229. min-width: 200px;
  230. }
  231. .mcp-theme-1 [large] .form-control.form-control-sm {
  232. min-width: unset;
  233. }
  234. [wide] .form-control.form-control-sm {
  235. min-width: 480px;
  236. }
  237. [moe][center] [url]:not([show]) {
  238. position: fixed;
  239. top: 10%;
  240. max-height: 88%;
  241. overflow-y: auto;
  242. overflow-x: hidden;
  243. left: calc(50% - 250px);
  244. width: 500px;
  245. }
  246. [moe][center][wide] [url]:not([show]) {
  247. left: calc(50% - 400px);
  248. width: 800px;
  249. }
  250. [moe][center] [url]:not([show]) .form-control.form-control-sm {
  251. min-width: unset;
  252. max-width: 100%;
  253. }
  254. .mcp-theme-1 .width-200px {
  255. width: 200px !important;
  256. }
  257. .mcp-theme-1 .width-30px {
  258. width: 30px !important;
  259. }
  260. .mcp-theme-1 .width-50px {
  261. width: 50px !important;
  262. }
  263. .mcp-theme-1 .min-width-140px {
  264. min-width: 140px !important;
  265. }
  266. .mcp-theme-1 .min-width-200px {
  267. min-width: 200px !important;
  268. }
  269. .mcp-theme-1 .min-width-300px {
  270. min-width: 300px;
  271. }
  272. .mcp-theme-1 .width-100px {
  273. width: 100px;
  274. min-width: unset !important;
  275. max-width: unset !important;
  276. }
  277. .mcp-theme-1 .width-100pc {
  278. width: 100% !important;
  279. min-width: unset !important;
  280. }
  281. .mcp-theme-1 .max-width-200px {
  282. max-width: 200px;
  283. }
  284. .mcp-theme-1 .max-width-300px {
  285. max-width: 300px;
  286. }
  287. .mcp-theme-1 .outline-0 {
  288. outline: none !important;
  289. box-shadow: none !important;
  290. }
  291. .cancelled-item {
  292. opacity: 0.5;
  293. }
  294. .cancelled-item:not(.always-clickable) * {
  295. pointer-events: none;
  296. }
  297. .note-content {
  298. max-height: 300px;
  299. overflow-y: auto;
  300. }
  301. .note-content:not([auto-edit]) {
  302. padding: 1rem;
  303. padding-bottom: 0;
  304. cursor: pointer;
  305. position: relative;
  306. }
  307. .note-content:not(.cancelled):not([auto-edit]):not(.readonly):before {
  308. content: '(click to change)';
  309. display: block;
  310. color: #535353;
  311. padding-bottom: 0.3rem;
  312. }
  313. .mcp-theme-1 .ql-container, .mcp-theme-1 .ql-toolbar {
  314. border-left: 0;
  315. border-right: 0;
  316. }
  317. .mcp-theme-1 .ql-editor[contenteditable] {
  318. min-height: 100px;
  319. }
  320. .ql-container p {
  321. margin-top: 1rem;
  322. }
  323. .note-content ul {
  324. list-style: none !important;
  325. }
  326. .ql-editor ul > li::before {
  327. content: '';
  328. }
  329. .m-neg-4 {
  330. margin-left: -1.25rem;
  331. margin-right: -1.25rem;
  332. }
  333. .mcp-theme-1 .ql-toolbar .ql-formats * {
  334. font-size: 12px !important;
  335. }
  336. .mcp-theme-1 .ql-toolbar.ql-snow {
  337. padding: 3px;
  338. background: #f7f7f7;
  339. }
  340. .mcp-theme-1 .ql-snow .ql-picker {
  341. height: 22px;
  342. }
  343. .mcp-theme-1 .ql-snow.ql-toolbar button {
  344. height: 22px;
  345. width: 26px;
  346. }
  347. .rte-holder .ql-container p {
  348. margin-top: 0;
  349. margin-bottom: 0.3rem;
  350. }
  351. .note-section:not(.edit) .if-not-edit {
  352. display: block !important;
  353. }
  354. .note-section:not(.edit) div.if-not-edit {
  355. padding-left: 1rem;
  356. }
  357. .note-section:not(.edit):hover {
  358. background: #f6f9fc;
  359. cursor: pointer;
  360. }
  361. .note-signed-by-hcp .note-section:not(.edit):hover {
  362. background: #f6f9fc;
  363. cursor: auto;
  364. }
  365. .note-section.edit .if-edit {
  366. display: block !important;
  367. }
  368. .c-pointer {
  369. cursor: pointer;
  370. }
  371. .events-none {
  372. pointer-events: none;
  373. }
  374. .inset-comment p {
  375. margin-bottom: 0.3rem;
  376. }
  377. .inset-comment p:last-child {
  378. margin-bottom: 0 !important;
  379. }
  380. .note-section.edit {
  381. background: #f0f8ff7d;
  382. outline: 2px solid #9de3ff;
  383. }
  384. .note-section.edit .ql-editor,
  385. .note-section.edit .btn-default {
  386. background-color: #fff !important;
  387. }
  388. /*.note-section-item-row:not(:first-child) {
  389. padding-top: 10px;
  390. border-top: 1px solid #ccc;
  391. }*/
  392. /* override med ac css */
  393. #searchResults {
  394. z-index: 100001 !important;
  395. }
  396. input.search_field, textarea.search_field {
  397. background-position: right 7px center !important;
  398. padding-right: 23px !important;
  399. }
  400. .ansList:focus, .search_field:focus {
  401. background-color: #fff !important;
  402. }
  403. @media (min-width: 1000px) {
  404. .navbar.navbar-dark {
  405. height: 55px;
  406. position: fixed;
  407. top: 0;
  408. left: 0;
  409. width: 100%;
  410. z-index: 9999;
  411. }
  412. .main-row > .sidebar {
  413. width: 180px;
  414. min-width: 180px;
  415. position: fixed;
  416. left: 0;
  417. top: 55px;
  418. z-index: 8;
  419. height: calc(100% - 55px);
  420. overflow-y: overlay;
  421. }
  422. .main-row {
  423. padding-left: 180px;
  424. }
  425. .navbar.navbar-dark+[role="main"] {
  426. padding-top: 55px;
  427. }
  428. }
  429. .font-smaller {
  430. font-size: 11px !important;
  431. }
  432. .text-ellipsis {
  433. white-space: nowrap;
  434. overflow: hidden;
  435. text-overflow: ellipsis;
  436. }
  437. .outline-0 {
  438. outline: none !important;
  439. }
  440. .note-widget-item:hover {
  441. background: #eee;
  442. }
  443. .note-widget-title {
  444. background: #ccc !important;
  445. color: #333 !important;
  446. font-size: 12px !important;
  447. font-weight: bold !important;
  448. }
  449. .navbar-collapse.show {
  450. background: #1c4587;
  451. z-index: 999;
  452. padding: 0.5rem 1rem;
  453. margin: 0 -1rem;
  454. }
  455. .navbar-dark .nav-item .nav-link {
  456. font-size: 12px;
  457. white-space: nowrap;
  458. overflow: hidden;
  459. text-overflow: ellipsis;
  460. }
  461. #patient-search {
  462. min-width: 100px !important;
  463. max-width: 140px !important;
  464. }
  465. .suggestions-outer {
  466. top: calc(100% + 2px);
  467. background: #fff;
  468. width: calc(100% - 1rem);
  469. border-radius: 3px;
  470. border: 1px solid #ccc;
  471. z-index: 9999;
  472. }
  473. .suggestions-outer {
  474. top: calc(100% + 2px);
  475. background: #fff;
  476. width: calc(100% - 1rem);
  477. border-radius: 3px;
  478. border: 1px solid #ccc;
  479. z-index: 9999;
  480. max-height: 220px;
  481. overflow-y: auto;
  482. }
  483. .suggestions-outer .suggest-item, .suggestions-outer .no-suggest-items {
  484. padding: 0.25rem 0.5rem;
  485. text-decoration: none;
  486. font-size: 12px;
  487. }
  488. .suggestions-outer .no-suggest-items {
  489. color: #888;
  490. }
  491. .suggestions-outer .suggest-item.active {
  492. background: #ccc;
  493. }
  494. .suggestions-outer .suggest-item:hover {
  495. background: aliceblue;
  496. }
  497. .pro-dashboard-inline-calendar>.datepicker.datepicker-inline,
  498. .pro-dashboard-inline-calendar table.table-condensed {
  499. width: 100% !important;
  500. }
  501. .pro-dashboard-inline-calendar {
  502. border: 1px solid #ddd;
  503. border-radius: 3px
  504. }
  505. .pro-dashboard-inline-calendar table.table-condensed th {
  506. padding: 0.5rem 0;
  507. }
  508. .pro-dashboard-inline-calendar table.table-condensed td {
  509. padding: 0.25rem 0;
  510. }
  511. .pro-dashboard-inline-calendar table.table-condensed td[has-events] {
  512. background: #c5e4ff;
  513. }
  514. [v-cloak] {
  515. opacity: 0;
  516. }
  517. .patient-avatar {
  518. width: 50px;
  519. height: 50px;
  520. background: #ddd;
  521. display: inline-flex;
  522. align-items: center;
  523. justify-content: center;
  524. border-radius: 100%;
  525. }
  526. .large {
  527. font-size: 16px !important;
  528. }
  529. /* note templates */
  530. .note-template-container {
  531. position: absolute;
  532. z-index: 10002;
  533. background: #fff;
  534. border: 1px solid #ddd;
  535. border-radius: 3px;
  536. display: none;
  537. min-width: 200px;
  538. }
  539. .note-template-container .note-template-item {
  540. position: relative;
  541. height: 25px;
  542. }
  543. .note-template-container .note-template-item .note-template-text {
  544. border-bottom: 1px solid #eee;
  545. }
  546. .note-template-container .note-template-item .label {
  547. padding: 3px 6px;
  548. padding-right: 25px;
  549. white-space: nowrap;
  550. display: inline-flex;
  551. align-items: center;
  552. min-width: 120px;
  553. cursor: pointer;
  554. flex-grow: 1;
  555. }
  556. .note-template-container .note-template-item:hover,
  557. .note-template-container .note-template-item.selected {
  558. background: aliceblue;
  559. }
  560. .note-template-container .note-template-item .label>input[type="checkbox"] {
  561. pointer-events: none;
  562. margin: 0;
  563. margin-right: 4px;
  564. height: 11px;
  565. }
  566. .note-template-container .note-template-item:last-child label {
  567. border: 0;
  568. }
  569. .note-template-container .note-template-item .note-template-children {
  570. position: absolute;
  571. left: 100%;
  572. top: 0;
  573. background: #fff;
  574. border: 1px solid #ddd;
  575. border-radius: 3px;
  576. display: none;
  577. }
  578. /*.note-template-container .note-template-item.selected:hover>.note-template-children {
  579. display: block;
  580. }*/
  581. .note-template-container .note-template-item .has-children {
  582. position: absolute;
  583. right: 6px;
  584. top: 0;
  585. height: 25px;
  586. line-height: 25px;
  587. color: #bbb;
  588. }
  589. .note-template-container .note-template-item:hover>.has-children {
  590. color: #444;
  591. }
  592. .note-templates-underlay {
  593. position: fixed;
  594. top: 0;
  595. left: 0;
  596. height: 100%;
  597. width: 100%;
  598. background: rgba(0,0,0,0.13);
  599. display: none;
  600. z-index: 10001;
  601. }
  602. .note-template-container textarea {
  603. height: 100px;
  604. border-radius: 0;
  605. border-color: #ccc;
  606. padding: 5px 10px;
  607. display: block;
  608. }
  609. .note-template-buttons {
  610. position: absolute;
  611. bottom: 100%;
  612. right: 0;
  613. height: 27px;
  614. padding: 0 3px;
  615. background: #fff;
  616. }
  617. .note-template-buttons button {
  618. font-size: 10px;
  619. padding: 2px 5px;
  620. margin-left: 5px;
  621. border-radius: 2px;
  622. }
  623. .note-template-buttons button:first-child {
  624. margin-left: 0;
  625. }
  626. .note-template-output {
  627. position: absolute;
  628. bottom: calc(100% + 26px);
  629. left: 0;
  630. padding: 3px 6px;
  631. background: #f7f7f7;
  632. min-width: 100%;
  633. border-radius: 3px;
  634. }
  635. .note-template-output-text {
  636. }
  637. .note-template-output .note-template-output-line {
  638. font-size: 11px;
  639. width: max-content;
  640. max-width: 500px;
  641. margin: 0;
  642. }
  643. .note-template-set-chooser {
  644. height: 22px;
  645. line-height: 22px;
  646. padding: 0 0.22rem;
  647. font-size: 12px !important;
  648. }
  649. .ql-editor .note-template-output-line {
  650. white-space: normal;
  651. }
  652. [prefix="(+)"] a.plus-trigger {
  653. color: #23a923 !important;
  654. }
  655. [prefix="(-)"] a.minus-trigger {
  656. color: #a91e1e !important;
  657. }
  658. .rspace {
  659. width: 20px;
  660. display: inline-flex;
  661. text-align: center;
  662. justify-content: center;
  663. }
  664. .embed-mask {
  665. position: fixed;
  666. left: 0;
  667. top: 0;
  668. height: 100%;
  669. width: 100%;
  670. background: rgba(0, 0, 0, 0.1);
  671. z-index: 98;
  672. }
  673. .embed-section {
  674. background: #fff;
  675. z-index: 99;
  676. padding: 0;
  677. border: 1px solid #ccc;
  678. }
  679. .mask-text-addition {
  680. position: fixed;
  681. bottom: calc(50% - 60px);
  682. left: 0;
  683. width: 100%;
  684. text-align: center;
  685. font-size: 12px;
  686. z-index: 9999999;
  687. color: #000;
  688. }
  689. .note-summary p {
  690. margin-bottom: 0.25rem;
  691. }
  692. .aligned-icon {
  693. display: inline-block;
  694. width: 18px;
  695. text-align: center;
  696. }
  697. body #searchCount {
  698. display: none !important;
  699. }
  700. body .break-spaces {
  701. white-space: pre-wrap;
  702. }
  703. .stag-tooltip .stag-tooltip-content {
  704. display: none;
  705. min-width: 200px;
  706. }
  707. .stag-tooltip:hover .stag-tooltip-content {
  708. display: block;
  709. right: -10px;
  710. top: 100%;
  711. z-index: 1;
  712. }
  713. .gem-nodes .node {
  714. border: 1px solid #ddd;
  715. padding: 0.75rem;
  716. border-radius: 5px;
  717. }
  718. .gem-nodes>.node {
  719. border: 0 !important;
  720. padding-left: 0;
  721. padding-right: 0;
  722. }
  723. .gem-nodes>.node:first-child {
  724. margin-top: 0 !important;
  725. }
  726. .gem-nodes>.node>label {
  727. font-weight: bold;
  728. font-size: 14px;
  729. margin: 0;
  730. }
  731. .gem-nodes .subs .node:last-child {
  732. margin-bottom: 0 !important;
  733. }
  734. .gem-nodes>.node>.subs {
  735. padding-left: 0 !important;
  736. }
  737. .gem-nodes>.node>.subs>.node {
  738. background: #f2f2f2;
  739. }
  740. .gem-nodes>.node>.subs>.node>.subs>.node {
  741. background: #fff;
  742. }
  743. .gem-nodes .node span[field] {
  744. font-weight: bold;
  745. }
  746. body .node input[type="number"] {
  747. max-width: 70px;
  748. min-width: unset !important;
  749. }
  750. .section-edit-mask {
  751. top: 0;
  752. left: 0;
  753. width: 100%;
  754. height: 100%;
  755. }
  756. .signed-note {
  757. position: relative;
  758. pointer-events: none !important;
  759. }
  760. .signed-note::after {
  761. content: '';
  762. position: absolute;
  763. z-index: 2;
  764. cursor: not-allowed;
  765. left: 0;
  766. top: 0;
  767. width: 100%;
  768. height: 100%;
  769. background: rgba(0,0,0,0.01);
  770. }
  771. .slot-picker {
  772. padding: 4px;
  773. padding-right: 0;
  774. padding-bottom: 0;
  775. }
  776. .slot-picker.disabled {
  777. opacity: 0.5;
  778. pointer-events: none;
  779. cursor: not-allowed;
  780. }
  781. .slot-picker td {
  782. text-align: center;
  783. border: 1px solid #ddd !important;
  784. padding: 2px 5px;
  785. cursor: pointer;
  786. }
  787. .slot-picker th {
  788. border: 0 !important;
  789. }
  790. .slot-picker td:hover {
  791. background: aliceblue;
  792. }
  793. .slot-picker td.blocked {
  794. background: #ccc !important;
  795. cursor: not-allowed;
  796. }
  797. .slot-picker td.selected {
  798. background-image: linear-gradient(to bottom,#08c,#04c);
  799. background-repeat: repeat-x;
  800. color: #fff;
  801. }
  802. .pro-appointment-calendar.disabled {
  803. opacity: 0.5;
  804. pointer-events: none;
  805. cursor: not-allowed;
  806. }
  807. .pro-appointment-calendar .datepicker-inline {
  808. width: 195px;
  809. padding-left: 0;
  810. }
  811. .pro-appointment-calendar .datepicker td {
  812. height: 25px;
  813. }
  814. .datepicker td, .datepicker th {
  815. border: none !important;
  816. }
  817. .appt-form-col {
  818. width: 220px;
  819. }
  820. .appt-calendar-col {
  821. flex-grow: 1;
  822. }
  823. .appt-form td.fc-day.stag-selected {
  824. outline: 2px solid #007bff;
  825. background: #e5f2fd;
  826. }
  827. .appt-form .stag-current-appt {
  828. background: #89159cc7;
  829. color: #fff;
  830. border-color: #89159cc7;
  831. }
  832. .appt-form .stag-current-appt .fc-daygrid-event-dot {
  833. border-color: #fff;
  834. }
  835. .appt-form .fc .fc-toolbar.fc-header-toolbar {
  836. margin-bottom: 0.5rem;
  837. /*align-items: start;*/
  838. }
  839. .stag-calendar-header-extra {
  840. background: #cde8ff;
  841. padding: 3px 10px;
  842. margin-top: 7px;
  843. border-top-left-radius: 6px;
  844. border-top-right-radius: 6px;
  845. border: 1px solid #44a5f982;
  846. border-bottom: 0;
  847. }
  848. .stag-calendar-header-extra * {
  849. font-size: 14px !important;
  850. }
  851. /* call panel */
  852. #proCallComponent {
  853. padding-bottom: 150px;
  854. }
  855. .patient-queue {
  856. display: flex;
  857. flex-direction: column;
  858. position: fixed;
  859. left: 0;
  860. width: 100%;
  861. bottom: 0;
  862. z-index: 4;
  863. }
  864. .queue-item {
  865. width: 100px;
  866. padding: 0.5rem;
  867. padding-bottom: 0.25rem;
  868. text-align: center;
  869. cursor: pointer;
  870. }
  871. .queue-item:hover {
  872. background: aliceblue;
  873. }
  874. .current-work-indicator {
  875. /*
  876. position: fixed;
  877. top: 55px;
  878. right: 0;
  879. z-index: 9999;
  880. */
  881. background: #305ba0;
  882. color: #fff;
  883. font-size: 12px;
  884. padding: 3px 8px;
  885. border-radius: 3px;
  886. /* border-bottom-left-radius: 5px;*/
  887. }
  888. /* stag popups */
  889. .stag-popup {
  890. position: fixed;
  891. left: 0;
  892. top: 55px;
  893. width: 100%;
  894. height: calc(100% - 55px);
  895. overflow-x: auto;
  896. z-index: 97;
  897. justify-content: center;
  898. align-items: center;
  899. display: none;
  900. background: center center no-repeat scroll rgba(0, 0, 0, 0.1);
  901. padding: 2rem 0;
  902. }
  903. .stag-popup.show {
  904. display: block;
  905. }
  906. .stag-popup>form {
  907. width: 80%;
  908. background: #fff;
  909. border: 1px solid #aaa;
  910. border-radius: 5px;
  911. overflow: hidden;
  912. box-shadow: 0 0 5px #ddd;
  913. margin: 0 auto;
  914. padding: 0.75rem;
  915. }
  916. .stag-popup.wide>form {
  917. width: calc(100% - 4rem);
  918. }
  919. .stag-popup.narrow>form {
  920. max-width: 500px;
  921. }
  922. .stag-popup.stag-popup-sm>form {
  923. max-width: 500px;
  924. }
  925. .stag-popup.stag-popup-md>form {
  926. max-width: 632pt;
  927. }
  928. .stag-popup.stag-popup-right>form {
  929. margin-right: 1.5rem;
  930. margin-left: auto;
  931. }
  932. .no-scroll {
  933. /*overflow: hidden;*/
  934. }
  935. .client-rs-contents p {
  936. margin-bottom: 0.25rem;
  937. }
  938. .pro-option {
  939. position: relative;
  940. display: block;
  941. padding-left: 30px;
  942. }
  943. .pro-option.pro-option-selected {
  944. display: inline-block;
  945. padding-left: 25px;
  946. }
  947. .pro-option .pro-option-initials {
  948. position: absolute;
  949. left: 5px;
  950. top: 2px;
  951. font-size: 10px;
  952. border-radius: 100%;
  953. height: 20px;
  954. width: 20px;
  955. line-height: 20px;
  956. text-align: center;
  957. font-weight: 400;
  958. }
  959. .pro-option.pro-option-selected .pro-option-initials {
  960. left: 3px;
  961. top: 0;
  962. font-size: 10px;
  963. border-radius: 100%;
  964. height: 18px;
  965. width: 18px;
  966. line-height: 19px;
  967. text-align: center;
  968. font-weight: 400;
  969. }
  970. span.pro-selection {
  971. padding: 0 5px;
  972. height: 18px;
  973. display: inline-block;
  974. border-top-right-radius: 3px;
  975. border-bottom-right-radius: 3px;
  976. }
  977. .select2-results__option--selectable {
  978. font-size: 13px;
  979. }
  980. #calendarApp .select2-selection__choice__display,
  981. #proCalendarApp .select2-selection__choice__display {
  982. padding: 0 !important;
  983. overflow: hidden !important;
  984. }
  985. span.select2-container.select2-container--default.select2-container--open {
  986. z-index: 999999;
  987. }
  988. .fc .fc-highlight {
  989. background: rgba(188, 232, 241, 0.6) !important;
  990. }
  991. .fc .add-overlay {
  992. padding: 1px 4px;
  993. display: inline-block;
  994. font-weight: bold;
  995. }
  996. .fc .add-overlay.add-overlay-day-grid {
  997. padding: 4px;
  998. }
  999. .stag-popup .stag-popup-title {
  1000. border-bottom: 1px solid #eee;
  1001. padding-bottom: 0.75rem;
  1002. margin-bottom: 1rem;
  1003. display: flex;
  1004. align-items: center;
  1005. }
  1006. .stag-popup .stag-popup-title>span {
  1007. font-size: 17px;
  1008. }
  1009. .fc .other-client {
  1010. box-shadow: 1px 1px 2px deeppink !important;
  1011. opacity: 0.5;
  1012. }
  1013. .fc .other-client:hover {
  1014. opacity: 0.8;
  1015. }
  1016. .fc .availability {
  1017. box-shadow: 0 0 3px green !important;
  1018. }
  1019. .fc .inactive-appointment {
  1020. opacity: 0.6;
  1021. box-shadow: 0 0 3px grey !important;
  1022. }
  1023. .fc .fc-button-primary:not(:disabled):active,
  1024. .fc .fc-button-primary:not(:disabled).fc-button-active {
  1025. border-color: #56a767 !important;
  1026. background-color: #56a767 !important;
  1027. }
  1028. .w-150 {
  1029. width: 150px !important;
  1030. min-width: 150px !important;
  1031. }
  1032. .w-180 {
  1033. width: 180px !important;
  1034. min-width: 180px !important;
  1035. }
  1036. .guest-view button.add-shortcut {
  1037. display: none;
  1038. }
  1039. .guest-view .note-section,
  1040. .guest-view .note-section:hover {
  1041. background: #fff !important;
  1042. }
  1043. #stagPdfViewer>form {
  1044. padding: 0;
  1045. background: #eee;
  1046. }
  1047. #stagPdfViewer>form .stag-popup-title {
  1048. background: #fff;
  1049. padding: 1rem;
  1050. }
  1051. canvas.pdf-viewer-page {
  1052. max-width: 100%;
  1053. margin: 1rem auto;
  1054. display: block;
  1055. box-shadow: 0 0 2px #aaa;
  1056. }
  1057. .hidden-link-input {
  1058. /*opacity: 0;
  1059. width: 0 !important;
  1060. border: 0 !important;
  1061. padding: 0 !important;*/
  1062. position: absolute;
  1063. left: -9999px;
  1064. }
  1065. table.table-edit-sheet tbody tr td {
  1066. padding: 0;
  1067. background: #f7f7f7;
  1068. }
  1069. table.table-edit-sheet tbody tr td>input,
  1070. table.table-edit-sheet tbody tr td>select {
  1071. box-shadow: none !important;
  1072. border-radius: 0 !important;
  1073. border: 0;
  1074. background: #fefefe;
  1075. width: 100% !important;
  1076. min-width: unset !important;
  1077. border-bottom: 1px solid #dee2e6;
  1078. }
  1079. table.table-edit-sheet tbody tr td>input:focus,
  1080. table.table-edit-sheet tbody tr td>select:focus {
  1081. background: #fff;
  1082. outline: 3px solid #4b88a633;
  1083. }
  1084. table.table-edit-sheet tbody tr [contenteditable] {
  1085. background: #fff;
  1086. }
  1087. table.table-edit-sheet .ql-toolbar {
  1088. border-top: 0 !important;
  1089. }
  1090. table.table-edit-sheet .ql-container {
  1091. border-bottom: 0 !important;
  1092. }
  1093. table.table-edit-sheet .ql-editor[contenteditable] {
  1094. min-height: 60px;
  1095. }
  1096. .w-35 {
  1097. width: 35%;
  1098. }
  1099. .client-single-dashboard .hide-if-dashboard {
  1100. display: none;
  1101. }
  1102. .notes-list .hide-if-note,
  1103. .note-section .hide-if-note {
  1104. display: none;
  1105. }
  1106. .data-option-list {
  1107. position: absolute;
  1108. background: #fff;
  1109. border: 1px solid #ddd;
  1110. margin-top: -1px;
  1111. width: 100%;
  1112. z-index: 1;
  1113. display: none;
  1114. }
  1115. input[data-option-list]:focus+.data-option-list {
  1116. display: block;
  1117. }
  1118. .data-option-list>div {
  1119. cursor: pointer;
  1120. padding: 0.3rem 0.5rem;
  1121. border-bottom: 1px solid #ddd;
  1122. color: #666;
  1123. }
  1124. .data-option-list>div:last-child {
  1125. border-bottom: 0;
  1126. }
  1127. .data-option-list>div:hover {
  1128. background: aliceblue;
  1129. }
  1130. .measurement-item:not(:last-child) {
  1131. border-bottom: 1px solid #e7e7e7;
  1132. }