:root { --text: #212d3d; --text-light: #616c7b; --text-grey: #757b8a; --headings: #10172a; --primary: #397ff1; --primary-darker: #2e6cd2; --border-light: #e2e8f0; --border-dark: #d1d5da; --border-very-dark: #3d3d3d; --background-highlight: #f1f6fb; --background-light: #edf0f7; --success: #04cb58; --danger: #e23807; --important: #f40079; --user-role: grey; } :root { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "sans-serif", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } *{box-sizing: border-box;} #app{} html{height:100vh;} body{height:100vh;margin:0;padding:0;background:#f6f8fa;color: var(--text);font-size:15px;font-synthesis: none;text-rendering: optimizeLegibility;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;-webkit-text-size-adjust: 100%;overflow-y: scroll;} body.public{} body.role-practice-manager {--user-role: #8c776c} body.role-specialist {--user-role: #4c6d95} body.role-referrer {--user-role: #816888} h1{color:var(--headings);margin:2em 0 1em 0;font-weight:600;font-size:2em;line-height:1.2} h2{color:var(--headings);margin:2em 0 1em 0;font-weight:500;font-size:1.40em;line-height:1.2;font-weight:bold} h3{color:var(--headings);margin:2em 0 1em 0;font-weight:500;font-size:1.15em;line-height:1.2} h4{color:var(--headings);margin:2em 0 1em 0;font-weight:500;font-size:1.05em;line-height:1.2} h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child,h5:first-child{margin-top:0;} strong{font-weight:600} a{color:#000;} p{margin:0 0 1.5em 0;line-height:1.5} hr{margin:30px 0;border:none;border-bottom:1px solid var(--border-light);} .link{text-decoration:underline;cursor:pointer} .link:hover{color:var(--save)} ul{margin:0 0 1.5em 0;padding:0;} ul li{margin:0 0 .15em 1.5em;padding:0;line-height:1.5;} ul li::marker{color:var(--primary);font-size:20px} ul li ul{margin:0;font-size:.9em} .fade-enter-active, .fade-leave-active {transition:opacity .2s;} .fade-enter-from, .fade-leave-to {opacity:0;} .text--danger{color: var(--danger)} .dev-note{background:#fefdc4;padding:10px 20px;border-radius:4px;font-size:13px;text-align:center} textarea.code-formatted{background:#fff;padding:30px;height:600px;overflow:auto;width:100%} pre.code-formatted{background:#fff;padding:30px;max-height:300px;overflow:auto;width:100%} .site{} .container{padding:0 50px;max-width:1200px;margin:0 auto} /*******************************************************/ /* API Working /*******************************************************/ .api-working{position:fixed;top:0;left:0;right:0;z-index:100;margin:0;} .api-working__line {width: 100%;height:3px;position: relative;overflow: hidden;background-color: rgba(255,255,255,1)} .api-working__line:before {content: "";position: absolute;left: -50%;height: 3px;width: 40%;background-color: #397ff1;animation: lineAnim 1s linear infinite;} @keyframes lineAnim {0% {left: -40%;}50% {left: 20%;width: 80%;}100% {left: 100%;width: 100%;}} .loading-enter-active,.loading-leave-active {transition: .2s all} .loading-enter-from,.loading-leave-to {opacity:0} .drop-enter-active, .drop-leave-active {transition:.15s all} .drop-enter-from, .drop-leave-to {transform: translateY(-20px);opacity: 0;} .site-error{position:fixed;top:20px;right:20px;left:20px;z-index:10} .notice{background:#fff;padding:15px 25px;margin:0 0 30px 0;border:1px solid var(--primary);border-left:10px solid var(--primary);position:relative} .notice--error{border:1px solid var(--danger);border-left:10px solid var(--danger);} .notice--success{border:1px solid var(--success);border-left:10px solid var(--success);} .notice--muted{border:1px solid var(--border-light);border-left:10px solid var(--border-light)} .notice > *:last-child{margin-bottom:0;} .notice h2{font-size:1.3em;margin:0 0 1em 0;} .notice p{margin:0 0 1em 0;} .notice__close{position:absolute !important;top:8px;right:20px;} /*******************************************************/ /* Header /*******************************************************/ .header{position:relative;z-index:10;background:#33373f;color:#fff;transition:.2s background-color;color:#fff} .header .container{display:flex;align-items:center;gap:40px;padding-top:20px;padding-bottom:20px;} .header__logo{cursor:pointer;color:#fff;min-width:200px} .header__logo img{max-width:200px;} .header__nav{flex:1;color:#e0e0e0} .header__nav ul{display:inline-flex;gap:2px;align-items:center;margin:0;padding:0;list-style:none;} .header__nav ul li{margin:0;padding:0;list-style:none;cursor:pointer;font-weight:500;position:relative;padding:8px 15px;line-height:1;border:1px solid transparent;border-radius:100px} .header__nav ul li.header__nav--active{color:#fff;border:1px solid var(--user-role);background:rgba(0,0,0,0.3)} .header__nav ul li a{text-decoration: none;color:#fff} .header__nav ul li:hover{} .header__user{position:relative;display:flex;align-items:center;justify-content:flex-end;gap:5px} .header__user-label{text-align:right;} .header__user-name{margin:0 0 4px 0;line-height:1} .header__user-practice-name{margin:0 0 4px 0;line-height:1;font-weight:bold} .header__user-role{text-transform:capitalize;font-size:12px;font-weight:normal;opacity:.7} .header__user-avatar{background:var(--user-role);color:#fff;border-radius:100px;aspect-ratio:1/1;padding:.6em;font-size:1.2em;display:inline-flex;align-items:center;justify-content: center;line-height:1;margin-left:10px} .header__user-avatar svg{width:100%;height:100%;} .header__user .user-menu{position:absolute;top:100%;right:10px;background:#fff;border-radius:4px;opacity:0;visibility: hidden;transition:.2s all;border:1px solid var(--border-dark);min-width:200px;} .header__user:hover .header__user-avatar svg{opacity:1} .header__user:hover .user-menu{opacity:1;visibility: visible;} .header__user .user-menu ul{margin:0;padding:0;list-style:none;display:block} .header__user .user-menu ul li{margin:0;padding:7px 20px;;list-style:none;border:none;border-bottom:1px solid var(--border-light);cursor:pointer;transition:.2s all;color:#000;} .header__user .user-menu ul li:first-child{border-radius:4px 4px 0 0} .header__user .user-menu ul li:last-child{border:none;border-radius:0 0 4px 4px} .header__user .user-menu ul li:hover{background: var(--background-highlight);} .header__user-more{width:24px} .header__user-more svg{width:100%;} .header__mobile-trigger{display:none;} .header__mobile-trigger .button svg{width:40px;height:40px} @media only screen and (max-width: 768px) { .header__logo{flex:1;} .header__logo img{} .header__nav{display:none;} .header__user{display:none;} .header__mobile-trigger{display:block} .header__mobile-content .header__user{display:flex;width:100%;justify-content: center;margin:0 0 20px 0} .header__mobile-content{background:#fff;position:fixed;z-index:100;top:0;right:0;left:0;bottom:0;background: rgba(0,0,0,0.5);transition:.2s all} .header__mobile-container{background:#fff;color:#000;padding:20px 20px;box-shadow:0 0 10px rgba(0,0,0,0.2);position:fixed;z-index:100;top:0;right:0;left:20%;bottom:0;} .header__mobile-close{text-align:right;} .header__mobile-close .button svg{width:40px;height:40px} .header__mobile-content ul{margin:0;padding:0;list-style:none;border-top:1px solid var(--border-light)} .header__mobile-content ul li{margin:0;padding:8px 0px;list-style:none;border-bottom:1px solid var(--border-light);cursor:pointer} } .current-practice{} /*******************************************************/ /* Footer /*******************************************************/ .footer{border-top:1px solid var(--border-light);font-size:.9em;margin:60px 0 0 0;} .footer .container{padding-top:30px;padding-bottom:30px;display:flex;} .footer .container .footer__start{width:40%} .footer .container .footer__end{width:60%;text-align:right} @media only screen and (max-width: 768px) { .footer .container{display:block;} .footer .container .footer__start{width:auto;text-align:center;margin:0 0 20px 0} .footer .container .footer__end{width:auto;text-align:center} } /*******************************************************/ /* Main /*******************************************************/ @media only screen and (max-width: 768px) { .container{padding:0 20px;} } .current-user{background:var(--user-role);color:#fff;padding:8px 0px;font-size:12px;position:relative;} .current-user .container{display:flex;align-items:center;justify-content: space-between;gap:20px;} .current-user__start{flex:1} .current-user__end{} .current-user .button, .current-user .button:hover{color:#fff} .current-user .button svg{width:16px;height:16px;} main.main{} .content{padding:40px 0} .breadcrumb{margin:0 0 0px 0;font-size:.9em} .breadcrumb .button{opacity:.5} .breadcrumb .button:hover{opacity:1} .page-title{border-bottom:1px solid var(--border-light);padding:30px 0 30px 0;background:#fff;position:sticky;top:0;z-index:2;} .page-title > .container{display:flex;align-items:center;gap:15px;} .page-title__back{padding:0px 15px 0 0;border-right:1px solid var(--border-dark);align-self:flex-start;margin:6px 0 0 0} .page-title__start{flex:1} .page-title__start h1{font-weight:500;font-size:29px;margin:0} .page-title__start h2{font-weight:500;font-size:23px;margin:0} .page-title__start > *{margin:0 0 20px 0;} .page-title__start > *:last-child{margin:0;} .page-title__end{text-align:right;display:flex;gap:10px;justify-content:flex-end;align-items:center} .page-title__end:empty{display:none;} @media only screen and (max-width: 768px) { .page-title{padding:20px 0;position:relative} .page-title > .container{display:block} .page-title__back{display:none;} .page-title__start{display:block;text-align:left;} .page-title__start h1{font-size:20px;} .page-title__end{display:block;text-align:left;margin:10px 0 0 0} } .block{background:var(--background-highlight);border-radius:10px;padding:25px 35px 25px 35px;margin-bottom:30px;transition:.2s all;position:relative} .block--centered{max-width:600px;margin-left:auto;margin-right:auto;} .block > *:last-child{margin-bottom:0;} .block--clickable:hover{border:2px solid var(--primary);cursor:pointer} .block > h1:first-child{margin:0 0 .5em 0;} .block--success{background: #fff;border:2px solid var(--success);} .section{margin:0 0 30px 0;background:#fff;border-radius:5px;border:1px solid var(--border-light)} .section__heading{border-bottom:1px solid var(--border-light);padding:20px 35px;border-radius:4px 4px 0 0} .section__heading h2{margin:0;font-size:25px} .section__heading h2:not(:only-child){margin-bottom:10px;} .section__heading > *:last-child{margin-bottom:0;} .section__content{padding:25px 35px} .section__content > *:last-child{margin-bottom:0;} .section__actions{background:#f9fbfd;display:flex;border-top:1px solid var(--border-light);padding:15px 35px;border-radius:0 0 5px 5px;gap:20px} .section__actions__start{flex:1;display:flex;gap:20px;justify-content:flex-start;} .section__actions__start > .button:not(:last-child){margin-right:20px} .section__actions__end{flex:1;display:flex;gap:20px;justify-content:flex-end} .section__actions__end > .button:not(:last-child){margin-right:20px} .grid{display:grid;position:relative;} .grid--no-margin{margin:0;} .grid > * > *:first-child{margin-top:0} .grid > * > *:last-child{margin-bottom:0} .grid--gap{grid-gap:20px} .grid--gap-small{grid-gap:10px;} .grid--gap-large{grid-gap:50px;} .grid--1{grid-template-columns:repeat(1, 1fr)} .grid--2{grid-template-columns:repeat(2, 1fr)} .grid--3{grid-template-columns:repeat(3, 1fr)} .grid--4{grid-template-columns:repeat(4, 1fr)} .grid--5{grid-template-columns:repeat(5, 1fr)} .grid--6{grid-template-columns:repeat(6, 1fr)} .grid--7{grid-template-columns:repeat(7, 1fr)} .grid--8{grid-template-columns:repeat(8, 1fr)} .grid--small-large{grid-template-columns: 33% 1fr} .grid--large-small{grid-template-columns: 1fr 33.33%} .grid--half-half{grid-template-columns:.5fr .5fr} .filter{border:none;background:none;font-family:inherit;font-size:inherit;} .filter__label{margin:0 10px;padding:0 0 5px 0;} .filter:first-child .filter__label{margin-left:0} .filter:not(:last-child){border-right:1px solid var(--border-dark);} .filter--active .filter__label{border-bottom:2px solid var(--primary);} .filter--active:hover{} .datatable__wrapper{} .datatable{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--border-light)} .datatable:not(:last-child){margin:0 0 2.5em 0} .datatable th{text-align:left;padding:12px 20px;background:var(--background-light);border-bottom:1px solid var(--border-light);color:#000;font-weight:500;white-space:nowrap} .datatable td{text-align:left;padding:15px 20px;border-bottom:1px solid var(--border-light)} .datatable tr:nth-child(even) td{background:#f9fafb;} .datatable--clickable:hover td{cursor:pointer;background: #fffef1 !important;} .datatable td svg{vertical-align:middle;} .datatable__icon{display:flex;gap:10px;align-items:center} .datatable__icon svg{width:24px;} .datatable__icon span{flex:1;} th.datatable--th-sortable{cursor:pointer;} th.datatable--th-sortable:hover{text-decoration:underline;} th.datatable--th-sortable:after{content:'';display:inline-block;margin:-3px 0 0 3px;vertical-align:middle;width:16px;height:16px;position:relative;width:16px;height:16px;background-size:contain;background-repeat:no-repeat;} th.datatable--th-sortable.datatable--th-sortable-sorting:after{background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23000000'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M7 14l5-5 5 5H7z'/%3E%3C/svg%3E");} th.datatable--th-sortable.datatable--th-sortable-sorting-reverse:after{background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23000000'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M7 10l5 5 5-5H7z'/%3E%3C/svg%3E");} th.datatable--th-more{width:50px} th.datatable--th-partner{width:200px} th.datatable--th-patient{width:200px} th.datatable--th-date{width:150px;} th.datatable--th-status{width:200px} th.datatable--th-action{width:70px} th.datatable--th-fee{width:100px} th.datatable--th-specialty{width:160px;} @media only screen and (max-width: 768px) { .datatable__wrapper{} .datatable table, .datatable thead, .datatable tbody, .datatable th, .datatable td, .datatable tr { display: block; } .datatable thead tr {position: absolute;top: -9999px;left: -9999px} .datatable tr {border-bottom: 1px solid var(--border-dark) } .datatable td {border: none;border-top: 1px solid #eee; position: relative;padding:12px 15px;padding-left: 40%; white-space: normal;font-size:.9em} .datatable td:before {position: absolute;top: 12px;left: 15px;width: 30%; padding-right: 15px;white-space: nowrap;font-weight:bold;} .datatable td:before {content: attr(data-label);} .datatable .icon-and-label__icon{display:none;} } .icon-list{margin:0 0 20px 0} .icon-list.icon-list--small .icon-list__item{padding:5px 10px} .icon-list__item{display:flex;gap:15px;border:1px solid var(--border-light);border-top:none;padding:10px 15px;align-items:flex-start} .icon-list__item:first-child{border-top-left-radius:4px;border-top-right-radius:4px;border-top:1px solid var(--border-light)} .icon-list__item:last-child{border-bottom-left-radius:4px;border-bottom-right-radius:4px} .icon-list--horizontal{gap:10px;} .icon-list--horizontal .icon-list__item{border:1px solid var(--border-light);border-radius:4px;align-items:center} .icon-list__icon{width:24px;font-size:0} .icon-list__icon svg{fill:var(--primary);width:24px;height:24px} .icon-list__label{flex:1;} .icon-list__label a{color:#000;text-decoration:none;} .comanage-tabs__control{display:flex;gap:1px;margin:0 0 30px 0;border-bottom:1px solid var(--border-light);} .comanage-tabs__control-item{font-size:1.2em;padding:10px 25px;color:var(--text-grey);cursor:pointer;} .comanage-tabs__control-item .indicator{margin-left:.25em;} .comanage-tabs__control-item:hover{color:#000;} .comanage-tabs__control-item--active{border-bottom:3px solid var(--primary);color:#000} .comanage-tabs__control-item--separator{flex:1;width:100%} .comanage-tabs__content{display:none;margin:0 0 30px 0} .comanage-tabs__content--active{display:block;} .indicator{display:inline-flex;justify-content:center;align-items:center;width:28px;height:28px;font-size:16px;color:#000;border-radius:100px;line-height:0;border:1px solid var(--border-light);font-weight:normal;background: #fff;color:var(--text-grey);font-weight:bold;} .comanage-tabs__control-item--active .indicator{color:#000} .indicator--highlight{border:1px solid var(--primary);} .indicator--red{border:1px solid #d80b43;color:#d80b43} .comanage-tabs__control-item--active .indicator--red{color:#d80b43} @media only screen and (max-width: 768px) { .comanage-tabs__control{gap:0px;padding:0} .comanage-tabs__control-item{font-size:.8em;display:flex;text-align:center;padding:20px 5px 10px 5px;align-items:center;justify-content: center;position:relative;flex:1;} .comanage-tabs__control-item--separator{display:none} .comanage-tabs__control-item .indicator{position:absolute;top:-.8em;left:50%;transform: translateX(-50%)} } .icon-and-label{display:flex;gap:15px;align-items:center;font-weight:500;line-height:1.3} .icon-and-label__icon{font-size:0} .icon-and-label__icon svg{width:32px;height:32px;} .icon-and-label__label em{opacity:.6;font-weight:normal;font-style:normal} .icon-and-label__label strong{font-weight:700} .checkbox-list{} .checkbox-list-item{border:1px solid var(--border-dark);padding:12px 20px;} .checkbox-list-item:not(:last-child){border-bottom:none;} .checkbox-list-item--active{background: var(--background-highlight);} .checkbox-list-item:first-child{border-top-left-radius:4px;border-top-right-radius:4px;} .checkbox-list-item:last-child{border-bottom-left-radius:4px;border-bottom-right-radius:4px;} .checkbox-list-item__heading{display:flex;gap:10px;} .checkbox-list-item__content{margin:10px 0 0 0} .checkbox-list-item__checkbox{cursor:pointer;display:flex;align-items:center;gap:5px} .checkbox-list-item__label{flex:1;padding:2px 0 0 0} .checkbox-list-item svg{vertical-align: middle;fill:var(--primary);cursor:pointer} .switch-table{width:100%;border-collapse:collapse;border-radius:4px;box-shadow: 0 0 0 1px var(--border-dark);} .switch-table tr > *:first-child{border-radius:4px 0 0 4px;} .switch-table tr > *:last-child{border-radius:0 4px 4px 0} .switch-table th{text-align:left;padding:15px 15px;} .switch-table td{text-align:left;padding:15px 15px;} .switch-table tbody tr:nth-child(odd) th, .switch-table tbody tr:nth-child(odd) td{background: #f7f7f8} .switch-table tbody th{font-weight:normal;} input[type=checkbox].input--checkbox-toggle {-webkit-appearance: none;-moz-appearance: none;appearance: none;-webkit-tap-highlight-color: transparent;cursor: pointer;} input[type=checkbox].input--checkbox-toggle:focus {outline: 0;} .input--checkbox-toggle {height: 29px;width: 50px;border-radius: 16px;display: inline-block;position: relative;margin: 0;border: 1px solid var(--border-dark);transition: all 0.2s ease;background: var(--border-dark)} .input--checkbox-toggle:after{content: "";position: absolute;top: 1px;left: 1px;width: 25px;height: 25px;border-radius: 50%;background: white;transition: all 0.2s cubic-bezier(0.5, 0.1, 0.75, 1.35);} .input--checkbox-toggle:checked {border-color: var(--success);background: var(--success)} .input--checkbox-toggle:checked:after {transform: translatex(21px);} body.modal-open{height: 100vh;width: 100vw;touch-action: none;-webkit-overflow-scrolling: none;overflow: hidden;overscroll-behavior: none;} .modal{background: rgba(0,0,0,0.5);position:fixed;z-index:2;top:0;right:0;bottom:0;left:0;display:flex;align-items: center;justify-content: center;padding:20px 20px;transition:.2s all} .modal__container{background:#fff;width:800px;max-height:100%;border-radius:4px;display:flex;flex-direction: column;opacity:1;transform: scale(1);transition:.2s all;} .modal__container > *:first-child{margin-top:0;} .modal__header{margin:0 0 2em 0;padding:30px 30px 0 30px;} .modal__header > *{margin:0;} .modal__content{flex:1;overflow:auto;overscroll-behavior: contain;padding:0px 30px;} .modal__footer{margin:2em 0 0 0;display:flex;gap:20px;padding:30px 30px;padding-bottom:calc(env(safe-area-inset-bottom) + 30px);background: var(--background-light);border-radius:0 0 4px 4px;border-top:1px solid var(--border-dark)} .modal__footer .button{flex:1} @media only screen and (max-width: 768px) { .modal{padding:0;} .modal__container{width:100%;border-radius:0;width:100%;height:100%} } .modal-enter-from, .modal-leave-to {opacity: 0;} .modal-enter-from .modal__container, .modal-enter-leave-to .modal__container{transform: scale(.9);} .popover{position:relative;} .popover__trigger{border-radius:100px;width:2.5em;height:2.5em;border:1px solid transparent;margin:0;padding:.25em;display:flex;align-items:center;justify-content:center;background:none;cursor:pointer} .popover__trigger svg{width:100%;height:100%} .popover__content{opacity:0;visibility:hidden;transform:translateY(-10px);transition:.1s all;position:absolute;right:0;z-index:2;min-width:190px;background:#fff;border:1px solid var(--border-very-dark);border-radius:4px;box-shadow: rgb(0, 0, 0, .08) 1px 2px 3px} .popover--active .popover__content{opacity:1;visibility:visible;transform:translateY(0px);} .popover--active .popover__trigger{background: var(--background-highlight);border:1px solid var(--border-dark);} .popover__content ul{margin:0;padding:0;list-style:none;} .popover__content ul li{margin:0;padding:8px 20px;list-style:none;cursor:pointer;border-bottom:1px solid var(--border-light);text-align:left} .popover__content ul li:first-child{border-top-left-radius: 4px;border-top-right-radius:4px} .popover__content ul li:last-child{border:none;border-bottom-left-radius: 4px;border-bottom-right-radius:4px} .popover__content ul li:hover{background: var(--background-highlight)} .stats{background:#fff;border-radius:5px;padding:20px;margin:0 0 20px 0;border:1px solid var(--border-light)} .stats h2{font-size:1em} .stats__heading{display:flex;gap:20px;align-items:flex-end;margin:0 0 15px 0;font-weight:bold;font-size:1.2em} .stats__heading h2{margin:0;flex:1;} .stats-grid{display:flex;gap:20px;} .stats-grid .stat{flex:1;} .stats-grid .stat__label{margin:0 0 .5em 0;font-size:.9em;font-weight:bold} .stats-grid .stat__data{} .stat__data--red{color:red} .stat__data--yellow{color:#DA6E16} .stat__data--green{color:green} /*******************************************************/ /* Buttons /*******************************************************/ .button-group{display:flex;gap:15px;justify-content:center} @media only screen and (max-width: 768px) { .button-group{display:block} .button-group .button{width:100%;margin:0 0 15px 0;} } .button-link-group{display:flex;gap:15px;} .button{display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:0 1.25em;line-height:1;white-space:nowrap;zzzvertical-align:middle;font-size:inherit;margin:0;border-radius:4px;height:2.6em;text-decoration:none;cursor:pointer;position:relative;font-family:inherit;background:#fff;color:var(--text);border:1px solid var(--primary);touch-action:manipulation;transition:.2s all;font-weight:500} .button:hover{color:#fff;background:var(--primary)} .button__label{} .button__label{font-weight:500} .button__icon{vertical-align:middle;display:inline-flex;align-items:center;justify-content:center;border:none;background:none;outline:none;cursor:pointer;} .button__icon svg{fill:#000;width:24px;height:24px;} .button:hover .button__icon svg{fill:#fff} .button__icon:only-child{margin:0 -.25em;} .button:disabled, .button--disabled{background:#fff;border:1px solid var(--border-dark);color:rgba(0,0,0,0.5);cursor:default;pointer-events:none} .button:disabled .button__icon, .button--disabled .button__icon{filter:invert(1);opacity:.3 !important;} .button--full-width{width:100%;} .button--small{font-size:.8em} .button--small .button__icon svg{width:18px;height:18px;} .button--active{background:#fff;color:#000;} .button--inactive{} .button--inactive .button__icon{opacity:.5} .button--primary{background:var(--primary);color:#fff;border:1px solid transparent;} .button--primary:hover{background:var(--primary-darker);color:#fff;border:1px solid transparent} .button--primary .button__icon img, .button--primary .button__icon svg{filter:invert(100);fill:#000} .button--primary:hover .button__icon img, .button--primary:hover .button__icon svg{filter:invert(100);fill:#000} .button--link,.button--link:hover{background:none !important;border:none;box-shadow:none;padding:0;color:#000;height:auto} .button--link > span:only-child{margin:0 !important;} .button--link:hover .button__icon svg{fill:inherit} .button--link .button__label{margin-right:0;} .button--link .button__icon{margin-left:0;} .button.button--link:disabled, .button.button--link.button--disabled{border:none;} .button.button--link:disabled .button__icon, .button.button--link.button--disabled .button__icon{filter:none;} .button--delete{border:1px solid var(--danger);background:#fff;color:var(--danger)} .button--delete:hover{background:var(--danger);color:#fff;} .button--delete:hover .button__icon img, .button--primary-outline:hover .button__icon svg{filter:invert(100)} .button--delete.button--link{color:var(--danger);} .button--circle{border-radius:100px;width:2.6em;height:2.6em;aspect-ratio:1/1} /*******************************************************/ /* Form Elements /*******************************************************/ fieldset{border: 1px solid var(--border-light);border-radius:4px;margin:0 0 1.5em 0;padding:30px 20px;border:none;background: var(--background-highlight)} fieldset legend{font-size:1.5em;font-weight:bold;padding:0 10px} .field-grid{display:grid;grid-gap:20px;margin:0 0 1.5em 0} .field-grid--2{grid-template-columns:1fr 1fr;} .field-grid--3{grid-template-columns:1fr 1fr 1fr;} .field-grid > .field{margin-bottom:0;} @media only screen and (max-width: 768px) { .field-grid{display:block} .field-grid > .field{margin-bottom:1.5em;} } .field{margin-bottom:1.5em;position:relative} .field:last-child{margin:0;} .field--no-margin{margin:0;} .field--half-margin{margin-bottom:.75em;} .field--horizontal{display:flex;align-items:center} .field__label{margin:0 0 .5em 0;color:#000;font-weight:500} .field--horizontal .field__label{margin:0 1em 0 0;width:20%;line-height:1.2} .field--horizontal .field__input{flex:1;} .field--nested-label{} .field--nested-label .field__label{margin:0 0 .4em 0;font-size:.9em} .field__required{color:red;font-size:13px} .field__input{position:relative;} .field__description{font-size:.9em;margin:6px 0 0 0;} .switch{display:inline-flex;align-items:center;} .switch__label{cursor:pointer;} .switch--position-left .switch__label:first-child{color:#000} .switch--position-right .switch__label:last-child{color:#000} .switch__button{position:relative;background:#fff;border-radius:100px;border:1px solid var(--border-dark);background: var(--background-highlight);width:60px;height:30px;margin:0 12px;cursor:pointer} .switch__button:before{content:"";position:absolute;top:1px;left:1px;bottom:1px;width:24px;height:24px;background:#fff;border:1px solid var(--border-dark);border-radius:100px;cursor:pointer;transition:.2s all} .switch--position-right .switch__button:before{left:calc(100% - 27px);} .field--type-attach-media .button:not(:last-child){margin-right:20px;} .input--textfield, .input--password, .input--email, .input--textarea, .input--select, .input--multiselect, .input--date, .input--number, .input--telephone{width:100%;font-size:inherit;font-family:inherit;padding:.7em .75em .65em .75em;border:1px solid var(--border-dark);border-radius:0;margin:0;color:#000;display:block;background:#fff;border-radius:4px;box-shadow: rgb(0, 0, 0, .05) 1px 1px 1px} .input--textfield{} .input--email{} .input--textarea{} .input--select{-webkit-appearance:none;padding-right:30px;background-color:#fff;background-image:url("data:image/svg+xml;utf8,");background-position:99% 63%;background-repeat:no-repeat;} .input--range{width: 100%;margin: 0;padding: 0;} .input--range::-webkit-slider-thumb {background-clip: padding-box;transform: scale(1.75);} .input--range::-moz-range-thumb {background-clip: padding-box; box-sizing: border-box;transform: scale(1.75);} .input--date{appearance:none;} .input--textfield:disabled, .input--textarea:disabled, .input--select:disabled{background-color:#fff;color:#666} .input--large{font-size:1.5em;} .switch{display:inline-flex;align-items:center;} .switch__label{cursor:pointer;} .switch--position-left .switch__label:first-child{color:#000} .switch--position-right .switch__label:last-child{color:#000} .switch__button{position:relative;background:#fff;border-radius:100px;border:1px solid var(--border-dark);background: var(--background-highlight);width:60px;height:30px;margin:0 12px;cursor:pointer} .switch__button:before{content:"";position:absolute;top:1px;left:1px;bottom:1px;width:24px;height:24px;background:#fff;border:1px solid var(--border-dark);border-radius:100px;cursor:pointer;transition:.2s all} .switch--position-right .switch__button:before{left:calc(100% - 27px);} .form-actions{display:flex;margin-top:1.5em} .form-actions__start{flex:1;} .form-actions__start > .button:not(:last-child){margin-right:20px} .form-actions__end{flex:1;text-align:right} .form-actions__end > .button:not(:last-child){margin-right:20px} .page-actions{display:flex;margin:40px 0 0px} .page-actions__start{flex:1;} .page-actions__start > .button:not(:last-child){margin-right:20px} .page-actions__end{flex:1;text-align:right} .page-actions__end > .button:not(:last-child){margin-right:20px} .terms-frame{width:100%;height:200px;overflow:auto;border:1px solid var(--border-light);padding:20px;} .activity{} .activity-item{padding:20px 0 20px 55px;border-bottom:1px solid var(--border-light);position:relative} .activity-item__icon{position:absolute;top:50%;transform:translateY(-50%);left:0;} .activity-item__icon svg{} .activity-item__icon .icon-and-label__label{display:none;} .activity-item__heading{display:flex;} .activity-item__heading .activity-item__title{flex:1;font-weight:bold;margin:0 0 10px 0} .activity-item__description{white-space: pre-wrap; word-wrap: break-word;} .comanage-status:not(:only-child){margin:0 0 20px 0} /*******************************************************/ /* Auth /*******************************************************/ body.body--auth{min-height:100vh;} body.body--auth .public-site{min-height:80vh;display:flex;align-items:center} body.body--auth .public-site .main{flex:1} .auth{max-width:450px;margin:0 auto 50px auto;border-radius:4px;background:#fff;padding:40px 40px 30px 40px;} .auth .or{display:flex;align-items:center;gap:10px;margin:10px 0} .auth .or span{border-top:1px solid var(--border-light);flex:1} .auth__logo{margin:0 0 20px 0;text-align:center} .auth__logo:only-child{margin:0;} .auth__logo img{width:200px;} .auth__title{margin:0 0 20px 0;text-align:center} .auth__title h1{font-size:30px;margin:0 0 10px 0} .auth__title > *:last-child{margin-bottom:0;} .auth__footer{margin:20px 0 0 0} .auth__footer > *:last-child{margin-bottom:0;} .auth-role-admin .username{cursor:pointer;text-decoration:underline;text-decoration-color: var(--border-dark);} .auth-role-admin .username:hover{} /*******************************************************/ /* Email /*******************************************************/ .email-preview-wrapper {background-image: repeating-linear-gradient(135deg, #F29B91 0px, #F09290 40px, transparent 40px, transparent 50px, #83B3DB 50px, #84ADCB 90px, transparent 90px, transparent 100px);padding: 6px;} .email-preview-wrapper-inner{background: white; width: 100%; height: 100%;padding:30px;display:flex;align-items:center;justify-content:center} .email-preview{margin:0px auto;background:#fff;flex:1} .email-preview > *:last-child{margin-bottom:0;} /*******************************************************/ /* Locator /*******************************************************/ .locator{} .locator__search{display:flex;gap:10px;margin:0 0 15px 0} .locator__search input{} .locator__columns{display:flex;gap:20px;} .locator__start{flex:1;width:25%;max-width:400px;;overflow:auto} .cards{display:grid;grid-template-columns:1fr;grid-gap:10px} .locator__end{flex:1;background:#fff;align-items:flex-start} .locator__end #map{width:100%;min-height:300px;height:100vh;position:sticky !important;top:0} .card{border-radius:5px;background:#fff;border:1px solid var(--border-dark);box-shadow: 1px 1px 3px #dae3ec;padding:15px 15px;} .card__image{margin:0 15px 0 0} .card__image svg{width:42px;height:42px;opacity:.5} .card__header{display:flex;align-items:center;gap:5px;margin:0 0 10px 0} .card__header h2.card__name{justify-content:space-between;flex:1;margin:0;font-size:1em} .card__practice{font-weight:normal;margin:5px 0 0 0} .card__services{margin:0 0 10px 0} .card__services ul{} .card__services ul li{line-height:1.1} .card__toggle-contact{margin:5px 0 0 0;cursor:pointer} .card__contact{margin:10px 0 0 0}