style.css 22 KB

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