style.css 21 KB

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